/* ===== maigica — Minimalist Theme ===== */

:root {
    --bg-primary: #ffffff;
    --bg-card: #f9fafb;
    --bg-input: #f3f4f6;
    --bg-hover: #e5e7eb;
    --border: #d1d5db;
    --text-primary: #1a1d23;
    --text-secondary: #555d6b;
    --text-muted: #9ca3af;
    --accent: #7c3aed;
    --accent-dim: rgba(124, 58, 237, 0.1);
    --accent-glow: rgba(124, 58, 237, 0.25);
    --danger: #ef4444;
    --danger-dim: rgba(239, 68, 68, 0.1);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;
    --font: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Explicit dark theme (data-theme="dark") */
[data-theme="dark"] {
    --bg-primary: #0d1117;
    --bg-card: #1e2430;
    --bg-input: #2a3140;
    --bg-hover: #363e50;
    --border: #3a4250;
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #484f58;
    --accent: #a78bfa;
    --accent-dim: rgba(167, 139, 250, 0.15);
    --accent-glow: rgba(167, 139, 250, 0.35);
    --danger: #f87171;
    --danger-dim: rgba(248, 113, 113, 0.15);
}
/* Auto dark — OS preference when no explicit theme is set */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #0d1117;
        --bg-card: #1e2430;
        --bg-input: #2a3140;
        --bg-hover: #363e50;
        --border: #3a4250;
        --text-primary: #e6edf3;
        --text-secondary: #8b949e;
        --text-muted: #484f58;
        --accent: #a78bfa;
        --accent-dim: rgba(167, 139, 250, 0.15);
        --accent-glow: rgba(167, 139, 250, 0.35);
        --danger: #f87171;
        --danger-dim: rgba(248, 113, 113, 0.15);
    }
}

