/* ============================================================
   VoiceAgent.AI — Charcoal + Cream + Sage Design System
   ============================================================ */

:root {
    /* Core palette */
    --bg-page:          #0D1110;
    --bg-frame:         #111513;
    --surface-1:        #151A17;
    --surface-2:        #1A201C;
    --surface-3:        #1D241F;

    /* Borders */
    --border-subtle:    #2A332E;
    --border-strong:    #374240;

    /* Typography */
    --cream-primary:    #F3F0E6;
    --cream-secondary:  #CFCBC0;
    --cream-muted:      #8E8B82;

    /* Accent — Sage */
    --sage:             #A7C1A1;
    --sage-light:       #C8D6B8;
    --sage-muted:       #7F947A;
    --sage-dim:         rgba(167, 193, 161, 0.15);
    --sage-glow:        rgba(167, 193, 161, 0.20);
    --sage-glow-strong: rgba(167, 193, 161, 0.35);

    /* State colors — all derive from palette */
    --state-listening:  #7FBFCF;    /* cool slate-cyan */
    --state-speaking:   #A7C1A1;    /* sage */
    --state-thinking:   #C5B998;    /* warm cream-gold */
    --state-error:      #C17676;    /* muted terracotta */

    /* Fonts */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Radii */
    --radius-frame:  24px;
    --radius-panel:  16px;
    --radius-card:   12px;
    --radius-pill:   100px;

    /* Transitions */
    --t-fast:   150ms ease;
    --t-normal: 250ms ease;
    --t-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* ─── Base ────────────────────────────────────────────────────────────────── */
body {
    background-color: var(--bg-page);
    color: var(--cream-primary);
    font-family: var(--font-ui);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Background — subtle radial behind console ────────────────────────────── */
.bg-glow-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.glow-spot {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
}

.spot-1 {
    top: -12%;
    left: 30%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(167, 193, 161, 0.05) 0%, transparent 70%);
}

.spot-2 {
    bottom: -10%;
    right: 20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(127, 148, 122, 0.06) 0%, transparent 70%);
}

.spot-3 {
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(167, 193, 161, 0.03) 0%, transparent 70%);
}

/* ─── Outer Page Layout ───────────────────────────────────────────────────── */
.app-layout {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 980px;
    padding: 24px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100vh;
    justify-content: center;
}

/* ─── Main Console Frame ──────────────────────────────────────────────────── */
.console-frame {
    background: var(--bg-frame);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-frame);
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 32px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}

.console-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167,193,161,0.12), transparent);
    pointer-events: none;
}

/* ─── Console Header ──────────────────────────────────────────────────────── */
.console-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
}

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

.brand-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--surface-3);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sage);
    font-size: 0.9rem;
}

.brand-title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--cream-primary);
}

.brand-title .highlight {
    color: var(--sage);
}

.header-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cream-muted);
    letter-spacing: 0.1px;
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--sage);
    animation: dot-pulse 3s infinite ease-in-out;
    flex-shrink: 0;
}

@keyframes dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* ─── Top Controls Bar ────────────────────────────────────────────────────── */
.controls-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.control-group label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--cream-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    user-select: none;
}

.control-group label i {
    color: var(--sage-muted);
    font-size: 0.7rem;
}

.select-wrapper {
    position: relative;
    display: inline-block;
}

.select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    color: var(--cream-primary);
    padding: 8px 34px 8px 14px;
    border-radius: var(--radius-card);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: border-color var(--t-fast), background var(--t-fast);
    font-family: var(--font-ui);
    min-width: 180px;
}

.select-wrapper select option {
    background: var(--surface-2);
    color: var(--cream-primary);
}

.select-wrapper select:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.select-wrapper select:focus {
    border-color: var(--sage-muted);
    box-shadow: 0 0 0 3px rgba(167,193,161,0.08);
}

.select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--cream-muted);
    pointer-events: none;
}

/* ─── Showcase Grid ───────────────────────────────────────────────────────── */
.showcase-grid {
    display: grid;
    grid-template-columns: 1fr 270px;
    gap: 32px;
    align-items: center;
}

/* ─── Orbit Stage ─────────────────────────────────────────────────────────── */
.orbit-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 370px;
}

