/* Palette ported from the supplied Department of Culture and Tourism reference designs: crisp white/
   pale-blue surfaces, deep navy display type (Georgia serif for headings), and a teal accent -
   gold is used as a secondary accent (the "Asked" panel border, the privacy note). Light is the
   default look; dark mode is a navy-blue variant of the same brand, not a different palette. */
:root {
    --vs-primary: #0aa8c7;
    --vs-primary-light: #4ebbd0;
    --vs-primary-dark: #078da9;
    --vs-accent: #1d64d8;
    --vs-gold: #c99b34;
    --vs-gold-rgb: 201, 155, 52;
    --vs-bg: #fbfdff;
    --vs-bg-alt: #eef6ff;
    --vs-surface: rgba(255, 255, 255, 0.96);
    --vs-surface-solid: #ffffff;
    --vs-ink-rgb: 16, 30, 60;
    --vs-border: rgba(var(--vs-ink-rgb), 0.09);
    --vs-border-strong: rgba(var(--vs-ink-rgb), 0.15);
    --vs-text: #14245a;
    --vs-text-muted: #5c6f8c;
    --vs-success: #8fb35e;
    --vs-success-rgb: 143, 179, 94;
    --vs-danger: #c1583f;
    --vs-neutral: #93a1b3;
    --vs-radius: 20px;
    --vs-shadow: 0 18px 45px rgba(42, 78, 130, 0.12);
    --vs-font-display: Georgia, "Times New Roman", serif;

    --vs-primary-rgb: 10, 168, 199;
    --vs-primary-light-rgb: 78, 187, 208;
    --vs-bronze-rgb: 29, 100, 216;
    --vs-glow-primary: 0 0 0 1px rgba(var(--vs-primary-rgb), 0.2), 0 0 24px rgba(var(--vs-primary-rgb), 0.18);

    --vs-glow-1-rgb: 10, 168, 199;
    --vs-glow-2-rgb: 201, 155, 52;

    --vs-hero-grad-start: #dcedf7;
    --vs-hero-grad-end: #f3f9fc;
    --vs-hero-shadow: 0 24px 60px rgba(16, 34, 59, 0.1);

    --vs-eyebrow-bg: #f5efdd;
    --vs-eyebrow-text: #8a6a1f;
    --vs-eyebrow-border-rgb: 201, 155, 52;

    --vs-badge-positive-bg: rgba(143, 179, 94, 0.16);
    --vs-badge-positive-text: #4c6c2c;
    --vs-badge-negative-bg: rgba(193, 88, 63, 0.14);
    --vs-badge-negative-text: #8a3c28;
    --vs-badge-neutral-bg: rgba(var(--vs-ink-rgb), 0.07);
    --vs-badge-neutral-text: #3a4a5c;
}

