/* =========================================================================
   Sprechhilfe - Stylesheet
   Design-Ziele (aus der Spec):
   - Dunkler Grund, weisse Schrift; Ausgabefeld invertiert (schwarz auf weiss)
   - Aus 1 m Abstand und bei Stationsbeleuchtung lesbar -> hoher Kontrast, fett
   - Grosse Touch-Ziele: min 60px (iPhone), 80px ab Tablet-Breite
   - Schriftgroesse global ueber eine CSS-Variable skalierbar (3 Stufen)
   - Safe Areas via env(safe-area-inset-*) fuer Notch/Home-Indikator
   ========================================================================= */

:root {
  --bg: #0f1216;          /* App-Hintergrund, dunkel */
  --panel: #171b21;       /* leicht abgesetzte Flaechen */
  --btn: #232a33;         /* Phrasen-/Tasten-Grund */
  --btn-active: #2f3a46;  /* gedrueckt */
  --text: #ffffff;        /* Schrift auf dunklem Grund */
  --muted: #9aa4b2;       /* Sekundaertext */
  --green: #22c55e;       /* SPRECHEN, Bestaetigung */
  --green-press: #16a34a;
  --red: #ef4444;         /* Loeschen/Gefahr */
  --red-press: #b91c1c;
  --accent: #3b82f6;      /* aktiver Tab, Vorschlaege */
  --border: #2a323c;

  /* Globaler Schrift-Skalierungsfaktor. Wird per JS auf 1 / 1.25 / 1.55 gesetzt
     (Stufen Normal / Gross / Sehr gross). Alle relevanten Groessen haengen daran. */
  --fs: 1;

  /* Mindesthoehe der Touch-Ziele. Wird ab 768px per Media Query erhoeht. */
  --touch: 60px;

  /* Sichere Innenabstaende gegen Notch/Home-Indikator */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Das hidden-Attribut MUSS gewinnen: unsere #id-Regeln mit display:flex haetten
   sonst hoehere Spezifitaet als das UA-[hidden]{display:none} und wuerden Overlays
   (Einstellungen, Hinweis) und Leisten (Vorschlaege) dauerhaft sichtbar lassen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Textauswahl unterbinden: Patienten tippen schnell/mehrfach, Auswahl-Popups stoeren */
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  /* dvh statt vh: beruecksichtigt die Safari-Adressleiste im Browser-Modus korrekt */
  height: 100dvh;
  padding: var(--sat) var(--sar) var(--sab) var(--sal);
}

/* ---------- Ausgabefeld (invertiert) ---------- */
#topbar {
  display: flex;
  align-items: flex-start;   /* Zahnrad oben, nicht auf volle Feldhoehe gestreckt */
  gap: 8px;
  padding: 8px;
}
#output {
  flex: 1;
  background: #ffffff;
  color: #000000;
  border-radius: 12px;
  padding: 10px 14px;
  /* FESTE Hoehe: das Feld darf NIE mit dem Inhalt wachsen, sonst verschiebt sich
     die Tastatur/das Raster darunter. Langer Text wird stattdessen per JS
     (fitOutput) kleiner skaliert. So bleibt das gesamte Layout darunter stabil. */
  height: calc(var(--touch) * 2);
  display: flex;
  align-items: center;
  overflow: hidden;
  font-weight: 700;
  line-height: 1.15;
  font-size: calc(2rem * var(--fs));
  word-break: break-word;
}
#output:empty::before {
  content: "Hier erscheint der Text";
  color: #9aa4b2;
  font-weight: 500;
}

.icon-btn {
  background: var(--btn);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: var(--touch);
  min-height: var(--touch);
  font-size: 1.4rem;
  line-height: 1;
}
/* Zahnrad bewusst klein und in der Ecke: ausserhalb der Reichweite von Fehltouchs.
   Es behaelt aber die Touch-Mindestgroesse, nur optisch dezenter. */
#btn-settings { opacity: 0.75; }

