/* ── Reset ─────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Tokens (Premium Showroom · Light) ───────────────────────────────────────── */
:root {
    --bg: #e9efe7;
    --bg-grad-1: #f3f8f1;
    --bg-grad-2: #dde7da;
    --surface: #ffffff;
    --surface-2: #f6faf5;
    --glass: rgba(255, 255, 255, 0.72);
    --glass-brd: rgba(255, 255, 255, 0.65);
    --border: #dce6da;
    --text: #16241b;
    --text-dim: #5d6b62;
    --accent: #2e9e4f;          /* brand accent green */
    --accent-dark: #1f7d3c;
    --accent-soft: rgba(46, 158, 79, 0.12);
    --warm: #f3b85f;            /* warm showroom light */
    --listening: #2e9e4f;
    --processing: #e69500;
    --speaking: #2563eb;
    --error: #e23b3b;
    --shadow: 0 18px 50px rgba(30, 60, 40, 0.14);
    --shadow-sm: 0 2px 12px rgba(30, 60, 40, 0.08);
    --shadow-lg: 0 30px 70px rgba(20, 50, 30, 0.18);
}

html,
body {
    height: 100%;
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--text);
    background: var(--bg);
    overflow: hidden;
}

/* ── Showroom environment (pure CSS) ─────────────────────────────────────────── */
.showroom {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    /* Real showroom photo on top; CSS gradient below = automatic fallback
       if the image is ever missing. */
    background:
        url('../image/showroom-bg.png?v=10') center center / cover no-repeat,
        linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 62%, #cdd9c9 100%);
    background-color: var(--bg);
    pointer-events: none;
}

/* The photo replaces the CSS-built hall, so hide those layers. */
.sr-wall,
.sr-glow,
.sr-floor { display: none; }

/* Back wall — soft pastel wash like the reference hall */
.sr-wall {
    position: absolute;
    inset: 0 0 38% 0;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.9), transparent 60%),
        linear-gradient(180deg, #f7faf6 0%, #eaf1e8 100%);
}

/* Soft coloured spotlights washing the wall */
.sr-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
}

.sr-glow-1 {
    top: -12%;
    left: 8%;
    width: 42vw;
    height: 42vw;
    background: radial-gradient(circle, rgba(46, 158, 79, 0.30), transparent 65%);
}

.sr-glow-2 {
    top: -8%;
    right: 6%;
    width: 38vw;
    height: 38vw;
    background: radial-gradient(circle, rgba(243, 184, 95, 0.32), transparent 65%);
}

.sr-glow-3 {
    top: 2%;
    left: 50%;
    width: 36vw;
    height: 30vw;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(37, 99, 235, 0.16), transparent 65%);
}

/* Perspective floor (warm, like the reference wood floor) */
.sr-floor {
    position: absolute;
    inset: 62% 0 0 0;
    background: linear-gradient(180deg, #e7d9c2 0%, #d8c6a8 45%, #c9b591 100%);
    box-shadow: inset 0 18px 40px rgba(255, 255, 255, 0.5);
    perspective: 520px;
    overflow: hidden;
}

.sr-floor-grid {
    position: absolute;
    inset: -40% -20% -20% -20%;
    background-image:
        linear-gradient(to right, rgba(120, 95, 60, 0.16) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(120, 95, 60, 0.12) 1px, transparent 1px);
    background-size: 8% 16%;
    transform: rotateX(62deg);
    transform-origin: top center;
    opacity: 0.7;
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000);
}

.sr-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(130% 100% at 50% 38%, transparent 55%, rgba(40, 60, 45, 0.16) 100%);
}

/* ── App shell ───────────────────────────────────────────────────────────────── */
.app {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
}

/* ── Top bar ─────────────────────────────────────────────────────────────────── */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 26px;
    /* Floating gradient instead of a solid bar — lets the showroom show through
       and Laxmi's head rise into the scene without a hard cut line. */
    background: linear-gradient(180deg, rgba(247, 250, 246, 0.92) 0%, rgba(247, 250, 246, 0) 100%);
    flex-shrink: 0;
    z-index: 10;
}

.brand-name,
.brand-sub { text-shadow: 0 1px 8px rgba(255, 255, 255, 0.7); }

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