:root[data-theme="dark"] {
    --vs-primary: #38c3e0;
    --vs-primary-light: #7ad9ec;
    --vs-primary-dark: #0aa8c7;
    --vs-accent: #6f95e0;
    --vs-gold: #e0b354;
    --vs-gold-rgb: 224, 179, 84;
    --vs-bg: #0a1830;
    --vs-bg-alt: #0e2036;
    --vs-surface: rgba(18, 34, 58, 0.78);
    --vs-surface-solid: #142438;
    --vs-ink-rgb: 226, 236, 248;
    --vs-text: #eaf2fb;
    --vs-text-muted: #93a8c2;
    --vs-success: #a3cf72;
    --vs-success-rgb: 163, 207, 114;
    --vs-danger: #e0715a;
    --vs-neutral: #6f8398;
    --vs-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);

    --vs-primary-rgb: 56, 195, 224;
    --vs-primary-light-rgb: 122, 217, 236;
    --vs-bronze-rgb: 111, 149, 224;
    --vs-glow-primary: 0 0 0 1px rgba(var(--vs-primary-rgb), 0.3), 0 0 24px rgba(var(--vs-primary-rgb), 0.3);

    --vs-glow-1-rgb: 56, 195, 224;
    --vs-glow-2-rgb: 224, 179, 84;

    --vs-hero-grad-start: #10233c;
    --vs-hero-grad-end: #0a1830;
    --vs-hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);

    --vs-eyebrow-bg: #1c3350;
    --vs-eyebrow-text: #8fd9ec;
    --vs-eyebrow-border-rgb: 56, 195, 224;

    --vs-badge-positive-bg: rgba(163, 207, 114, 0.22);
    --vs-badge-positive-text: #cdeeb0;
    --vs-badge-negative-bg: rgba(224, 113, 90, 0.22);
    --vs-badge-negative-text: #f4b6a4;
    --vs-badge-neutral-bg: rgba(var(--vs-ink-rgb), 0.12);
    --vs-badge-neutral-text: #d3e0ef;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --vs-primary: #38c3e0;
        --vs-primary-light: #7ad9ec;
        --vs-primary-dark: #0aa8c7;
        --vs-accent: #6f95e0;
        --vs-gold: #e0b354;
        --vs-gold-rgb: 224, 179, 84;
        --vs-bg: #0a1830;
        --vs-bg-alt: #0e2036;
        --vs-surface: rgba(18, 34, 58, 0.78);
        --vs-surface-solid: #142438;
        --vs-ink-rgb: 226, 236, 248;
        --vs-text: #eaf2fb;
        --vs-text-muted: #93a8c2;
        --vs-success: #a3cf72;
        --vs-success-rgb: 163, 207, 114;
        --vs-danger: #e0715a;
        --vs-neutral: #6f8398;
        --vs-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);

        --vs-primary-rgb: 56, 195, 224;
        --vs-primary-light-rgb: 122, 217, 236;
        --vs-bronze-rgb: 111, 149, 224;
        --vs-glow-primary: 0 0 0 1px rgba(var(--vs-primary-rgb), 0.3), 0 0 24px rgba(var(--vs-primary-rgb), 0.3);

        --vs-glow-1-rgb: 56, 195, 224;
        --vs-glow-2-rgb: 224, 179, 84;

        --vs-hero-grad-start: #10233c;
        --vs-hero-grad-end: #0a1830;
        --vs-hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);

        --vs-eyebrow-bg: #1c3350;
        --vs-eyebrow-text: #8fd9ec;
        --vs-eyebrow-border-rgb: 56, 195, 224;

        --vs-badge-positive-bg: rgba(163, 207, 114, 0.22);
        --vs-badge-positive-text: #cdeeb0;
        --vs-badge-negative-bg: rgba(224, 113, 90, 0.22);
        --vs-badge-negative-text: #f4b6a4;
        --vs-badge-neutral-bg: rgba(var(--vs-ink-rgb), 0.12);
        --vs-badge-neutral-text: #d3e0ef;
    }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 14% 20%, rgba(var(--vs-glow-1-rgb), 0.12) 0%, transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(var(--vs-glow-2-rgb), 0.12) 0%, transparent 30%),
        var(--vs-bg);
    transition: background-color 0.25s ease;
    background-attachment: fixed;
    color: var(--vs-text);
    font-family: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* body is a flex column (see above) so this footer sits pinned to the bottom of the viewport on
   short pages, and simply follows the content on tall/scrolling ones - either way it's always the
   last thing on the page, centered. */
main[role="main"] { flex: 1 0 auto; }

.app-footer {
    flex-shrink: 0;
    text-align: center;
    padding: 22px 20px;
    border-top: 1px solid var(--vs-border);
    color: var(--vs-text-muted);
    font-size: 0.85rem;
}
.app-footer p { margin: 0; }

a { color: var(--vs-accent); }

::selection { background: rgba(var(--vs-primary-rgb), 0.3); }

