/* Voice mode: a layer over the main column, with the orb the design builds from a gradient sphere, drifting
 * highlights and a rotating sheen. Everything on it follows one thing — the phase in voice.status — which
 * voice-ui.js writes onto .voice-stage as data-phase. The controls around the orb are M3's; the orb keeps its own
 * shape and motion, and takes its greens from the palette's primary tones. */

.voice-stage {
  position:absolute; inset:0; z-index:40;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:24px; animation:ig-veil .22s ease both;
  background:var(--md-surface);
}
.voice-stage[hidden] { display:none; }

/* ---------- the bar across the top ---------- */
.voice-top { flex:0 0 auto; display:flex; align-items:center; gap:8px; width:100%; }
.voice-top .spacer { flex:1; }
/* the phase, as an M3 assist chip */
.voice-chip {
  display:inline-flex; align-items:center; gap:8px; height:32px; padding-inline:12px 16px; white-space:nowrap;
  border-radius:var(--md-shape-full); background:var(--md-surface-container-high); color:var(--md-on-surface);
  font:var(--md-label-large); letter-spacing:var(--md-label-large-track);
}
.voice-chip .dot {
  width:8px; height:8px; border-radius:50%; background:var(--md-primary); animation:ig-dot 1.4s ease-in-out infinite;
}
/* red while the microphone is the one that is live, green while the assistant is */
.voice-stage[data-phase="listening"] .voice-chip .dot,
.voice-stage[data-phase="hearing"] .voice-chip .dot { background:var(--md-error); }

.voice-chip .eq { display:none; align-items:center; gap:2px; height:13px; margin-inline-start:2px; }
.voice-chip .eq i {
  width:2.5px; height:13px; border-radius:2px; background:var(--md-primary); transform-origin:center;
  animation:ig-eq .9s ease-in-out infinite;
}
.voice-chip .eq i:nth-child(2) { animation-delay:.15s; }
.voice-chip .eq i:nth-child(3) { animation-delay:.3s; }
.voice-stage[data-phase="listening"] .voice-chip .eq { display:flex; }

/* mute: M3's standard icon button */
.voice-round {
  flex:0 0 auto; display:grid; place-items:center; width:48px; height:48px; cursor:pointer; padding:0;
  border:0; border-radius:50%; background:transparent; color:var(--md-on-surface-variant); font-size:24px;
}
.voice-round:hover { background-image:var(--md-hover-layer); }
.voice-round:active { background-image:var(--md-press-layer); }
/* Done talking: M3's tonal button */
.voice-pillbtn {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; height:40px; padding-inline:16px 24px; cursor:pointer;
  border:0; border-radius:var(--md-shape-full); background:var(--md-secondary-container); color:var(--md-on-secondary-container);
  font:var(--md-label-large); letter-spacing:var(--md-label-large-track);
}
.voice-pillbtn .tick { font-size:18px; }
.voice-pillbtn:hover { background-image:var(--md-hover-layer); }
.voice-pillbtn:active { background-image:var(--md-press-layer); }

/* ---------- the orb ---------- */
.voice-mid { flex:1 1 auto; min-height:0; display:grid; place-items:center; width:100%; }
.orb-box {
  position:relative; display:grid; place-items:center; width:190px; height:190px;
  transition:width .45s ease, height .45s ease;
}
.halo { position:absolute; border-radius:50%; animation:ig-breathe 3.4s ease-in-out infinite; }
.halo.a { width:172px; height:172px; background:color-mix(in srgb, var(--md-primary-50) 10%, transparent); }
.halo.b {
  width:140px; height:140px; background:color-mix(in srgb, var(--md-primary-50) 14%, transparent);
  animation-delay:.3s; animation-duration:2.6s;
}
.ring {
  position:absolute; width:150px; height:150px; border-radius:50%;
  border:1.5px solid color-mix(in srgb, var(--md-primary-50) 45%, transparent);
  animation:ig-ring 1.5s ease-out infinite; display:none;
}
.ring.r2 { border-color:color-mix(in srgb, var(--md-primary-50) 30%, transparent); animation-delay:.5s; }
.ring.r3 { border-color:color-mix(in srgb, var(--md-primary-50) 18%, transparent); animation-delay:1s; }
.voice-stage[data-phase="listening"] .ring { display:block; }

