/* carbo-diktat — Oberfläche für das iPhone.
   Farben: Catppuccin Mocha, wie im übrigen carbo-Joplin-Umfeld.
   Grundsatz: große Flächen, blind treffbar, nichts Wichtiges klein. */

:root {
  --grund:      #1e1e2e;
  --flaeche:    #313244;
  --flaeche-2:  #45475a;
  --schrift:    #cdd6f4;
  --gedaempft:  #a6adc8;
  --akzent:     #89b4fa;
  --gruen:      #a6e3a1;
  --rot:        #f38ba8;
  --gelb:       #f9e2af;
  --lila:       #cba6f7;
  --rand:       12px;
}

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

/* Muss ganz oben stehen und muss `!important` sein: `hidden` bekommt sein
   `display: none` nur aus dem Browser-Standardstylesheet und verliert damit
   gegen jede eigene Regel. Ohne diese Zeile schlagen `.deckblatt` und `#app`
   (beide `display: flex`) das Attribut — Anmeldung und Hauptansicht waeren
   gleichzeitig sichtbar, untereinander gestapelt. */
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%;
  background: var(--grund); color: var(--schrift);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  overscroll-behavior: none;
}

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------------------------------------------------------------- Anmeldung */

.deckblatt {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 24px;
}
.deckblatt h1 { margin: 0; font-size: 34px; letter-spacing: -.5px; }
.deckblatt form { display: flex; flex-direction: column; gap: 12px; width: min(340px, 100%); }

input[type=password], input[type=text], input[type=email], select {
  width: 100%; padding: 14px; font-size: 17px;
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--flaeche-2); border-radius: var(--rand);
}

.haupttaste {
  padding: 14px; font-size: 17px; font-weight: 600;
  background: var(--akzent); color: #11111b;
  border: 0; border-radius: var(--rand);
}
/* Während „wird gesendet …" ist der Knopf gesperrt — das muss man auch sehen,
   sonst tippt man ein zweites Mal und hält die App für tot. */
.haupttaste:disabled { opacity: .5; }

/* Für den Schlüsselbund vorhanden, für das Auge nicht. Bewusst kein
   `display: none` und kein `visibility: hidden` — solche Felder überspringt
   das automatische Ausfüllen, und dann wäre die Übung sinnlos. */
.nur-schluesselbund {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  border: 0; opacity: 0; pointer-events: none;
}

.hinweis { color: var(--gedaempft); font-size: 14px; margin: 4px 0; text-align: center; }
.fehler  { color: var(--rot); font-size: 14px; text-align: center; }

/* ------------------------------------------------------------------- Aufbau */

#app {
  height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 8px;
}

.browserhinweis {
  flex: 0 0 auto; padding: 12px 14px; border-radius: var(--rand);
  background: #3a3450; border: 1px solid var(--lila);
  font-size: 14px; line-height: 1.4;
}
.browserhinweis p { margin: 0 0 8px; }

#kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 6px; font-size: 14px; color: var(--gedaempft);
}
.zustand { font-weight: 600; }
.zustand.laeuft   { color: var(--rot); }
.zustand.arbeitet { color: var(--gelb); }
.zustand.fertig   { color: var(--gruen); }
.uhr { font-variant-numeric: tabular-nums; }
.wartend { margin-left: auto; color: var(--gelb); font-size: 13px; }
/* Die Tasten bilden eine Gruppe und stehen als Ganzes rechts — so bleibt die
   Anordnung gleich, ob die Warteschlange sichtbar ist oder nicht. */
.kopftasten { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; }
.kopftasten .klein { padding: 8px 10px; }

.klein {
  padding: 8px 12px; font-size: 14px;
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--flaeche-2); border-radius: 999px;
}
.klein.gefahr { color: var(--rot); }
/* Zweite Stufe von „verwerfen": Jetzt ist der Knopf scharf, das muss man sehen. */
.klein.gefahr.fragt {
  background: var(--rot); color: #11111b; border-color: var(--rot); font-weight: 700;
}