/* ---------- Animation keyframes ---------- */
@keyframes vs-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vs-pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(var(--vs-primary-rgb), 0.45); }
    70% { box-shadow: 0 0 0 10px rgba(var(--vs-primary-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--vs-primary-rgb), 0); }
}
@keyframes vs-glow-breathe {
    0%, 100% { box-shadow: 0 0 12px 2px rgba(var(--vs-primary-rgb), 0.32); }
    50% { box-shadow: 0 0 20px 6px rgba(var(--vs-primary-rgb), 0.5); }
}
.vs-animate-in { animation: vs-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ---------- Shared app nav (used by both layouts) ---------- */
.app-nav {
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 42px;
    background: rgba(var(--vs-ink-rgb), 0.03);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
    z-index: 20;
    border-bottom: 1px solid var(--vs-border);
}

.app-brand { display: flex; align-items: center; text-decoration: none; }
.app-brand img { height: 46px; width: auto; display: block; }

.app-nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; }

/* Language pill - click to reveal a small menu of display languages. Purely cosmetic (this app's
   own chrome stays English; only the live conversation itself is multilingual) but functional
   enough to feel like a real control rather than dead decoration. */
.app-nav-lang { position: relative; }

.app-nav-lang-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--vs-border-strong);
    background: var(--vs-surface-solid);
    color: var(--vs-text);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 18px;
    border-radius: 24px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-nav-lang-btn:hover,
.app-nav-lang-btn:focus-visible { border-color: var(--vs-primary); }

.app-nav-lang-btn svg { width: 18px; height: 18px; color: var(--vs-primary); flex-shrink: 0; }
.app-nav-lang-btn .chevron { font-size: 0.75rem; color: var(--vs-text-muted); transition: transform 0.15s ease; }
.app-nav-lang.open .app-nav-lang-btn .chevron { transform: rotate(180deg); }

.app-nav-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 150px;
    background: var(--vs-surface-solid);
    border: 1px solid var(--vs-border-strong);
    border-radius: 14px;
    box-shadow: var(--vs-shadow);
    padding: 6px;
    display: none;
    z-index: 30;
}

.app-nav-lang.open .app-nav-lang-menu { display: block; animation: vs-fade-up 0.15s ease both; }

.app-nav-lang-option {
    display: block;
    width: 100%;
    text-align: left;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--vs-text);
    font: inherit;
    font-size: 0.88rem;
    padding: 8px 10px;
    cursor: pointer;
}

.app-nav-lang-option:hover { background: rgba(var(--vs-primary-rgb), 0.1); }
.app-nav-lang-option.selected { color: var(--vs-primary-dark); font-weight: 700; }

.app-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    color: #ffffff;
    background: linear-gradient(135deg, var(--vs-primary), var(--vs-primary-dark));
    padding: 13px 24px;
    border-radius: 26px;
    font-weight: 800;
    font-size: 0.92rem;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(var(--vs-primary-rgb), 0.24);
    transition: transform 0.12s ease, filter 0.15s ease;
}

.app-nav-cta:hover { transform: translateY(-1px); filter: saturate(1.08); color: #ffffff; }

.app-nav-dashboard-link {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--vs-border-strong, rgba(var(--vs-primary-rgb), 0.35));
    color: var(--vs-primary);
    background: transparent;
    padding: 9px 18px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.12s ease;
}

.app-nav-dashboard-link:hover {
    background: rgba(var(--vs-primary-rgb), 0.1);
    color: var(--vs-primary);
    transform: translateY(-1px);
}
.app-nav-cta .chevron { font-size: 0.85rem; }

.vs-theme-toggle {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--vs-border-strong);
    background: var(--vs-surface-solid);
    color: var(--vs-text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.vs-theme-toggle:hover { border-color: var(--vs-primary); transform: scale(1.06); }
.vs-theme-toggle:focus-visible { outline: 2px solid var(--vs-primary); outline-offset: 2px; }

@media (max-width: 980px) {
    .app-nav { padding: 0 22px; height: 96px; }
}

@media (max-width: 620px) {
    .app-nav { height: auto; padding: 16px; align-items: flex-start; flex-wrap: wrap; gap: 10px; }
}

/* ---------- Home page hero ---------- */
.home-body { margin: 0; }
.home-page-container { max-width: 100%; margin: 0 auto; }

.home-hero {
    min-height: 520px;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 32px 24px 0;
    isolation: isolate;
    text-align: center;
}

.home-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(var(--vs-glow-1-rgb), 0.08) 0%, transparent 46%, transparent 100%);
    z-index: -5;
}