.brand-logo {
    height: 40px;
    width: auto;
    max-width: 130px;
    border-radius: 8px;
    object-fit: contain;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.brand-sub {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent-dark);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* State pill */
.state-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 30px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    transition: color 0.25s;
}

.state-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dim);
    transition: background 0.25s, box-shadow 0.25s;
}

.state-pill[data-state="listening"] { color: var(--listening); }
.state-pill[data-state="listening"] .state-dot {
    background: var(--listening);
    box-shadow: 0 0 0 4px var(--accent-soft);
    animation: pulse 1.5s ease-in-out infinite;
}

.state-pill[data-state="searching_kb"] { color: var(--processing); }
.state-pill[data-state="searching_kb"] .state-dot {
    background: var(--processing);
    animation: pulse 0.9s ease-in-out infinite;
}

.state-pill[data-state="processing"] { color: var(--processing); }
.state-pill[data-state="processing"] .state-dot {
    background: var(--processing);
    animation: pulse 0.7s ease-in-out infinite;
}

.state-pill[data-state="speaking"] { color: var(--speaking); }
.state-pill[data-state="speaking"] .state-dot {
    background: var(--speaking);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.state-pill[data-state="connecting"] { color: var(--text-dim); }
.state-pill[data-state="error"] { color: var(--error); }
.state-pill[data-state="error"] .state-dot { background: var(--error); }

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(0.55); opacity: 0.5; }
}

/* ── Main content — Laxmi centre stage ──────────────────────────────────────── */
.content {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 8px 24px 0;
    min-height: 0;
}

/* ── Subtitle overlay (compact captions, hidden when empty) ──────────────────── */
.subtitle {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    width: min(780px, 92vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 3;
    pointer-events: none;
}

/* Idle hint — plain centred text, no box, invisible when empty */
.answer-idle {
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-dim);
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.85);
}

/* Laxmi's spoken answer — minimal caption pill, only shown while she speaks */
.answer-text {
    margin: 0;
    text-align: center;
    font-size: clamp(1.02rem, 1.7vw, 1.4rem);
    font-weight: 600;
    line-height: 1.5;
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-brd);
    border-radius: 18px;
    padding: 14px 24px;
    box-shadow: var(--shadow);
    max-height: 34vh;
    overflow-y: auto;
    display: none;
}

.answer-text.visible { display: block; }

/* Laxmi's spoken answer text is hidden for now (voice-only experience).
   Remove this rule to show her captions again. */
.answer-text,
.answer-text.visible { display: none !important; }

.answer-text.streaming::after {
    content: '▋';
    margin-left: 3px;
    color: var(--accent);
    animation: blink 0.7s step-end infinite;
    font-size: 0.7em;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* Caption (live user transcript) */
.caption {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    background: var(--glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-brd);
    border-radius: 14px;
    max-width: 100%;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s, transform 0.25s;
}

.caption.visible { opacity: 1; transform: none; }

.cap-tag {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    padding: 4px 9px;
    border-radius: 7px;
    flex-shrink: 0;
}

.cap-text {
    font-size: 0.98rem;
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Avatar (presenter on a podium) ──────────────────────────────────────────── */
/* Laxmi is anchored to the viewport floor (not the content box) so her feet
   sit exactly on the showroom floor line and she can fill the stage. */
.avatar-wrap {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Glowing podium disc under Laxmi's feet (floor line ≈ 62vh) */
.avatar-podium {
    position: absolute;
    bottom: 6%;
    left: 50%;
    width: 230px;
    height: 50px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(46, 158, 79, 0.32), transparent 70%);
    box-shadow: 0 0 70px 14px rgba(46, 158, 79, 0.20);
    pointer-events: none;
}

.avatar-ring {
    position: absolute;
    bottom: 13%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-soft) 0%, transparent 68%);
    opacity: 0.5;
    transition: opacity 0.5s, background 0.5s;
    pointer-events: none;
}

.avatar-ring.active {
    opacity: 1;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.20) 0%, transparent 68%);
    animation: ring-breathe 2.4s ease-in-out infinite;
}

@keyframes ring-breathe {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50%      { transform: translateX(-50%) scale(1.08); }
}

.avatar-img {
    position: absolute;
    bottom: -2%;           /* feet down on the showroom floor */
    left: 50%;
    transform: translateX(-50%);
    height: 70vh;          /* large, dominant presence */
    max-height: 756px;     /* native height — never upscale (keeps her crisp) */
    width: auto;
    object-fit: contain;
    object-position: bottom center;
    pointer-events: none;
    /* No shared filter — applied individually below so the talking GIF
       never gets a GPU compositing layer, which was causing white-frame flicker. */
}