/* --------------------------------------------------------- Aufnahmefläche */

.aufnahmeflaeche {
  flex: 0 0 28vh; min-height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--flaeche); color: var(--schrift);
  border: 2px solid var(--flaeche-2); border-radius: 20px;
  font-size: 17px; transition: background .15s, border-color .15s;
}
.aufnahmeflaeche.laeuft {
  background: #45283a; border-color: var(--rot);
}
/* Zwischen Tastendruck und offenem Mikrofon: Die Fläche färbt sich sofort, der
   gestrichelte Rand sagt „noch nicht ganz". Ohne diese Zwischenstufe sah die
   App bis zu einer Sekunde lang unverändert aus und man tippte ein zweites Mal. */
.aufnahmeflaeche.startet { border-style: dashed; }
.aufnahmeflaeche:active { transform: scale(.995); }
.symbol { font-size: 40px; line-height: 1; }
.aufnahmeflaeche.laeuft .symbol { animation: pulsieren 1.4s ease-in-out infinite; }
@keyframes pulsieren { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.flaechentext { font-weight: 600; }
/* Doppelte Höhe wie zuvor: Der Pegel soll auf einen Blick zeigen, ob man laut
   genug spricht — auf 28 px war jeder Ausschlag ein Zucken. Die Bildpunkte
   setzt app.js nach devicePixelRatio. */
.pegel { width: 92%; height: 56px; opacity: .95; }

/* --------------------------------------------------------------- Absatz */

.absatzzeile { display: flex; gap: 6px; flex: 0 0 auto; }
.absatztaste {
  flex: 1 1 auto; padding: 18px; font-size: 19px; font-weight: 700;
  background: var(--lila); color: #11111b;
  border: 0; border-radius: var(--rand);
}
.absatztaste:disabled { background: var(--flaeche); color: var(--gedaempft); }

/* Der Umschalter liegt neben „Absatz", weil er im Diktat gebraucht wird und der
   Daumen dort ohnehin steht — und zwar LINKS davon: „Absatz" wird viel häufiger
   gedrückt und gehört für den rechten Daumen auf die kurze Seite. Der Zustand
   muss auf einen Blick lesbar sein: Die Betriebsart entscheidet, ob man auf
   Text wartet oder nicht. */
.soforttaste {
  flex: 0 0 auto; min-width: 104px; padding: 18px 10px;
  font-size: 15px; font-weight: 700; white-space: nowrap;
  background: var(--flaeche); color: var(--gedaempft);
  border: 1px solid var(--flaeche-2); border-radius: var(--rand);
}
.soforttaste.an {
  background: var(--akzent); color: #11111b; border-color: var(--akzent);
}

/* --------------------------------------------------------------- Format */

.formatleiste {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none;
}
.formatleiste::-webkit-scrollbar { display: none; }
.formatleiste button {
  flex: 1 0 auto; min-width: 46px; padding: 12px 10px; font-size: 15px;
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--flaeche-2); border-radius: 10px;
}
.formatleiste button.vorgewaehlt {
  background: var(--akzent); color: #11111b; border-color: var(--akzent);
}

/* ----------------------------------------------------------------- Text */

.text {
  flex: 1 1 auto; min-height: 90px; padding: 12px; resize: none;
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--flaeche-2); border-radius: var(--rand);
  font: 16px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  -webkit-user-select: text; user-select: text;
}

/* ------------------------------------------------------------------ Fuß */

#fuss { display: flex; gap: 5px; }
/* Vier Tasten statt drei: 13 px und wenig Innenabstand, damit auch auf einem
   schmalen iPhone nichts umbricht. Die Höhe bleibt, sie ist die Trefferfläche. */