.orbit-wrapper {
    width: 350px;
    height: 350px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Orbit guide rings */
.orbit-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ring-outer {
    width: 316px;
    height: 316px;
    border: 1px dashed rgba(167, 193, 161, 0.12);
}

.ring-inner {
    width: 218px;
    height: 218px;
    border: 1px solid rgba(167, 193, 161, 0.06);
}

/* ─── Iron Man Arc Reactor Tech Living Core ────────────────────────────── */

.orb-container {
    position: absolute;
    width: 190px;
    height: 190px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.orb-pulsar {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Arc Reactor Concentric Tech Rings */
.reactor-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transition: border-color var(--t-slow), box-shadow var(--t-slow);
}

.reactor-outer {
    width: 170px;
    height: 170px;
    border: 1px dashed rgba(167, 193, 161, 0.3);
    animation: rotate-cw 25s linear infinite;
    z-index: 1;
}

.reactor-middle {
    width: 142px;
    height: 142px;
    border: 1px double rgba(167, 193, 161, 0.4);
    box-shadow: 0 0 12px rgba(167, 193, 161, 0.1);
    animation: rotate-ccw 15s linear infinite;
    z-index: 1;
}

.reactor-inner {
    width: 114px;
    height: 114px;
    border: 1px dashed rgba(167, 193, 161, 0.5);
    animation: rotate-cw 8s linear infinite;
    z-index: 1;
}

.reactor-ticks {
    position: absolute;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    border: 1px dotted rgba(167, 193, 161, 0.22);
    animation: rotate-ccw 30s linear infinite;
    pointer-events: none;
}

/* Wave canvas */
.orb-wave-canvas {
    position: absolute;
    inset: -35px;
    width: calc(100% + 70px);
    height: calc(100% + 70px);
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity var(--t-slow);
}

.orb-pulsar.state-listening  .orb-wave-canvas,
.orb-pulsar.state-speaking   .orb-wave-canvas  {
    opacity: 1;
}

/* Orb Core Lens */
.orb-core {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    position: relative;
    z-index: 3;
    transition: all var(--t-slow);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1.5px solid rgba(167, 193, 161, 0.45);
}

/* Core Arc Heart Aperture Geometry */
.reactor-core-heart {
    position: absolute;
    inset: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 3;
}

.reactor-tri-1 {
    position: absolute;
    width: 44px;
    height: 44px;
    background: radial-gradient(circle, rgba(167,193,161,0.75) 0%, rgba(127,148,122,0.25) 70%);
    clip-path: polygon(50% 5%, 95% 82%, 5% 82%);
    animation: rotate-cw 12s linear infinite;
    opacity: 0.85;
}

.reactor-tri-2 {
    position: absolute;
    width: 44px;
    height: 44px;
    background: radial-gradient(circle, rgba(200,214,184,0.65) 0%, rgba(167,193,161,0.2) 70%);
    clip-path: polygon(50% 95%, 95% 18%, 5% 18%);
    animation: rotate-ccw 12s linear infinite;
    opacity: 0.75;
}

.reactor-center-lens {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, #F3F0E6 0%, #C8D6B8 50%, #A7C1A1 100%);
    box-shadow: 0 0 15px rgba(243, 240, 230, 0.9), 0 0 30px rgba(167, 193, 161, 0.6);
    z-index: 4;
}

.orb-inner-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}

/* Concentric pulse rings around orb */
.orb-pulsar .orb-ring {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--t-slow);
    pointer-events: none;
    z-index: 1;
}

.orb-pulsar .ring-1 { width: 110px; height: 110px; }
.orb-pulsar .ring-2 { width: 132px; height: 132px; }
.orb-pulsar .ring-3 { width: 154px; height: 154px; }

