/* TrustedRouter chat playground styles.
 *
 * Visual tokens mirror OpenRouter's chat playground UX so the page
 * feels familiar to anyone arriving from openrouter.ai/chat:
 *   * Inter typography
 *   * Purple-blue (#6467f2) accent for primary action + user bubbles
 *   * Flat 1px borders (#e4e4e7), no shadows except dropdowns/picker
 *   * Consistent 6px radius across buttons, inputs, pills
 *   * User bubble: rounded except top-right (8px 0 8px 8px)
 *   * Generous whitespace; minimal chrome
 *
 * DARK by default (matches the dev-facing product); a `[data-theme="light"]`
 * opt-in (driven by the marketing chrome's theme toggle, since /chat extends
 * public/_base.html) restores the original OpenRouter-style light surface.
 * Mobile breakpoint at 780px (matches dashboard.css). iOS safe-area insets
 * via env(safe-area-inset-*) so the sticky input bar doesn't sit behind the
 * home indicator.
 */

/* ── Tokens ─────────────────────────────────────────────────────── */

/* Hoisted to :root so overlays appended to document.body (model
 * picker, settings, help, image lightbox, toasts) resolve them.
 * When scoped to .chat-shell, those body-level nodes saw empty
 * var() values and rendered transparent.
 *
 * Default = dark (GitHub-dark surfaces; the purple-blue accent is kept
 * but lifted so it reads on the dark bg). Status/error use the dark-mode
 * red tint. The light values live under [data-theme="light"] below. */
:root {
    --chat-primary: #7d80f7;
    --chat-primary-hover: #9396f9;
    --chat-bg: #0d1117;
    --chat-text: #e6edf3;
    --chat-muted: #8b949e;
    --chat-border: #30363d;
    --chat-hover: #1c2230;
    --chat-sidebar-bg: #010409;
    --chat-assistant-bg: #161b22;
    --chat-error: #f85149;
    --chat-error-bg: rgba(248, 81, 73, 0.12);
    --chat-radius: 6px;
    --chat-radius-lg: 10px;
    --chat-shadow-popup: 0 4px 12px rgba(1, 4, 9, 0.5),
        0 16px 48px rgba(1, 4, 9, 0.7);
    --chat-tag-free-bg: rgba(63, 185, 80, 0.18);
    --chat-tag-free-ink: #56d364;
    --chat-tag-vision-bg: rgba(165, 124, 255, 0.2);
    --chat-tag-vision-ink: #c0a3ff;
    --chat-tag-tools-bg: rgba(210, 153, 34, 0.2);
    --chat-tag-tools-ink: #e3b341;
    --chat-font:
        "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --chat-mono:
        "JetBrains Mono", "Menlo", "Consolas", monospace;
}

:root[data-theme="light"] {
    --chat-primary: #6467f2;
    --chat-primary-hover: #5558dd;
    --chat-bg: #ffffff;
    --chat-text: #090911;
    --chat-muted: #717179;
    --chat-border: #e4e4e7;
    --chat-hover: #f4f4f5;
    --chat-sidebar-bg: #fafafa;
    --chat-assistant-bg: #ffffff;
    --chat-error: #b91c1c;
    --chat-error-bg: #fef2f2;
    --chat-shadow-popup: 0 4px 12px rgba(9, 9, 17, 0.08),
        0 16px 48px rgba(9, 9, 17, 0.16);
    --chat-tag-free-bg: #d1fae5;
    --chat-tag-free-ink: #065f46;
    --chat-tag-vision-bg: #ede9fe;
    --chat-tag-vision-ink: #5b21b6;
    --chat-tag-tools-bg: #fef3c7;
    --chat-tag-tools-ink: #92400e;
}

/* ── Shell + layout ────────────────────────────────────────────── */

.chat-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    height: calc(100vh - 56px);
    min-height: 480px;
    background: var(--chat-bg);
    color: var(--chat-text);
    font-family: var(--chat-font);
    font-size: 14px;
    line-height: 1.5;
    border-top: 1px solid var(--chat-border);
}

.chat-sidebar {
    border-right: 1px solid var(--chat-border);
    background: var(--chat-sidebar-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-sidebar-head {
    padding: 12px;
    border-bottom: 1px solid var(--chat-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-sidebar-search {
    width: 100%;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--chat-text);
    background: var(--chat-bg);
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius);
    font-family: inherit;
    outline: none;
}

.chat-sidebar-search:focus {
    border-color: var(--chat-primary);
}

.chat-sidebar-search::placeholder {
    color: var(--chat-muted);
}

.chat-new {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--chat-border);
    background: var(--chat-bg);
    color: var(--chat-text);
    border-radius: var(--chat-radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms;
}

.chat-new:hover {
    background: var(--chat-hover);
}

.chat-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.chat-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--chat-bg);
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--chat-border);
    min-height: 56px;
    flex-wrap: wrap;
    background: var(--chat-bg);
    position: sticky;
    top: 0;
    z-index: 10;
}

.chat-header-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 240px;
    line-height: 1.25;
}

.chat-header-chat-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--chat-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-header-chat-cost {
    font-size: 11px;
    color: var(--chat-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 780px) {
    .chat-header-title {
        max-width: none;
        flex: 1;
    }
}

.chat-hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    color: var(--chat-text);
}

.chat-models-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
    /* Critical: must NOT clip — the per-model dropdown drops below
     * each pill via position:absolute, and overflow-x:auto here used
     * to hide it entirely (the OG bug behind "right button doesn't
     * show anything"). The pills wrap to a second row instead. */
    overflow: visible;
}

.chat-header-actions {
    display: flex;
    gap: 4px;
}