/* ---------- Steuerleiste ---------- */
#controls {
  display: flex;
  gap: 8px;
  padding: 0 8px 8px;
}
.ctrl {
  background: var(--btn);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: var(--touch);
  /* Feste Groesse, bewusst NICHT mit --fs skaliert: die Steuerknoepfe sind fuer
     die Bedienperson, nicht zum Vorlesen. Wuerden sie mitwachsen, liefen
     "SPRECHEN"/"Loeschen" bei sehr grosser Schrift aus dem Knopf. */
  font-size: 1.2rem;
  font-weight: 600;
  padding: 8px 12px;
}
.ctrl:active { background: var(--btn-active); }
/* Sprechen dominant und schrumpffaehig (min-width:0), Backspace fest, Loeschen
   waechst mit seinem Text. Fruehere feste 30%-Breite liess "Loeschen"/"Sicher?"
   bei sehr grosser Schrift aus dem Knopf laufen. nowrap haelt es einzeilig. */
/* SPRECHEN bekommt den ganzen Rest der Breite (flex:1). Die Icon-Knoepfe bleiben
   bewusst schmal, damit auch bei vier Knoepfen und grosser Schrift genug Platz
   fuer "SPRECHEN" bleibt. */
#btn-speak { flex: 1 1 auto; min-width: 0; font-size: 1.35rem; font-weight: 800; }
#btn-undo  { flex: 0 0 auto; width: var(--touch); font-size: 1.4rem; }
/* Rueckgaengig ist deaktiviert, solange es nichts zurueckzuholen gibt: sichtbar
   vorhanden (kein Layout-Sprung), aber gedimmt und nicht ausloesbar. */
#btn-undo[disabled] { opacity: .3; }
#btn-back  { flex: 0 0 auto; width: calc(var(--touch) * 1.2); font-size: 1.5rem; }
/* Feste Breite: der Wechsel "Löschen" <-> "Sicher?" darf den Knopf nicht in der
   Groesse veraendern. Extra Abstand nach links trennt Loeschen deutlich von
   Backspace, damit man es nicht versehentlich scharf schaltet. */
#btn-clear { flex: 0 0 auto; width: calc(var(--touch) * 1.75); margin-left: 6px; white-space: nowrap; padding: 8px 6px; }

.speak {
  background: var(--green);
  color: #05270f;
  border-color: transparent;
  font-weight: 800;
}
.speak:active { background: var(--green-press); }
/* Waehrend gesprochen wird, pulsiert der Knopf - sichtbares Zeichen, dass die
   Ausgabe laeuft, auch wenn (noch) kein Ton kommt. */
.speak.speaking { animation: speak-pulse 0.8s ease-in-out infinite; }
@keyframes speak-pulse {
  0%, 100% { background: var(--green); }
  50%      { background: #86efac; }
}

.danger { background: var(--red); color: #fff; border-color: transparent; }
.danger:active { background: var(--red-press); }
/* Scharf geschaltet ("Sicher?"): kraeftiger, damit der zweite Tap bewusst erfolgt */
.danger[data-armed="1"] { background: var(--red-press); box-shadow: 0 0 0 3px rgba(239,68,68,.4); }

/* ---------- Favoriten (Schnell-Tasten) ---------- */
#favorites {
  display: flex;
  gap: 8px;
  padding: 0 8px 8px;
  flex: 0 0 auto;
  /* Tasten sind so breit wie ihr Text; passt bei grosser Schrift nicht alles
     nebeneinander, scrollt die Zeile seitlich (wie die Tabs) statt Text
     abzuschneiden oder unlesbar klein zu schrumpfen. */
  overflow-x: auto;
}
#favorites:empty { display: none; }   /* keine Favoriten belegt -> Zeile ganz weg */
.fav {
  flex: 1 0 auto;                     /* waechst bei Platz, schrumpft nie unter den Text */
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--accent);    /* blauer Rahmen: als Schnellzugriff erkennbar */
  border-radius: 12px;
  min-height: var(--touch);
  padding: 8px 14px;
  font-size: calc(1.1rem * var(--fs));
  font-weight: 700;
  white-space: nowrap;
}
.fav:active { background: var(--btn-active); }