/* ──── ORB INTERACTIVE HOVER ──────────────────────────────────────────────── */
.orb-container:hover .orb-core {
    transform: scale(1.08);
    box-shadow:
        0 0 45px rgba(167,193,161,0.4),
        0 0 90px rgba(167,193,161,0.2),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

.orb-container:hover .reactor-outer {
    border-color: rgba(167,193,161,0.6);
    animation-duration: 10s;
}

.orb-container:hover .reactor-middle {
    border-color: rgba(167,193,161,0.7);
    animation-duration: 6s;
}

/* ──── ORB STATE ANIMATIONS ───────────────────────────────────────────────── */

/* DISCONNECTED / Ready */
.orb-pulsar.state-disconnected .orb-core {
    background: radial-gradient(circle at 38% 36%, #1E2D27 0%, #111A16 100%);
    box-shadow: 0 0 20px rgba(167,193,161,0.1);
}

/* IDLE — soft breathing Arc Reactor */
.orb-pulsar.state-idle .orb-core {
    background: radial-gradient(circle at 38% 36%, #2F4E3C 0%, #1B3224 60%, #111E15 100%);
    box-shadow:
        0 0 35px rgba(167,193,161,0.22),
        0 0 70px rgba(167,193,161,0.10),
        inset 0 1px 0 rgba(255,255,255,0.12);
    animation: orb-breathe 4s infinite ease-in-out;
}

.orb-pulsar.state-idle .orb-inner-glow {
    background: radial-gradient(circle at 35% 30%, rgba(200,214,184,0.22) 0%, transparent 60%);
    animation: orb-shimmer 6s infinite ease-in-out;
}

/* LISTENING — Cyan-Sage Quantum Energy Glow */
.orb-pulsar.state-listening .orb-core {
    background: radial-gradient(circle at 38% 36%, #264A5A 0%, #16303D 60%, #0E2028 100%);
    box-shadow:
        0 0 45px rgba(127,191,207,0.30),
        0 0 90px rgba(127,191,207,0.12),
        inset 0 1px 0 rgba(255,255,255,0.15);
    border-color: rgba(127,191,207,0.6);
}

.orb-pulsar.state-listening .reactor-outer,
.orb-pulsar.state-listening .reactor-middle {
    border-color: rgba(127,191,207,0.5);
}

.orb-pulsar.state-listening .reactor-tri-1 {
    background: radial-gradient(circle, rgba(127,191,207,0.85) 0%, rgba(14,32,40,0.3) 70%);
}

.orb-pulsar.state-listening .orb-ring {
    border: 1px solid rgba(127, 191, 207, 0.25);
    opacity: 1;
}

.orb-pulsar.state-listening .ring-1 { animation: orb-ripple 2.4s infinite ease-out; }
.orb-pulsar.state-listening .ring-2 { animation: orb-ripple 2.4s infinite ease-out 0.8s; }
.orb-pulsar.state-listening .ring-3 { animation: orb-ripple 2.4s infinite ease-out 1.6s; }

/* THINKING — Fast Spinning Gold-Sage Core */
.orb-pulsar.state-thinking .orb-core {
    background: radial-gradient(circle at 38% 36%, #524326 0%, #332917 60%, #1C160C 100%);
    box-shadow:
        0 0 40px rgba(197,185,152,0.28),
        0 0 80px rgba(197,185,152,0.10),
        inset 0 1px 0 rgba(255,255,255,0.12);
    animation: orb-think 2s infinite ease-in-out;
    border-color: rgba(197,185,152,0.6);
}

.orb-pulsar.state-thinking .reactor-tri-1 {
    animation-duration: 4s;
    background: radial-gradient(circle, rgba(197,185,152,0.9) 0%, rgba(28,22,12,0.3) 70%);
}

.orb-pulsar.state-thinking .reactor-tri-2 {
    animation-duration: 4s;
}

.orb-pulsar.state-thinking .orb-ring {
    border: 1px dashed rgba(197,185,152,0.2);
    animation: orb-ripple 3.2s infinite ease-out;
    opacity: 1;
}

/* SPEAKING — Dynamic High Power Sage Arc Reactor Discharge */
.orb-pulsar.state-speaking .orb-core {
    background: radial-gradient(circle at 38% 36%, #456D42 0%, #2A472B 60%, #152616 100%);
    box-shadow:
        0 0 50px rgba(167,193,161,0.40),
        0 0 100px rgba(167,193,161,0.18),
        inset 0 1px 0 rgba(255,255,255,0.20);
    animation: orb-speak 1.6s infinite ease-in-out;
    border-color: rgba(200,214,184,0.7);
}

.orb-pulsar.state-speaking .reactor-outer {
    border-color: rgba(167,193,161,0.7);
    animation-duration: 8s;
}

.orb-pulsar.state-speaking .reactor-middle {
    border-color: rgba(200,214,184,0.8);
    animation-duration: 5s;
}

.orb-pulsar.state-speaking .reactor-tri-1 {
    animation-duration: 5s;
    background: radial-gradient(circle, rgba(200,214,184,0.95) 0%, rgba(167,193,161,0.4) 70%);
}

.orb-pulsar.state-speaking .orb-ring {
    border: 1px solid rgba(167, 193, 161, 0.25);
    opacity: 1;
}

.orb-pulsar.state-speaking .ring-1 { animation: orb-ripple 1.8s infinite ease-out; }
.orb-pulsar.state-speaking .ring-2 { animation: orb-ripple 1.8s infinite ease-out 0.6s; }
.orb-pulsar.state-speaking .ring-3 { animation: orb-ripple 1.8s infinite ease-out 1.2s; }

/* ERROR — Terracotta power failure */
.orb-pulsar.state-error .orb-core {
    background: radial-gradient(circle at 38% 36%, #4A2222 0%, #2A1414 100%);
    box-shadow: 0 0 30px rgba(193,118,118,0.3);
    animation: orb-shake 0.5s ease-in-out;
    border-color: rgba(193,118,118,0.6);
}

/* ─── Voice Avatar Orbit positioning fix ──────────────────────────────────── */
.voice-orbit-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.voice-node {
    position: absolute;
    left: calc(50% - 27px);
    top: calc(50% - 27px);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1.5px solid var(--border-subtle);
    cursor: pointer;
    background: var(--surface-1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color var(--t-normal),
        box-shadow var(--t-normal);
    pointer-events: auto;
    z-index: 5;
}

.voice-node img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    opacity: 0.55;
    transition: opacity var(--t-normal);
}

.voice-node:hover {
    border-color: var(--sage-muted);
    box-shadow: 0 0 0 3px rgba(167,193,161,0.12);
    transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.12) !important;
}

.voice-node:hover img {
    opacity: 0.85;
}

.voice-node.selected {
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(167,193,161,0.20);
    transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.18) !important;
    background: var(--surface-2);
}

.voice-node.selected img {
    opacity: 1;
}

/* ─── Active Voice Panel ──────────────────────────────────────────────────── */
.active-voice-panel {
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-panel);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-self: center;
    width: 100%;
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.active-avatar-frame {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1.5px solid var(--sage-muted);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px rgba(167,193,161,0.08);
}

.active-avatar-frame img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.active-voice-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.name-preview-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.name-preview-row h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cream-primary);
    letter-spacing: -0.2px;
}

.preview-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--sage-muted);
    font-size: 0.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t-fast);
    padding: 0;
    padding-left: 1px;
    flex-shrink: 0;
}

