/* AriaConnectAI — Live Interpreter V2 (Gate 1): the living Orb, the live
   stage, controls and the completion summary. The Orb's data-state is set
   only by interpreter.js from real runtime/lifecycle events; --level is
   the live microphone level (0..1) from the session's own MediaStream.
   Brand: blue #2563EB, cyan #06B6D4, gold #D4AF37 accents; never violet. */

/* ── The Orb ── */
.aria-orb { --level: 0; --size: 176px; position: relative; width: var(--size); height: var(--size); border-radius: 50%; isolation: isolate; flex: 0 0 auto; }
.aria-orb > span { position: absolute; border-radius: 50%; pointer-events: none; }
.aria-orb .orb-halo {
  inset: -30%; z-index: -1;
  background: radial-gradient(circle, rgba(6,182,212,.30), rgba(37,99,235,.14) 42%, transparent 68%);
  filter: blur(8px); opacity: .9;
  transform: scale(calc(1 + var(--level) * .45));
  transition: transform .12s linear, opacity .5s ease, background .6s ease;
}
.aria-orb .orb-ring { inset: -7%; border: 1.5px solid rgba(212,175,55,.38); transition: border-color .5s ease, opacity .5s ease; }
.aria-orb .orb-ring.r2 { inset: -16%; border-color: rgba(6,182,212,.22); border-width: 1px; }
.aria-orb .orb-core {
  inset: 0;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.62), transparent 20%),
    radial-gradient(circle at 72% 76%, rgba(6,182,212,.85), transparent 52%),
    radial-gradient(circle at 26% 72%, rgba(37,99,235,.95), transparent 58%),
    radial-gradient(circle at 50% 50%, #1d4ed8, #0a1636 76%);
  box-shadow: 0 0 70px rgba(37,99,235,.45), inset 0 0 34px rgba(6,182,212,.4), 0 0 0 1px rgba(212,175,55,.4);
  transform: scale(calc(1 + var(--level) * .07));
  transition: transform .12s linear, filter .6s ease, box-shadow .6s ease;
  animation: orb-breathe 6s ease-in-out infinite;
}
.aria-orb .orb-glint {
  inset: 7%;
  background: conic-gradient(from 0deg, transparent 0 68%, rgba(235,211,130,.65) 77%, transparent 86%);
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 65%);
          mask: radial-gradient(circle, transparent 63%, #000 65%);
  animation: orb-spin 10s linear infinite;
  opacity: .85;
}
@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes orb-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.025; } }
@keyframes orb-pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: .45; } }
@keyframes orb-wave { 0% { transform: scale(1); opacity: .95; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes orb-flash { 0% { border-color: rgba(251,191,36,.9); } 100% { border-color: rgba(212,175,55,.38); } }

.aria-orb[data-state="idle"] .orb-glint { animation-duration: 14s; }
.aria-orb[data-state="connecting"] .orb-core { filter: saturate(.65) brightness(.8); animation: none; }
.aria-orb[data-state="connecting"] .orb-glint { animation-duration: 2.2s; }
.aria-orb[data-state="connecting"] .orb-ring { animation: orb-pulse 1.8s ease-in-out infinite; }
.aria-orb[data-state="listening"] .orb-core { animation-duration: 4s; }
.aria-orb[data-state="translating"] .orb-core { filter: hue-rotate(-12deg) saturate(1.2); box-shadow: 0 0 80px rgba(6,182,212,.55), inset 0 0 40px rgba(6,182,212,.55), 0 0 0 1px rgba(212,175,55,.5); }
.aria-orb[data-state="translating"] .orb-glint { animation-duration: 1.4s; }
.aria-orb[data-state="thinking"] .orb-glint { animation-duration: 1.1s; }
.aria-orb[data-state="thinking"] .orb-core { filter: brightness(.92); }
.aria-orb[data-state="speaking"] .orb-halo { background: radial-gradient(circle, rgba(212,175,55,.32), rgba(6,182,212,.18) 45%, transparent 70%); }
.aria-orb[data-state="speaking"] .orb-ring.r1 { animation: orb-wave 1.1s ease-out infinite; border-color: rgba(235,211,130,.7); }
.aria-orb[data-state="speaking"] .orb-ring.r2 { animation: orb-wave 1.1s ease-out .55s infinite; border-color: rgba(6,182,212,.6); }
.aria-orb[data-state="interrupted"] .orb-ring.r1 { animation: orb-flash .9s ease-out 1; }
.aria-orb[data-state="reconnecting"] .orb-core { filter: saturate(.35) brightness(.75); animation: none; }
.aria-orb[data-state="reconnecting"] .orb-ring { border-color: rgba(251,191,36,.55); animation: orb-pulse 1.4s ease-in-out infinite; }
.aria-orb[data-state="reconnecting"] .orb-glint { animation-duration: 3s; filter: hue-rotate(-25deg); }
.aria-orb[data-state="error"] .orb-core { filter: grayscale(.6) brightness(.7); box-shadow: 0 0 40px rgba(239,68,68,.35), inset 0 0 30px rgba(239,68,68,.25), 0 0 0 1px rgba(239,68,68,.5); animation: none; }
.aria-orb[data-state="error"] .orb-ring { border-color: rgba(239,68,68,.45); }
.aria-orb[data-state="error"] .orb-glint, .aria-orb[data-state="completed"] .orb-glint { animation: none; opacity: .4; }
.aria-orb[data-state="ending"] .orb-core { filter: brightness(.85); animation: none; }
.aria-orb[data-state="completed"] .orb-core { animation: none; box-shadow: 0 0 50px rgba(52,211,153,.3), inset 0 0 30px rgba(6,182,212,.35), 0 0 0 1px rgba(212,175,55,.55); }
.aria-orb.is-muted .orb-halo { opacity: .15; transform: none; }
.aria-orb.translation-off .orb-core { filter: saturate(.3) brightness(.85); }
.aria-orb.small { --size: 56px; }
.aria-orb.small .orb-ring.r2, .aria-orb.small .orb-halo { display: none; }

/* ── Setup steps (1, 2) ── */
#interp-live-content { max-width: 1080px; }
#interp-live-step-1, #interp-live-step-2 { max-width: 760px; }
#interp-live-step-2 .check-row, #interp-live-step-2 label { line-height: 1.5; }

/* ── Live stage (step 3) ── */
.live-v2 { padding: 1.4rem 1.6rem 1.2rem; background:
  radial-gradient(ellipse 55% 60% at 50% 22%, rgba(37,99,235,.13), transparent 70%),
  var(--glass); }
.live-v2-top { display: flex; align-items: center; justify-content: center; gap: .9rem; flex-wrap: wrap; }
.live-v2-top .live-timer { font-size: 1.15rem; color: var(--text-2); }
/* The LIVE label already carries its own "●"; avoid a second dot. */
.live-v2 .live-pill.is-live::before { display: none; }
.latency-chip { font-size: .7rem; font-weight: 600; color: var(--cyan-400); background: rgba(6,182,212,.1); border: 1px solid rgba(6,182,212,.25); padding: .2rem .55rem; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; }
.live-v2-stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; padding: 2.2rem 0 1.6rem; }
.lang-side { display: flex; }
.lang-side.a { justify-content: flex-end; }
.lang-side.b { justify-content: flex-start; }
.lang-side .lang-pill { flex: 0 1 220px; padding: .85rem 1rem; }
.lang-side .lang-pill .code { font-size: 1rem; }
.orb-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; min-width: 240px; }
.orb-state { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; text-align: center; min-height: 1.6em; margin-top: .6rem; }
.orb-sub { font-size: .8rem; color: var(--text-2); text-align: center; max-width: 30ch; min-height: 1.3em; margin-top: -.6rem; }
.live-banner { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; border-radius: var(--radius-md); background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3); color: var(--amber-400); font-size: .84rem; margin-bottom: 1rem; }
.live-banner .spinner { width: 16px; height: 16px; border-width: 2px; margin: 0; border-top-color: var(--amber-400); flex: 0 0 16px; }

