/** * DECTO App Force Layer — ALWAYS loaded last in * Guarantees app parity beats page-* bundles and hotfixes. * Do NOT touch post-composer styles. */ /* ── viewport lock (fixes left shift) ── */ html, body.app-shell { overflow-x: clip !important; max-width: 100% !important; width: 100% !important; } body.app-shell .main-content { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-inline: 0 !important; overflow-x: clip !important; box-sizing: border-box !important; } @media (min-width: 768px) { body.app-shell .main-content { max-width: 560px !important; margin-inline: auto !important; background: var(--bn-surface, #FFFCF8) !important; } /* Explore / doctors / search / chat need a wider desktop canvas */ body.app-shell.bn-explore-route .main-content, body.app-shell:has(.bn-explore-page) .main-content, body.app-shell:has(.bn-doctors-page) .main-content, body.app-shell:has(.bn-search-page) .main-content, body.app-shell.bn-chat-active .main-content, body.app-shell:has(.bn-chat-page) .main-content { max-width: min(1120px, 96vw) !important; } } @media (min-width: 1024px) { body.app-shell:has(.bn-explore-page) .main-content { max-width: min(1200px, 94vw) !important; } body.app-shell:has(.bn-feed-page) .main-content { max-width: 640px !important; } body.app-shell:has(.bn-profile-page) .main-content, body.app-shell:has(.doctor-profile-page) .main-content, body.app-shell:has(.clinic-profile) .main-content { max-width: min(720px, 92vw) !important; } } /* ── Lux AppBar like Flutter DectoLuxAppBar ── */ body.app-shell .app-header, body.app-shell .app-header--luxury { position: sticky !important; top: 0 !important; z-index: 200 !important; background: #F3EFE6 !important; border-bottom: 1px solid rgba(26, 61, 54, 0.07) !important; box-shadow: none !important; backdrop-filter: none !important; padding: max(10px, env(safe-area-inset-top)) 8px 10px !important; } body.app-shell .app-header-inner, body.app-shell .app-header-inner--app { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; gap: 6px !important; max-width: 560px !important; margin: 0 auto !important; width: 100% !important; min-height: 52px !important; padding-inline: 4px !important; } body.app-shell .app-header-cluster { display: inline-flex !important; align-items: center !important; gap: 2px !important; } body.app-shell .app-header-cluster--start { justify-self: start !important; } body.app-shell .app-header-cluster--end { justify-self: end !important; } body.app-shell .app-header-inner .bn-wordmark--header, body.app-shell .app-header-inner .app-brand-luxury { justify-self: center !important; grid-column: 2 !important; } body.app-shell .app-header-icon { width: 42px !important; height: 42px !important; border-radius: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #1A3D36 !important; background: transparent !important; border: none !important; text-decoration: none !important; position: relative !important; } body.app-shell .app-header-icon i, body.app-shell .app-header-icon .bn-ui-icon, body.app-shell .app-header-icon svg { font-size: 20px !important; width: 22px !important; height: 22px !important; color: #1A3D36 !important; } body.app-shell .app-header-icon--search { color: #C9A66B !important; } body.app-shell .app-header-icon--search i, body.app-shell .app-header-icon--search .bn-ui-icon { color: #C9A66B !important; } /* hide legacy data-label tooltips that clutter mobile */ body.app-shell .app-header-icon[data-label]::after { display: none !important; } /* ── Menu drawer — forest green + readable text (light & dark) ── */ body.app-shell aside#luxMenuPanel.lux-menu-panel--ig, body.app-shell .lux-menu-panel.lux-menu-panel--ig { background: radial-gradient(ellipse 72% 48% at 100% 0%, rgba(61, 107, 94, 0.35), transparent 58%), linear-gradient(180deg, #142824 0%, #1A3D36 32%, #274842 100%) !important; } body.app-shell .lux-menu-sheet { background: transparent !important; } body.app-shell .lux-menu-item, body.app-shell .lux-menu-item strong, body.app-shell aside#luxMenuPanel .lux-menu-item, body.app-shell aside#luxMenuPanel .lux-menu-item strong { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; } body.app-shell .lux-menu-item small, body.app-shell aside#luxMenuPanel .lux-menu-item small { color: rgba(232, 212, 168, 0.9) !important; -webkit-text-fill-color: rgba(232, 212, 168, 0.9) !important; } body.app-shell .lux-menu-head__label, body.app-shell .lux-menu-head__hint { color: #f5e6b8 !important; -webkit-text-fill-color: #f5e6b8 !important; } body.app-shell .bn-locale-panel { background: rgba(255, 252, 248, 0.96) !important; border: 1px solid rgba(201, 166, 107, 0.35) !important; } body.app-shell .bn-locale-option, body.app-shell .bn-locale-option__name, body.app-shell .bn-locale-panel__title { color: #142824 !important; -webkit-text-fill-color: #142824 !important; } /* ── Feed — Instagram / Flutter home (beats page-feed cinema) ── */ body.app-shell .bn-feed-hero { display: none !important; } body.app-shell #feedPosts, body.app-shell .bn-feed-list { display: flex !important; flex-direction: column !important; gap: 0 !important; width: 100% !important; max-width: 560px !important; margin: 0 auto !important; padding: 0 !important; } body.app-shell .bn-feed-card, body.app-shell .bn-feed-card.feed-post--cinema, body.app-shell .bn-feed-card.feed-post--iconic { background: #FFFCF8 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; contain: none !important; content-visibility: visible !important; transform: none !important; } body.app-shell .bn-feed-card + .bn-feed-card { border-top: 0.5px solid rgba(111, 122, 116, 0.14) !important; } /* author ABOVE media — not overlay */ body.app-shell .bn-feed-card__author, body.app-shell .bn-feed-card__author--app { position: relative !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; z-index: 1 !important; padding: 10px 12px 8px !important; background: #FFFCF8 !important; } body.app-shell .bn-feed-card__author .feed-post-author, body.app-shell .bn-feed-card__author--app .feed-post-author { color: #142824 !important; text-shadow: none !important; } body.app-shell .bn-feed-card__author strong, body.app-shell .bn-feed-card__author .feed-post-author-name, body.app-shell .bn-feed-card__author--app strong { color: #142824 !important; -webkit-text-fill-color: #142824 !important; text-shadow: none !important; background: none !important; font-weight: 900 !important; font-size: 14px !important; } body.app-shell .bn-feed-card__author img, body.app-shell .bn-feed-avatar-ring img { width: 36px !important; height: 36px !important; border-radius: 50% !important; border: 2px solid #FFFCF8 !important; object-fit: cover !important; } body.app-shell .bn-feed-avatar-ring { display: inline-flex !important; padding: 2px !important; border-radius: 50% !important; background: linear-gradient(145deg, #3F6D5A, #C7A86E) !important; } body.app-shell .bn-feed-card__media::after { display: none !important; content: none !important; } body.app-shell .bn-feed-card__media { background: #000 !important; width: 100% !important; } body.app-shell .bn-feed-card__media .feed-post-media { aspect-ratio: 1 / 1 !important; min-height: 0 !important; max-height: none !important; width: 100% !important; background: #000 !important; } body.app-shell .bn-feed-card__media .feed-post-media img, body.app-shell .bn-feed-card__media .feed-post-media video { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain !important; background: #000 !important; } body.app-shell .bn-feed-card__rail { display: none !important; } body.app-shell .feed-post-compact-actions--app, body.app-shell .bn-feed-card__body { padding: 6px 10px 12px !important; background: #FFFCF8 !important; } body.app-shell .feed-post-compact-actions--app .feed-post-icon-actions { display: flex !important; align-items: center !important; gap: 4px !important; width: 100% !important; } body.app-shell .feed-post-compact-actions--app .feed-save-pill { margin-inline-start: auto !important; } body.app-shell .feed-post-icon-actions .feed-stat-pill, body.app-shell .feed-post-icon-actions .feed-save-pill { background: transparent !important; border: none !important; box-shadow: none !important; color: #6F7A74 !important; } body.app-shell .bn-feed-card__caption, body.app-shell .bn-feed-card__desc { color: #142824 !important; -webkit-text-fill-color: #142824 !important; background: none !important; padding: 0 12px 12px !important; margin: 0 !important; } body.app-shell .bn-feed-card__caption strong, body.app-shell .bn-feed-card__caption .feed-post-author-name { color: #142824 !important; -webkit-text-fill-color: #142824 !important; background: none !important; margin-inline-end: 0.35em !important; margin-left: 0 !important; } /* ── Bottom nav ── */ body.app-shell .bottom-nav { height: 68px !important; background: #F3EFE6 !important; border-top: 1px solid rgba(26, 61, 54, 0.07) !important; box-shadow: none !important; } body.app-shell .bottom-nav-inner { max-width: 560px !important; margin: 0 auto !important; height: 100% !important; } body.app-shell .bottom-nav-item.active, body.app-shell .bottom-nav-item.is-active { color: #1A3D36 !important; background: rgba(26, 61, 54, 0.1) !important; border-radius: 20px !important; } /* ── Patient + own clinic/doctor profiles (NOT public visitor doctor) ── */ body.app-shell.patient-profile .bn-profile-page, body.app-shell.clinic-profile-owner .bn-profile-page, body.app-shell.doctor-profile-owner .bn-profile-page, body.app-shell.cp-own-profile.bn-profile-page { max-width: 560px !important; margin-inline: auto !important; padding-inline: 16px !important; background: transparent !important; } body.app-shell.patient-profile .bn-profile-hero, body.app-shell.patient-profile .bn-profile-card { border-radius: 28px 22px 30px 24px !important; background: #FFFCF8 !important; border: 1px solid rgba(26, 61, 54, 0.08) !important; box-shadow: 0 8px 28px rgba(20, 40, 36, 0.08) !important; } body.app-shell.patient-profile .bn-profile-name, body.app-shell.clinic-profile-owner .bn-profile-name, body.app-shell.doctor-profile-owner .bn-profile-name { font-weight: 900 !important; color: #142824 !important; letter-spacing: -0.02em !important; } body.app-shell.patient-profile .bn-profile-stats, body.app-shell.clinic-profile-owner .bn-profile-stats, body.app-shell.doctor-profile-owner .bn-profile-stats { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; margin: 14px 0 !important; } body.app-shell.patient-profile .bn-profile-stat, body.app-shell.clinic-profile-owner .bn-profile-stat, body.app-shell.doctor-profile-owner .bn-profile-stat { background: #FFFCF8 !important; border-radius: 18px !important; border: 1px solid rgba(26, 61, 54, 0.08) !important; padding: 12px 8px !important; text-align: center !important; } body.app-shell.patient-profile .bn-profile-stat strong, body.app-shell.clinic-profile-owner .bn-profile-stat strong, body.app-shell.doctor-profile-owner .bn-profile-stat strong { display: block !important; font-weight: 900 !important; color: #1A3D36 !important; font-size: 1.15rem !important; } /* Keep public doctor visitor profile untouched */ body.app-shell.bn-profile--visitor .bn-profile-gold-frame, body.app-shell.doctor-profile-page.bn-profile--visitor { /* no force overrides */ } [data-theme="dark"] body.app-shell .app-header, [data-theme="dark"] body.app-shell .bottom-nav { background: #1D2825 !important; border-color: rgba(232, 212, 168, 0.09) !important; } [data-theme="dark"] body.app-shell .app-header-icon, [data-theme="dark"] body.app-shell .app-header-icon i { color: #E8D4A8 !important; } [data-theme="dark"] body.app-shell .bn-feed-card, [data-theme="dark"] body.app-shell .bn-feed-card__author, [data-theme="dark"] body.app-shell .bn-feed-card__body { background: #212C28 !important; } [data-theme="dark"] body.app-shell .bn-feed-card__author strong, [data-theme="dark"] body.app-shell .bn-feed-card__caption { color: #F8FCFA !important; -webkit-text-fill-color: #F8FCFA !important; } /* v14f — chat only (site header stays #F3EFE6; browser chrome via theme-color meta) */ body.app-shell #chatMessages.bn-chat-messages, body.app-shell .bn-chat-messages { direction: ltr !important; } body.app-shell .bn-chat-bubble { direction: rtl !important; text-align: start !important; } body.app-shell .bn-chat-bubble--mine, body.app-shell #chatMessages .bn-chat-bubble--mine { align-self: flex-end !important; margin-left: auto !important; margin-right: 0 !important; background: #0C4A43 !important; background-color: #0C4A43 !important; background-image: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; opacity: 1 !important; border-radius: 18px 18px 4px 18px !important; } body.app-shell .bn-chat-bubble--mine *, body.app-shell #chatMessages .bn-chat-bubble--mine p, body.app-shell #chatMessages .bn-chat-bubble--mine span { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; opacity: 1 !important; font-weight: 700 !important; } body.app-shell .bn-chat-bubble--theirs, body.app-shell #chatMessages .bn-chat-bubble--theirs { align-self: flex-start !important; margin-right: auto !important; margin-left: 0 !important; background: #FFFFFF !important; background-color: #FFFFFF !important; background-image: none !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; border: 1.5px solid rgba(12, 74, 67, 0.22) !important; border-radius: 18px 18px 18px 4px !important; opacity: 1 !important; } body.app-shell .bn-chat-bubble--theirs *, body.app-shell #chatMessages .bn-chat-bubble--theirs p, body.app-shell #chatMessages .bn-chat-bubble--theirs span { color: #111111 !important; -webkit-text-fill-color: #111111 !important; opacity: 1 !important; } body.app-shell .bn-chat-list-item { background: #FFFFFF !important; color: #111111 !important; opacity: 1 !important; } body.app-shell .bn-chat-head-btn, body.app-shell .bn-chat-head-btn i { color: #D6BC7E !important; -webkit-text-fill-color: #D6BC7E !important; } body.app-shell.bn-chat-active #chatCompose.bn-chat-compose:not([hidden]) { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; inset: auto !important; z-index: 5 !important; width: 100% !important; max-width: none !important; margin: 0 !important; flex: 0 0 auto !important; } body.app-shell.bn-chat-active .main-content { padding-bottom: calc(var(--bn-bottom-dock-h, 112px) + 14px + env(safe-area-inset-bottom, 0px)) !important; } @media (min-width: 900px) { body.app-shell.bn-chat-active .main-content { max-width: min(1120px, 96vw) !important; padding-bottom: 20px !important; } }