/* ─── CSS Variables ─────────────────────────────────── */
    :root {
      --bg: #04060e;
      --surface: rgba(10,14,30,0.85);
      --glass: rgba(255,255,255,0.04);
      --glass-border: rgba(255,255,255,0.08);
      --accent: #00e5ff;
      --accent2: #7c3aed;
      --accent3: #f0abfc;
      --green: #00ffa3;
      --red: #ff4d6d;
      --text: #e2e8f0;
      --muted: #64748b;
      --orb-size: 220px;
      --font-display: 'Orbitron', monospace;
      --font-mono: 'Space Mono', monospace;
      --font-body: 'Rajdhani', sans-serif;
    }

    /* ─── Reset ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; width: 100%; overflow: hidden; }

    body {
      background: var(--bg);
      font-family: var(--font-body);
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ─── Animated starfield background ─────────────────── */
    #starfield {
      position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    }
    .star {
      position: absolute; border-radius: 50%; background: #fff;
      animation: twinkle var(--d,3s) ease-in-out infinite var(--delay,0s);
    }
    @keyframes twinkle {
      0%,100% { opacity: var(--lo,.1); transform: scale(1); }
      50%      { opacity: var(--hi,.8); transform: scale(1.4); }
    }

    /* ─── Nebula blobs ───────────────────────────────────── */
    .nebula {
      position: fixed; border-radius: 50%; filter: blur(90px);
      pointer-events: none; z-index: 0; opacity: .15;
    }
    .nebula-1 { width: 600px; height: 600px; background: radial-gradient(circle, #7c3aed, transparent 70%); top: -150px; left: -100px; }
    .nebula-2 { width: 500px; height: 500px; background: radial-gradient(circle, #00e5ff, transparent 70%); bottom: -100px; right: -80px; }
    .nebula-3 { width: 350px; height: 350px; background: radial-gradient(circle, #f0abfc, transparent 70%); top: 40%; left: 35%; }

    /* ─── Main layout ────────────────────────────────────── */
    .app {
      position: relative; z-index: 1;
      width: min(900px, 98vw);
      height: min(650px, 97vh);
      display: grid;
      grid-template-columns: 1fr 320px;
      grid-template-rows: auto 1fr auto;
      gap: 0;
      border-radius: 24px;
      border: 1px solid var(--glass-border);
      background: var(--surface);
      backdrop-filter: blur(24px);
      box-shadow: 0 40px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(0,229,255,.08) inset;
      overflow: hidden;
    }

    /* ─── Header bar ─────────────────────────────────────── */
    .header {
      grid-column: 1 / -1;
      display: flex; align-items: center; gap: 12px;
      padding: 14px 22px;
      border-bottom: 1px solid var(--glass-border);
      background: rgba(0,0,0,.25);
    }
    .header-dots { display: flex; gap: 6px; }
    .header-dots span { width: 11px; height: 11px; border-radius: 50%; }
    .header-dots span:nth-child(1) { background: #ff5f57; }
    .header-dots span:nth-child(2) { background: #febc2e; }
    .header-dots span:nth-child(3) { background: #28c840; }

    .header-title {
      font-family: var(--font-display);
      font-size: 11px; letter-spacing: 3px;
      color: var(--accent); text-transform: uppercase;
      margin-left: 8px; flex: 1;
    }
    .header-status {
      display: flex; align-items: center; gap: 6px;
      font-family: var(--font-mono); font-size: 10px;
      color: var(--muted);
    }
    .status-led {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 8px var(--green);
      animation: led-pulse 2s ease-in-out infinite;
    }
    .status-led.listening { background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: led-fast 0.5s ease-in-out infinite; }
    .status-led.speaking { background: var(--accent3); box-shadow: 0 0 12px var(--accent3); animation: led-fast 0.3s ease-in-out infinite; }
    @keyframes led-pulse { 0%,100%{opacity:1}50%{opacity:.4} }
    @keyframes led-fast  { 0%,100%{opacity:1}50%{opacity:.2} }

    /* ─── Main center pane ───────────────────────────────── */
    .center {
      display: flex; flex-direction: column; align-items: center;
      justify-content: space-between; padding: 28px 24px 20px;
      border-right: 1px solid var(--glass-border);
    }

    /* ─── Neural Orb ─────────────────────────────────────── */
    .orb-wrap { position: relative; display: flex; align-items: center; justify-content: center; }

    .orb {
      width: var(--orb-size); height: var(--orb-size); border-radius: 50%;
      position: relative; cursor: pointer;
      transition: transform .3s ease;
    }
    .orb:hover { transform: scale(1.03); }
    .orb:active { transform: scale(.97); }

    /* rings */
    .orb-ring {
      position: absolute; inset: 0; border-radius: 50%;
      border: 1px solid rgba(0,229,255,.15);
      animation: ring-spin var(--dur,8s) linear infinite;
    }
    .orb-ring:nth-child(1) { --dur:9s; inset:-18px; border-color: rgba(0,229,255,.12); }
    .orb-ring:nth-child(2) { --dur:14s; inset:-36px; animation-direction: reverse; border-color: rgba(124,58,237,.18); }
    .orb-ring:nth-child(3) { --dur:20s; inset:-54px; border-color: rgba(240,171,252,.08); }

    @keyframes ring-spin { to { transform: rotate(360deg); } }

    /* orb core */
    .orb-core {
      position: absolute; inset: 0; border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #1a1f3c 0%, #080b1a 60%, #00051a 100%);
      box-shadow:
        0 0 40px rgba(0,229,255,.25),
        0 0 80px rgba(0,229,255,.1),
        inset 0 0 40px rgba(124,58,237,.2),
        inset 0 10px 30px rgba(0,229,255,.15);
      overflow: hidden;
    }
    .orb-core::after {
      content: '';
      position: absolute; inset: 0; border-radius: 50%;
      background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.12) 0%, transparent 50%);
      pointer-events: none;
    }

    /* waveform canvas inside orb */
    #wave-canvas {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      border-radius: 50%; opacity: .8;
    }

    /* mic icon overlay */
    .orb-icon {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 36px; pointer-events: none;
      transition: opacity .3s;
      z-index: 2;
    }
    .orb-icon svg { filter: drop-shadow(0 0 8px var(--accent)); }

    /* outer glow when listening */
    .orb.is-listening .orb-core {
      box-shadow:
        0 0 60px rgba(0,229,255,.5),
        0 0 120px rgba(0,229,255,.2),
        inset 0 0 60px rgba(124,58,237,.4);
      animation: orb-breathe .8s ease-in-out infinite alternate;
    }
    @keyframes orb-breathe {
      from { box-shadow: 0 0 60px rgba(0,229,255,.4), inset 0 0 40px rgba(124,58,237,.3); }
      to   { box-shadow: 0 0 100px rgba(0,229,255,.7), inset 0 0 80px rgba(124,58,237,.6); }
    }
    .orb.is-speaking .orb-core {
      box-shadow:
        0 0 60px rgba(240,171,252,.5),
        0 0 120px rgba(240,171,252,.2),
        inset 0 0 60px rgba(124,58,237,.5);
    }

    /* ─── Transcript / status display ───────────────────── */
    .transcript-area {
      width: 100%; text-align: center;
      min-height: 72px;
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 6px;
    }
    .transcript-text {
      font-family: var(--font-mono); font-size: 12px; color: var(--accent);
      letter-spacing: .5px; line-height: 1.6;
      max-width: 360px; word-break: break-word;
      min-height: 20px;
    }
    .transcript-sub {
      font-size: 10px; color: var(--muted); font-family: var(--font-mono);
      letter-spacing: 1.5px; text-transform: uppercase;
    }

    /* ─── Waveform bars (bottom of center) ──────────────── */
    .wave-bars {
      display: flex; align-items: flex-end; gap: 3px;
      height: 28px; opacity: .5;
    }
    .wave-bars.active { opacity: 1; }
    .bar {
      width: 3px; border-radius: 2px;
      background: var(--accent);
      animation: bar-dance var(--dur,.8s) ease-in-out infinite var(--delay,0s) alternate;
      height: 4px;
    }
    .wave-bars.active .bar { height: var(--h,4px); }
    @keyframes bar-dance {
      from { height: 3px; } to { height: var(--h,20px); }
    }

    /* ─── Controls row ───────────────────────────────────── */
    .controls {
      display: flex; align-items: center; gap: 8px;
      flex-wrap: wrap; justify-content: center;
      padding: 0 0 4px;
    }

    .ctrl-btn {
      border: 1px solid var(--glass-border);
      background: var(--glass);
      color: var(--text); border-radius: 10px;
      padding: 7px 14px; font-family: var(--font-body);
      font-size: 12px; letter-spacing: .5px;
      cursor: pointer; transition: all .2s;
      white-space: nowrap;
    }
    .ctrl-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,229,255,.06); }

    .ctrl-select {
      border: 1px solid var(--glass-border);
      background: var(--glass);
      color: var(--muted); border-radius: 10px;
      padding: 7px 10px; font-family: var(--font-mono);
      font-size: 11px; cursor: pointer;
      outline: none; transition: all .2s;
      -webkit-appearance: none;
    }
    .ctrl-select:focus { border-color: var(--accent); color: var(--text); }
    .ctrl-select option { background: #0a0e1e; }

    /* ─── Sidebar ─────────────────────────────────────────── */
    .sidebar {
      display: flex; flex-direction: column; gap: 0;
      overflow: hidden;
    }

    .sidebar-section {
      padding: 14px 16px;
      border-bottom: 1px solid var(--glass-border);
      flex-shrink: 0;
    }
    .sidebar-label {
      font-family: var(--font-display); font-size: 8px;
      letter-spacing: 2.5px; color: var(--muted);
      text-transform: uppercase; margin-bottom: 10px;
    }

    /* ─── Command history ────────────────────────────────── */
    .history-wrap {
      flex: 1; overflow-y: auto; padding: 10px 16px 14px;
      scrollbar-width: thin; scrollbar-color: var(--glass-border) transparent;
    }
    .history-item {
      padding: 8px 0;
      border-bottom: 1px solid rgba(255,255,255,.04);
      animation: fade-in .4s ease;
    }
    @keyframes fade-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
    .history-user {
      font-family: var(--font-mono); font-size: 10px;
      color: var(--accent3); margin-bottom: 4px;
    }
    .history-user::before { content: '▶ '; opacity: .6; }
    .history-shivi {
      font-size: 11px; color: var(--muted); line-height: 1.5;
    }
    .history-shivi::before { content: '◈ '; color: var(--accent); }
    .history-empty {
      font-size: 11px; color: var(--muted); text-align: center;
      padding: 20px 0; font-family: var(--font-mono);
      opacity: .5;
    }

    /* ─── Quick commands grid ────────────────────────────── */
    .quick-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    }
    .quick-btn {
      border: 1px solid var(--glass-border);
      background: var(--glass); color: var(--muted);
      border-radius: 8px; padding: 7px 8px;
      font-size: 10px; font-family: var(--font-mono);
      cursor: pointer; transition: all .2s; text-align: left;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .quick-btn:hover {
      border-color: var(--accent2); color: var(--text);
      background: rgba(124,58,237,.1);
    }

    /* ─── Neural metrics ─────────────────────────────────── */
    .metrics { display: flex; flex-direction: column; gap: 8px; }
    .metric { display: flex; align-items: center; gap: 10px; }
    .metric-label { font-size: 10px; color: var(--muted); width: 70px; flex-shrink: 0; }
    .metric-bar-wrap { flex: 1; height: 4px; background: var(--glass); border-radius: 2px; overflow: hidden; }
    .metric-bar {
      height: 100%; border-radius: 2px;
      background: linear-gradient(90deg, var(--accent2), var(--accent));
      transition: width 1.2s cubic-bezier(.4,0,.2,1);
    }
    .metric-val { font-family: var(--font-mono); font-size: 9px; color: var(--accent); width: 28px; text-align: right; }

    /* ─── Unique: Mood ring ──────────────────────────────── */
    .mood-row { display: flex; align-items: center; gap: 10px; }
    .mood-circle {
      width: 36px; height: 36px; border-radius: 50%;
      background: conic-gradient(var(--accent) 0%, var(--accent2) 40%, var(--accent3) 70%, var(--green) 100%);
      animation: mood-spin 6s linear infinite;
      filter: blur(1px) brightness(1.2);
      flex-shrink: 0;
    }
    @keyframes mood-spin { to { transform: rotate(360deg); } }
    .mood-text { font-size: 11px; color: var(--muted); line-height: 1.4; }
    .mood-name { color: var(--text); font-weight: 600; font-size: 13px; }

    /* ─── Typing bar at bottom of center ────────────────── */
    .text-input-row {
      display: flex; gap: 6px; width: 100%; margin-top: 6px;
    }
    .text-input {
      flex: 1; background: var(--glass); border: 1px solid var(--glass-border);
      color: var(--text); border-radius: 10px; padding: 8px 12px;
      font-family: var(--font-mono); font-size: 11px; outline: none;
      transition: border-color .2s;
    }
    .text-input::placeholder { color: var(--muted); }
    .text-input:focus { border-color: var(--accent); }
    .send-btn {
      border: 1px solid var(--accent); background: rgba(0,229,255,.08);
      color: var(--accent); border-radius: 10px;
      padding: 8px 12px; cursor: pointer; font-size: 14px;
      transition: all .2s;
    }
    .send-btn:hover { background: rgba(0,229,255,.18); }

    /* ─── Toast notification ─────────────────────────────── */
    #toast {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
      background: rgba(10,14,30,.95); border: 1px solid var(--accent);
      color: var(--text); padding: 10px 22px; border-radius: 50px;
      font-family: var(--font-mono); font-size: 11px;
      transition: transform .4s cubic-bezier(.34,1.56,.64,1);
      z-index: 100; pointer-events: none;
      box-shadow: 0 8px 32px rgba(0,229,255,.15);
    }
    #toast.show { transform: translateX(-50%) translateY(0); }

    /* ─── Scrollbar ──────────────────────────────────────── */
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 2px; }

    /* ─── Responsive ─────────────────────────────────────── */
    @media (max-width: 700px) {
      .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; width: 98vw; height: 97vh; }
      .sidebar { display: none; }
      .center { border-right: none; }
      :root { --orb-size: 170px; }
    }