/* ---------- Wortvorhersage ---------- */
#suggestions {
  display: flex;
  gap: 8px;
  padding: 0 8px 8px;
  overflow-x: auto;
  /* FESTE Hoehe: die Leiste reserviert ihren Platz immer, damit das Ein- und
     Ausblenden von Vorschlaegen die Tastatur darunter nicht springen laesst.
     Hoehe = Vorschlags-Knopf (0.8*touch) + unterer Innenabstand (8px). */
  height: calc(var(--touch) * 0.8 + 8px);
  box-sizing: content-box;
  align-items: center;
  flex: 0 0 auto;
}
.sugg {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  min-height: calc(var(--touch) * 0.8);
  padding: 6px 16px;
  font-size: calc(1.05rem * var(--fs));
  font-weight: 700;
  white-space: nowrap;
}
.sugg:active { filter: brightness(0.85); }

/* ---------- Tabs ---------- */
#tabs {
  display: flex;
  gap: 6px;
  padding: 0 8px 8px;
  overflow-x: auto;
}
.tab {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-height: calc(var(--touch) * 0.85);
  padding: 6px 14px;
  font-size: calc(1rem * var(--fs));
  font-weight: 600;
  white-space: nowrap;
}
.tab.active { background: var(--accent); color: #fff; border-color: transparent; }

/* ---------- Inhaltsflaeche ---------- */
#panel {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 12px;
  -webkit-overflow-scrolling: touch;
  /* Flex-Spalte, damit die Tastatur (flex:1) die volle Panel-Hoehe fuellen kann.
     Phrasen-Raster und Verlauf wachsen nicht (flex:0) und behalten ihre Hoehe. */
  display: flex;
  flex-direction: column;
}

/* Phrasen-Raster: Spaltenzahl kommt aus JS via --cols (haengt an Geraet+Orientierung) */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: 8px;
}
.phrase {
  background: var(--btn);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  min-height: var(--touch);
  padding: 12px 10px;
  font-size: calc(1.25rem * var(--fs));
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
}
.phrase:active { background: var(--btn-active); transform: scale(0.98); }

/* Tastatur: fuellt die verfuegbare Hoehe des Panels, damit die Tasten so gross
   wie moeglich sind (unten war Platz). Die Reihen teilen sich die Hoehe (flex:1),
   die Tasten wachsen mit - nie kleiner als das Touch-Minimum. */
.kbd { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 100%; }
/* Buchstaben als Raster: Spaltenzahl kommt aus JS via --kcols (Geraet+Orientierung).
   grid-auto-rows:1fr laesst die Reihen die verfuegbare Hoehe teilen -> grosse Tasten. */
.kbd-letters {
  display: grid;
  grid-template-columns: repeat(var(--kcols, 6), 1fr);
  gap: 6px;
  flex: 1 1 auto;
  grid-auto-rows: 1fr;
}
.kbd-row { display: flex; gap: 6px; justify-content: center; flex: 0 0 auto; min-height: var(--touch); }
.key {
  flex: 1;
  height: 100%;
  background: var(--btn);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-height: var(--touch);
  font-size: calc(1.5rem * var(--fs));
  font-weight: 600;
  padding: 0;
}
.key:active { background: var(--btn-active); }
.key.wide { flex: 2.2; }
.key.space { flex: 6; }

/* Verlauf: pro Eintrag eine Zeile aus Satz-Knopf (spricht) und Stern-Knopf
   (speichert den Satz dauerhaft als Phrase in der ersten Kategorie). */
