html, body {
    height: 100%;
    margin: 0;
}

/* Mobile app-shell lock, scoped to the chat route only (via :has on the shell's route-chat class,
   so Login/Settings/Knowledge keep their normal scrolling). The document itself never scrolls —
   the chat scrolls through its inner container. This stops iOS Safari from collapsing its toolbar
   or panning the page when the keyboard opens, which is exactly what made the fixed top controls
   drift or disappear. (This is how ChatGPT/Claude keep their top bar put while the keyboard is up.) */
@media (max-width: 767px) {
    html:has(.route-chat),
    body:has(.route-chat) {
        position: fixed;
        overflow: hidden;
        width: 100%;
        height: 100%;
        overscroll-behavior: none;
    }
}

body {
    background: var(--ava-navy);
    color: var(--ava-text-1);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* =========================================================
   FULL-SCREEN LOADER — "Pulse Halo": the Avantgarde brain
   mark breathes while two soft rings ripple outward. Shared:
   the router's <Authorizing> state and any centered overlay
   (e.g. the Knowledge upload overlay) use the same .ava-spinner.
   ========================================================= */
.auth-loading {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    background: var(--ava-loader-bg);
}
.auth-loading-text {
    font: 600 15.5px Inter;
    letter-spacing: .2px;
    color: var(--ava-loader-text);
}

.ava-spinner {
    position: relative;
    width: 120px;
    height: 120px;
    display: grid;
    place-items: center;
}
.ava-spinner::before,
.ava-spinner::after {
    content: "";
    position: absolute;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 2px solid var(--ava-loader-ring);
    animation: ava-ripple 1.8s ease-out infinite;
}
.ava-spinner::after { animation-delay: .9s; }
.ava-spinner .brain {
    /* Lifted above the ::before/::after rings — the ripple passes behind the mark. */
    position: relative;
    z-index: 1;
    width: 62px;
    height: auto;
    animation: ava-breathe 1.8s ease-in-out infinite;
}

@keyframes ava-breathe { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.04); } }
@keyframes ava-ripple { 0% { transform: scale(.55); opacity: .85; } 100% { transform: scale(1.5); opacity: 0; } }

/* =========================================================
   Root background — flat deep navy, no decorative glow.
   Global CSS (not Razor CSS isolation) so iOS pull-to-refresh
   reveals the same navy behind the app shell.
   ========================================================= */
html { background-color: var(--ava-ink) !important; }
body { background-color: var(--ava-navy) !important; }

#app,
.layout-root,
.ava-app {
    background-color: var(--ava-navy) !important;
    background-image: none !important;
}

/* =========================================================
   Custom scrollbar (opt-in via .ava-scroll)
   ========================================================= */
.ava-scroll { scrollbar-width: thin; scrollbar-color: var(--ava-scroll-thumb) transparent; }
.ava-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.ava-scroll::-webkit-scrollbar-thumb { background: var(--ava-scroll-thumb); border-radius: var(--r-pill); }
.ava-scroll::-webkit-scrollbar-thumb:hover { background: var(--ava-scroll-thumb-hover); }
.ava-scroll::-webkit-scrollbar-track { background: transparent; }

/* =========================================================
   Surfaces
   ========================================================= */
.ava-panel {
    background: var(--ava-navy-deep);
    border: 1px solid var(--ava-line-soft);
}
.ava-card {
    background: var(--ava-card);
    border: 1px solid var(--ava-line-soft);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.ava-card__head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ava-line-soft);
}
.ava-card__title { font: 700 15px var(--font-sans); color: var(--ava-text-1); }
.ava-card__sub   { font: 400 11.5px var(--font-sans); color: var(--ava-text-3); margin-top: 2px; }
.ava-card__body  { padding: 16px 18px; }

/* =========================================================
   Inputs
   ========================================================= */