/* ── Star-field background (Free / Personal+ dark theme) ───────────── */
body.plan-stars {
    --bg-primary: #000000;
    background: #000000;
}
body.plan-stars::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 8% 15%,   #a78bfa 60%, transparent 100%),
        radial-gradient(2px 2px   at 18% 70%,  #c4b5fd 60%, transparent 100%),
        radial-gradient(1.5px 1.5px at 32% 25%,   #ddd6fe 60%, transparent 100%),
        radial-gradient(2px 2px   at 45% 82%,  #a78bfa 60%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 12%,   #c4b5fd 60%, transparent 100%),
        radial-gradient(2.5px 2.5px at 65% 55%,  #a78bfa 60%, transparent 100%),
        radial-gradient(1.5px 1.5px at 78% 30%,   #ddd6fe 60%, transparent 100%),
        radial-gradient(2px 2px   at 88% 75%,  #c4b5fd 60%, transparent 100%),
        radial-gradient(1.5px 1.5px at 95% 18%,   #ddd6fe 60%, transparent 100%),
        radial-gradient(2px 2px   at 12% 45%,  #ddd6fe 60%, transparent 100%),
        radial-gradient(1.5px 1.5px at 72% 88%,   #a78bfa 60%, transparent 100%),
        radial-gradient(2px 2px   at 40% 50%,  #c4b5fd 60%, transparent 100%);
    opacity: 0.35;
    animation: starTwinkle 4s ease-in-out infinite alternate;
}
@keyframes starTwinkle {
    0%   { opacity: 0.25; }
    50%  { opacity: 0.45; }
    100% { opacity: 0.3; }
}

* { box-sizing: border-box; }

html, body {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;          /* prevent page-level scroll (keyboard, overscroll) */
    overscroll-behavior: none; /* kill pull-to-refresh / scroll chaining */
}

body {
    font-family: var(--font, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    margin: 0;
    padding: 0;
    background: var(--bg-primary);
    color: var(--text-secondary);
    /* -webkit-font-smoothing: antialiased; */
    /* -moz-osx-font-smoothing: grayscale; */
    text-rendering: auto;
    text-transform: lowercase;
    line-height: 1.5;
}
#messages, #prompt { text-transform: none; color: var(--text-secondary); }

/* ===== Login Screen ===== */
.login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg-primary);
}
.login-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 40px 36px 32px;
    max-width: 360px;
    width: 100%;
    text-align: center;
}

.login-title {
    margin: 0 0 8px;
    font-size: 1.5rem;
    color: var(--accent);
    letter-spacing: 0.5px;
    text-align: center;
}
.login-title i {
    margin-right: 8px;
    font-size: 1.1rem;
}
.login-subtitle {
    color: var(--text-secondary);
    margin: 0 0 24px;
    font-size: 0.88rem;
}
.login-btn {
    width: 100%;
    padding: 12px;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color 0.2s;
    font-family: inherit;
}
.login-btn:hover {
    border-color: var(--text-primary);
}
.login-error {
    color: var(--danger);
    margin-top: 12px;
    font-size: 0.85rem;
}

/* ===== Chat Container ===== */
#chat {
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 56px 24px 85px;
    min-height: 320px;
    height: 100vh;
    height: 100dvh;            /* shrinks with mobile keyboard */
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* only #messages scrolls */
    box-shadow: none;
}

/* Chat Header */
.chat-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: color-mix(in srgb, var(--bg-primary) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    z-index: 10;
}
.header-actions {
    margin-left: auto;
}
#debug-toggle-btn {
    color: var(--text-muted);
    transition: color 0.2s;
}
#debug-toggle-btn.debug-active {
    color: #0f0;
}
/* Brand area (left side of header) */
.chat-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.brand-logo {
    height: 32px;
    max-width: 160px;
    object-fit: contain;
}
.brand-fallback-logo {
    display: flex;
    align-items: center;
}
/* Logo SVG text follows theme colors (override hardcoded fills) */
.login-title svg text,
.brand-fallback-logo svg text       { fill: var(--text-primary); }
.login-title svg text tspan,
.brand-fallback-logo svg text tspan  { fill: var(--accent); }
.login-title svg path,
.brand-fallback-logo svg path        { fill: var(--accent); }
.powered-by svg text                 { fill: var(--text-secondary); }
.powered-by svg text tspan           { fill: var(--accent); }
.powered-by svg path                 { fill: var(--accent); }
/* "powered by maigica" badge (right side, next to action btns) */
.powered-by {
    font-size: 0.6rem;
    font-weight: 300;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    text-transform: none;
    opacity: 0.85;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s;
}
.powered-by:hover {
    opacity: 1;
}
.new-session-btn {
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    box-shadow: none;
}
.new-session-btn:hover,
.new-session-btn:focus {
    color: var(--text-primary);
    border-color: var(--text-muted);
    background: transparent;
    box-shadow: none;
}
/* Voice mode button: accent-styled primary action (like vertical site CTA circle) */
#voice-only-btn {
    border-color: var(--accent);
    color: var(--accent);
}
#voice-only-btn:hover,
#voice-only-btn:focus {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ===== Messages ===== */
#messages {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 15px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain; /* prevent scroll-chaining to body */
    -webkit-overflow-scrolling: touch;
    padding: 0 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
#messages::-webkit-scrollbar {
    width: 4px;
}
#messages::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.msg {
    max-width: 85%;
    padding: 12px 16px;
    margin: 3px 0;
    border-radius: 18px;
    font-size: 1rem;
    line-height: 1.5;
    position: relative;
    word-break: break-word;
    font-family: inherit;
    box-shadow: none;
    opacity: 0.9;
}
.user {
    background: transparent;
    color: var(--text-primary);
    align-self: flex-end;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    white-space: pre-wrap;
}
.bot {
    background: transparent;
    color: var(--text-secondary);
    align-self: flex-start;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

.bot-msg-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 3px 0;
}
.bot-response {
    flex: 1;
}

/* ── Markdown typography inside bot bubbles ── */
.msg.bot p { margin: 0 0 0.5em; }
.msg.bot p:last-child { margin-bottom: 0; }
.msg.bot .rec-play-btn { margin: 2px 0; }
.msg.bot strong, .msg.bot b { font-weight: 500; }
.msg.bot em, .msg.bot i { font-style: italic; }
.msg.bot h1, .msg.bot h2, .msg.bot h3,
.msg.bot h4, .msg.bot h5, .msg.bot h6 {
    margin: 0.6em 0 0.3em;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.3px;
}
.msg.bot h1 { font-size: 1.2em; }
.msg.bot h2 { font-size: 1.1em; }
.msg.bot h3 { font-size: 1.05em; }
.msg.bot h4, .msg.bot h5, .msg.bot h6 { font-size: 0.98em; }
.msg.bot h1:first-child, .msg.bot h2:first-child, .msg.bot h3:first-child { margin-top: 0; }

/* Streaming response cursor */
.stream-cursor {
    display: inline;
    animation: blink-cursor 0.7s step-end infinite;
    color: var(--accent, #3b82f6);
    font-weight: 400;
}
@keyframes blink-cursor {
    50% { opacity: 0; }
}
.msg.bot.streaming {
    min-height: 1.2em;
}

.msg.bot ul, .msg.bot ol {
    margin: 0.3em 0 0.5em;
    padding-left: 1.4em;
}
.msg.bot li { margin-bottom: 0.15em; }
.msg.bot li:last-child { margin-bottom: 0; }
.msg.bot a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.msg.bot a:hover { opacity: 0.8; }

/* ── Deep-link buttons: transparent with colored border ── */
.msg.bot a[href*="/api/recording/audio/rec_"],
.msg.bot a[href*="wa.me"],
.msg.bot a[href^="sms:"],
.msg.bot a[href*="google.com/search"],
.msg.bot a[href*="google.com/maps"],
.msg.bot a[href^="tel:"],
.msg.bot a[href*="calendar.google.com"],
.msg.bot a[href*="translate.google.com"],
.msg.bot a[href*="youtube.com"],
.msg.bot a[href*="spotify.com"],
.msg.bot a[href*="tidal.com"],
.msg.bot a[href^="mailto:"],
.msg.bot a[href*="uber.com"],
.msg.bot a[href*="amazon.com"],
.msg.bot a[href*="allegro.pl"],
.msg.bot a[href*="wikipedia.org"],
.msg.bot a[href*="znanylekarz.pl"],
.msg.bot a[href*="kayak."],
.msg.bot a[href*="skyscanner."],
.msg.bot a[href*="justjoin.it"],
.msg.bot a[href*="instagram.com"],
.msg.bot a[href*="facebook.com"],
.msg.bot a[href*="chatgpt.com"],
.msg.bot a[href*="chat.openai.com"] {
    display: inline-block;
    background: transparent !important;
    color: var(--text-primary) !important;
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid var(--border);
    text-decoration: none;
    font-weight: 400;
    font-size: 0.95em;
    margin-top: 8px;
    opacity: 1;
    transition: border-color 0.2s;
}
.msg.bot a[href*="/api/recording/audio/rec_"]:hover,
.msg.bot a[href*="wa.me"]:hover,
.msg.bot a[href^="sms:"]:hover,
.msg.bot a[href*="google.com/search"]:hover,
.msg.bot a[href*="google.com/maps"]:hover,
.msg.bot a[href^="tel:"]:hover,
.msg.bot a[href*="calendar.google.com"]:hover,
.msg.bot a[href*="translate.google.com"]:hover,
.msg.bot a[href*="youtube.com"]:hover,
.msg.bot a[href*="spotify.com"]:hover,
.msg.bot a[href*="tidal.com"]:hover,
.msg.bot a[href^="mailto:"]:hover,
.msg.bot a[href*="uber.com"]:hover,
.msg.bot a[href*="amazon.com"]:hover,
.msg.bot a[href*="allegro.pl"]:hover,
.msg.bot a[href*="wikipedia.org"]:hover,
.msg.bot a[href*="znanylekarz.pl"]:hover,
.msg.bot a[href*="kayak."]:hover,
.msg.bot a[href*="skyscanner."]:hover,
.msg.bot a[href*="justjoin.it"]:hover,
.msg.bot a[href*="instagram.com"]:hover,
.msg.bot a[href*="facebook.com"]:hover,
.msg.bot a[href*="chatgpt.com"]:hover,
.msg.bot a[href*="chat.openai.com"]:hover {
    border-color: var(--accent);
    opacity: 1;
}
/* Generic external link fallback */
.msg.bot a[href^="http"] {
    display: inline-block;
    background: transparent;
    color: var(--text-primary) !important;
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid var(--border);
    text-decoration: none;
    font-weight: 400;
    font-size: 0.95em;
    margin-top: 8px;
    opacity: 1;
    transition: border-color 0.2s;
}
.msg.bot a[href^="http"]:hover {
    border-color: var(--accent);
    opacity: 1;
}

/* Voice-mode floating action button (generic — all deep links) */
.vo-action-surface {
    margin-top: 16px;
    animation: fadeInUp 0.35s ease-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    touch-action: pan-y;
    overscroll-behavior: contain;
}
/* Hide overflow wand buttons until expanded */
.vo-action-surface a.vo-action-overflow {
    display: none;
}
.vo-action-surface.vo-action-expanded a.vo-action-overflow {
    display: inline-flex;
}
/* "Show more" toggle button */
.vo-action-more-btn {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 20px;
    font-size: 0.9em;
    cursor: pointer;
    transition: border-color 0.2s;
}
.vo-action-more-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}
.vo-action-surface a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--text-primary) !important;
    padding: 14px 28px;
    border-radius: 14px;
    border: 1px solid var(--border);
    text-decoration: none;
    font-weight: 300;
    font-size: 1.1em;
    box-shadow: none;
    transition: border-color 0.2s;
}
/* Compact buttons when many wand actions are shown */
.vo-action-surface.vo-action-compact a {
    padding: 10px 18px;
    font-size: 0.92em;
    border-radius: 10px;
    gap: 8px;
    box-shadow: none;
}
.vo-action-surface a:hover {
    border-color: var(--accent);
}
/* Recording playback */
.vo-action-surface button.vo-action--recording {
    display: inline-flex; align-items: center; gap: 10px;
    background: transparent; color: var(--text-primary); border: 1px solid var(--border);
    padding: 14px 28px; border-radius: 14px; font-weight: 300;
    font-size: 1.1em; cursor: pointer; font-family: inherit;
    box-shadow: none;
    transition: border-color 0.2s;
}
.vo-action-surface.vo-action-compact button.vo-action--recording {
    padding: 10px 18px; font-size: 0.92em; border-radius: 10px; gap: 8px;
    box-shadow: none;
}
.vo-action-surface button.vo-action--recording:hover { border-color: var(--accent); }

/* ── Inline recording play button (text-mode chat bubbles) ── */
.rec-play-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; color: var(--accent); border: 1px solid var(--accent);
    padding: 4px 12px; border-radius: 8px; font-size: 0.88em;
    cursor: pointer; font-family: inherit; font-weight: 300;
    vertical-align: middle; transition: border-color 0.2s;
}
.rec-play-btn:hover { border-color: var(--text-primary); }
.rec-play-btn i { font-size: 0.95em; }