.hist-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: stretch; }
.hist-item {
  background: var(--btn);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: var(--touch);
  padding: 12px 14px;
  font-size: calc(1.2rem * var(--fs));
  font-weight: 500;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.hist-item:active { background: var(--btn-active); }
.hist-star {
  flex: 0 0 auto;
  width: var(--touch);
  background: var(--btn);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 1.5rem;
}
/* Gespeichert: Stern gold gefuellt, Knopf tut nichts mehr (kein Doppel-Eintrag). */
.hist-star.saved { color: #fbbf24; }
.empty-note { color: var(--muted); text-align: center; padding: 24px; }

/* ---------- Widmung (Footer) ---------- */
#footer {
  flex: 0 0 auto;                 /* feste Zeile unten, nimmt der Tastatur nur wenig */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 8px 6px;
  color: var(--muted);
  font-size: .8rem;
}
/* Trans-Flagge: fuenf Streifen hellblau/rosa/weiss/rosa/hellblau als Verlauf. */
.transflag {
  display: inline-block;
  width: 26px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.15);
  background: linear-gradient(
    to bottom,
    #5BCEFA 0 20%,
    #F5A9B8 20% 40%,
    #FFFFFF 40% 60%,
    #F5A9B8 60% 80%,
    #5BCEFA 80% 100%
  );
}

/* ---------- Vollbild-Anzeige ---------- */
/* Invertiert wie das Ausgabefeld (schwarz auf weiss) und ueber allem: fuer das
   Mitlesen aus einigen Metern, wenn die fitOutput-Verkleinerung im kleinen Feld
   nicht mehr reicht. Schriftgroesse setzt JS passend zur Textlaenge. */
#bigview {
  position: fixed; inset: 0;
  background: #ffffff;
  color: #000000;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--sat) + 20px) calc(var(--sar) + 20px) calc(var(--sab) + 20px) calc(var(--sal) + 20px);
  text-align: center;
}
#bigview-text {
  font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
  overflow: hidden;
  max-height: 100%;
}
#bigview-hint {
  position: absolute;
  bottom: calc(var(--sab) + 8px);
  color: #9aa4b2;
  font-size: .85rem;
  margin: 0;
}

/* ---------- Hinweis-Karte ---------- */
#mute-hint {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 20;
}
.hint-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  max-width: 420px;
  text-align: center;
}
.hint-card p { font-size: 1.1rem; line-height: 1.4; }

/* ---------- Einstellungen ---------- */
#settings {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 30;
  overflow-y: auto;
  padding: calc(var(--sat) + 8px) 8px calc(var(--sab) + 8px);
}
.sheet {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 16px 24px;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet h2 { font-size: 1.4rem; }
.sheet section { border-top: 1px solid var(--border); padding: 14px 0; }
.sheet h3 { margin: 0 0 8px; font-size: 1.15rem; }
.muted { color: var(--muted); font-size: .95rem; margin: 4px 0 10px; }
.small { font-size: .85rem; }

.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; background: var(--btn); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  min-height: var(--touch); font-size: 1rem; font-weight: 600;
}
.seg button.active { background: var(--accent); color: #fff; border-color: transparent; }

select, .text-in {
  width: 100%;
  background: var(--btn); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  min-height: var(--touch); padding: 8px 12px;
  font-size: 1.05rem; margin-bottom: 8px;
  -webkit-appearance: none; appearance: none;
}
.slider-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.slider-row span { min-width: 120px; }
.slider-row input[type=range] { flex: 1; height: 40px; }
.slider-row output { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

.row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.row .ctrl { flex: 1; min-width: 120px; }
.row .text-in { flex: 2; margin-bottom: 0; }

.editor-list { list-style: none; margin: 8px 0; padding: 0; }
.editor-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--btn); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px 8px; margin-bottom: 6px;
}
.editor-item.dragging { opacity: .5; }
.editor-item .grip { cursor: grab; font-size: 1.4rem; color: var(--muted); padding: 0 6px; touch-action: none; }
.editor-item input {
  flex: 1; background: transparent; color: var(--text);
  border: none; font-size: 1.05rem; min-height: 44px;
}
/* Spenden-Link: wie ein Knopf gestylter <a> (PayPal oeffnet extern in Safari). */
.donate {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #0070ba;            /* PayPal-Blau */
  color: #fff;
  border-color: transparent;
}
/* Global ist Textauswahl aus (schnelles Tippen); die PayPal-Adresse soll man
   aber markieren und kopieren koennen. */
.donate-mail { -webkit-user-select: text; user-select: text; }

.diag {
  background: #000; color: #7CFC9A;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin: 6px 0 10px;
  font-size: .9rem; line-height: 1.4;
  white-space: pre-wrap; word-break: break-word;
}

