/* ═══════════════════════════════════════════════════════════════════════
   DELPHOS · UI-POLISH.CSS
   Loaded LAST — refines existing UI toward a clean, shadcn-like, mobile /
   webview-friendly look. Purely additive: overrides by cascade order, never
   changes markup contracts.

   Sections
     0. Accent / palette tokens (customisable)
     1. Shimmer + skeleton + in-button loaders
     2. Secure Pass window (concise + correct stacking)
     3. Characters window + overlay fix + polish
     4. Settings search (deep-match highlighting)
     5. Nav bar + sidebar (smooth, no-transition collapse, synced)
     6. Custom alert / confirm window
     7. Ripple refinement
     8. Color-palette swatches (settings)
     9. Mobile / webview finishing
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   0. ACCENT / PALETTE TOKENS
   A single accent drives buttons, focus rings, toggles and swatches.
   Overridable at runtime via  document.documentElement.style
   .setProperty('--accent', ...)  (see ui-polish.js).
   ───────────────────────────────────────────────────────────── */
:root {
    /* Default accent — clay/warm. ui-polish.js overrides at runtime from
       localStorage so this is only the cold-start fallback. */
    --accent: #b7795c;
    --accent-color: #b7795c;
    --accent-strong: #975d46;
    --accent-contrast: #ffffff;
    --accent-soft: rgba(183, 121, 92, 0.14);
    --accent-ring: rgba(183, 121, 92, 0.40);

    --ui-radius: 12px;
    --ui-radius-sm: 9px;
    --ui-radius-lg: 18px;
    --ui-border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
    --ui-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28);
    --ui-shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.5);
    --ui-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Respect the "reduce motion" preference wired in app-windows.js */
body.pref-reduce-motion *,
body.pref-reduce-motion *::before,
body.pref-reduce-motion *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
}

/* ─────────────────────────────────────────────────────────────
   1. SHIMMER · SKELETON · IN-BUTTON LOADERS
   ───────────────────────────────────────────────────────────── */
@keyframes ui-shimmer {
    0% {
        background-position: -180% 0;
    }

    100% {
        background-position: 180% 0;
    }
}

.ui-skeleton,
.ui-shimmer {
    position: relative;
    border-radius: var(--ui-radius-sm);
    background-color: var(--secondary-color, #2a2a2a);
    background-image: linear-gradient(100deg,
            transparent 30%,
            rgba(255, 255, 255, 0.09) 48%,
            transparent 66%);
    background-size: 220% 100%;
    animation: ui-shimmer 1.25s ease-in-out infinite;
}

body.light_mode .ui-skeleton,
body.light_mode .ui-shimmer {
    background-image: linear-gradient(100deg,
            transparent 30%,
            rgba(0, 0, 0, 0.07) 48%,
            transparent 66%);
}

/* A ready-made skeleton block used by loaders */
.ui-skeleton-stack {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 4px;
}

.ui-skeleton-line {
    height: 14px;
}

.ui-skeleton-line.sm {
    width: 55%;
}

.ui-skeleton-line.lg {
    width: 90%;
}

.ui-skeleton-line.title {
    height: 20px;
    width: 45%;
}

/* Apple-style smooth ring spinner — small, centered, no shimmer.
   Used to replace the round SVG spinner inside window overlays. */
@keyframes ui-spin {
    to {
        transform: rotate(360deg);
    }
}

.ui-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2.5px solid var(--border-color, rgba(255, 255, 255, 0.14));
    border-top-color: var(--accent);
    animation: ui-spin 0.7s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
}

.data-window .window-loaders {
    background: rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

.data-window .window-loaders .tiny-loader,
.data-window .window-loaders svg {
    display: none !important;
}

.data-window .window-loaders::after {
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2.5px solid var(--border-color, rgba(255, 255, 255, 0.16));
    border-top-color: var(--accent);
    animation: ui-spin 0.7s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
}

/* Boot loader → clean Apple-like ring on the app background (no glow blob) */
.windowLoader {
    background-color: var(--chat-area-background, #090909) !important;
}

.windowLoader .spinner,
.windowLoader .spinner1 {
    display: none !important;
}

.windowLoader::after {
    content: "";
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--border-color, rgba(255, 255, 255, 0.14));
    border-top-color: var(--accent);
    animation: ui-spin 0.7s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
}

/* In-button spinner: add class "btn-loading" (JS) to any button */
@keyframes ui-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

button.btn-loading,
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
    opacity: 0.9;
}

button.btn-loading>*,
.btn-loading>* {
    opacity: 0 !important;
}

button.btn-loading::after,
.btn-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    color: var(--accent-contrast);
    animation: ui-btn-spin 0.6s linear infinite;
}

/* Ghost/outline buttons spin in accent, not white */
.btn-loading.ghost::after,
#declineConsentBtn.btn-loading::after {
    color: var(--text-color);
}

/* ─────────────────────────────────────────────────────────────
   2. SECURE PASS  (concise + stacked above Characters)
   Root cause fix: .secure-pass was z-index:100000, below
   .mini-window-windows (999999) → it rendered behind Characters.
   ───────────────────────────────────────────────────────────── */
.secure-pass {
    z-index: 1000050 !important;
    gap: 2px !important;
    background: rgba(9, 9, 12, 0.82) !important;
    backdrop-filter: blur(18px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
}

body.light_mode .secure-pass {
    background: rgba(244, 244, 248, 0.85) !important;
}

.secure-pass .inner-content {
    background: var(--darker-background, #17171b);
    border: var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 28px 26px 24px;
    max-width: 340px !important;
    width: calc(100% - 32px);
    box-shadow: var(--ui-shadow-lg);
    gap: 4px !important;
}

.secure-pass .inner-content h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

.secure-pass .inner-content>span {
    font-size: 13px !important;
    color: var(--subheading-color, #8a8a8a) !important;
}

.secure-pass .head {
    top: 16px !important;
    left: 16px !important;
}

.secure-pass .head .icon-close {
    width: 38px !important;
    height: 38px !important;
    font-size: 20px !important;
    background: var(--secondary-color, rgba(255, 255, 255, 0.06)) !important;
}

.secure-pass .pin-inputs {
    gap: 10px !important;
    margin: 18px 0 4px !important;
}

.secure-pass .pin-input {
    width: 48px !important;
    height: 54px !important;
    border-radius: var(--ui-radius) !important;
    font-size: 22px !important;
    border: 1.5px solid var(--border-color, rgba(255, 255, 255, 0.14)) !important;
    background: var(--secondary-color, rgba(255, 255, 255, 0.04)) !important;
}

.secure-pass .pin-input:focus {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
    transform: none !important;
}

.secure-pass .pin-input.filled {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
}

.secure-pass #sec_passvrf_msg {
    font-size: 13px !important;
    color: var(--subheading-color, #8a8a8a) !important;
    margin-top: 8px;
}

/* Secure-pass MANAGE screen lives inside #consentModal (.secure-passmanage).
   Tighten its oversized headings/rows. */
.secure-passmanage h2 {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--placeholder-color, rgba(255, 255, 255, 0.5));
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 14px 0 8px !important;
}

.secure-passmanage h3 {
    font-size: 14px !important;
    font-weight: 500 !important;
}

.secure-passmanage .spin-criters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    position: relative;
    padding: 12px 16px;
    min-height: 54px;
    margin-bottom: 8px;
    border-radius: var(--ui-radius, 12px);
    border: var(--ui-border, 1px solid rgba(255, 255, 255, 0.1)) !important;
    background: var(--secondary-color, rgba(255, 255, 255, 0.03));
    box-sizing: border-box;
}

.secure-passmanage .spin-criters h3 {
    margin: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.secure-passmanage .spin-criters .toggle-container {
    position: static !important;
    flex-shrink: 0;
    margin: 0;
}

.secure-passmanage .reset-pin {
    position: static !important;
    flex-shrink: 0;
    height: 34px;
    min-width: 80px;
    padding: 0 18px;
    border-radius: var(--ui-radius-sm, 9px);
    border: 1px solid var(--accent, #b7795c) !important;
    background: var(--accent, #b7795c) !important;
    color: var(--accent-contrast, #ffffff) !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.secure-passmanage .reset-pin:hover {
    background: var(--accent-strong, #975d46) !important;
    border-color: var(--accent-strong, #975d46) !important;
}

.secure-passmanage .reset-pin:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring, rgba(183, 121, 92, 0.4)) !important;
}

.secure-passmanage .otp-container,
.secure-passmanage .otp-container-glb {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.secure-passmanage .otp-digit,
.secure-passmanage .otp-inputs {
    width: 44px;
    height: 50px;
    border-radius: var(--ui-radius-sm);
    border: 1.5px solid var(--border-color, rgba(255, 255, 255, 0.14));
    background: var(--secondary-color, rgba(255, 255, 255, 0.04));
    color: var(--text-color);
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.secure-passmanage .otp-digit:focus,
.secure-passmanage .otp-inputs:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ─────────────────────────────────────────────────────────────
   3. CHARACTERS WINDOW + OVERLAY FIX
   Root cause fix: .overlay-blurred keeps opacity:0 unless it also gets
   the .active class, but the Characters JS only sets inline display:block
   → the backdrop was invisible. Force it visible whenever displayed.
   ───────────────────────────────────────────────────────────── */
.overlay-blurred {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
    z-index: 99990 !important;
}

.mini-window-windows {
    z-index: 99999 !important;
    border: var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    width: 440px !important;
    max-width: calc(100vw - 32px);
    max-height: min(620px, calc(100vh - 48px));
}

.mini-window-windows .head {
    height: 56px !important;
    background: transparent !important;
    border-bottom: var(--ui-border) !important;
}

.mini-window-windows .head h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

.mini-window-windows .head .icon-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    color: var(--subheading-color, #9b9b9b);
    transition: background 0.16s ease, color 0.16s ease;
}

.mini-window-windows .head .icon-close:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08));
    color: var(--text-color);
}

.mini-window-windows .mini-window-lists .mini-window-item {
    border: var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    background: var(--secondary-color, rgba(255, 255, 255, 0.03)) !important;
    min-height: 62px !important;
    transition: background 0.16s ease, border-color 0.16s ease !important;
    transform: none !important;
}

.mini-window-windows .mini-window-lists .mini-window-item:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.07)) !important;
    border-color: var(--accent-ring) !important;
}

.mini-window-windows .mini-window-item .char-name {
    font-size: 14.5px !important;
}

/* Bottom action buttons → shadcn-like */
.min-window-bottom-actions {
    display: flex !important;
    gap: 12px !important;
    padding: 14px 20px !important;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.07)) !important;
    background: var(--primary-color, #1e1e1e) !important;
}

.min-window-bottom-actions button {
    height: 38px !important;
    border-radius: var(--ui-radius-sm) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.1s ease !important;
}

.min-window-bottom-actions button:active {
    transform: scale(0.97) !important;
}

.min-window-bottom-actions .add {
    flex: 1 !important;
    width: auto !important;
    /* override 69% */
    background: var(--accent) !important;
    color: var(--accent-contrast, #fff) !important;
    border-color: var(--accent-strong) !important;
}

.min-window-bottom-actions .add:hover {
    background: var(--accent-strong) !important;
}

.min-window-bottom-actions .close {
    width: auto !important;
    /* override 29% */
    flex: 0 0 100px !important;
    background: var(--secondary-color, rgba(255, 255, 255, 0.04)) !important;
    color: var(--subheading-color, #9b9b9b) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
}

.min-window-bottom-actions .close:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08)) !important;
    color: var(--text-color) !important;
    border-color: var(--accent-ring) !important;
}

/* ─── Character Edit / Add — production-grade UI polish ─────────── */
#character_edits_con .suparva-input,
#character_adds_con .suparva-input {
    border-radius: var(--ui-radius-sm) !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    background: var(--secondary-color, rgba(255, 255, 255, 0.04)) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

#character_edits_con .suparva-input:focus,
#character_adds_con .suparva-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    outline: none !important;
}

/* Avatar ring on hover */
#character_edits_con img,
#character_adds_con img {
    width: 72px !important;
    height: 72px !important;
    border-color: var(--accent-ring, rgba(99, 102, 241, 0.35)) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#character_edits_con img:hover,
#character_adds_con img:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* Form labels */
#character_edits_con small b,
#character_adds_con small b {
    color: var(--subheading-color, #9b9b9b);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Section break for Functions area */
#character_edits_con .switch-container,
#character_adds_con .switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.07));
}

#character_edits_con .switch-label,
#character_adds_con .switch-label {
    font-size: 15px !important;
    color: var(--text-color) !important;
    font-weight: 500 !important;
}

/* Toggle thumb follows accent */
#character_edits_con .switch-input:checked~.switch-track,
#character_adds_con .switch-input:checked~.switch-track {
    background: var(--accent) !important;
}

/* Delete character button — keep red-danger color but make it slimmer */
#delete-character {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
    max-width: 220px !important;
    padding: 9px 20px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background 0.2s ease, transform 0.12s ease !important;
}

#delete-character:hover {
    background: rgba(239, 68, 68, 0.22) !important;
    transform: translateY(-1px) !important;
}

#delete-character:active {
    transform: translateY(0) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CHARACTER EDITOR FORM — production component (.che-*)
   A clean, Claude-style settings form that replaces the old <center>
   + inline-width layout. All sizing is token-driven.
   ═══════════════════════════════════════════════════════════════════ */

/* Scrollable wrapper that fills the list area */
.che-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0 16px;
}

/* ── Avatar ── */
.che-avatar-row {
    display: flex;
    justify-content: center;
    padding: 20px 0 12px;
}

.che-avatar-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.che-avatar-wrap img,
.che-avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--accent-ring, rgba(99, 102, 241, 0.35));
    background: var(--secondary-color, rgba(255, 255, 255, 0.04));
    transition: border-color 0.2s ease;
}

.che-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--subheading-color, #7a7a7a);
}

.che-avatar-placeholder .material-symbols-rounded {
    font-size: 36px;
}

.che-avatar-edit-btn {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--primary-color, #1e1e1e);
    background: var(--accent);
    color: var(--accent-contrast, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.12s ease;
    padding: 0;
}

.che-avatar-edit-btn .material-symbols-rounded {
    font-size: 14px;
}

.che-avatar-edit-btn:hover {
    background: var(--accent-strong, #4f46e5);
    transform: scale(1.1);
}

.che-avatar-loader {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    top: 21px;
    bottom: -15px;
    left: 1px;
    width: 70px;
    height: 70px;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
}

/* ── Fields ── */
.che-fields {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 20px;
}

.che-field-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.07));
}

.che-field-group:last-child {
    border-bottom: none;
}

.che-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--subheading-color, #888);
    user-select: none;
}

.che-input {
    width: 100% !important;
    border-radius: var(--ui-radius-sm) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    background: transparent !important;
    font-size: 14px !important;
    color: var(--text-color) !important;
    padding: 9px 11px !important;
    resize: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
    box-shadow: none !important;
}

.che-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    outline: none !important;
    background: var(--secondary-color, rgba(255, 255, 255, 0.03)) !important;
}

.che-textarea {
    min-height: 72px;
    line-height: 1.5;
}

.che-textarea--tall {
    min-height: 110px;
}

/* ── Sections (Memory, Capabilities) ── */
.che-section {
    padding: 14px 20px 4px;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.07));
}

.che-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--subheading-color, #888);
    margin: 0 0 8px;
}

/* Memory row button */
.che-row-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: var(--ui-radius);
    background: var(--secondary-color, rgba(255, 255, 255, 0.03));
    color: var(--text-color);
    cursor: pointer;
    text-align: left;
    transition: background 0.16s ease, border-color 0.16s ease;
    margin-bottom: 6px;
}

.che-row-btn:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.07));
    border-color: var(--accent-ring);
}

.che-row-btn__icon {
    font-size: 20px;
    color: var(--accent);
    flex-shrink: 0;
}

.che-row-btn__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.che-row-btn__title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.che-row-btn__sub {
    font-size: 12px;
    color: var(--subheading-color, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.che-row-btn__chevron {
    font-size: 18px;
    color: var(--subheading-color, #888);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.che-row-btn:hover .che-row-btn__chevron {
    transform: translateX(2px);
}

/* Capability toggle rows */
.che-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
    gap: 12px;
}

.che-toggle-row:last-child {
    border-bottom: none;
}

.che-toggle-row__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.che-toggle-row__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}

.che-toggle-row__sub {
    font-size: 12px;
    color: var(--subheading-color, #888);
}

/* Accent-tinted checked toggle track */
.che-toggle-row .switch-input:checked~.switch-track {
    background: var(--accent) !important;
}

/* ── Danger zone ── */
.che-danger-zone {
    margin-top: 8px;
    padding: 10px 20px 4px;
    border-top: 1px solid rgba(239, 68, 68, 0.14);
    display: flex;
    justify-content: flex-start;
}

.che-danger-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid rgba(239, 68, 68, 0.28);
    border-radius: var(--ui-radius-sm);
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.1s ease;
}

.che-danger-btn .material-symbols-rounded {
    font-size: 17px;
}

.che-danger-btn:hover {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.5);
    transform: translateY(-1px);
}

.che-danger-btn:active {
    transform: translateY(0);
}

/* ── Also wire #delete-character id to new class if old CSS remains ── */
#delete-character {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 8px 16px !important;
    border: 1px solid rgba(239, 68, 68, 0.28) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: rgba(239, 68, 68, 0.08) !important;
    color: #f87171 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.1s ease !important;
    box-sizing: border-box !important;
}

/* ─────────────────────────────────────────────────────────────
   4. SETTINGS SEARCH  (deep-match highlight)
   The JS (app-windows.js) is upgraded to search row contents; these
   styles support the hidden / highlighted states it toggles.
   ───────────────────────────────────────────────────────────── */
.stg-row.stg-hidden,
.stg-section-label.stg-hidden,
.stg-nav-item.stg-hidden {
    display: none !important;
}

.stg-row mark,
.stg-nav-item mark {
    background: var(--accent-soft);
    color: var(--text-color);
    border-radius: 4px;
    padding: 0 2px;
}

/* "No results" note injected by JS */
.stg-search-empty {
    padding: 24px 6px;
    text-align: center;
    color: var(--subheading-color, #8a8a8a);
    font-size: 13px;
}

/* Slightly tighter, crisper search field + focus ring */
.stg-search input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Generic settings buttons → consistent shadcn look.
   The "pbk-" and "dir-" namespaces are exempt for the same reason they are exempt
   from the legacy .data-window rule in style.css: those components ship their own
   button system, and a generic rule that outranks it produces controls that look
   nothing like the rest of their panel.

   Written as "pbk-" rather than pbk-<star> on purpose: a star followed by a slash
   inside a CSS comment CLOSES the comment. It did, here — the rest of this
   paragraph was being parsed as a selector, which swallowed the rule below it and
   silently dropped the whole declaration block. */
.stg-row-control button:not(.plan-view-stg):not([class*="pbk-"]):not([class*="dir-"]) {
    height: 34px;
    padding: 0 15px;
    border-radius: var(--ui-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: var(--ui-border);
    background: var(--secondary-color, rgba(255, 255, 255, 0.05));
    color: var(--text-color);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.stg-row-control button:not(.plan-view-stg):not([class*="pbk-"]):not([class*="dir-"]):hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08));
}

/* Disabled settings buttons (e.g. under-development connectors like Delphos RPC) */
.stg-row-control button:not(.plan-view-stg):not([class*="pbk-"]):not([class*="dir-"]):disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--secondary-color, rgba(255, 255, 255, 0.05));
}

.stg-row-control button.cancel,
.stg-row-control button.canc {
    background: rgba(239, 68, 68, 0.14);
    color: #f87171;
    border-color: transparent;
}

.stg-row-control button.cancel:hover {
    background: rgba(239, 68, 68, 0.22);
}

/* ─────────────────────────────────────────────────────────────
   5. NAV BAR + SIDEBAR
   - Smoother, cleaner top bar.
   - Sidebar collapse/expand with NO transition (per request) and kept
     in sync with the chat column via ui-manager.arrangeUi().
   ───────────────────────────────────────────────────────────── */
/* ── REMOVE THE TOP BAR (ChatGPT / Claude minimal) ──────────────────
   No full-width blurred bar, no "Delphos" title. Just clean floating
   icon controls over the chat: sidebar toggle (left), actions (right). */
.nav {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    height: 52px !important;
    pointer-events: none;
}

.nav .nav-menu-button,
.nav .action-buttons,
.nav .action-icon,
.nav #start-live-voice,
.nav .loader {
    pointer-events: auto;
}

.nav .brand-name {
    display: none !important;
}

/* Floating icon buttons → subtle rounded hover chip */
.nav .nav-menu-button .icon,
.nav .action-icon .icon,
.nav #start-live-voice {
    border-radius: 10px;
    transition: background 0.15s ease;
}

.nav .nav-menu-button:hover .icon,
.nav .action-icon:hover .icon,
.nav #start-live-voice:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08)) !important;
}

/* Voice button: tracks the sidebar right-boundary so it always sits
   at the left edge of the chat area — moves smoothly when sidebar
   collapses / expands. JS sets --voice-btn-left on <html>. */
:root {
    --voice-btn-left: 68px;
    /* collapsed fallback (56px sidebar + 12px gap) */
}

.nav #start-live-voice {
    position: fixed !important;
    left: var(--voice-btn-left) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: 9px !important;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1003 !important;
}

/* Sidebar spans full height now that there's no bar above it */
.nav-menu {
    top: 0 !important;
    height: 100% !important;
    border-right: var(--ui-border) !important;
}

/* Clear the floating toggle row so sidebar content doesn't sit under it */
.nav-menu .top-menu-actions {
    padding-top: 56px !important;
}

/* SMOOTH collapse/expand transitions — sidebar width + chat column must use
   the SAME duration and easing so they finish at exactly the same moment. */
.nav-menu {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* On desktop the sidebar never slides off-screen — it narrows to a 56px rail.
   Reset the mobile transform so ONLY the width transition runs on desktop.
   overflow:hidden clips sidebar content while it's mid-animation. */
@media (min-width: 1000px) {
    .nav-menu {
        transform: none !important;
        overflow: hidden !important;
    }
}

/* The chat column transition is driven inline by NavController._animateChatColumn
   so the exact duration/easing matches the sidebar. No override needed here. */

.nav-menu .top-menu-actions button,
.nav-menu .top-menu-actions .img-labs-acc {
    border-radius: var(--ui-radius) !important;
    background-color: var(--secondary-color, #cccccc4b) !important;
}

.nav-menu .top-menu-actions button:hover,
.nav-menu .top-menu-actions .img-labs-acc:hover {
    background-color: var(--secondary-hover-color, #d8d2d27e) !important;
}

.nav-menu .chats-history .history-user {
    border-radius: var(--ui-radius) !important;
}

.nav-menu .chats-history .history-user:hover,
.nav-menu .chats-history .history-user.selected {
    background-color: var(--secondary-hover-color, #d8d2d27e) !important;
}

.select-selected {
    border-radius: var(--ui-radius) !important;
    background-color: var(--secondary-color, #cccccc4b) !important;
}

/* ─────────────────────────────────────────────────────────────
   6. CUSTOM ALERT / CONFIRM  (.alert-win)
   ───────────────────────────────────────────────────────────── */
.alert-win {
    max-width: 420px !important;
    max-height: none !important;
    height: auto !important;
    width: calc(100% - 32px) !important;
    border-radius: var(--ui-radius-lg) !important;
    border: var(--ui-border) !important;
    background-color: var(--darker-background, #1a1a1a) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    overflow: hidden;
    padding-bottom: 68px;
}

.alert-win .head-alert {
    position: static !important;
    height: auto !important;
    background: transparent !important;
    border-bottom: var(--ui-border);
    padding: 16px 20px !important;
}

.alert-win .head-alert span {
    font-size: 16px !important;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.alert-win .alert-content {
    position: static !important;
    height: auto !important;
    margin-top: 0 !important;
    padding: 18px 20px 8px !important;
    font-size: 14px !important;
    color: var(--subheading-color, #b9b9b9);
    line-height: 1.55;
}

.alert-win .bottom-actions-alert {
    right: 14px !important;
    bottom: 14px !important;
    height: auto !important;
    gap: 10px !important;
    padding: 0 !important;
}

.alert-win .bottom-actions-alert button {
    width: auto !important;
    min-width: 92px;
    height: 40px !important;
    padding: 0 18px;
    border-radius: var(--ui-radius-sm) !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
    transition: background 0.16s ease, opacity 0.16s ease, transform 0.1s ease !important;
}

.alert-win .bottom-actions-alert button:hover {
    background: var(--accent-strong) !important;
}

.alert-win .bottom-actions-alert button:active {
    transform: scale(0.97);
}

.alert-win .bottom-actions-alert button.canc {
    background: transparent !important;
    color: var(--text-color) !important;
    border: var(--ui-border) !important;
}

.alert-win .bottom-actions-alert button.canc:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.07)) !important;
}

/* ─────────────────────────────────────────────────────────────
   7. RIPPLE REFINEMENT
   Softer, palette-aware ripple; removes the odd default focus box-shadow.
   ───────────────────────────────────────────────────────────── */
.ripple-effect {
    background: currentColor !important;
    opacity: 0.18 !important;
}

.ripple:focus {
    box-shadow: none !important;
}

.ripple:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

/* ─────────────────────────────────────────────────────────────
   8. COLOR-PALETTE SWATCHES (Settings → Appearance)
   Markup injected in the settings builder (auth-manager.js).
   ───────────────────────────────────────────────────────────── */
.stg-palette {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.stg-swatch {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px;
    min-height: 26px;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0 !important;
    /* neutralise any inherited .ripple padding */
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    outline: 2px solid transparent;
    outline-offset: 2px;
    overflow: hidden;
    transition: transform 0.12s ease, outline-color 0.12s ease;
    position: relative;
}

.stg-swatch:hover {
    transform: scale(1.08);
}

.stg-swatch.active {
    outline-color: var(--accent);
}

.stg-swatch.active::after {
    content: "check";
    font-family: 'Material Symbols Rounded';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ─────────────────────────────────────────────────────────────
   9. MOBILE / WEBVIEW FINISHING
   ───────────────────────────────────────────────────────────── */
/* Prevent iOS tap-highlight flashes inside the embedded webview */
a,
button,
.ripple,
.select-item,
.mini-window-item,
.stg-nav-item,
.stg-row-control button,
.suparva-option {
    -webkit-tap-highlight-color: transparent;
}

/* Momentum scrolling everywhere it matters */
.mini-window-lists,
.stg-main,
.content-viewer,
.chats-history {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

@media screen and (max-width: 820px) {

    /* Bigger, thumb-friendly close targets in windows */
    .mini-window-windows {
        width: 100vw !important;
        height: 100% !important;
        max-width: 100vw;
        max-height: 100%;
        border-radius: 0 !important;
        border: none !important;
    }

    /* Toast → a clean edge-to-edge card that wraps long messages (e.g. the
       sandbox / browser status: "Saved login applied to the browser.").
       Pinned near the bottom above the keyboard + home-indicator safe area,
       and above the full-screen settings/tools window. */
    .message-box {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        justify-content: flex-start !important;
        gap: 4px;
        padding: 13px 15px !important;
        border-radius: 16px !important;
        transform: translateZ(0) !important;
    }

    .message-box .message {
        justify-content: flex-start !important;
        text-align: left;
        min-width: 0;
    }

    .message-box span {
        font-size: 14px !important;
        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .message-box .icon-msgbox {
        flex-shrink: 0;
    }

    .message-box.show {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        transform: translateZ(0) !important;
    }

    .message-box.hide {
        bottom: -140px !important;
        transform: translateZ(0) !important;
    }
}

/* Toast → subtle shadcn card regardless of viewport */
.message-box {
    background-color: var(--darker-background, #202024) !important;
    border: var(--ui-border) !important;
    box-shadow: var(--ui-shadow-md) !important;
}

.message-box span,
.message-box .icon-msgbox {
    color: var(--text-color) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   REVISION 2 — accent wiring, in-input model selector, text-selection,
   message long-press menu + desktop bottom actions, secure-pass refine.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 10. ACCENT ON TOGGLES ──────────────────────────────────────────
   The switches used blue --loader-* gradients regardless of accent.
   Drive the checked state entirely from --accent so palette changes show. */
.toggle-input:checked+.toggle-label .toggle-slider {
    background: var(--accent) !important;
    border-color: transparent !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}

.toggle-input:checked+.toggle-label .toggle-slider::before,
.toggle-input:checked+.toggle-label .toggle-slider::after {
    opacity: 0 !important;
}

.toggle-input:checked+.toggle-label .toggle-handle {
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

.toggle-input:checked+.toggle-label .toggle-handle::before,
.toggle-input:checked+.toggle-label .toggle-handle::after {
    opacity: 0 !important;
}

.toggle-input:focus+.toggle-label .toggle-slider {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

.toggle-label:hover .toggle-slider {
    transform: none !important;
}

/* Character-panel switches (.switch-*) also follow the accent */
.switch-input:checked+.switch-track,
.switch-input:checked~.switch-track {
    background-color: var(--accent) !important;
    border-color: transparent !important;
}

/* ─── 11. BUTTONS PICK UP THE ACCENT (not pure white) ───────────────── */
/* Chat send button */
.input-actions-right .send-btn,
.input-actions-right .send-btn:hover,
.input-actions-right .send-btn.active:hover {
    background-color: var(--accent) !important;
    color: var(--accent-contrast) !important;
}

/* Access-key / primary "suparva" buttons */
.button.suparva,
button.suparva {
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
    border: none !important;
}

.button.suparva:hover {
    background: var(--accent-strong) !important;
}

/* Consent / settings primary action */
.data-window #acceptConsentBtn {
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
}

.data-window #acceptConsentBtn:hover {
    background: var(--accent-strong) !important;
    opacity: 1;
}

/* Deep-think / active tool buttons tint with accent when enabled */
#deep-think-toggler[style*="background"] {
    background-color: var(--accent-soft) !important;
    color: var(--accent) !important;
}

/* ─── 12. IN-INPUT MODEL SELECTOR ───────────────────────────────────────
   Legacy dropdown styling removed. The model picker is now a single,
   authoritative modal defined in the "MODEL BROWSER" block at the end of
   this file. Keeping the rules in one place prevents the dueling
   !important overrides that previously broke the card layout.          */

/* ─── 13. TEXT SELECTION — off everywhere, on for AI output only ─────── */
html,
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Outgoing (user) bubbles: no native selection — long-press menu handles it */
.chat-list .message.outgoing,
.chat-list .message.outgoing * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Allow selection inside AI (incoming) responses + any editable field.
   Declared after the outgoing rule and with !important so contenteditable
   edit mode on a user bubble stays selectable. */
.chat-list .message.incoming .text,
.chat-list .message.incoming .text *,
input,
textarea,
[contenteditable="true"],
[contenteditable="true"] * {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
}

/* ─── 14. MESSAGE ACTIONS — desktop bottom bar (copy + edit) ────────── */
.outgoing-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    padding: 4px 2px 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.outgoingRadius:hover .outgoing-actions,
.outgoing-actions.pinned,
.outgoing-actions.has-versions {
    opacity: 1;
}

.outgoing-actions .msg-act-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--subheading-color, #9b9b9b);
    background: transparent;
    border: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.outgoing-actions .msg-act-btn:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08));
    color: var(--text-color);
}

.outgoing-actions .msg-act-btn .material-symbols-rounded {
    font-size: 18px;
}

/* ─── 15. LONG-PRESS (mobile) — highlight + context menu ────────────── */
@keyframes ui-press-pulse {
    0% {
        box-shadow: 0 0 0 0 var(--accent-ring);
    }

    100% {
        box-shadow: 0 0 0 8px transparent;
    }
}

.message.outgoing.longpress-active {
    background: var(--accent-soft) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 0 0 1.5px var(--accent) !important;
    transform: scale(0.97) translateZ(0) !important;
}

.message.outgoing {
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background 0.2s ease, box-shadow 0.2s ease !important;
}

.msg-context-menu {
    position: fixed;
    z-index: 1000200;
    min-width: 172px;
    padding: 6px;
    border-radius: 14px;
    background: var(--darker-background, #202024);
    border: var(--ui-border);
    box-shadow: var(--ui-shadow-lg);
    opacity: 0;
    transform: scale(0.96);
    transform-origin: top center;
    transition: opacity 0.14s ease, transform 0.14s var(--ui-ease);
    pointer-events: none;
}

.msg-context-menu.open {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.msg-context-menu button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 12px;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    border-radius: 9px;
    cursor: pointer;
}

.msg-context-menu button:hover,
.msg-context-menu button:active {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08));
}

.msg-context-menu button .material-symbols-rounded {
    font-size: 20px;
    color: var(--subheading-color);
}

.msg-context-menu .msg-menu-backdrop {
    display: none;
}

.msg-context-menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 1000199;
    background: transparent;
}

/* ─── 16. SECURE PASS — tighter, ChatGPT-like manage screen ─────────── */
.secure-passmanage {
    padding: 2px;
}

.secure-passmanage .management-of-spins>h2:first-child {
    margin-top: 0 !important;
}

.secure-passmanage h2 {
    font-size: 15px !important;
    margin: 18px 0 8px !important;
}

.secure-passmanage .spin-criters {
    padding: 12px 14px;
    margin-bottom: 8px;
}

.secure-passmanage .spin-criters h3 {
    font-size: 14px !important;
}

/* Keep toggles inside these rows aligned to accent (already handled above) */

/* ─── 17. COMPACT CHAT LAYOUT ─────────────────────────────────────────
   Keep controls in one predictable cluster and reduce the oversized
   spacing inherited from the original desktop-first interface. */
.nav {
    z-index: 1001 !important;
}

.nav-primary-controls {
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 1002;
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
    height: 40px;
}

/* Sidebar toggle button: static inside flex nav-primary-controls */
.nav .nav-menu-button {
    position: static !important;
    display: grid !important;
    place-items: center;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--text-color);
    cursor: pointer;
}

/* Voice button size (position handled separately as fixed) */
.nav #start-live-voice {
    display: grid !important;
    place-items: center;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--text-color);
    cursor: pointer;
}

.nav .nav-menu-button .icon,
.nav #start-live-voice .icon {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 20px !important;
    background: transparent !important;
    margin-left: -5px;
}

.nav .nav-menu-button:hover,
.nav #start-live-voice:hover,
.nav .nav-menu-button:hover .icon,
.nav #start-live-voice:hover .icon {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08)) !important;
}

