/* diktat.css — Optik des Diktat-Korrekturschritts (v1.83).
 *
 * Eine eigene Datei, weil die sechs Shells sich sonst nicht überschneiden:
 * duo/ich/desktop laden komponenten.css, chat/einbett_chat/neu haben eigene
 * Inline-Stile. Sechs Kopien derselben drei Regeln wären genau die Sorte Drift,
 * gegen die komponenten.css angetreten ist.
 *
 * Die LOGIK liegt in static/chat.js (diktatKnopf): Es baut in den von der Shell
 * gestellten Container genau zwei Kinder — button.diktat-stopp und
 * span.diktat-rest — und setzt die Klasse „an", solange der Countdown läuft.
 * Hier stehen nur Pixel.
 *
 * Einbindung: <link rel="stylesheet" href="/static/diktat.css?v={{ ui_version }}">
 */

/* ===================================================================
   Die Countdown-Leiste. Ohne .an ist sie vollständig weg (kein Platzhalter,
   der die Eingabezeile springen ließe).
   =================================================================== */
.diktat-leiste { display: none; }
.diktat-leiste.an {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .1rem;
  animation: diktat-auf .18s ease-out;
}
@keyframes diktat-auf { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; } }

.diktat-leiste .diktat-stopp {
  flex: 0 0 auto;
  padding: .35rem .7rem;
  border-radius: 8px;
  border: 1px solid var(--rand, #3a3f4b);
  background: var(--panel, #262a33);
  color: var(--text, #e6e8ec);
  font: inherit;
  cursor: pointer;
}
.diktat-leiste .diktat-stopp:hover { border-color: var(--akzent, #7aa2f7); }

.diktat-leiste .diktat-rest {
  color: var(--dim, #9aa0ab);
  font-size: .9rem;
  /* Die Restsekunde ändert sich im Sekundentakt — ohne feste Breite ruckelt
     der Stopp-Knopf daneben mit. */
  font-variant-numeric: tabular-nums;
}

/* ===================================================================
   Pegel. Zwei Bauformen, beide von chat.js bedient:
   · <canvas class="pegel">  → chat.js zeichnet den Balkenverlauf hinein
   · alles andere            → chat.js setzt --pegel (0…1) + data-pegel
   =================================================================== */
canvas.pegel {
  display: block;
  width: 100%;
  height: 26px;
  /* Farben des gezeichneten Verlaufs; chat.js liest sie per getComputedStyle
     und hat für jede einen harten Rückfallwert. */
  --pegel-marke: rgba(140, 210, 160, .30);
  --pegel-laut: #f38ba8;
  --pegel-gut: #a6e3a1;
  --pegel-grenz: #f9e2af;
  --pegel-leise: #585b70;
}

.pegelbalken {
  --pegel: 0;
  height: 6px;
  border-radius: 3px;
  background: var(--rand, #3a3f4b);
  overflow: hidden;
  /* Solange nicht aufgenommen wird, hat der Balken nichts zu melden — und ein
     dauerhaft graues Band unter der Eingabezeile wäre reine Möblierung.
     chat.js setzt data-pegel bei jeder Messung und beim Ende auf „aus". */
  display: none;
}
.pegelbalken[data-pegel]:not([data-pegel="aus"]) { display: block; }
.pegelbalken::after {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--pegel) * 100%);
  border-radius: 3px;
  background: #585b70;
  /* Kurz, aber nicht null: ohne Übergang flackert der Balken im 80-ms-Takt. */
  transition: width .08s linear, background .15s;
}
.pegelbalken[data-pegel="grenz"]::after { background: #f9e2af; }
.pegelbalken[data-pegel="gut"]::after { background: #a6e3a1; }
.pegelbalken[data-pegel="laut"]::after { background: #f38ba8; }

/* ===================================================================
   Küchendisplay (/duo) und Kiosk: aus zwei Metern lesbar, mit dem Finger
   treffbar. Nicht per Media-Query — die Shell setzt die Klasse selbst.
   =================================================================== */
.diktat-leiste.gross { gap: .8rem; padding: .5rem .2rem; }
.diktat-leiste.gross .diktat-stopp { padding: .7rem 1.2rem; font-size: 1.1rem; }
.diktat-leiste.gross .diktat-rest { font-size: 1.4rem; }
.pegelbalken.gross { height: 10px; border-radius: 5px; }
.pegelbalken.gross::after { border-radius: 5px; }