/* NO filter and NO will-change on either avatar video: both force extra GPU
   compositor layers that caused per-frame transparency flicker with the old
   animated GIFs. Keep these elements layer-hack-free. */
#avatarStill {
    transition: opacity 0s;   /* instant hide/show when speaking starts */
}

.avatar-talking {
    opacity: 0;
}

.avatar-talking.active { opacity: 1; }

/* ── Tractor lineup (product pedestals) ──────────────────────────────────────── */
.lineup {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 2px 32px 4px;
    z-index: 2;
}

.ped {
    position: relative;
    flex: 1 1 0;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    box-shadow: 0 8px 24px rgba(20, 40, 25, 0.18);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--text);
    transition: transform 0.18s, box-shadow 0.2s, border-color 0.2s;
}

.ped::after {
    /* glowing pedestal base */
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 64%;
    height: 12px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--accent-soft), transparent 70%);
    opacity: 0;
    transition: opacity 0.2s;
}

.ped:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: rgba(46, 158, 79, 0.4);
}

.ped:hover::after { opacity: 1; }

.ped.selected {
    border-color: var(--accent);
    box-shadow: 0 14px 34px rgba(46, 158, 79, 0.28);
}

.ped.selected::after { opacity: 1; }

.ped-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(145deg, var(--accent), var(--accent-dark));
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(46, 158, 79, 0.3);
    margin-bottom: 2px;
}

.ped-name {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.ped-meta {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.02em;
}

/* ── Bottom dock ─────────────────────────────────────────────────────────────── */
.dock {
    position: fixed;
    left: 28px;
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 5;          /* above the full-screen avatar layer */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 0;
}

.viz {
    width: 200px;
    height: 40px;
    opacity: 0.8;
}

.mic-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(145deg, var(--accent), var(--accent-dark));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(46, 158, 79, 0.35);
    transition: transform 0.15s, box-shadow 0.2s, background 0.3s;
    outline: none;
}

.mic-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.mic-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(46, 158, 79, 0.45);
}

.mic-btn:not(:disabled):active { transform: scale(0.95); }

.mic-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.mic-btn.active {
    background: linear-gradient(145deg, #e23b3b, #b62b2b);
    box-shadow: 0 8px 22px rgba(226, 59, 59, 0.35);
    animation: mic-pulse 2s ease-in-out infinite;
}

.mic-btn.speaking {
    background: linear-gradient(145deg, var(--speaking), #1e4fd0);
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.35);
    animation: none;
}

.mic-btn.armed {
    background: linear-gradient(145deg, var(--accent), var(--accent-dark));
    animation: mic-pulse 1.1s ease-in-out infinite;
}

@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 8px 22px rgba(226, 59, 59, 0.30); }
    50%      { box-shadow: 0 8px 34px rgba(226, 59, 59, 0.55); }
}

.mic-ripple {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0;
    pointer-events: none;
}

.mic-btn.active .mic-ripple,
.mic-btn.armed .mic-ripple {
    animation: ripple 1.8s ease-out infinite;
}

@keyframes ripple {
    0%   { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.8); opacity: 0; }
}

.mic-hint {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.01em;
    min-height: 1.2em;
    text-align: left;
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.8);
}

/* ── Mic mute toggle (bottom-right) ──────────────────────────────────────────── */
.mute-btn {
    position: fixed;
    right: 28px;
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--glass-brd);
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text);
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s, background 0.2s, color 0.2s, box-shadow 0.2s;
}

.mute-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.mute-btn:active { transform: scale(0.95); }

/* Muted state — red, clearly "off" */
.mute-btn.muted {
    background: linear-gradient(145deg, #e23b3b, #b62b2b);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(226, 59, 59, 0.4);
}

/* ── Intro / Enter overlay ───────────────────────────────────────────────────── */
.intro {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.9), transparent 60%),
        linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.intro.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.intro-inner {
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: intro-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes intro-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

.intro-logo {
    height: 70px;
    width: auto;
    max-width: 220px;
    border-radius: 14px;
    object-fit: contain;
    margin-bottom: 22px;
}

.intro-title {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.intro-sub {
    margin-top: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-dark);
}

.intro-desc {
    margin-top: 18px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-dim);
}