.editor-item .del {
  background: var(--red); color: #fff; border: none;
  border-radius: 8px; width: 44px; height: 44px; font-size: 1.1rem;
}

/* =========================================================================
   Augensteuerungs-Modus (Einstellungen > Augensteuerung)
   Fuer die Bedienung per Blick (iOS Eye Tracking / externe Eyetracker):
   Der Zeiger zittert naturgemaess 1-2 cm - entscheidend ist deshalb ABSTAND
   zwischen den Zielen (Fehltreffer auf die Nachbartaste) und ETWAS groessere
   Ziele. --touch bleibt bewusst unveraendert: die heilige Layout-Regel
   (Tastatur springt nie) haengt daran, und die Tastatur teilt sich ohnehin
   die feste Panelhoehe. Die Spaltenzahl reduziert zusaetzlich JS
   (columnsForViewport) um eine Spalte -> breitere Phrasen-Ziele.
   ========================================================================= */
body.eye-mode #controls,
body.eye-mode #favorites,
body.eye-mode #suggestions { gap: 14px; }
body.eye-mode #tabs { gap: 12px; }
body.eye-mode .tab { min-height: var(--touch); }        /* Tabs auf volle Zielhoehe */
body.eye-mode .grid { gap: 18px; }
body.eye-mode .phrase { min-height: calc(var(--touch) * 1.35); }
body.eye-mode .fav {
  min-height: calc(var(--touch) * 1.25);
  font-size: calc(1.2rem * var(--fs));
}
body.eye-mode .hist-row { gap: 14px; margin-bottom: 14px; }
/* Tastatur: nur die Luecken vergroessern. Die Tasten teilen sich die feste
   Panelhoehe - mehr Luecke heisst minimal kleinere Tasten, aber deutlich
   weniger Fehltreffer auf Nachbartasten. Genau der richtige Tausch fuer Blick-
   steuerung. */
body.eye-mode .kbd { gap: 10px; }
body.eye-mode .kbd-letters { gap: 12px; }
body.eye-mode .kbd-row { gap: 12px; }

/* =========================================================================
   Responsive: Breakpoint 768px trennt iPhone von iPad.
   Spaltenzahl setzt JS zusaetzlich per --cols (kennt auch die Orientierung).
   Hier heben wir ab Tablet-Breite die Touch-Mindesthoehe auf 80px an.
   ========================================================================= */
/* Nur echte Tablets: BEIDE Seiten >= 768px. Das trifft iPad hoch UND quer,
   aber nie das iPhone (dessen kurze Seite bleibt < 500px). So bekommt das
   iPhone auch im Querformat die 60px-Touchziele, nicht 80px. */
@media (min-width: 768px) and (min-height: 768px) {
  :root { --touch: 80px; }
  #output { font-size: calc(2.6rem * var(--fs)); }
  .phrase { font-size: calc(1.5rem * var(--fs)); border-radius: 18px; }
}

/* Flache Bildschirme (Handy im Querformat, Hoehe <= 480px): hier ist zu wenig
   vertikaler Platz fuer das feste Textfeld PLUS die grosse Tastatur. Damit die
   Tastatur ohne Scrollen ganz sichtbar bleibt (kein Springen), wird das
   Textfeld flacher und die Tasten duerfen unter das 60px-Ziel schrumpfen -
   im Querformat der vertretbare Kompromiss gegenueber einer scrollenden Tastatur. */
@media (max-height: 480px) {
  #output { height: calc(var(--touch) * 0.8); }         /* flacher, spart Hoehe */
  .ctrl { min-height: 48px; }                            /* Steuerknoepfe niedriger */
  #suggestions { display: none; }                        /* Vorschlaege im Querformat aus */
  #favorites { display: none; }                          /* Favoriten ebenso (Platz) */
  #tabs .tab { min-height: 44px; }
  .kbd-row { min-height: 40px; }
  .key { min-height: 40px; font-size: calc(1.1rem * var(--fs)); }
  #footer { display: none; }                             /* Widmung im knappen Querformat aus */
}