.live-v2 .transcript-cols { gap: 1rem; }
.live-v2 .t-col { background: rgba(11,15,25,.45); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .9rem 1rem; }
.live-v2 .t-col:last-child { border-color: rgba(6,182,212,.22); }
.live-v2 .t-col:last-child .col-head { color: var(--cyan-400); }
.live-v2 .col-body { min-height: 150px; max-height: 300px; }
.live-v2 .transcript-line { font-size: .95rem; line-height: 1.55; border-bottom-color: rgba(229,231,235,.06); }
.live-v2 .col-body:empty::before { content: '—'; color: var(--text-3); font-size: .85rem; }
/* K1 §3: a line cut off by Stop / barge-in, or truncated to what was heard */
.transcript-line.cut-off { color: var(--text-2); }
.transcript-line.cut-off::after { content: ' · ' attr(data-note); font-size: .72rem; color: var(--amber-400); font-style: normal; }

.live-dock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; max-width: 760px; margin: 1.3rem auto .4rem; }
.live-dock .audio-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem .7rem; border-radius: var(--radius-md); font-size: .8rem; transition: background .2s var(--ease), border-color .2s var(--ease), opacity .2s; }
.live-dock .audio-btn:hover:not(:disabled) { background: rgba(229,231,235,.08); }
.live-dock .audio-btn:disabled { opacity: .45; cursor: not-allowed; }
.live-dock .audio-btn .ic { width: 18px; height: 18px; }
.live-dock .mic { --level: 0; position: relative; }
.live-dock .mic .mic-ic { position: relative; display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(37,99,235,.18); box-shadow: 0 0 0 calc(var(--level) * 9px) rgba(6,182,212,.25); transition: box-shadow .1s linear; }
.live-dock .mic .ic.off { display: none; }
.live-dock .mic.active .ic.on { display: none; }
.live-dock .mic.active .ic.off { display: inline; }
.live-dock .mic.active .mic-ic { background: rgba(239,68,68,.2); box-shadow: none; }
.live-dock .toggle .switch { width: 30px; height: 18px; border-radius: 999px; background: rgba(229,231,235,.15); position: relative; flex: 0 0 30px; transition: background .2s; }
.live-dock .toggle .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.live-dock .toggle[aria-checked="true"] .switch { background: var(--cyan-500); }
.live-dock .toggle[aria-checked="true"] .switch::after { transform: translateX(12px); }
.live-dock .toggle .state-off { display: none; }
.live-dock .toggle[aria-checked="false"] .state-on { display: none; }
.live-dock .toggle[aria-checked="false"] .state-off { display: inline; }
.live-dock .toggle b { font-weight: 700; }
.live-dock .end { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.4); color: #fecaca; }
.live-dock .end:hover { background: rgba(239,68,68,.24) !important; }
.live-capability-note { text-align: center; font-size: .74rem; color: var(--text-3); max-width: 60ch; margin: .2rem auto 0; }

/* Reconnecting / error dim the transcript so nothing reads as "live" */
.live-v2[data-orb-state="reconnecting"] .transcript-cols, .live-v2[data-orb-state="error"] .transcript-cols { opacity: .55; }

/* ── Completion / summary (step 4) ── */
.live-complete { max-width: 860px; }
.complete-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.complete-head h3 { font-size: 1.15rem; font-weight: 600; }
.complete-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.complete-stats .metric-card .v { font-size: 1.4rem; font-variant-numeric: tabular-nums; }

/* ── Small orbs in the shell (Home hero, mobile tab) ── */
.hero-card .hero-orb { --size: 132px; }
.hero-card .hero-orb .orb-ring.r2 { display: none; }

@media (prefers-reduced-motion: reduce) {
  .aria-orb .orb-core, .aria-orb .orb-glint, .aria-orb .orb-ring { animation: none !important; }
}