.nav-menu {
    width: min(280px, 82vw) !important;
    min-width: min(280px, 82vw) !important;
    max-width: min(280px, 82vw) !important;
}

.nav-menu .top-menu-actions {
    padding: 52px 8px 8px !important;
    margin-top: 0 !important;
}

.nav-menu .top-menu-actions button,
.nav-menu .top-menu-actions .img-labs-acc,
.nav-menu .select-selected {
    min-height: 38px !important;
    padding: 7px 10px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
}

.nav-menu .top-menu-actions .img-labs-acc {
    margin-top: 6px !important;
}

.nav-menu .top-menu-actions .img-labs-acc img,
.nav-menu .select-selected img {
    width: 26px !important;
    height: 26px !important;
}

.nav-menu .chats-history {
    padding: 8px !important;
    margin-top: 0 !important;
}

.nav-menu .chats-history .history-user {
    margin-top: 3px !important;
    padding: 8px 9px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

.chat-list {
    width: min(100% - 24px, 760px) !important;
    max-width: 760px !important;
    margin-top: 28px !important;
    padding: 0 0 132px !important;
}

.header-title-con {
    margin-top: 12vh !important;
}

.header .title {
    font-size: clamp(1.6rem, 3vw, 2.15rem) !important;
    line-height: 1.25 !important;
}

.typing-area {
    padding: 8px 12px 10px !important;
}

.typing-area .typing-form,
.typing-area .disclaimer-text {
    max-width: 760px !important;
}

.typing-form .input-wrapper {
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: 16px !important;
    box-shadow: none !important;
}

.typing-form .typing-input {
    min-height: 42px !important;
    padding: 10px 12px 0 !important;
}

.input-actions {
    min-height: 38px !important;
    padding: 2px 4px 4px !important;
}

.input-tools-left .tool-btn,
.input-actions-right .action-btn {
    width: 32px !important;
    height: 32px !important;
}

/* Legacy rule — no longer needed, model-picker-trigger handles height */
/* .input-actions .model-selector .suparva-select { height: 30px !important; } */

.typing-area .disclaimer-text {
    margin-top: 4px !important;
    font-size: 11px !important;
}

@media (min-width: 1000px) {
    .nav-menu:not(.open) {
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
    }

    .nav-menu:not(.open) .top-menu-actions {
        padding: 52px 4px 8px !important;
    }

    .nav-menu:not(.open) .top-menu-actions button,
    .nav-menu:not(.open) .img-labs-acc,
    .nav-menu:not(.open) .select-selected {
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: var(--ui-radius) !important;
    }

    .nav-menu:not(.open) .custom-select {
        margin-left: 0 !important;
        margin-top: 6px !important;
        width: 100% !important;
    }

    .nav-menu:not(.open) .select-selected {
        margin-top: 0 !important;
    }

    .nav-menu:not(.open) .top-menu-actions button .icon,
    .nav-menu:not(.open) .img-labs-acc img,
    .nav-menu:not(.open) .select-selected img {
        margin: 0 !important;
    }

    /* User icon: properly centered in the 56px collapsed rail */
    .nav-menu:not(.open) .side_account {
        width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 6px auto !important;
        padding: 0 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-left: 9px !important;
    }

    .nav-menu:not(.open) .side_account img {
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        object-fit: cover;
    }

    .nav-menu:not(.open) .side_account p {
        display: none !important;
    }
}

@media (max-width: 520px) {
    .nav-primary-controls {
        top: 8px;
        left: 8px;
    }

    .chat-list {
        width: calc(100% - 20px) !important;
        margin-top: 18px !important;
    }

    .typing-area {
        padding: 6px 8px 8px !important;
    }

    /* Do not hide toolbar controls by position here. The character-session
       button is inserted first at runtime, so positional hiding would remove
       the file and camera controls users need on small phones. */
}

/* ═══════════════════════════════════════════════════════════════════════
   REVISION 3 — density pass (less bulky, more Claude/ChatGPT-like) +
   voice button placement + settings dropdown polish.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Top-nav icons: smaller & tighter ─────────────────────────────── */
.nav .icon {
    width: 40px !important;
    height: 40px !important;
    padding: 3px !important;
    font-size: 22px;
}

.nav .nav-menu-button {
    margin: -6px 0 0 -1px !important;
}

.nav .action-buttons {
    right: 10px !important;
    gap: 2px !important;
}

.nav .action-icon {
    margin-top: 7px !important;
}

/* Voice-call button: size only — position is managed via --voice-btn-left */
.nav #start-live-voice {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
}

.nav #start-live-voice .icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 20px;
    display: grid !important;
    place-items: center;
}

/* ─── Sidebar: tighter, cleaner rows ───────────────────────────────── */
.nav-menu .top-menu-actions {
    padding-top: 54px !important;
}

.nav-menu .top-menu-actions button,
.nav-menu .top-menu-actions .img-labs-acc {
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    margin-top: 6px !important;
    margin-left: 2px !important;
    height: 40px !important;
}

.nav-menu .top-menu-actions button .icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 18px;
}

.nav-menu .top-menu-actions .img-labs-acc img {
    width: 26px !important;
    height: 26px !important;
}

.nav-menu .chats-history {
    margin-top: 6px !important;
}

.nav-menu .chats-history>span {
    font-size: 12px !important;
    opacity: 0.7;
}

.nav-menu .chats-history .history-user {
    padding: 8px 10px !important;
    margin-top: 2px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
}

.nav-menu .chats-history .history-user .icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 15px !important;
    margin-right: 2px !important;
}

.select-selected {
    padding: 8px 12px !important;
    font-size: 13.5px !important;
}

.select-selected img {
    width: 28px !important;
    height: 28px !important;
}

.side_account {
    font-size: 13px !important;
}

/* ─── Empty-state header: less oversized ───────────────────────────── */
.header {
    margin-top: 8vh !important;
}

.header .title {
    font-size: 2.1rem !important;
    line-height: 2.8rem !important;
}

.header .subtitle {
    font-size: 1.7rem !important;
    line-height: 2.4rem !important;
}

.header img {
    width: 84px !important;
    height: 84px !important;
}

/* ─── Settings dropdown (theme/language) — high-fidelity shadcn Select ─ */
.data-window .suparva-select {
    border-radius: 9px !important;
    background: var(--secondary-color, #2a2a2a) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important;
    padding: 8px 36px 8px 12px !important;
    font-size: 13.5px !important;
    min-width: 160px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.14s ease, box-shadow 0.14s ease !important;
    user-select: none;
    cursor: pointer;
}

.data-window .suparva-select:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.data-window .suparva-select:focus {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-ring) !important;
}

/* Custom Shadcn fold icon replacing character arrow */
.data-window .suparva-select::after {
    content: "unfold_more" !important;
    font-family: 'Material Symbols Rounded' !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    color: var(--subheading-color, #8a8a8a) !important;
    pointer-events: none !important;
}

.data-window .suparva-select.open::after {
    color: var(--text-color) !important;
}

/* ─── Portalled panel (moved to <body> to escape .data-window transform) ── */
/* The panel is given class .wdrop-portal when appended to body.            */
.wdrop-portal {
    border-radius: 10px !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    background: var(--darker-background, #17171a) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    padding: 4px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    animation: ui-select-in 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ui-select-in {
    from {
        opacity: 0;
        transform: scale(0.96) translateZ(0);
    }

    to {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
}

.wdrop-portal .suparva-option {
    padding: 8px 10px !important;
    border-radius: 6px !important;
    border-left: none !important;
    font-size: 13.5px !important;
    color: var(--text-color) !important;
    transition: background 0.1s ease, color 0.1s ease !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
    user-select: none;
}

.wdrop-portal .suparva-option:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08)) !important;
    color: var(--text-color) !important;
}

.wdrop-portal .suparva-option.selected {
    font-weight: 500;
    color: var(--accent-contrast) !important;
    background: var(--accent) !important;
    padding-right: 32px !important;
}

.wdrop-portal .suparva-option.selected::after {
    content: "check";
    font-family: 'Material Symbols Rounded';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--accent-contrast);
}

/* Legacy in-DOM styles kept for non-portalled fallback */
.data-window .suparva-select-options {
    border-radius: 10px !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    background: var(--darker-background, #17171a) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    padding: 4px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.data-window .suparva-option {
    padding: 8px 10px !important;
    border-radius: 6px !important;
    border-left: none !important;
    font-size: 13.5px !important;
    color: var(--text-color) !important;
    transition: background 0.1s ease, color 0.1s ease !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
}

.data-window .suparva-option:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08)) !important;
    color: var(--text-color) !important;
}

.data-window .suparva-option.selected {
    font-weight: 500;
    color: var(--accent-contrast) !important;
    background: var(--accent) !important;
    padding-right: 32px !important;
}

.data-window .suparva-option.selected::after {
    content: "check";
    font-family: 'Material Symbols Rounded';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--accent-contrast);
}

.model_trn_btn {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   REVISION 4 — Chat history item: three-dot options menu, rename modal,
   pinned state and native-style mobile long-press.
   ═══════════════════════════════════════════════════════════════════════ */

/* Row lays out: [icon] [title …] [⋮] */
.nav-menu .chats-history .history-user {
    position: relative;
    gap: 2px;
}

.nav-menu .chats-history .history-user .history-title {
    transition: max-width 0.15s ease;
}

/* Three-dot button — tucked away until you hover the row (desktop). */
.chat-more-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: 4px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--subheading-color, #9b9b9b);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.chat-more-btn .icon {
    /* Override the round grey chip the sidebar applies to .icon spans. */
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    color: inherit !important;
    border-radius: 0 !important;
}

.nav-menu .chats-history .history-user:hover .chat-more-btn,
.nav-menu .chats-history .history-user.selected .chat-more-btn,
.chat-more-btn:focus-visible {
    opacity: 1;
    transform: scale(1);
}

.chat-more-btn:hover {
    background: rgba(127, 127, 127, 0.22);
    color: var(--text-color);
}