.chat-header-btn {
    background: none;
    border: 1px solid var(--chat-border);
    color: var(--chat-muted);
    padding: 6px 10px;
    border-radius: var(--chat-radius);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    min-width: 34px;
    transition: background 120ms, color 120ms;
}

.chat-header-btn:hover {
    background: var(--chat-hover);
    color: var(--chat-text);
}

/* Active-state pill: used on the Sys button when a custom system
 * prompt is set, so the user sees at a glance that the chat carries
 * extra instructions. Subtle tint of the primary accent. */
.chat-header-btn.is-active {
    background: color-mix(in srgb, var(--chat-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--chat-primary) 40%, var(--chat-border));
    color: var(--chat-primary);
}

.chat-header-btn.is-active:hover {
    background: color-mix(in srgb, var(--chat-primary) 18%, transparent);
}

/* Icon-only header buttons (e.g. Share). Centers the SVG and keeps
 * the hit target square so it matches glyph-buttons next to it. */
.chat-header-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    line-height: 0;
}

.chat-header-btn-icon svg {
    display: block;
    color: inherit;
}

/* ── System prompt panel ───────────────────────────────────────── */

.chat-system-prompt-panel {
    padding: 12px 16px;
    border-bottom: 1px solid var(--chat-border);
    background: var(--chat-sidebar-bg);
}

.chat-system-prompt-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--chat-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chat-system-prompt-label textarea {
    width: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--chat-text);
    background: var(--chat-bg);
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius);
    resize: vertical;
}

.chat-system-prompt-tokens {
    font-size: 11px;
    color: var(--chat-muted);
    margin-top: 4px;
    display: block;
}

/* ── Thread + empty state ──────────────────────────────────────── */

.chat-thread {
    flex: 1;
    overflow-y: auto;
    padding: 24px 16px 16px;
    display: flex;
    flex-direction: column;
}

.chat-empty {
    text-align: center;
    padding: 48px 24px 32px;
    color: var(--chat-muted);
    margin: auto;
    max-width: 720px;
    width: 100%;
}

.chat-welcome {
    position: relative;
    text-align: left;
    background: color-mix(in srgb, var(--chat-primary) 6%, var(--chat-bg));
    border: 1px solid color-mix(in srgb, var(--chat-primary) 25%, var(--chat-border));
    border-radius: var(--chat-radius-lg);
    padding: 16px 18px;
    margin-bottom: 24px;
    animation: chat-fade-in 220ms ease-out;
}

.chat-welcome-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--chat-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px;
}

.chat-welcome-close:hover {
    color: var(--chat-text);
}

.chat-welcome-eyebrow {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--chat-primary);
    font-weight: 700;
    margin-bottom: 4px;
}

.chat-welcome h3 {
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--chat-text);
    font-weight: 600;
}

.chat-welcome ol {
    margin: 0;
    padding-left: 18px;
    color: var(--chat-text);
    font-size: 13px;
    line-height: 1.55;
}

.chat-welcome li {
    margin-bottom: 4px;
}

.chat-welcome kbd {
    background: var(--chat-bg);
    border: 1px solid var(--chat-border);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: var(--chat-mono);
    font-size: 11px;
}

.chat-empty h2 {
    font-size: 18px;
    margin-bottom: 8px;
    color: var(--chat-text);
    font-weight: 600;
}

.chat-empty p {
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 24px;
}

.chat-suggest-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.chat-suggest {
    text-align: left;
    background: var(--chat-bg);
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius);
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: inherit;
    transition: border-color 120ms, background 120ms;
}

.chat-suggest:hover {
    background: var(--chat-hover);
    border-color: color-mix(in srgb, var(--chat-primary) 50%, var(--chat-border));
}

.chat-suggest-emoji {
    font-size: 18px;
    line-height: 1;
}

.chat-suggest-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--chat-text);
}

.chat-suggest-body {
    font-size: 12px;
    color: var(--chat-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 780px) {
    .chat-suggest-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Input bar ─────────────────────────────────────────────────── */

.chat-input-bar {
    border-top: 1px solid var(--chat-border);
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--chat-bg);
}

.chat-input-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--chat-muted);
    margin-bottom: 6px;
    min-height: 14px;
}

.chat-input-row {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}

.chat-input-btn {
    background: var(--chat-bg);
    border: 1px solid var(--chat-border);
    color: var(--chat-muted);
    width: 36px;
    height: 36px;
    border-radius: var(--chat-radius);
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms;
}

.chat-input-btn:hover {
    background: var(--chat-hover);
    color: var(--chat-text);
}

.chat-input-btn.is-recording {
    background: var(--chat-error-bg);
    border-color: color-mix(in srgb, var(--chat-error) 50%, var(--chat-border));
    color: var(--chat-error);
    animation: chat-pulse 1.2s infinite;
}

@keyframes chat-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.chat-input {
    flex: 1;
    min-height: 36px;
    max-height: 200px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--chat-text);
    background: var(--chat-bg);
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius);
    resize: none;
    overflow-y: auto;
    line-height: 1.4;
}

.chat-input:focus {
    outline: 2px solid color-mix(in srgb, var(--chat-primary) 30%, transparent);
    outline-offset: -1px;
    border-color: var(--chat-primary);
}