.ava-field {
    width: 100%;
    background: var(--ava-navy);
    border: 1px solid var(--ava-line);
    border-radius: var(--r-sm);
    color: var(--ava-text-1);
    font: 400 14px var(--font-sans);
    padding: 11px 13px;
    outline: none;
    transition: border-color var(--ava-dur-1), box-shadow var(--ava-dur-1);
}
.ava-field::placeholder { color: var(--ava-text-3); }
.ava-field:focus { border-color: var(--ava-focus); box-shadow: 0 0 0 3px var(--ava-focus-r); }
textarea.ava-field { resize: vertical; line-height: 1.5; }

.ava-label { display: block; font: 600 12px var(--font-sans); color: var(--ava-text-2); margin-bottom: 6px; }
.ava-req   { color: var(--ava-aqua); }

.ava-select-wrap { position: relative; }
.ava-select {
    width: 100%; appearance: none; -webkit-appearance: none;
    background: var(--ava-navy);
    border: 1px solid var(--ava-line);
    border-radius: var(--r-sm);
    color: var(--ava-text-1);
    font: 400 13.5px var(--font-sans);
    padding: 10px 34px 10px 13px;
    outline: none; cursor: pointer;
    transition: border-color var(--ava-dur-1), box-shadow var(--ava-dur-1);
}
.ava-select:focus { border-color: var(--ava-focus); box-shadow: 0 0 0 3px var(--ava-focus-r); }
.ava-select option { background: var(--ava-navy-deep); color: var(--ava-text-1); }
.ava-select-wrap::after {
    content: "▾"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: var(--ava-text-3); font-size: 10px;
}

/* iOS Safari auto-zooms into any focused text control whose font is below 16px and does not
   zoom back out, leaving the page scrolled and shifted. A 16px minimum on every text-entry
   control on phones prevents the zoom entirely. Applies app-wide (Settings, Knowledge, connector
   login, …); Chat and Login carry their own equivalent overrides for their bespoke controls. */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* =========================================================
   Selection & navigation (NEUTRAL slate — never teal/green)
   No transition on `background` here by design.
   ========================================================= */
.ava-nav-item, .ava-list-item, .ava-tab, .ava-seg {
    display: flex; align-items: center; gap: 11px;
    text-align: left;
    background: transparent; border: none;
    color: var(--ava-text-2); cursor: pointer;
    font: 600 13.5px var(--font-sans);
    transition: color var(--ava-dur-1), opacity var(--ava-dur-1), filter var(--ava-dur-1);
}
.ava-nav-item, .ava-list-item { width: 100%; border-radius: var(--r-sm); padding: 10px 13px; }
.ava-tab, .ava-seg { border-radius: var(--r-pill); padding: 8px 15px; white-space: nowrap; flex: 0 0 auto; justify-content: center; }

.ava-nav-item:hover, .ava-list-item:hover, .ava-tab:hover, .ava-seg:hover {
    background: var(--ava-hover); color: var(--ava-text-1);
}
.ava-nav-item.is-selected, .ava-list-item.is-selected,
.ava-tab.is-selected, .ava-seg.is-selected {
    background: var(--ava-select);
    color: var(--ava-text-1);
    box-shadow: 0 0 0 1px var(--ava-select-ring) inset;
}

/* Left rail (settings sidebar) on the deepest ink surface */
.ava-rail { background: var(--ava-ink); border-right: 1px solid var(--ava-line-soft); }

/* Segmented control container */
.ava-seg-group {
    display: inline-flex; gap: 4px; padding: 4px;
    border-radius: var(--r-sm);
    background: rgba(var(--ava-rgb-white),0.03);
    border: 1px solid var(--ava-line-soft);
}

/* =========================================================
   Badges & chips
   ========================================================= */