/* Pinned indicator — subtle tint + the leading icon already shows a pin. */
.nav-menu .chats-history .history-user.pinned .icon:first-child {
    color: var(--accent-color, #6366f1);
}

/* On touch devices there's no hover, so keep the button visible but faint;
   the primary interaction there is long-press. */
@media (hover: none),
(max-width: 999px) {
    .chat-more-btn {
        display: none !important;
    }

    .outgoing-actions {
        display: none !important;
    }
}

/* Long-press feedback — the whole row lifts into an "armed" colour. */
.nav-menu .chats-history .history-user.long-press-active {
    background-color: var(--accent-color, #6366f1) !important;
    color: #fff !important;
    transform: scale(0.98);
}

.nav-menu .chats-history .history-user.long-press-active .icon {
    color: #fff !important;
}

/* ── Options dropdown ─────────────────────────────────────────────────── */
.chat-ctx-menu {
    position: fixed;
    z-index: 100010;
    min-width: 168px;
    padding: 6px;
    border-radius: var(--ui-radius) !important;
    background: var(--darker-background, #1a1a1a);
    border: var(--ui-border);
    box-shadow: var(--ui-shadow-md);
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.15s ease, transform 0.15s var(--ui-ease);
    pointer-events: none;
}

.chat-ctx-menu.from-touch {
    transform-origin: top center;
}

.chat-ctx-menu.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.chat-ctx-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 40px;
    padding: 10px 12px;
    padding-left: 5px;
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.chat-ctx-item .icon {
    font-size: 16px;
    width: 28px !important;
    height: 28px !important;
    color: var(--subheading-color, #9b9b9b);
}

.chat-ctx-item:hover {
    background: var(--secondary-hover-color, rgba(127, 127, 127, 0.16));
}

.chat-ctx-item.danger {
    color: #ff6b6b;
}

.chat-ctx-item.danger .icon {
    color: #ff6b6b;
}

.chat-ctx-item.danger:hover {
    background: rgba(255, 107, 107, 0.14);
}

/* ── Rename modal ─────────────────────────────────────────────────────── */
.prompt-scrim {
    position: fixed;
    inset: 0;
    z-index: 100020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.prompt-scrim.show {
    opacity: 1;
    pointer-events: auto;
}

.prompt-win {
    width: 100%;
    max-width: 420px;
    border-radius: var(--ui-radius-lg);
    background: var(--darker-background, #1a1a1a);
    border: var(--ui-border);
    box-shadow: var(--ui-shadow-lg);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.2s var(--ui-ease);
    overflow: hidden;
}

.prompt-scrim.show .prompt-win {
    transform: translateY(0) scale(1);
}

.prompt-head {
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-bottom: var(--ui-border);
    color: var(--text-color);
}

.prompt-body {
    padding: 18px 20px 8px;
}

.prompt-body p {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--subheading-color, #b9b9b9);
}

.prompt-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
    background: var(--secondary-color, rgba(255, 255, 255, 0.04));
    color: var(--text-color);
    font-size: 14px;
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.prompt-input:focus {
    border-color: var(--accent-color, #6366f1);
    box-shadow: 0 0 0 3px var(--accent-ring, rgba(99, 102, 241, 0.35));
}

.prompt-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
}

.prompt-actions button {
    min-width: 92px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--ui-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.prompt-actions button:active {
    transform: scale(0.97);
}

.prompt-cancel {
    background: transparent;
    border-color: var(--border-color, rgba(255, 255, 255, 0.16)) !important;
    color: var(--text-color);
}

.prompt-cancel:hover {
    background: var(--secondary-hover-color, rgba(127, 127, 127, 0.16));
}

.prompt-ok {
    background: var(--accent-color, #6366f1);
    color: #fff;
}

.prompt-ok:hover {
    filter: brightness(1.08);
}

/* Light theme tweaks for the popovers */
body.light_mode .chat-ctx-menu,
body.light_mode .prompt-win {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light_mode .chat-ctx-item,
body.light_mode .prompt-head {
    color: #1a1a1a;
}

/* ─────────────────────────────────────────────────────────────
   18. RESPONSIVE NAVIGATION & COLLAPSED TOGGLE ALIGNMENT
   ───────────────────────────────────────────────────────────── */

/* Desktop Collapsed Sidebar Toggle Alignment */
@media (min-width: 1000px) {
    body:has(.nav-menu:not(.open)) .nav-primary-controls {
        left: 8px !important;
        top: 12px !important;
        transform: none !important;
    }

    body:has(.nav-menu:not(.open)) .nav-menu-button {
        width: 40px !important;
        height: 40px !important;
        border-radius: var(--ui-radius) !important;
    }

    body:has(.nav-menu:not(.open)) .nav-menu-button .icon {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Unify sizing, display, and centering for all top bar buttons to keep them in a single line */
.nav-primary-controls,
.nav .action-buttons {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
}

.nav-primary-controls {
    left: 12px !important;
}

.nav .action-buttons {
    right: 12px !important;
}

.nav .nav-menu-button,
.nav #start-live-voice,
.nav .action-icon {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 9px !important;
}

.nav .nav-menu-button .icon,
.nav #start-live-voice .icon,
.nav .action-icon .icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Mobile Devices: Premium top bar background, drop shadow, and spacing */
@media (max-width: 999px) {
    .nav {
        background-color: var(--nav-bar-color, #171717) !important;
        background: var(--nav-bar-color, #171717) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.15) !important;
        backdrop-filter: blur(16px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
        pointer-events: auto !important;
        height: 52px !important;
    }

    .nav .loader {
        bottom: 0 !important;
    }

    /* Shift chat list down so first bubble is fully visible below the mobile top bar */
    .chat-list {
        margin-top: 72px !important;
    }
}

/* ── Chart: inline responsive sizing ────────────────────────────────── */
.ai-chart-canvas-area {
    position: relative !important;
}

.ai-chart-canvas-area canvas {
    width: 100% !important;
    max-height: 320px !important;
}

@media (max-width: 600px) {
    .ai-chart-wrapper {
        margin: 8px 0 !important;
        border-radius: 12px !important;
    }

    .ai-chart-canvas-area {
        padding: 10px 8px 12px !important;
    }

    .ai-chart-canvas-area canvas {
        max-height: 220px !important;
    }

    .ai-chart-header {
        padding: 8px 10px !important;
    }

    .ai-chart-label {
        font-size: 10px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   FULLSCREEN CHART OVERLAY
   ═══════════════════════════════════════════════════════════════════════ */
.chart-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.chart-fullscreen-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Backdrop */
.chart-fs-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Container — desktop = centered card, mobile = full screen */
.chart-fs-container {
    position: relative;
    z-index: 1;
    width: 90vw;
    max-width: 860px;
    max-height: 85vh;
    background: linear-gradient(160deg, rgba(15, 10, 30, 0.96), rgba(10, 15, 35, 0.98));
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    transform: scale(0.92) translateY(12px);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart-fullscreen-overlay.active .chart-fs-container {
    transform: scale(1) translateY(0);
}

/* Header */
.chart-fs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.chart-fs-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(148, 163, 184, 0.85);
    text-transform: uppercase;
}

.chart-fs-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(148, 163, 184, 0.85);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.chart-fs-close-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    transform: scale(1.08);
}

.chart-fs-close-btn .material-symbols-rounded {
    font-size: 20px;
}

/* Body — holds the canvas */
.chart-fs-body {
    flex: 1;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    min-height: 0;
}

.chart-fs-body canvas {
    width: 100% !important;
    max-height: 65vh !important;
}

/* Mobile fullscreen: edge-to-edge */
@media (max-width: 600px) {
    .chart-fs-container {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none;
    }

    .chart-fs-body {
        padding: 12px;
    }

    .chart-fs-body canvas {
        max-height: 80vh !important;
    }

    .chart-fs-header {
        padding: 12px 14px;
    }
}

/* Light mode tweaks for the overlay */
body.light_mode .chart-fs-container {
    background: linear-gradient(160deg, rgba(245, 243, 255, 0.98), rgba(240, 242, 248, 0.99));
    border-color: rgba(124, 58, 237, 0.15);
}

body.light_mode .chart-fs-title {
    color: rgba(71, 85, 105, 0.85);
}

body.light_mode .chart-fs-close-btn {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(71, 85, 105, 0.85);
}

body.light_mode .chart-fs-close-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

/* ═══════════════════════════════════════════════════════════════════════
   19. THINKING BLOCK — Claude / ChatGPT style
   Clean single-line header, silver text, no purple tint.
   ═══════════════════════════════════════════════════════════════════════ */

/* Reset the outer wrapper — no tinted box */
.thinking-block {
    display: block !important;
    width: 100% !important;
    margin: 2px 0 8px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    animation: blockFadeIn 0.2s ease !important;
}

/* Full-width single-line clickable header row */
.thinking-block .thinking-header,
.thinking-header {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 5px 0 !important;
    cursor: pointer !important;
    user-select: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    transition: opacity 0.15s ease !important;
}

.thinking-block .thinking-header:hover,
.thinking-header:hover {
    opacity: 0.78 !important;
    background: transparent !important;
}

/* Icon — spinning while active, static when done */
.thinking-block .thinking-icon,
.thinking-icon {
    font-size: 15px !important;
    color: rgba(160, 160, 175, 0.85) !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

/* Spin the autorenew icon only while thinking is active */
.thinking-block:not(.collapsed) .thinking-icon {
    animation: thinkingIconSpin 1.2s linear infinite !important;
}

/* Once collapsed (thinking done) the lightbulb should NOT spin */
.thinking-block.collapsed .thinking-icon {
    animation: none !important;
}

@keyframes thinkingIconSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Label text */
.thinking-block .thinking-label,
.thinking-label {
    flex: 1 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(160, 160, 175, 0.85) !important;
    letter-spacing: 0.015em !important;
    white-space: nowrap !important;
    background: none !important;
    -webkit-text-fill-color: rgba(160, 160, 175, 0.85) !important;
    animation: none !important;
}

/* While streaming: shimmer the "Thinking" text */
.thinking-block .thinking-label--active,
.thinking-label--active {
    background: linear-gradient(90deg,
            rgba(155, 155, 175, 0.7) 0%,
            rgba(210, 210, 225, 0.95) 45%,
            rgba(155, 155, 175, 0.7) 100%) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: thinkingShimmer 1.8s ease-in-out infinite !important;
}

@keyframes thinkingShimmer {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

/* Live elapsed counter — a quiet, tabular seconds readout that ticks while the
   model is thinking. Sits between the label and the chevron; cleared on close. */
.thinking-block .thinking-time,
.thinking-time {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums !important;
    color: rgba(150, 150, 165, 0.7) !important;
    letter-spacing: 0.02em !important;
    -webkit-text-fill-color: rgba(150, 150, 165, 0.7) !important;
}

.thinking-block .thinking-time:empty {
    display: none !important;
}

/* Chevron */
.thinking-block .thinking-chevron,
.thinking-chevron {
    font-size: 17px !important;
    color: rgba(145, 145, 160, 0.7) !important;
    flex-shrink: 0 !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    line-height: 1 !important;
}

/* Collapsed state: chevron rotates, old .thinking-toggle also handled */
.thinking-block.collapsed .thinking-chevron,
.thinking-block.collapsed .thinking-toggle {
    transform: rotate(-90deg) !important;
}

/* Expanded content area — subtle inset, no purple */
.thinking-block .thinking-content,
.thinking-content {
    margin-top: 4px !important;
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    color: rgba(165, 165, 180, 0.82) !important;
    line-height: 1.7 !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 10px !important;
    max-height: 360px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition:
        max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.28s ease,
        padding 0.28s ease !important;
}

/* Collapsed: hide content */
.thinking-block.collapsed .thinking-content {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    border-color: transparent !important;
    margin-top: 0 !important;
}

/* While live (still streaming): hide content by default — user can expand */
.thinking-block.is-live .thinking-content {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    border-color: transparent !important;
    margin-top: 0 !important;
}

/* If user explicitly expands the live thinking block (remove collapsed) */
.thinking-block.is-live.expanded .thinking-content {
    max-height: 360px !important;
    opacity: 1 !important;
    padding: 10px 12px !important;
    margin-top: 4px !important;
    overflow-y: auto !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* Chevron points up (expand_less) while live and collapsed */
.thinking-block.is-live:not(.expanded) .thinking-chevron {
    transform: rotate(-90deg) !important;
}

/* Typewriter cursor blink after the label text */
.thinking-block.is-live .thinking-label--active::after {
    content: "|";
    display: inline-block;
    margin-left: 1px;
    color: rgba(160, 160, 175, 0.7);
    animation: thinkCursorBlink 0.8s steps(2) infinite;
    font-weight: 300;
}

@keyframes thinkCursorBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Inline code inside thinking */
.thinking-content code.inline-code {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(200, 200, 220, 0.9) !important;
    border-radius: 4px !important;
}

/* Light mode adjustments */
body.light_mode .thinking-block .thinking-label,
body.light_mode .thinking-label {
    color: rgba(80, 80, 100, 0.85) !important;
    -webkit-text-fill-color: rgba(80, 80, 100, 0.85) !important;
}

body.light_mode .thinking-block .thinking-label--active,
body.light_mode .thinking-label--active {
    background: linear-gradient(90deg,
            rgba(80, 80, 110, 0.65) 0%,
            rgba(120, 120, 160, 0.95) 45%,
            rgba(80, 80, 110, 0.65) 100%) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.light_mode .thinking-block .thinking-icon,
body.light_mode .thinking-icon {
    color: rgba(90, 90, 115, 0.8) !important;
}

body.light_mode .thinking-block .thinking-chevron,
body.light_mode .thinking-chevron {
    color: rgba(100, 100, 125, 0.65) !important;
}

body.light_mode .thinking-block .thinking-content,
body.light_mode .thinking-content {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: rgba(70, 70, 90, 0.82) !important;
}

.thinking-header {
    margin-left: -2px !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   DISPLAY MATH — live MathJax actions + expanded viewer
   ═══════════════════════════════════════════════════════════════════════ */
.math-equation-wrapper {
    position: relative;
    display: block;
    margin: 0.9em 0;
    padding: 0.5rem 2.6rem 0.5rem 0.5rem;
    min-height: 2.6rem;
    overflow-x: auto;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: background 0.16s ease, border-color 0.16s ease;
}

.math-equation-wrapper:hover,
.math-equation-wrapper:focus-within {
    background: rgba(124, 58, 237, 0.06);
    border-color: rgba(167, 139, 250, 0.18);
}

.math-equation-wrapper>mjx-container {
    margin: 0 !important;
    max-width: 100%;
}

.math-equation-controls {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    display: flex;
    gap: 0.25rem;
    opacity: 0.52;
    transition: opacity 0.16s ease;
}

.math-equation-wrapper:hover .math-equation-controls,
.math-equation-wrapper:focus-within .math-equation-controls {
    opacity: 1;
}

.math-equation-control,
.math-equation-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(167, 139, 250, 0.22);
    border-radius: 8px;
    background: rgba(20, 16, 35, 0.8);
    color: rgba(226, 232, 240, 0.88);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.math-equation-control:hover,
.math-equation-close:hover {
    background: rgba(124, 58, 237, 0.28);
    border-color: rgba(196, 181, 253, 0.55);
    color: #fff;
    transform: translateY(-1px);
}

.math-equation-control.is-success {
    color: #4ade80;
}

.math-equation-control .material-symbols-rounded,
.math-equation-close .material-symbols-rounded {
    font-size: 17px;
}

.math-equation-overlay {
    position: fixed;
    z-index: 999999;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.math-equation-overlay.active {
    opacity: 1;
    visibility: visible;
}

.math-equation-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.76);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.math-equation-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(90vw, 920px);
    max-height: 84vh;
    overflow: hidden;
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(15, 10, 30, 0.98), rgba(10, 15, 35, 0.99));
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.58);
    transform: scale(0.94) translateY(12px);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.math-equation-overlay.active .math-equation-dialog {
    transform: scale(1) translateY(0);
}

.math-equation-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(203, 213, 225, 0.9);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.math-equation-dialog-body {
    padding: clamp(24px, 7vw, 72px) 24px;
    overflow: auto;
    text-align: center;
}

.math-equation-dialog-body>mjx-container {
    max-width: 100%;
    font-size: clamp(1.3rem, 3vw, 2.25rem) !important;
}

body.light_mode .math-equation-wrapper:hover,
body.light_mode .math-equation-wrapper:focus-within {
    background: rgba(124, 58, 237, 0.05);
}

body.light_mode .math-equation-control,
body.light_mode .math-equation-close {
    background: rgba(255, 255, 255, 0.92);
    color: #475569;
    border-color: rgba(124, 58, 237, 0.2);
}

body.light_mode .math-equation-dialog {
    background: linear-gradient(160deg, #fbfaff, #f2f4f8);
}

body.light_mode .math-equation-dialog-header {
    color: #475569;
    border-color: rgba(0, 0, 0, 0.09);
}

@media (max-width: 600px) {
    .math-equation-wrapper {
        padding-right: 0.5rem;
        padding-top: 2.7rem;
    }

    .math-equation-controls {
        opacity: 1;
    }

    .math-equation-dialog {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border: 0;
        border-radius: 0;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   CALM NEUTRAL SYSTEM
   Replaces the older purple treatment with a quiet slate canvas and a single,
   optional blue/teal accent. These tokens deliberately sit last so legacy
   component rules inherit the new language without markup changes.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --accent: #b7795c;
    --accent-strong: #975d46;
    --accent-contrast: #ffffff;
    --accent-soft: rgba(183, 121, 92, 0.14);
    --accent-ring: rgba(183, 121, 92, 0.34);
    --accent-color: #b7795c;
    --violet: 183, 121, 92;
    --text-color: #e7eaee;
    --subheading-color: #98a2b3;
    --placeholder-color: #98a2b3;
    --primary-color: #17191c;
    --secondary-color: #22262b;
    --secondary-hover-color: #2b3138;
    /* Quiet hover wash for borderless controls — icon buttons, menu items, view
       toggles. It was referenced in a dozen places across the component
       stylesheets but never actually declared, so every one of them silently used
       its own literal fallback. Those fallbacks were all white-on-dark, which
       meant hover feedback vanished entirely in light mode. Declaring it once
       here gives both themes a real value. */
    --hover-bg: rgba(255, 255, 255, 0.06);
    --hover-bg-strong: rgba(255, 255, 255, 0.1);
    --light-dark-background: #1d2126;
    --border-color: rgba(226, 232, 240, 0.12);
    --nav-bar-color: rgba(18, 20, 23, 0.9);
    --nav-bar-border: rgba(226, 232, 240, 0.1);
    --highlight-background: #30363d;
    --chat-area-background: #111315;
    --darker-background: #17191c;
    --disabled-color: #141619;
    --loader-bg: linear-gradient(135deg, #1f242a, #14171a);
    --loader-primary: linear-gradient(135deg, #60a5fa, #3b82f6);
    --loader-secondary: linear-gradient(135deg, #38bdf8, #0284c7);
    --loader-accent: linear-gradient(135deg, #2dd4bf, #0f766e);
    --input-wrapper-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 8px 22px rgba(0, 0, 0, 0.14);
}

body.light_mode {
    --text-color: #20252b;
    --subheading-color: #667085;
    --placeholder-color: #667085;
    --primary-color: #ffffff;
    --secondary-color: #f1f3f5;
    --secondary-hover-color: #e7ebef;
    /* Dark wash on light surfaces — the inverse of the dark-theme value above. */
    --hover-bg: rgba(16, 24, 40, 0.055);
    --hover-bg-strong: rgba(16, 24, 40, 0.09);
    --light-dark-background: #edf2f7;
    --border-color: rgba(31, 41, 55, 0.14);
    --nav-bar-color: rgba(255, 255, 255, 0.9);
    --nav-bar-border: rgba(31, 41, 55, 0.1);
    --highlight-background: #dde3e9;
    --chat-area-background: #f7f8fa;
    --darker-background: #ffffff;
    --disabled-color: #eef1f4;
    --loader-bg: linear-gradient(135deg, #f8fafc, #e9eef3);
    --loader-primary: linear-gradient(135deg, #60a5fa, #2563eb);
    --loader-secondary: linear-gradient(135deg, #38bdf8, #0284c7);
    --loader-accent: linear-gradient(135deg, #2dd4bf, #0f766e);
    --input-wrapper-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 5px 18px rgba(15, 23, 42, 0.06);
}

/* Press/selection feedback: neutral elevation instead of a colour flood. */
.nav-menu .chats-history .history-user.long-press-active,
.nav-menu .chats-history .history-user.selected {
    background: var(--accent-soft) !important;
    color: var(--text-color) !important;
    box-shadow: inset 0 0 0 1px var(--accent-ring) !important;
}

.message.outgoing.longpress-active,
.message.outgoing .longpress-active,
.outgoingRadius .message.longpress-active {
    background: var(--secondary-hover-color) !important;
    box-shadow: 0 0 0 2px var(--accent-ring), 0 10px 26px rgba(0, 0, 0, 0.18) !important;
}

.msg-context-menu,
.chat-ctx-menu,
.wdrop-portal,
.data-window .suparva-select-options {
    background: color-mix(in srgb, var(--darker-background) 94%, transparent) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.24) !important;
}

/* Charts adopt the same quiet surface as menus and message tools. */
.ai-chart-wrapper {
    background: var(--darker-background) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
}

.ai-chart-header {
    background: var(--secondary-color) !important;
    border-bottom-color: var(--border-color) !important;
}

.ai-chart-label,
.chart-fs-title {
    color: var(--subheading-color) !important;
}

.ai-chart-copy-btn,
.chart-fs-close-btn {
    background: transparent !important;
    color: var(--subheading-color) !important;
    border: 1px solid transparent !important;
}

.ai-chart-copy-btn:hover,
.chart-fs-close-btn:hover {
    background: var(--secondary-hover-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.chart-fullscreen-overlay,
.math-equation-overlay {
    --overlay-surface: var(--darker-background);
}

.chart-fs-backdrop,
.math-equation-backdrop {
    background: rgba(12, 14, 16, 0.72) !important;
}

.chart-fs-container,
.math-equation-dialog {
    background: var(--overlay-surface) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.42) !important;
}

.chart-fs-header,
.math-equation-dialog-header {
    background: var(--secondary-color) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Equation cards stay quiet until a user interacts with them. */
.math-equation-wrapper:hover,
.math-equation-wrapper:focus-within {
    background: var(--accent-soft) !important;
    border-color: rgba(59, 130, 246, 0.24) !important;
}

.math-equation-control,
.math-equation-close {
    background: var(--secondary-color) !important;
    border-color: var(--border-color) !important;
    color: var(--subheading-color) !important;
}

.math-equation-control:hover,
.math-equation-close:hover {
    background: var(--secondary-hover-color) !important;
    border-color: rgba(59, 130, 246, 0.38) !important;
    color: var(--text-color) !important;
}

body.light_mode .chart-fs-backdrop,
body.light_mode .math-equation-backdrop {
    background: rgba(24, 30, 38, 0.38) !important;
}

/* Settings switches: compact, familiar, keyboard-accessible controls.
   Existing input IDs/data-pref contracts are untouched. */
.toggle-container {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 46px;
    min-height: 28px;
}

.toggle-input {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    margin: -1px !important;
    opacity: 0 !important;
}

.toggle-label {
    display: inline-flex !important;
    align-items: center !important;
    width: 46px !important;
    height: 28px !important;
    padding: 3px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 999px !important;
    background: var(--secondary-color) !important;
    cursor: pointer !important;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.toggle-slider {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
}

.toggle-slider::before,
.toggle-slider::after,
.toggle-handle::before,
.toggle-handle::after {
    content: none !important;
    display: none !important;
}

.toggle-handle {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #f8fafc !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.32) !important;
    transform: translateX(0) !important;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.18s ease !important;
}

.toggle-input:checked+.toggle-label {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

.toggle-input:checked+.toggle-label .toggle-slider {
    background: transparent !important;
    box-shadow: none !important;
}

.toggle-input:checked+.toggle-label .toggle-handle {
    transform: translateX(18px) !important;
}

.toggle-input:focus-visible+.toggle-label {
    outline: 0 !important;
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

.toggle-label:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color)) !important;
}

body.light_mode .toggle-handle {
    background: #ffffff !important;
}

/* The settings shell gets more breathing room, with controls presented as
   deliberate rows rather than bright coloured widgets. */
.stg-row:hover {
    background: color-mix(in srgb, var(--secondary-color) 52%, transparent) !important;
}

.stg-section-label {
    color: var(--subheading-color) !important;
}

.stg-swatch {
    box-shadow: inset 0 0 0 2px var(--darker-background) !important;
}

.stg-swatch.active {
    outline-color: var(--accent) !important;
    box-shadow: inset 0 0 0 2px var(--darker-background), 0 0 0 2px var(--accent-ring) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   WARM GRAPHITE — Claude warmth, ChatGPT restraint
   This final layer intentionally removes cool-blue surface casts. Colour is
   reserved for deliberate controls; structure comes from warm charcoal steps.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --accent: #b7795c;
    --accent-color: #b7795c;
    --accent-strong: #975d46;
    --accent-contrast: #ffffff;
    --accent-soft: rgba(183, 121, 92, 0.13);
    --accent-ring: rgba(183, 121, 92, 0.28);
    --violet: 183, 121, 92;
    --text-color: #eeeae5;
    --subheading-color: #aaa39b;
    --placeholder-color: #938d86;
    --primary-color: #1f1e1c;
    --secondary-color: #2a2927;
    --secondary-hover-color: #353330;
    --light-dark-background: #242321;
    --border-color: rgba(245, 238, 230, 0.1);
    --nav-bar-color: rgba(27, 26, 24, 0.94);
    --nav-bar-border: rgba(245, 238, 230, 0.08);
    --highlight-background: #383531;
    --chat-area-background: #201f1d;
    --darker-background: #252321;
    --disabled-color: #1c1b19;
    --loader-bg: linear-gradient(135deg, #292724, #1e1d1b);
    --loader-primary: linear-gradient(135deg, #d39a7c, #b7795c);
    --loader-secondary: linear-gradient(135deg, #b8aaa0, #81776f);
    --loader-accent: linear-gradient(135deg, #9baf8d, #667761);
    --input-wrapper-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 12px 30px rgba(0, 0, 0, 0.13);
}

body.light_mode {
    --text-color: #292624;
    --subheading-color: #746d66;
    --placeholder-color: #877f77;
    --primary-color: #fbfaf8;
    --secondary-color: #f1eeea;
    --secondary-hover-color: #e8e3dd;
    --light-dark-background: #f5f1ec;
    --border-color: rgba(62, 54, 47, 0.12);
    --nav-bar-color: rgba(248, 245, 241, 0.94);
    --nav-bar-border: rgba(62, 54, 47, 0.09);
    --highlight-background: #e4ded7;
    --chat-area-background: #f8f6f3;
    --darker-background: #fbfaf8;
    --disabled-color: #eeebe6;
    --loader-bg: linear-gradient(135deg, #faf8f5, #eee9e2);
    --loader-primary: linear-gradient(135deg, #bb8067, #94634e);
    --loader-secondary: linear-gradient(135deg, #a99d92, #766e67);
    --loader-accent: linear-gradient(135deg, #9cad91, #667761);
    --input-wrapper-shadow: 0 1px 2px rgba(53, 43, 36, 0.07), 0 10px 26px rgba(53, 43, 36, 0.05);
}

/* Distinct navigation plane: quiet, near-black, and never blue. */
.nav-menu {
    background: #1a1917 !important;
    border-right-color: rgba(245, 238, 230, 0.08) !important;
}

body.light_mode .nav-menu {
    background: #f1ede8 !important;
    border-right-color: rgba(62, 54, 47, 0.1) !important;
}

.nav-menu .top-menu-actions button,
.nav-menu .top-menu-actions .img-labs-acc,
.nav-menu .select-selected {
    background: transparent !important;
}

.nav-menu .top-menu-actions button:hover,
.nav-menu .top-menu-actions .img-labs-acc:hover,
.nav-menu .chats-history .history-user:hover {
    background: rgba(255, 250, 244, 0.065) !important;
}

body.light_mode .nav-menu .top-menu-actions button:hover,
body.light_mode .nav-menu .top-menu-actions .img-labs-acc:hover,
body.light_mode .nav-menu .chats-history .history-user:hover {
    background: rgba(73, 58, 46, 0.055) !important;
}

/* Welcome screen: let type, whitespace and the single composer carry it. */
.header .title {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-weight: 400 !important;
    letter-spacing: -0.035em !important;
    color: var(--text-color) !important;
}

.header .subtitle {
    color: var(--subheading-color) !important;
}

.typing-form .input-wrapper {
    background: var(--secondary-color) !important;
    border: 1px solid transparent !important;
    border-radius: 15px !important;
    box-shadow: var(--input-wrapper-shadow) !important;
}

.typing-form .input-wrapper:focus-within {
    border-color: rgba(238, 226, 216, 0.18) !important;
    box-shadow: 0 0 0 1px rgba(238, 226, 216, 0.06), var(--input-wrapper-shadow) !important;
}

body.light_mode .typing-form .input-wrapper:focus-within {
    border-color: rgba(77, 59, 47, 0.18) !important;
}

.typing-form .typing-input {
    color: var(--text-color) !important;
}

.input-actions-right .send-btn,
.input-actions-right .send-btn:hover,
.input-actions-right .send-btn.active:hover {
    background: #eeeae5 !important;
    color: #292624 !important;
}

body.light_mode .input-actions-right .send-btn,
body.light_mode .input-actions-right .send-btn:hover,
body.light_mode .input-actions-right .send-btn.active:hover {
    background: #292624 !important;
    color: #fbfaf8 !important;
}

/* Recessed sheets and overlays; no cool gradients or colourful outlines. */
.ai-chart-wrapper,
.chart-fs-container,
.math-equation-dialog,
.msg-context-menu,
.chat-ctx-menu,
.wdrop-portal,
.data-window .suparva-select-options,
.prompt-win {
    background: var(--darker-background) !important;
    border-color: var(--border-color) !important;
}

.ai-chart-header,
.chart-fs-header,
.math-equation-dialog-header {
    background: var(--secondary-color) !important;
    border-bottom-color: var(--border-color) !important;
}

.chart-fs-backdrop,
.math-equation-backdrop {
    background: rgba(18, 17, 15, 0.76) !important;
}

body.light_mode .chart-fs-backdrop,
body.light_mode .math-equation-backdrop {
    background: rgba(44, 37, 31, 0.3) !important;
}

.math-equation-wrapper:hover,
.math-equation-wrapper:focus-within {
    background: rgba(245, 238, 230, 0.035) !important;
    border-color: rgba(245, 238, 230, 0.1) !important;
}

body.light_mode .math-equation-wrapper:hover,
body.light_mode .math-equation-wrapper:focus-within {
    background: rgba(63, 49, 39, 0.035) !important;
    border-color: rgba(63, 49, 39, 0.1) !important;
}

/* Focus and active feedback should feel tactile, not branded. */
.nav-menu .chats-history .history-user.long-press-active,
.nav-menu .chats-history .history-user.selected {
    background: rgba(245, 238, 230, 0.09) !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}

body.light_mode .nav-menu .chats-history .history-user.long-press-active,
body.light_mode .nav-menu .chats-history .history-user.selected {
    background: rgba(63, 49, 39, 0.09) !important;
}

.message.outgoing.longpress-active,
.message.outgoing .longpress-active,
.outgoingRadius .message.longpress-active {
    background: var(--secondary-hover-color) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16) !important;
}

/* Warm, low-contrast switches: a state indicator rather than a bright badge. */
.toggle-input:checked+.toggle-label {
    background: #b7795c !important;
    border-color: #b7795c !important;
}

body.light_mode .toggle-input:checked+.toggle-label {
    background: #94634e !important;
    border-color: #94634e !important;
}

.toggle-input:focus-visible+.toggle-label {
    box-shadow: 0 0 0 3px rgba(183, 121, 92, 0.22) !important;
}

/* Selected menu rows and focus states use warm translucency instead of blue. */
.wdrop-portal .suparva-option.selected,
.data-window .suparva-option.selected {
    background: var(--accent-soft) !important;
    color: var(--text-color) !important;
}

.wdrop-portal .suparva-option.selected::after,
.data-window .suparva-option.selected::after {
    color: var(--accent) !important;
}

.stg-swatch.active {
    outline-color: var(--accent) !important;
    box-shadow: inset 0 0 0 2px var(--darker-background), 0 0 0 2px var(--accent-ring) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   APP SIDEBAR & MESSAGE DENSITY
   A compact native-app rail/panel: one aligned control column, an inline
   character roster, quiet history rows, and content-sized user messages.
   ═══════════════════════════════════════════════════════════════════════ */
.nav-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 292px !important;
    min-width: 292px !important;
    max-width: 292px !important;
    padding: 12px 10px 10px !important;
    overflow: hidden !important;
    background: #1a1917 !important;
    border-right: 1px solid rgba(245, 238, 230, 0.08) !important;
    box-shadow: none !important;
    transition: width 0.32s cubic-bezier(0.22, 0.8, 0.2, 1),
        min-width 0.32s cubic-bezier(0.22, 0.8, 0.2, 1),
        max-width 0.32s cubic-bezier(0.22, 0.8, 0.2, 1),
        background-color 0.2s ease !important;
}

.nav-menu .top-menu-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 48px 0 10px !important;
}

.nav-menu .top-menu-actions>div {
    width: 100% !important;
}

/* New chat and selected character share a single, deliberate alignment. */
.nav-menu .top-menu-actions button,
.nav-menu .select-selected {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--text-color) !important;
    font-size: 13.5px !important;
    font-weight: 560 !important;
    line-height: 1 !important;
    transform: none !important;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
}

.nav-menu .top-menu-actions button .icon {
    display: grid !important;
    place-items: center !important;
    width: 25px !important;
    height: 25px !important;
    margin: 0 10px 0 0 !important;
    padding: 0 !important;
    border-radius: 7px !important;
    background: rgba(245, 238, 230, 0.08) !important;
    color: var(--text-color) !important;
    font-size: 17px !important;
}

.nav-menu .top-menu-actions button:hover,
.nav-menu .select-selected:hover,
.nav-menu .custom-select.active .select-selected {
    background: rgba(245, 238, 230, 0.075) !important;
    border-color: rgba(245, 238, 230, 0.08) !important;
    transform: translateY(-1px) !important;
}

.nav-menu .top-menu-actions button:active,
.nav-menu .select-selected:active {
    transform: scale(0.985) !important;
}

/* Character picker: no floating legacy menu. It unfolds as an elegant,
   touch-friendly roster directly below its trigger. */
.custom-select {
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
}

.select-selected {
    cursor: pointer !important;
    user-select: none !important;
}

.select-selected::after {
    content: 'expand_more' !important;
    display: block !important;
    margin-left: auto !important;
    font-family: 'Material Symbols Rounded' !important;
    font-size: 18px !important;
    color: var(--subheading-color) !important;
    transition: transform 0.2s cubic-bezier(0.22, 0.8, 0.2, 1) !important;
}

.custom-select.active .select-selected::after {
    transform: rotate(180deg) !important;
}

.select-selected img {
    width: 25px !important;
    height: 25px !important;
    margin: 0 10px 0 0 !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 1px rgba(245, 238, 230, 0.12) !important;
}

.custom-select>div:nth-child(2) {
    overflow: visible !important;
}

.custom-select .select-items {
    position: static !important;
    display: grid !important;
    grid-template-rows: 0fr !important;
    width: 100% !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 4px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(245, 238, 230, 0.035) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: grid-template-rows 0.24s cubic-bezier(0.22, 0.8, 0.2, 1), max-height 0.24s ease, opacity 0.16s ease, margin 0.24s ease, padding 0.24s ease !important;
}

.custom-select.active .select-items {
    grid-template-rows: 1fr !important;
    max-height: min(330px, 42vh) !important;
    margin-top: 5px !important;
    padding: 5px 4px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    border: 1px solid rgba(245, 238, 230, 0.07) !important;
}

.custom-select .select-items::before {
    content: '';
    min-height: 0;
}

.custom-select .select-item {
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    margin: 1px 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text-color) !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background 0.14s ease, transform 0.14s ease !important;
}

.custom-select .select-item:hover {
    background: rgba(245, 238, 230, 0.09) !important;
    transform: translateX(2px) !important;
}

.custom-select .select-item img {
    width: 27px !important;
    height: 27px !important;
    margin: 0 10px 0 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.custom-select .select-items {
    overflow-y: auto !important;
    scrollbar-width: thin;
}

.custom-select .select-items::-webkit-scrollbar {
    width: 4px;
}

.custom-select .select-items::-webkit-scrollbar-thumb {
    background: rgba(245, 238, 230, 0.18);
    border-radius: 999px;
}

/* History gains a proper flexible viewport instead of a computed fixed height. */
.nav-menu .chats-history {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 8px 0 4px !important;
    overflow: hidden !important;
}

.nav-menu .chats-history>span {
    display: block !important;
    margin: 0 0 5px !important;
    padding: 0 10px !important;
    color: var(--subheading-color) !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    letter-spacing: 0.075em !important;
    line-height: 1.6 !important;
    text-transform: uppercase !important;
}

.nav-menu .chat-histories {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 0 2px !important;
}

.nav-menu .chats-history .history-user {
    min-height: 38px !important;
    margin: 1px 0 !important;
    padding: 0 8px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    transform: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.nav-menu .chats-history .history-user .icon {
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--subheading-color) !important;
    font-size: 16px !important;
}

.nav-menu .chats-history .history-user:hover {
    background: rgba(245, 238, 230, 0.065) !important;
}

.nav-menu .chats-history .history-user.selected {
    background: rgba(245, 238, 230, 0.095) !important;
    border-color: rgba(245, 238, 230, 0.06) !important;
}

/* Keep secondary account actions discoverable but visually ordered. */
.nav-menu .account_actions {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
    flex: 0 0 auto !important;
    margin: 6px 0 8px !important;
    padding: 7px 2px !important;
    border-top: 1px solid rgba(245, 238, 230, 0.07) !important;
}

.nav-menu .account_actions .profile-actions {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--subheading-color) !important;
    cursor: pointer !important;
    transition: background 0.14s ease, color 0.14s ease !important;
}

.nav-menu .account_actions .profile-actions:hover {
    background: rgba(245, 238, 230, 0.075) !important;
    color: var(--text-color) !important;
}

.nav-menu .account_actions .profile-actions>span:not(.icon):not(.notice-menu-badge) {
    display: none !important;
}

.nav-menu .account_actions .profile-actions .icon {
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 18px !important;
}

.nav-menu .side_account {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    border: 1px solid rgba(245, 238, 230, 0.08) !important;
    border-radius: 10px !important;
    background: rgba(245, 238, 230, 0.04) !important;
}

.nav-menu .side_account img {
    width: 28px !important;
    height: 28px !important;
    margin: 0 9px 0 0 !important;
}

.nav-menu .side_account p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px !important;
}

/* User bubbles are content-first: no fixed 80% reservation for short text. */
.outgoingRadius {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    overflow: visible !important;
}

.chat-list .message.outgoing {
    display: block !important;
    width: fit-content !important;
    min-width: min-content !important;
    max-width: min(74%, 620px) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 10px 13px !important;
    overflow-wrap: anywhere !important;
    border-radius: 16px 16px 5px 16px !important;
}

.outgoingRadius .outgoing-actions {
    width: fit-content;
    margin-left: auto;
}

/* Expand bubble to full width while the user is editing it */
.chat-list .message.outgoing:has(.editable-textbox),
.chat-list .message.outgoing:has([contenteditable="true"]) {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (min-width: 1000px) {
    .nav-menu:not(.open) {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
        padding: 12px 8px 10px !important;
    }

    .nav-menu:not(.open) .top-menu-actions {
        padding-top: 48px !important;
        align-items: center !important;
    }

    .nav-menu:not(.open) .top-menu-actions button,
    .nav-menu:not(.open) .select-selected {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }

    .nav-menu:not(.open) .top-menu-actions button .icon {
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
    }

    .nav-menu:not(.open) .select-selected img {
        width: 26px !important;
        height: 26px !important;
        margin: 0 !important;
    }

    .nav-menu:not(.open) .select-selected::after {
        display: none !important;
    }

    .nav-menu:not(.open) .button-text,
    .nav-menu:not(.open) .chats-history,
    .nav-menu:not(.open) .account_actions {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .nav-menu:not(.open) .button-text {
        display: none !important;
    }

    .nav-menu:not(.open) .custom-select.active .select-items {
        display: none !important;
    }

    .nav-menu:not(.open) .side_account {
        width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }

    .nav-menu:not(.open) .side_account img {
        width: 28px !important;
        height: 28px !important;
        margin: 0 !important;
    }

    .nav-menu:not(.open) .side_account p {
        display: none !important;
    }
}

@media (max-width: 999px) {
    .nav-menu {
        width: min(304px, 86vw) !important;
        min-width: min(304px, 86vw) !important;
        max-width: min(304px, 86vw) !important;
        padding-top: 8px !important;
        border-right-color: rgba(245, 238, 230, 0.1) !important;
        box-shadow: 16px 0 36px rgba(0, 0, 0, 0.28) !important;
    }

    .nav-menu .top-menu-actions {
        padding-top: 48px !important;
    }

    .chat-list .message.outgoing {
        max-width: 86% !important;
    }

    .chat-list .message.outgoing:has(.editable-textbox),
    .chat-list .message.outgoing:has([contenteditable="true"]) {
        max-width: 100% !important;
    }
}

body.light_mode .nav-menu {
    background: #f1ede8 !important;
    border-right-color: rgba(62, 54, 47, 0.1) !important;
}

body.light_mode .nav-menu .top-menu-actions button:hover,
body.light_mode .nav-menu .select-selected:hover,
body.light_mode .nav-menu .custom-select.active .select-selected,
body.light_mode .nav-menu .chats-history .history-user:hover {
    background: rgba(62, 54, 47, 0.055) !important;
    border-color: rgba(62, 54, 47, 0.08) !important;
}

body.light_mode .nav-menu .chats-history .history-user.selected {
    background: rgba(62, 54, 47, 0.075) !important;
    border-color: rgba(62, 54, 47, 0.07) !important;
}

body.light_mode .custom-select .select-items {
    background: rgba(62, 54, 47, 0.035) !important;
}

body.light_mode .custom-select.active .select-items {
    border-color: rgba(62, 54, 47, 0.09) !important;
}

body.light_mode .custom-select .select-item:hover,
body.light_mode .nav-menu .account_actions .profile-actions:hover {
    background: rgba(62, 54, 47, 0.065) !important;
}

body.light_mode .nav-menu .side_account {
    background: rgba(62, 54, 47, 0.035) !important;
    border-color: rgba(62, 54, 47, 0.09) !important;
}


/* Character-roster focus state: the picker owns the sidebar while it is open.
   This mirrors a native app panel and prevents history/action clutter from
   competing with the roster; the account card remains anchored at the bottom. */
@supports selector(.nav-menu:has(.custom-select.active)) {
    .nav-menu:has(.custom-select.active) .chats-history {
        flex: 1 1 auto !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        overflow: hidden !important;
        transition: opacity 0.15s ease, max-height 0.24s ease, margin 0.24s ease, padding 0.24s ease !important;
    }

    .nav-menu:has(.custom-select.active) .account_actions {
        height: 0 !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        border-top-color: transparent !important;
        transition: height 0.2s ease, opacity 0.14s ease, margin 0.2s ease, padding 0.2s ease !important;
    }

    .nav-menu:has(.custom-select.active) .custom-select .select-items {
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16) !important;
    }
}

/* Fallback keeps the roster legible on older embedded webviews. */
@supports not selector(.nav-menu:has(.custom-select.active)) {
    .custom-select.active .select-items {
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16) !important;
    }
}


/* Current character is identifiable at a glance without the legacy bright row. */
.custom-select .select-item.is-selected {
    background: rgba(245, 238, 230, 0.12) !important;
    color: var(--text-color) !important;
}

.custom-select .select-item.is-selected::after {
    content: 'check';
    margin-left: auto;
    font-family: 'Material Symbols Rounded';
    color: var(--subheading-color);
    font-size: 17px;
}

body.light_mode .custom-select .select-item.is-selected {
    background: rgba(62, 54, 47, 0.1) !important;
}


/* High-contrast neutral selection mirrors the supplied roster reference while
   keeping the rest of the character panel deliberately quiet. */
@media (prefers-color-scheme: dark) {
    body:not(.light_mode) .custom-select .select-item.is-selected {
        background: #efede9 !important;
        color: #242220 !important;
    }

    body:not(.light_mode) .custom-select .select-item.is-selected span,
    body:not(.light_mode) .custom-select .select-item.is-selected::after {
        color: #242220 !important;
    }
}

.nav-menu .side_account {
    background: #272522 !important;
    border-color: rgba(245, 238, 230, 0.06) !important;
    border-radius: 13px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14) !important;
}

.nav-menu .side_account p {
    color: var(--text-color) !important;
    font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR FOOTER REPAIR
   Restore the intended app hierarchy: a sparse 56px rail, history when open,
   and a single profile footer that reveals its utility menu on demand.
   ═══════════════════════════════════════════════════════════════════════ */
.nav-menu .side_account {
    position: relative !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: auto 0 0 !important;
    padding: 7px 9px !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease !important;
}

.nav-menu .side_account:hover {
    background: #302d29 !important;
    border-color: rgba(245, 238, 230, 0.11) !important;
}

.nav-menu .side_account:active {
    transform: scale(0.985) !important;
}

/* Profile utility actions are a contained menu, not permanent sidebar tiles. */
.nav-menu .account_actions {
    position: absolute !important;
    z-index: 12 !important;
    bottom: 64px !important;
    left: 8px !important;
    right: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    height: auto !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 5px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: #2a2825 !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32) !important;
    transform: translateY(8px) scale(0.98) !important;
    transform-origin: bottom center !important;
    transition: max-height 0.22s cubic-bezier(0.22, 0.8, 0.2, 1), padding 0.22s ease, opacity 0.16s ease, transform 0.2s cubic-bezier(0.22, 0.8, 0.2, 1), border-color 0.16s ease !important;
}

.nav-menu .account_actions.show {
    bottom: 64px !important;
    max-height: 380px !important;
    /* 8 items × 37px + 10px padding = ~306px; give headroom */
    padding: 5px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    border-color: rgba(245, 238, 230, 0.1) !important;
    transform: translateY(0) scale(1) !important;
}

.nav-menu .account_actions.fade-out {
    bottom: 64px !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0 !important;
    transform: translateY(8px) scale(0.98) !important;
}

.nav-menu .account_actions .profile-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    height: 37px !important;
    min-height: 37px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--subheading-color) !important;
    font-size: 12.5px !important;
    font-weight: 520 !important;
}

.nav-menu .account_actions .profile-actions>span:not(.icon):not(.notice-menu-badge) {
    display: inline !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-menu .account_actions .profile-actions .icon {
    display: grid !important;
    place-items: center !important;
    width: 19px !important;
    height: 19px !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 17px !important;
}

.nav-menu .account_actions .profile-actions:hover {
    background: rgba(245, 238, 230, 0.075) !important;
    color: var(--text-color) !important;
}

/* A true collapsed rail: only the two primary app controls and profile remain. */
@media (min-width: 1000px) {
    .nav-menu:not(.open) {
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        padding: 10px 6px 8px !important;
    }

    .nav-menu:not(.open) .top-menu-actions {
        gap: 7px !important;
        padding-top: 48px !important;
    }

    .nav-menu:not(.open) .top-menu-actions button,
    .nav-menu:not(.open) .select-selected {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border-radius: 10px !important;
    }

    .nav-menu:not(.open) .top-menu-actions button .icon {
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        background: rgba(245, 238, 230, 0.1) !important;
    }

    .nav-menu:not(.open) .select-selected img {
        width: 25px !important;
        height: 25px !important;
        margin: 0 !important;
    }

    .nav-menu:not(.open) .select-selected::after {
        display: none !important;
    }

    .nav-menu:not(.open) .chats-history,
    .nav-menu:not(.open) .account_actions {
        display: none !important;
    }

    .nav-menu:not(.open) .side_account {
        width: 42px !important;
        min-height: 42px !important;
        height: 42px !important;
        margin: auto auto 0 !important;
        padding: 0 !important;
        border-radius: 11px !important;
        justify-content: center !important;
    }

    .nav-menu:not(.open) .side_account img {
        width: 26px !important;
        height: 26px !important;
        margin: 0 !important;
    }

    .nav-menu:not(.open) .side_account p {
        display: none !important;
    }
}

body.light_mode .nav-menu .side_account:hover {
    background: #e7e1da !important;
    border-color: rgba(62, 54, 47, 0.12) !important;
}

body.light_mode .nav-menu .account_actions {
    background: #fbf9f6 !important;
    border-color: rgba(62, 54, 47, 0.12) !important;
    box-shadow: 0 14px 30px rgba(62, 54, 47, 0.13) !important;
}

body.light_mode .nav-menu .account_actions .profile-actions:hover {
    background: rgba(62, 54, 47, 0.06) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   UNIFIED SIDEBAR / CHAT LAYOUT
   One geometry and motion contract for the rail, panel, chat and composer.
   This intentionally supersedes the legacy 20%, 56/68/70px and inline models.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --sidebar-rail-width: 56px;
    --sidebar-panel-width: 292px;
    --sidebar-motion-duration: 320ms;
    --sidebar-motion-ease: cubic-bezier(0.22, 0.8, 0.2, 1);
}

.nav-menu,
.nav-menu *,
.nav-menu *::before,
.nav-menu *::after {
    box-sizing: border-box;
}

.nav-menu {
    width: var(--sidebar-panel-width) !important;
    min-width: var(--sidebar-panel-width) !important;
    max-width: var(--sidebar-panel-width) !important;
    will-change: width, transform;
    transition:
        width var(--sidebar-motion-duration) var(--sidebar-motion-ease),
        min-width var(--sidebar-motion-duration) var(--sidebar-motion-ease),
        max-width var(--sidebar-motion-duration) var(--sidebar-motion-ease),
        transform var(--sidebar-motion-duration) var(--sidebar-motion-ease) !important;
}

/* Message and its actions form one right-aligned vertical unit. */
.outgoingRadius {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: 100% !important;
    overflow: visible !important;
}

.chat-list .message.outgoing {
    flex: 0 1 auto !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: min(74%, 620px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.chat-list .message.outgoing .message-content,
.chat-list .message.outgoing .text {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.outgoingRadius .outgoing-actions {
    align-self: flex-end !important;
    width: auto !important;
    min-height: 36px;
    margin: 2px 0 0 auto !important;
    padding: 2px 0 0 !important;
}

/* Expand bubble to full width while editing */
.chat-list .message.outgoing:has(.editable-textbox),
.chat-list .message.outgoing:has([contenteditable="true"]) {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Account controls are constrained by the sidebar's inner content box. */
.nav-menu .side_account {
    max-width: 100% !important;
    overflow: hidden !important;
}

.nav-menu .account_actions {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100% - 16px) !important;
    overflow-x: hidden !important;
}

.nav-menu .account_actions .profile-actions {
    min-width: 0 !important;
    max-width: 100% !important;
}

@media (min-width: 1000px) {
    .nav-menu {
        transform: translate3d(0, 0, 0) !important;
    }

    .nav-menu:not(.open) {
        width: var(--sidebar-rail-width) !important;
        min-width: var(--sidebar-rail-width) !important;
        max-width: var(--sidebar-rail-width) !important;
        padding: 10px 6px 8px !important;
    }

    /* Every compact control occupies the same centered 44px track. */
    .nav-menu:not(.open) .top-menu-actions {
        width: 44px !important;
        margin: 0 auto !important;
        padding: 48px 0 10px !important;
        gap: 7px !important;
        align-items: center !important;
    }

    .nav-menu:not(.open) .top-menu-actions>div,
    .nav-menu:not(.open) .custom-select {
        width: 44px !important;
        margin: 0 !important;
    }

    .nav-menu:not(.open) .top-menu-actions button,
    .nav-menu:not(.open) .select-selected,
    .nav-menu:not(.open) .side_account {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }

    .nav-menu:not(.open) .select-selected img,
    .nav-menu:not(.open) .side_account img {
        margin: 0 !important;
    }

    .nav-menu:not(.open) .select-selected::after {
        display: none !important;
    }

    /* Reserve exactly the visible sidebar area. The chat list and composer
       remain centered inside the body that is left after that reservation. */
    .nav-menu~.chat-container,
    .nav-menu~.typing-area {
        margin-left: var(--sidebar-rail-width) !important;
        width: calc(100% - var(--sidebar-rail-width)) !important;
        transition:
            margin-left var(--sidebar-motion-duration) var(--sidebar-motion-ease),
            width var(--sidebar-motion-duration) var(--sidebar-motion-ease) !important;
        will-change: margin-left, width;
    }

    .nav-menu.open~.chat-container,
    .nav-menu.open~.typing-area {
        margin-left: var(--sidebar-panel-width) !important;
        width: calc(100% - var(--sidebar-panel-width)) !important;
    }

    .nav #start-live-voice {
        left: calc(var(--sidebar-rail-width) + 8px) !important;
        transition: left var(--sidebar-motion-duration) var(--sidebar-motion-ease) !important;
    }

    body:has(.nav-menu.open) .nav #start-live-voice {
        left: calc(var(--sidebar-panel-width) + 8px) !important;
    }
}

@media (max-width: 999px) {
    .nav-menu {
        width: min(304px, 86vw) !important;
        min-width: min(304px, 86vw) !important;
        max-width: min(304px, 86vw) !important;
        transform: translate3d(-101%, 0, 0) !important;
        transition: transform var(--sidebar-motion-duration) var(--sidebar-motion-ease) !important;
        will-change: transform;
    }

    .nav-menu.open {
        transform: translate3d(0, 0, 0) !important;
    }

    .nav-menu~.chat-container,
    .nav-menu~.typing-area,
    .nav-menu.open~.chat-container,
    .nav-menu.open~.typing-area {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .chat-list .message.outgoing {
        max-width: 86% !important;
    }

    .chat-list .message.outgoing:has(.editable-textbox),
    .chat-list .message.outgoing:has([contenteditable="true"]) {
        max-width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .nav-menu,
    .nav-menu~.chat-container,
    .nav-menu~.typing-area,
    .nav #start-live-voice {
        transition-duration: 1ms !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   MEMORY PANEL — structured, calm, editable
   This final scoped layer intentionally supersedes the old generic textarea
   rules in style.css/app-windows.css without affecting other modal inputs.
   ═══════════════════════════════════════════════════════════════════════ */
.data-window .content-viewer:has(.memory-con) {
    padding: 20px 22px 84px !important;
}

.memory-con {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
}

.memory-hero {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 18px;
    padding: 15px 16px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--secondary-color) 96%, var(--accent) 4%), var(--secondary-color));
}

.memory-hero-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
}

.memory-hero-icon .material-symbols-rounded {
    font-size: 21px;
}

.memory-hero h3 {
    margin: 0 0 3px;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.memory-hero p {
    margin: 0;
    color: var(--subheading-color);
    font-size: 12.5px;
    line-height: 1.45;
}

.memory-con .memory-toolbar {
    margin: 0 0 12px !important;
    padding: 0 2px;
}

.memory-con .memory-count {
    color: var(--subheading-color) !important;
    font-size: 12.5px !important;
    font-weight: 550;
    opacity: 1 !important;
}

.memory-con .memory-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--text-color) !important;
    font-size: 12.5px !important;
    font-weight: 600;
    box-shadow: none !important;
    width: 140px !important;
}

.memory-con .memory-add .material-symbols-rounded {
    font-size: 17px;
    color: var(--accent);
}

.memory-con .memory-add:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color)) !important;
    background: var(--accent-soft) !important;
}

.memory-con .memory-list {
    gap: 9px !important;
    max-height: min(48vh, 440px) !important;
    padding: 1px 3px 3px !important;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.memory-con .memory-list::-webkit-scrollbar {
    width: 5px;
}

.memory-con .memory-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 999px;
}

.memory-con .memory-card {
    gap: 9px !important;
    padding: 12px 13px 11px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 13px !important;
    background: var(--secondary-color) !important;
    box-shadow: none !important;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.memory-con .memory-card:hover,
.memory-con .memory-card:focus-within {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--secondary-color) 95%, var(--accent) 5%) !important;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.11) !important;
}

.memory-con .memory-card:focus-within {
    transform: translateY(-1px);
}

.memory-con .memory-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 20px;
}

.memory-con .memory-category {
    display: inline-flex;
    align-items: center;
    min-height: 21px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--subheading-color);
    background: color-mix(in srgb, var(--darker-background) 68%, transparent);
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.memory-con .memory-category--identity {
    color: #9fbcdf;
}

.memory-con .memory-category--preferences {
    color: #c5aa82;
}

.memory-con .memory-category--relationships {
    color: #c59cb8;
}

.memory-con .memory-category--context {
    color: #9db89d;
}

.memory-con .memory-fact {
    width: 100% !important;
    min-height: 44px !important;
    max-height: 180px !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    resize: vertical !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--text-color) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
}

.memory-con .memory-fact:focus {
    padding: 8px 9px !important;
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--darker-background) 78%, transparent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

.memory-con .memory-card-meta {
    justify-content: flex-start !important;
    gap: 5px !important;
}

.memory-con .memory-date,
.memory-con .memory-date-icon {
    color: var(--subheading-color) !important;
    opacity: 0.78 !important;
}

.memory-con .memory-date {
    font-size: 11.5px !important;
}

.memory-con .memory-date-icon {
    font-size: 14px;
}

.memory-con .memory-delete {
    display: grid !important;
    place-items: center;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--subheading-color) !important;
    opacity: 0;
}

.memory-con .memory-card:hover .memory-delete,
.memory-con .memory-card:focus-within .memory-delete,
.memory-con .memory-delete:focus-visible {
    opacity: 1;
}

.memory-con .memory-delete .material-symbols-rounded {
    font-size: 17px;
}

.memory-con .memory-delete:hover {
    border-color: rgba(211, 105, 91, 0.28) !important;
    background: rgba(211, 105, 91, 0.12) !important;
    color: #df8274 !important;
}

.memory-con .memory-empty {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 26px 24px;
    border: 1px dashed var(--border-color);
    border-radius: 14px;
    color: var(--subheading-color);
    text-align: center;
}

.memory-con .memory-empty>.material-symbols-rounded {
    margin-bottom: 7px;
    color: var(--accent);
    font-size: 25px;
}

.memory-con .memory-empty h2 {
    margin: 0 0 5px !important;
    color: var(--text-color);
    font-size: 14px !important;
    font-weight: 600;
}

.memory-con .memory-empty p {
    max-width: 310px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
}

@media (hover: none),
(max-width: 820px) {
    .memory-con .memory-delete {
        opacity: 0.82;
    }

    .memory-con .memory-list {
        max-height: min(54vh, 520px) !important;
    }

    .memory-hero {
        padding: 13px 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   MATH SHIMMER — placeholder tiles while LaTeX equations stream in.
   Display equations show a block shimmer; inline show a compact bar.
   Disappears naturally when the equation completes (markdown re-renders
   without the shimmer once the closing delimiter arrives).
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes mathShimmer {
    0% {
        background-position: -200px 0;
    }

    100% {
        background-position: 200px 0;
    }
}

.math-shimmer {
    border-radius: 8px;
    overflow: hidden;
}

.math-shimmer--display {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 18px;
    margin: 8px 0;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    border-radius: 10px;
}

.math-shimmer--inline {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    padding: 2px 8px;
    margin: 0 2px;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.04));
    border-radius: 4px;
}

.math-shimmer-bar {
    height: 14px;
    width: 100%;
    max-width: 280px;
    border-radius: 4px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.10) 50%,
            rgba(255, 255, 255, 0.04) 100%);
    background-size: 400px 100%;
    animation: mathShimmer 1.4s ease-in-out infinite;
}

.math-shimmer--inline .math-shimmer-bar {
    height: 12px;
    width: 60px;
    max-width: 60px;
}

.math-shimmer-bar.short {
    max-width: 160px;
}

/* Light mode overrides */
body.light_mode .math-shimmer--display {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}

body.light_mode .math-shimmer-bar {
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.04) 0%,
            rgba(0, 0, 0, 0.09) 50%,
            rgba(0, 0, 0, 0.04) 100%);
    background-size: 400px 100%;
    animation: mathShimmer 1.4s ease-in-out infinite;
}

/* ── Live math pending spans ───────────────────────────────────────────────
   Wrapper spans that hold completed LaTeX while MathJax processes them.
   Display blocks stack vertically; inline stays in text flow.
   The fade-in fires once MathJax replaces the span's text with an SVG.     */

.math-live-pending {
    display: block;
    min-height: 1.4em;
}

.math-live-pending--inline {
    display: inline;
    min-height: unset;
}

/* Rendered equations fade in smoothly — the SVG appears inside the span */
.math-live-pending mjx-container {
    animation: mathFadeIn 0.18s ease-out;
}

@keyframes mathFadeIn {
    from {
        opacity: 0;
        transform: translateY(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Secure Pass visual refresh */
.secure-passmanage {
    padding: 4px 2px;
}

.secure-passmanage .management-of-spins>h2 {
    margin: 14px 0 8px;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--placeholder-color, rgba(255, 255, 255, 0.5));
    text-transform: uppercase;
    letter-spacing: .08em;
}

.secure-passmanage .manage-spins {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.secure-passmanage .spin-criters {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 54px;
    padding: 10px 16px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important;
    border-radius: var(--ui-radius, 12px);
    background: var(--secondary-color, rgba(255, 255, 255, 0.04));
    box-sizing: border-box;
}

.secure-passmanage .spin-criters h3 {
    margin: 0;
    font-size: 14px !important;
    font-weight: 500;
    color: var(--text-color, #ffffff);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODERN SEARCHABLE MODEL SELECTOR  (accent-matched, scales for many models)
   Overrides the compact pill dropdown with a proper panel: sticky search,
   Top Picks, plan badges and pin-to-top stars.
   ═══════════════════════════════════════════════════════════════════════ */

/* Legacy .input-actions .model-selector rules — superseded by #model-selector.model-selector block below.
   Kept as dead code to avoid regression if the higher-specificity rules are ever removed. */
/* .input-actions .model-selector — all rules removed, see MODEL BROWSER section */


/* ═══════════════════════════════════════════════════════════════════════
   COMPOSER POLISH — accent focus ring + tidy alignment
   ═══════════════════════════════════════════════════════════════════════ */
.typing-form .input-wrapper {
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    transition: border-color 0.18s var(--ui-ease), box-shadow 0.18s var(--ui-ease);
}

.typing-form .input-wrapper:focus-within {
    border-color: var(--accent-ring);
    box-shadow: 0 0 0 3px var(--accent-soft), var(--input-wrapper-shadow, 0 8px 24px rgba(0, 0, 0, 0.28));
}

/* Vertically centre the actions row contents on every viewport */
.input-actions {
    align-items: center;
}

.input-tools-left,
.input-actions-right {
    align-items: center;
}


/* ═══════════════════════════════════════════════════════════════════════
   CHARACTER MODE — messenger-style chat + subtle galactic backdrop
   Activated by  body.character-mode  (toggled in configureCharacter()).
   ═══════════════════════════════════════════════════════════════════════ */

/* Character mode = the standard chat, minus the model picker (the model is
   server-owned) and reasoning/function toggles. No page-level pseudo layers.
   Full styling lives in the corrected block at the end of this file. */
body.character-mode #model-selector,
body.character-mode #deep-think-toggler {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   CHARACTER PANELS — roomier desktop layout
   The shared mini-window is only 400×500; on desktop the character list,
   editor and creator deserve more space to breathe.
   ═══════════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 1000px) {

    #characters_lists,
    #character_edit,
    #character_add,
    #character_memory_window {
        width: 600px !important;
        height: 660px !important;
        max-height: 88vh !important;
        border-radius: 22px !important;
    }



    /* Character list rows: comfortable padding + hover lift */
    #characters_lists .mini-window-item {
        padding: 12px 14px;
        border-radius: 14px;
        transition: background-color 0.15s var(--ui-ease), transform 0.15s var(--ui-ease);
    }

    #characters_lists .mini-window-item:hover {
        background: var(--accent-soft);
        transform: translateX(2px);
    }

    #characters_lists .mini-window-item img {
        width: 46px;
        height: 46px;
    }
}

/* The editor/creator forms scroll when content (now incl. Model select) grows */
#character_edits_con,
#character_adds_con {
    max-height: calc(100% - 116px);
    overflow-y: auto;
}

#character_edits_con::-webkit-scrollbar,
#character_adds_con::-webkit-scrollbar {
    width: 6px;
}

#character_edits_con::-webkit-scrollbar-thumb,
#character_adds_con::-webkit-scrollbar-thumb {
    background: var(--accent-soft);
    border-radius: 6px;
}

/* Style the native model <select> to match the app inputs */
#character_edits_con select.suparva-input,
#character_adds_con select.suparva-input {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--secondary-color, #2a2a2a);
    color: var(--text-color);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    padding: 10px 12px;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
        linear-gradient(135deg, var(--accent) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

#character_edits_con select.suparva-input option,
#character_adds_con select.suparva-input option {
    background: var(--darker-background, #1e1e22);
    color: var(--text-color);
}


/* ── Model picker base rules removed — consolidated into the authoritative
   "MODEL BROWSER" block at the end of this file. ── */

/* ── Corrected character mode: compact chat layout, no page-level pseudo layers ── */
body.character-mode::before,
body.character-mode::after {
    content: none !important;
    display: none !important;
}

body.character-mode {
    background: var(--chat-area-background) !important;
}

body.character-mode .chat-container {
    background: radial-gradient(circle at 50% 20%, var(--accent-soft), transparent 42%), var(--chat-area-background) !important;
}

body.character-mode .typing-area {
    position: fixed !important;
    z-index: 100 !important;
    width: 80%;
    margin-left: 20%;
    padding: 8px 12px 10px !important;
    background: linear-gradient(180deg, transparent, var(--chat-area-background) 30%) !important;
}

/* ── Character landing (new chat): keep the composer DOCKED AT THE BOTTOM ──
   Delphos centres the greeting + composer on its landing screen, but a
   character chat reads like a messenger conversation, so the composer belongs
   at the bottom on desktop just like an in-progress chat. Cancel the
   new-chat lift and let the character profile centre in the space above it. */
body.character-mode.new-chat-view .typing-area {
    transform: none !important;
}

body.character-mode.new-chat-view .chat-list {
    height: auto !important;
    min-height: calc(100dvh - 172px) !important;
    margin-top: 0 !important;
    padding: 0 0 150px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center !important;
}

/* Character composer "+" menu: only Files + Web search are relevant. Skills and
   Connectors belong to the full Delphos assistant, not a roleplay character, so
   hide them (and the now-redundant separator before them) to avoid the
   conflicting/overloaded menu. */
body.character-mode #menu-skills-btn,
body.character-mode #menu-connectors-btn,
body.character-mode .attach-file-selections .pm-sep-tools {
    display: none !important;
}

body.character-mode .typing-form {
    max-width: 760px !important;
}

body.character-mode .typing-form .input-wrapper {
    min-height: 0 !important;
    border-radius: 20px !important;
    background: var(--secondary-color) !important;
}

body.character-mode .typing-form .typing-input {
    min-height: 46px !important;
    padding: 13px 14px 2px !important;
}

body.character-mode .input-actions {
    min-height: 42px !important;
    padding: 2px 6px 6px !important;
}

body.character-mode #take-photo-button {
    display: flex !important;
}

body.character-mode .header {
    position: relative !important;
    z-index: 1 !important;
}

body.character-mode .header img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover;
}

@media(max-width:999px) {
    body.character-mode .typing-area {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 6px 8px 8px !important;
    }

    body.character-mode .typing-form {
        max-width: 100% !important;
    }
}

/* Character memory uses the same cards as the main Delphos memory editor. */
.character-memory-con {
    width: 80%;
    margin: 14px auto 4px;
    text-align: left;
}

.character-memory-con .memory-list {
    max-height: 300px;
    overflow: auto;
}

#character_memory_con .character-memory-con {
    width: 92%;
    margin: 10px auto;
}

#character_memory_con .character-memory-con .memory-list {
    max-height: 460px;
    overflow-y: auto;
}

/* Secure Pass visual refresh */
.secure-passmanage {
    padding: 4px;
}

.secure-passmanage .management-of-spins>h2 {
    margin: 10px 0;
    font-size: 14px !important;
    color: var(--placeholder-color);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.secure-passmanage .manage-spins {
    display: grid;
    gap: 10px;
}

.secure-passmanage .spin-criters {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 10px 14px;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px;
    background: var(--secondary-color);
}

.secure-passmanage .spin-criters h3 {
    margin: 0;
    font-size: 15px;
}

.secure-passmanage .reset-pin {
    min-width: 84px;
    height: 36px;
    border: 1px solid rgba(239, 68, 68, .35);
    border-radius: 10px;
    background: rgba(239, 68, 68, .1);
    color: #ef4444;
}

.secure-pass .pin-inputs {
    gap: 10px;
}

.secure-pass .pin-input {
    width: 54px;
    height: 60px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--secondary-color);
    font-size: 24px;
}

.secure-pass .pin-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}


/* ═══════════════════════════════════════════════════════════════════════
   MODEL BROWSER — final standalone selector, not an embedded dropdown.
   This block intentionally wins over the legacy selector rules above.
   ═══════════════════════════════════════════════════════════════════════ */
#model-selector.model-selector {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    top: auto !important;
    left: auto !important;
    vertical-align: middle;
    margin: 0 !important;
}

#model-selector.model-selector .model-picker-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    min-width: 0;
    max-width: 180px;
    padding: 0 10px !important;
    gap: 6px !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .12)) !important;
    border-radius: 20px !important;
    background: var(--secondary-color, rgba(255, 255, 255, .05)) !important;
    color: var(--text-color) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

#model-selector.model-selector .model-picker-trigger .model-trigger-icon {
    font-size: 16px !important;
    opacity: .7;
}

#model-selector.model-selector .model-picker-trigger .model-caret {
    font-size: 16px !important;
    opacity: .5;
    transition: transform .2s ease;
}

#model-selector.model-selector .model-picker-trigger:hover,
#model-selector.model-selector.model-picker-open .model-picker-trigger {
    border-color: var(--accent-ring, rgba(99, 102, 241, .5)) !important;
    background: var(--secondary-hover-color, rgba(255, 255, 255, .08)) !important;
    box-shadow: 0 0 0 2px var(--accent-soft, rgba(99, 102, 241, .1)) !important;
}

#model-selector.model-selector .model-picker-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(99, 102, 241, .18)) !important;
}

#model-selector.model-selector .model-name-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12.5px;
}

#model-selector.model-selector.model-picker-open .model-caret {
    transform: rotate(180deg);
}

#model-selector.model-selector .model-picker-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100040 !important;
    display: none;
    background: rgba(0, 0, 0, .55) !important;
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

#model-selector.model-selector.model-picker-open .model-picker-backdrop {
    display: block !important;
}

#model-selector.model-selector .model-picker-window {
    position: fixed !important;
    z-index: 100041 !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    display: none !important;
    width: min(520px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    max-width: 520px !important;
    max-height: min(640px, calc(100vh - 48px)) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .1)) !important;
    border-radius: 20px !important;
    background: var(--darker-background, #161618) !important;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .6), 0 8px 32px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .04) inset !important;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -48%) scale(.97) !important;
}