.preview-btn:hover {
    background: var(--sage);
    color: #0D1110;
    border-color: var(--sage);
}

.voice-role-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--sage-muted);
    letter-spacing: 0.2px;
}

.panel-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.info-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.block-label {
    font-size: 0.68rem;
    color: var(--cream-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 600;
}

.block-value {
    font-size: 0.82rem;
    color: var(--cream-secondary);
    font-weight: 500;
}

.block-text {
    font-size: 0.79rem;
    color: var(--cream-muted);
    line-height: 1.55;
    font-weight: 400;
}

.panel-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

.mic-toggle-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--cream-secondary);
    font-size: 0.82rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t-fast);
    flex-shrink: 0;
}

.mic-toggle-btn:hover:not(:disabled) {
    border-color: var(--sage-muted);
    color: var(--sage);
    background: var(--surface-3);
}

.mic-toggle-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.mic-toggle-btn.muted {
    background: rgba(193,118,118,0.12);
    border-color: var(--state-error);
    color: var(--state-error);
}

.mic-indicator {
    display: flex;
    align-items: center;
    gap: 7px;
}

.mic-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cream-muted);
    flex-shrink: 0;
    transition: background-color var(--t-normal);
}

.mic-indicator.recording .mic-dot {
    background: var(--state-error);
    animation: dot-pulse 1.4s infinite ease-in-out;
}

#mic-status {
    font-size: 0.76rem;
    color: var(--cream-muted);
    font-weight: 500;
}

/* ─── Action Footer ───────────────────────────────────────────────────────── */
.action-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
    gap: 16px;
}

.status-display {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--cream-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.status-badge {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--surface-1);
    color: var(--cream-muted);
    transition: all var(--t-normal);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.status-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    opacity: 0.6;
}

.status-badge.status-ready {
    color: var(--cream-muted);
    border-color: var(--border-subtle);
}

.status-badge.status-connected {
    color: var(--sage);
    border-color: rgba(167,193,161,0.25);
    background: rgba(167,193,161,0.06);
}

.status-badge.status-listening {
    color: var(--state-listening);
    border-color: rgba(127,191,207,0.25);
    background: rgba(127,191,207,0.06);
}

.status-badge.status-speaking {
    color: var(--sage-light);
    border-color: rgba(200,214,184,0.25);
    background: rgba(200,214,184,0.06);
}

.status-badge.status-thinking {
    color: var(--state-thinking);
    border-color: rgba(197,185,152,0.25);
    background: rgba(197,185,152,0.06);
}

.status-badge.status-error {
    color: var(--state-error);
    border-color: rgba(193,118,118,0.25);
    background: rgba(193,118,118,0.06);
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.button-wrapper {
    display: flex;
    gap: 12px;
}

.glow-button {
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 11px 28px;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--t-normal);
    letter-spacing: 0.1px;
    white-space: nowrap;
}

.btn-start {
    background: var(--sage);
    color: #0D1110;
    box-shadow: 0 4px 20px rgba(167,193,161,0.20);
}