.chat-send {
    height: 36px;
    padding: 0 14px;
    background: var(--chat-primary);
    color: #fff;
    border: 1px solid var(--chat-primary);
    border-radius: var(--chat-radius);
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chat-send-icon {
    display: inline-block;
    flex: 0 0 auto;
}

.chat-send-label {
    /* hidden on mobile via the breakpoint below */
}

.chat-send:hover {
    background: var(--chat-primary-hover);
    border-color: var(--chat-primary-hover);
}

.chat-send.is-stop {
    background: var(--chat-error);
    border-color: var(--chat-error);
}

.chat-send.is-stop:hover {
    background: #991b1b;
    border-color: #991b1b;
}

.chat-send-kbd {
    margin-left: 8px;
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-family: var(--chat-mono);
    font-weight: 400;
    border: none;
}

@media (max-width: 780px) {
    .chat-send-kbd {
        display: none;
    }
}

@media (max-width: 480px) {
    /* Tight viewport: collapse Send to icon-only, drop the text. */
    .chat-send {
        padding: 0 12px;
        gap: 0;
    }
    .chat-send-label {
        display: none;
    }
}

/* ── Sidebar items ─────────────────────────────────────────────── */

.chat-sidebar-empty {
    padding: 24px 16px;
    color: var(--chat-muted);
    font-size: 13px;
    text-align: center;
}

.chat-sidebar-bucket {
    padding: 14px 14px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--chat-muted);
    text-transform: uppercase;
}

.chat-sidebar-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    border-radius: 0;
}

.chat-sidebar-item:hover {
    background: var(--chat-hover);
}

.chat-sidebar-item.is-active {
    background: var(--chat-hover);
}

.chat-sidebar-item.is-active .chat-sidebar-title {
    color: var(--chat-text);
    font-weight: 500;
}

.chat-sidebar-title {
    flex: 1;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 6px;
    font-size: 13px;
    color: var(--chat-text);
    cursor: pointer;
    overflow: hidden;
    font-family: inherit;
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.chat-sidebar-title-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-sidebar-title-time {
    font-size: 10px;
    color: var(--chat-muted);
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.chat-sidebar-title-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex: 0 0 auto;
}

.chat-sidebar-title-cost {
    font-size: 9px;
    color: color-mix(in srgb, var(--chat-primary) 75%, var(--chat-muted));
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.chat-sidebar-delete,
.chat-sidebar-pin {
    background: none;
    border: none;
    color: var(--chat-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 4px 6px;
    opacity: 0;
    transition: opacity 100ms, color 100ms;
    border-radius: 4px;
}

.chat-sidebar-delete {
    font-size: 16px;
}

.chat-sidebar-item:hover .chat-sidebar-delete,
.chat-sidebar-item:hover .chat-sidebar-pin {
    opacity: 1;
}

.chat-sidebar-delete:hover,
.chat-sidebar-pin:hover {
    background: var(--chat-bg);
    color: var(--chat-text);
}

.chat-sidebar-pin.is-pinned {
    opacity: 1;
    color: var(--chat-primary);
}

/* ── Model pill ────────────────────────────────────────────────── */

.chat-model-pill-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

.chat-model-pill-wrap.is-disabled .chat-model-pill {
    opacity: 0.4;
}

/* Inline × on the pill — OR-style one-click model removal. Sits
 * to the right of the pill, fades in on hover. On touch viewports
 * (no hover) it's always visible so it's reachable. */
.chat-model-pill-close {
    width: 18px;
    height: 18px;
    margin-left: 2px;
    margin-right: 4px;
    background: var(--chat-hover);
    border: 1px solid var(--chat-border);
    color: var(--chat-muted);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms, background 120ms, color 120ms;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-model-pill-wrap:hover .chat-model-pill-close,
.chat-model-pill-close:focus {
    opacity: 1;
}

.chat-model-pill-close:hover {
    background: var(--chat-error-bg);
    color: var(--chat-error);
    border-color: color-mix(in srgb, var(--chat-error) 40%, var(--chat-border));
}

@media (hover: none) {
    /* Touch viewports — always show the close affordance. */
    .chat-model-pill-close {
        opacity: 1;
    }
}

.chat-model-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--chat-border);
    background: var(--chat-bg);
    padding: 4px 10px 4px 6px;
    border-radius: var(--chat-radius);
    font-size: 13px;
    font-weight: 500;
    color: var(--chat-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms, border-color 120ms;
    font-family: inherit;
}

.chat-model-pill-avatar {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex: 0 0 20px;
}

/* Unified avatar — used in pill, picker rows, column heads. The
 * sized variants below override dimensions. svg children inherit the
 * inline color so providerColor()'s fg drives the glyph. */
.chat-avatar {
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.chat-avatar svg {
    width: 70%;
    height: 70%;
    display: block;
}

.chat-avatar-pill {
    width: 20px;
    height: 20px;
    font-size: 10px;
    flex: 0 0 20px;
}

/* Provider chip on the model pill — shown on desktop only so the
 * pill stays compact on mobile where the avatar already carries
 * the provider identity. Subtle styling so it reads as metadata
 * rather than a clickable element. */
.chat-model-pill-provider {
    font-size: 10px;
    color: var(--chat-muted);
    background: var(--chat-hover);
    padding: 1px 6px;
    border-radius: 999px;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    font-weight: 500;
    flex: 0 0 auto;
}

@media (max-width: 780px) {
    .chat-model-pill-provider {
        display: none;
    }
}

.chat-avatar-row {
    width: 24px;
    height: 24px;
    font-size: 11px;
    flex: 0 0 24px;
}

.chat-avatar-col {
    width: 18px;
    height: 18px;
    font-size: 9px;
    flex: 0 0 18px;
}

.chat-model-pill:hover {
    background: var(--chat-hover);
}

.chat-model-pill-num {
    font-size: 10px;
    background: var(--chat-hover);
    padding: 1px 5px;
    border-radius: 999px;
    color: var(--chat-muted);
    font-weight: 600;
}

.chat-model-pill-caret {
    font-size: 9px;
    color: var(--chat-muted);
}

.chat-model-add {
    background: var(--chat-bg);
    border: 1px dashed var(--chat-border);
    color: var(--chat-muted);
    padding: 6px 12px;
    border-radius: var(--chat-radius);
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 120ms, color 120ms;
}

.chat-model-add:hover {
    border-style: solid;
    color: var(--chat-text);
}

/* ── Model dropdown (per-pill settings panel) ─────────────────── */

.chat-model-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    /* Above the sticky header (z-index 10) AND any other inline
     * decoration; stays below modals (z-index 100+). */
    z-index: 50;
    width: 320px;
    max-width: 90vw;
    background: var(--chat-assistant-bg);
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius-lg);
    box-shadow: var(--chat-shadow-popup);
    padding: 12px;
    max-height: 70vh;
    overflow-y: auto;
}

.chat-dd-row {
    margin-bottom: 10px;
}

.chat-dd-row-flex {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.chat-dd-action {
    background: var(--chat-bg);
    border: 1px solid var(--chat-border);
    color: var(--chat-text);
    padding: 4px 10px;
    border-radius: var(--chat-radius);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
}

.chat-dd-action:hover {
    background: var(--chat-hover);
}

.chat-dd-action-danger {
    color: var(--chat-error);
}

.chat-dd-toggle {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    color: var(--chat-text);
}

.chat-dd-label-input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius);
    font-size: 12px;
    color: var(--chat-text);
    background: var(--chat-bg);
    font-family: inherit;
}

.chat-dd-sys-row textarea {
    width: 100%;
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius);
    margin-top: 4px;
    resize: vertical;
    font-family: inherit;
    color: var(--chat-text);
    background: var(--chat-bg);
}

