* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: #070a12;
  color: #e8ecf4;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Devanagari", sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  transition: background 0.6s ease, color 0.6s ease;

  /* state palette — idle */
  --c-hi: #a8b3d0;
  --c-lo: #1d2436;
  --ring: #5d6883;
  --glow: rgba(125, 140, 180, 0.28);
  --accent: #8fa0c8;
}
body.st-greeting { --c-hi: #7de3f4; --c-lo: #0e4b5e; --ring: #37c8dd; --glow: rgba(56, 199, 224, 0.35); --accent: #4dd3e8; }
body.st-listening { --c-hi: #ffd489; --c-lo: #4a3413; --ring: #f0b35a; --glow: rgba(240, 179, 90, 0.32); --accent: #f5c069; }
body.st-talking { --c-hi: #ff9db4; --c-lo: #571c2d; --ring: #f26d8e; --glow: rgba(242, 109, 142, 0.38); --accent: #f4809e; }
body.st-thinking { --c-hi: #b9a7ff; --c-lo: #2e2657; --ring: #8d7bf0; --glow: rgba(141, 123, 240, 0.38); --accent: #a493ff; }
body.st-answering,
body.st-speaking { --c-hi: #7de3f4; --c-lo: #0e4b5e; --ring: #37c8dd; --glow: rgba(56, 199, 224, 0.35); --accent: #4dd3e8; }

/* ---------- light theme ---------- */
html.light body {
  background: #f7f8fd;
  color: #16192b;

  /* state palette — idle (light): indigo, not gray */
  --c-hi: #4f46e5;
  --c-lo: #e0e7ff;
  --ring: #818cf8;
  --glow: rgba(99, 102, 241, 0.28);
  --accent: #4f46e5;
}
html.light body.st-greeting { --c-hi: #0891b2; --c-lo: #cffafe; --ring: #06b6d4; --glow: rgba(6, 182, 212, 0.30); --accent: #0891b2; }
html.light body.st-listening { --c-hi: #d97706; --c-lo: #fef3c7; --ring: #f59e0b; --glow: rgba(245, 158, 11, 0.28); --accent: #d97706; }
html.light body.st-talking { --c-hi: #db2777; --c-lo: #fce7f3; --ring: #ec4899; --glow: rgba(236, 72, 153, 0.30); --accent: #db2777; }
html.light body.st-thinking { --c-hi: #7c3aed; --c-lo: #ede9fe; --ring: #a78bfa; --glow: rgba(167, 139, 250, 0.30); --accent: #7c3aed; }
html.light body.st-answering,
html.light body.st-speaking { --c-hi: #0891b2; --c-lo: #cffafe; --ring: #06b6d4; --glow: rgba(6, 182, 212, 0.30); --accent: #0891b2; }

html.light .bg {
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(99, 102, 241, 0.12), transparent 60%),
    radial-gradient(1000px 700px at 15% 110%, rgba(6, 182, 212, 0.12), transparent 60%),
    #f7f8fd;
}
html.light .blob { opacity: 0.10; }
html.light .brand { color: #333a56; }
html.light .ghost { background: rgba(79, 70, 229, 0.06); color: #3d4468; border-color: rgba(79, 70, 229, 0.18); }
html.light .ghost:hover { background: rgba(79, 70, 229, 0.12); color: #1e2340; border-color: rgba(79, 70, 229, 0.35); }
html.light .who { color: #6b7494; }
html.light .txt { color: #2b324a; }
html.light .cap:last-child .txt { color: #0d1020; }
html.light .talk-button { border-color: rgba(79, 70, 229, 0.25); background: rgba(79, 70, 229, 0.06); color: #16192b; }
html.light .talk-button:hover { background: rgba(79, 70, 229, 0.12); }
html.light .end-button { border-color: rgba(214, 69, 69, 0.45); background: rgba(214, 69, 69, 0.10); color: #c03434; }
html.light .end-button:hover { background: rgba(214, 69, 69, 0.18); color: #a02525; }
html.light body.st-talking .talk-button {
  background: linear-gradient(145deg, rgba(219, 39, 119, 0.18), rgba(219, 39, 119, 0.05));
  border-color: rgba(219, 39, 119, 0.50);
}

.top-actions { display: flex; align-items: center; gap: 10px; }
#theme { display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; }
#theme svg { width: 15px; height: 15px; }
.icon-moon { display: none; }
html.light .icon-sun { display: none; }
html.light .icon-moon { display: block; }

/* ---------- ambient background ---------- */
.bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(56, 80, 160, 0.18), transparent 60%),
    radial-gradient(1000px 700px at 15% 110%, rgba(20, 90, 110, 0.16), transparent 60%),
    #070a12;
}
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.15; }
.blob-a { width: 46vmax; height: 46vmax; left: -10vmax; top: -14vmax;
          background: #3b5bff; animation: driftA 26s ease-in-out infinite alternate; }
.blob-b { width: 40vmax; height: 40vmax; right: -8vmax; bottom: -12vmax;
          background: #0fb5c9; animation: driftB 32s ease-in-out infinite alternate; }
@keyframes driftA { to { transform: translate(9vmax, 6vmax) scale(1.12); } }
@keyframes driftB { to { transform: translate(-8vmax, -5vmax) scale(1.08); } }

/* ---------- top bar ---------- */
.top { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600;
         letter-spacing: 0.10em; text-transform: uppercase; color: #c9d2e6; }
.brand-dot { width: 9px; height: 9px; border-radius: 50%;
             background: var(--accent); box-shadow: 0 0 12px 2px var(--glow);
             transition: background 0.7s ease, box-shadow 0.7s ease; }
.ghost { background: rgba(255, 255, 255, 0.05); color: #aeb8cf; border: 1px solid rgba(255, 255, 255, 0.10);
         padding: 8px 16px; border-radius: 999px; font-size: 13px; font-family: inherit; cursor: pointer;
         backdrop-filter: blur(10px);
         transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.ghost:hover { background: rgba(255, 255, 255, 0.10); color: #fff; border-color: rgba(255, 255, 255, 0.20); }
.ghost.select { padding: 8px 30px 8px 14px; appearance: none; -webkit-appearance: none;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aeb8cf' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
                background-repeat: no-repeat; background-position: right 12px center; }
.ghost.select option { background: #16192b; color: #e6ebf5; }
html.light .ghost.select option { background: #ffffff; color: #1e2340; }

/* ---------- stage ---------- */
.stage { flex: 1; display: flex; flex-direction: column; align-items: center;
         justify-content: center; gap: 24px; padding: 0 20px; min-height: 0; }

.welcome { margin: 0; font-size: clamp(28px, 6vmin, 48px); font-weight: 800;
           letter-spacing: -0.01em; text-align: center; color: var(--accent);
           transition: color 0.7s ease; }

.orb { width: min(44vmin, 320px); height: auto; display: block; overflow: visible; }

.stop-hi { stop-color: var(--c-hi); transition: stop-color 0.7s ease; }
.stop-lo { stop-color: var(--c-lo); transition: stop-color 0.7s ease; }

.halo { fill: var(--glow); transform-box: fill-box; transform-origin: center;
        transform: scale(var(--rc, 1)); transition: fill 0.7s ease; }

.ring { fill: none; stroke: var(--ring); stroke-width: 1.6;
        transform-box: fill-box; transform-origin: center;
        transition: stroke 0.7s ease, opacity 0.7s ease; }
.r1 { opacity: 0.60; stroke-width: 2; transform: scale(var(--rc1, 1)); }
.r2 { opacity: 0.38; transform: scale(var(--rc2, 1)); }
.r3 { opacity: 0.22; transform: scale(var(--rc3, 1)); }

.ripple { fill: none; stroke: var(--ring); stroke-width: 2; pointer-events: none;
          transition: stroke 0.7s ease; }

.rings { transform-origin: 200px 200px; animation: breathe 4.8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.045); } }

.core { transform-box: fill-box; transform-origin: center; transform: scale(var(--rc, 1)); }

.spin { fill: none; stroke: var(--ring); stroke-width: 2; stroke-dasharray: 3 16;
        stroke-linecap: round; opacity: 0; transform-origin: 200px 200px;
        transition: opacity 0.5s ease, stroke 0.7s ease; }
body.st-thinking .spin { opacity: 0.85; animation: rot 2.4s linear infinite; }
body.st-thinking .rings { animation-play-state: paused; }
@keyframes rot { to { transform: rotate(360deg); } }

/* ---------- status ---------- */
.status { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
          color: var(--accent); min-height: 1.5em; transition: color 0.7s ease; }
.status.swap { animation: rise 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- captions ---------- */
.captions { width: min(540px, 88vw); display: flex; flex-direction: column; gap: 12px;
            min-height: 84px; justify-content: flex-end; }
.cap { display: none; align-items: baseline; gap: 12px; }
.cap.on { display: flex; animation: rise 0.45s ease both; }
.who { flex: 0 0 52px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
       text-transform: uppercase; color: #6d7890; padding-top: 3px; }
.txt { margin: 0; font-size: 15px; line-height: 1.55; color: #dfe5f1;
       overflow-wrap: anywhere; max-height: 5.2em; overflow-y: auto; scrollbar-width: none; }
.txt::-webkit-scrollbar { display: none; }
.cap:last-child .txt { color: #fff; font-weight: 500; }

.dots i { display: inline-block; width: 5px; height: 5px; margin: 0 2px; border-radius: 50%;
          background: var(--accent); opacity: 0.5; animation: bounce 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.30s; }
@keyframes bounce { 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- dock / mic + end buttons ---------- */
.dock { display: flex; justify-content: center; align-items: center; gap: 28px; padding: 10px 0 34px; }
.end-button {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(244, 96, 96, 0.45); background: rgba(244, 96, 96, 0.14);
  color: #ff9d9d; cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(14px);
  transition: transform 0.18s ease, background 0.25s ease, color 0.25s ease;
}
.end-button svg { width: 24px; height: 24px; transform: rotate(135deg); }
.end-button:hover { transform: scale(1.05); background: rgba(244, 96, 96, 0.28); color: #ffb9b9; }
.end-button:active { transform: scale(0.96); }
.talk-button {
  position: relative; width: 76px; height: 76px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(14px);
  transition: transform 0.18s ease, background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.talk-button svg { width: 30px; height: 30px; }
.talk-button:hover { transform: scale(1.05); background: rgba(255, 255, 255, 0.10); }
.talk-button:active { transform: scale(0.96); }
.talk-button:disabled { opacity: 0.5; cursor: default; transform: none; }
.talk-button .pulse { position: absolute; inset: -2px; border-radius: 50%;
                      border: 2px solid var(--accent); opacity: 0; pointer-events: none;
                      transition: border-color 0.5s ease; }
body.st-listening .talk-button .pulse,
body.st-talking .talk-button .pulse { animation: ping 1.7s cubic-bezier(0.16, 0.7, 0.3, 1) infinite; }
body.st-talking .talk-button {
  background: linear-gradient(145deg, rgba(244, 128, 158, 0.25), rgba(244, 128, 158, 0.08));
  border-color: rgba(244, 128, 158, 0.50);
}
@keyframes ping { 0% { transform: scale(1); opacity: 0.8; } 75%, 100% { transform: scale(1.55); opacity: 0; } }

/* ---------- PIN gate ---------- */
.pin-gate {
  position: fixed; inset: 0; z-index: 20;
  align-items: center; justify-content: center;
  background: inherit;
}
.pin-gate:not([hidden]) { display: flex; }
.pin-card { display: flex; flex-direction: column; align-items: center; gap: 18px;
            width: min(320px, 88vw); }
.pin-title { margin: 0; font-size: 17px; font-weight: 600; color: #e8ecf4; text-align: center; }
html.light .pin-title { color: #16192b; }
.pin-dots { display: flex; gap: 14px; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%;
           border: 1.5px solid rgba(255, 255, 255, 0.35); transition: background 0.15s ease, border-color 0.15s ease; }
html.light .pin-dot { border-color: rgba(22, 25, 43, 0.35); }
.pin-dot.filled { background: var(--accent); border-color: var(--accent); }
.pin-error { min-height: 1.2em; margin: 0; font-size: 13px; color: #f4809e; }
.pin-keys { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px; justify-content: center; }
.pin-key { width: 72px; height: 72px; border-radius: 50%; font-size: 24px; font-weight: 500;
           border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06);
           color: #fff; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease; }
.pin-key:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.14); }
html.light .pin-key { border-color: rgba(79, 70, 229, 0.25); background: rgba(79, 70, 229, 0.06); color: #16192b; }
html.light .pin-key:active { background: rgba(79, 70, 229, 0.14); }
.pin-back { font-size: 20px; }
.pin-gate.shake .pin-card { animation: shake 0.4s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pin-setup-link { color: var(--accent); font-size: 13px; text-decoration: none; opacity: 0.75; }
.pin-setup-link:hover { opacity: 1; text-decoration: underline; }

/* ---------- responsive / motion ---------- */
@media (max-width: 640px) {
  .orb { width: 52vmin; }
  .txt { font-size: 14px; }
  .captions { min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .rings, .blob-a, .blob-b, .spin, .talk-button .pulse, .status.swap, .cap.on { animation: none !important; }
}