#model-selector.model-selector.model-picker-open .model-picker-window {
    display: flex !important;
    flex-direction: column !important;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1) !important;
    animation: model-browser-in .22s cubic-bezier(.16, .85, .35, 1) both;
}

@keyframes model-browser-in {
    from {
        opacity: 0;
        transform: translate(-50%, -46%) scale(.96);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

#model-selector.model-selector .model-picker-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 20px 14px !important;
    border: 0 !important;
    background: transparent;
}

#model-selector.model-selector .model-picker-title-block {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
}

#model-selector.model-selector .model-picker-title-block>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

#model-selector.model-selector .model-picker-heading strong {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em;
    color: var(--text-color);
}

#model-selector.model-selector .model-picker-heading span:not(.material-symbols-rounded) {
    color: var(--placeholder-color, #888) !important;
    font-size: 11.5px !important;
}

#model-selector.model-selector .model-picker-brand-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--accent);
    background: var(--accent-soft, rgba(99, 102, 241, .13));
    font-size: 18px;
}

#model-selector.model-selector .model-picker-close {
    display: grid !important;
    place-items: center;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .1)) !important;
    border-radius: 9px !important;
    color: var(--placeholder-color, #888) !important;
    background: transparent !important;
    cursor: pointer;
    font-size: 18px !important;
    transition: background .14s ease, color .14s ease;
}

#model-selector.model-selector .model-picker-close:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, .08)) !important;
    color: var(--text-color) !important;
}

#model-selector.model-selector .model-options-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1;
    min-height: 0;
    overflow: hidden !important;
}

#model-selector.model-selector .model-search-wrap {
    position: relative;
    display: flex !important;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 16px 0;
    height: 42px;
    padding: 0 12px;
    gap: 0;
    border: 1.5px solid var(--border-color, rgba(255, 255, 255, .12));
    border-radius: 11px;
    background: var(--secondary-color, rgba(255, 255, 255, .04));
    transition: border-color .16s ease, box-shadow .16s ease;
}

#model-selector.model-selector .model-search-wrap:focus-within {
    border-color: var(--accent-ring, rgba(99, 102, 241, .5));
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(99, 102, 241, .12));
}

#model-selector.model-selector .model-search-icon {
    order: 2;
    color: var(--placeholder-color, #777);
    font-size: 18px;
    margin-left: 8px;
    flex-shrink: 0;
}

#model-selector.model-selector .model-search-input {
    order: 1;
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--text-color) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

#model-selector.model-selector .model-search-input::placeholder {
    color: var(--placeholder-color, #777);
    font-weight: 400;
}

#model-selector.model-selector .model-search-shortcut {
    display: none;
}

/* ── Filter Chips ── */
#model-selector.model-selector .model-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 16px 6px;
    flex-shrink: 0;
}

#model-selector.model-selector .model-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border-radius: 8px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .1));
    background: transparent;
    color: var(--placeholder-color, #999);
    font-size: 11.5px;
    font-weight: 550;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: all .14s ease;
}

#model-selector.model-selector .model-filter-chip:hover {
    border-color: var(--accent-ring, rgba(99, 102, 241, .4));
    color: var(--text-color);
    background: var(--secondary-hover-color, rgba(255, 255, 255, .05));
}

#model-selector.model-selector .model-filter-chip.active {
    border-color: var(--accent, #6366f1);
    background: var(--accent-soft, rgba(99, 102, 241, .15));
    color: var(--accent, #6366f1);
}

#model-selector.model-selector .model-filter-chip .material-symbols-rounded {
    font-size: 14px;
}

#model-selector.model-selector .model-options-scroll {
    flex: 1;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 6px 10px 14px !important;
    scrollbar-color: var(--border-color, rgba(255, 255, 255, .15)) transparent;
}

#model-selector.model-selector .model-options-scroll::-webkit-scrollbar {
    width: 5px;
}

#model-selector.model-selector .model-options-scroll::-webkit-scrollbar-thumb {
    border: 1px solid transparent;
    border-radius: 20px;
    background: var(--border-color, rgba(255, 255, 255, .16));
    background-clip: padding-box;
}

#model-selector.model-selector .model-options-scroll::-webkit-scrollbar-track {
    background: transparent;
}

#model-selector.model-selector .suparva-option-group-label {
    display: flex !important;
    flex-direction: column;
    gap: 1px;
    padding: 14px 8px 6px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text-color) !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    opacity: .7;
}

#model-selector.model-selector .suparva-option-group-label small {
    color: var(--placeholder-color, #777);
    font-size: 10.5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* Reset base .suparva-option styles that conflict with our card layout */
#model-selector.model-selector .suparva-option {
    border-left: 0 !important;
    padding: 0 !important;
}

#model-selector.model-selector .suparva-option.model-option-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 56px;
    margin: 2px 0 !important;
    padding: 10px 12px !important;
    gap: 11px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--text-color) !important;
    cursor: pointer;
    text-align: left !important;
    transition: background .12s ease, border-color .12s ease, transform .12s ease !important;
}

#model-selector.model-selector .suparva-option.model-option-card:hover,
#model-selector.model-selector .suparva-option.model-option-card:focus-visible {
    outline: 0;
    border-color: var(--border-color, rgba(255, 255, 255, .1)) !important;
    background: var(--secondary-hover-color, rgba(255, 255, 255, .06)) !important;
    transform: translateX(2px);
}

#model-selector.model-selector .suparva-option.model-option-card:active {
    transform: scale(.99);
}

#model-selector.model-selector .suparva-option.model-option-card:focus-visible {
    box-shadow: 0 0 0 2px var(--accent-soft, rgba(99, 102, 241, .2));
}

#model-selector.model-selector .suparva-option.model-option-card.selected-model {
    border-color: var(--accent-ring, rgba(99, 102, 241, .45)) !important;
    background: var(--accent-soft, rgba(99, 102, 241, .1)) !important;
}

#model-selector.model-selector .model-option-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--secondary-color, rgba(255, 255, 255, .06));
    color: var(--accent);
    font-size: 15px;
    font-weight: 700;
    transition: background .14s ease;
}

#model-selector.model-selector .suparva-option.model-option-card:hover .model-option-avatar {
    background: var(--accent-soft, rgba(99, 102, 241, .12));
}

#model-selector.model-selector .model-option-copy {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left !important;
}

#model-selector.model-selector .model-option-name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-color) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2;
}

#model-selector.model-selector .model-option-meta {
    display: flex !important;
    align-items: center;
    gap: 5px;
    color: var(--placeholder-color, #888) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
}

#model-selector.model-selector .model-option-meta span[aria-hidden] {
    opacity: .4;
    font-size: 8px;
}

#model-selector.model-selector .model-option-right {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 5px;
}

#model-selector.model-selector .model-plan-badge,
#model-selector.model-selector .model-reason-badge {
    display: inline-flex !important;
    align-items: center;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: .03em;
    text-transform: uppercase;
}

#model-selector.model-selector .model-plan-badge.pro,
#model-selector.model-selector .model-reason-badge {
    background: var(--accent-soft, rgba(99, 102, 241, .14));
    color: var(--accent);
}

#model-selector.model-selector .model-plan-badge.prm {
    background: rgba(245, 158, 11, .14);
    color: #f5b942;
}

#model-selector.model-selector .model-plan-badge.free-badge {
    background: rgba(34, 197, 94, .12);
    color: #4ade80;
}

#model-selector.model-selector .model-pin {
    display: grid !important;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--placeholder-color, #777);
    font-size: 16px !important;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease, background .12s ease;
}

#model-selector.model-selector .suparva-option:hover .model-pin,
#model-selector.model-selector .model-pin.pinned {
    opacity: .85;
}

#model-selector.model-selector .model-pin:hover {
    color: var(--accent);
    background: var(--accent-soft, rgba(99, 102, 241, .12));
    opacity: 1 !important;
}

#model-selector.model-selector .model-pin.pinned {
    color: var(--accent);
}

#model-selector.model-selector .model-selected-check {
    display: none !important;
    color: var(--accent);
    font-size: 18px;
}

#model-selector.model-selector .selected-model .model-selected-check {
    display: inline-flex !important;
}

#model-selector.model-selector .selected-model .model-pin {
    display: none !important;
}

#model-selector.model-selector .model-no-results {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px 40px;
    color: var(--placeholder-color, #888);
    text-align: center;
}

#model-selector.model-selector .model-no-results[style*="block"] {
    display: flex !important;
}

#model-selector.model-selector .model-no-results>span {
    font-size: 32px;
    opacity: .5;
}

#model-selector.model-selector .model-no-results strong {
    color: var(--text-color);
    font-size: 13.5px;
    font-weight: 600;
}

#model-selector.model-selector .model-no-results small {
    font-size: 11.5px;
    opacity: .7;
}

@media screen and (max-width: 620px) {
    #model-selector.model-selector .model-picker-window {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: none !important;
        max-height: min(80vh, 620px) !important;
        border-radius: 20px 20px 0 0 !important;
        transform: translateY(100%) !important;
    }

    #model-selector.model-selector.model-picker-open .model-picker-window {
        transform: translateY(0) !important;
        animation: model-browser-sheet-in .22s cubic-bezier(.16, .85, .35, 1) both;
    }

    @keyframes model-browser-sheet-in {
        from {
            opacity: 0;
            transform: translateY(12%);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #model-selector.model-selector .model-picker-heading {
        padding: 16px 14px 12px !important;
    }

    #model-selector.model-selector .model-search-wrap {
        margin: 0 12px;
    }

    #model-selector.model-selector .model-filter-bar {
        padding: 8px 12px 4px;
    }

    #model-selector.model-selector .model-options-scroll {
        padding: 0 8px 14px !important;
    }

    #model-selector.model-selector .model-pin {
        opacity: .7;
    }

    #model-selector.model-selector .model-filter-chip {
        padding: 4px 9px;
        font-size: 11px;
    }
}

/* ── Extra polish: subtle dividers and animation refinements ── */
#model-selector.model-selector .model-options-content::before {
    content: '';
    display: block;
    height: 1px;
    flex-shrink: 0;
    background: linear-gradient(90deg, transparent, var(--border-color, rgba(255, 255, 255, .08)) 20%, var(--border-color, rgba(255, 255, 255, .08)) 80%, transparent);
}

#model-selector.model-selector .model-filter-bar+.model-options-scroll::before {
    content: '';
    display: block;
    height: 1px;
    margin: 0 8px 6px;
    background: linear-gradient(90deg, transparent, var(--border-color, rgba(255, 255, 255, .06)) 30%, var(--border-color, rgba(255, 255, 255, .06)) 70%, transparent);
}

/* Smooth hide/show for filtered items */
#model-selector.model-selector .suparva-option[hidden] {
    display: none !important;
}

/* Selected model gets a subtle left accent bar */
#model-selector.model-selector .suparva-option.model-option-card.selected-model::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    border-radius: 2px;
    background: var(--accent, #6366f1);
}

#model-selector.model-selector .suparva-option.model-option-card {
    position: relative;
}

/* Model avatar color variations based on capability */
#model-selector.model-selector .suparva-option[data-thinking="1"] .model-option-avatar {
    color: #a78bfa;
}

#model-selector.model-selector .suparva-option[data-vision="1"]:not([data-thinking="1"]) .model-option-avatar {
    color: #34d399;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODEL CAPABILITY CHIPS + REASONING-LEVEL CONTROL
   Added for capability-aware model cards and per-model thinking levels.
   ═══════════════════════════════════════════════════════════════════════ */

/* Capability chip row inside each model card (vision / files / reasoning) */
#model-selector.model-selector .model-cap-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 1px;
}