.btn-start:hover {
    background: var(--sage-light);
    box-shadow: 0 6px 28px rgba(167,193,161,0.30);
    transform: translateY(-1px);
}

.btn-start:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(167,193,161,0.15);
}

.btn-end {
    background: var(--surface-2);
    color: var(--state-error);
    border: 1px solid rgba(193,118,118,0.25);
    box-shadow: none;
}

.btn-end:hover {
    background: rgba(193,118,118,0.10);
    border-color: var(--state-error);
    transform: translateY(-1px);
}

.btn-end:active {
    transform: translateY(0);
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
    text-align: center;
    font-size: 0.72rem;
    color: var(--cream-muted);
    opacity: 0.5;
    padding-bottom: 8px;
}

/* ─── Utility ─────────────────────────────────────────────────────────────── */
.hidden {
    display: none !important;
}

/* ─── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 17, 16, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.glass-modal {
    background: var(--bg-frame);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-frame);
    padding: 40px 36px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.7);
    position: relative;
    overflow: hidden;
}

.glass-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167,193,161,0.15), transparent);
}

.modal-icon-glow {
    font-size: 2.4rem;
    color: var(--sage);
    margin-bottom: 4px;
}

.glass-modal h2 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--cream-primary);
    letter-spacing: -0.3px;
}

.glass-modal p {
    font-size: 0.84rem;
    color: var(--cream-muted);
    line-height: 1.55;
}

.modal-actions {
    width: 100%;
    margin-top: 8px;
}

.modal-btn.primary {
    width: 100%;
    padding: 12px;
    border-radius: var(--radius-pill);
    background: var(--sage);
    color: #0D1110;
    border: none;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t-fast);
    letter-spacing: 0.1px;
}

.modal-btn.primary:hover {
    background: var(--sage-light);
    box-shadow: 0 4px 20px rgba(167,193,161,0.25);
}

/* ─── Keyframe Animations ─────────────────────────────────────────────────── */

@keyframes orb-breathe {
    0%, 100% {
        box-shadow:
            0 0 35px rgba(167,193,161,0.22),
            0 0 70px rgba(167,193,161,0.10),
            inset 0 1px 0 rgba(255,255,255,0.12);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 50px rgba(167,193,161,0.30),
            0 0 90px rgba(167,193,161,0.14),
            inset 0 1px 0 rgba(255,255,255,0.15);
        transform: scale(1.03);
    }
}

@keyframes orb-shimmer {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes orb-think {
    0%, 100% { transform: scale(1); }
    33% { transform: scale(1.02); }
    66% { transform: scale(0.98); }
}

@keyframes orb-speak {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 50px rgba(167,193,161,0.40),
            0 0 100px rgba(167,193,161,0.18),
            inset 0 1px 0 rgba(255,255,255,0.20);
    }
    50% {
        transform: scale(1.04);
        box-shadow:
            0 0 65px rgba(167,193,161,0.50),
            0 0 120px rgba(167,193,161,0.24),
            inset 0 1px 0 rgba(255,255,255,0.25);
    }
}

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

@keyframes orb-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

@keyframes rotate-cw {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotate-ccw {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .showcase-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .active-voice-panel {
        max-width: 480px;
        margin: 0 auto;
        order: -1;
    }

    .orbit-stage {
        min-height: 330px;
        order: 1;
    }
}

@media (max-width: 640px) {
    .app-layout {
        padding: 12px 10px 12px;
        gap: 12px;
    }

    .console-frame {
        padding: 18px 16px;
        gap: 18px;
        border-radius: 18px;
    }

    .controls-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .control-group {
        justify-content: space-between;
    }

    .select-wrapper {
        flex: 1;
    }

    .select-wrapper select {
        width: 100%;
        min-width: 0;
    }

    .orbit-wrapper {
        width: 280px;
        height: 280px;
    }

    .ring-outer {
        width: 252px;
        height: 252px;
    }

    .ring-inner {
        width: 174px;
        height: 174px;
    }

    .orb-container {
        width: 150px;
        height: 150px;
    }

    .orb-core {
        width: 72px;
        height: 72px;
    }

    .reactor-outer { width: 140px; height: 140px; }
    .reactor-middle { width: 114px; height: 114px; }
    .reactor-inner { width: 90px; height: 90px; }

    .action-footer {
        flex-direction: column;
        gap: 14px;
        align-items: stretch;
    }

    .status-display {
        justify-content: center;
    }

    .button-wrapper {
        flex-direction: column;
    }

    .glow-button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 400px) {
    .console-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}