.chat-dd-sys-label {
    font-size: 11px;
    color: var(--chat-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.chat-dd-presets-row {
    border-top: 1px solid var(--chat-border);
    padding-top: 8px;
}

.chat-dd-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.chat-dd-preset {
    background: var(--chat-bg);
    border: 1px solid var(--chat-border);
    color: var(--chat-text);
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
}

.chat-dd-preset:hover {
    background: var(--chat-hover);
}

.chat-dd-sliders {
    display: grid;
    gap: 6px;
    border-top: 1px solid var(--chat-border);
    padding-top: 8px;
}

.chat-msg-edit {
    width: 100%;
    background: transparent;
    color: inherit;
    border: none;
    outline: none;
    resize: vertical;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
    padding: 0;
    min-height: 60px;
}

.chat-msg-user .chat-msg-edit {
    color: #fff;
}

.chat-msg-edit-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    justify-content: flex-end;
}

.chat-msg-edit-save,
.chat-msg-edit-cancel {
    padding: 4px 10px;
    border-radius: var(--chat-radius);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid;
}

.chat-msg-edit-save {
    background: rgba(255, 255, 255, 0.9);
    color: var(--chat-primary);
    border-color: rgba(255, 255, 255, 0.9);
}

.chat-msg-edit-cancel {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.4);
}

.chat-msg-assistant .chat-msg-edit-save {
    background: var(--chat-primary);
    color: #fff;
    border-color: var(--chat-primary);
}

.chat-msg-assistant .chat-msg-edit-cancel {
    color: var(--chat-text);
    border-color: var(--chat-border);
}

.chat-dd-slider {
    display: grid;
    grid-template-columns: 1fr 100px 36px;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--chat-muted);
}

.chat-dd-slider-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-dd-slider input[type="range"] {
    width: 100%;
    accent-color: var(--chat-primary);
}

.chat-dd-slider-value {
    font-variant-numeric: tabular-nums;
    color: var(--chat-text);
    font-weight: 500;
    text-align: right;
}

/* ── Message bubbles + multi-model grid ───────────────────────── */

.chat-msg {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    max-width: 760px;
    animation: chat-msg-enter 180ms ease-out;
}

