/* Theme Variables Engine */
body[data-theme="deepspace"] {
    --bg-base: #0a0c10; --bg-surface: #121620; --bg-surface-hover: #1a202c;
    --border-color: #212938; --accent-glow: #00f0ff; --accent-dim: rgba(0, 240, 255, 0.1);
    --text-main: #e2e8f0; --text-muted: #8892b0;
}

/* PIPE-02 persistent application shell */
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sidebar-brand { width:100%; border:0; background:transparent; color:inherit; cursor:pointer; display:flex; align-items:center; gap:.7rem; font:inherit; }
.sidebar-nav { overflow-y:auto; scrollbar-width:thin; }
.sidebar-nav button, .sidebar-nav a, .sidebar-footer button { width:100%; color:inherit; background:transparent; border:0; text-align:left; font:inherit; cursor:pointer; padding:.65rem .8rem; border-radius:.45rem; }
.sidebar-nav button:hover, .sidebar-nav a:hover, .sidebar-nav button:focus-visible, .sidebar-nav a:focus-visible, .sidebar-footer button:hover { background:var(--accent-dim); outline:none; }
.sidebar-nav button:disabled { opacity:.58; cursor:not-allowed; }
.dropdown-menu { display:none; padding-left:.7rem; }
.has-dropdown.open > .dropdown-menu { display:block; }
.has-dropdown.open > .dropdown-toggle .chevron { transform:rotate(90deg); }
.nav-badge { float:right; font-size:.68em; border:1px solid currentColor; border-radius:999px; padding:.1rem .35rem; }
.task-menu { max-height:18rem; overflow-y:auto; }
.recent-chats { margin-top:auto; padding:.85rem; border-top:1px solid var(--border-color); }
.sidebar-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; opacity:.7; }
.sidebar-empty { font-size:.82rem; opacity:.6; }
.mobile-menu-button { display:none; position:fixed; top:.75rem; left:.75rem; z-index:1200; min-width:2.75rem; min-height:2.75rem; border-radius:.5rem; }
.drawer-scrim { position:fixed; inset:0; z-index:1050; background:rgba(0,0,0,.62); }
.workspace { min-height:calc(100vh - 8rem); display:grid; grid-template-rows:auto 1fr auto; gap:1.25rem; }
.workspace-intro .eyebrow { color:var(--accent-glow); text-transform:uppercase; letter-spacing:.13em; font-size:.72rem; }
.workspace-intro h1 { margin:.2rem 0; }
.message-list { border:1px solid var(--border-color); border-radius:.8rem; min-height:14rem; padding:1rem; background:var(--bg-surface); }
.empty-chat-state { display:grid; place-items:center; height:100%; min-height:12rem; opacity:.65; }
.composer-shell { display:grid; grid-template-columns:1fr auto; gap:.75rem; align-items:end; }
.composer-shell textarea { width:100%; resize:vertical; min-height:4.5rem; border:1px solid var(--border-color); border-radius:.75rem; background:var(--bg-surface); color:var(--text-main); padding:.85rem; }
.send-button { min-height:2.75rem; padding:0 1.1rem; border-radius:.6rem; border:0; background:var(--accent-glow); color:var(--bg-base); font-weight:700; }
.modal-overlay { position:fixed; inset:0; z-index:2000; display:grid; justify-items:center; align-items:start; padding:clamp(1rem,15vh,10rem) 1rem 1rem; background:rgba(0,0,0,.68); }
.overlay-menu { z-index:2000; }
.overlay-menu .modal-card { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.modal-card { width:min(42rem,100%); max-height:min(80vh,52rem); background:var(--bg-surface); border:1px solid var(--border-color); border-radius:.8rem; box-shadow:0 1rem 4rem rgba(0,0,0,.45); overflow:hidden; }
.modal-header, .modal-body { padding:1rem 1.25rem; }
.modal-header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border-color); }
.modal-body { display:grid; gap:1rem; min-height:0; }
.overlay-scroll { overflow:auto; overscroll-behavior:contain; }
.overlay-sticky { position:sticky; z-index:1; background:var(--bg-surface); }
.overlay-footer { display:flex; justify-content:flex-end; gap:.75rem; padding:1rem 1.25rem; border-top:1px solid var(--border-color); background:var(--bg-surface); }
.notification-region { position:fixed; z-index:3000; top:1rem; right:1rem; display:grid; gap:.5rem; width:min(26rem,calc(100vw - 2rem)); }
.notification-overlay { display:flex; justify-content:space-between; gap:.75rem; padding:.75rem 1rem; border:1px solid var(--accent-glow); border-radius:.5rem; background:var(--bg-surface); box-shadow:0 .5rem 2rem rgba(0,0,0,.35); }
.messagebox-overlay { z-index:4000; }
.messagebox-card { width:min(34vw,32rem); }
[data-messagebox-input] { display:block; width:100%; margin-top:.75rem; background:var(--bg-surface); border:1px solid var(--border-color); color:var(--text-main); border-radius:.5rem; padding:.55rem .75rem; }
[data-messagebox-input]:focus { outline:none; border-color:var(--accent-glow); }
.messagebox-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.65rem; }
.modal-body label { display:grid; grid-template-columns:minmax(9rem,14rem) minmax(0,1fr); gap:1rem; align-items:center; }
.modal-body label > :is(input:not([type="checkbox"]),select,textarea) { width:100%; }
.modal-body label:has(input[type="checkbox"],input[type="radio"]) { display:flex; justify-content:flex-start; }
.profile-modal { width:min(62rem,calc(100vw - 2rem)); }
.media-modal { width:min(48rem,calc(100vw - 2rem)); }
.media-form { display:grid; gap:1rem; }
.media-form label { display:grid; grid-template-columns:minmax(10rem,14rem) minmax(0,1fr); gap:1rem; align-items:center; }
.media-form label > :is(input:not([type="checkbox"]),select,textarea) { width:100%; }
.media-form .check-label { display:flex; align-items:center; }
.media-form label[data-video-only][hidden],.media-form .check-label[data-video-only][hidden] { display:none; }
.account-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; padding-bottom:.75rem; border-bottom:1px solid var(--border-color); }
.account-tabs button { background:transparent; border:1px solid var(--border-color); color:var(--text-muted); border-radius:.5rem; padding:.45rem .9rem; cursor:pointer; font-size:.85rem; }
#account-content > [data-account-panel] { display:grid; gap:.75rem; }
#account-content > [data-account-panel][hidden] { display:none; }
#account-content [data-account-panel] > section { display:grid; gap:.75rem; padding:1rem; border:1px solid var(--border-color); border-radius:.65rem; background:color-mix(in srgb,var(--bg-surface-hover) 35%,transparent); }
#profile-form { display:grid; gap:.75rem; }
.nav-item-icon { display:inline-flex; align-items:center; justify-content:center; width:1rem; flex:0 0 auto; font-size:.85rem; line-height:1; }
.sidebar-nav .dropdown-menu a { justify-content:flex-start; gap:.6rem; }
.service-health { flex:0 0 auto; display:inline-grid; place-items:center; width:1rem; height:1rem; border:2px solid currentColor; border-radius:50%; font-size:.62rem; font-weight:900; line-height:1; }
.service-health.is-operational { color:#22c55e; }
.service-health.is-unavailable { color:#ef4444; }
.service-health.is-unknown,.service-health.is-checking { color:#f59e0b; }
.service-health.is-checking { animation:health-pulse 1s ease-in-out infinite alternate; }
@keyframes health-pulse { to { opacity:.45; } }
.chat-trigger-icon { position:fixed; right:1.25rem; bottom:1.25rem; z-index:1000; width:3.25rem; height:3.25rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg-surface); border:1px solid var(--accent-glow); color:var(--accent-glow); font-size:1.4rem; cursor:pointer; box-shadow:0 0 20px var(--accent-dim); transition:transform .2s ease, box-shadow .2s ease; }
.chat-trigger-icon:hover { transform:scale(1.06); box-shadow:0 0 28px var(--accent-glow); }
.chat-overlay-window { position:fixed; right:1.25rem; bottom:5rem; z-index:1900; width:min(22rem,calc(100vw - 2rem)); }
.hidden { display:none!important; }
.auth-shell { min-height:100vh; display:grid; place-items:center; gap:1.5rem; padding:2rem 1rem; background:var(--bg-base); }
.auth-brand { display:flex; align-items:center; gap:.6rem; color:var(--text-main); text-decoration:none; font-weight:600; letter-spacing:.04em; }
.auth-brand .brand-dot { width:8px; height:8px; background:var(--accent-glow); box-shadow:0 0 10px var(--accent-glow); border-radius:50%; }
.auth-card { width:min(26rem,100%); background:var(--bg-surface); border:1px solid var(--border-color); border-radius:.9rem; padding:2rem; box-shadow:0 1rem 4rem rgba(0,0,0,.4); }
.auth-card h1 { font-size:1.3rem; font-weight:600; letter-spacing:.02em; margin-bottom:1.25rem; }
.auth-card [role="alert"] { background:rgba(239,68,68,.12); border:1px solid #ef4444; color:#fecaca; padding:.65rem .85rem; border-radius:.5rem; margin-bottom:1rem; font-size:.85rem; }
.auth-card form { display:grid; gap:1.1rem; }
.auth-card label { display:grid; gap:.4rem; font-size:.85rem; color:var(--text-muted); }
.auth-card label:has(input[type="checkbox"]) { display:flex; align-items:center; gap:.55rem; font-size:.83rem; }
.auth-card label:has(input[type="checkbox"]) input { width:auto; }
.auth-card label a { color:var(--accent-glow); }
.password-field { display:flex; gap:.5rem; align-items:stretch; }
.password-field input { flex:1; min-width:0; width:auto; }
.password-toggle { background:transparent; border:1px solid var(--border-color); color:var(--text-muted); border-radius:.55rem; padding:0 .8rem; font-size:.78rem; font-weight:600; cursor:pointer; white-space:nowrap; }
.password-toggle:hover { color:var(--text-main); border-color:var(--accent-glow); }
.field-error { color:#ff6b6b; font-size:.8rem; margin-top:-.55rem; }
.auth-card input:not([type="checkbox"]) { width:100%; background:var(--bg-base); border:1px solid var(--border-color); color:var(--text-main); padding:.7rem .85rem; border-radius:.55rem; font-size:.95rem; }
.auth-card input:not([type="checkbox"]):focus { outline:none; border-color:var(--accent-glow); }
.auth-card button { margin-top:.15rem; min-height:2.75rem; border:0; border-radius:.6rem; background:var(--accent-glow); color:var(--bg-base); font-weight:700; cursor:pointer; transition:opacity .2s ease; }
.auth-card button:hover { opacity:.9; }
.auth-card > a { display:inline-block; margin-top:1.1rem; margin-right:1rem; color:var(--accent-glow); text-decoration:none; font-size:.85rem; }
.auth-card > a:hover { text-decoration:underline; }

@media (max-width: 800px) {
    .mobile-menu-button { display:block; }
    .sidebar {
        position:fixed; inset:0 auto 0 0; z-index:1100; width:min(20rem,88vw); max-width:88vw;
        transform:translateX(-100%);
        /* visibility change is deferred until the slide-out finishes, so the
           close animation still plays; belt-and-suspenders on top of the
           transform so a closed drawer can never intercept taps meant for
           the page behind it, even in a stacking-context edge case. */
        transition:transform .2s ease, visibility 0s linear .2s;
        overflow-y:auto; -webkit-overflow-scrolling:touch;
        visibility:hidden; pointer-events:none;
    }
    .sidebar.drawer-open {
        transform:translateX(0);
        transition:transform .2s ease, visibility 0s linear 0s;
        visibility:visible; pointer-events:auto;
    }
    /* Scrim must never geometrically overlap the open drawer's own area,
       so a tap on a nav link can never be intercepted as a dismiss-tap
       regardless of stacking-context/z-index edge cases. */
    .drawer-scrim { left:min(20rem,88vw); }
    .sidebar-footer { padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
    .sidebar-footer button, .sidebar-nav button, .sidebar-nav a { min-height:2.75rem; }
    .main-panel { width:100%; margin-left:0; }
    .main-header { padding-left:4.25rem; }
    .composer-shell { grid-template-columns:1fr; }
    .send-button { justify-self:end; }
    .notification-region { top:4rem; right:0; width:100%; }
    .notification-overlay { border-radius:0; }
    .messagebox-card { width:100%; }
    .modal-overlay { padding:max(1rem,10vh,env(safe-area-inset-top)) .75rem max(.75rem,env(safe-area-inset-bottom)); }
    .modal-card { width:100%; max-height:calc(90dvh - 1.5rem); border-radius:.7rem; }
    .modal-body label { grid-template-columns:1fr; gap:.35rem; }
    .chat-overlay-window { right:.75rem; bottom:4.5rem; width:calc(100vw - 1.5rem); }
    .chat-trigger-icon { right:.9rem; bottom:.9rem; }
}
body[data-theme="arctic"] {
    --bg-base: #f0f4f8; --bg-surface: #ffffff; --bg-surface-hover: #e2e8f0;
    --border-color: #cbd5e1; --accent-glow: #0284c7; --accent-dim: rgba(2, 132, 199, 0.1);
    --text-main: #0f172a; --text-muted: #475569;
}
body[data-theme="sahara"] {
    --bg-base: #1c1917; --bg-surface: #292524; --bg-surface-hover: #44403c;
    --border-color: #57534e; --accent-glow: #f59e0b; --accent-dim: rgba(245, 158, 11, 0.1);
    --text-main: #f5f5f4; --text-muted: #a8a29e;
}
body[data-theme="ocean"] {
    --bg-base: #020617; --bg-surface: #0f172a; --bg-surface-hover: #1e293b;
    --border-color: #334155; --accent-glow: #38bdf8; --accent-dim: rgba(56, 189, 248, 0.1);
    --text-main: #f8fafc; --text-muted: #94a3b8;
}
body[data-theme="tahoe"] {
    --bg-base: #0f172a; --bg-surface: #1e293b; --bg-surface-hover: #334155;
    --border-color: #475569; --accent-glow: #818cf8; --accent-dim: rgba(129, 140, 248, 0.1);
    --text-main: #e2e8f0; --text-muted: #94a3b8;
}
body[data-theme="yosemite"] {
    --bg-base: #18181b; --bg-surface: #27272a; --bg-surface-hover: #3f3f46;
    --border-color: #52525b; --accent-glow: #fb923c; --accent-dim: rgba(251, 146, 60, 0.1);
    --text-main: #fafafa; --text-muted: #a1a1aa;
}
body[data-theme="everglades"] {
    --bg-base: #052e16; --bg-surface: #064e3b; --bg-surface-hover: #065f46;
    --border-color: #047857; --accent-glow: #34d399; --accent-dim: rgba(52, 211, 153, 0.1);
    --text-main: #ecfdf5; --text-muted: #6ee7b7;
}
body[data-theme="redwoods"] {
    --bg-base: #2a120a; --bg-surface: #3d1c12; --bg-surface-hover: #542719;
    --border-color: #78350f; --accent-glow: #f97316; --accent-dim: rgba(249, 115, 22, 0.1);
    --text-main: #ffedd5; --text-muted: #fdba74;
}
body[data-theme="jungle"] {
    --bg-base: #022c22; --bg-surface: #064e3b; --bg-surface-hover: #047857;
    --border-color: #059669; --accent-glow: #4ade80; --accent-dim: rgba(74, 222, 128, 0.1);
    --text-main: #f0fdf4; --text-muted: #86efac;
}
body[data-theme="lava"] {
    --bg-base: #1f0404; --bg-surface: #380d0d; --bg-surface-hover: #5c1414;
    --border-color: #841b1b; --accent-glow: #ef4444; --accent-dim: rgba(239, 68, 68, 0.1);
    --text-main: #fef2f2; --text-muted: #fca5a5;
}
body[data-theme="sunlight"] {
    --bg-base: #fefce8; --bg-surface: #fef08a; --bg-surface-hover: #fde047;
    --border-color: #facc15; --accent-glow: #ca8a04; --accent-dim: rgba(202, 138, 4, 0.1);
    --text-main: #422006; --text-muted: #713f12;
}
body[data-theme="thunderstorm"] {
    --bg-base: #0f172a; --bg-surface: #1e1b4b; --bg-surface-hover: #312e81;
    --border-color: #4338ca; --accent-glow: #a855f7; --accent-dim: rgba(168, 85, 247, 0.1);
    --text-main: #f5f3ff; --text-muted: #c4b5fd;
}
body[data-theme="steampunk"] {
    --bg-base: #1c140c; --bg-surface: #2b1f14; --bg-surface-hover: #3d2c1c;
    --border-color: #59412a; --accent-glow: #d97706; --accent-dim: rgba(217, 119, 6, 0.1);
    --text-main: #fef3c7; --text-muted: #d4d4d8;
}
body[data-theme="bionic"] {
    --bg-base: #030712; --bg-surface: #111827; --bg-surface-hover: #1f2937;
    --border-color: #374151; --accent-glow: #10b981; --accent-dim: rgba(16, 185, 129, 0.1);
    --text-main: #f9fafb; --text-muted: #9ca3af;
}
body[data-theme="unicornvomit"] {
    --bg-base: #2b0b3d; --bg-surface: #4a154b; --bg-surface-hover: #6b21a8;
    --border-color: #c084fc; --accent-glow: #f472b6; --accent-dim: rgba(244, 114, 182, 0.2);
    --text-main: #fff1f2; --text-muted: #f472b6;
}

body.high-contrast {
    --border-color: #ffffff !important;
    --text-main: #ffffff !important;
    --text-muted: #ffffff !important;
}
body.ui-magnified {
    font-size: 115%;
}
body.cb-protanopia { filter: url('#protanopia-filter'); }
body.cb-deuteranopia { filter: url('#deuteranopia-filter'); }
body.cb-tritanopia { filter: url('#tritanopia-filter'); }

body[data-font="system"] { --app-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body[data-font="classic-sans"] { --app-font: Helvetica, Arial, sans-serif; }
body[data-font="serif"] { --app-font: Georgia, "Times New Roman", Times, serif; }
body[data-font="mono"] { --app-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
body[data-font="rounded"] { --app-font: "Segoe UI Rounded", "Comic Sans MS", -apple-system, sans-serif; }

:root {
    --sidebar-width: 16.666%;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--app-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

body {
    background-color: var(--bg-base);
    color: var(--text-main);
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Base theme for plain, unclassed form controls. A large share of the
   account/settings modal content (profile, security, billing, import/export,
   etc.) is hand-written markup with no styling classes at all, so it was
   silently falling back to raw browser-default buttons/inputs — stark white
   boxes against the dark theme. This is a low-specificity fallback layer:
   every more specific class-based rule elsewhere in this file (.button,
   .sidebar-nav button, .chat-trigger-icon, .composer-shell textarea, etc.)
   still wins over these bare-tag selectors, so nothing already styled is
   affected. This only fills the gap for elements nobody styled at all. */
button {
    font: inherit;
    cursor: pointer;
    background: var(--bg-surface-hover);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: .5rem;
    padding: .55rem 1rem;
    transition: background .2s ease, border-color .2s ease;
}
button:hover { background: var(--accent-dim); border-color: var(--accent-glow); }
button:active:not(:disabled) { transform:translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea {
    font: inherit;
    background: var(--bg-base);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: .5rem;
    padding: .55rem .75rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent-glow); }
:where(button,input,select,textarea,a[href],summary):focus-visible { outline:2px solid var(--accent-glow)!important; outline-offset:2px; }
:where(input,select,textarea)[aria-invalid="true"],:where(input,select,textarea):user-invalid { border-color:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,.18); }
:where(button)[aria-selected="true"],:where(button)[aria-pressed="true"] { border-color:var(--accent-glow); background:var(--accent-dim); color:var(--accent-glow); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent-glow); }
a { color: var(--accent-glow); }

.app-container {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-surface);
    border-right: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
    /* .sidebar-nav scrolls internally on its own (flex:1 + overflow-y:auto
       below), but once ITS scroll is exhausted, further scrolling needs
       somewhere to go. Without this, .recent-chats and .sidebar-footer
       (My Profile / Site Settings) silently overflow past the fixed
       viewport-height box and become permanently unreachable whenever
       total sidebar content — nav sections + chat history — is taller
       than the screen, which happens on both desktop and mobile once an
       account has real chat history. Confirmed live: this is what made
       "My Profile" untappable. Standard CSS scroll-chaining takes over
       once .sidebar-nav's own scroll bottoms out.
    */
    overflow-y: auto;
}

.sidebar-brand {
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
}

.brand-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-glow);
    box-shadow: 0 0 10px var(--accent-glow);
    border-radius: 50%;
}

.sidebar-brand h2 {
    font-size: 1rem;
    letter-spacing: 2px;
    color: var(--text-main);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0;
}

.sidebar-nav ul {
    list-style: none;
}

.sidebar-nav a, .dropdown-toggle, .sub-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 24px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.9rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.sidebar-nav a:hover, .dropdown-toggle:hover, .sub-dropdown-toggle:hover {
    color: var(--text-main);
    background-color: var(--bg-surface-hover);
}

.chevron {
    transition: transform 0.3s ease;
}

.dropdown-menu, .sub-dropdown-menu {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: rgba(0, 0, 0, 0.2);
}

.has-dropdown.open > .dropdown-menu,
.has-subdropdown.open > .sub-dropdown-menu {
    max-height: 300px;
}

.has-dropdown.open > .dropdown-toggle .chevron,
.has-subdropdown.open > .sub-dropdown-toggle .chevron {
    transform: rotate(90deg);
}

.dropdown-menu a, .sub-dropdown-menu a {
    padding-left: 36px;
    font-size: 0.85rem;
}

.sub-dropdown-menu a {
    padding-left: 48px;
}

.sidebar-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}

.settings-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s;
    width: 100%;
    text-align: left;
}

.settings-link:hover {
    color: var(--accent-glow);
}

.main-panel {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.main-header {
    padding: 20px 40px;
    background-color: var(--bg-base);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-indicator {
    width: 6px;
    height: 6px;
    background-color: var(--accent-glow);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-glow);
}

.main-header h2 {
    font-size: 1.1rem;
    font-weight: 500;
}

.user-badge {
    font-size: 0.75rem;
    padding: 6px 12px;
    background: var(--accent-dim);
    border: 1px solid var(--accent-glow);
    border-radius: 4px;
    color: var(--accent-glow);
    letter-spacing: 1px;
}

.content-body {
    padding: 40px;
}

.chat-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header h3 {
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.chat-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.modal-header h3 {
    font-size: 1rem;
    letter-spacing: 1px;
}

.wide-modal { width: min(960px, 94vw); }
.model-tabs, .prompt-editors, [data-draft-actions], [data-title-actions], [data-edit-actions] { display: flex; gap: .75rem; }
.model-tabs { margin-bottom: 1rem; flex-wrap: wrap; }
.prompt-editors { align-items: stretch; }
.prompt-editor { flex: 1; min-width: 0; padding: 1rem; border: 1px solid var(--border-color); border-radius: 8px; }
.prompt-editor textarea { width: 100%; min-height: 180px; margin: .75rem 0; resize: vertical; }
.prompt-editor select, .prompt-editor input, #model-selection-list select { width: 100%; margin: .4rem 0 .75rem; }
.count-low { color: #ff6b6b; }
.count-ok { color: #63e6be; }
.count-bold { font-weight: 800; }
#model-selection-list, #parameter-blocks { display: grid; gap: 1rem; }
#parameter-blocks fieldset { padding: 1rem; border: 1px solid var(--border-color); border-radius: 8px; }
#parameter-blocks label { display: grid; gap: .25rem; margin: .5rem 0; }
@media (max-width: 720px) { .prompt-editors { flex-direction: column; } }

.shared-chat { display:grid; grid-template-rows:minmax(12rem,1fr) auto auto; min-height:24rem; height:100%; }
.shared-chat .message-list { overflow-y:auto; padding:1rem; scroll-behavior:smooth; }
.chat-turn { max-width:82%; margin:.65rem 0; padding:.75rem 1rem; border:1px solid var(--border-color); border-radius:.75rem; white-space:pre-wrap; }
.chat-turn.user { margin-left:auto; background:var(--accent-dim); }
.chat-turn.assistant { margin-right:auto; background:var(--bg-surface); }
.chat-turn.system { max-width:100%; color:var(--text-muted); text-align:center; }
.chat-turn strong { display:block; font-size:.7rem; text-transform:uppercase; color:var(--text-muted); }
.redirect-to-general-chat { display:block; margin-top:.6rem; background:var(--accent-dim); border:1px solid var(--accent-glow); color:var(--accent-glow); border-radius:.5rem; padding:.5rem .85rem; font-size:.8rem; font-weight:600; cursor:pointer; }
.redirect-to-general-chat:hover { background:var(--accent-glow); color:var(--bg-base); }
.composer-shell { position:sticky; bottom:0; display:grid; grid-template-columns:1fr; gap:.5rem; padding:.75rem; background:var(--bg-surface); border-top:1px solid var(--border-color); }
.composer-shell textarea { width:100%; resize:vertical; }
.composer-context, .composer-actions { display:flex; justify-content:space-between; gap:.5rem; align-items:center; font-size:.75rem; color:var(--text-muted); }
.media-turn-demo { margin:.5rem 1rem; padding:.75rem; border:1px dashed var(--accent-glow); border-radius:.5rem; display:flex; justify-content:space-between; }
.media-turn-demo[hidden] { display:none; }
.media-turn-demo[data-media-state="failed"] { border-color:#ff6b6b; }
.media-turn-demo[data-media-state="complete"] { border-color:#63e6be; }
.history-tools { display:grid; grid-template-columns:1fr 1fr; gap:.3rem; }
.history-tools button { background:var(--bg-surface); border:1px solid var(--border-color); color:var(--text-main); border-radius:.4rem; padding:.4rem .6rem; font-size:.8rem; cursor:pointer; transition:background .2s ease, border-color .2s ease; }
.history-tools button:hover { background:var(--accent-dim); border-color:var(--accent-glow); }
.history-tools input { grid-column:1/-1; min-width:0; background:var(--bg-surface); border:1px solid var(--border-color); color:var(--text-main); border-radius:.4rem; padding:.4rem .6rem; font-size:.8rem; }
.history-tools input:focus { outline:none; border-color:var(--accent-glow); }
.history-tools input::placeholder { color:var(--text-muted); }
[data-history-results] { display:grid; gap:.25rem; margin:.5rem 0; max-height:12rem; overflow:auto; }
[data-history-results] button { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; background:transparent; border:1px solid var(--border-color); color:var(--text-main); border-radius:.4rem; padding:.4rem .6rem; font-size:.8rem; cursor:pointer; transition:background .2s ease, border-color .2s ease; }
[data-history-results] button:hover { background:var(--accent-dim); border-color:var(--accent-glow); }
.history-row { display:grid; gap:.3rem; padding:.35rem; border:1px solid var(--border-color); border-radius:.5rem; min-width:0; }
.history-row-main { display:flex; align-items:center; gap:.3rem; min-width:0; }
.history-row-main > [data-load-chat] { flex:1; min-width:0; border:0; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-row-toggle { flex:0 0 auto; background:transparent; border:1px solid var(--border-color); border-radius:.4rem; padding:.15rem .5rem; color:var(--text-muted); cursor:pointer; line-height:1; min-height:1.75rem; }
.history-row-toggle:hover, .history-row-toggle:focus-visible, .history-row-toggle[aria-expanded="true"] { color:var(--text-main); border-color:var(--accent-glow); }
.history-row-actions { display:grid; grid-template-columns:1fr auto; gap:.3rem; margin-top:.3rem; }
.history-row-actions[hidden] { display:none; }
.history-row-actions :is(input,select) { width:100%; min-width:0; font-size:.72rem; padding:.35rem; }
.history-row-actions button { font-size:.7rem; white-space:normal; }
.folder-manager { margin:.55rem 0; font-size:.78rem; }
.folder-manager summary { cursor:pointer; color:var(--text-muted); padding:.35rem 0; }
[data-folder-create],.folder-row { display:grid; grid-template-columns:1fr auto; gap:.3rem; margin:.3rem 0; }
.folder-row { grid-template-columns:minmax(0,1fr) repeat(4,auto); }
.folder-row :is(input,button),[data-folder-create] :is(input,button) { min-width:0; padding:.35rem; font-size:.7rem; }
[data-archive-current] { margin-top:.5rem; width:100%; background:var(--bg-surface); border:1px solid var(--border-color); color:var(--text-main); border-radius:.4rem; padding:.5rem; font-size:.8rem; cursor:pointer; transition:background .2s ease, border-color .2s ease; }
[data-archive-current]:hover { background:var(--accent-dim); border-color:var(--accent-glow); }
.chat-overlay-window .shared-chat { min-height:28rem; height:60vh; }

.public-content{max-width:880px;margin:0 auto;padding:2rem;line-height:1.65}.public-content nav{margin-bottom:2rem}.public-content section,.faq-item{margin:1.5rem 0}.public-content label{display:block;margin:.8rem 0}.public-content input,.public-content textarea,.public-content select{display:block;width:100%;padding:.7rem}.public-content textarea{min-height:8rem}.cookie-notice{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:10000;display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1rem;border:1px solid currentColor;background:#101827;color:#fff;box-shadow:0 5px 30px #0008}.cookie-notice p{margin:0}.cookie-notice a{color:#b9ddff}.cookie-notice button,.cookie-ack-btn{white-space:nowrap;background:#1b2942;border:1px solid #3a5578;color:#eef3ff;padding:.6rem 1.2rem;border-radius:.5rem;font-weight:600;font-size:.9rem;cursor:pointer;transition:background .2s ease,border-color .2s ease}.cookie-notice button:hover,.cookie-ack-btn:hover{background:#24344f;border-color:#5a86b8}.content-links{display:flex;flex-wrap:wrap;gap:.5rem}.content-links a{padding:.4rem .6rem}

/* Final responsive override intentionally follows the legacy desktop block
   above. Both selectors have equal specificity, so keeping this after the
   desktop declaration prevents the 16.666% desktop width from collapsing
   the mobile navigation drawer. */
@media (max-width:800px) {
  .sidebar { width:min(20rem,88vw); max-width:88vw; }
}

/* Goal-first media creation */
.media-modal { width:min(38rem,calc(100vw - 2rem)); }
.media-modal .media-form { display:grid; min-height:0; }
.media-modal .modal-body { display:grid; gap:1rem; }
.media-modal .media-form label { display:grid; grid-template-columns:1fr; gap:.45rem; align-items:stretch; }
.media-modal .media-prompt textarea { min-height:8.5rem; resize:vertical; font-size:1rem; line-height:1.5; }
.media-advanced { border:1px solid var(--border-color); border-radius:.65rem; background:color-mix(in srgb,var(--panel-bg) 85%,transparent); }
.media-advanced summary { min-height:2.75rem; padding:.75rem 1rem; cursor:pointer; font-weight:650; }
.advanced-fields { display:grid; gap:1rem; padding:0 1rem 1rem; }
.advanced-fields small,.field-help { color:var(--text-muted); line-height:1.4; }
.media-modal [hidden] { display:none !important; }
.source-picker { display:grid; gap:.6rem; padding:1rem; border:1px dashed var(--border-color); border-radius:.65rem; }
.source-picker.is-dragging { border-style:solid; outline:2px solid var(--focus-color,currentColor); outline-offset:2px; }
.source-preview :is(img,video) { display:block; max-width:100%; max-height:15rem; margin:auto; border-radius:.5rem; }
.media-message:not(:empty) { padding:.75rem; border-left:.25rem solid #ff9f43; background:rgba(255,159,67,.1); }
.media-progress,.media-result { display:grid; gap:.65rem; padding:1rem; border:1px solid var(--border-color); border-radius:.65rem; }
.media-progress progress { width:100%; }
.media-result>div { display:flex; flex-wrap:wrap; gap:.65rem; }
.media-result .button { display:inline-flex; align-items:center; min-height:2.75rem; padding:.55rem .9rem; border:1px solid var(--border-color); border-radius:.5rem; color:inherit; text-decoration:none; }
.mfa-qr-code { width:min(16rem,100%); padding:1rem; border-radius:.75rem; background:#fff; }
.mfa-qr-code svg { display:block; width:100%; height:auto; }
.mfa-setup-key { font-family:monospace; font-size:1rem; letter-spacing:.08em; background:var(--bg-surface); border:1px solid var(--border-color); border-radius:.5rem; padding:.6rem .85rem; width:fit-content; }
.mfa-setup-key[hidden] { display:none; }
@media (max-width:420px) {
  .media-modal { width:calc(100vw - 1rem); }
  .media-modal .modal-header,.media-modal .modal-body,.media-modal .overlay-footer { padding-inline:.85rem; }
  .media-modal .overlay-footer { display:grid; grid-template-columns:1fr; }
}