.home-hero-inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }

.home-hero-audio-viz-wrap {
    width: 200px;
    height: 200px;
    margin: -8px auto 4px;
    position: relative;
}

.home-hero-audio-viz {
    width: 100%; height: 100%; display: block; position: relative; z-index: 1;
    -webkit-mask-image: radial-gradient(circle at center, #000 60%, transparent 94%);
    mask-image: radial-gradient(circle at center, #000 60%, transparent 94%);
}

.home-hero-audio-viz-core {
    position: absolute;
    left: 50%; top: 50%;
    width: 30px; height: 30px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #ffffff;
    filter: blur(8px);
    opacity: 0.7;
    box-shadow: 0 0 32px 14px rgba(var(--vs-primary-rgb), 0.55);
    animation: vs-core-pulse 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes vs-core-pulse {
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.35; }
}

.home-hero h1 {
    margin: 0;
    font-family: var(--vs-font-display);
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: -1.2px;
    color: var(--vs-text);
    animation: vs-fade-up 0.6s 0.05s ease both;
}

.home-hero-tagline {
    margin: 16px 0 14px;
    font-family: var(--vs-font-display);
    font-size: 30px;
    line-height: 1.15;
    color: var(--vs-primary-dark);
    animation: vs-fade-up 0.6s 0.08s ease both;
}

.home-hero-body {
    margin: 0 auto 26px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--vs-text-muted);
    max-width: 640px;
    animation: vs-fade-up 0.6s 0.1s ease both;
}

.home-hero-body a,
.home-hero-highlight { color: var(--vs-accent); font-weight: 600; text-decoration: none; }

.home-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 20px 30px 20px 14px;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--vs-primary), var(--vs-primary-dark));
    font-weight: 800;
    font-size: 18px;
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(var(--vs-primary-rgb), 0.22);
    margin: 8px 0 28px;
    transition: transform 0.12s ease, filter 0.15s ease;
    animation: vs-fade-up 0.6s 0.15s ease both;
}

.home-cta:hover { transform: translateY(-1px); filter: saturate(1.06); color: #ffffff; }

.home-cta .mic-badge {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: #ffffff;
    border-radius: 50%;
    color: var(--vs-primary-dark);
    flex-shrink: 0;
}

.home-cta .mic-badge svg { width: 20px; height: 20px; }
.home-cta .chevron { font-size: 18px; }

/* ---------- Feature cards ---------- */
.home-features {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    position: relative;
    z-index: 3;
}

@media (max-width: 980px) { .home-features { grid-template-columns: 1fr; max-width: 640px; } }

.home-feature-card {
    background: var(--vs-surface);
    border: 1px solid var(--vs-border);
    border-radius: 14px;
    padding: 28px 28px 26px;
    box-shadow: var(--vs-shadow);
    min-height: 200px;
    animation: vs-fade-up 0.6s ease both;
}

.home-feature-card:nth-child(1) { animation-delay: 0.1s; }
.home-feature-card:nth-child(2) { animation-delay: 0.2s; }
.home-feature-card:nth-child(3) { animation-delay: 0.3s; }

.home-feature-card .icon-badge {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(var(--vs-primary-rgb), 0.12);
    color: var(--vs-primary-dark);
    float: left;
    margin: 0 18px 12px 0;
}

.home-feature-card .icon-badge svg { width: 26px; height: 26px; }

.home-feature-card h3 {
    font-family: var(--vs-font-display);
    font-size: 22px;
    color: var(--vs-text);
    margin: 12px 0 14px;
}

.home-feature-card p { clear: both; margin: 0; color: var(--vs-text-muted); font-size: 15px; line-height: 1.55; }

.home-trust-banner {
    width: max-content;
    max-width: calc(100% - 40px);
    margin: 22px auto 40px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 24px;
    color: var(--vs-text-muted);
    border: 1px solid var(--vs-border-strong);
    border-radius: 28px;
    background: var(--vs-surface);
    font-size: 13px;
    line-height: 1.4;
}

.home-trust-banner strong { font-weight: 700; color: var(--vs-text); }

.home-trust-banner .shield-badge {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(var(--vs-primary-rgb), 0.12);
    color: var(--vs-primary-dark);
    flex-shrink: 0;
}

.home-trust-banner .shield-badge svg { width: 17px; height: 17px; }

@media (max-width: 620px) {
    .home-hero-audio-viz-wrap { transform: scale(0.75); margin-top: -20px; }
    .home-hero h1 { font-size: 34px; }
    .home-hero-tagline { font-size: 22px; }
    .home-hero-body { font-size: 15px; }
}

/* ---------- Survey pages (setup + live) ---------- */
.survey-app { max-width: 100%; margin: 0 auto; padding-bottom: 3rem; }

.survey-hero { text-align: center; padding: 56px 20px 28px; animation: vs-fade-up 0.5s ease both; }

.survey-hero h1 {
    margin: 0 0 14px;
    font-family: var(--vs-font-display);
    font-size: 46px;
    line-height: 1.08;
    color: var(--vs-text);
    letter-spacing: -0.5px;
}

.survey-hero .subtitle {
    margin: 0 auto;
    color: var(--vs-text-muted);
    font-size: 17px;
    line-height: 1.55;
    max-width: 780px;
}

.survey-container { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }

.vs-panel {
    background: var(--vs-surface);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius);
    box-shadow: var(--vs-shadow);
    padding: 38px 44px;
    margin: 0 auto 24px;
    max-width: 1120px;
    animation: vs-fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.start-panel { text-align: left; }

.vs-option-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--vs-text);
    margin-bottom: 18px;
}