#model-selector.model-selector .model-cap-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px 2px 5px;
    border-radius: 999px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .12));
    background: color-mix(in srgb, var(--secondary-color, #2a2a30) 70%, transparent);
    color: var(--placeholder-color, #b5b5bd);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

#model-selector.model-selector .model-cap-chip .material-symbols-rounded {
    font-size: 13px;
    line-height: 1;
}

#model-selector.model-selector .model-cap-chip[data-cap="reasoning"] {
    border-color: color-mix(in srgb, var(--accent, #6366f1) 45%, transparent);
    background: var(--accent-soft, rgba(99, 102, 241, .14));
    color: var(--accent, #8b8df6);
}

#model-selector.model-selector .model-cap-chip[data-cap="vision"] {
    border-color: rgba(16, 185, 129, .4);
    background: rgba(16, 185, 129, .12);
    color: #34d399;
}

#model-selector.model-selector .model-cap-chip[data-cap="files"] {
    border-color: rgba(245, 158, 11, .38);
    background: rgba(245, 158, 11, .12);
    color: #f5b942;
}

/* When discovery could not confirm a model, dim it slightly */
#model-selector.model-selector .suparva-option.model-option-card.model-unavailable {
    opacity: .5;
    filter: grayscale(.35);
}

#model-selector.model-selector .suparva-option.model-option-card.model-unavailable::after {
    content: "Unavailable";
    margin-left: auto;
    font-size: 10px;
    color: #ef6a6a;
    letter-spacing: .03em;
}

/* ── Reasoning-level control (segmented popover anchored to #deep-think-toggler) ── */
#deep-think-toggler {
    position: relative;
}

#deep-think-toggler.reasoning-disabled {
    opacity: .4 !important;
    pointer-events: none;
    filter: grayscale(1);
}

#deep-think-toggler.reasoning-active {
    background-color: var(--accent-soft, rgba(99, 102, 241, .18)) !important;
    color: var(--accent, #6366f1) !important;
}

.reason-level-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px) scale(.97);
    z-index: 100050;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 172px;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, .14));
    background: var(--darker-background, #1b1b20);
    box-shadow: 0 18px 54px rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.reason-level-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

.reason-level-menu .reason-level-title {
    padding: 4px 8px 6px;
    font-size: 11px;
    font-weight: 650;
    color: var(--placeholder-color, #9a9aa2);
    letter-spacing: .02em;
}

.reason-level-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-color);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease;
}

.reason-level-opt:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, .08));
}

.reason-level-opt .material-symbols-rounded {
    font-size: 18px;
    color: var(--placeholder-color, #9a9aa2);
}

.reason-level-opt.active {
    background: var(--accent-soft, rgba(99, 102, 241, .16));
    color: var(--accent, #8b8df6);
}

.reason-level-opt.active .material-symbols-rounded {
    color: var(--accent, #6366f1);
}

.reason-level-opt .reason-level-desc {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--placeholder-color, #8a8a92);
    margin-top: 1px;
}

.reason-level-opt .reason-level-label {
    display: flex;
    flex-direction: column;
}

/* Disabled tool buttons (file/photo) when the active model lacks the capability */
.tool-btn.cap-disabled {
    opacity: .38 !important;
    pointer-events: none;
    filter: grayscale(1);
}


/* ═══════════════════════════════════════════════════════════════════════
   MODEL PICKER v2 — BODY-PORTALLED, COMPACT, CLAUDE/CHATGPT-STYLE DIALOG
   The picker is moved to <body> by chat-engine.js. These selectors are
   intentionally ID-scoped so no composer/dropdown CSS can leak into it.
   ═══════════════════════════════════════════════════════════════════════ */
body.model-picker-visible {
    overflow: hidden !important;
    overscroll-behavior: none;
}

#model-picker-backdrop,
#model-picker-dialog,
#model-picker-dialog *,
#model-picker-dialog *::before,
#model-picker-dialog *::after {
    box-sizing: border-box;
}

/* Full, viewport-level dimmer — never constrained by the chat composer. */
#model-picker-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(0, 0, 0, .55) !important;
    backdrop-filter: blur(12px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
}

body.model-picker-visible #model-picker-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 180ms ease;
}

/* Centered desktop dialog — clean, modern, focused. */
#model-picker-dialog {
    position: fixed !important;
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 2147483001 !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(500px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    max-width: 500px !important;
    max-height: min(620px, calc(100dvh - 48px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 18px !important;
    background: var(--darker-background, #161618) !important;
    color: var(--text-color, #f5f5f5) !important;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .55), 0 8px 32px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .03) inset !important;
    isolation: isolate;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -47%) scale(.97) !important;
    transition: opacity 180ms ease, transform 200ms cubic-bezier(.16, .85, .35, 1), visibility 0s linear 200ms;
}

body.model-picker-visible #model-picker-dialog {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1) !important;
    transition: opacity 180ms ease, transform 200ms cubic-bezier(.16, .85, .35, 1);
}

/* Header */
#model-picker-dialog .model-picker-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 0 0 auto;
    min-height: 60px;
    margin: 0 !important;
    padding: 16px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
    background: transparent !important;
}

#model-picker-dialog .model-picker-title-block {
    display: flex !important;
    align-items: center !important;
    min-width: 0;
    gap: 10px !important;
}

#model-picker-dialog .model-picker-brand-icon {
    display: grid !important;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 9px;
    background: var(--accent-soft, rgba(99, 102, 241, .1));
    color: var(--accent, #8b8df6);
    font-size: 16px !important;
}

#model-picker-dialog .model-picker-title-block>div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0;
    gap: 2px;
    text-align: left !important;
}

#model-picker-dialog .model-picker-heading strong {
    color: var(--text-color, #f5f5f5) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    letter-spacing: -.015em;
    line-height: 1.2;
}

#model-picker-dialog .model-picker-heading .model-picker-title-block>div>span {
    color: var(--placeholder-color, #888) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    line-height: 1.3;
}

#model-picker-dialog .model-picker-close {
    display: grid !important;
    place-items: center;
    flex: 0 0 30px;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--placeholder-color, #888) !important;
    font-size: 17px !important;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

#model-picker-dialog .model-picker-close:hover,
#model-picker-dialog .model-picker-close:focus-visible {
    outline: 0;
    background: rgba(255, 255, 255, .08) !important;
    color: var(--text-color, #fff) !important;
}

/* Search and scrolling content */
#model-picker-dialog .model-options-content {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column !important;
    min-height: 0;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
}

#model-picker-dialog .model-search-wrap {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto;
    height: 40px;
    margin: 12px 16px 0 !important;
    padding: 0 12px !important;
    gap: 0;
    border: 1.5px solid rgba(255, 255, 255, .1) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .035) !important;
    transition: border-color .16s ease, box-shadow .16s ease;
}

#model-picker-dialog .model-search-wrap:focus-within {
    border-color: var(--accent-ring, rgba(99, 102, 241, .5)) !important;
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(99, 102, 241, .12)) !important;
}

#model-picker-dialog .model-search-icon {
    order: 2;
    flex: 0 0 auto;
    color: var(--placeholder-color, #777) !important;
    font-size: 18px !important;
    margin-left: 8px;
}

#model-picker-dialog .model-search-input {
    order: 1;
    display: block !important;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--text-color, #f5f5f5) !important;
    font: inherit !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

#model-picker-dialog .model-search-input::placeholder {
    color: var(--placeholder-color, #777);
}

#model-picker-dialog .model-search-shortcut {
    display: none !important;
}

/* Filter chips bar */
#model-picker-dialog .model-filter-bar {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex: 0 0 auto;
    padding: 10px 16px 6px;
}

#model-picker-dialog .model-filter-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    background: transparent;
    color: var(--placeholder-color, #999);
    font-size: 11.5px;
    font-weight: 550;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: all .14s ease;
}

#model-picker-dialog .model-filter-chip:hover {
    border-color: var(--accent-ring, rgba(99, 102, 241, .35));
    color: var(--text-color, #f5f5f5);
    background: rgba(255, 255, 255, .04);
}

#model-picker-dialog .model-filter-chip.active {
    border-color: var(--accent, #6366f1);
    background: var(--accent-soft, rgba(99, 102, 241, .13));
    color: var(--accent, #6366f1);
}

#model-picker-dialog .model-filter-chip .material-symbols-rounded {
    font-size: 14px;
}

#model-picker-dialog .model-options-scroll {
    display: block !important;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px 10px 12px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .14) transparent;
}

#model-picker-dialog .model-options-scroll::-webkit-scrollbar {
    width: 5px;
}

#model-picker-dialog .model-options-scroll::-webkit-scrollbar-thumb {
    border: 1px solid transparent;
    border-radius: 99px;
    background: rgba(255, 255, 255, .15);
    background-clip: padding-box;
}

#model-picker-dialog .model-options-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* Section labels */
#model-picker-dialog .suparva-option-group-label {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px;
    margin: 0 !important;
    padding: 12px 7px 5px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text-color, #f5f5f5) !important;
    text-align: left !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
    opacity: .65;
}

#model-picker-dialog .suparva-option-group-label small {
    color: var(--placeholder-color, #888) !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Model rows */
#model-picker-dialog .suparva-option.model-option-card {
    position: relative;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 56px;
    margin: 2px 0 !important;
    padding: 9px 10px !important;
    gap: 10px !important;
    border: 1px solid transparent !important;
    border-left: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--text-color, #f5f5f5) !important;
    text-align: left !important;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

#model-picker-dialog .suparva-option.model-option-card:hover,
#model-picker-dialog .suparva-option.model-option-card:focus-visible {
    outline: 0;
    border-color: rgba(255, 255, 255, .08) !important;
    background: rgba(255, 255, 255, .05) !important;
    transform: translateX(2px);
}

#model-picker-dialog .suparva-option.model-option-card:active {
    transform: scale(.99);
}

#model-picker-dialog .suparva-option.model-option-card:focus-visible {
    box-shadow: 0 0 0 2px var(--accent-soft, rgba(99, 102, 241, .2)) !important;
}

#model-picker-dialog .suparva-option.model-option-card.selected-model {
    border-color: var(--accent-ring, rgba(99, 102, 241, .45)) !important;
    background: var(--accent-soft, rgba(99, 102, 241, .1)) !important;
}

/* Selected model accent bar */
#model-picker-dialog .suparva-option.model-option-card.selected-model::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 2px;
    background: var(--accent, #6366f1);
}

#model-picker-dialog .model-option-avatar {
    display: grid !important;
    place-items: center !important;
    grid-column: 1;
    grid-row: 1;
    width: 34px;
    height: 34px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 9px;
    background: rgba(255, 255, 255, .04);
    color: var(--accent, #9294f7);
    font-size: 15px !important;
    line-height: 1 !important;
    transition: background .12s ease, border-color .12s ease;
}

#model-picker-dialog .suparva-option.model-option-card:hover .model-option-avatar {
    background: var(--accent-soft, rgba(99, 102, 241, .1));
    border-color: var(--accent-ring, rgba(99, 102, 241, .2));
}

#model-picker-dialog .selected-model .model-option-avatar {
    border-color: var(--accent-ring, rgba(99, 102, 241, .4));
    background: var(--accent-soft, rgba(99, 102, 241, .16));
    color: var(--accent, #9294f7);
}

/* Avatar color variations by capability */
#model-picker-dialog .suparva-option[data-thinking="1"] .model-option-avatar {
    color: #a78bfa;
}

#model-picker-dialog .suparva-option[data-vision="1"]:not([data-thinking="1"]) .model-option-avatar {
    color: #34d399;
}

#model-picker-dialog .model-option-copy {
    display: grid !important;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    gap: 3px;
    margin: 0 !important;
    text-align: left !important;
}

#model-picker-dialog .model-option-name {
    display: block !important;
    overflow: hidden;
    color: var(--text-color, #f5f5f5) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#model-picker-dialog .model-option-meta {
    display: flex !important;
    align-items: center !important;
    gap: 4px;
    overflow: hidden;
    color: var(--placeholder-color, #888) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    white-space: nowrap;
}

#model-picker-dialog .model-option-meta span[aria-hidden] {
    opacity: .4;
}

#model-picker-dialog .model-option-right {
    display: flex !important;
    grid-column: 3;
    grid-row: 1;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px;
    min-width: 20px;
}

#model-picker-dialog .model-plan-badge {
    display: inline-flex !important;
    align-items: center;
    min-height: 18px;
    padding: 0 6px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
    color: var(--placeholder-color, #b4b4bc);
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
}

#model-picker-dialog .model-plan-badge.pro {
    border-color: var(--accent-ring, rgba(99, 102, 241, .3));
    color: var(--accent, #9294f7);
    background: var(--accent-soft, rgba(99, 102, 241, .1));
}

#model-picker-dialog .model-plan-badge.prm {
    border-color: rgba(245, 158, 11, .3);
    color: #eab654;
    background: rgba(245, 158, 11, .1);
}

#model-picker-dialog .model-plan-badge.free-badge {
    border-color: rgba(34, 197, 94, .25);
    color: #4ade80;
    background: rgba(34, 197, 94, .08);
}

#model-picker-dialog .model-pin {
    display: grid !important;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px;
    background: transparent;
    color: var(--placeholder-color, #777);
    font-size: 16px !important;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease, background .12s ease;
}

#model-picker-dialog .suparva-option:hover .model-pin,
#model-picker-dialog .model-pin.pinned {
    opacity: .85;
}

#model-picker-dialog .model-pin:hover {
    background: rgba(255, 255, 255, .07);
    color: var(--accent, #9294f7);
    opacity: 1 !important;
}

#model-picker-dialog .model-pin.pinned {
    color: var(--accent, #9294f7);
}

#model-picker-dialog .model-selected-check {
    display: none !important;
    color: var(--accent, #9294f7);
    font-size: 17px !important;
}

#model-picker-dialog .selected-model .model-selected-check {
    display: block !important;
}

#model-picker-dialog .selected-model .model-pin {
    display: none !important;
}

#model-picker-dialog .model-unavailable {
    opacity: .38;
    filter: grayscale(.4);
}

#model-picker-dialog .model-unavailable::after {
    content: none;
}

#model-picker-dialog .model-no-results {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px 40px;
    color: var(--placeholder-color, #888);
    text-align: center;
}

#model-picker-dialog .model-no-results[style*="block"] {
    display: flex !important;
}

#model-picker-dialog .model-no-results>span {
    font-size: 30px;
    opacity: .5;
}

#model-picker-dialog .model-no-results strong {
    color: var(--text-color, #f5f5f5);
    font-size: 13.5px;
    font-weight: 600;
}

#model-picker-dialog .model-no-results small {
    font-size: 11.5px;
    opacity: .7;
}

/* Hidden items */
#model-picker-dialog .suparva-option[hidden] {
    display: none !important;
}

#model-picker-dialog .suparva-option-group-label[hidden] {
    display: none !important;
}

/* Mobile: bottom sheet with safe-area spacing */
@media (max-width: 640px) {
    #model-picker-dialog {
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        max-height: min(82dvh, 600px) !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        transform: translateY(100%) !important;
    }

    body.model-picker-visible #model-picker-dialog {
        transform: translateY(0) !important;
    }

    #model-picker-dialog .model-picker-heading {
        min-height: 56px;
        padding: 14px 16px !important;
    }

    #model-picker-dialog .model-picker-heading::before {
        content: '';
        position: absolute;
        top: 7px;
        left: 50%;
        width: 32px;
        height: 4px;
        border-radius: 99px;
        background: rgba(255, 255, 255, .18);
        transform: translateX(-50%);
    }

    #model-picker-dialog .model-search-wrap {
        margin: 10px 12px 0 !important;
    }

    #model-picker-dialog .model-filter-bar {
        padding: 8px 12px 4px;
    }

    #model-picker-dialog .model-filter-chip {
        padding: 4px 9px;
        font-size: 11px;
    }

    #model-picker-dialog .model-options-scroll {
        padding: 0 8px calc(12px + env(safe-area-inset-bottom)) !important;
    }

    #model-picker-dialog .model-pin {
        opacity: .7;
    }

    #model-picker-dialog .model-search-shortcut {
        display: none !important;
    }
}


/* ── Model selector stability: final portal-scoped corrections ─────────── */
/* The model trigger is a purpose-built dialog button, never a generic select. */
#model-selector.model-selector .model-picker-trigger::after {
    content: none !important;
    display: none !important;
}

#model-selector.model-selector .model-picker-trigger {
    position: relative;
    font-family: inherit;
}

#model-selector.model-selector .model-trigger-icon {
    color: var(--accent, #8b8df6);
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

#model-selector.model-selector .model-caret {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-left: 1px;
}

/* Filtering must win against every legacy picker/card display rule. */
#model-picker-dialog .suparva-option.model-option-card.model-filtered-out,
#model-selector.model-selector .suparva-option.model-option-card.model-filtered-out {
    display: none !important;
}

#model-picker-dialog .suparva-option-group-label.model-filtered-out,
#model-selector.model-selector .suparva-option-group-label.model-filtered-out {
    display: none !important;
}

#model-picker-dialog .model-no-results,
#model-selector.model-selector .model-no-results {
    display: none !important;
}

#model-picker-dialog .model-no-results:not([hidden]),
#model-selector.model-selector .model-no-results:not([hidden]) {
    display: flex !important;
}

/* Thinking control: clear capability state and crisp level choices. */
#deep-think-toggler .tools-icon {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

#deep-think-toggler.reasoning-active .tools-icon {
    color: var(--accent, #8b8df6);
}

.reason-level-menu .reason-level-opt[aria-checked="true"] {
    background: var(--accent-soft, rgba(99, 102, 241, .16));
    color: var(--accent, #8b8df6);
}


/* The reasoning menu is portaled to <body>; position it from its trigger. */
.reason-level-menu {
    position: fixed !important;
    z-index: 2147483002 !important;
    transform: translateY(6px) scale(.97) !important;
}

.reason-level-menu.open {
    transform: translateY(0) scale(1) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   CHARACTER ROLEPLAY SETUP — slide-up "cassette" panel above the composer
   Shown only in body.character-mode via #char-scene-button. Editable for a
   new chat; read-only (.locked) once the conversation has begun.
   ═══════════════════════════════════════════════════════════════════════ */

/* Trigger button — inherits .tool-btn; tint when a non-default setup is active */
#char-scene-button.is-active .tools-icon {
    color: var(--accent);
}

#char-scene-button.is-active {
    background: var(--accent-soft);
}

#char-scene-button.is-locked .tools-icon {
    opacity: 0.72;
}

/* The `hidden` attribute must win over the panel's own display rules
   (otherwise .cs-field { display:flex } keeps the scene box visible). */
.char-scene-panel [hidden] {
    display: none !important;
}

/* Stacking so the settings card sits BEHIND the composer:
   backdrop (1) < settings card (1, inside form) < composer input card (2).
   The form is lifted above the backdrop within the typing area. Scoped to
   character mode so the normal composer's layout/popups are untouched. */
body.character-mode .typing-area .typing-form {
    position: relative;
    z-index: 2;
}

body.character-mode .typing-form .input-wrapper {
    position: relative;
    z-index: 2;
}

/* Backdrop — invisible click-catcher (on <body>) so an outside tap closes the
   panel. Sits below the composer (typing area z-index:100) but above the chat. */
.char-scene-backdrop {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: transparent;
    opacity: 0;
    pointer-events: none;
}

.char-scene-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* The settings card — a child of .typing-form, anchored so its bottom tucks a
   little behind the input card. It sits BEHIND the composer (z-index 1 < the
   input-wrapper's 2) and slides up from there. */
.char-scene-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 26px);
    /* bottom ~26px hidden behind the input card top */
    z-index: 1;
    width: 100%;
    max-height: min(62vh, 560px);
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;
    /* keep the footer clear of the tucked strip */
    transform: translateY(34px);
    opacity: 0;
    pointer-events: none;
    border-radius: 20px 20px 16px 16px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    background: var(--darker-background, #1b1b20);
    box-shadow: 0 -16px 46px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    transition: opacity 0.2s var(--ui-ease), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.char-scene-panel.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Header */
.char-scene-panel .cs-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

.char-scene-panel .cs-head-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.char-scene-panel .cs-head-txt strong {
    font-size: 15px;
    font-weight: 650;
    color: var(--text-color);
}

.char-scene-panel .cs-sub {
    font-size: 12px;
    color: var(--placeholder-color, #9a9aa2);
}

.char-scene-panel .cs-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--placeholder-color, #9a9aa2);
    font-size: 20px;
    cursor: pointer;
    transition: background 0.15s var(--ui-ease), color 0.15s var(--ui-ease);
}

.char-scene-panel .cs-close:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08));
    color: var(--text-color);
}

/* Locked banner */
.char-scene-panel .cs-lock-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px 0;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--accent-soft, rgba(99, 102, 241, 0.14));
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.4;
}

.char-scene-panel .cs-lock-banner[hidden] {
    display: none;
}

.char-scene-panel .cs-lock-banner .material-symbols-rounded {
    font-size: 16px;
    color: var(--accent);
}

/* Scrollable body */
.char-scene-panel .cs-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    overflow-y: auto;
}

.char-scene-panel .cs-body::-webkit-scrollbar {
    width: 6px;
}

.char-scene-panel .cs-body::-webkit-scrollbar-thumb {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.12));
    border-radius: 6px;
}

.char-scene-panel .cs-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.char-scene-panel .cs-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--placeholder-color, #9a9aa2);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Text areas */
.char-scene-panel textarea {
    width: 100%;
    resize: none;
    padding: 11px 13px;
    border-radius: 12px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    background: var(--secondary-color, #26262b);
    color: var(--text-color);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.15s var(--ui-ease), box-shadow 0.15s var(--ui-ease);
}

.char-scene-panel textarea::placeholder {
    color: var(--placeholder-color, #8a8a92);
}

.char-scene-panel textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Chip rows */
.char-scene-panel .cs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.char-scene-panel .cs-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border-radius: 11px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    background: var(--secondary-color, #26262b);
    color: var(--text-color);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.14s var(--ui-ease), border-color 0.14s var(--ui-ease), color 0.14s var(--ui-ease), transform 0.14s var(--ui-ease);
}

.char-scene-panel .cs-chip .material-symbols-rounded {
    font-size: 17px;
    color: var(--placeholder-color, #9a9aa2);
}

.char-scene-panel .cs-chip:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08));
}

.char-scene-panel .cs-chip.active {
    background: var(--accent-soft, rgba(99, 102, 241, 0.16));
    border-color: var(--accent);
    color: var(--accent);
}

.char-scene-panel .cs-chip.active .material-symbols-rounded {
    color: var(--accent);
}

/* Realism as an even segmented control */
.char-scene-panel .cs-seg {
    gap: 0;
    padding: 3px;
    border-radius: 12px;
    background: var(--secondary-color, #26262b);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
}

.char-scene-panel .cs-seg .cs-chip {
    flex: 1 1 0;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 9px;
    padding: 8px 6px;
}

.char-scene-panel .cs-seg .cs-chip:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.06));
}

.char-scene-panel .cs-seg .cs-chip.active {
    background: var(--accent);
    color: var(--accent-contrast, #fff);
}

/* Compaction toggle row */
.char-scene-panel .cs-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px;
    border-radius: 14px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    background: var(--secondary-color, #26262b);
}

.char-scene-panel .cs-toggle-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.char-scene-panel .cs-toggle-txt .cs-label {
    text-transform: none;
    font-size: 13.5px;
    color: var(--text-color);
}

.char-scene-panel .cs-hint {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--placeholder-color, #9a9aa2);
    max-width: 42ch;
}

.char-scene-panel .cs-switch {
    flex-shrink: 0;
    position: relative;
    width: 44px;
    height: 26px;
    border: none;
    border-radius: 999px;
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.16));
    cursor: pointer;
    padding: 0;
    transition: background 0.18s var(--ui-ease);
}

.char-scene-panel .cs-switch .cs-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform 0.18s var(--ui-ease);
}

.char-scene-panel .cs-switch.on {
    background: var(--accent);
}

.char-scene-panel .cs-switch.on .cs-switch-knob {
    transform: translateX(18px);
}

/* Footer */
.char-scene-panel .cs-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

.char-scene-panel .cs-reset,
.char-scene-panel .cs-apply {
    height: 38px;
    padding: 0 18px;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s var(--ui-ease), opacity 0.15s var(--ui-ease), transform 0.1s var(--ui-ease);
}

.char-scene-panel .cs-reset {
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
    background: transparent;
    color: var(--text-color);
}

.char-scene-panel .cs-reset:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08));
}

.char-scene-panel .cs-apply {
    border: none;
    background: var(--accent);
    color: var(--accent-contrast, #fff);
}

.char-scene-panel .cs-apply:hover {
    background: var(--accent-strong, #4f46e5);
}

.char-scene-panel .cs-apply:active {
    transform: scale(0.97);
}

/* Locked (read-only) state — controls look inert and stop responding */
.char-scene-panel.locked .cs-body .cs-chips,
.char-scene-panel.locked .cs-body .cs-switch {
    opacity: 0.55;
    pointer-events: none;
}

.char-scene-panel.locked textarea {
    opacity: 0.7;
    cursor: not-allowed;
}

.char-scene-panel .cs-apply:disabled,
.char-scene-panel .cs-reset:disabled {
    opacity: 0.4;
    pointer-events: none;
}

@media screen and (max-width: 999px) {
    .char-scene-panel {
        width: 100%;
        max-height: 66vh;
        border-radius: 18px 18px 14px 14px;
    }
}


/* ── Censorship: label row + info button ─────────────────────────────────── */
.char-scene-panel .cs-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.char-scene-panel .cs-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--placeholder-color, #9a9aa2);
    font-size: 16px;
    cursor: pointer;
    transition: color 0.15s var(--ui-ease);
}

.char-scene-panel .cs-info-btn:hover {
    color: var(--accent);
}

/* ── Content modals (info + one-time agreement) ──────────────────────────── */
.cs-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s var(--ui-ease);
}

.cs-modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.cs-modal {
    width: min(440px, 100%);
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    background: var(--darker-background, #1b1b20);
    box-shadow: var(--ui-shadow-lg, 0 24px 70px rgba(0, 0, 0, 0.5));
    transform: translateY(10px) scale(0.98);
    transition: transform 0.2s var(--ui-ease);
    overflow: hidden;
}

.cs-modal-backdrop.open .cs-modal {
    transform: translateY(0) scale(1);
}

.cs-modal-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

.cs-modal-head .material-symbols-rounded {
    color: var(--accent);
    font-size: 20px;
}

.cs-modal-head strong {
    font-size: 15px;
    font-weight: 650;
    color: var(--text-color);
}

.cs-modal-body {
    padding: 14px 18px;
    overflow-y: auto;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-color);
}

.cs-modal-body p {
    margin: 0 0 10px;
}

.cs-modal-body ul {
    margin: 0 0 12px;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cs-modal-body li {
    font-size: 13px;
}

.cs-modal-body .cs-note {
    margin: 6px 0 0;
    padding: 10px 12px;
    border-radius: 11px;
    background: var(--accent-soft, rgba(99, 102, 241, 0.14));
    font-size: 12.5px;
    color: var(--text-color);
}

.cs-modal-body .cs-agree {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 6px;
    padding: 11px 13px;
    border-radius: 12px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    background: var(--secondary-color, #26262b);
    font-size: 13px;
    cursor: pointer;
}

.cs-modal-body .cs-agree-check {
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

.cs-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

.cs-modal-foot button {
    height: 38px;
    padding: 0 18px;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s var(--ui-ease), opacity 0.15s var(--ui-ease);
}

.cs-modal-ghost {
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
    background: transparent;
    color: var(--text-color);
}

.cs-modal-ghost:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08));
}

.cs-modal-primary {
    border: none;
    background: var(--accent);
    color: var(--accent-contrast, #fff);
}

.cs-modal-primary:hover {
    background: var(--accent-strong, #4f46e5);
}

.cs-modal-primary:disabled {
    opacity: 0.45;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   COMPOSER LAYOUT TIDY-UP  (mobile alignment + desktop lift)
   ═══════════════════════════════════════════════════════════════════════ */

/* Mobile: keep every control on one clean row and never let the model pill
   squeeze the attach (files) / photo buttons off the edge. */
@media screen and (max-width: 768px) {
    .input-actions {
        gap: 4px;
        flex-wrap: nowrap;
    }

    .input-tools-left {
        flex-wrap: nowrap;
        overflow: visible;
        min-width: 0;
    }

    .input-tools-left .tool-btn {
        flex: 0 0 auto;
        /* fixed size — must not shrink to zero */
    }

    /* The model pill may shrink and ellipsize; the tool buttons keep priority. */
    #model-selector.model-selector {
        min-width: 0;
        flex: 0 1 auto;
    }

    #model-selector.model-selector .model-picker-trigger {
        max-width: 132px;
    }

    #model-selector .model-name-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Mobile: character chat has three essential, fixed controls — roleplay setup,
   file attach and camera — plus Send. Keep them visibly reserved; never rely on
   positional selectors or flex shrinking, which previously hid Attach/Camera. */
@media screen and (max-width: 768px) {
    body.character-mode .input-actions {
        display: flex !important;
        justify-content: space-between;
        gap: 8px;
        min-width: 0;
    }

    body.character-mode .input-tools-left {
        display: flex !important;
        flex: 0 0 auto !important;
        min-width: max-content !important;
        gap: 4px !important;
        overflow: visible !important;
    }

    body.character-mode #char-scene-button,
    body.character-mode #attach-file-button,
    body.character-mode #take-photo-button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
    }

    body.character-mode .input-actions-right {
        display: flex !important;
        flex: 0 0 auto !important;
        margin-left: auto;
    }

    body.character-mode .input-actions-right .action-btn {
        width: 38px !important;
        height: 38px !important;
    }

    /* The attachment chooser must be allowed to escape above the composer. */
    body.character-mode #attach-file-button {
        position: relative !important;
        overflow: visible !important;
    }

    body.character-mode #attach-file-button .attach-file-selections {
        z-index: 100120 !important;
        bottom: calc(100% + 8px) !important;
        left: 0 !important;
    }
}

/* Desktop: a compact, centered composer with a modest lift from the bottom.
   Character mode has more-specific old padding, so explicitly override it. */
@media screen and (min-width: 1000px) {

    /* All desktop chats float a little above the screen edge. */
    .typing-area {
        padding-bottom: 24px !important;
    }

    /* Character chat retains the same compact, centered composition with a
       slightly roomier lift for its behind-the-composer settings card. */
    body.character-mode .typing-area {
        padding-bottom: 30px !important;
    }

    body.character-mode .typing-area .typing-form {
        max-width: 680px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   SECURE PASS v2 — top-of-stack, tamper-proof, forgot-PIN reset
   The PIN gate must sit above every other overlay and always be
   interactive (fixes "can't touch the PIN UI" when a locked chat
   loads). It is appended as the last <body> child at show time.
   ───────────────────────────────────────────────────────────── */
.secure-pass {
    z-index: 2147483000 !important;
    pointer-events: auto !important;
}

.secure-pass .inner-content {
    pointer-events: auto !important;
}

.sec-pass-forgot {
    margin-top: 14px;
    background: none;
    border: none;
    color: var(--accent, #6366f1);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--ui-radius-sm, 8px);
    transition: background 0.16s ease;
}

.sec-pass-forgot:hover {
    background: var(--accent-soft, rgba(99, 102, 241, 0.14));
}

#sec-pass-reset .sec-reset-label {
    align-self: flex-start;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--subheading-color, #8a8a8a) !important;
    margin: 12px 0 4px;
}

#sec-pass-reset .pin-inputs {
    gap: 8px !important;
    margin: 2px 0 !important;
    flex-wrap: wrap;
    justify-content: center;
}

.sec-reset-cell {
    width: 40px;
    height: 48px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    border-radius: var(--ui-radius, 10px);
    border: 1.5px solid var(--border-color, rgba(255, 255, 255, 0.14));
    background: var(--secondary-color, rgba(255, 255, 255, 0.04));
    color: var(--text-color);
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.sec-reset-otp-row .sec-reset-cell {
    width: 34px;
    height: 44px;
    font-size: 16px;
}

.sec-reset-cell:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.sec-reset-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    width: 100%;
}

.sec-reset-btn {
    flex: 1;
    height: 40px;
    border: none;
    border-radius: var(--ui-radius-sm, 8px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--accent, #6366f1);
    color: var(--accent-contrast, #fff);
}

.sec-reset-btn.secondary {
    background: var(--secondary-color, rgba(255, 255, 255, 0.06));
    color: var(--text-color);
}

.sec-reset-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

#sec-tamper-overlay .sec-tamper-card {
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#sec-tamper-overlay .sec-tamper-card .material-symbols-rounded {
    font-size: 48px;
    color: #f87171;
}

#sec-tamper-overlay h2 {
    margin: 4px 0 0;
    font-size: 20px;
    color: #fff;
}

#sec-tamper-overlay p {
    margin: 0;
    color: #cbd5e1;
    font-size: 14px;
}

