:root {
    --va-bg-0: #04070d;
    --va-bg-1: #081321;
    --va-bg-2: #10233a;
    --va-card: rgba(14, 22, 36, 0.76);
    --va-card-border: rgba(132, 169, 198, 0.28);
    --va-text: #f1f6ff;
    --va-muted: #9fb3cb;
    --va-cyan: #61ddff;
    --va-amber: #ffbf70;
    --va-green: #8af1a0;
    --va-red: #ff7e7e;
    --va-magenta: #ff7ab6;
    --va-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
    --va-radius: 18px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    color: var(--va-text);
    background:
        radial-gradient(circle at 12% 10%, rgba(97, 221, 255, 0.18), transparent 42%),
        radial-gradient(circle at 88% 8%, rgba(255, 191, 112, 0.12), transparent 34%),
        linear-gradient(160deg, var(--va-bg-0), var(--va-bg-1) 42%, var(--va-bg-2));
    min-height: 100vh;
}

.voice-lab-shell {
    width: min(1420px, 96vw);
    margin: 1.2rem auto 2.4rem;
    display: grid;
    gap: 1rem;
}

.lab-hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-end;
    padding: 1rem 1.2rem;
    border-radius: var(--va-radius);
    border: 1px solid rgba(132, 169, 198, 0.22);
    background: linear-gradient(145deg, rgba(21, 32, 51, 0.78), rgba(13, 22, 38, 0.72));
    box-shadow: var(--va-shadow);
}

.lab-hero h1 {
    margin: 0;
    font-size: clamp(1.45rem, 2.8vw, 2.35rem);
    letter-spacing: 0.02em;
}

.lab-hero p {
    margin: 0.45rem 0 0;
    color: var(--va-muted);
    max-width: 68ch;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.62rem;
    border-radius: 999px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.74rem;
    background: rgba(97, 221, 255, 0.1);
    border: 1px solid rgba(97, 221, 255, 0.32);
    color: #d8f7ff;
}

.lab-grid {
    display: grid;
    grid-template-columns: 1.45fr 1.25fr 0.95fr;
    gap: 1rem;
    align-items: stretch;
}

.panel {
    border-radius: var(--va-radius);
    border: 1px solid var(--va-card-border);
    background: var(--va-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--va-shadow);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    min-height: 260px;
}

.panel-header h2 {
    margin: 0;
    font-size: 1.18rem;
}

.panel-header p {
    margin: 0.35rem 0 0.9rem;
    color: var(--va-muted);
    font-size: 0.92rem;
    line-height: 1.35;
}

.avatar-stage {
    width: 100%;
    height: 360px;
    border-radius: 14px;
    border: 1px solid rgba(132, 169, 198, 0.28);
    overflow: hidden;
    background:
        radial-gradient(circle at 28% 12%, rgba(97, 221, 255, 0.14), transparent 45%),
        linear-gradient(165deg, #0a111d, #0d1729);
}

.avatar-stage canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.avatar-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.62rem;
}

.stock-row select {
    flex: 1 1 auto;
}

.stock-row .action-btn,
.stock-row .ghost-btn {
    flex: 0 0 auto;
}

.stock-note {
    margin-top: 0.42rem;
    color: #cfe8ff;
}

.text-input,
select,
input[type="password"],
input[type="url"] {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(132, 169, 198, 0.36);
    background: rgba(8, 14, 24, 0.78);
    color: var(--va-text);
    padding: 0.58rem 0.62rem;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.85rem;
}

.text-input:focus,
select:focus {
    outline: 1px solid rgba(97, 221, 255, 0.7);
    border-color: rgba(97, 221, 255, 0.7);
}

.action-btn,
.ghost-btn,
.file-label {
    border-radius: 10px;
    border: 1px solid rgba(132, 169, 198, 0.35);
    background: rgba(10, 16, 29, 0.85);
    color: var(--va-text);
    font-weight: 600;
    font-family: "Space Grotesk", sans-serif;
    padding: 0.56rem 0.74rem;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.2s ease;
    white-space: nowrap;
}

.file-label {
    display: inline-flex;
    align-items: center;
}

.action-btn:hover,
.ghost-btn:hover,
.file-label:hover {
    transform: translateY(-1px);
    border-color: rgba(97, 221, 255, 0.72);
}

.action-btn.primary {
    background: linear-gradient(130deg, rgba(97, 221, 255, 0.2), rgba(138, 241, 160, 0.15));
    border-color: rgba(97, 221, 255, 0.8);
}

.action-btn:disabled,
.ghost-btn:disabled {
    opacity: 0.44;
    cursor: not-allowed;
    transform: none;
}

.talk-btn.is-recording {
    border-color: rgba(255, 126, 126, 0.94);
    background: linear-gradient(130deg, rgba(255, 126, 126, 0.24), rgba(255, 191, 112, 0.22));
    animation: pulse-talker 1s ease infinite;
}

@keyframes pulse-talker {
    0% { box-shadow: 0 0 0 0 rgba(255, 126, 126, 0.38); }
    100% { box-shadow: 0 0 0 14px rgba(255, 126, 126, 0); }
}

.viseme-readout {
    margin-top: 0.72rem;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.8rem;
    color: var(--va-cyan);
}

.voice-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--va-muted);
}

.status-row {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0.74rem 0;
}

.status-text {
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.77rem;
    color: var(--va-cyan);
}