/* ── Recording button group (play + transcribe + download) ── */
.rec-btn-group {
    display: inline-flex; gap: 4px; align-items: center;
    flex-wrap: wrap; vertical-align: middle;
}
.rec-btn-group .rec-play-btn { border-radius: 8px 0 0 8px; }
.rec-btn-group .rec-action-btn:last-child { border-radius: 0 8px 8px 0; }
.rec-btn-group .rec-action-btn:not(:last-child) { border-radius: 0; }
.rec-action-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: transparent; color: var(--text-primary); border: 1px solid var(--border);
    padding: 4px 10px; border-radius: 8px; font-size: 0.84em;
    cursor: pointer; font-family: inherit; font-weight: 300;
    vertical-align: middle; transition: border-color 0.2s, opacity 0.2s;
}
.rec-action-btn:hover { border-color: var(--accent); }
.rec-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rec-action-btn i { font-size: 0.9em; }

/* Voice-mode inline recording actions (play/download/transcribe) */
#vo-rec-actions {
    display: flex; justify-content: center; margin-top: 10px;
}
#vo-rec-actions .rec-btn-group {
    display: inline-flex; gap: 4px; align-items: center;
}
#vo-rec-actions .rec-play-btn,
#vo-rec-actions .rec-action-btn {
    padding: 8px 14px; font-size: 0.92em;
}

/* Voice-only wand recording button group */
.vo-action-surface .vo-rec-group {
    display: flex; gap: 6px; align-items: center;
}
.vo-action-surface .vo-rec-sub-btn {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-primary); background: transparent;
    border: 1px solid var(--border); padding: 10px 16px;
    border-radius: 10px; font-weight: 300; font-size: 0.92em;
    cursor: pointer; font-family: inherit;
    transition: border-color 0.2s;
}
.vo-action-surface .vo-rec-sub-btn:hover { border-color: var(--accent); }

/* ── Inline Timer Widget ─────────────────────────────────────── */
#maigica-timer-overlay {
    position: fixed;
    top: 80px;
    right: 16px;
    z-index: 9999;
    background: var(--bg-card);
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 16px;
    padding: 12px 16px;
    min-width: 150px;
    backdrop-filter: blur(8px);
    animation: timer-slide-in 0.3s ease-out;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
@keyframes timer-slide-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
#maigica-timer-overlay .timer-display {
    display: flex;
    align-items: center;
    gap: 10px;
}
#maigica-timer-overlay .timer-icon {
    color: #a78bfa;
    font-size: 1.2em;
}
#maigica-timer-overlay .timer-time {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 1.5em;
    font-weight: 600;
    color: #e2e8f0;
    flex: 1;
}
#maigica-timer-overlay .timer-close {
    background: none;
    border: none;
    color: #8b949e;
    font-size: 1.3em;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
#maigica-timer-overlay .timer-close:hover { color: #e2e8f0; }
#maigica-timer-overlay .timer-progress {
    margin-top: 8px;
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}
#maigica-timer-overlay .timer-bar {
    height: 100%;
    background: linear-gradient(90deg, #a78bfa, #7c3aed);
    border-radius: 2px;
    transition: width 1s linear;
    width: 0%;
}
#maigica-timer-overlay.timer-done {
    border-color: #ef4444;
    animation: timer-pulse 0.5s ease-in-out infinite alternate;
}
#maigica-timer-overlay.timer-done .timer-time { color: #ef4444; }
#maigica-timer-overlay.timer-done .timer-icon { color: #ef4444; }
@keyframes timer-pulse {
    from { box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); }
    to   { box-shadow: 0 0 25px rgba(239, 68, 68, 0.6); }
}
.vo-action-surface a i {
    font-size: 1.3em;
}
.msg.bot code {
    background: rgba(255,255,255,0.06);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.88em;
    font-family: 'Fira Code', 'Consolas', monospace;
}
.msg.bot pre {
    background: var(--bg-input);
    padding: 8px 10px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.4em 0;
    font-size: 0.85em;
    line-height: 1.4;
}
.msg.bot pre code {
    background: none;
    padding: 0;
    border-radius: 0;
}
.msg.bot blockquote {
    border-left: 3px solid var(--accent);
    margin: 0.4em 0;
    padding: 2px 0 2px 10px;
    opacity: 0.85;
}
.msg.bot hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0.5em 0;
}
.msg.bot table {
    border-collapse: collapse;
    margin: 0.4em 0;
    font-size: 0.88em;
    width: 100%;
}
.msg.bot th, .msg.bot td {
    border: 1px solid var(--border);
    padding: 4px 8px;
    text-align: left;
}
.msg.bot th {
    background: transparent;
    font-weight: 300;
}

/* ===== Input Row ===== */
.input-row {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px 24px calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 100000;
}
html:not(.style-minimal) .input-row {
    padding-left: 12px;
    padding-right: 12px;
}
html.has-bg-photo:not(.style-minimal) .input-row {
    background: var(--bg-card);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 25%, rgba(0,0,0,1) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 25%, rgba(0,0,0,1) 100%);
}
.input-row-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 640px;
    margin: 0 auto;
}
html:not(.style-minimal) .input-row-inner {
    max-width: none;
}
#prompt {
    flex: 1;
    min-width: 0;
    padding: 9px 14px;
    border-radius: 20px;
    font-size: 1rem;
    background: var(--bg-input);
    color: var(--text-secondary);
    border: 1px solid transparent;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}
html:not(.style-minimal) #prompt {
    min-width: 65dvw;
}
#prompt::placeholder {
    color: var(--text-muted);
}
#prompt:focus {
    border-color: var(--accent);
}

#send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}
#send-btn:hover, #send-btn:focus {
    color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
    background: transparent;
}
#send-btn svg {
    display: block;
    transform: translateX(1px);
}
body.voice-only-mode #send-btn {
    display: none !important;
}

/* Mic button (chat input row) */
#mic-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    flex-shrink: 0;
}
#mic-btn:hover, #mic-btn:focus {
    color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
    background: transparent;
}
#mic-btn.recording {
    background: var(--danger-dim);
    border-color: var(--danger);
    animation: mic-pulse 1.5s ease-in-out infinite;
}
#mic-btn.recording i {
    color: var(--danger) !important;
}
@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* ===== Loading Dots ===== */
.dots {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 32px;
    height: 28px;
    text-align: center;
    margin: 0 auto;
}
.dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 2px;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0.4;
    animation: blink 1.2s infinite both;
}
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink {
    0%, 80%, 100% { opacity: 0.4; }
    40% { opacity: 1; }
}

/* ===== Voice-Only Mode ===== */
body.voice-only-mode {
    background: var(--bg-primary);
}
body.voice-only-mode #chat {
    background: transparent;
    box-shadow: none;
    border: none;
    max-width: 100%;
    height: 100vh;
    height: 100dvh; /* respects dynamic viewport on mobile */
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
}
body.voice-only-mode #messages,
body.voice-only-mode .input-row,
body.voice-only-mode #new-session {
    display: none !important;
}

/* Server-controlled visibility */
.ui-hidden,
body.voice-only-mode .ui-hidden {
    display: none !important;
}
/* Multi-view hidden (rec button hidden when transcriptions view owns recording) */
.mv-hidden {
    display: none !important;
}

body.voice-only-mode .chat-header {
    padding: 14px 24px;
    background: transparent;
    border-bottom: none;
    margin: 0;
}
body.voice-only-mode .chat-title {
    color: var(--accent);
    font-size: 1.3rem;
    font-weight: 300;
}
body.voice-only-mode .new-session-btn {
    background: transparent;
    border-color: var(--border);
    color: var(--text-secondary);
}
body.voice-only-mode .new-session-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
body.voice-only-mode #voice-only-btn {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}