/* Secure Pass — email verification panel */
.sec-reset-email-field {
    width: 100%;
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: var(--ui-radius, 10px);
    border: 1.5px solid var(--border-color, rgba(255, 255, 255, 0.14));
    background: var(--secondary-color, rgba(255, 255, 255, 0.04));
    color: var(--text-color);
    font-size: 14px;
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
    box-sizing: border-box;
}

.sec-reset-email-field:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.sec-reset-email-err {
    min-height: 18px;
    margin-top: 6px;
    color: #f87171;
    font-size: 12px;
    text-align: left;
    width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   SECURE PASS — responsive (phones + tablets, landscape w/ keyboard)
   ───────────────────────────────────────────────────────────── */
.secure-pass .inner-content {
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
    .secure-pass .inner-content {
        max-width: calc(100vw - 24px) !important;
        width: calc(100vw - 24px);
        padding: 22px 18px 20px !important;
    }

    .secure-pass .pin-inputs {
        gap: 8px !important;
    }

    .secure-pass .pin-input {
        width: 46px !important;
        height: 52px !important;
        font-size: 20px !important;
    }

    #sec-pass-reset .pin-inputs {
        gap: 6px !important;
    }

    .sec-reset-cell {
        width: 40px;
        height: 46px;
        font-size: 17px;
    }

    .sec-reset-otp-row .sec-reset-cell {
        width: 30px;
        height: 40px;
        font-size: 15px;
    }
}

@media (max-width: 380px) {
    .secure-pass .pin-input {
        width: 40px !important;
        height: 48px !important;
        font-size: 18px !important;
    }

    .sec-reset-cell {
        width: 34px;
        height: 42px;
        font-size: 15px;
    }

    .sec-reset-otp-row .sec-reset-cell {
        width: 26px;
        height: 36px;
        font-size: 14px;
    }

    .sec-reset-actions {
        flex-direction: column;
    }
}