.start-panel input.form-control {
    max-width: 420px;
    padding: 0.7rem 0.95rem;
    border-radius: 10px;
    background: var(--vs-surface-solid);
    border: 1px solid var(--vs-border-strong);
    color: var(--vs-text);
}

.start-panel input.form-control:focus {
    border-color: var(--vs-primary);
    box-shadow: 0 0 0 3px rgba(var(--vs-primary-rgb), 0.18);
    outline: none;
}

.vs-divider { height: 1px; background: var(--vs-border); margin: 22px 0; }

.vs-option-group { margin: 18px 0; }

.vs-radio-row { display: flex; gap: 14px; flex-wrap: wrap; }

.vs-radio {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--vs-border-strong);
    background: var(--vs-surface-solid);
    border-radius: 11px;
    padding: 11px 18px;
    font-size: 0.92rem;
    color: var(--vs-text);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.vs-radio:has(input:checked) { border-color: var(--vs-primary); background: rgba(var(--vs-primary-rgb), 0.08); }
.vs-radio input, .vs-checkbox input { accent-color: var(--vs-primary); }

.vs-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    font-size: 0.92rem;
    color: var(--vs-text);
    cursor: pointer;
}

.vs-checkbox input { width: 17px; height: 17px; }

.vs-cta-row { text-align: center; margin-top: 24px; }

.vs-btn-primary {
    border: 0;
    border-radius: 30px;
    background: linear-gradient(135deg, var(--vs-primary), var(--vs-primary-dark));
    color: #ffffff;
    font-weight: 800;
    padding: 16px 30px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 9px 22px rgba(var(--vs-primary-rgb), 0.22);
    font-size: 16px;
    transition: filter 0.15s ease, transform 0.12s ease;
}

.vs-btn-primary:hover:not(:disabled) { filter: saturate(1.08); transform: translateY(-1px); }
.vs-btn-primary:active:not(:disabled) { transform: scale(0.98); }
.vs-btn-primary:disabled { opacity: 0.45; cursor: default; }

.vs-btn-secondary {
    background: transparent;
    border: 1px solid var(--vs-border-strong);
    color: var(--vs-text);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 12px 24px;
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.vs-btn-secondary:hover { background: rgba(var(--vs-ink-rgb), 0.05); border-color: var(--vs-primary-light); }

/* Stepper */
.vs-stepper { display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; margin-bottom: 36px; }

.vs-step { position: relative; text-align: center; color: var(--vs-text-muted); font-size: 0.8rem; }

.vs-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 19px; left: 59%; right: -41%;
    height: 2px;
    background: var(--vs-border-strong);
    z-index: -1;
}