.gen-ui-shell {
    border-radius: 14px;
    border: 1px solid rgba(132, 169, 198, 0.28);
    background:
        radial-gradient(circle at 90% 4%, rgba(255, 122, 182, 0.11), transparent 42%),
        radial-gradient(circle at 8% 94%, rgba(97, 221, 255, 0.13), transparent 42%),
        rgba(7, 12, 21, 0.82);
    padding: 0.62rem;
    margin: 0.38rem 0 0.3rem;
}

.gen-ui-topline {
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.46rem;
}

.gen-ui-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.gen-card {
    border-radius: 12px;
    border: 1px solid rgba(132, 169, 198, 0.24);
    background: rgba(13, 22, 37, 0.72);
    padding: 0.56rem;
    min-height: 104px;
    position: relative;
    overflow: hidden;
    animation: gen-card-enter 240ms ease;
}

.gen-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 10%, rgba(255, 255, 255, 0.07) 46%, transparent 84%);
    transform: translateX(-110%);
    animation: gen-shimmer 2.9s ease-in-out infinite;
    pointer-events: none;
}

.gen-card h3 {
    margin: 0;
    font-size: 0.84rem;
    letter-spacing: 0.02em;
}

.gen-card p {
    margin: 0.34rem 0 0;
    font-size: 0.79rem;
    line-height: 1.35;
    color: #d6e7ff;
}

.gen-card ul {
    margin: 0.34rem 0 0;
    padding-left: 1.05rem;
    display: grid;
    gap: 0.2rem;
    font-size: 0.79rem;
    color: #d6e7ff;
}

.gen-card li {
    line-height: 1.3;
}

.gen-card.gen-card-placeholder {
    grid-column: 1 / -1;
    min-height: auto;
}

.gen-card.intent { border-color: rgba(255, 191, 112, 0.45); }
.gen-card.summary { border-color: rgba(97, 221, 255, 0.45); }
.gen-card.actions { border-color: rgba(138, 241, 160, 0.45); }
.gen-card.sources { border-color: rgba(255, 122, 182, 0.46); }

.pill-row {
    margin-top: 0.42rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
}

.ui-pill {
    border-radius: 999px;
    border: 1px solid rgba(132, 169, 198, 0.35);
    background: rgba(8, 14, 24, 0.8);
    color: #d9edff;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.66rem;
    line-height: 1;
    padding: 0.24rem 0.44rem;
    text-decoration: none;
}

.ui-pill.intent {
    border-color: rgba(255, 191, 112, 0.6);
    color: #ffdca8;
}

.ui-pill.tool {
    border-color: rgba(138, 241, 160, 0.5);
    color: #d7ffe3;
}

.ui-pill.source {
    border-color: rgba(255, 122, 182, 0.52);
    color: #ffd7ea;
}

@keyframes gen-card-enter {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gen-shimmer {
    0% {
        transform: translateX(-115%);
        opacity: 0;
    }
    28% {
        opacity: 1;
    }
    52% {
        transform: translateX(130%);
        opacity: 0.92;
    }
    100% {
        transform: translateX(130%);
        opacity: 0;
    }
}

.transcript-feed {
    margin-top: 0.25rem;
    border-radius: 14px;
    border: 1px solid rgba(132, 169, 198, 0.2);
    background: rgba(7, 11, 19, 0.72);
    min-height: 360px;
    max-height: 62vh;
    overflow: auto;
    padding: 0.66rem;
    display: grid;
    gap: 0.55rem;
}

.entry {
    border-radius: 10px;
    border: 1px solid rgba(132, 169, 198, 0.18);
    padding: 0.52rem 0.58rem;
    background: rgba(16, 25, 41, 0.56);
}

.entry-role {
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.71rem;
    margin-bottom: 0.3rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.entry-body {
    white-space: pre-wrap;
    font-size: 0.9rem;
    line-height: 1.38;
}

.entry-user .entry-role { color: var(--va-amber); }
.entry-assistant .entry-role { color: var(--va-green); }
.entry-tool .entry-role { color: var(--va-cyan); }
.entry-system .entry-role { color: #c7d6e9; }

.setting-group {
    margin-bottom: 1rem;
}

.setting-group label {
    display: block;
    margin-bottom: 0.35rem;
    color: #dbebff;
    font-size: 0.84rem;
}

.mini-status {
    margin-top: 0.35rem;
    font-family: "IBM Plex Mono", monospace;
    color: var(--va-muted);
    font-size: 0.75rem;
    line-height: 1.3;
}

.range-row {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
}

.range-row input[type="range"] {
    width: 100%;
}

.secret-row,
.action-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

#avatar-file {
    width: 1px;
    height: 1px;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 1180px) {
    .lab-grid {
        grid-template-columns: 1fr;
    }

    .panel {
        min-height: auto;
    }

    .avatar-stage {
        height: 330px;
    }
}

@media (max-width: 760px) {
    .lab-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-badges {
        justify-content: flex-start;
    }

    .avatar-row,
    .secret-row,
    .action-row {
        flex-wrap: wrap;
    }

    .voice-lab-shell {
        width: min(100vw, 100%);
        padding: 0 0.65rem 1rem;
    }

    .transcript-feed {
        min-height: 300px;
        max-height: 48vh;
    }

    .gen-ui-cards {
        grid-template-columns: 1fr;
    }
}