@keyframes chat-msg-enter {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.chat-msg-user {
    align-self: flex-end;
    align-items: flex-end;
    max-width: 70%;
}

.chat-msg-assistant {
    align-self: stretch;
}

.chat-msg-bubble {
    padding: 12px 16px;
    line-height: 1.55;
    font-size: 14px;
    word-wrap: break-word;
}

.chat-msg-user .chat-msg-bubble {
    background: var(--chat-primary);
    color: #fff;
    border-radius: 8px 0 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-msg-user-text {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.chat-msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chat-msg-attachment-img {
    max-width: 140px;
    max-height: 140px;
    border-radius: var(--chat-radius);
    object-fit: cover;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.chat-msg-attachment-img:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.chat-image-overlay {
    position: fixed;
    inset: 0;
    background: rgba(9, 9, 17, 0.85);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: chat-fade-in 180ms ease-out;
}

.chat-image-overlay img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: var(--chat-radius);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.chat-msg-assistant .chat-msg-bubble {
    background: var(--chat-assistant-bg);
    color: var(--chat-text);
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius-lg);
}

.chat-msg-md > *:first-child {
    margin-top: 0;
}

.chat-msg-md > *:last-child {
    margin-bottom: 0;
}

.chat-msg-md p {
    margin: 0 0 10px;
}

.chat-msg-md pre {
    background: #0d1117;
    color: #e6edf3;
    padding: 12px;
    border-radius: var(--chat-radius);
    overflow-x: auto;
    margin: 10px 0;
    font-size: 12.5px;
}

.chat-msg-md code {
    font-family: var(--chat-mono);
    font-size: 12.5px;
}

.chat-msg-md :not(pre) > code {
    background: var(--chat-hover);
    padding: 1px 4px;
    border-radius: 4px;
}

.chat-msg-md a {
    color: var(--chat-primary);
    text-decoration: underline;
}

/* Polished typography for model responses: headings, lists, tables,
 * blockquotes. Default browser rendering is fine but feels generic
 * inside the assistant bubble; tightening these reads closer to a
 * "designed" playground. */

.chat-msg-md h1,
.chat-msg-md h2,
.chat-msg-md h3 {
    font-weight: 600;
    color: var(--chat-text);
    margin: 16px 0 8px;
    line-height: 1.3;
}

.chat-msg-md h1 { font-size: 20px; }
.chat-msg-md h2 { font-size: 17px; }
.chat-msg-md h3 { font-size: 15px; }

.chat-msg-md ul,
.chat-msg-md ol {
    margin: 8px 0;
    padding-left: 24px;
}

.chat-msg-md li {
    margin-bottom: 4px;
}

.chat-msg-md blockquote {
    border-left: 3px solid var(--chat-border);
    margin: 10px 0;
    padding: 4px 14px;
    color: var(--chat-muted);
    background: var(--chat-hover);
    border-radius: 0 var(--chat-radius) var(--chat-radius) 0;
}

.chat-msg-md table {
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
    width: 100%;
    overflow-x: auto;
    display: block;
}

.chat-msg-md th,
.chat-msg-md td {
    border: 1px solid var(--chat-border);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}

.chat-msg-md th {
    background: var(--chat-hover);
    font-weight: 600;
}

.chat-msg-md hr {
    border: none;
    border-top: 1px solid var(--chat-border);
    margin: 14px 0;
}

.chat-msg-error {
    color: var(--chat-error);
    background: var(--chat-error-bg);
    padding: 6px 10px;
    margin-top: 8px;
    border-radius: var(--chat-radius);
    font-size: 12px;
}

.chat-msg-meta {
    margin-top: 8px;
    font-size: 11px;
    color: var(--chat-muted);
    font-variant-numeric: tabular-nums;
}

.chat-msg-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    opacity: 0;
    transition: opacity 120ms;
}

.chat-msg:hover .chat-msg-actions {
    opacity: 1;
}

.chat-msg-action {
    background: var(--chat-bg);
    border: 1px solid var(--chat-border);
    color: var(--chat-muted);
    padding: 3px 8px;
    border-radius: var(--chat-radius);
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
}

.chat-msg-action:hover {
    color: var(--chat-text);
    background: var(--chat-hover);
}

.chat-msg-grid {
    display: grid;
    gap: 12px;
    width: 100%;
}

.chat-msg-grid-1 {
    grid-template-columns: 1fr;
    max-width: 760px;
}

.chat-msg-grid-2 {
    grid-template-columns: 1fr 1fr;
}

.chat-msg-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.chat-msg-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.chat-msg-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-msg-col-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--chat-text);
    padding: 0 0 6px;
}

.chat-msg-col-head-avatar {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    flex: 0 0 18px;
}

.chat-msg-col-head-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-msg-col-actions {
    margin-top: 4px;
}

/* ── Model picker overlay ─────────────────────────────────────── */

.chat-model-picker {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
}

.chat-model-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 9, 17, 0.55);
}

.chat-model-picker-panel {
    position: relative;
    width: 560px;
    max-width: 92vw;
    max-height: 70vh;
    background: var(--chat-assistant-bg);
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius-lg);
    box-shadow: var(--chat-shadow-popup);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: var(--chat-font);
}

.chat-model-picker-search {
    padding: 14px 18px;
    border: none;
    border-bottom: 1px solid var(--chat-border);
    font-size: 15px;
    outline: none;
    color: var(--chat-text);
    background: var(--chat-bg);
    font-family: inherit;
}

.chat-model-picker-search::placeholder {
    color: var(--chat-muted);
}

.chat-model-picker-filters {
    display: flex;
    gap: 6px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--chat-border);
}

.chat-model-picker-group {
    padding: 12px 16px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--chat-muted);
    text-transform: uppercase;
}

.chat-model-picker-group:first-child {
    padding-top: 8px;
}

.chat-picker-filter {
    background: var(--chat-bg);
    border: 1px solid var(--chat-border);
    color: var(--chat-muted);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: background 120ms, color 120ms, border-color 120ms;
}

.chat-picker-filter:hover {
    color: var(--chat-text);
}

.chat-picker-filter.is-on {
    background: var(--chat-primary);
    color: #fff;
    border-color: var(--chat-primary);
}

.chat-model-skeleton {
    height: 44px;
    margin: 6px 16px;
    border-radius: var(--chat-radius);
    background: linear-gradient(
        90deg,
        var(--chat-hover) 0%,
        var(--chat-bg) 50%,
        var(--chat-hover) 100%
    );
    background-size: 200% 100%;
    animation: chat-shimmer 1.2s linear infinite;
}

@keyframes chat-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.chat-msg-error-retry {
    margin-left: 12px;
    background: var(--chat-bg);
    border: 1px solid var(--chat-error);
    color: var(--chat-error);
    padding: 2px 10px;
    border-radius: var(--chat-radius);
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
}

.chat-msg-error-retry:hover {
    background: var(--chat-error-bg);
}

.chat-model-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.chat-picker-filter-count {
    font-variant-numeric: tabular-nums;
    color: var(--chat-muted);
    margin-left: 2px;
    font-size: 10px;
}

.chat-picker-filter.is-on .chat-picker-filter-count {
    color: rgba(255, 255, 255, 0.85);
}

.chat-model-picker-footer {
    border-top: 1px solid var(--chat-border);
    padding: 8px 16px;
    display: flex;
    gap: 14px;
    font-size: 11px;
    color: var(--chat-muted);
    background: var(--chat-sidebar-bg);
}