/* Landscape phones / short viewports: let the card scroll instead of clipping. */
@media (max-height: 520px) {
    .secure-pass {
        align-items: flex-start !important;
        padding: 12px !important;
    }

    .secure-pass .inner-content {
        margin: 0 auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   18. AI ERROR CARD  (.ai-error-card)
   Rendered by cleanupOnError() inside the incoming bubble when a turn fails
   (network drop, server stop, stream error). One stable structure every
   time — no half-rendered leftovers, no shifting layout — with an inline
   Retry that re-runs the same turn cleanly.
   ═══════════════════════════════════════════════════════════════════════ */
.ai-error-card {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    max-width: 100%;
    margin: 2px 0;
    padding: 10px 12px;
    border-radius: var(--ui-radius, 12px);
    border: 1px solid rgba(239, 68, 68, 0.32);
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
    font-size: 13.5px;
    line-height: 1.45;
}

.ai-error-card .ai-error-icon {
    font-size: 19px;
    flex-shrink: 0;
    color: #f87171;
}

.ai-error-card .ai-error-text {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.ai-error-card .ai-error-retry {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: var(--ui-radius-sm, 9px);
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.14);
    color: #f87171;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.ai-error-card .ai-error-retry:hover {
    background: rgba(239, 68, 68, 0.24);
    border-color: rgba(239, 68, 68, 0.6);
}

.ai-error-card .ai-error-retry:active {
    transform: scale(0.97);
}

.ai-error-card .ai-error-retry .material-symbols-rounded {
    font-size: 16px;
}

body.light_mode .ai-error-card {
    background: rgba(239, 68, 68, 0.07);
    color: #dc2626;
}

body.light_mode .ai-error-card .ai-error-icon,
body.light_mode .ai-error-card .ai-error-retry {
    color: #dc2626;
}

/* ── Compact inline error card (PRESERVE MODE) ────────────────────────────
   Appended BELOW kept partial content when a stream dies mid-answer. Offers
   Continue (resume server-side run) + Retry (start the turn over). Tinted
   with the app ACCENT — not alarm-red — because the work below it is kept,
   not lost; this is a calm notice, matching the rest of the UI. */
.ai-error-card.ai-error-compact {
    margin-top: 10px;
    padding: 8px 11px;
    font-size: 13px;
    border-color: var(--accent-ring);
    background: var(--accent-soft);
    color: var(--text-color);
}

.ai-error-card.ai-error-compact .ai-error-icon {
    color: var(--accent);
}

.ai-error-card .ai-error-retry.is-continue {
    border-color: var(--accent-ring);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
}

.ai-error-card .ai-error-retry.is-continue:hover {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   18b. CONTINUE BAR (.ai-continue-bar)
   Shown at the end of a reply that was cut short (provider/network issue,
   quota or token cutoff, deliberate Stop). One click resumes the answer
   exactly where it stopped via POST /stream/continue. Styled entirely from
   the app's accent tokens so it matches whatever theme/accent is active —
   no custom palette, no motion, just a quiet inline notice.
   ═══════════════════════════════════════════════════════════════════════ */
.ai-continue-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    max-width: 100%;
    margin: 12px 0 4px;
    padding: 9px 12px;
    border-radius: var(--ui-radius, 12px);
    border: 1px solid var(--accent-ring);
    background: var(--accent-soft);
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.45;
}

.ai-continue-bar .ai-continue-ico {
    font-size: 17px;
    color: var(--accent);
    flex-shrink: 0;
}

.ai-continue-bar .ai-continue-text {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
    color: var(--subheading-color);
}

.ai-continue-bar .ai-continue-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: var(--ui-radius-sm, 9px);
    border: 1px solid var(--accent-ring);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.ai-continue-bar .ai-continue-btn:hover {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    border-color: var(--accent);
}

.ai-continue-bar .ai-continue-btn:active {
    transform: scale(0.97);
}

.ai-continue-bar .ai-continue-btn .material-symbols-rounded {
    font-size: 16px;
}

/* Disabled variant: the run expired / server restarted. Quiet neutral tones. */
.ai-continue-bar.is-disabled {
    border-color: var(--border-color);
    background: var(--hover-bg);
}

.ai-continue-bar.is-disabled .ai-continue-ico,
.ai-continue-bar.is-disabled .ai-continue-text {
    color: var(--subheading-color);
}

/* Shared quiet ✕ dismiss on the Continue bar and the compact error card. */
.ai-bar-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: auto;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--subheading-color);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ai-continue-bar .ai-bar-x { margin-left: 0; }

.ai-bar-x:hover {
    background: var(--hover-bg-strong);
    color: var(--text-color);
}

.ai-bar-x .material-symbols-rounded {
    font-size: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════
   19. STREAMING LOADER — refined "thinking" indicator
   Replaces the flat grey three-dot box with an accent-aware, glassy pill and a
   smoother wave. Shown identically on a fresh stream and on reconnect/resume.
   ═══════════════════════════════════════════════════════════════════════ */
.chat-list .message.loading .stream-loader {
    display: flex;
    align-items: center;
    margin-top: 3px;
}

.chat-list .typing-indicator,
.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    width: fit-content;
    border-radius: 15px;
    border-bottom-left-radius: 6px;
    background:
        linear-gradient(135deg, var(--accent-soft, rgba(99, 102, 241, 0.16)), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: dph-loader-breathe 2.6s ease-in-out infinite;
}

.chat-list .typing-dot,
.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent, #6366f1);
    opacity: 0.45;
    box-shadow: 0 0 6px var(--accent-ring, rgba(99, 102, 241, 0.45));
    animation: dph-typing 1.25s infinite both cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-list .typing-dot:nth-child(1),
.typing-dot:nth-child(1) {
    animation-delay: -0.28s;
}

.chat-list .typing-dot:nth-child(2),
.typing-dot:nth-child(2) {
    animation-delay: -0.14s;
}

.chat-list .typing-dot:nth-child(3),
.typing-dot:nth-child(3) {
    animation-delay: 0s;
}

@keyframes dph-typing {

    0%,
    75%,
    100% {
        transform: translateY(0) scale(0.78);
        opacity: 0.35;
    }

    35% {
        transform: translateY(-5px) scale(1);
        opacity: 1;
    }
}

/* Very subtle "alive" pulse on the whole pill so it reads as active work. */
@keyframes dph-loader-breathe {

    0%,
    100% {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    50% {
        box-shadow: 0 2px 18px var(--accent-ring, rgba(99, 102, 241, 0.28)), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
}

body.light_mode .chat-list .typing-indicator,
body.light_mode .typing-indicator {
    background: linear-gradient(135deg, var(--accent-soft, rgba(99, 102, 241, 0.12)), rgba(0, 0, 0, 0.02));
    border-color: rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .typing-indicator {
        animation: none;
    }

    .typing-dot {
        animation-duration: 0.001ms;
        opacity: 0.7;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   20. LONG USER-MESSAGE CLAMP — ChatGPT-style "Show more"
   A tall user (outgoing) bubble collapses to a max height with a soft fade
   into the bubble colour and a Show more / Show less toggle. Applied by
   setupUserClamp() in chat-engine.js (measures natural height, opt-in per bubble).
   ═══════════════════════════════════════════════════════════════════════ */
.message.outgoing .message-content {
    position: relative;
}

.message.outgoing.uclamp .message-content {
    max-height: var(--uclamp-max, 260px);
    overflow: hidden;
}

/* Fade the last visible lines into the bubble background. */
.message.outgoing.uclamp .message-content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            var(--light-dark-background, #26262b) 88%);
    pointer-events: none;
}

/* Show more / Show less toggle — sits bottom-left inside the bubble. */
.message.outgoing .user-show-toggle {
    display: flex;
    align-items: center;
    gap: 3px;
    width: fit-content;
    margin: 8px 0 0;
    padding: 4px 8px 4px 6px;
    border: none;
    background: transparent;
    color: var(--text-color, #e8e8ea);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    border-radius: 9px;
    opacity: 0.82;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.message.outgoing .user-show-toggle:hover {
    opacity: 1;
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08));
}

.message.outgoing .user-show-toggle .ust-caret {
    font-size: 18px;
    transition: transform 0.2s var(--ui-ease, ease);
}

.message.outgoing .user-show-toggle.expanded .ust-caret {
    transform: rotate(180deg);
}

/* When expanded, the toggle keeps its own top spacing above; drop the fade. */
.message.outgoing:not(.uclamp) .message-content::after {
    display: none;
}


/* ─────────────────────────────────────────────────────────────────────────
   Library — focused workspace, with one intentional responsive layout
   ───────────────────────────────────────────────────────────────────────── */
.library-window {
    width: min(1120px, calc(100vw - 32px));
    height: min(760px, calc(100dvh - 40px));
    background: var(--darker-background, #1a1a1a);
}

.library-window .head {
    height: 60px;
    padding: 0 14px 0 22px;
}

.library-window .head h2 {
    margin: 0;
    color: var(--text-color, #e7eaee);
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.library-window .content-view {
    height: calc(100% - 60px);
}

.library-window .content-view .options {
    padding: 14px 10px;
    gap: 4px;
    background: color-mix(in srgb, var(--primary-color, #17191c) 48%, transparent);
}

.library-window .content-view .options .options-l {
    appearance: none;
    border: 0;
    width: 100%;
    height: 42px;
    padding: 0 12px;
    justify-content: flex-start;
    gap: 10px;
    color: var(--subheading-color, #98a2b3);
    font: inherit;
    text-align: left;
}

.library-window .content-view .options .options-l .material-symbols-rounded {
    flex: 0 0 auto;
    font-size: 19px;
    color: currentColor;
}

.library-window .content-view .options .options-l .lib-tab-label {
    overflow: hidden;
    color: currentColor;
    font-size: 13.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-window .content-view .options .options-l.active {
    background: color-mix(in srgb, var(--accent-color, #3b82f6) 20%, transparent);
    color: var(--accent-color, #68a5ff);
}

.library-window .content-view .options .options-l.active::before {
    content: "";
    width: 3px;
    height: 18px;
    margin-left: -7px;
    margin-right: 4px;
    border-radius: 999px;
    background: var(--accent-color, #3b82f6);
}

.library-window .lib-contents {
    background: var(--darker-background, #1a1a1a);
}

.lib-itms-search {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    min-height: 72px;
    height: auto;
    margin: 0;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    background: var(--darker-background, #1a1a1a);
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    box-shadow: none;
}

.lib-itms-search input {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 44px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: 12px;
    background: var(--primary-color, #17191c);
    color: var(--text-color, #e7eaee);
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.lib-itms-search input::placeholder {
    color: var(--subheading-color, #98a2b3);
    opacity: 0.72;
}

.lib-itms-search input:focus {
    border-color: var(--accent-color, #3b82f6);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, #3b82f6) 16%, transparent);
}

.library-window .search-icon,
.library-window .clear-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: var(--subheading-color, #98a2b3);
    font-size: 19px;
    line-height: 32px;
    text-align: center;
}

.library-window .search-icon {
    left: 26px;
    pointer-events: none;
}

.library-window .clear-icon {
    right: 26px;
    background: transparent;
    cursor: pointer;
}

.library-window .clear-icon:hover {
    color: var(--text-color, #e7eaee);
    background: var(--secondary-color, rgba(255, 255, 255, 0.07));
}

.lib-itms-con {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: auto;
    padding: 18px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    width: 100%;
}

.lib-tile {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.09));
    border-radius: 14px;
    background: var(--primary-color, #17191c);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.lib-tile:hover {
    border-color: color-mix(in srgb, var(--accent-color, #3b82f6) 58%, var(--border-color, rgba(255, 255, 255, 0.09)));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    transform: translateY(-2px);
}

.lib-tile:active {
    transform: translateY(0);
}

.lib-tile-preview {
    position: relative;
    display: flex;
    width: 100%;
    aspect-ratio: 4 / 3;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary-color, #17191c) 88%, #fff), var(--darker-background, #121316));
}

.lib-tile-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.24s ease;
}

.lib-tile:hover .lib-tile-preview img {
    transform: scale(1.035);
}

.lib-tile-fileicon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--subheading-color, #98a2b3);
}

.lib-tile-fileicon .material-symbols-rounded {
    color: var(--accent-color, #3b82f6);
    font-size: 46px;
    opacity: 0.9;
}

.lib-tile-fileicon small {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.lib-cat-chip {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    background: rgba(15, 16, 18, 0.7);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lib-tile-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
}

.lib-tile-title {
    overflow: hidden;
    color: var(--text-color, #e7eaee);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lib-tile-meta {
    min-height: 15px;
    overflow: hidden;
    color: var(--subheading-color, #98a2b3);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lib-tile-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.lib-tile-actions button {
    display: inline-flex;
    height: 34px;
    min-width: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 9px;
    background: var(--secondary-color, rgba(255, 255, 255, 0.05));
    color: var(--subheading-color, #98a2b3);
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.lib-tile-actions button:hover {
    border-color: color-mix(in srgb, var(--accent-color, #3b82f6) 36%, transparent);
    background: color-mix(in srgb, var(--accent-color, #3b82f6) 16%, var(--secondary-color, rgba(255, 255, 255, 0.05)));
    color: var(--accent-color, #68a5ff);
}

.lib-tile-actions button.lib-danger:hover {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.14);
    color: #f87171;
}

.lib-tile-actions .material-symbols-rounded {
    font-size: 18px;
}

.lib-empty {
    display: flex;
    min-height: 260px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--subheading-color, #98a2b3);
    text-align: center;
}

@media screen and (max-width: 768px) {
    .library-window .head {
        height: 56px;
    }

    .library-window .content-view {
        height: calc(100% - 56px);
    }

    .library-window .content-view .options {
        padding: 9px 12px;
        gap: 6px;
        background: var(--darker-background, #1a1a1a);
        scrollbar-width: none;
    }

    .library-window .content-view .options::-webkit-scrollbar {
        display: none;
    }

    .library-window .content-view .options .options-l {
        width: auto !important;
        height: 36px;
        padding: 0 12px;
        gap: 7px;
    }

    .library-window .content-view .options .options-l.active::before {
        display: none;
    }

    .lib-itms-search {
        min-height: 66px;
        padding: 11px 12px;
    }

    .library-window .search-icon {
        left: 20px;
    }

    .library-window .clear-icon {
        right: 20px;
    }

    .lib-itms-con {
        padding: 12px;
    }

    .lib-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .lib-tile {
        border-radius: 12px;
    }

    .lib-tile-body {
        padding: 10px;
    }

    .lib-tile-actions {
        gap: 4px;
        margin-top: 6px;
    }

    .lib-tile-actions button {
        height: 32px;
        border-radius: 8px;
    }
}

@media screen and (max-width: 380px) {
    .library-window .content-view .options .options-l {
        padding: 0 10px;
    }

    .library-window .content-view .options .options-l .lib-tab-label {
        font-size: 12.5px;
    }

    .lib-tile-title {
        font-size: 12px;
    }

    .lib-tile-meta {
        font-size: 10px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   Multi-file attachment chips (input card + message bubble)
   ───────────────────────────────────────────────────────────────────────── */
/* When more than one file is attached the preview becomes a horizontal strip. */
.input-wrapper .image-preview.multi {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    overflow-x: auto;
    padding: 8px 12px 4px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.attach-chip {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--darker-background, rgba(0, 0, 0, 0.25));
}

.input-wrapper .image-preview.multi .attach-chip {
    width: 64px;
    height: 64px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.attach-chip img.preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.attach-chip .file-preview {
    font-size: 11px;
    padding: 6px;
    text-align: center;
    word-break: break-all;
    color: var(--text-color);
    max-height: 100%;
    overflow: hidden;
}

.attach-chip .rm-img-prv {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 3;
    font-size: 15px;
    padding: 2px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    line-height: 1;
}

.attach-chip .rm-img-prv:hover {
    background: rgba(0, 0, 0, 0.85);
}

.attach-chip-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    z-index: 2;
}

.attach-chip-loader .material-symbols-rounded {
    color: #fff;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Multiple attachments inside a sent user message bubble. */
.chat-attachments-multi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    align-items: flex-start;
}

/* Image chips in multi-grid — small square thumbnails. When several files are
   attached, a large photo chip next to a compact file card reads as broken
   layout (one attachment towering over the rest); keep every chip the same
   small scale so the row stays even regardless of file type mix. */
.chat-attachments-multi .image-preview-chat.ipc-img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    box-shadow: none;
    flex-shrink: 0;
    margin-bottom: 0;
    align-self: flex-start;
}

.chat-attachments-multi .image-preview-chat.ipc-img .preview-image,
.chat-attachments-multi .image-preview-chat.ipc-img img {
    border-radius: 10px;
}

/* File chips in multi-grid — narrower pill, same visual height as the image
   chips above so a mixed row of image + file attachments lines up evenly. */
.chat-attachments-multi .image-preview-chat.ipc-file {
    min-width: 160px;
    max-width: 220px;
    min-height: 64px;
    padding: 8px 14px;
    gap: 10px;
    margin-bottom: 0;
    align-self: flex-start;
}

.chat-attachments-multi .ipc-file-icon {
    font-size: 20px;
}

.chat-attachments-multi .ipc-file-name {
    font-size: 12px;
    max-width: 130px;
}

/* Legacy override kept for backward compat */
.chat-attachments-multi .image-preview-chat:not(.ipc-img):not(.ipc-file) {
    width: 64px;
    height: 64px;
    border-radius: 10px;
}

@media screen and (max-width: 480px) {
    .chat-attachments-multi .image-preview-chat.ipc-img {
        width: 56px;
        height: 56px;
    }

    .chat-attachments-multi .image-preview-chat.ipc-file {
        max-width: 90vw;
        min-height: 56px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Image Viewer — clean, professional, matches app design system
   ───────────────────────────────────────────────────────────────────────── */
.dlx-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000000;
    display: none;
    flex-direction: column;
    background: var(--darker-background, #111113);
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.24s ease, transform 0.26s var(--ui-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
    will-change: transform, opacity;
}

.dlx-overlay.dlx-open {
    display: flex;
    opacity: 1;
    transform: scale(1);
}

.dlx-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 20px;
    height: 52px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

.dlx-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color, #e7eaee);
}

.dlx-stage {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(59, 130, 246, 0.02), transparent 70%);
}

.dlx-canvas-wrap {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: inline-flex;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

.dlx-canvas {
    max-width: min(88vw, 1000px);
    max-height: 62vh;
    object-fit: contain;
    display: block;
    background: var(--primary-color, #17191c);
}

.dlx-crop {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dlx-crop-box {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 80%;
    height: 80%;
    border: 2px solid var(--accent-color, #3b82f6);
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
    cursor: move;
    pointer-events: auto;
    border-radius: 6px;
    touch-action: none;
}

.dlx-controls {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    background: var(--primary-color, #17191c);
}

.dlx-tools {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.dlx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 10px;
    background: var(--secondary-color, rgba(255, 255, 255, 0.04));
    color: var(--text-color, #e7eaee);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.14s ease, transform 0.1s ease, border-color 0.14s ease;
}

.dlx-btn:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08));
    border-color: var(--accent-color, #3b82f6);
}

.dlx-btn:active {
    transform: scale(0.95);
}

.dlx-btn.dlx-primary {
    background: var(--accent-color, #3b82f6);
    border-color: transparent;
    color: #fff;
}

.dlx-btn.dlx-primary:hover {
    filter: brightness(1.12);
}

.dlx-btn.dlx-close {
    border: none;
    background: transparent;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    padding: 0;
}

.dlx-btn.dlx-close:hover {
    background: var(--secondary-color, rgba(255, 255, 255, 0.06));
}

.dlx-btn .material-symbols-rounded {
    font-size: 20px;
}

.dlx-sliders {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px 20px;
    max-width: 680px;
    margin: 0 auto;
    width: 100%;
}

.dlx-sliders label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--subheading-color, #98a2b3);
}

.dlx-sliders input[type="range"] {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--secondary-color, #2a2e33);
    outline: none;
    cursor: pointer;
}

.dlx-sliders input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-color, #3b82f6);
    border: 2px solid var(--darker-background, #111);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.dlx-sliders input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-color, #3b82f6);
    border: 2px solid var(--darker-background, #111);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.dlx-crop-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

@media screen and (max-width: 600px) {
    .dlx-stage {
        padding: 12px;
    }

    .dlx-canvas {
        max-height: 52vh;
        max-width: 94vw;
    }

    .dlx-canvas-wrap {
        border-radius: 10px;
    }

    .dlx-btn {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        border-radius: 8px;
    }

    .dlx-controls {
        padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
        gap: 10px;
    }

    .dlx-sliders {
        gap: 8px 14px;
    }

    .dlx-sliders label {
        font-size: 10px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   Image viewer — quiet, app-native, and intentionally progressive
   ───────────────────────────────────────────────────────────────────────── */
.dlx-overlay {
    background: color-mix(in srgb, var(--darker-background, #111113) 94%, #000);
    transform: scale(0.985);
}

.dlx-topbar {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    height: 58px;
    padding: 0 18px;
    background: color-mix(in srgb, var(--primary-color, #17191c) 72%, transparent);
}

.dlx-title {
    overflow: hidden;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.dlx-title-main {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlx-title-sub {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary, #9aa3ad);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlx-title-sub::before {
    content: "public";
    font-family: "Material Symbols Rounded";
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    opacity: 0.8;
}

.dlx-stage {
    padding: clamp(16px, 3vw, 36px);
    background:
        radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent-color, #3b82f6) 7%, transparent), transparent 46%),
        var(--darker-background, #111113);
}

.dlx-canvas-wrap {
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 16px;
    background: var(--primary-color, #17191c);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.42);
}

.dlx-canvas {
    max-width: min(90vw, 1180px);
    max-height: 66vh;
}

.dlx-controls {
    gap: 10px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--primary-color, #17191c) 92%, transparent);
}

.dlx-tools {
    gap: 7px;
    align-items: center;
}

.dlx-btn {
    min-width: 40px;
    height: 38px;
    padding: 0 11px;
    border-radius: 9px;
    font-size: 12px;
}

.dlx-btn.dlx-close {
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
}

.dlx-download {
    height: 36px;
    padding: 0 12px;
}

.dlx-tools .dlx-btn.dlx-active {
    border-color: color-mix(in srgb, var(--accent-color, #3b82f6) 55%, transparent);
    background: color-mix(in srgb, var(--accent-color, #3b82f6) 18%, var(--secondary-color, rgba(255, 255, 255, 0.04)));
    color: var(--accent-color, #68a5ff);
}

.dlx-sliders {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: 760px;
    padding-top: 2px;
}

.dlx-sliders[hidden] {
    display: none;
}

.dlx-sliders label {
    gap: 7px;
    font-size: 10px;
}

.dlx-crop-actions {
    margin-top: 2px;
}

@media screen and (max-width: 600px) {
    .dlx-topbar {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        height: 56px;
        padding: 0 12px;
    }

    .dlx-download span:last-child,
    .dlx-tools [data-dlx="adjust"] span:last-child {
        display: none;
    }

    .dlx-download {
        width: 40px;
        padding: 0;
    }

    .dlx-stage {
        padding: 14px;
    }

    .dlx-canvas {
        max-width: 94vw;
        max-height: 57vh;
    }

    .dlx-controls {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .dlx-tools {
        gap: 5px;
    }

    .dlx-btn {
        min-width: 38px;
        height: 38px;
        padding: 0 9px;
    }

    .dlx-sliders {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 14px;
    }
}

/* ============================================================================
   AI Browser Automation — live step viewer
   Renders inside a tool block (kind="browser"): a page screenshot + metadata.
   ========================================================================== */
.tool-block[data-tool-kind="browser"] .tool-results {
    padding-top: 6px;
}

.browser-step-card {
    border: 1px solid var(--border-subtle, var(--ui-border, rgba(255, 255, 255, 0.08)));
    border-radius: var(--ui-radius, 12px);
    overflow: hidden;
    background: var(--darker-background, rgba(0, 0, 0, 0.25));
}

.browser-step-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 12.5px;
    color: var(--subheading-color, #9aa0aa);
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

.browser-step-icon {
    font-size: 17px;
    color: var(--accent-color, #7c3aed);
}

.browser-step-loc {
    font-weight: 600;
    color: var(--text-color, #e6e6e6);
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.browser-step-meta {
    margin-left: auto;
    text-transform: capitalize;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

.browser-step-title {
    padding: 6px 10px 0;
    font-size: 13px;
    color: var(--text-color, #e6e6e6);
    font-weight: 600;
}

.browser-shot {
    display: block;
    width: 100%;
    padding: 10px;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.browser-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    box-shadow: var(--ui-shadow-md, 0 4px 18px rgba(0, 0, 0, 0.3));
}

.browser-noshot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    font-size: 12.5px;
    color: var(--placeholder-color, #7d828c);
}

.browser-noshot .material-symbols-rounded {
    font-size: 18px;
}

/* Fullscreen screenshot lightbox */
.browser-shot-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(4px);
    animation: askFade 0.15s ease;
    cursor: zoom-out;
}

.browser-shot-overlay img {
    max-width: 94vw;
    max-height: 92vh;
    border-radius: 10px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6);
}

.browser-shot-close {
    position: absolute;
    top: 18px;
    right: 20px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 22px;
    cursor: pointer;
}

/* ============================================================================
   Self-file viewing — the pages Delphos looked at (tool kind="filevision")
   ----------------------------------------------------------------------------
   viewFile renders a produced PDF back to images and measures it. This card is
   the receipt: the thumbnails are the real rendered pages, so a document that
   came out blank LOOKS blank here, next to the count and the paper size that
   were measured. It also says who did the looking — the model itself, a
   borrowed vision model, or nobody — because "it looks great" from a model with
   no eyes is the failure this whole feature exists to stop.
   ========================================================================== */
.tool-block[data-tool-kind="filevision"] .tool-results {
    padding-top: 6px;
}

.filevision-card {
    border: 1px solid var(--border-subtle, var(--ui-border, rgba(255, 255, 255, 0.08)));
    border-radius: var(--ui-radius, 12px);
    overflow: hidden;
    background: var(--darker-background, rgba(0, 0, 0, 0.25));
    animation: askFade 0.2s ease;
}

.fv-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 12.5px;
    color: var(--subheading-color, #9aa0aa);
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

.fv-ic {
    font-size: 18px;
    color: var(--accent-color, #7c3aed);
    flex: 0 0 auto;
}

.fv-name {
    font-weight: 600;
    color: var(--text-color, #e6e6e6);
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fv-meta {
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fv-verdict {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.fv-verdict .material-symbols-rounded {
    font-size: 14px;
}

.fv-verdict.fv-ok {
    color: #3fb950;
    background: rgba(63, 185, 80, 0.13);
    border-color: rgba(63, 185, 80, 0.42);
}

.fv-verdict.fv-bad {
    color: #f85149;
    background: rgba(248, 81, 73, 0.12);
    border-color: rgba(248, 81, 73, 0.4);
}

/* ── the filmstrip ─────────────────────────────────────────────────────────── */
.fv-strip {
    position: relative;
    display: flex;
    gap: 8px;
    padding: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border-subtle, rgba(255, 255, 255, 0.14)) transparent;
}

.fv-strip::-webkit-scrollbar {
    height: 6px;
}

.fv-strip::-webkit-scrollbar-thumb {
    background: var(--border-subtle, rgba(255, 255, 255, 0.14));
    border-radius: 3px;
}

.fv-page {
    position: relative;
    flex: 0 0 auto;
    width: 74px;
    padding: 0;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    line-height: 0;
    transition: transform 0.16s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.16s ease, box-shadow 0.16s ease;
    animation: fvPageIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* The pages lay themselves out one after another, which reads as an inspection
   happening rather than a table of thumbnails arriving. */
.fv-page:nth-child(1) { animation-delay: 0.03s; }
.fv-page:nth-child(2) { animation-delay: 0.07s; }
.fv-page:nth-child(3) { animation-delay: 0.11s; }
.fv-page:nth-child(4) { animation-delay: 0.15s; }
.fv-page:nth-child(5) { animation-delay: 0.19s; }
.fv-page:nth-child(6) { animation-delay: 0.23s; }
.fv-page:nth-child(n+7) { animation-delay: 0.26s; }

@keyframes fvPageIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.93);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fv-page img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 124px;
    object-fit: cover;
    object-position: top center;
}

.fv-page:hover {
    transform: translateY(-3px);
    border-color: var(--accent-color, #7c3aed);
    box-shadow: var(--ui-shadow-md, 0 4px 18px rgba(0, 0, 0, 0.3));
}

.fv-page:active {
    transform: translateY(-1px) scale(0.985);
}

.fv-page:focus-visible {
    outline: 2px solid var(--accent-color, #7c3aed);
    outline-offset: 2px;
}

.fv-page-n {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    background: rgba(0, 0, 0, 0.62);
}

/* A page the rasterizer measured as empty is flagged on the picture itself. */
.fv-page-bad {
    border-color: rgba(248, 81, 73, 0.5);
}

.fv-page-bad::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(248, 81, 73, 0.14);
    pointer-events: none;
}

.fv-page-flag {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
    font-size: 13px;
    line-height: 1;
    padding: 2px;
    color: #fff;
    background: #f85149;
    border-radius: 50%;
}

/* A line that travels across the strip while a vision model is being asked. */
.fv-scan {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 10px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, transparent, var(--accent-color, #7c3aed), transparent);
    box-shadow: 0 0 12px 2px var(--accent-color, #7c3aed);
    opacity: 0;
    pointer-events: none;
}

.filevision-card[data-fv-mode="pending"] .fv-scan {
    opacity: 0.9;
    animation: fvScan 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes fvScan {
    0% { transform: translateX(0); opacity: 0; }
    12% { opacity: 0.9; }
    88% { opacity: 0.9; }
    100% { transform: translateX(var(--fv-scan-run, 320px)); opacity: 0; }
}

/* ── who actually looked ───────────────────────────────────────────────────── */
.fv-seen {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px 11px 11px;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    font-size: 12px;
    color: var(--subheading-color, #9aa0aa);
}

.fv-seen-head {
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1.45;
}

.fv-seen-head .material-symbols-rounded {
    font-size: 16px;
    flex: 0 0 auto;
    color: var(--accent-color, #7c3aed);
}

.fv-seen-head strong {
    color: var(--text-color, #e6e6e6);
    font-weight: 600;
}

.fv-seen-blind .fv-seen-head .material-symbols-rounded {
    color: #f0a742;
}

.fv-seen-direct .fv-seen-head .material-symbols-rounded {
    color: #3fb950;
}

/* Waiting on a borrowed pair of eyes. */
.fv-dots {
    display: inline-flex;
    gap: 3px;
    flex: 0 0 auto;
}

.fv-dots i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-color, #7c3aed);
    opacity: 0.3;
    animation: fvDot 1.05s ease-in-out infinite;
}

.fv-dots i:nth-child(2) { animation-delay: 0.16s; }
.fv-dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes fvDot {
    0%, 100% { opacity: 0.25; transform: none; }
    45% { opacity: 1; transform: translateY(-2px); }
}

/* The delegated description, in the borrowed model's own words. */
.fv-desc {
    max-height: 128px;
    overflow-y: auto;
    padding: 8px 10px;
    border-left: 2px solid var(--accent-color, #7c3aed);
    border-radius: 0 8px 8px 0;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-color, #e6e6e6);
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
}

@media (max-width: 560px) {
    .fv-name { max-width: 34%; }
    .fv-meta { display: none; }
    .fv-page { width: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .filevision-card,
    .fv-page,
    .fv-scan,
    .fv-dots i {
        animation: none;
    }

    .fv-page:hover { transform: none; }
}

/* ============================================================================
   askUser — interactive question card (single / multi / text)
   ========================================================================== */
.ask-card {
    margin: 10px 0 6px;
    border: 1px solid var(--border-color, var(--ui-border, rgba(255, 255, 255, 0.1)));
    border-radius: var(--ui-radius-lg, 16px);
    background: var(--overlay-surface, var(--light-dark-background, #1e1f24));
    box-shadow: var(--ui-shadow-md, 0 6px 24px rgba(0, 0, 0, 0.28));
    overflow: hidden;
    animation: askFade 0.2s ease;
}

@keyframes askFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ask-head {
    padding: 14px 16px 10px;
}

.ask-q {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color, #f0f0f2);
    line-height: 1.35;
}

.ask-options {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

.ask-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.05));
    color: var(--text-color, #e6e6e6);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background 0.14s ease;
}

.ask-opt:last-child {
    border-bottom: 0;
}

.ask-opt:hover:not(:disabled) {
    background: var(--accent-soft, rgba(124, 58, 237, 0.12));
}

.ask-opt:disabled {
    cursor: default;
    opacity: 0.65;
}

.ask-opt-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--border-color, rgba(255, 255, 255, 0.18));
    font-size: 12px;
    color: var(--subheading-color, #9aa0aa);
    font-variant-numeric: tabular-nums;
}

.ask-mode-multi .ask-opt-mark {
    border-radius: 6px;
}

.ask-mode-single .ask-opt-mark {
    border-radius: 50%;
}

.ask-opt.selected .ask-opt-mark {
    background: var(--accent-color, #7c3aed);
    border-color: var(--accent-color, #7c3aed);
    color: #fff;
}

.ask-opt.selected .ask-opt-mark::after {
    content: "check";
    font-family: 'Material Symbols Rounded';
}

.ask-mode-multi .ask-opt.selected .ask-opt-mark {
    font-size: 0;
}

.ask-mode-multi .ask-opt.selected .ask-opt-mark::after {
    font-size: 15px;
}

.ask-opt-label {
    flex: 1 1 auto;
}

.ask-opt-go {
    flex: 0 0 auto;
    font-size: 18px;
    opacity: 0;
    color: var(--accent-color, #7c3aed);
    transition: opacity 0.14s ease;
}

.ask-mode-single .ask-opt:hover:not(:disabled) .ask-opt-go {
    opacity: 1;
}

.ask-reply {
    padding: 10px 12px;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

.ask-text {
    width: 100%;
    padding: 10px 12px;
    background: var(--darker-background, rgba(0, 0, 0, 0.22));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    color: var(--text-color, #e6e6e6);
    font-size: 14px;
    outline: none;
}

.ask-text:focus {
    border-color: var(--accent-color, #7c3aed);
}

.ask-text::placeholder {
    color: var(--placeholder-color, #7d828c);
}

.ask-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 12px;
    gap: 10px;
}

.ask-skip {
    background: transparent;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
    color: var(--subheading-color, #b7bcc6);
    padding: 7px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.14s ease;
}

.ask-skip:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
}

.ask-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: var(--accent-color, #7c3aed);
    color: var(--accent-contrast, #fff);
    cursor: pointer;
    transition: filter 0.14s ease, opacity 0.14s ease;
}

.ask-submit:hover:not(:disabled) {
    filter: brightness(1.08);
}

.ask-submit:disabled,
.ask-skip:disabled {
    opacity: 0.5;
    cursor: default;
}

.ask-submit .material-symbols-rounded {
    font-size: 20px;
}

.ask-card.ask-answered,
.ask-card.ask-restored {
    opacity: 0.78;
}

.ask-card.ask-answered .ask-actions,
.ask-card.ask-restored .ask-actions {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   ANTI-HALLUCINATION WARNING BANNER + COMPACTION PROGRESS
   Fixed banner at the top of the viewport, shown when the integrity sentinel
   goes missing from a reply (possible drift). Actions: compact, new chat,
   dismiss. The compaction overlay reports progress while the lower model
   summarizes the conversation.
   ═══════════════════════════════════════════════════════════════════════ */
.halluc-warning {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483200;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-top, 0px));
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg,
            color-mix(in srgb, #d9822b 22%, var(--darker-background, #1b1b20)),
            var(--darker-background, #1b1b20));
    border-bottom: 1px solid rgba(217, 130, 43, 0.45);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.34);
    color: var(--text-color, #eeeae5);
    transform: translateY(-115%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s var(--ui-ease, cubic-bezier(0.22, 0.61, 0.36, 1)), opacity 0.24s ease;
}

.halluc-warning.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.halluc-warning .halluc-ico {
    flex: 0 0 auto;
    font-size: 24px;
    color: #f0a23c;
}

.halluc-warning .halluc-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.halluc-warning .halluc-text strong {
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.halluc-warning .halluc-text span {
    font-size: 12px;
    color: var(--subheading-color, #aaa39b);
    line-height: 1.4;
}

.halluc-warning .halluc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.halluc-warning .halluc-btn {
    height: 32px;
    padding: 0 13px;
    border-radius: 9px;
    border: 1px solid var(--border-color, rgba(245, 238, 230, 0.14));
    background: transparent;
    color: var(--text-color, #eeeae5);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.halluc-warning .halluc-btn:hover {
    background: var(--secondary-hover-color, rgba(245, 238, 230, 0.08));
}

.halluc-warning .halluc-btn:active {
    transform: scale(0.97);
}

.halluc-warning .halluc-btn.primary {
    background: #d9822b;
    border-color: #c9741f;
    color: #1b1200;
}

.halluc-warning .halluc-btn.primary:hover {
    background: #e08f3c;
}

.halluc-warning .halluc-btn.ghost {
    border-color: transparent;
    color: var(--subheading-color, #aaa39b);
}

@media (max-width: 720px) {
    .halluc-warning {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .halluc-warning .halluc-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Compaction progress overlay */
.compact-progress {
    position: fixed;
    inset: 0;
    z-index: 2147483250;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

.compact-progress.show {
    display: flex;
}

.compact-progress .compact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: min(360px, 100%);
    padding: 28px 26px 24px;
    border: 1px solid var(--border-color, rgba(245, 238, 230, 0.1));
    border-radius: var(--ui-radius-lg, 18px);
    background: var(--darker-background, #17191c);
    box-shadow: var(--ui-shadow-lg, 0 24px 70px rgba(0, 0, 0, 0.5));
    text-align: center;
}

.compact-progress .compact-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--border-color, rgba(245, 238, 230, 0.16));
    border-top-color: var(--accent, #b7795c);
    animation: ui-spin 0.7s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
}

.compact-progress .compact-card h3 {
    margin: 2px 0 0;
    font-size: 16px;
    font-weight: 650;
    color: var(--text-color, #eeeae5);
}

.compact-progress .compact-card p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--subheading-color, #aaa39b);
}

/* Beta tag used in the Features settings section */
.stg-beta-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--accent-soft, rgba(183, 121, 92, 0.16));
    color: var(--accent, #b7795c);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Tools window — per-row leading icon + coming-soon placeholders */
.stg-row-text h4 .tool-row-ico {
    font-size: 18px;
    vertical-align: -4px;
    margin-right: 7px;
    color: var(--accent, #b7795c);
}

.tools-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 40px 24px;
    border: 1px dashed var(--border-color, rgba(245, 238, 230, 0.14));
    border-radius: var(--ui-radius-lg, 18px);
    margin: 6px 2px;
}

.tools-coming-soon>.material-symbols-rounded {
    font-size: 34px;
    color: var(--accent, #b7795c);
}

.tools-coming-soon h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    color: var(--text-color, #eeeae5);
}

.tools-coming-soon p {
    margin: 0;
    max-width: 42ch;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--subheading-color, #aaa39b);
}

/* ═══════════════════════════════════════════════════════════════════════
   TOGGLE SWITCH — FINAL, AUTHORITATIVE (fixes the broken/oversized handle)
   Earlier definitions in style.css move the handle with transform:translateX
   while the override relies on flex centering — the two collide and the knob
   renders off-centre / oversized. This self-contained block supersedes them:
   a border-box pill with an absolutely-positioned knob centred via translateY
   and moved with `left`, so nothing conflicts.
   ═══════════════════════════════════════════════════════════════════════ */
.toggle-container {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

.toggle-container .toggle-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.toggle-container .toggle-input+.toggle-label {
    box-sizing: border-box !important;
    display: inline-block !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: var(--secondary-hover-color, #3a3733) !important;
    border: 1px solid var(--border-color, rgba(245, 238, 230, 0.16)) !important;
    cursor: pointer !important;
    overflow: visible !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    transform: none !important;
}



.toggle-container .toggle-label .toggle-slider {
    box-sizing: border-box !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
}

.toggle-container .toggle-slider::before,
.toggle-container .toggle-slider::after,
.toggle-container .toggle-handle::before,
.toggle-container .toggle-handle::after {
    content: none !important;
    display: none !important;
}

.toggle-container .toggle-label .toggle-handle {
    box-sizing: border-box !important;
    position: absolute !important;
    top: 50% !important;
    left: 3px !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-50%) !important;
    transition: left 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease !important;
    z-index: 1 !important;
}

.toggle-container .toggle-input:checked+.toggle-label {
    background: var(--accent, #b7795c) !important;
    border-color: var(--accent, #b7795c) !important;
}

.toggle-container .toggle-input:checked+.toggle-label .toggle-handle {
    left: calc(100% - 23px) !important;
    transform: translateY(-50%) !important;
}

.toggle-container .toggle-input:disabled+.toggle-label {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

.toggle-container .toggle-input:focus-visible+.toggle-label {
    outline: 0 !important;
    box-shadow: 0 0 0 3px var(--accent-ring, rgba(183, 121, 92, 0.32)) !important;
}

/* Personalisation panel — stacked rows with full-width textareas */
.stg-row.stg-row-stack {
    display: block !important;
}

.stg-row.stg-row-stack .stg-row-text {
    width: 100% !important;
    margin-bottom: 8px;
}

.pers-textarea {
    width: 100% !important;
    box-sizing: border-box;
    min-height: 74px;
    resize: vertical;
    line-height: 1.5;
    font: inherit;
    padding: 10px 12px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   21. AI REPLY ACTION BAR  (concise, Claude/ChatGPT-style + animated)
   Small, quiet icon buttons under each reply: copy · read-aloud · regenerate
   · rate. They stay faint until you hover the reply (and are always shown on
   the newest reply). Regenerate appears only on the newest reply.
   ═══════════════════════════════════════════════════════════════════════ */
.chat-list .message.incoming .message-actions {
    display: flex !important;
    align-items: center;
    gap: 1px !important;
    margin-top: 6px !important;
    margin-left: -6px !important;
    opacity: 0;
    transform: translateY(1px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

/* Hidden while streaming/loading — not accessible yet */
.chat-list .message.incoming.loading .message-actions {
    display: none !important;
    pointer-events: none !important;
}

/* Hidden permanently when the bubble contains an error card, or when a
   streamed server error (quota / access denied) marked the turn as errored. */
.chat-list .message.incoming:has(.ai-error-card) .message-actions,
.chat-list .message.incoming.stream-errored .message-actions {
    display: none !important;
    pointer-events: none !important;
}

/* Reveal on hover of the reply, and always on the newest reply. */
.chat-list .message.incoming:hover .message-actions,
.chat-list .message.incoming.is-last-ai .message-actions,
.chat-list .message.incoming .message-actions:focus-within {
    opacity: 1;
    transform: translateY(0);
}

.ai-act-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--subheading-color, #98a2b3);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s var(--ui-ease), color 0.15s var(--ui-ease), transform 0.12s var(--ui-ease);
}

.ai-act-btn .material-symbols-rounded {
    font-size: 18px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
    transition: transform 0.2s var(--ui-ease);
}

.ai-act-btn:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08));
    color: var(--text-color);
}

.ai-act-btn:active {
    transform: scale(0.9);
}

.ai-act-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-ring, rgba(183, 121, 92, 0.4));
}

/* Copy → success tick briefly turns accent-green */
.ai-act-btn.copy-btn .material-symbols-rounded {
    transition: transform 0.2s var(--ui-ease), color 0.15s ease;
}

/* Regenerate: only on the newest reply; icon spins on click */
.chat-list .message.incoming .message-actions .regen-btn {
    display: none;
}

.chat-list .message.incoming.is-last-ai .message-actions .regen-btn {
    display: inline-flex;
}

.ai-act-btn.regen-btn:hover .material-symbols-rounded {
    transform: rotate(-45deg);
}

.ai-act-btn.regen-btn.spinning .material-symbols-rounded {
    animation: ai-regen-spin 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ai-regen-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Rate (thumbs) — accent when active + a little pop */
.ai-act-btn.rate-btn.rated {
    color: var(--accent, #b7795c);
}

.ai-act-btn.rate-btn.rated .material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.ai-act-btn.rate-pop {
    animation: ai-rate-pop 0.32s var(--ui-ease);
}

@keyframes ai-rate-pop {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.28);
    }

    100% {
        transform: scale(1);
    }
}

/* Read-aloud (speak) — loading spinner + playing pulse */
.ai-act-btn.speak-btn.speaking {
    color: var(--accent, #b7795c);
}

.ai-act-btn.speak-btn.speaking .material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
    animation: ai-speak-pulse 1.4s ease-in-out infinite;
}

@keyframes ai-speak-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.62;
        transform: scale(0.9);
    }
}

.ai-act-btn.speak-btn.speak-loading {
    pointer-events: none;
}

.ai-act-btn.speak-btn.speak-loading .material-symbols-rounded {
    opacity: 0;
}

.ai-act-btn.speak-btn.speak-loading::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid var(--border-color, rgba(255, 255, 255, 0.2));
    border-top-color: var(--accent, #b7795c);
    animation: ui-spin 0.65s linear infinite;
}

.ai-act-btn.speak-btn {
    position: relative;
}

/* Touch devices: no hover, so keep the bar visible on every reply. */
@media (hover: none),
(max-width: 999px) {
    .chat-list .message.incoming .message-actions {
        opacity: 1;
        transform: none;
    }
}

/* Tighten the user (outgoing) action buttons to the same concise scale. */
.outgoing-actions .msg-act-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    transition: background 0.15s var(--ui-ease), color 0.15s var(--ui-ease), transform 0.12s var(--ui-ease);
}

.outgoing-actions .msg-act-btn:active {
    transform: scale(0.9);
}

.outgoing-actions .msg-act-btn .material-symbols-rounded {
    font-size: 17px;
}

/* Breathing room under the FINAL reply so its action bar isn't cramped against
   the composer / input bar (ChatGPT/Claude keep a comfortable gap here). */
.chat-list .message.incoming.is-last-ai .message-actions {
    margin-bottom: 22px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   21b. MESSAGE EDIT VERSIONS  (ChatGPT/Claude-style "< n/N >" switcher)
   Shown on a user bubble that has been edited at least once. Lets the user
   page between the prompt+reply snapshots that were captured on each edit.
   ═══════════════════════════════════════════════════════════════════════ */
.msg-version-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
    font-size: 12px;
    color: var(--subheading-color, #98a2b3);
    user-select: none;
    vertical-align: middle;
}

.msg-version-nav .msg-ver-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s var(--ui-ease), color 0.15s var(--ui-ease), transform 0.12s var(--ui-ease);
}

.msg-version-nav .msg-ver-btn .material-symbols-rounded {
    font-size: 16px;
    line-height: 1;
}

.msg-version-nav .msg-ver-btn:hover:not(:disabled) {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08));
    color: var(--text-color);
}

.msg-version-nav .msg-ver-btn:active:not(:disabled) {
    transform: scale(0.88);
}

.msg-version-nav .msg-ver-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.msg-version-nav .msg-ver-count {
    min-width: 26px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Sent-time label beside the message actions (Claude-style, e.g. "Jul 18"). */
.outgoing-actions .msg-time {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    font-size: 11.5px;
    line-height: 1;
    color: var(--subheading-color, #98a2b3);
    white-space: nowrap;
    user-select: none;
    opacity: 0.85;
}


/* ═══════════════════════════════════════════════════════════════════════
   22. VOICE INPUT — in-composer recording bar + live meter + confirm/cancel
   The mic click turns the composer into a "Listening…" bar with a real-time
   waveform and two controls. Overlays the input-wrapper; floats for other mics.
   ═══════════════════════════════════════════════════════════════════════ */
.typing-form .input-wrapper {
    position: relative;
}

.stt-recording-bar {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 0 16px;
    border-radius: inherit;
    background: var(--secondary-color, #2a2927);
    animation: stt-bar-in 0.18s var(--ui-ease);
}

@keyframes stt-bar-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.stt-recording-bar.stt-floating {
    position: fixed;
    left: 50%;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    inset: auto;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 32px));
    height: 60px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: 16px;
    box-shadow: var(--ui-shadow-lg, 0 24px 70px rgba(0, 0, 0, 0.5));
    z-index: 2147483000;
}

.stt-rec-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
    animation: stt-rec-pulse 1.4s ease-out infinite;
}

@keyframes stt-rec-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
        opacity: 1;
    }

    70% {
        box-shadow: 0 0 0 7px rgba(239, 68, 68, 0);
        opacity: 0.85;
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
        opacity: 1;
    }
}

.stt-rec-status {
    flex: 0 0 auto;
    font-size: 13.5px;
    font-weight: 550;
    color: var(--text-color);
    white-space: nowrap;
}

.stt-rec-wave {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    display: block;
}

.stt-rec-timer {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--subheading-color, #98a2b3);
    min-width: 34px;
    text-align: right;
}

.stt-rec-btn {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: none;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.stt-rec-btn .material-symbols-rounded {
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.stt-rec-btn:active {
    transform: scale(0.92) !important;
}

.stt-rec-cancel {
    background: var(--secondary-color, rgba(255, 255, 255, 0.08)) !important;
    color: var(--subheading-color, #9aa0a6) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important;
}

.stt-rec-cancel:hover {
    background: rgba(239, 68, 68, 0.16) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    transform: scale(1.06) !important;
}

.stt-rec-confirm {
    background: var(--accent, #7c3aed) !important;
    color: var(--accent-contrast, #ffffff) !important;
    border: 1px solid var(--accent, #7c3aed) !important;
    box-shadow: 0 2px 10px var(--accent-ring, rgba(124, 58, 237, 0.35)) !important;
}

.stt-rec-confirm:hover {
    background: var(--accent-strong, #6d28d9) !important;
    border-color: var(--accent-strong, #6d28d9) !important;
    box-shadow: 0 4px 14px var(--accent-ring, rgba(124, 58, 237, 0.45)) !important;
    transform: scale(1.06) !important;
}

/* Transcribing state — dim the meter, spin the confirm button */
.stt-recording-bar.stt-busy .stt-rec-wave {
    opacity: 0.4;
}

.stt-recording-bar.stt-busy .stt-rec-confirm {
    color: transparent;
    pointer-events: none;
}

.stt-recording-bar.stt-busy .stt-rec-confirm::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    animation: ui-spin 0.65s linear infinite;
}

.stt-recording-bar.stt-busy .stt-rec-confirm {
    position: relative;
}


@media (max-width: 600px) {
    .stt-rec-status {
        font-size: 12.5px;
    }

    .stt-recording-bar {
        gap: 8px;
        padding: 0 8px 0 12px;
    }

    .stt-rec-btn {
        width: 32px;
        height: 32px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   22-B. MIC BUTTON — now lives in .input-actions-right (right of input)
   Visibility is controlled by the .mic-input-group in FINAL FIXES below.
   ═══════════════════════════════════════════════════════════════════════ */

/* Recording / transcribing icon colour feedback */
#mic-input-button.stt-recording .tools-icon {
    color: #ef4444;
}

#mic-input-button.stt-transcribing .tools-icon {
    color: var(--accent, #b7795c);
}

/* On desktop: the "Hold to record" toggle is not needed — CSS backstop */
@media (hover: hover) and (pointer: fine) {
    .mic-menu-toggle {
        display: none !important;
    }
}


.mic-input-group {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.mic-caret-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--subheading-color, #98a2b3);
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    /* Starts collapsed; slides rightward into view on hover */
    transform: translateX(-6px);
    border-radius: 8px;
    transition: width 0.22s var(--ui-ease), opacity 0.18s ease, transform 0.22s var(--ui-ease), background 0.15s ease;
}

.mic-caret-btn .material-symbols-rounded {
    font-size: 18px;
}

/* Slide caret out to the RIGHT of the mic button on hover */
.mic-input-group:hover .mic-caret-btn,
.mic-input-group:focus-within .mic-caret-btn,
.mic-input-group.mic-menu-open .mic-caret-btn {
    width: 22px;
    margin-left: 2px;
    /* small gap to the right of the mic */
    opacity: 1;
    transform: translateX(0);
}

.mic-caret-btn:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08));
    color: var(--text-color);
}

.mic-input-group.mic-menu-open .mic-caret-btn .material-symbols-rounded {
    transform: rotate(180deg);
}

.mic-options-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    z-index: 100060;
    min-width: 250px;
    max-width: 300px;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    background: var(--darker-background, #1b1b20);
    box-shadow: var(--ui-shadow-lg, 0 24px 70px rgba(0, 0, 0, 0.5));
    opacity: 0;
    transform: translateY(6px) scale(0.97);
    transform-origin: bottom left;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.16s var(--ui-ease);
}

.mic-input-group.mic-menu-open .mic-options-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.mic-menu-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 6px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--subheading-color, #98a2b3);
}

.mic-menu-head .material-symbols-rounded {
    font-size: 16px;
}

.mic-menu-item,
.mic-menu-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text-color);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.13s ease;
}

.mic-menu-item:hover,
.mic-menu-toggle:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08));
}

.mic-menu-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mic-menu-check {
    font-size: 18px;
    color: var(--accent, #b7795c);
    opacity: 0;
    flex-shrink: 0;
}

.mic-menu-item.selected .mic-menu-check {
    opacity: 1;
}

.mic-menu-item.selected .mic-menu-label {
    font-weight: 600;
}

.mic-menu-sep {
    height: 1px;
    margin: 5px 6px;
    background: var(--border-color, rgba(255, 255, 255, 0.1));
}

.mic-menu-toggle .material-symbols-rounded {
    font-size: 18px;
    color: var(--subheading-color, #98a2b3);
    flex-shrink: 0;
}

.mic-menu-switch {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.16));
    transition: background 0.18s var(--ui-ease);
}

.mic-menu-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform 0.18s var(--ui-ease);
}

.mic-menu-toggle.on .mic-menu-switch {
    background: var(--accent, #b7795c);
}

.mic-menu-toggle.on .mic-menu-knob {
    transform: translateX(16px);
}

.mic-menu-loading,
.mic-menu-empty,
.mic-menu-hint {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--subheading-color, #98a2b3);
}

.mic-menu-hint {
    font-size: 11px;
    opacity: 0.85;
    line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {

    .stt-rec-dot,
    .ai-act-btn.speak-btn.speaking .material-symbols-rounded {
        animation: none !important;
    }

    .mic-caret-btn {
        transition: opacity 0.15s ease;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   FINAL FIXES — overrides applied last so they win over all prior rules
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Delete-chat wrapper — hidden until JS adds .chat-active class. */
#delete-chat-wrapper {
    display: none !important;
    pointer-events: none !important;
}

#delete-chat-wrapper.chat-active {
    display: flex !important;
    pointer-events: auto !important;
}

/* 2. Mobile/Touch backstop — mic options caret & dropdown disabled on mobile */
@media (max-width: 768px),
(hover: none),
(pointer: coarse) {

    .mic-caret-btn,
    .mic-options-menu {
        display: none !important;
        pointer-events: none !important;
    }
}

/* 3. ChatGPT / Claude style Input Wrapper & Textarea */
.typing-form .input-wrapper {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--secondary-color, #21201d) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.typing-form .input-wrapper:focus-within {
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

.typing-form .typing-input {
    width: 100% !important;
    min-height: 52px !important;
    max-height: 200px !important;
    padding: 14px 16px 6px 16px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: var(--text-color) !important;
    resize: none !important;
}

.input-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px 8px 6px 8px !important;
    box-sizing: border-box !important;
}

.input-actions-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: relative !important;
    flex-shrink: 0 !important;
    height: 36px !important;
}

/* 4. Uniform button dimensions — eliminates all vertical/horizontal height drops */
.input-tools-left .tool-btn,
.input-actions-right .action-btn,
.input-actions-right #mic-input-button,
.input-actions-right .mic-input-group #mic-input-button,
.input-actions-right #send-message-button,
.input-actions-right #stop-stream-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

/* State 1: Idle (no text, not streaming) -> Mic visible, Send & Stop hidden */
.typing-area:not(.has-text):not(.is-streaming) .input-actions-right .mic-input-group,
.typing-area:not(.has-text):not(.is-streaming) .input-actions-right #mic-input-button {
    display: inline-flex !important;
}

.typing-area:not(.has-text):not(.is-streaming) .input-actions-right #send-message-button,
.typing-area:not(.has-text):not(.is-streaming) .input-actions-right #stop-stream-button {
    display: none !important;
}

/* State 2: Typing (has text, not streaming) -> Send visible, Mic & Stop hidden */
.typing-area.has-text:not(.is-streaming) .input-actions-right #send-message-button {
    display: flex !important;
    transform: scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.typing-area.has-text:not(.is-streaming) .input-actions-right .mic-input-group,
.typing-area.has-text:not(.is-streaming) .input-actions-right #mic-input-button,
.typing-area.has-text:not(.is-streaming) .input-actions-right #stop-stream-button {
    display: none !important;
}

/* State 3: Streaming -> Stop visible, Mic & Send hidden */
.typing-area.is-streaming .input-actions-right #stop-stream-button {
    display: flex !important;
    transform: scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.typing-area.is-streaming .input-actions-right .mic-input-group,
.typing-area.is-streaming .input-actions-right #mic-input-button,
.typing-area.is-streaming .input-actions-right #send-message-button {
    display: none !important;
}

/* 5. Mic group & stationary button positioning */
.input-actions-right .mic-input-group {
    position: relative !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Invisible gapless hover bridge extending to the left */
.input-actions-right .mic-input-group::before {
    content: "" !important;
    position: absolute !important;
    top: -6px !important;
    bottom: -6px !important;
    right: 0 !important;
    left: -36px !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    display: none;
}

.input-actions-right .mic-input-group:hover::before,
.input-actions-right .mic-input-group:focus-within::before,
.input-actions-right .mic-input-group.mic-menu-open::before {
    display: block !important;
}

.input-actions-right #mic-input-button,
.input-actions-right .mic-input-group #mic-input-button {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
    border: none !important;
    color: var(--subheading-color, #98a2b3) !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transform: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.input-actions-right #mic-input-button .tools-icon,
.input-actions-right .mic-input-group #mic-input-button .tools-icon {
    font-size: 20px !important;
}

.input-actions-right #mic-input-button:hover,
.input-actions-right .mic-input-group #mic-input-button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-color) !important;
}

/* Caret button: attached to the LEFT of mic button without gaps.
   Expands to the left on hover seamlessly. */
.input-actions-right .mic-caret-btn {
    position: absolute !important;
    right: 100% !important;
    top: 50% !important;
    z-index: 3 !important;
    transform: translateY(-50%) translateX(4px) !important;
    width: 0 !important;
    height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--subheading-color, #98a2b3) !important;
    cursor: pointer !important;
    overflow: hidden !important;
    opacity: 0 !important;
    border-radius: 8px !important;
    pointer-events: none !important;
    transition: width 0.18s cubic-bezier(0.2, 0.9, 0.2, 1),
        opacity 0.15s ease,
        transform 0.18s cubic-bezier(0.2, 0.9, 0.2, 1),
        background-color 0.15s ease !important;
}

.input-actions-right .mic-caret-btn .material-symbols-rounded {
    font-size: 18px !important;
}

.input-actions-right .mic-input-group:hover .mic-caret-btn,
.input-actions-right .mic-input-group:focus-within .mic-caret-btn,
.input-actions-right .mic-input-group.mic-menu-open .mic-caret-btn {
    width: 22px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(-50%) translateX(0) !important;
}

.input-actions-right .mic-caret-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--text-color) !important;
}

/* Dropdown menu opens to top-right of the mic button */
.input-actions-right .mic-options-menu {
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    transform-origin: bottom right !important;
}

/* ── Reusable browser-login session prompts ─────────────────────────────── */
.session-save-card {
    margin: 10px auto;
    max-width: 640px;
    width: calc(100% - 24px);
    border: 1px solid var(--accent-ring, rgba(124, 58, 237, 0.25)) !important;
    border-radius: 14px !important;
    background: var(--card-bg, rgba(255, 255, 255, 0.03)) !important;
    padding: 14px 16px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(12px) !important;
}

.session-save-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.session-save-body .material-symbols-rounded {
    font-size: 24px !important;
    color: var(--accent, #7c3aed) !important;
    flex: 0 0 auto;
    margin-top: 2px;
}

.session-save-text b {
    display: block;
    font-size: 14.5px;
    margin-bottom: 3px;
    color: var(--text-color, #fff);
}

.session-save-text p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--subheading-color, #9aa0a6);
}

.session-save-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.session-save-actions button {
    height: 32px !important;
    border-radius: 8px !important;
    padding: 0 16px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.session-save-no {
    background: transparent !important;
    color: var(--subheading-color, #9aa0a6) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important;
}

.session-save-no:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-color, #fff) !important;
}

.session-save-yes {
    background: var(--accent, #7c3aed) !important;
    color: #fff !important;
    border: 1px solid var(--accent, #7c3aed) !important;
    box-shadow: 0 2px 8px var(--accent-ring, rgba(124, 58, 237, 0.3)) !important;
}

.session-save-yes:hover {
    background: var(--accent-strong, #6d28d9) !important;
    box-shadow: 0 4px 14px var(--accent-ring, rgba(124, 58, 237, 0.4)) !important;
    transform: translateY(-1px) !important;
}

.session-save-yes:disabled {
    opacity: 0.6 !important;
    cursor: default !important;
    transform: none !important;
}

/* ── Tools → Sessions panel list ────────────────────────────────────────── */
.session-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.session-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 12px !important;
    background: var(--card-bg, rgba(255, 255, 255, 0.025)) !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}

.session-item:hover {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

.session-item-ico .material-symbols-rounded {
    font-size: 20px !important;
    color: var(--accent, #7c3aed) !important;
    background: var(--accent-soft, rgba(124, 58, 237, 0.12)) !important;
    padding: 8px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.session-item-main {
    flex: 1 1 auto;
    min-width: 0;
}

.session-item-title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--text-color, #fff) !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.session-item-sub {
    font-size: 11.5px !important;
    color: var(--subheading-color, #9aa0a6) !important;
    margin-top: 2px;
}

.session-badge {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px !important;
    border-radius: 999px !important;
}

.session-badge.ok {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.25) !important;
}

.session-badge.off {
    background: rgba(239, 68, 68, 0.14) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

.session-item-actions {
    display: flex;
    align-items: center;
    gap: 8px !important;
    flex: 0 0 auto;
}

.session-item-actions button.session-use-btn,
.session-use-btn {
    height: 32px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--accent-ring, rgba(124, 58, 237, 0.35)) !important;
    background: var(--accent-soft, rgba(124, 58, 237, 0.15)) !important;
    color: var(--accent, #a78bfa) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    transition: all 0.15s ease !important;
}

.session-item-actions button.session-use-btn:hover,
.session-use-btn:hover {
    background: var(--accent, #7c3aed) !important;
    color: #ffffff !important;
    border-color: var(--accent, #7c3aed) !important;
    box-shadow: 0 3px 10px var(--accent-ring, rgba(124, 58, 237, 0.35)) !important;
    transform: translateY(-1px) !important;
}

.session-item-actions button.session-del-btn,
.session-del-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--subheading-color, #9aa0a6) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}

.session-item-actions button.session-del-btn:hover,
.session-del-btn:hover {
    color: #f87171 !important;
    background: rgba(239, 68, 68, 0.14) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

.session-del-btn .material-symbols-rounded {
    font-size: 18px !important;
    margin: 0 !important;
}

/* ── Full-width Markdown Tables in Chat Stream ──────────────────────────── */
.message-content .text table,
.message .text table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 1em 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 0.92em !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: table !important;
    table-layout: auto !important;
    background: var(--card-bg, rgba(255, 255, 255, 0.025)) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
}

.message-content .text thead th,
.message .text thead th {
    background: var(--light-dark-background, rgba(255, 255, 255, 0.06)) !important;
    color: var(--text-color, #fff) !important;
    font-weight: 650 !important;
    font-size: 0.92em !important;
    letter-spacing: 0.02em !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.message-content .text th,
.message-content .text td,
.message .text th,
.message .text td {
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.06)) !important;
    border-right: 1px solid var(--border-color, rgba(255, 255, 255, 0.04)) !important;
    vertical-align: middle !important;
    line-height: 1.5 !important;
}

.message-content .text th:last-child,
.message-content .text td:last-child,
.message .text th:last-child,
.message .text td:last-child {
    border-right: none !important;
}

.message-content .text tbody tr:last-child td,
.message .text tbody tr:last-child td {
    border-bottom: none !important;
}

/* ── External Link Confirmation Modal & Hover Popover (ChatGPT Parity) ─────── */
.chat-list .message.incoming a[href],
.message-content a[href],
.text a[href] {
    color: var(--accent, #a78bfa) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-color: rgba(167, 139, 250, 0.4) !important;
    transition: text-decoration-color 0.15s ease, color 0.15s ease !important;
    cursor: pointer !important;
}

.chat-list .message.incoming a[href]:hover,
.message-content a[href]:hover,
.text a[href]:hover {
    color: var(--accent, #c4b5fd) !important;
    text-decoration-color: var(--accent, #a78bfa) !important;
}

/* Floating Link Hover Popover */
.link-hover-popover {
    position: fixed;
    z-index: 2147483640;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    max-width: min(440px, calc(100vw - 24px));
    background: var(--darker-background, #1e1e22);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.link-hover-popover.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.link-hover-icon {
    font-size: 18px !important;
    color: var(--subheading-color, #9aa0a6);
    flex-shrink: 0;
}

.link-hover-url {
    font-size: 12.5px;
    font-family: var(--font-mono, monospace), sans-serif;
    color: var(--text-color, #ffffff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

.link-hover-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--subheading-color, #9aa0a6);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.link-hover-copy-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-color, #ffffff);
}

.link-hover-copy-btn .material-symbols-rounded {
    font-size: 16px !important;
}

/* External Site Modal Backdrop & Dialog */
.ext-link-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.ext-link-modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.ext-link-modal {
    width: 100%;
    max-width: 440px;
    background: var(--darker-background, #1b1b1f);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    padding: 20px 22px;
    transform: scale(0.96) translateY(8px);
    transition: transform 0.2s var(--ui-ease, cubic-bezier(0.2, 0.9, 0.2, 1));
}

.ext-link-modal-backdrop.open .ext-link-modal {
    transform: scale(1) translateY(0);
}

.ext-link-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ext-link-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-color, #ffffff);
}

.ext-link-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--subheading-color, #9aa0a6);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ext-link-close-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-color, #ffffff);
}

.ext-link-close-btn .material-symbols-rounded {
    font-size: 20px !important;
}

.ext-link-sub {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--subheading-color, #9aa0a6);
    margin: 0 0 14px;
}

.ext-link-url-box {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 20px;
    word-break: break-all;
}

.ext-link-full-url {
    font-family: var(--font-mono, monospace), sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--subheading-color, #9aa0a6);
}

.ext-link-full-url b {
    color: var(--text-color, #ffffff);
    font-weight: 600;
}

.ext-link-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.ext-link-btn {
    height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.ext-link-copy-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-color, #ffffff);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
}

.ext-link-copy-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
}

.ext-link-open-btn {
    background: #ffffff;
    color: #000000;
    border: none;
}

.ext-link-open-btn:hover {
    background: #e2e2e8;
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.ext-link-btn:active {
    transform: scale(0.97);
}

.message-content .text tbody tr:nth-child(even) td,
.message .text tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.018) !important;
}

.message-content .text tbody tr:hover td,
.message .text tbody tr:hover td {
    background: var(--accent-soft, rgba(124, 58, 237, 0.08)) !important;
}

/* ── Characters Window Empty State ───────────────────────────────────────── */
.sc-empty-char-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 44px 20px;
    width: 100%;
    box-sizing: border-box;
}

.sc-empty-char-icon {
    font-size: 48px !important;
    color: var(--subheading-color, #7d828c);
    margin-bottom: 12px;
    opacity: 0.7;
}

.sc-empty-char-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color, #ffffff);
    margin: 0 0 6px 0;
}

.sc-empty-char-sub {
    font-size: 13px;
    color: var(--subheading-color, #aaa39b);
    margin: 0;
    max-width: 280px;
    line-height: 1.45;
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — WhatsApp-style press-and-hold dictation
   Press the mic to record (it pops out into a floating bubble), slide left
   to cancel, release to send. Desktop keeps the click-to-toggle bar and is
   unaffected (these rules only apply to phones / coarse-pointer devices).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px),
(hover: none) and (pointer: coarse) {

    /* Let the press-drag gesture own the touch (no page scroll / long-press) */
    #mic-input-button {
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* The mic lifts the instant it's pressed, before the bar slides in */
    #mic-input-button.stt-mobile-recording {
        transform: scale(1.18) !important;
        color: var(--accent, #7c3aed) !important;
        transition: transform 0.12s var(--ui-ease), color 0.12s ease !important;
    }

    /* The composer is a tall flex column (textarea + a 44px actions row at the
       bottom holding the mic). Make the recording bar a column that pins its
       content row to the bottom, so the timer + "slide to cancel" hint sit ON
       the mic's row — and the dot + timer stay aligned with each other. */
    .stt-hold-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .stt-hold-row {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: 44px;
        box-sizing: border-box;
        padding: 0 66px 0 14px;
    }

    .stt-hold-bar .stt-rec-dot {
        width: 10px;
        height: 10px;
    }

    .stt-hold-bar .stt-rec-timer {
        min-width: 42px;
        text-align: left;
        font-weight: 600;
        color: var(--text-color);
    }

    .stt-hold-bar .stt-rec-status {
        display: none;
    }

    .stt-hold-bar.stt-busy .stt-rec-status {
        display: inline;
        margin-left: 6px;
        font-size: 13px;
        font-weight: 600;
        color: var(--accent, #7c3aed);
    }

    .stt-hold-bar .stt-hold-cancel-hint {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 1px;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 500;
        color: var(--subheading-color, #98a2b3);
        animation: stt-hint-nudge 1.4s ease-in-out infinite;
        transition: opacity 0.12s ease, color 0.15s ease;
    }

    .stt-hold-bar.stt-busy .stt-hold-cancel-hint {
        display: none;
    }

    .stt-hold-bar .stt-hold-cancel-hint .material-symbols-rounded {
        font-size: 18px;
    }

    .stt-hold-bar.cancel-armed {
        background: rgba(239, 68, 68, 0.16) !important;
    }

    .stt-hold-bar.cancel-armed .stt-hold-cancel-hint {
        color: #f87171;
        opacity: 1 !important;
        animation: none;
    }

    @keyframes stt-hint-nudge {

        0%,
        100% {
            transform: translateX(0);
            opacity: 0.7;
        }

        50% {
            transform: translateX(-5px);
            opacity: 1;
        }
    }

    /* Floating mic bubble — outer node carries the slide (translateX from JS),
       inner node the pop-in + pulsing ring, so the two never fight. */
    .stt-hold-mic {
        position: absolute;
        width: 54px;
        height: 54px;
        z-index: 8;
        pointer-events: none;
        transition: transform 0.05s linear;
    }

    .stt-hold-mic-inner {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--accent, #7c3aed);
        color: #fff;
        box-shadow: 0 8px 26px var(--accent-ring, rgba(124, 58, 237, 0.5));
        animation: stt-mic-pop 0.18s var(--ui-ease) both,
            stt-mic-pulse 1.5s ease-out 0.2s infinite;
        transition: background 0.15s ease, box-shadow 0.15s ease;
    }

    .stt-hold-mic-inner .material-symbols-rounded {
        font-size: 26px;
    }

    .stt-hold-mic.cancel-armed .stt-hold-mic-inner {
        background: #ef4444;
        box-shadow: 0 8px 26px rgba(239, 68, 68, 0.5);
        animation: stt-mic-pop 0.14s var(--ui-ease) both;
    }

    @keyframes stt-mic-pop {
        from {
            transform: scale(0.4);
            opacity: 0.3;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes stt-mic-pulse {
        0% {
            box-shadow: 0 8px 26px var(--accent-ring, rgba(124, 58, 237, 0.5)), 0 0 0 0 rgba(124, 58, 237, 0.45);
        }

        70% {
            box-shadow: 0 8px 26px var(--accent-ring, rgba(124, 58, 237, 0.5)), 0 0 0 18px rgba(124, 58, 237, 0);
        }

        100% {
            box-shadow: 0 8px 26px var(--accent-ring, rgba(124, 58, 237, 0.5)), 0 0 0 0 rgba(124, 58, 237, 0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .stt-hold-mic-inner {
            animation: stt-mic-pop 0.18s ease both;
        }

        .stt-hold-bar .stt-hold-cancel-hint {
            animation: none;
        }

        #mic-input-button.stt-mobile-recording {
            transition: none !important;
        }
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   NATIVE CONTROL THEMING + ICON FONT INTEGRITY (app-wide)
   ──────────────────────────────────────────────────────────────────────────
   Two classes of bug are fixed here, both of them app-wide rather than
   component-local, which is why they live at the end of the polish layer.

   1. THE BLUE PANELS. A dark page that never declares `color-scheme` leaves
      the browser assuming a LIGHT document, so every widget the platform
      paints itself — <select> option lists, autofilled inputs, date/time
      pickers, scrollbars, spellcheck menus — comes back in the UA's own light
      or system-blue palette. That is where the navy dropdown panels and the
      blue autofill wash came from; no stylesheet declared them, the browser
      did. Declaring the scheme (and pinning the few properties those widgets
      actually honour) puts them on the product surface. The code workspace had
      this fix scoped to `.dcode` only, so everything else still went blue.

   2. THE LITERAL ICON NAMES. Material Symbols renders via LIGATURES: the
      element's text really is "more_horiz", and the font substitutes a glyph.
      If the icon font is not the resolved family for that element, the raw word
      paints instead. Component resets like `button { font-family: inherit }`
      out-specify Google's `.material-symbols-rounded` class (a type+class
      selector beats a lone class), so any element that is BOTH the control and
      the icon silently lost its glyph. Re-asserting the family wins that back
      everywhere, and `display=block` on the font request (see index.html) stops
      the same word flashing during the font swap period.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    color-scheme: dark;
}

body.light_mode,
.light_mode {
    color-scheme: light;
}

/* Closed control + the platform-drawn option list. `background-color`, `color`
   and (on the list) `option`/`optgroup` are the only properties the native
   popup reliably honours — everything else there is out of CSS's reach. */
select,
option,
optgroup {
    color: var(--text-color, #e3e3e3);
}

select {
    background-color: var(--light-dark-background, #292929);
    accent-color: var(--accent, #b7795c);
}

option,
optgroup {
    background-color: var(--light-dark-background, #292929);
}

option:checked,
option[selected] {
    /* Accent as a TINT, not as the text colour: the selected row still reads as
       selected, but the label keeps full body-text contrast against it. */
    background-color: var(--accent-soft, rgba(183, 121, 92, .18));
    color: var(--text-color, #e3e3e3);
    font-weight: 600;
}

/* Autofill. Chrome hard-codes a pale blue field background and near-black text
   via an internal style that ordinary `background` cannot reach; an inset
   box-shadow the size of the field is the standard way to repaint it, and the
   absurd transition delay keeps it repainted (the UA re-applies its own colour
   on a short timer). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--text-color, #e3e3e3);
    caret-color: var(--text-color, #e3e3e3);
    -webkit-box-shadow: 0 0 0 1000px var(--light-dark-background, #292929) inset;
    box-shadow: 0 0 0 1000px var(--light-dark-background, #292929) inset;
    transition: background-color 6000000s 0s, color 6000000s 0s;
}

/* Checkboxes, radios, ranges and progress bars tint from `accent-color`; left
   alone they use the OS highlight, which is the same system blue. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--accent, #b7795c);
}

/* The UA search-clear affordance is a light-mode glyph and does not respect the
   surrounding theme, so it is removed in favour of each component's own control. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* ── icon font integrity ─────────────────────────────────────────────────── */
.material-symbols-rounded,
button.material-symbols-rounded,
a.material-symbols-rounded,
span.material-symbols-rounded,
.material-icons,
button.material-icons {
    font-family: 'Material Symbols Rounded', 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    /* A ligature name is a long word. Should the font ever fail to load
       outright, this keeps the fallback text from reflowing the layout around
       it instead of spilling across neighbouring controls. */
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE LANDING — greeting that fits, composer docked at the bottom
   Two separate bugs shared one screen:
     1. The typed greeting never wrapped, so on a phone it overflowed both
        edges of the viewport and was clipped mid-word.
     2. `body.new-chat-view` lifts the composer 40vh to centre it. That is a
        nice desktop landing, but on a phone it leaves the input floating in
        the middle of the screen, jumps when the keyboard opens, and pushes
        the greeting under the composer card.
   ═══════════════════════════════════════════════════════════════════════ */

/* `.header .title` is width:fit-content and `.greet-typed` is white-space:pre,
   so the heading was sized to the full unwrapped sentence and then centred in a
   100%-wide flex row — overflowing symmetrically and getting cut off by
   `.header { overflow-x: hidden }`. Make it a wrapping, viewport-bounded block. */
.header .title.delphos-greet {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0 auto !important;
    text-align: center;
    font-size: clamp(1.35rem, 6vw, 2.1rem) !important;
    line-height: 1.28 !important;
    min-height: 1.28em;
}

/* pre-wrap, not pre: the typewriter emits real spaces that must survive, but
   the line still has to be allowed to break. */
.delphos-greet .greet-typed {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The caret is now an inline sibling of wrapped text rather than a flex item,
   so it needs its own optical alignment. */
.delphos-greet .greet-caret {
    vertical-align: -0.14em;
}

/* The container carries an inline width:100%, so its gutter has to live inside
   that width. */
.header-title-con {
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
}

@media screen and (max-width: 768px) {

    /* Phones only: the composer stays where the thumb already is. */
    body.new-chat-view .typing-area {
        transform: none;
    }

    /* With the composer docked, the landing box is everything above it and the
       greeting is centred in that space instead of bottom-anchored to a lifted
       composer. */
    body.new-chat-view .chat-list {
        height: auto !important;
        min-height: calc(100dvh - 168px) !important;
        padding: 0 0 16px !important;
        justify-content: center;
    }

    /* Clear of the home indicator / browser chrome so the composer is not
       half-swallowed by the bottom edge. */
    .typing-area {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS → CAPABILITIES

   Rows here carry more prose than the rest of Settings, on purpose: "load tools
   when needed" and "allow network egress" are decisions with consequences, and a
   four-word label cannot carry the consequence. So the text column is allowed to
   breathe and the row stops being vertically centred — a 34px control centred
   against four lines of explanation floats in the middle of nothing.
   ══════════════════════════════════════════════════════════════════════════ */
.stg-panel-intro {
    margin: 0 2px 14px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--subheading-color, #8a8a8a);
}

.stg-row.stg-row-cap {
    align-items: flex-start;
    gap: 20px;
}

.stg-row.stg-row-cap .stg-row-text {
    padding-right: 4px;
}

.stg-row.stg-row-cap .stg-row-control {
    /* Nudged down to sit on the label's line rather than the row's centre. */
    padding-top: 2px;
}

/* The live explanation of whichever mode is selected. Separate from the row's
   own description because it CHANGES with the dropdown — merging the two would
   mean rewriting the static half every time the selection moves. */
.stg-cap-hint {
    margin: 6px 0 0 !important;
    padding-left: 9px;
    border-left: 2px solid var(--accent-ring, rgba(183, 121, 92, 0.35));
    font-size: 12px !important;
    line-height: 1.5;
    color: var(--subheading-color, #8a8a8a);
}

.stg-cap-select {
    height: 34px;
    min-width: 210px;
    max-width: 240px;
    padding: 0 8px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
    border-radius: 9px;
    background-color: var(--secondary-color, #2a2a2a);
    color: var(--text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.stg-cap-select:hover {
    border-color: var(--accent-ring, rgba(183, 121, 92, 0.4));
}

.stg-cap-select:focus-visible {
    outline: none;
    border-color: var(--accent, #b7795c);
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(183, 121, 92, 0.16));
}

/* ── a dependent capability ───────────────────────────────────────────────
 * Indented and boxed so it reads as belonging to the row above it, which is the
 * only honest way to show "this only matters while that is on". When the parent
 * is off the whole row dims and its control is genuinely disabled, not merely
 * greyed — a toggle that looks unavailable but still flips is worse than either. */
.stg-row.stg-row-nested {
    margin: 4px 0 2px 18px;
    padding: 13px 15px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.09));
    border-radius: 12px;
    background: var(--secondary-color, rgba(255, 255, 255, 0.022));
    width: 100%;
    margin-left: 0;
}

.stg-row.stg-row-nested.is-disabled {
    opacity: 0.5;
}

.stg-row.stg-row-nested.is-disabled .toggle-label {
    cursor: not-allowed;
}

@media (max-width: 720px) {

    /* The dropdown gets the full width once the row stacks: a 240px control
       floating against a left-aligned label looks like a mistake at this size. */
    .stg-row.stg-row-cap {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .stg-row.stg-row-cap .stg-row-control {
        padding-top: 0;
        justify-content: flex-start;
    }

    .stg-cap-select {
        max-width: none;
        width: 100%;
    }

    .stg-row.stg-row-nested {
        margin-left: 10px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   SESSION FILES PANEL — compact, professional file list for the current chat.
   Hidden for custom characters and when no files exist. Previews use signed
   temp URLs. Mobile renders as a bottom sheet.
   ════════════════════════════════════════════════════════════════════════ */
.session-files-wrapper.hidden {
    display: none !important;
}

#session-files-wrapper {
    position: relative;
}

/* No count badge / dot on the button — a clean icon like Claude's artifacts
   opener. The button announces itself by turning blue on focus and while the
   panel is open, not by carrying a number. */
#session-files-wrapper {
    border-radius: 10px;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
#session-files-wrapper:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, .08));
}
/* Blue focus + open state. `:focus-within` covers keyboard focus on the inner
   icon; `body.session-files-open` covers the "panel is showing" state. */
#session-files-wrapper:focus-within,
#session-files-wrapper.is-open,
body.session-files-open #session-files-wrapper {
    color: var(--accent, #b7795c);
    background: var(--accent-soft, rgba(183, 121, 92, .14));
    box-shadow: none;
    outline: 1px solid var(--accent-ring, rgba(183, 121, 92, .4));
    outline-offset: -1px;
}
#session-files-wrapper:focus-within .icon,
#session-files-wrapper.is-open .icon,
body.session-files-open #session-files-wrapper .icon {
    color: var(--accent, #b7795c);
}

/* ────────────────────────────────────────────────────────────────────────────
   Session files — a Claude-style sliding RIGHT SIDEBAR (not a centered modal).
   It slides in from the right edge and, on desktop, gently pushes the chat body
   and composer to the left so the conversation stays fully visible beside it —
   mirroring the Delphos Code/Design canvas panel pattern.
   ──────────────────────────────────────────────────────────────────────────── */
body {
    --sf-sidebar-w: var(--sidebar-rail-width, 56px);
    --sf-panel-w: clamp(360px, 38vw, 500px);
}
body:has(.nav-menu.open) {
    --sf-sidebar-w: var(--sidebar-panel-width, 292px);
}

.session-files-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--sf-panel-w);
    z-index: 9995;
    display: flex;
    flex-direction: column;
    /* Slide in from depth, the same trick modern AI canvases use. */
    transform: translateX(102%) scale(.995);
    transform-origin: right center;
    opacity: .6;
    pointer-events: none;
    transition:
        transform 340ms cubic-bezier(.22, .61, .36, 1),
        opacity 340ms cubic-bezier(.22, .61, .36, 1),
        width 320ms ease;
    will-change: transform, width;
}

/* The panel is always in the DOM; the body class drives it open/closed so the
   chat body can transition its width in lockstep. `.hidden` is kept as a hard
   off-switch for the initial (never-opened) state. */
.session-files-panel.hidden {
    display: none;
}
body.session-files-open .session-files-panel {
    transform: translateX(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.session-files-shell {
    position: relative;
    flex: 1;
    min-height: 0;
    background: var(--card-bg, #1a1917);
    border-left: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    box-shadow: -18px 0 48px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* A soft accent hairline along the top edge, like the canvas panel. */
.session-files-shell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent, #b7795c), transparent);
    pointer-events: none;
    z-index: 4;
}

/* ── The push: chat + composer make room for the panel on desktop ─────────── */
@media (min-width: 1001px) {
    body.session-files-open .nav-menu ~ .chat-container,
    body.session-files-open .nav-menu ~ .typing-area {
        width: calc(100% - var(--sf-sidebar-w) - var(--sf-panel-w)) !important;
        margin-left: var(--sf-sidebar-w) !important;
        transition:
            width 320ms ease,
            margin-left 320ms ease !important;
    }
    body.session-files-open .chat-list {
        width: min(94%, 760px);
        max-width: 760px;
    }
    /* The app bar ends where the panel begins, so the panel reads as its own
       column and the bar's controls stay clickable. */
    body.session-files-open .nav {
        right: var(--sf-panel-w);
        transition: right 340ms cubic-bezier(.22, .61, .36, 1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .session-files-panel { transition: transform .01s linear, opacity .01s linear; }
}

.session-files-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    background: var(--secondary-color, rgba(255, 255, 255, 0.03));
}

.session-files-header h3 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-files-header .sf-count {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-soft, rgba(183, 121, 92, 0.15));
    color: var(--accent, #b7795c);
}

.session-files-header button {
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 6px;
    border-radius: 10px;
    place-items: center;
}

#session-files-close {
    display: grid;
}

.session-files-header button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.session-files-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-color, #15171a);
    overflow: hidden;
    position: relative;
}

.session-files-empty {
    text-align: center;
    color: var(--subheading-color, #8a8a8a);
    padding: 36px 20px;
    font-size: 13px;
    margin: auto;
}

.sf-main-view {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 20px;
}

.sf-main-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.sf-main-content img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.sf-main-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.sf-main-icon {
    font-size: 64px;
    color: var(--subheading-color, #8a8a8a);
    background: rgba(255, 255, 255, 0.05);
    padding: 24px;
    border-radius: 20px;
}

.sf-main-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-color);
    max-width: 80%;
    word-break: break-all;
}

.sf-main-open {
    padding: 10px 24px;
    border-radius: 8px;
    background: var(--accent, #b7795c);
    color: #fff;
    font-weight: 600;
    border: none;
    cursor: pointer;
    margin-top: 10px;
    font-size: 14px;
}

.sf-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.2s, transform 0.2s;
}

.sf-nav-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) scale(1.05);
}

.sf-prev { left: 16px; }
.sf-next { right: 16px; }

.sf-carousel-container {
    height: 100px;
    background: var(--card-bg, #1e1e1e);
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.sf-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    width: 100%;
    padding: 8px 0;
}

.sf-carousel::-webkit-scrollbar {
    height: 6px;
}

.sf-carousel::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}

.sf-carousel-item {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.2s;
    position: relative;
    background: var(--bg-color, #15171a);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sf-carousel-item:hover {
    opacity: 0.9;
}

.sf-carousel-item.active {
    opacity: 1;
    border-color: var(--accent, #b7795c);
    transform: scale(1.05);
}

.sf-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sf-icon-thumb {
    font-size: 24px;
    color: var(--subheading-color, #8a8a8a);
}

.sf-item-title {
    font-size: 9px;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
    text-align: center;
    margin-top: 2px;
}

/* ── Claude-style file list (replaces the old carousel viewer) ────────────── */
.session-files-body {
    flex: 1;
    min-height: 0;
    display: block;
    overflow-y: auto;
    padding: 20px 20px 40px;
    background: var(--bg-color, #15171a);
}
.session-files-body::-webkit-scrollbar { width: 8px; }
.session-files-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 4px;
}

.sf-section-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--text-color);
    margin: 4px 2px 12px;
}
.sf-section-title.sf-content-title { margin-top: 26px; }

.sf-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sf-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--card-bg, #1e1e1e);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.sf-card:hover {
    background: var(--secondary-color, rgba(255, 255, 255, 0.04));
    border-color: var(--accent-ring, rgba(183, 121, 92, .4));
}
.sf-card:active { transform: scale(.995); }

.sf-card-ico {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    color: var(--subheading-color, #b7b0a8);
    overflow: hidden;
}
.sf-card-ico .material-symbols-rounded { font-size: 22px; }
.sf-card-ico img { width: 100%; height: 100%; object-fit: cover; }

.sf-card-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sf-card-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sf-card-sub {
    font-size: 12px;
    color: var(--subheading-color, #8a8a8a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-card-action {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--subheading-color, #8a8a8a);
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    transition: background .16s ease, color .16s ease;
}
.sf-card-action:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-color);
}

/* Image thumbnails grid ("Content" in Claude) */
.sf-content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.sf-thumb {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: 12px;
    overflow: hidden;
    background: var(--card-bg, #1e1e1e);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    cursor: pointer;
    transition: border-color .16s ease, transform .16s ease;
}
.sf-thumb:hover { border-color: var(--accent-ring, rgba(183, 121, 92, .42)); transform: translateY(-1px); }
.sf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-thumb-tag {
    position: absolute;
    left: 8px;
    bottom: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    backdrop-filter: blur(2px);
}

/* Header: title + Download all. flex-shrink:0 + white-space:nowrap keep this
   from wrapping to two lines when the panel narrows — a wrapped label was
   stretching the whole header taller instead of just truncating the title. */
.session-files-header .sf-head-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 4px;
}
.sf-download-all {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px;
    background: transparent;
    border: none;
    color: var(--subheading-color, #b7b0a8);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    padding: 7px 9px;
    border-radius: 9px;
    transition: background .16s ease, color .16s ease;
}
.sf-download-all:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-color); }
.sf-download-all .material-symbols-rounded { font-size: 17px; margin-top: -2px; }

/* ── Mobile: the sidebar becomes a full-height overlay panel ───────────────── */
@media (max-width: 1000px) {
    body {
        --sf-panel-w: min(420px, 100vw);
    }
    .session-files-panel {
        box-shadow: -18px 0 60px rgba(0, 0, 0, 0.5);
    }
    /* No push on mobile — the panel simply overlays the chat. */
    body.session-files-open .nav-menu ~ .chat-container,
    body.session-files-open .nav-menu ~ .typing-area {
        width: 100% !important;
        margin-left: 0 !important;
    }
    body.session-files-open .nav { right: 0; }
}
@media (max-width: 600px) {
    body { --sf-panel-w: 100vw; }
    .session-files-content-grid { grid-template-columns: 1fr; }
}

/* ── Session Files refinement: compact, border-led panel without blue chrome ─ */
.session-files-shell {
    background: var(--chat-area-background, var(--card-bg, #1a1917));
    border-left: 1px solid var(--border-color, rgba(255, 255, 255, .12));
    box-shadow: none;
}
.session-files-shell::before {
    background: linear-gradient(90deg, transparent, var(--accent, #b7795c), transparent);
    opacity: .32;
}
.session-files-header {
    min-height: 58px;
    padding: 12px 20px;
    background: var(--secondary-color, rgba(255, 255, 255, .025));
}
.session-files-header h3 { gap: 9px; font-size: 15px; }
.session-files-header h3 .material-symbols-rounded { color: var(--accent, #b7795c); }
.session-files-header button:focus-visible,
.sf-card:focus-visible,
.sf-card-action:focus-visible,
.sf-thumb:focus-visible,
.sf-download-all:focus-visible {
    outline: 2px solid var(--accent-ring, rgba(183, 121, 92, .4));
    outline-offset: 2px;
}
.session-files-body {
    padding: 20px 20px 32px;
    background: var(--chat-area-background, var(--bg-color, #15171a));
}
.sf-section-title { margin: 2px 1px 11px; font-size: 12.5px; }
.sf-section-title.sf-content-title { margin-top: 24px; }
.sf-list { gap: 9px; }
.sf-card {
    gap: 12px;
    min-height: 66px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--secondary-color, rgba(255, 255, 255, .025));
}
.sf-card:hover {
    background: var(--secondary-hover-color, rgba(255, 255, 255, .055));
    border-color: var(--accent-ring, rgba(183, 121, 92, .4));
}
.sf-card-ico { width: 42px; height: 42px; border-radius: 9px; }
.sf-card-title { font-size: 13.5px; }
.sf-card-sub { font-size: 11.5px; }
.sf-card-action { width: 34px; height: 34px; }
.sf-card-action:hover { color: var(--accent, #b7795c); }
.sf-content-grid { gap: 10px; }
.sf-thumb {
    aspect-ratio: 4 / 3;
    border-radius: 11px;
    background: var(--secondary-color, rgba(255, 255, 255, .025));
}
.sf-thumb:hover {
    border-color: var(--accent-ring, rgba(183, 121, 92, .42));
    transform: none;
}
/* Show the whole visual asset; cover was zooming images into unreadable crops. */
.sf-thumb img {
    object-fit: contain;
    background: rgba(255, 255, 255, .025);
}
.sf-download-all { color: var(--text-color); padding: 7px 8px; }
.sf-download-all:hover { color: var(--accent, #b7795c); }
.session-files-header button {
    flex: 0 0 auto;
}
@media (max-width: 1000px) {
    .session-files-panel { box-shadow: none; }
}
@media (max-width: 600px) {
    .sf-content-grid { grid-template-columns: 1fr; }
}