/* Brand logo scales up in voice mode (viewport-responsive) */
body.voice-only-mode .brand-logo {
    height: clamp(36px, 5vw, 56px);
    max-width: clamp(160px, 25vw, 280px);
}
body.voice-only-mode .brand-fallback-logo svg {
    width: clamp(108px, 16vw, 180px);
    height: auto;
}
body.voice-only-mode .powered-by {
    font-size: clamp(0.6rem, 1vw, 0.8rem);
}
body.voice-only-mode .powered-by svg {
    width: clamp(68px, 10vw, 100px);
    height: auto;
}

/* ===== Large Centered Voice Button ===== */
.voice-only-mic-area {
    display: none;
    position: relative;
}
body.voice-only-mode .voice-only-mic-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex: 1;
    width: 100%;
    position: relative;
    overflow: hidden;
}
body.voice-only-mode.vo-layout-video .voice-only-mic-area {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* --- Background photo (full bleed behind character) --- */
.vo-bg-photo {
    display: none;
}
body.voice-only-mode.vo-layout-photo .vo-bg-photo {
    display: block;
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}
body.voice-only-mode.vo-layout-photo .vo-bg-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(13, 17, 23, 0.3) 0%,
        rgba(13, 17, 23, 0.1) 30%,
        rgba(13, 17, 23, 0.5) 70%,
        rgba(13, 17, 23, 0.85) 100%
    );
    z-index: 1;
}

/* Photo layout: controls pinned via CSS vars */
body.voice-only-mode.vo-layout-photo .vo-controls {
    position: absolute;
    top: var(--vo-controls-top, 50%);
    left: var(--vo-controls-left, 50%);
    transform: translate(-50%, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Info layer: action icons + status, shared by character & photo --- */
.vo-info-layer {
    display: none;
}
/* Fallback: show info layer inline when no layout class (no voiceScreen image) */
body.voice-only-mode .vo-info-layer {
    display: contents;
}
body.voice-only-mode.vo-layout-character .vo-info-layer,
body.voice-only-mode.vo-layout-photo .vo-info-layer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: max-content;
    max-width: 90vw;
    /* Default: below mic */
    top: calc(var(--vo-controls-top, 50%) + 120px);
    max-height: calc(100% - var(--vo-controls-top, 50%) - 130px);
    overflow-y: auto;
}
/* When mic is in lower half: flip above */
body.voice-only-mode.vo-controls-above .vo-info-layer {
    top: auto;
    bottom: calc(100% - var(--vo-controls-top, 50%) + 40px);
}
body.voice-only-mode.vo-layout-character .vo-info-layer .vo-action-surface,
body.voice-only-mode.vo-layout-photo .vo-info-layer .vo-action-surface {
    max-height: 28vh;
}
/* Mascot layout: info layer stays in normal flow (not absolute) */
body.voice-only-mode.vo-layout-mascot .vo-info-layer {
    display: contents;
}

/* --- Character background (full bleed behind controls) --- */
.vo-character-bg {
    display: none;
}
body.voice-only-mode.vo-layout-character .vo-character-bg {
    display: block;
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 1;
}
body.voice-only-mode.vo-layout-character .vo-character-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(13, 17, 23, 0.3) 0%,
        rgba(13, 17, 23, 0.1) 30%,
        rgba(13, 17, 23, 0.5) 70%,
        rgba(13, 17, 23, 0.85) 100%
    );
    z-index: 2;
}