.chat-model-picker-footer kbd {
    background: var(--chat-bg);
    border: 1px solid var(--chat-border);
    border-bottom-width: 2px;
    padding: 1px 5px;
    border-radius: 4px;
    font-family: var(--chat-mono);
    font-size: 10px;
    color: var(--chat-text);
    margin-right: 4px;
}

.chat-model-picker-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--chat-muted);
}

.chat-model-picker-empty-title {
    font-size: 14px;
    color: var(--chat-text);
    font-weight: 500;
    margin-bottom: 6px;
}

.chat-model-picker-empty-hint {
    font-size: 12px;
}

.chat-model-row {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    align-items: center;
    font-family: inherit;
    color: var(--chat-text);
}

.chat-model-row:hover,
.chat-model-row.is-keyboard-active {
    background: var(--chat-hover);
}

.chat-model-row.is-keyboard-active {
    outline: 2px solid color-mix(in srgb, var(--chat-primary) 30%, transparent);
    outline-offset: -2px;
}

.chat-model-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.chat-model-row-avatar {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.chat-model-row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-model-row-name {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-model-row-provider {
    font-size: 11px;
    color: var(--chat-muted);
    line-height: 1.2;
}

.chat-model-row-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--chat-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.chat-tag-free {
    background: var(--chat-tag-free-bg);
    color: var(--chat-tag-free-ink);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-variant-numeric: normal;
}

/* ── Attachments tray + drop overlay ───────────────────────────── */

.chat-attachments-tray {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--chat-border);
    margin-bottom: 6px;
}

.chat-attachment-thumb {
    position: relative;
    width: 48px;
    height: 48px;
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius);
    overflow: hidden;
    background: var(--chat-hover);
}

.chat-attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-attachment-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--chat-bg);
    border: 1px solid var(--chat-border);
    border-radius: 999px;
    width: 18px;
    height: 18px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    color: var(--chat-text);
}

.chat-main.is-dragover {
    background: color-mix(in srgb, var(--chat-primary) 4%, transparent);
    outline: 2px dashed var(--chat-primary);
    outline-offset: -8px;
}

/* ── Settings overlay ─────────────────────────────────────────── */

.chat-settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
    font-family: var(--chat-font);
}

.chat-settings-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 9, 17, 0.55);
}

.chat-settings-panel {
    position: relative;
    width: 540px;
    max-width: 92vw;
    max-height: 80vh;
    background: var(--chat-assistant-bg);
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius-lg);
    box-shadow: var(--chat-shadow-popup);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: chat-fade-in 200ms ease-out;
}

.chat-settings-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--chat-border);
}

.chat-settings-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.chat-settings-close {
    background: none;
    border: none;
    color: var(--chat-muted);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.chat-settings-body {
    overflow-y: auto;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.chat-settings-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}

.chat-settings-row-flex {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.chat-settings-row-label {
    font-weight: 600;
    color: var(--chat-text);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chat-settings-row textarea,
.chat-settings-row input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius);
    font-family: inherit;
    color: var(--chat-text);
    background: var(--chat-bg);
}

.chat-settings-row textarea:focus,
.chat-settings-row input[type="text"]:focus {
    border-color: var(--chat-primary);
    outline: none;
}

.chat-settings-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.chat-settings-preset {
    background: var(--chat-hover);
    padding: 3px 4px 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.chat-settings-preset button {
    background: none;
    border: none;
    color: var(--chat-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 0 4px;
}

.chat-settings-empty {
    font-size: 11px;
    color: var(--chat-muted);
}

.chat-settings-danger {
    background: var(--chat-error-bg);
    border: 1px solid color-mix(in srgb, var(--chat-error) 30%, var(--chat-border));
    color: var(--chat-error);
    padding: 6px 12px;
    border-radius: var(--chat-radius);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    align-self: flex-start;
}

.chat-settings-danger:hover {
    background: color-mix(in srgb, var(--chat-error) 10%, var(--chat-bg));
}

/* ── Keyboard shortcuts help overlay ──────────────────────────── */

.chat-help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(9, 9, 17, 0.55);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--chat-font);
}

.chat-help-panel {
    background: var(--chat-assistant-bg);
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius-lg);
    padding: 24px;
    width: 420px;
    max-width: 92vw;
    box-shadow: var(--chat-shadow-popup);
}

.chat-help-panel h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--chat-text);
}

.chat-help-panel table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.chat-help-panel td {
    padding: 6px 0;
    color: var(--chat-text);
}

.chat-help-panel td:first-child {
    width: 130px;
}

.chat-help-panel kbd {
    background: var(--chat-hover);
    border: 1px solid var(--chat-border);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--chat-mono);
    font-size: 11px;
}

.chat-help-panel p {
    margin: 12px 0 0;
    font-size: 11px;
    color: var(--chat-muted);
}

/* ── In-chat search bar ───────────────────────────────────────── */

.chat-search-bar {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: auto;
    top: 56px;
    z-index: 15;
    background: var(--chat-bg);
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    padding: 6px 8px;
    gap: 6px;
    animation: chat-fade-in 160ms ease-out;
    max-width: 460px;
    margin: 0 auto;
}

.chat-search-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    background: transparent;
    color: var(--chat-text);
    padding: 4px 6px;
}

.chat-search-count {
    font-size: 11px;
    color: var(--chat-muted);
    font-variant-numeric: tabular-nums;
}

.chat-search-close {
    background: none;
    border: none;
    color: var(--chat-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 4px 8px;
}

.chat-search-close:hover {
    color: var(--chat-text);
}

.chat-msg.is-hidden-by-search {
    display: none;
}

.chat-search-mark {
    background: rgba(255, 235, 59, 0.45);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

/* ── Toast notifications ──────────────────────────────────────── */

.chat-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--chat-text);
    color: var(--chat-bg);
    padding: 8px 14px;
    border-radius: var(--chat-radius);
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms, transform 180ms;
    z-index: 300;
    font-family: var(--chat-font);
}

