/* Taleassistenten (docs/beslutninger/2026-09-13-taleassistent.md): én stor knap og stor tekst,
   fordi skærmen bruges i bilen og i køkkenet, hvor hun kigger i ét sekund og trykker én gang.
   Bygger på app.css og tokens.css; ingen glas, ingen effekter ud over ringen, der pulserer,
   mens assistenten lytter: den er en oplysning, ikke pynt. */
.tale-flade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 1rem 1.5rem;
  background: var(--flade);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  text-align: center;
}
/* Det, assistenten siger, står stort nok til at læses på afstand. */
.tale-linje { font-size: 1.35rem; line-height: 1.45; margin: 0; max-width: 34rem; min-height: 3.9rem; overflow-wrap: anywhere; }
.tale-hoert { margin: -0.75rem 0 0; color: var(--tekst-svag); font-size: 1rem; max-width: 34rem; overflow-wrap: anywhere; }
.tale-status { margin: 0; color: var(--tekst-svag); font-weight: 500; }

/* Knappen: 120 px, så den kan rammes uden at kigge. Start er mærkets farve; Stop er en rolig flade. */
.tale-knap {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-tekst);
  background: var(--accent);
  transition: background var(--overgang);
}
.tale-knap:disabled { opacity: 0.55; cursor: default; }
.tale-knap-stop { background: var(--flade-2); color: var(--tekst); border: 1px solid var(--linje); }
.tale-knap:focus-visible { outline: 3px solid var(--accent-bg); outline-offset: 3px; }
.tale-knap-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid transparent; pointer-events: none; }
/* Ringen pulserer kun, mens der lyttes: så kan hun se, at det er hendes tur, uden at læse. */
.tale-flade[data-tilstand="lytter"] .tale-knap-ring { border-color: var(--accent); animation: tale-puls 1.4s ease-in-out infinite; }
.tale-flade[data-tilstand="taler"] .tale-knap-ring { border-color: var(--linje); }
@keyframes tale-puls {
  0% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.12); opacity: 0.35; }
  100% { transform: scale(1); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .tale-flade[data-tilstand="lytter"] .tale-knap-ring { animation: none; }
}
.tale-hjaelp { margin-top: 1rem; text-align: center; }

@media (max-width: 720px) {
  .tale-flade { min-height: 60vh; justify-content: center; }
  .tale-linje { font-size: 1.5rem; }
  .tale-knap { width: 144px; height: 144px; }
}