/* --- Video avatar (two overlapping <video> elements, crossfade) --- */
.vo-video-bg {
    display: none;
}
body.voice-only-mode.vo-layout-video .vo-video-bg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
body.voice-only-mode.vo-layout-video .vo-video-bg.active {
    opacity: 1;
    z-index: 2;
}
/* Gradient overlay above videos */
body.voice-only-mode.vo-layout-video .vo-video-overlay {
    display: block;
}
body.voice-only-mode.vo-layout-video::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}
/* Controls + info layer above video */
body.voice-only-mode.vo-layout-video .vo-controls {
    position: absolute;
    top: var(--vo-controls-top, 50%);
    left: var(--vo-controls-left, 50%);
    transform: translate(-50%, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 4;
}
body.voice-only-mode.vo-layout-video .vo-info-layer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    width: max-content;
    max-width: 90vw;
    top: calc(var(--vo-controls-top, 50%) + 120px);
    max-height: calc(100% - var(--vo-controls-top, 50%) - 130px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
body.voice-only-mode.vo-layout-video.vo-controls-above .vo-info-layer {
    top: auto;
    bottom: calc(100% - var(--vo-controls-top, 50%) + 40px);
    max-height: calc(var(--vo-controls-top, 50%) - 50px);
}
body.voice-only-mode.vo-layout-video .vo-mic-btn {
    background: rgba(13, 17, 23, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
body.voice-only-mode.vo-layout-video .vo-status {
    background: rgba(13, 17, 23, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 10px;
    padding: 8px 14px;
    max-width: 400px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
body.voice-only-mode.vo-layout-video .vo-info-layer .vo-action-surface {
    max-height: 28vh;
}

/* --- Mascot image (circular, above mic) --- */
.vo-mascot {
    display: none;
}
body.voice-only-mode.vo-layout-mascot .vo-mascot {
    display: block;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 3px solid var(--accent);
    box-shadow: 0 0 40px var(--accent-dim), 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 2;
    animation: mascot-float 4s ease-in-out infinite;
}
@keyframes mascot-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
body.voice-only-mode.vo-layout-mascot .vo-mascot.speaking {
    animation: mascot-speak 0.6s ease-in-out infinite;
    border-color: var(--accent);
    box-shadow: 0 0 60px var(--accent-glow), 0 8px 32px rgba(0, 0, 0, 0.4);
}
@keyframes mascot-speak {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* --- Controls overlay (sits above character bg) --- */
.vo-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 2;
    position: relative;
}

/* --- Character layout: controls pinned over character bg --- */
body.voice-only-mode.vo-layout-character .vo-controls {
    position: absolute;
    top: var(--vo-controls-top, 50%);
    left: var(--vo-controls-left, 50%);
    transform: translate(-50%, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
}
body.voice-only-mode.vo-layout-character .vo-btn-row {
    flex-shrink: 0;
}
body.voice-only-mode.vo-layout-character .vo-mic-btn {
    background: rgba(13, 17, 23, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
body.voice-only-mode.vo-layout-character .vo-status {
    background: rgba(13, 17, 23, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 10px;
    padding: 8px 14px;
    max-width: 400px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}

/* --- Mascot layout: vertically centered stack --- */
body.voice-only-mode.vo-layout-mascot .voice-only-mic-area {
    justify-content: center;
    gap: 28px;
}
body.voice-only-mode.vo-layout-mascot .vo-mic-btn {
    width: 110px;
    height: 110px;
    font-size: 2.5rem;
}


.vo-btn-row {
    display: flex;
    align-items: center;
    gap: 32px;
}
.voice-only-mic-area .vo-mic-btn {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 3rem;
    cursor: pointer;
    box-shadow: 0 0 40px var(--accent-dim);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}
.voice-only-mic-area .vo-mic-btn:hover:not(:disabled) {
    transform: scale(1.04);
    box-shadow: 0 0 60px var(--accent-glow);
    background: var(--accent-dim);
}
.voice-only-mic-area .vo-mic-btn:disabled {
    cursor: default;
    opacity: 0.5;
}
.voice-only-mic-area .vo-mic-btn.recording {
    background: var(--accent-dim);
    border-color: var(--accent);
    box-shadow: 0 0 0 0 var(--accent-glow);
    animation: pulse-glow 2s ease-in-out infinite;
}
/* Speaking state — bot is talking */
.voice-only-mic-area .vo-mic-btn.speaking {
    background: transparent;
    border-color: var(--accent);
    box-shadow: 0 0 30px var(--accent-dim);
    animation: speak-breathe 1.5s ease-in-out infinite;
}
@keyframes speak-breathe {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 30px var(--accent-dim);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 0 50px var(--accent-glow);
    }
}
/* Mic off dimmed */
.voice-only-mic-area .vo-mic-btn.mic-off {
    border-color: var(--border);
    color: var(--text-muted);
    box-shadow: none;
    animation: none;
}
/* Hidden during welcome TTS — fade in when ready */
.voice-only-mic-area .vo-mic-btn.vo-pending {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.5); }
    70% { box-shadow: 0 0 0 45px rgba(167, 139, 250, 0); }
    100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); }
}

/* ===== Voice Recorder Toggle ===== */
.rec-toggle {
    position: relative;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.rec-toggle.rec-active {
    color: var(--danger) !important;
    border-color: var(--danger) !important;
    background: var(--danger-dim) !important;
    animation: rec-blink 1.2s ease-in-out infinite;
}
@keyframes rec-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
/* Transcribing state — Whisper processing (waves animation) */
.voice-only-mic-area .vo-mic-btn.transcribing {
    border-color: var(--accent);
    color: var(--accent);
    background: transparent;
    box-shadow: 0 0 30px var(--accent-dim);
    animation: transcribe-waves 1.2s ease-in-out infinite;
}
#mic-btn.transcribing {
    color: var(--accent);
    animation: transcribe-waves 1.2s ease-in-out infinite;
}
@keyframes transcribe-waves {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px var(--accent-dim);
        opacity: 1;
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 50px var(--accent-glow);
        opacity: 0.7;
    }
}

/* Wand button in voice-recorder mode — red tint + red pulse */
.voice-only-mic-area .vo-mic-btn.voice-recording {
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.5);
    animation: rec-pulse-glow 2s ease-in-out infinite;
}
@keyframes rec-pulse-glow {
    0%   { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.5); }
    70%  { box-shadow: 0 0 0 45px rgba(248, 113, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
}
/* Transcript preview during recording */
.rec-transcript-preview {
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: center;
    max-width: 320px;
    max-height: 4em;
    overflow-y: auto;
    scrollbar-width: none;
    opacity: 0.7;
    font-style: italic;
}
.rec-timer {
    color: var(--danger);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    text-align: center;
    width: 100%;
    padding: 4px 0;
}

/* ===== Text-mode recording bubble ===== */
.rec-active-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rec-active-msg .rec-blink-dot {
    color: var(--danger);
    font-size: 0.6rem;
    animation: rec-blink 1.2s ease-in-out infinite;
}
.rec-active-msg .rec-active-label {
    color: var(--text-secondary);
    font-style: italic;
}
.rec-inline-stop-btn {
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.rec-inline-stop-btn:hover {
    background: var(--danger-hover, #dc2626);
}

.voice-only-mic-area .vo-status {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 400;
    text-align: center;
    max-width: 320px;
    min-height: 6em;
    max-height: 6em;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    font-family: inherit;
}
.voice-only-mic-area .vo-status:empty {
    visibility: hidden;
}
.voice-only-mic-area .vo-status::-webkit-scrollbar {
    display: none;
}

/* Voice activation checkbox */
.vo-setting {
    display: none;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    cursor: pointer;
    user-select: none;
    margin-top: 0;
}
body.voice-only-mode .vo-setting {
    display: flex;
}
.vo-setting input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}
.vo-setting span {
    opacity: 0.8;
}

.voice-only-mic-area .vo-smalltalk {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.9rem;
    font-weight: 400;
    text-align: center;
    max-width: 360px;
    min-height: 1.5em;
    opacity: 0.75;
    font-family: inherit;
}

/* Small-talk transient messages */
.msg.small-talk {
    font-style: italic;
    opacity: 0.7;
    animation: fadeInUp 0.35s ease-out;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 0.7; transform: translateY(0); }
}

/* System notification (e.g. session expired) */
.msg.system-note {
    font-style: italic;
    text-align: center;
    opacity: 0.65;
    font-size: 0.9em;
    color: #888;
    border: none;
    background: transparent;
}

/* ── Shared Wand/MV Component Styles ──────────────────── */

/* Shared list styles */
.wand-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Basket add input row */
.wand-basket-add {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.wand-basket-add input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
}
.wand-basket-add input:focus { border-color: var(--accent); }
.wand-small-btn {
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.9rem;
}
.wand-small-btn:hover { background: var(--accent-glow); }

/* Generic card item */
.wand-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text-primary);
    font-size: 0.88rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
}
.wand-item:hover { border-color: var(--accent); }
.wand-item-body { flex: 1; min-width: 0; }
.wand-item-title {
    font-weight: 600;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wand-item-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.wand-item-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}
.wand-icon-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 1rem;
}
.wand-icon-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.wand-icon-btn.danger:hover { color: var(--danger); }

/* Collection table */
.wand-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.wand-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.wand-table th {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}
.wand-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wand-table tr:hover td { background: var(--bg-card); }
.wand-table td input {
    width: 100%;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.82rem;
    outline: none;
    box-sizing: border-box;
}
.wand-table td input:focus { border-color: var(--accent); }

/* Card mode for collections with 4+ columns */
.wand-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
}
.wand-card-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 0.84rem;
}
.wand-card-label { color: var(--text-secondary); }
.wand-card-value { color: var(--text-primary); text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wand-card .wand-item-actions { margin-top: 6px; justify-content: flex-end; }

/* Email badges */
.wand-badge {
    display: inline-block;
    background: var(--accent);
    color: var(--bg-primary);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}
.wand-email-unread { font-weight: 600; }
.wand-email-read { opacity: 0.7; }

/* Loading & empty states */
.wand-loading, .wand-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 24px 0;
    font-size: 0.88rem;
}
.wand-loading i { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Undo toast */
.wand-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-hover);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    z-index: 950;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.wand-toast button {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Wand Modal */
.wand-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 960;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wand-modal {
    background: var(--bg-card, #0a0a0a);
    border: 1px solid var(--border, #333);
    border-radius: 12px;
    padding: 20px;
    min-width: 280px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.wand-modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 14px;
}
.wand-modal-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
    margin-top: 10px;
}
.wand-modal-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    background: var(--bg-input, #141414);
    color: var(--text-primary);
    font-size: 0.9rem;
    box-sizing: border-box;
}
.wand-modal-input:focus { border-color: var(--accent); outline: none; }
textarea.wand-modal-input { resize: vertical; font-family: inherit; }
.wand-modal-btns {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}
.wand-small-btn.primary {
    background: var(--accent);
    color: #fff;
}
.wand-small-btn.danger {
    background: #dc3545;
    color: #fff;
}

/* Recording badges */
.wand-rec-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 600;
}
.wand-rec-badge.transcribed { background: rgba(63,185,80,0.15); color: #3fb950; }
.wand-rec-badge.summarized { background: rgba(99,148,255,0.15); color: #6394ff; }
.wand-rec-badge.not-transcribed { background: rgba(200,200,200,0.1); color: var(--text-muted, #666); }

/* Recording transcript preview */
.wand-rec-preview {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Recording action buttons row */
.wand-rec-item { flex-wrap: wrap; }
.wand-rec-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}
.wand-rec-actions .wand-icon-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 0.85rem;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.wand-rec-actions .wand-icon-btn:hover {
    background: var(--accent);
    color: #fff;
}
.wand-rec-actions .wand-icon-btn.danger {
    border-color: var(--danger, #e53e3e);
    color: var(--danger, #e53e3e);
}
.wand-rec-actions .wand-icon-btn.danger:hover {
    background: var(--danger, #e53e3e);
    color: #fff;
}

/* ===== App Multi-View (MV2) — Tab Bar & View Containers ===== */

.app-tab-bar {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    padding: 0;
    z-index: 100001;
    padding-bottom: env(safe-area-inset-bottom, 0);
    min-height: 48px;
}
.app-tab-bar button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px 6px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-family: inherit;
    text-transform: lowercase;
    cursor: pointer;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.app-tab-bar button i {
    font-size: 1.25rem;
    display: block;
    line-height: 1;
    margin-bottom: 1px;
}
.app-tab-bar button.active {
    color: var(--accent);
}
.app-tab-bar button:hover:not(.active) {
    color: var(--text-primary);
}

/* When tab bar is visible, add bottom padding to #chat so content isn't hidden */
body.has-tab-bar #chat {
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0));
}
body.has-tab-bar .input-row {
    bottom: 48px;
}

/* Hide chat-specific header buttons when a non-chat view is active */
body.view-active:not(.view-chat) .header-actions .new-session-btn,
body.view-active:not(.view-chat) .header-actions #voice-only-btn {
    visibility: hidden;
    pointer-events: none;
}

/* View containers — fill available space between header and tab bar */
.app-view {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: calc(48px + env(safe-area-inset-bottom, 0));
    max-width: 600px;
    margin: 0 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 24px;
    color: var(--text-primary);
}
/* No tab bar (single-view staff) → view extends to bottom */
body:not(.has-tab-bar) .app-view {
    bottom: env(safe-area-inset-bottom, 0);
}
.app-view-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 0.9rem;
    gap: 12px;
}
.app-view-placeholder i {
    font-size: 2.5rem;
    opacity: 0.4;
}

/* Hide chat elements when a non-chat view is active */
body.view-active:not(.view-chat) #messages,
body.view-active:not(.view-chat) .input-row,
body.view-active:not(.view-chat) #vo-area {
    display: none !important;
}
/* Show the active view container */
body.view-active .app-view.view-visible {
    display: block;
}

/* Voice-only mode: hide tab bar (voice is full-screen immersive) */
body.voice-only-mode .app-tab-bar {
    display: none !important;
}

/* ── MV view modules (MV6/MV7) ────────────────────────────────────────── */
/* Sub-tabs for journal view */
.mv-sub-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.mv-sub-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.mv-sub-tab i { font-size: 0.9rem; }
.mv-sub-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.mv-sub-tab:hover:not(.active) {
    color: var(--text-secondary);
}

/* Header row (email title + refresh) */
.mv-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* Basket input in MV journal */
.mv-pane-notes .wand-basket-add {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.mv-pane-notes .wand-basket-add input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
}
.mv-pane-notes .wand-basket-add input:focus {
    border-color: var(--accent);
}

/* ── MV5 Recordings ─────────────────────────────────────────────── */
.mv-trans-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px 4px;
    min-height: 72px; /* btn 48 + timer 16 + gaps — prevents list jump */
}
.mv-trans-rec-btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: background 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.mv-trans-rec-btn:active { transform: scale(0.92); }
.mv-trans-rec-btn.recording {
    background: #e53e3e;
    animation: mv-rec-pulse 1.2s infinite;
}
@keyframes mv-rec-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.5); }
    50% { box-shadow: 0 0 0 10px rgba(229, 62, 62, 0); }
}
.mv-trans-rec-timer {
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    color: #e53e3e;
    font-weight: 600;
    min-height: 16px; /* reserve space even when hidden */
}
.mv-trans-list { padding: 0 2px; }