.vs-step .dot {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--vs-border-strong);
    background: var(--vs-surface-solid);
    color: var(--vs-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    margin: 0 auto 10px;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.vs-step .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vs-text-muted); white-space: nowrap; }

.vs-step.active .dot {
    background: linear-gradient(135deg, var(--vs-primary), var(--vs-primary-dark));
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 6px 15px rgba(var(--vs-primary-rgb), 0.28);
    animation: vs-glow-breathe 2s ease-in-out infinite;
}

.vs-step.done .dot { background: var(--vs-success); color: #ffffff; border-color: transparent; }
.vs-step.active .label { color: var(--vs-primary-dark); font-weight: 900; }
.vs-step.done .label { color: var(--vs-text); font-weight: 700; }

/* Status row + level meter + orb */
.vs-status-row { display: flex; align-items: center; justify-content: space-between; margin: 6px 4px 12px; }

.vs-status { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 800; color: var(--vs-text); }

.vs-status-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--vs-neutral); flex-shrink: 0; box-shadow: 0 0 0 5px rgba(var(--vs-ink-rgb), 0.05); }
.vs-status-dot.pulse { animation: vs-pulse-ring 1.3s infinite; }
.vs-status-dot.speaking { background: var(--vs-primary); }
.vs-status-dot.listening { background: var(--vs-success); }
.vs-status-dot.analyzing { background: var(--vs-gold); }

.vs-levels { display: flex; gap: 7px; }

.vs-levels i {
    display: block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--vs-border-strong);
    transition: background 0.15s ease, transform 0.15s ease;
}

.vs-levels i.on.listening { background: var(--vs-success); transform: scale(1.25); }
.vs-levels i.on.speaking { background: var(--vs-primary); transform: scale(1.25); }

/* Live-call stage wrapper: no avatar configured -> just centers the audio orb exactly as
   before (.vs-live-stage on its own is a no-op layout-wise, a plain column). With an avatar
   configured, .vs-live-stage-with-avatar makes the avatar the main/large element and demotes
   the orb to a small companion beside it - see .vs-audio-viz-wrap's "side mode" override below. */
.vs-live-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.25rem;
}

.vs-live-stage-with-avatar {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    /* "Theatre mode": a real video call's whole call surface is dark, not a video tile floating
       on a plain page - so this wraps the avatar tile + orb in one continuous near-black frame
       rather than leaving the panel's own light background show through around them. */
    background: var(--vs-theatre-bg);
    border-radius: 20px;
    padding: 1.75rem 1.5rem;
}

/* "Meeting" stage: the AI avatar as the main tile, the respondent's own camera as a small
   picture-in-picture tile in the corner - the same layout convention as any video call, so the
   survey reads as "a conversation with someone" rather than a form with a camera bolted on. */
.vs-meeting-stage {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 1.25rem;
}

.vs-report-video {
    width: 100%;
    max-width: 480px;
    border-radius: 12px;
    display: block;
}

.vs-turn-seekable { cursor: pointer; transition: background 0.12s ease; }
.vs-turn-seekable:hover { background: rgba(var(--vs-primary-rgb), 0.06); }

