/* Palette ported from the supplied Saadiyat Cultural District 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;
    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;
}

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: 100px;
    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-links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0 auto 0 40px;
    padding: 0;
}

.app-nav-link {
    color: var(--vs-text);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 8px 0;
    position: relative;
}

.app-nav-link.active::after,
.app-nav-link:hover::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -10px;
    height: 3px;
    border-radius: 3px;
    background: var(--vs-accent);
}

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

/* 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-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: 86px; }
    .app-brand img { height: 38px; }
    .app-nav-links { display: none; }
}

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

/* ---------- 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); }

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

.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); }

/* 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; }