.chat-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.chat-toast.is-danger {
    background: var(--chat-error);
}

/* ── Voice mode overlay ────────────────────────────────────────── */

.chat-voice-overlay {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--chat-font);
}

.chat-voice-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 40%,
        rgba(100, 103, 242, 0.22) 0%,
        rgba(9, 9, 17, 0.92) 70%
    );
    cursor: pointer;
}

.chat-voice-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 48px;
    max-width: 560px;
    width: 92vw;
    color: #fff;
    text-align: center;
}

.chat-voice-exit {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms;
}

.chat-voice-exit:hover {
    background: rgba(255, 255, 255, 0.18);
}

.chat-voice-orb {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 35%,
        rgba(255, 255, 255, 0.18),
        rgba(100, 103, 242, 0.55) 60%,
        rgba(100, 103, 242, 0.85) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow:
        0 0 80px rgba(100, 103, 242, 0.45),
        inset 0 0 40px rgba(255, 255, 255, 0.15);
}

.chat-voice-orb-pulse {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(100, 103, 242, 0.6);
    opacity: 0;
    animation: chat-voice-pulse 2400ms ease-out infinite;
    pointer-events: none;
}

@keyframes chat-voice-pulse {
    0%   { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0;   transform: scale(1.4); }
}

/* Per-state colour shifts */
.chat-voice-panel[data-state="listening"] .chat-voice-orb {
    background: radial-gradient(
        circle at 35% 35%,
        rgba(255, 255, 255, 0.22),
        rgba(16, 163, 127, 0.55) 60%,
        rgba(16, 163, 127, 0.85) 100%
    );
    box-shadow:
        0 0 80px rgba(16, 163, 127, 0.45),
        inset 0 0 40px rgba(255, 255, 255, 0.15);
}

.chat-voice-panel[data-state="listening"] .chat-voice-orb-pulse {
    border-color: rgba(16, 163, 127, 0.7);
}

.chat-voice-panel[data-state="thinking"] .chat-voice-orb-pulse {
    animation-duration: 900ms;
}

.chat-voice-panel[data-state="speaking"] .chat-voice-orb {
    background: radial-gradient(
        circle at 35% 35%,
        rgba(255, 255, 255, 0.22),
        rgba(100, 103, 242, 0.65) 60%,
        rgba(100, 103, 242, 0.95) 100%
    );
}

.chat-voice-panel[data-state="speaking"] .chat-voice-orb-pulse {
    animation-duration: 1200ms;
    border-color: rgba(100, 103, 242, 0.7);
}

.chat-voice-status {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
}

.chat-voice-transcript {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    min-height: 48px;
    max-height: 200px;
    overflow-y: auto;
    padding: 0 12px;
    font-style: italic;
}

.chat-voice-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.chat-voice-hint kbd {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: var(--chat-mono);
    font-size: 11px;
    color: #fff;
    margin: 0 2px;
}

/* ── Prompt / confirm modal (replaces window.prompt/confirm) ───── */

.chat-prompt-overlay {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
    font-family: var(--chat-font);
}

.chat-prompt-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 9, 17, 0.55);
}

.chat-prompt-panel {
    position: relative;
    width: 440px;
    max-width: 92vw;
    background: var(--chat-assistant-bg);
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius-lg);
    box-shadow: var(--chat-shadow-popup);
    overflow: hidden;
    animation: chat-fade-in 180ms ease-out;
}

.chat-prompt-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--chat-border);
}

.chat-prompt-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--chat-text);
}

.chat-prompt-close {
    background: none;
    border: none;
    color: var(--chat-muted);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0;
}

.chat-prompt-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-prompt-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--chat-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chat-prompt-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--chat-text);
    background: var(--chat-bg);
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius);
    outline: none;
    font-family: inherit;
    transition: border-color 120ms;
}

.chat-prompt-input:focus {
    border-color: var(--chat-primary);
}

.chat-prompt-helper {
    font-size: 11px;
    color: var(--chat-muted);
}

.chat-prompt-message {
    margin: 0;
    font-size: 13px;
    color: var(--chat-text);
    line-height: 1.45;
}

.chat-prompt-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px 16px;
}

.chat-prompt-cancel,
.chat-prompt-confirm {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--chat-radius);
    cursor: pointer;
    font-family: inherit;
    border: 1px solid var(--chat-border);
    transition: background 120ms, color 120ms, border-color 120ms;
}

.chat-prompt-cancel {
    background: var(--chat-bg);
    color: var(--chat-muted);
}

.chat-prompt-cancel:hover {
    color: var(--chat-text);
    background: var(--chat-hover);
}

.chat-prompt-confirm {
    background: var(--chat-primary);
    color: #fff;
    border-color: var(--chat-primary);
}

.chat-prompt-confirm:hover {
    background: var(--chat-primary-hover);
}

.chat-prompt-confirm.is-danger {
    background: var(--chat-error);
    border-color: var(--chat-error);
}

.chat-prompt-confirm.is-danger:hover {
    background: #991b1b;
    border-color: #991b1b;
}

/* ── Routing select in per-model dropdown ─────────────────────── */

.chat-dd-routing-select {
    width: 100%;
    padding: 6px 8px;
    margin-top: 4px;
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius);
    background: var(--chat-bg);
    font-family: inherit;
    font-size: 12px;
    color: var(--chat-text);
}

.chat-dd-routing-select:focus {
    border-color: var(--chat-primary);
    outline: none;
}

/* ── Streaming caret + tool-use display + code-copy button ────── */