/* The sphere's light is white and its shading black, whatever the palette; only its greens are tokens. */
.orb {
  position:relative; width:118px; height:118px; border-radius:50%; overflow:hidden;
  background:linear-gradient(140deg, var(--md-primary-30) 0%, var(--md-primary-40) 48%, var(--md-primary-70) 100%);
  box-shadow:0 24px 50px -22px color-mix(in srgb, var(--md-primary-30) 60%, transparent),
             inset 0 -10px 26px -12px rgba(0,0,0,.45), inset 0 8px 20px -10px rgba(255,255,255,.5);
  transition:width .5s cubic-bezier(.3,.8,.3,1), height .5s cubic-bezier(.3,.8,.3,1);
  animation:ig-breathe2 2.4s ease-in-out infinite;
}
.orb .sheen {
  position:absolute; inset:-30%;
  background:conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.34) 70deg,
             rgba(255,255,255,0) 150deg, color-mix(in srgb, var(--md-primary-80) 40%, transparent) 230deg,
             rgba(255,255,255,0) 320deg);
  animation:ig-spin 7s linear infinite;
}
.orb .blob { position:absolute; border-radius:50%; }
.orb .b1 {
  top:12%; left:16%; width:46%; height:46%; filter:blur(2px);
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%);
  animation:ig-drift1 6s ease-in-out infinite;
}
.orb .b2 {
  bottom:8%; right:12%; width:38%; height:38%; filter:blur(3px);
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--md-primary-80) 75%, transparent),
             color-mix(in srgb, var(--md-primary-80) 0%, transparent) 72%);
  animation:ig-drift2 6s ease-in-out infinite;
}
.orb .face { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.orb .think, .orb .eq5 { display:none; align-items:center; }
.orb .think { gap:8px; }
.orb .think i {
  width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.95);
  animation:ig-bounce 1.3s ease-in-out infinite;
}
.orb .think i:nth-child(2) { animation-delay:.18s; }
.orb .think i:nth-child(3) { animation-delay:.36s; }
.orb .eq5 { gap:7px; height:40%; }
.orb .eq5 i {
  width:6px; border-radius:3px; background:rgba(255,255,255,.9); transform-origin:center;
  animation:ig-eq .78s ease-in-out infinite;
}
.orb .eq5 i:nth-child(1) { height:34%; background:rgba(255,255,255,.72); }
.orb .eq5 i:nth-child(2) { height:64%; animation-delay:.14s; }
.orb .eq5 i:nth-child(3) { height:100%; background:#fff; animation-delay:.27s; }
.orb .eq5 i:nth-child(4) { height:58%; animation-delay:.4s; }
.orb .eq5 i:nth-child(5) { height:30%; background:rgba(255,255,255,.72); animation-delay:.53s; }

.voice-stage[data-phase="listening"] .orb .eq5 { display:flex; }
.voice-stage[data-phase="thinking"] .orb .think,
.voice-stage[data-phase="searching"] .orb .think { display:flex; }

/* Each phase gives the orb its own size and pace: bigger and slower while speaking, small and quick while
 * listening, smallest while it is thinking. */
.voice-stage[data-phase="listening"] .orb { width:118px; height:118px; animation-duration:.85s; }
.voice-stage[data-phase="listening"] .halo { animation-duration:1.4s; }
.voice-stage[data-phase="listening"] .halo.b { animation-duration:1s; }
.voice-stage[data-phase="listening"] .sheen { animation-duration:7s; }
.voice-stage[data-phase="thinking"] .orb,
.voice-stage[data-phase="searching"] .orb { width:96px; height:96px; }
.voice-stage[data-phase="thinking"] .sheen,
.voice-stage[data-phase="searching"] .sheen { animation-duration:1.6s; }
.voice-stage[data-phase="speaking"] .orb { width:132px; height:132px; animation-duration:1.1s; }
.voice-stage[data-phase="speaking"] .sheen { animation-duration:3.2s; }
.voice-stage[data-phase="speaking"] .blob { animation-duration:3s; }
/* paused: everything holds still, so it is obvious nothing is being heard */
.voice-stage[data-phase="paused"] .orb,
.voice-stage[data-phase="paused"] .halo,
.voice-stage[data-phase="paused"] .sheen,
.voice-stage[data-phase="paused"] .blob,
.voice-stage[data-phase="paused"] .voice-chip .dot { animation-play-state:paused; }
.voice-stage[data-phase="paused"] .orb { filter:saturate(.6); }

/* ---------- subtitles: what is being said, under the orb ---------- */
/* Its height is fixed, so nothing on the stage moves as the lines change: the sentence being said sits at the bottom,
 * the one before it above, faded, and the question above that. The sizes stay larger than M3's body text, because
 * these are read from a distance. */
.voice-subs {
  flex:0 0 auto; width:100%; max-width:36em; height:176px; margin:0 auto 6px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; text-align:center;
}
.voice-subs[hidden] { display:none; }
.voice-subs p {
  margin:0; max-width:100%; overflow:hidden; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-box-orient:vertical;
}
.voice-subs p[hidden] { display:none; }
.sub-you { font-size:13px; line-height:18px; color:var(--md-on-surface-variant); -webkit-line-clamp:2; }
.sub-you .who { font-weight:700; color:var(--md-primary); margin-inline-end:6px; }
.sub-before { font-size:15px; line-height:21px; color:var(--md-on-surface-variant); opacity:.75; -webkit-line-clamp:2; }
.sub-now { font-size:19px; line-height:27px; font-weight:600; color:var(--md-on-surface); -webkit-line-clamp:3; }
.sub-now.in { animation:ig-subin .22s ease both; }

/* ---------- hint and the controls under it ---------- */
.voice-hint { flex:0 0 auto; margin:0 0 12px; font:var(--md-body-medium); color:var(--md-on-surface-variant); text-align:center; }
.voice-bar { flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:12px; }
/* M3's medium buttons, 56px: Pause is tonal, Type instead is outlined */
.voice-big {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  height:56px; min-width:136px; padding-inline:24px; border:1px solid var(--md-outline-variant);
  border-radius:var(--md-shape-full); background:transparent; color:var(--md-on-surface-variant);
  font:var(--md-title-medium);
}
.voice-big .ic { font-size:24px; }
.voice-big:hover { background-image:var(--md-hover-layer); }
.voice-big:active { background-image:var(--md-press-layer); }
#voicePause { border-color:transparent; background-color:var(--md-secondary-container); color:var(--md-on-secondary-container); }

/* the status is also in the question box's placeholder for screen readers */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (max-width: 820px) {
  .voice-stage { padding:16px 16px 20px; }
  .orb-box { width:150px; height:150px; }
  .voice-big { min-width:0; padding-inline:20px; }
}
@media (max-height: 640px) {
  .orb-box { width:130px; height:130px; }
  .voice-stage[data-phase="speaking"] .orb { width:104px; height:104px; }
  .voice-subs { height:132px; }
  .sub-before { -webkit-line-clamp:1; }
  .sub-now { font-size:17px; line-height:24px; }
}