.intro-btn {
    margin-top: 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border: none;
    border-radius: 40px;
    background: linear-gradient(145deg, var(--accent), var(--accent-dark));
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(46, 158, 79, 0.4);
    transition: transform 0.15s, box-shadow 0.2s;
}

.intro-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(46, 158, 79, 0.5);
}

.intro-btn:active { transform: scale(0.97); }

.intro-btn i { font-size: 1.1rem; transition: transform 0.2s; }
.intro-btn:hover i { transform: translateX(3px); }

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — driven by ORIENTATION (works for phone, tablet, desktop, TV,
   and portrait kiosk standees) with size tiers layered on top.
   The voice pipeline + DOM IDs are never touched here — layout only.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── PORTRAIT (phones, portrait tablets, kiosk standees 1080×1920) ──────────── */
@media (orientation: portrait) {
    /* Use the SAME showroom backdrop as landscape (inherits the base .showroom
       rule = showroom-bg.png, cover-cropped to the tall frame). */

    /* Laxmi centred and grounded for a tall frame */
    .avatar-img   { height: 52vh; max-height: 1100px; bottom: 3%; }
    .avatar-ring  { width: 60vw; height: 60vw; max-width: 460px; max-height: 460px; bottom: 13%; }
    .avatar-podium{ width: 46vw; max-width: 340px; bottom: 3%; }

    /* Mic + waveform centred at the bottom for natural thumb / touch reach */
    .dock {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        align-items: center;
        bottom: max(26px, env(safe-area-inset-bottom));
    }
    .mic-hint { text-align: center; }
    .viz { width: min(70vw, 340px); }

    /* Captions sit above the centred dock */
    .subtitle { bottom: 15vh; width: min(90vw, 700px); }
}

/* ── Small portrait (phones) ───────────────────────────────────────────────── */
@media (orientation: portrait) and (max-width: 600px) {
    .avatar-img   { height: 46vh; bottom: 4%; }
    .answer-text  { font-size: 1rem; padding: 12px 18px; }
    .intro-title  { font-size: 2rem; }
    .intro-desc   { font-size: 0.92rem; }
    .brand-sub    { display: none; }
    .viz          { width: 60vw; height: 36px; }
}

/* ── Large portrait (kiosk standees) — bigger touch targets & type ─────────── */
@media (orientation: portrait) and (min-width: 760px) {
    .topbar       { padding: 24px 36px; }
    .brand-logo   { height: 56px; max-width: 180px; }
    .brand-name   { font-size: 1.6rem; }
    .brand-sub    { font-size: 0.9rem; }
    .state-pill   { font-size: 0.95rem; padding: 10px 22px; }

    .avatar-img   { height: 56vh; bottom: 3%; }

    .mic-btn      { width: 104px; height: 104px; }
    .mic-icon     { font-size: 2.3rem; }
    .mute-btn     { width: 80px; height: 80px; font-size: 2rem; right: 36px; bottom: 36px; }
    .mic-hint     { font-size: 1.15rem; }
    .viz          { width: 420px; height: 60px; }

    .answer-text  { font-size: 1.7rem; padding: 20px 32px; }
    .subtitle     { width: min(80vw, 820px); bottom: 16vh; }

    .intro-logo   { height: 110px; max-width: 320px; }
    .intro-title  { font-size: 3.6rem; }
    .intro-sub    { font-size: 1rem; }
    .intro-desc   { font-size: 1.25rem; }
    .intro-btn    { font-size: 1.25rem; padding: 20px 42px; }
}

/* ── Short landscape (landscape phones / small landscape tablets) ──────────── */
@media (orientation: landscape) and (max-height: 560px) {
    .avatar-img  { height: 86vh; bottom: -6%; }
    .answer-text { font-size: 1rem; }
    .brand-sub   { display: none; }
    .dock        { bottom: max(12px, env(safe-area-inset-bottom)); }
    .viz         { width: 160px; height: 32px; }
    .intro-title { font-size: 2rem; }
}

/* ── Touch devices: neutralise sticky :hover so taps feel right ─────────────── */
@media (hover: none) {
    .mic-btn:not(:disabled):hover { transform: none; }
    .intro-btn:hover { transform: none; }
}