.chat-msg-bubble.is-streaming .chat-msg-md::after {
    content: "▍";
    color: var(--chat-primary);
    margin-left: 2px;
    animation: chat-caret 1s steps(1) infinite;
    vertical-align: text-bottom;
    display: inline-block;
}

@keyframes chat-caret {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Pre-first-token dots indicator. Shows while we're connected to the
 * provider but no content has arrived yet. */
.chat-msg-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
}

.chat-msg-dots span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--chat-muted);
    animation: chat-dots 1.4s infinite ease-in-out;
}

.chat-msg-dots span:nth-child(2) { animation-delay: 0.15s; }
.chat-msg-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chat-dots {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
    40% { opacity: 1; transform: scale(1); }
}

.chat-msg-reasoning {
    margin-bottom: 12px;
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius);
    background: color-mix(in srgb, var(--chat-primary) 4%, var(--chat-hover));
    font-size: 12px;
}

.chat-msg-reasoning summary {
    padding: 6px 10px;
    cursor: pointer;
    color: var(--chat-muted);
    font-weight: 500;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-msg-reasoning[open] summary {
    border-bottom: 1px solid var(--chat-border);
}

.chat-msg-reasoning-icon {
    font-size: 13px;
}

.chat-msg-reasoning-body {
    padding: 8px 12px;
    color: var(--chat-muted);
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    font-family: var(--chat-mono);
    max-height: 320px;
    overflow-y: auto;
}

.chat-msg-tools {
    margin-top: 10px;
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius);
    background: var(--chat-hover);
    font-size: 12px;
}

.chat-msg-tools summary {
    padding: 6px 10px;
    cursor: pointer;
    color: var(--chat-muted);
    font-weight: 500;
    user-select: none;
}

.chat-msg-tools[open] summary {
    border-bottom: 1px solid var(--chat-border);
}

.chat-msg-tools pre {
    margin: 0;
    padding: 8px 10px;
    background: var(--chat-bg);
    font-family: var(--chat-mono);
    font-size: 11.5px;
    overflow-x: auto;
}

.chat-code-lang {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(230, 237, 243, 0.6);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    font-family: var(--chat-font);
    pointer-events: none;
}

.chat-msg-md pre {
    padding-top: 28px;
}

.chat-code-copy {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #e6edf3;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    font-family: var(--chat-font);
    opacity: 0;
    transition: opacity 120ms, background 120ms;
}

.chat-msg-md pre:hover .chat-code-copy {
    opacity: 1;
}

.chat-code-copy:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* ── Capability tags in model picker ──────────────────────────── */

.chat-tag {
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-variant-numeric: normal;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chat-tag-free {
    background: var(--chat-tag-free-bg);
    color: var(--chat-tag-free-ink);
}

.chat-tag-vision {
    background: var(--chat-tag-vision-bg);
    color: var(--chat-tag-vision-ink);
}

.chat-tag-tools {
    background: var(--chat-tag-tools-bg);
    color: var(--chat-tag-tools-ink);
}

.chat-tag-active {
    background: color-mix(in srgb, var(--chat-primary) 18%, transparent);
    color: var(--chat-primary);
}

.chat-model-row.is-active-model {
    box-shadow: inset 3px 0 0 var(--chat-primary);
}

.chat-model-row.is-active-model .chat-model-row-name {
    color: var(--chat-primary);
}

/* ── Scroll-to-bottom FAB ─────────────────────────────────────── */

.chat-main {
    position: relative;
}

.chat-scroll-fab {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--chat-bg);
    border: 1px solid var(--chat-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    color: var(--chat-text);
    font-size: 14px;
    cursor: pointer;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-scroll-fab:hover {
    background: var(--chat-hover);
}

.chat-scroll-fab[hidden] {
    display: none;
}

/* ── Mobile sidebar backdrop ──────────────────────────────────── */

.chat-sidebar-backdrop {
    display: none;
}

@media (max-width: 780px) {
    .chat-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 56px 0 0 0;
        background: rgba(9, 9, 17, 0.4);
        z-index: 49;
        animation: chat-fade-in 180ms ease-out;
    }
    .chat-sidebar-backdrop[hidden] {
        display: none;
    }
    /* Full-screen picker sheet on mobile instead of cramped centered
     * modal — easier to scan + tap on small screens. */
    .chat-model-picker {
        padding-top: 0;
        align-items: stretch;
    }
    .chat-model-picker-panel {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }
}

@keyframes chat-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Mobile ────────────────────────────────────────────────────── */

@media (max-width: 780px) {
    .chat-shell {
        grid-template-columns: 1fr;
        height: calc(100vh - 56px);
    }
    .chat-header {
        padding: 6px 12px;
        min-height: 48px;
    }
    .chat-header-title {
        display: none; /* save horizontal space; cost still visible in column meta */
    }
    .chat-header-actions .chat-header-btn:not(:first-child, :last-child) {
        display: none; /* keep only Sys + ? on small screens; rest via Settings */
    }
    .chat-sidebar {
        position: fixed;
        top: 56px;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 200ms ease-out;
        z-index: 50;
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.08);
    }
    .chat-sidebar[data-open="true"] {
        transform: translateX(0);
    }
    .chat-hamburger {
        display: inline-block;
    }
    .chat-msg-user {
        max-width: 90%;
    }
    .chat-thread {
        padding: 16px 12px;
    }
    .chat-input-bar {
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
    /* Multi-model responses collapse to a single column */
    .chat-msg-grid,
    .chat-msg-grid-1,
    .chat-msg-grid-2,
    .chat-msg-grid-3,
    .chat-msg-grid-4 {
        grid-template-columns: 1fr;
    }
}