/*
 * tale.css — hands-free taleloopen (fase 10): mikrofonknappen som liten orb med
 * statusfarger, og stemmevelgeren i topplinja. Utseende følger Claude Design-
 * referansene (orb/statusfarger fra design-refs). Bygger på design-tokens.css.
 *
 * Statusfargene styres av data-tilstand på #samtale-mikrofon:
 *   av       — hvile (mørk, som i skjelett.css)
 *   starter  — laster VAD / ber om mikrofon (nøytral puls)
 *   lytter   — VAD lytter (grønn, pulserende — «opp»/aktiv-fargen)
 *   snakker  — assistenten spiller av svar, VAD pauset (mørk «tenker»-orb)
 *   feil     — mikrofon/VAD feilet (rød)
 */

/* Stemmevelgeren gjenbruker .modell-meny-stilen; litt smalere så topplinja
   holder seg innenfor viewport sammen med modellvelgeren. */
.stemme-velger { display: inline-flex; align-items: center; }
.stemme-meny { max-width: 180px; }

/* ---- Mikrofon-orb: aktiv taletilstand ---- */
.knapp-mik {
  position: relative;
  transition: background .18s ease, box-shadow .18s ease, transform .1s ease;
}
.knapp-mik:active { transform: scale(.96); }

/* Lytter: grønn orb med pulserende glød (som orbens aktiv-tilstand). */
.knapp-mik[data-tilstand="lytter"] {
  background: radial-gradient(circle at 35% 30%, var(--orb-aktiv-1), var(--orb-aktiv-2));
  box-shadow: 0 0 0 0 var(--orb-glow);
  animation: mik-puls 1.5s ease-out infinite;
}
@keyframes mik-puls {
  0% { box-shadow: 0 0 0 0 var(--orb-glow); }
  70% { box-shadow: 0 0 0 10px rgba(31, 157, 99, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 157, 99, 0); }
}

/* Starter: nøytral, dempet puls mens VAD/mikrofon lastes. */
.knapp-mik[data-tilstand="starter"] {
  background: var(--muted);
  animation: mik-blink 1s ease-in-out infinite;
}
@keyframes mik-blink { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

/* Snakker: mørk «tenker»-orb mens svaret spilles av (VAD er pauset). */
.knapp-mik[data-tilstand="snakker"] {
  background: radial-gradient(circle at 35% 30%, var(--orb-tenker-1), var(--orb-tenker-2));
}

/* Feil: rød — mikrofon nektet eller VAD kunne ikke lastes. */
.knapp-mik[data-tilstand="feil"] { background: var(--down); }

@media (prefers-reduced-motion: reduce) {
  .knapp-mik[data-tilstand="lytter"],
  .knapp-mik[data-tilstand="starter"] { animation: none; }
}

/* Aktiv-modus på flaten: gi orben i tom-tråd samme «lever»-følelse (valgfritt
   visuelt hint om at loopen er på selv når tråden er tom). */
.flate-samtale.tale-aktiv .orb::after { border-color: var(--orb-aktiv-1); }

/* Smal skjerm: to velgere + tittel + logg-ut i topplinja må holde seg innenfor
   viewport ned til 360px (jf. issue #7). Frigjør plass ved å skjule det
   dekorative ordmerket og la tittelen krympe bort; begge velgerne blir
   krympbare (min-width:0) så de deler resten av raden uten overflyt. */
@media (max-width: 720px) {
  .topplinje .merke { display: none; }
  .topplinje-tittel { flex: 1 1 0; min-width: 0; }
  .modell-velger,
  .stemme-velger { flex: 1 1 0; min-width: 0; }
  .modell-meny,
  .stemme-meny {
    min-width: 0;
    width: 100%;
    max-width: none;
  }
}
/* Aller smalest: tittelen vike helt for velgerne (orb + sidebar bærer identitet). */
@media (max-width: 430px) {
  .topplinje-tittel { display: none; }
}