/* =============================================================================
   SHELL: the chrome narvy.io and the app share (2026-09-27, UX pass 2)

   DESIGN.md "two surfaces that must read as ONE product". Loaded LAST on
   every base.html page (logged in or not), after app-shell.css, so:
     1. the top bar is the marketing site's forest band with the Fraunces
        wordmark (going from /pricing to /dashboard keeps the same bar);
     2. page titles speak in Fraunces, like the marketing headlines;
     3. toasts and the command palette get one styled implementation.
   Tokens: DESIGN.md colours only. The forest band is brand chrome for the
   top bar, never a content colour.
   ============================================================================= */

:root {
    --shell-forest: #0d4630;
    --shell-forest-2: #135c3f;
    --shell-forest-hair: rgba(243, 248, 242, 0.16);
    --shell-cream: #f3f8f2;
    --shell-cream-dim: #a9d9bd;
}

/* ---- 1. Top bar ------------------------------------------------------------ */
.navbar,
[data-theme="dark"] .navbar {
    background: var(--shell-forest) !important;
    border-bottom: 1px solid var(--shell-forest-hair) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
.navbar .logo,
[data-theme="dark"] .navbar .logo {
    color: var(--shell-cream) !important;
    gap: 10px !important;
}
.navbar .logo img { height: 30px !important; }
.navbar .logo span {
    font-family: var(--font-title, 'Fraunces', Georgia, serif) !important;
    font-optical-sizing: auto;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1;
    color: var(--shell-cream) !important;
}
.navbar .sidebar-toggle,
.navbar .notification-bell,
[data-theme="dark"] .navbar .notification-bell,
.navbar .user-menu-arrow,
[data-theme="dark"] .navbar .user-menu-arrow {
    color: var(--shell-cream-dim) !important;
}
.navbar .notification-bell:hover,
.navbar .sidebar-toggle:hover { color: var(--shell-cream) !important; }
.navbar .notification-bell,
[data-theme="dark"] .navbar .notification-bell {
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
}
.navbar .notification-bell:hover,
[data-theme="dark"] .navbar .notification-bell:hover {
    background: rgba(243, 248, 242, 0.08) !important;
    border-color: var(--shell-forest-hair) !important;
}
.navbar .nav-links a,
[data-theme="dark"] .navbar .nav-links a {
    color: var(--shell-cream) !important;
    font-weight: 600;
}

/* Segmented controls on the band: the narvy.io .lang-switch treatment
   (hairline pill, active = lifted step) without a third green slab. */
.navbar-end .lang-switcher,
.navbar-end .mode-toggle-group,
.ts-app .navbar-end .lang-switcher,
.ts-app .navbar-end .mode-toggle-group {
    background: rgba(243, 248, 242, 0.06) !important;
    border: 1px solid var(--shell-forest-hair) !important;
    border-radius: 8px !important;
}
.navbar-end .lang-switcher .lang-btn,
.navbar-end .mode-toggle-btn,
.ts-app .navbar-end .lang-switcher .lang-btn,
.ts-app .navbar-end .mode-toggle-btn {
    background: transparent !important;
    color: var(--shell-cream-dim) !important;
    border-radius: 2px !important; /* DESIGN.md hairline step inside the 8px group */
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
.navbar-end .lang-switcher .lang-btn.active,
.navbar-end .mode-toggle-btn.active,
.ts-app .navbar-end .lang-switcher .lang-btn.active,
.ts-app .navbar-end .mode-toggle-btn.active {
    background: rgba(243, 248, 242, 0.14) !important;
    color: var(--shell-cream) !important;
}
.navbar-end .lang-switcher .lang-btn:hover:not(.active),
.navbar-end .mode-toggle-btn:hover:not(.active) { color: var(--shell-cream) !important; }
.navbar-end .lang-switcher .lang-sep { color: var(--shell-forest-hair) !important; }

.ts-app .navbar .plan-chip {
    background: rgba(0, 0, 0, 0.18);
    border-color: var(--shell-forest-hair);
    color: var(--shell-cream-dim);
}
.ts-app .navbar .plan-chip:hover,
.ts-app .navbar .plan-chip:focus-visible {
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(243, 248, 242, 0.3);
    color: var(--shell-cream);
}
.ts-app .navbar .plan-chip-k { color: var(--shell-cream-dim); }
.ts-app .navbar .plan-chip-v { color: var(--shell-cream); }
.ts-app .navbar .plan-chip-meter + .plan-chip-meter { border-left-color: var(--shell-forest-hair); }
.ts-app .navbar .plan-chip-meter.is-over .plan-chip-v,
.ts-app .navbar .plan-chip-meter.is-over .plan-chip-k { color: #fbbf24; }

.ts-app .navbar .user-menu-button:hover {
    background: rgba(243, 248, 242, 0.08);
    border-color: var(--shell-forest-hair);
}
.ts-app .navbar .user-avatar-modern {
    background: rgba(243, 248, 242, 0.1) !important;
    color: var(--shell-cream) !important;
    border-color: var(--shell-forest-hair) !important;
}

/* The one green action on the band, same object as narvy.io "Get started". */
.navbar .navbar-new-scan-btn {
    font-weight: 700 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

/* ---- 1b. Top bar collision guard (prod QA 2026-09-27) ----------------------
   The brand was allowed to flex-shrink (base.css .navbar-brand/.logo
   min-width:0), so when .navbar-end got wider (French labels, a longer plan
   chip) the whale collapsed to ~10px and "Nouvelle analyse" / the burger were
   drawn on top of the wordmark. The brand now never shrinks; the right-hand
   cluster withdraws items instead (DESIGN.md: withdraw, never truncate), in
   this order: secondary chip meters, chip meters, search label, the whole
   chip, the New Scan label, the chevrons. */
.navbar .container { gap: 0.75rem; }
.navbar .navbar-brand { flex: 0 0 auto; }
.navbar .navbar-brand .logo,
.navbar .navbar-brand .logo img,
.navbar .navbar-brand .sidebar-toggle { flex-shrink: 0; }
.navbar .navbar-brand .logo img { width: auto; }
.navbar .navbar-end { min-width: 0; flex: 0 1 auto; }
.navbar .navbar-end > * { flex-shrink: 0; }
@media (max-width: 1560px) {
    .ts-app .navbar .plan-chip .plan-chip-secondary { display: none; }
}
@media (max-width: 1320px) {
    .navbar .cmdk-trigger .cmdk-trigger-label { display: none; }
}
@media (max-width: 1000px) {
    .ts-app .navbar .plan-chip { display: none; }
}
@media (max-width: 860px) {
    .navbar .navbar-new-scan-btn span { display: none; }
    .navbar .navbar-new-scan-btn { padding: 0.45rem 0.6rem !important; }
    .ts-app .navbar-end { gap: 0.6rem; }
}
@media (max-width: 420px) {
    .navbar .navbar-brand { gap: 0.25rem; }
    .navbar .navbar-new-scan-arrow,
    .navbar .user-menu-arrow { display: none; }
    .ts-app .navbar-end { gap: 0.2rem; }
    .navbar .user-menu-button { padding: 0.2rem !important; min-width: 40px !important; }
    .navbar .navbar-end .notification-bell { min-width: 40px !important; }
}
/* 320-360px phones: the bell goes (Notifications stays in the account menu). */
@media (max-width: 360px) {
    .navbar .navbar-end .notification-container { display: none; }
}

/* Command palette trigger in the bar (keyboard hint for the shortcut). */
.cmdk-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 36px;
    padding: 0 0.6rem 0 0.75rem;
    border: 1px solid var(--shell-forest-hair);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
    color: var(--shell-cream-dim);
    font: 600 0.82rem/1 var(--font-body);
    cursor: pointer;
    white-space: nowrap;
}
.cmdk-trigger:hover { color: var(--shell-cream); border-color: rgba(243, 248, 242, 0.3); }
.cmdk-trigger:focus-visible { outline: 2px solid var(--accent, #00d972); outline-offset: 2px; }
.cmdk-trigger kbd {
    font: 600 0.72rem/1 var(--font-mono);
    color: var(--shell-cream-dim);
    border: 1px solid var(--shell-forest-hair);
    border-radius: 2px;
    padding: 3px 5px;
}
@media (max-width: 1180px) { .cmdk-trigger .cmdk-trigger-label { display: none; } }
@media (max-width: 760px) {
    .cmdk-trigger { width: 36px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
    .cmdk-trigger kbd { display: none; }
}

/* ---- 2. Page titles: Fraunces, like the marketing headlines ---------------- */
.main-content h1 {
    font-family: var(--font-title, 'Fraunces', Georgia, serif) !important;
    font-optical-sizing: auto;
}
.ts-app .main-content h1 {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    word-spacing: normal;
}
@media (max-width: 640px) {
    .ts-app .main-content h1 { font-size: 1.5rem !important; }
}

/* ---- 3. Toasts (DESIGN.md "Toasts") ---------------------------------------- */
.toast-container {
    position: fixed;
    right: 20px;
    bottom: 96px; /* above the chat bubble (bottom-right, 60px) */
    z-index: 10050;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: min(400px, calc(100vw - 32px));
    pointer-events: none;
}
.toast-container .toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: 1.1rem minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.65rem;
    width: 100%;
    padding: 12px 10px 12px 14px;
    background: var(--surface-elevated, #1f2922);
    color: var(--text-primary, #f2f6f3);
    border: 1px solid var(--border-strong, #3a463e);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font: 500 0.9rem/1.45 var(--font-body);
    opacity: 1;
    transform: none;
    animation: ts-toast-in 0.18s ease-out;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.toast-container .toast > i {
    margin-top: 0.15rem;
    font-size: 1rem;
    color: var(--text-secondary, #b5c2bb);
}
.toast-container .toast-success > i { color: var(--accent, #00d972); }
.toast-container .toast-error > i { color: #f87171; }
.toast-container .toast-warning > i { color: #fbbf24; }
.toast-container .toast-msg { min-width: 0; overflow-wrap: anywhere; }
.toast-container .toast-close {
    background: none;
    border: 0;
    color: var(--text-secondary, #b5c2bb);
    cursor: pointer;
    width: 28px;
    height: 28px;
    margin: -4px -2px -4px 0;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1;
}
.toast-container .toast-close:hover { color: var(--text-primary); background: rgba(243, 248, 242, 0.08); }
.toast-container .toast-close:focus-visible { outline: 2px solid var(--accent, #00d972); outline-offset: 1px; }
.toast-container .toast.toast-exit { opacity: 0; transform: translateY(6px); }
@keyframes ts-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
    .toast-container { right: 16px; left: 16px; bottom: 88px; width: auto; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
    .toast-container .toast { animation: none; transition: none; }
}

/* ---- 4. Command palette (DESIGN.md "Command palette") ---------------------- */
.cmdk-overlay {
    position: fixed;
    inset: 0;
    z-index: 10040;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
}
.cmdk-overlay[hidden] { display: none; }
.cmdk {
    width: min(640px, 100%);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--surface, #182019);
    border: 1px solid var(--border-strong, #3a463e);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    font-family: var(--font-body);
}
.cmdk-input-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--border-subtle, #29332c);
}
.cmdk-input-row > i { color: var(--text-secondary); font-size: 0.9rem; }
.cmdk-input {
    flex: 1;
    min-width: 0;
    height: 52px;
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    color: var(--text-primary);
    font: 500 1rem/1 var(--font-body);
    box-shadow: none !important;
    padding: 0 !important;
}
.cmdk-input:focus, .cmdk-input:focus-visible { outline: 0 !important; border: 0 !important; box-shadow: none !important; }
.cmdk-input-row:focus-within { box-shadow: inset 0 -2px 0 var(--accent, #00d972); }
.cmdk-input::placeholder { color: var(--text-muted, #98a69f); }
.cmdk-esc {
    font: 600 0.72rem/1 var(--font-mono);
    color: var(--text-muted, #98a69f);
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    padding: 3px 5px;
}
.cmdk-list { overflow-y: auto; padding: 0.4rem 0 0.6rem; margin: 0; list-style: none; }
.cmdk-group {
    padding: 0.7rem 1rem 0.3rem;
    font: 600 0.72rem/1.3 var(--font-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #98a69f);
}
.cmdk-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0.4rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.92rem;
}
.cmdk-item > i { width: 1.1rem; text-align: center; color: var(--text-secondary); font-size: 0.85rem; }
.cmdk-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item-meta { color: var(--text-secondary); font-size: 0.8rem; white-space: nowrap; }
.cmdk-item[aria-selected="true"] { background: var(--surface-elevated, #1f2922); }
.cmdk-item[aria-selected="true"] > i { color: var(--accent-text, #00d972); }
.cmdk-empty { padding: 1.25rem 1rem; color: var(--text-secondary); font-size: 0.9rem; }
.cmdk-foot {
    display: flex;
    gap: 1rem;
    padding: 0.55rem 1rem;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted, #98a69f);
    font-size: 0.78rem;
}
.cmdk-foot kbd { font: 600 0.72rem/1 var(--font-mono); border: 1px solid var(--border-subtle); border-radius: 2px; padding: 2px 4px; margin-right: 0.25rem; }
@media (max-width: 640px) {
    .cmdk-overlay { padding-top: 10vh; }
    .cmdk-foot { display: none; }
}

/* ---- 5. Sign-in pages: the bridge between narvy.io and the app ------------- */
.auth-container { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.auth-card .card-icon { display: none; }
.auth-card h2 {
    font-family: var(--font-title, 'Fraunces', Georgia, serif) !important;
    font-optical-sizing: auto;
    font-weight: 600 !important;
    font-size: 1.75rem !important;
    letter-spacing: -0.02em !important;
    margin-top: 0 !important;
}
.remember-me .checkbox-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 0.55rem; }
.remember-me .checkbox-wrapper input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    flex: 0 0 18px;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: var(--accent, #00d972);
}
.remember-me .checkbox-label { font-weight: 500; font-size: 0.9rem !important; }

/* ---- 6. Chat launcher: brand chrome, not a second primary action ---------- */
/* It was a solid accent circle on every page, the most saturated thing on
   screen, competing with the one primary action. Same forest as the top bar. */
body .ts-chatbot-launcher {
    background: var(--shell-forest-2) !important;
    color: var(--shell-cream) !important;
    border: 1px solid rgba(243, 248, 242, 0.22) !important;
    width: 52px !important;
    height: 52px !important;
    font-size: 1.15rem !important;
}
body .ts-chatbot-launcher:hover { background: var(--shell-forest) !important; transform: none !important; }