.turn-emotion { font-size: 0.85rem; color: var(--vs-text-muted, #6b7280); margin-top: 2px; }

.turn-seek-hint {
    font-size: 0.78rem;
    color: var(--vs-primary);
    font-weight: 700;
    margin-top: 6px;
}

.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 20px 64px;
    line-height: 1.7;
}

.legal-page h1 { font-family: var(--vs-font-display); margin-bottom: 4px; }
.legal-updated { color: var(--vs-text-muted, #6b7280); font-size: 0.85rem; margin-bottom: 28px; }
.legal-page h2 { font-size: 1.15rem; font-weight: 800; margin: 28px 0 10px; }
.legal-page section:first-of-type h2 { margin-top: 0; }
.legal-page ul { padding-left: 20px; }
.legal-page a { color: var(--vs-primary); font-weight: 600; }

.vs-disclaimer {
    font-size: 0.85rem;
    color: var(--vs-text-muted, #6b7280);
    line-height: 1.5;
    margin: 4px 0 0;
}

.vs-disclaimer a { color: var(--vs-primary); font-weight: 600; }

/* Shared "theatre" black used by the avatar's video call surface (stage backdrop, tile
   backgrounds, and letterbox bars alike) - one token so they all read as the same continuous
   dark surface instead of slightly different near-black shades. */
:root { --vs-theatre-bg: #05080a; }

.vs-avatar-stage {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: var(--vs-theatre-bg);
}


.vs-avatar-video {
    width: 100%;
    height: 100%;
    /* contain, not cover: the actual vendor stream's aspect ratio isn't guaranteed to exactly
       match this tile's 1:1 box, and cropping it (cover) would hide any mismatch instead of
       showing it - contain preserves the full frame and lets any leftover space show the tile's
       own black background, like the letterboxing in a real video call. */
    object-fit: contain;
    display: block;
}

.vs-self-view-stage {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 28%;
    max-width: 150px;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    background: var(--vs-theatre-bg);
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* No avatar tile behind it (emotion recognition on its own, or avatar picked "None"/never
   connected) - the self-view becomes the main tile instead of a small corner overlay.
   #avatar-stage is now always present in the DOM (provider is a runtime choice - see
   avatar.js/survey.js), so this checks visibility (.d-none) rather than mere presence. */
.vs-meeting-stage:not(:has(.vs-avatar-stage:not(.d-none))) .vs-self-view-stage {
    position: static;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border: none;
    box-shadow: none;
}

.vs-self-view-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Mirror, like every other video-call self-view - a respondent's own unmirrored camera feed
       reads as unnervingly wrong even though it's a purely cosmetic flip. */
    transform: scaleX(-1);
}

.vs-audio-viz-wrap {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    position: relative;
}

/* Side mode: avatar is the main element, this becomes a small secondary "is it listening or
   speaking" indicator next to it rather than a second full-size focal point. */
.vs-live-stage-with-avatar .vs-meeting-stage {
    margin: 0;
    flex: 1 1 320px;
}

.vs-live-stage-with-avatar .vs-audio-viz-wrap {
    width: 96px;
    height: 96px;
    margin: 0;
    flex: 0 0 auto;
}

.vs-audio-viz {
    width: 100%; height: 100%; display: block; position: relative; z-index: 1;
    /* The wavy rings can swing past the canvas's rectangular bounds on loud audio spikes and get
       hard-clipped by that edge (a visible flat line cutting across the orb). Masking the canvas
       itself to fade to transparent before the edge means any overflow fades away smoothly
       instead, regardless of how loud the current level is. */
    -webkit-mask-image: radial-gradient(circle at center, #000 60%, transparent 94%);
    mask-image: radial-gradient(circle at center, #000 60%, transparent 94%);
}

.vs-audio-viz-core {
    position: absolute;
    left: 50%; top: 50%;
    width: 20px; height: 20px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #ffffff;
    filter: blur(6px);
    opacity: 0.7;
    box-shadow: 0 0 22px 10px rgba(var(--vs-primary-rgb), 0.55);
    animation: vs-core-pulse 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

/* Asked / Understood cards */
.vs-qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 16px; }
@media (max-width: 640px) { .vs-qa-grid { grid-template-columns: 1fr; } }

.vs-qa-card {
    border: 1px solid var(--vs-border);
    border-radius: 14px;
    padding: 24px 28px;
    background: var(--vs-surface-solid);
    min-height: 110px;
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.vs-qa-card::before {
    content: "";
    position: absolute; left: -1px; top: 0; bottom: 0;
    width: 4px;
    border-radius: 14px 0 0 14px;
    background: var(--vs-gold);
}

.vs-qa-card.understood::before { background: var(--vs-success); }

.vs-qa-card .qa-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--vs-text-muted);
    font-weight: 900;
    margin-bottom: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vs-qa-card .qa-body { font-size: 1.05rem; line-height: 1.4; margin: 0; color: var(--vs-text); }
.vs-qa-card.updating { animation: vs-fade-in 0.25s ease both; }

/* Sentiment badges */
.vs-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    animation: vs-fade-up 0.3s ease both;
}

.vs-badge.positive { background: var(--vs-badge-positive-bg); color: var(--vs-badge-positive-text); }
.vs-badge.negative { background: var(--vs-badge-negative-bg); color: var(--vs-badge-negative-text); }
.vs-badge.neutral { background: var(--vs-badge-neutral-bg); color: var(--vs-badge-neutral-text); }

/* Conversation / report history */
.conversation-card h2 {
    margin: 0 0 24px;
    color: var(--vs-text);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
}

.vs-history { display: flex; flex-direction: column; gap: 0.75rem; }

.vs-turn {
    border: 1px solid var(--vs-border);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    background: var(--vs-surface-solid);
    animation: vs-fade-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vs-turn .turn-question { font-family: var(--vs-font-display); font-weight: 700; color: var(--vs-primary-dark); margin-bottom: 0.35rem; }
.vs-turn .turn-said { color: var(--vs-text-muted); font-size: 0.92rem; margin-bottom: 0.25rem; }
.vs-turn .turn-matched-option { font-size: 0.85rem; color: var(--vs-primary-dark); margin-bottom: 0.25rem; }
.vs-turn .turn-understood { font-size: 0.95rem; color: var(--vs-text); }
.vs-turn .turn-evidence-sentence {
    font-size: 0.88rem;
    font-style: italic;
    color: var(--vs-text-muted, #6b7280);
    border-left: 3px solid var(--vs-primary);
    margin: 0.4rem 0 0;
    padding: 0.1rem 0 0.1rem 0.6rem;
}

/* Official questionnaire report (AbuDhabi2026 only) - one row per source-document question,
   laid out so it reads top-to-bottom the same way the paper form does. */
.vs-official-report { display: flex; flex-direction: column; gap: 0.9rem; }

.vs-official-row {
    border: 1px solid var(--vs-border);
    border-radius: 12px;
    padding: 0.9rem 1.2rem;
    background: var(--vs-surface-solid);
}

.vs-official-q { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.4rem; }
.vs-official-qnum {
    font-family: var(--vs-font-display);
    font-weight: 700;
    color: var(--vs-primary);
    flex-shrink: 0;
}
.vs-official-qtext { font-weight: 600; color: var(--vs-text); }
.vs-official-coded { font-size: 0.92rem; color: var(--vs-primary-dark); margin-bottom: 0.25rem; }
.vs-official-answer { font-size: 0.95rem; color: var(--vs-text-muted); }

/* Report summary card */
.vs-report-summary {
    background: linear-gradient(135deg, rgba(var(--vs-primary-rgb), 0.1), rgba(var(--vs-bronze-rgb), 0.08));
    border: 1px solid rgba(var(--vs-primary-rgb), 0.2);
    border-radius: var(--vs-radius);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    animation: vs-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vs-report-summary .headline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }

.vs-theme-chip {
    display: inline-block;
    background: var(--vs-surface-solid);
    border: 1px solid var(--vs-border-strong);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.78rem;
    margin: 0.2rem 0.3rem 0 0;
    color: var(--vs-text);
    animation: vs-fade-up 0.3s ease both;
}

.vs-complaint-list { list-style: none; padding-left: 0; margin: 0.4rem 0 0; }

.vs-complaint-list li {
    position: relative;
    padding: 0.3rem 0 0.3rem 0.9rem;
    border-left: 2px solid var(--vs-border-strong);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--vs-text);
    margin-bottom: 0.3rem;
}

@media (max-width: 900px) {
    .survey-hero h1 { font-size: 36px; }
    .vs-panel { padding: 26px 22px; }
    .vs-step .label { font-size: 0.62rem; }
}

@media (max-width: 620px) {
    .survey-hero { padding-top: 34px; }
    .survey-hero h1 { font-size: 30px; }
    .survey-hero .subtitle { font-size: 15px; }
    .vs-panel { padding: 20px 16px; }
    .vs-step .label { display: none; }
    .vs-stepper { margin-bottom: 20px; }
}

.d-none { display: none !important; }