/* ===== Style: minimal (?style=minimal) ===== */
/* Activated by client.js when ?style=minimal is in the URL.
   Strips bubble chrome, fades messages in, and floats the input row off the
   bottom edge on desktop. Voice-only mode hides .input-row + #messages
   already, so these rules have no effect there. */

/* Bubbles → text-only (no bg, no border, no width cap) */
html.style-minimal .msg,
html.style-minimal .msg.user,
html.style-minimal .msg.bot {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: none;
}
html.style-minimal #messages {
    gap: 0;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE / legacy Edge */
}
/* Top fade-out — only when actually scrolled. The .is-scrolled class is
   toggled by client.js based on #messages.scrollTop, so the first message
   sitting at the top isn't faded. NOTE: disabled under has-bg-photo because
   `mask-image` on a parent isolates its rendering layer and breaks
   `backdrop-filter` on nested children (the .exchange-card frosted blur
   stops working on scroll). On photo backgrounds the cards already have
   a clear visual edge — the fade isn't needed. */
html.style-minimal #messages.is-scrolled {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 100%);
}
html.has-bg-photo.style-minimal #messages.is-scrolled {
    -webkit-mask-image: none;
            mask-image: none;
}
html.style-minimal #messages::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
/* Input-row icon order: input field first, then mic, then send. */
html.style-minimal .input-row-inner #prompt   { order: 1; }
html.style-minimal .input-row-inner #mic-btn  { order: 2; }
html.style-minimal .input-row-inner #send-btn { order: 3; }
html.style-minimal .bot-msg-wrapper {
    margin: 0;
}

/* User speech: large light-grey question, tight against the response below */
html.style-minimal .msg.user {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-primary);
    align-self: flex-start;      /* was flex-end on the base .user rule */
    margin-top: 18px;            /* breathing room above (separates turns) */
    margin-bottom: 2px;          /* tight against the bot response */
}
html.style-minimal #messages > .msg.user:first-of-type {
    margin-top: 0;
}

/* Bot response: 1.2rem, normal line-height */
html.style-minimal .msg.bot {
    color: var(--text-primary);
    font-size: 1.2rem;
    line-height: 1.5;
}

/* Loading dots: lighter grey (matches input-row icons) */
html.style-minimal .dot {
    background: var(--text-muted);
}

/* Fade-in on entry (user message + bot wrapper appearing in #messages) */
@keyframes minimalMsgIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
html.style-minimal #messages > .msg,
html.style-minimal #messages > .bot-msg-wrapper,
html.style-minimal #messages > .exchange-card,
html.style-minimal .exchange-card > .bot-msg-wrapper {
    animation: minimalMsgIn 220ms ease-out both;
}

/* Per-token fade-in during streaming. Each <span class="minimal-token"> appended
   by the response-chunk handler animates from 0→1 opacity over 220ms. With a 30ms
   word interval, ~7 tokens overlap mid-fade for a soft typing trail. */
@keyframes minimalTokenIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
html.style-minimal .minimal-token {
    animation: minimalTokenIn 220ms ease-out both;
}

/* Top-row buttons (new-session, voice, debug): same light-grey treatment as
   the input row icons — no border, transparent bg, --text-muted baseline,
   --text-primary on hover. */
html.style-minimal .new-session-btn {
    border: none;
    color: var(--text-muted);
    background: transparent;
    box-shadow: none;
}
html.style-minimal .new-session-btn:hover,
html.style-minimal .new-session-btn:focus {
    color: var(--text-primary);
    border: none;
    background: transparent;
    box-shadow: none;
}

/* ===== Chat background photo (?bg=<url>) =====
   Activated by client.js when ?bg=... is in the URL. Applies the photo as
   the body background with a top→bottom soft scrim for text legibility,
   plus a subtle text-shadow halo behind chat text so messages stay readable
   without dimming the photo. Independent of style-minimal. */
