/* ============================================================
   taleordre.css — taleordre-panelet (personalets PWA)

   Egen fil, så den ikke flettes ind i `styles.css`, som andre spor
   også rører. Alle klasser hedder `tale__…`.
   ============================================================ */
.tale { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tale__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tale__niveau {
  font-size: 12px; letter-spacing: .02em; color: var(--tx-2);
  background: var(--bg-3); border: 1px solid var(--line-1); border-radius: 999px; padding: 4px 10px;
}
.tale__sprog { min-height: 44px; background: var(--bg-3); color: var(--tx-1); border: 1px solid var(--line-2); border-radius: 8px; padding: 0 8px; font-size: 14px; }
.tale__indtast { display: flex; gap: 8px; align-items: stretch; }
.tale__input {
  flex: 1 1 auto; min-width: 0; resize: none; font: inherit; font-size: 16px; /* 16px: iOS zoomer ikke ind */
  color: var(--tx-1); background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px;
}
.tale__input:disabled { opacity: .55; }
.tale__send { flex: 0 0 auto; min-width: 76px; }
.tale__liste { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.tale__tom { color: var(--tx-3); font-size: 14px; padding: 14px 4px; text-align: center; }
.tale__bund { color: var(--tx-3); font-size: 12px; text-align: center; min-height: 16px; }

.tale__kort {
  background: var(--bg-2); border: 1px solid var(--line-1); border-left: 5px solid var(--green);
  border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.tale__kort.is-afklaring { border-left-color: var(--at-soon); }
.tale__kort.is-spoergsmaal { border-left-color: var(--at-soon); }
.tale__kort.is-spoergsmaal > .tale__spoergsmaal { border-top: 0; padding-top: 0; }
.tale__kort.is-lagt-paa { border-left-color: var(--blue); opacity: .85; }
.tale__raekke { display: flex; align-items: center; gap: 10px; }
.tale__antal { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.tale__antaltal { min-width: 30px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.tale__rund {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--tx-1);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.tale__rund:disabled { opacity: .35; cursor: default; }
.tale__titel { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tale__navn { font-weight: 600; overflow-wrap: anywhere; }
.tale__variant { font-size: 12px; color: var(--tx-2); }
.tale__pris { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--tx-2); }
.tale__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tale__chip { background: var(--bg-4); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; }
.tale__chip.is-fjern { background: var(--orange-soft); color: var(--orange-tx); }
.tale__allergen { font-size: 12.5px; color: var(--at-soon); }
.tale__forbehold { color: var(--tx-3); font-size: 11.5px; margin-top: 2px; }
.tale__spoergsmaal { border-top: 1px dashed var(--line-2); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.tale__sp { font-weight: 600; }
.tale__spnote { color: var(--tx-2); font-size: 12.5px; }
.tale__valgraekke { display: flex; flex-wrap: wrap; gap: 8px; }
.tale__valg {
  min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--orange); background: var(--orange-soft);
  color: var(--tx-1); font: inherit; cursor: pointer; text-align: left;
}
.tale__valg.is-sekundaer { border-color: var(--line-2); background: var(--bg-3); }
.tale__valg:disabled { opacity: .45; cursor: default; }
.tale__redig { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tale__lille {
  min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--tx-1);
  font: inherit; font-size: 13.5px; cursor: pointer;
}
.tale__lille.is-valgt { background: var(--blue); border-color: var(--blue); color: #fff; }
.tale__lille.is-slet { margin-left: auto; color: var(--at-critical); border-color: var(--at-critical); }
.tale__lille:disabled { opacity: .4; cursor: default; }
.tale__stol { min-height: 44px; background: var(--bg-3); color: var(--tx-1); border: 1px solid var(--line-2); border-radius: 8px; padding: 0 6px; }
.tale__tilvalg summary { cursor: pointer; color: var(--tx-2); font-size: 13px; min-height: 44px; display: flex; align-items: center; }
.tale__lagte { border: 1px solid var(--line-1); border-radius: 10px; padding: 0 10px; }
.tale__lagte summary { cursor: pointer; color: var(--tx-2); font-size: 13px; min-height: 44px; display: flex; align-items: center; }
.tale__lagteliste { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.tale__paabordet { color: var(--blue); font-size: 12.5px; }
.tale__notat { background: var(--bg-3); border-left: 4px solid var(--line-strong); border-radius: 6px; padding: 8px 10px; font-size: 13.5px; }
.tale__advarsel { background: var(--orange-soft); border: 1px solid var(--orange); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; }
.tale__besked { border-radius: 8px; padding: 8px 10px; font-size: 13.5px; }
.tale__besked.is-ok { background: var(--green-soft); border: 1px solid var(--green); }
.tale__besked.is-fejl { background: rgba(229, 72, 77, .16); border: 1px solid var(--at-critical); }
.tale__besked.is-info { background: rgba(120, 120, 120, .14); border: 1px solid var(--line, #888); }

/* ---------- Mikrofon-TEST (flag «mik-test») ----------
   Knappen er mindst 44 punkter. TEST-teksten står hele tiden ved knappen; i lytter-tilstand er rammen rød og pulserer
   (ikke kun farve: teksten «Lytter …» og Stop-knappen står der også). */
.tale__mik {
  display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px;
  background: var(--bg-2); border: 1px dashed var(--orange);
}
.tale__mik.is-lytter { border: 2px solid var(--at-critical); background: rgba(229, 72, 77, .10); }
.tale__mikraekke { display: flex; gap: 8px; align-items: stretch; }
.tale__mikknap, .tale__mikstop { min-height: 44px; min-width: 44px; padding: 0 16px; font: inherit; cursor: pointer; }
.tale__mikknap { flex: 1 1 auto; }
.tale__mikknap:disabled { opacity: .5; cursor: default; }
.tale__mik.is-lytter .tale__mikknap { border-color: var(--at-critical); }
.tale__mikstop { flex: 0 0 auto; background: var(--at-critical); border-color: var(--at-critical); color: #fff; font-weight: 700; }
.tale__mikbanner { font-size: 12.5px; line-height: 1.35; color: var(--tx-1); overflow-wrap: anywhere; }
.tale__mikstatus { font-size: 13.5px; min-height: 18px; overflow-wrap: anywhere; }
.tale__mikstatus.is-lytter { font-weight: 700; color: var(--at-critical); }
.tale__mikstatus.is-fejl { border-radius: 8px; padding: 8px 10px; background: rgba(229, 72, 77, .16); border: 1px solid var(--at-critical); }
@media (prefers-reduced-motion: no-preference) {
  .tale__mik.is-lytter { animation: tale-mik-puls 1.4s ease-in-out infinite; }
}
@keyframes tale-mik-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .0); } 50% { box-shadow: 0 0 0 4px rgba(229, 72, 77, .35); } }

/* ---------- Samtale (TEST): hele samtalen sorteres i Sikker / Skal afklares / Ikke bestilling ---------- */
.tale__samtale { border: 1px dashed var(--orange); border-radius: 10px; padding: 0 10px 10px; background: var(--bg-2); }
.tale__samtale > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.tale__samtale[open] > summary { margin-bottom: 4px; }
.tale__samtale .tale__indtast { margin-top: 8px; }
.tale__sam-knapper { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.tale__sam-knapper .btn { min-height: 44px; min-width: 76px; }
.tale__sam-resultat { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tale__sam-oversigt { background: var(--bg-3); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; }
.tale__sam-gruppe { display: flex; flex-direction: column; gap: 6px; }
.tale__sam-titel { font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--tx-2); }
.tale__sam-gruppe.is-sikker .tale__sam-linje { border-left: 5px solid var(--green); background: var(--green-soft); }
.tale__sam-linje { border-radius: 6px; padding: 8px 10px; font-size: 14px; overflow-wrap: anywhere; }
.tale__sam-linje.is-ikke { color: var(--tx-2); font-size: 13px; background: var(--bg-3); }
.tale__sam-kort .tale__valg { min-width: 88px; }
@media (max-width: 480px) { .tale__samtale .tale__indtast { flex-direction: column; } .tale__sam-knapper { flex-direction: row; } .tale__sam-knapper .btn { flex: 1 1 0; } }