.fusstaste {
  flex: 1; padding: 14px 4px; font-size: 13px; font-weight: 600;
  background: var(--flaeche); color: var(--schrift);
  border: 1px solid var(--flaeche-2); border-radius: var(--rand);
  white-space: nowrap;
}
.fusstaste.haupt { background: var(--gruen); color: #11111b; border-color: var(--gruen); }
.fusstaste:disabled { opacity: .5; }

/* ----------------------------------------------------------------- Menü */

dialog {
  width: min(420px, 92vw); padding: 20px; border: 0; border-radius: 18px;
  background: var(--grund); color: var(--schrift);
  max-height: 85vh; overflow-y: auto;
}
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h2 { margin: 0 0 14px; font-size: 20px; }

/* Anleitung: viel Fließtext auf wenig Platz — enger gesetzt als das Menü, und
   der Abschlussknopf klebt unten, damit man ihn nicht suchen muss. */
#anleitung { font-size: 15px; line-height: 1.5; }
#anleitung h3 {
  margin: 18px 0 6px; font-size: 16px; color: var(--akzent);
}
#anleitung p { margin: 0 0 8px; }
#anleitung ul { margin: 0 0 8px; padding-left: 20px; }
#anleitung li { margin-bottom: 5px; }
#anleitung .menuefuss {
  position: sticky; bottom: -20px; margin-top: 16px;
  padding: 10px 0; background: var(--grund);
}
.klein.breit { display: block; width: 100%; margin-bottom: 12px; }
.zeile { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 15px; }
.zeile.umschalter { flex-direction: row; align-items: center; justify-content: space-between; }
.zeile.umschalter input { width: 52px; height: 30px; flex: 0 0 auto; }
.nebensatz { color: var(--gedaempft); font-size: 13px; }
.fassungen { display: flex; gap: 6px; margin-bottom: 12px; }
.fassungen button { flex: 1; }
.fassungen button.aktiv { background: var(--akzent); color: #11111b; border-color: var(--akzent); }
.menuefuss { display: flex; gap: 8px; align-items: center; }
.menuefuss .haupttaste { flex: 1; }

/* -------------------------------------------------------------- Meldung */

.meldung {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 84px);
  max-width: 90vw; padding: 12px 18px; border-radius: 999px;
  background: var(--flaeche-2); color: var(--schrift);
  font-size: 15px; text-align: center; z-index: 10;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.meldung.gut    { background: var(--gruen); color: #11111b; }
.meldung.schlimm { background: var(--rot);  color: #11111b; }

/* Ein Hinweis darf eine Handlung anbieten („Öffnen" nach dem Speichern). */
.meldungstaste {
  margin-left: 10px; padding: 6px 12px; border: 0; border-radius: 999px;
  background: rgba(17, 17, 27, .82); color: #cdd6f4;
  font-size: 14px; font-weight: 600;
}

/* Querformat: Aufnahmefläche schrumpft, Text bekommt den Platz. */
@media (orientation: landscape) and (max-height: 500px) {
  .aufnahmeflaeche { flex-basis: 22vh; min-height: 90px; }
  .symbol { font-size: 26px; }
  .pegel { height: 34px; }
  .absatztaste { padding: 12px; }
}


/* ------------------------------------------------------------- Live-Text */
/* Was das Modell schon verstanden hat, während noch gesprochen wird.
   Gedämpft, solange es vorläufig ist — der Unterschied zum fertigen Text
   muss ohne Erklärung sichtbar sein. */
.livetext {
  display: none;
  margin: 0 0 .4rem;
  padding: .5rem .7rem;
  border-radius: .5rem;
  background: rgba(120, 170, 255, .08);
  border-left: 3px solid rgba(120, 170, 255, .45);
  color: var(--gedaempft, #8a94a6);
  font-size: .95rem;
  line-height: 1.45;
  max-height: 5.2rem;
  overflow-y: auto;
  /* Damit der einlaufende Text nicht springt, wenn eine Zeile dazukommt. */
  scroll-behavior: smooth;
}
.livetext.sichtbar { display: block; }
.livetext.endgueltig {
  color: var(--text, #e8ecf4);
  border-left-color: rgba(110, 220, 160, .7);
  background: rgba(110, 220, 160, .07);
}