/* Photo backdrop applies in *all* styles. Painted on html::before so we can
   animate a slow zoom (transform on body bg-image isn't possible). Body's
   own bg goes transparent here so the photo shows through. Classic bubbles
   still have their own opaque background, sitting on top of the photo. */
html.has-bg-photo::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--chat-bg-url);
    background-size: cover;
    background-position: center;
    animation: heroZoom 40s ease-in-out infinite alternate;
    pointer-events: none;
    transform-origin: center center;
}
html.has-bg-photo body {
    background: transparent;
}
/* Classic style + photo: message bubbles get frosted glass over the photo.
   Voice-mode mic button stays opaque. */
html.has-bg-photo:not(.style-minimal) .msg.user,
html.has-bg-photo:not(.style-minimal) .msg.bot {
    background: color-mix(in srgb, var(--bg-card) 90%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
html.has-bg-photo:not(.style-minimal) .voice-only-mic-area .vo-mic-btn {
    background: var(--bg-card);
}
@keyframes heroZoom {
    0%   { transform: scale(1); }
    100% { transform: scale(1.08); }
}

/* ===== Frosted card treatment over bg photo =====
   Each user→bot exchange (and solo bot messages) renders inside one
   .exchange-card; the input row + pill bar form a second card at the
   bottom. Photo unobscured outside the cards. */
html.has-bg-photo.style-minimal .exchange-card {
    background: rgba(243, 243, 243, 0.50);
    -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
    border-radius: 50px;
    padding: 18px 22px;
    margin: 10px 0;
}
html.has-bg-photo.style-minimal .exchange-card .msg,
html.has-bg-photo.style-minimal .exchange-card .msg.user,
html.has-bg-photo.style-minimal .exchange-card .msg.bot {
    background: transparent;
    border: none;
    box-shadow: none;
}
html.has-bg-photo.style-minimal[data-theme="dark"] .exchange-card {
    background: rgba(20, 24, 32, 0.50);
}
@media (prefers-color-scheme: dark) {
    html.has-bg-photo.style-minimal:not([data-theme="light"]) .exchange-card {
        background: rgba(20, 24, 32, 0.50);
    }
}

/* Bottom card: .input-row holds the pill bar + input-row-inner together.
   Mobile = full-viewport-width, no rounded corners, top-edge mask fade.
   Desktop = pill-shaped 580px max card, no fade. */
html.has-bg-photo.style-minimal .input-row {
    background: rgba(243, 243, 243, 0.50);
    -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
    border-top: none;
    left: 0;
    right: 0;
    border-radius: 0;
    /* Extra top-padding gives the mask a tall fade region above content. */
    padding: 60px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 35%, transparent 100%);
            mask-image: linear-gradient(to top, #000 0%, #000 35%, transparent 100%);
}
html.has-bg-photo.style-minimal[data-theme="dark"] .input-row {
    background: rgba(20, 24, 32, 0.50);
}
@media (prefers-color-scheme: dark) {
    html.has-bg-photo.style-minimal:not([data-theme="light"]) .input-row {
        background: rgba(20, 24, 32, 0.50);
    }
}
@media (min-width: 820px) {
    html.has-bg-photo.style-minimal .input-row {
        bottom: 24px;
        left: 0;
        right: 0;
        max-width: 580px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 50px;
        padding: 6px 10px;
        -webkit-mask-image: none;
                mask-image: none;
    }
}
/* Pills inside the bottom card — chips become borderless transparent so
   they don't fight the card's frosted bg. */
html.has-bg-photo.style-minimal .pill-btn {
    background: transparent;
    border: none;
    color: var(--text-primary);
}
html.has-bg-photo.style-minimal .pill-btn:hover,
html.has-bg-photo.style-minimal .pill-btn:focus {
    background: rgba(255, 255, 255, 0.4);
    border: none;
}
html.has-bg-photo.style-minimal[data-theme="dark"] .pill-btn:hover,
html.has-bg-photo.style-minimal[data-theme="dark"] .pill-btn:focus {
    background: rgba(255, 255, 255, 0.1);
}
/* Input-row-inner sits inside the card — drop its own bg/chrome. */
html.has-bg-photo.style-minimal .input-row-inner {
    background: transparent;
}
html.has-bg-photo.style-minimal #prompt {
    background: transparent;
    border: none;
}

/* Make #messages extend behind chat-header (top) and input-row (bottom) so
   scrolled cards visibly fade THROUGH those frosted-fading bars. #chat's
   own padding goes to 0; #messages takes over via its own padding so
   content starts below the header and ends above the input row at rest,
   but scrolling moves cards into the overlap regions where the header /
   input-row's mask gradient renders them progressively faded. */
html.has-bg-photo.style-minimal #chat {
    padding-top: 0;
    padding-bottom: 0;
}
html.has-bg-photo.style-minimal #messages {
    padding-top: 120px;
    padding-bottom: 120px;
}
html.has-bg-photo.style-minimal body.brand-assistant #messages {
    padding-top: 170px;
}
html.has-bg-photo.style-minimal body.has-pills #messages {
    padding-bottom: 220px; /* narrow: 2+ pill rows */
}
@media (min-width: 540px) {
    html.has-bg-photo.style-minimal body.has-pills #messages {
        padding-bottom: 20px; /* medium: one pill row */
    }
}
@media (min-width: 820px) {
    /* Desktop input-row is a centered floating 580px pill — cards don't need
       to extend behind it; just clear it. */
    html.has-bg-photo.style-minimal #messages {
        padding-bottom: 100px;
    }
    html.has-bg-photo.style-minimal body.has-pills #messages {
        padding-bottom: 50px;
    }
}


/* Input row chrome removed — mobile keeps bottom-bound */
html.style-minimal .input-row {
    background: transparent;
    border-top: none;
}

/* Input field: borderless transparent */
html.style-minimal #prompt {
    background: transparent;
    border: 1px solid transparent;
    transition: border-color 0.15s ease;
}
html.style-minimal #prompt:focus {
    border-color: transparent;
}

/* Mic + send: bright-grey baseline, near-black on hover (no accent tint) */
html.style-minimal #mic-btn,
html.style-minimal #send-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    transition: color 0.15s ease;
}
html.style-minimal #mic-btn:hover,
html.style-minimal #mic-btn:focus,
html.style-minimal #send-btn:hover,
html.style-minimal #send-btn:focus {
    color: var(--text-primary);
    background: transparent;
    border: none;
}
html.style-minimal #mic-btn.recording {
    color: var(--danger);
    border: none;
    background: transparent;
}
html.style-minimal #mic-btn.recording i {
    color: var(--danger) !important;
}

/* Desktop: float input row well above the bottom edge, transparent pill */
@media (min-width: 820px) {
    html.style-minimal .input-row {
        bottom: 36px;
        padding: 0 24px;
    }
    html.style-minimal .input-row-inner {
        background: transparent;
        border-radius: 28px;
        padding: 6px 10px;
    }
    html.style-minimal #chat {
        padding-bottom: 104px;
    }
}

/* ===== Pill bar (lives inside .input-row, above .input-row-inner) ===== */
.pill-bar {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 4px 6px;
    display: flex;
    justify-content: center;
}
.pill-bar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.pill-bar-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 8px;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}
.pill-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    border-radius: 9999px;
    font-size: 14.72px;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pill-btn:hover,
.pill-btn:focus {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    outline: none;
}
.pill-btn i { margin-right: 6px; opacity: 0.8; }