.ava-badge {
    display: inline-flex; align-items: center;
    font: 600 9.5px var(--font-sans); letter-spacing: .4px; text-transform: uppercase;
    padding: 3px 8px; border-radius: var(--r-pill);
    background: rgba(var(--ava-rgb-slate),0.10);
    border: 1px solid var(--ava-line);
    color: var(--ava-text-2);
}
.ava-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 13px var(--font-sans); color: var(--ava-text-1);
    padding: 6px 12px; border-radius: var(--r-pill);
    background: rgba(var(--ava-rgb-slate),0.08);
    border: 1px solid var(--ava-line);
}

/* =========================================================
   Modal / dialog
   ========================================================= */
.ava-overlay {
    position: fixed; inset: 0; z-index: 120;
    background: rgba(var(--ava-rgb-overlay),0.66);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    display: grid; place-items: center; padding: 24px;
}
.ava-modal {
    width: 880px; max-width: 100%; max-height: 88vh;
    display: flex; flex-direction: column;
    background: var(--ava-card);
    border: 1px solid var(--ava-line);
    border-radius: 18px;
    box-shadow: var(--shadow-modal);
    overflow: hidden;
}
.ava-modal__head {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 20px; flex: 0 0 auto;
    border-bottom: 1px solid var(--ava-line);
}
.ava-modal__title { flex: 1; font: 700 16px var(--font-sans); color: var(--ava-text-1); }
.ava-modal__body  { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; }
.ava-modal__foot  {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 20px; flex: 0 0 auto;
    border-top: 1px solid var(--ava-line);
}

/* =========================================================
   Utility helpers
   ========================================================= */
.ava-error {
    padding: 11px 14px; border-radius: var(--r-sm);
    background: rgba(var(--ava-rgb-brick),0.14); border: 1px solid rgba(var(--ava-rgb-brick),0.40);
    font: 500 12.5px var(--font-sans); color: var(--ava-danger-text);
}
.ava-empty {
    padding: 24px 16px; text-align: center;
    border: 1px dashed var(--ava-line); border-radius: var(--r-md);
    font: 400 12.5px var(--font-sans); color: var(--ava-text-3);
}
.ava-divider { height: 1px; background: var(--ava-line-soft); border: 0; }
.ava-text-muted { color: var(--ava-text-3); }
.ava-text-soft  { color: var(--ava-text-2); }

/* =========================================================
   NEURAL BRAIN — brand brain artwork + flickering node network.
   The artwork is a background image so a missing file shows the
   node network alone rather than a broken-image icon.
   ========================================================= */
.ava-brain {
    position: relative;
    width: 100%;
    margin: 0 auto;
    pointer-events: none;
}
.ava-brain-img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.92;
    pointer-events: none;
}
.ava-brain-nodes { position: absolute; inset: 0; pointer-events: none; }

.np {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(var(--ava-rgb-ice),0.95), rgba(var(--ava-rgb-brain-glow),0.55) 42%, transparent 72%);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    animation: npFlick 4s ease-in-out infinite backwards;
}
@keyframes npFlick {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    26%  { opacity: 0; }
    100% { opacity: 0; }
}

/* LIGHT THEME: the glow artwork (pale aqua + screen blending) cannot read on white —
   swap to the re-inked deep-teal copies of the same PNGs instead of a dark stage. */
:root[data-theme="light"] .ava-brain-img { content: url("../brain-deep.png"); opacity: 1; }
:root[data-theme="light"] .np {
    background: radial-gradient(circle, #0A6E64, rgba(10,110,100,0.35) 55%, transparent 72%);
    mix-blend-mode: normal;
}

/* LIGHT THEME: recolored deep-teal user-menu waves (the !important pair overrides
   the image's inline opacity:1 / mix-blend-mode:screen in light theme only) */
:root[data-theme="light"] .um-waves {
    content: url("../waves-deep.png");
    opacity: 0.5 !important;
    mix-blend-mode: normal !important;
}

/* =========================================================
   HOME PAGE — flat navy, no radial glow
   ========================================================= */
.home-page {
    min-height: calc(100vh - 60px);
    width: 100%;
    background: var(--ava-navy) !important;
}