/* System pills (KB info, pitch) — amber accent to distinguish from question pills */
.pill-btn--system {
    border-color: rgba(201, 169, 110, 0.5);
    background: rgba(201, 169, 110, 0.08);
    color: #c9a96e;
}
.pill-btn--system:hover,
.pill-btn--system:focus {
    background: rgba(201, 169, 110, 0.16);
    border-color: rgba(201, 169, 110, 0.75);
    color: #c9a96e;
}

/* When pills are visible, give #chat enough bottom padding so the last
   message clears the (now taller) input-row containing the pill bar.
   On narrow screens pills wrap to 2–3 rows so we need more clearance.
   #messages margin-bottom mirrors these values to keep the scroll end clear. */
body.has-pills #chat {
    padding-bottom: 220px; /* narrow: room for 2+ pill rows */
}
body.has-pills #messages {
    margin-bottom: 0px;
}
@media (min-width: 540px) {
    body.has-pills #chat {
        padding-bottom: 170px; /* medium: one pill row + input */
    }
    body.has-pills #messages {
        margin-bottom: 210px;
    }
}
@media (min-width: 820px) {
    body.has-pills #chat {
        padding-bottom: 132px; /* wide: single row, compact */
    }
    body.has-pills #messages {
        margin-bottom: 170px;
    }
    html.style-minimal body.has-pills #chat {
        padding-bottom: 160px;
    }
}

/* Minimal-style pill chrome — borderless, transparent, light-grey text. */
html.style-minimal .pill-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
    padding: 6px 10px;
}
html.style-minimal .pill-btn:hover,
html.style-minimal .pill-btn:focus {
    color: var(--text-primary);
    background: transparent;
    border: none;
}

/* Brand name text (when ui.useAssistantAsBrand is true).
   Default — small inline. Bumped to hero size below under .brand-assistant. */
.brand-name-text {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.brand-tagline-text {
    display: none;
}
body.brand-assistant .chat-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
/* The two text spans live inside .brand-fallback-logo (a flex-row by default
   for SVG alignment). Override to column so the tagline stacks below name. */
body.brand-assistant .brand-fallback-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
body.brand-assistant .brand-name-text {
    font-size: clamp(1rem, 4vw, 3rem);
    font-weight: 100;
    line-height: 1;
    letter-spacing: -0.01em;
    display: block;
    text-transform: none;     /* body has lowercase — preserve owner-set casing */
}
body.brand-assistant .brand-tagline-text {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.3;
    text-transform: none;
}
body.brand-assistant .chat-header {
    padding: 24px 24px 32px;
}
body.brand-assistant #chat {
    padding-top: 132px;
}

/* System-pill bot response: fade in over 280ms (mirrors entrance fade
   for streamed responses; the html block is rendered all at once). */
@keyframes systemBotFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.bot-msg-wrapper.system-html {
    animation: systemBotFadeIn 280ms ease-out both;
}

/* Spinner-bubble — center the dots inside the exchange card. */
#spinner-bubble {
    align-self: center;
    margin: 4px auto;
    width: -moz-fit-content;
    width: fit-content;
    background: transparent;
    border: none;
    padding: 6px 10px;
    box-shadow: none;
}
.exchange-card #spinner-bubble {
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
}
/* Under has-bg-photo + minimal the dots' default --text-muted background
   is too pale against the frosted card. Bump to plain black/white. */
html.has-bg-photo.style-minimal .dot {
    background: #000;
}
html.has-bg-photo.style-minimal[data-theme="dark"] .dot {
    background: #fff;
}
@media (prefers-color-scheme: dark) {
    html.has-bg-photo.style-minimal:not([data-theme="light"]) .dot {
        background: #fff;
    }
}

/* Accent on hover/focus only — input-row icons + pills tint to the
   assistant's accent color when interacted with, while resting state
   stays plain black/white for the neutral card aesthetic. */
html.has-bg-photo.style-minimal #mic-btn:hover,
html.has-bg-photo.style-minimal #mic-btn:focus,
html.has-bg-photo.style-minimal #send-btn:hover,
html.has-bg-photo.style-minimal #send-btn:focus,
html.has-bg-photo.style-minimal .pill-btn:hover,
html.has-bg-photo.style-minimal .pill-btn:focus {
    color: var(--accent);
}
html.has-bg-photo.style-minimal #send-btn:hover svg,
html.has-bg-photo.style-minimal #send-btn:focus svg {
    fill: var(--accent);
}

/* ===== Has-bg-photo: input-area glyphs go plain black ===== */
html.has-bg-photo.style-minimal #prompt,
html.has-bg-photo.style-minimal #prompt::placeholder,
html.has-bg-photo.style-minimal #mic-btn,
html.has-bg-photo.style-minimal #send-btn {
    color: #000;
}
html.has-bg-photo.style-minimal #send-btn svg { fill: #000; }
html.has-bg-photo.style-minimal[data-theme="dark"] #prompt,
html.has-bg-photo.style-minimal[data-theme="dark"] #prompt::placeholder,
html.has-bg-photo.style-minimal[data-theme="dark"] #mic-btn,
html.has-bg-photo.style-minimal[data-theme="dark"] #send-btn { color: #fff; }
html.has-bg-photo.style-minimal[data-theme="dark"] #send-btn svg { fill: #fff; }
@media (prefers-color-scheme: dark) {
    html.has-bg-photo.style-minimal:not([data-theme="light"]) #prompt,
    html.has-bg-photo.style-minimal:not([data-theme="light"]) #prompt::placeholder,
    html.has-bg-photo.style-minimal:not([data-theme="light"]) #mic-btn,
    html.has-bg-photo.style-minimal:not([data-theme="light"]) #send-btn { color: #fff; }
    html.has-bg-photo.style-minimal:not([data-theme="light"]) #send-btn svg { fill: #fff; }
}

/* ===== Has-bg-photo + voice-only mode: frosted vo-mic-btn ===== */
html.has-bg-photo.style-minimal body.voice-only-mode .vo-mic-btn {
    background: rgba(243, 243, 243, 0.50);
    -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
}
html.has-bg-photo.style-minimal body.voice-only-mode .vo-mic-btn:hover:not(:disabled) {
    background: rgba(243, 243, 243, 0.65);
}
html.has-bg-photo.style-minimal[data-theme="dark"] body.voice-only-mode .vo-mic-btn {
    background: rgba(20, 24, 32, 0.50);
}
html.has-bg-photo.style-minimal[data-theme="dark"] body.voice-only-mode .vo-mic-btn:hover:not(:disabled) {
    background: rgba(20, 24, 32, 0.65);
}
@media (prefers-color-scheme: dark) {
    html.has-bg-photo.style-minimal:not([data-theme="light"]) body.voice-only-mode .vo-mic-btn {
        background: rgba(20, 24, 32, 0.50);
    }
    html.has-bg-photo.style-minimal:not([data-theme="light"]) body.voice-only-mode .vo-mic-btn:hover:not(:disabled) {
        background: rgba(20, 24, 32, 0.65);
    }
}

/* ===== Has-bg-photo: top bar frosted with mask gradient fading to bottom ===== */
html.has-bg-photo.style-minimal .chat-header {
    background: rgba(243, 243, 243, 0.50);
    -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
    border-bottom: none;
    /* Extra bottom-padding gives the mask a tall fade region below content. */
    padding-bottom: 80px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
}
html.has-bg-photo.style-minimal body.brand-assistant .chat-header {
    padding-bottom: 80px;
}
html.has-bg-photo.style-minimal[data-theme="dark"] .chat-header {
    background: rgba(20, 24, 32, 0.50);
}
@media (prefers-color-scheme: dark) {
    html.has-bg-photo.style-minimal:not([data-theme="light"]) .chat-header {
        background: rgba(20, 24, 32, 0.50);
    }
}