/* ==========================================================================
   THI — Assistent im THITRONIK Campus
   --------------------------------------------------------------------------
   Nutzt die Tokens aus styles.css (--th-navy, --radius-*, --shadow-*), damit
   THI nicht wie ein angeklebtes Fremdteil aussieht, sondern wie ein weiterer
   Bereich derselben Oberfläche.

   ZWEI DINGE, DIE HIER ANDERS SIND ALS ERWARTET:

   1. `body` trägt `zoom: .8` (styles.css). Fixierte Elemente erben diesen
      Zoom. Viewport-Masse werden dadurch visuell auf 80 % verkleinert; die
      Seitenhülle kompensiert das mit 125vh/125dvh. Panel und Schleier werden über
      gegenüberliegende Kanten aufgespannt (top/right/bottom/left) statt über
      width und height. Eine Kante bei 0 bleibt bei 0, unabhängig vom Zoom —
      damit hängt das Layout an keiner Umrechnung.

   2. Reine Darstellungsmasse skalieren mit. Interaktive Trefferflächen nutzen
      dagegen `--tap` (55 CSS-px = 44 echte Pixel), damit sie auch mit Zoom die
      projektweite Mindestgroesse einhalten.
   ========================================================================== */

:root {
  --thi-breite: 460px;
  --thi-kopf: #14294D;
}

/* ----------------------------------------------------- Schalter im Kopf --- */

/* Erbt .masthead-tool aus styles.css. Hier steht nur, was ein <button>
   gegenüber einem <a> zusätzlich braucht, und das Avatar-Feld: THI bekommt
   sein Gesicht statt eines Strichsymbols — das macht ihn in der Reihe der
   Werkzeuge auf einen Blick unterscheidbar. */
.thi-schalter {
  font: inherit;
  cursor: pointer;
  appearance: none;
}

/* Kein eigenes Aussehen fuer Feld und Symbol: Beides kommt aus
   `.masthead-tool .ta-icon` — hellblaues Feld, Linien in Blau, 22 px.
   Nur der geoeffnete Zustand braucht eine Regel, denn dort wird der
   Knopf selbst hellblau und das gleichfarbige Feld darin verschwaende.

   Frueher stand hier ein Navy-Feld mit dem vollfarbigen Avatar. */
.thi-schalter[aria-expanded="true"] {
  border-color: var(--th-blue);
  background: var(--info-bg);
}

.thi-schalter[aria-expanded="true"] .ta-icon {
  background: var(--th-white);
}

/* Hinweispunkt, solange THI in dieser Sitzung noch nicht geöffnet wurde.
   Ein Werkzeug, das niemand bemerkt, ist keins — und die Kopfzeile hat sonst
   keinen Platz für eine Erklärung. */
/* flex: none, sonst drückt die Beschriftung den Punkt auf 1,7 × 6,4 px —
   so gemessen ab 1024 px, er sah aus wie ein Pixelfehler. */
.thi-schalter .thi-punkt {
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--th-lime);
  box-shadow: 0 0 0 3px rgba(175, 202, 5, .25);
}

.thi-schalter.ist-gesehen .thi-punkt { display: none; }

/* ---------------------------------------------------------- Abdunkelung --- */

.thi-schleier {
  position: fixed;
  z-index: 90;
  inset: 0;
  background: rgba(10, 39, 71, .32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-out),
              visibility var(--duration-normal) var(--ease-out);
}

.thi-schleier.ist-offen { opacity: 1; visibility: visible; }

/* ------------------------------------------------- Neben der Frage --------

   In der Fragenansicht soll THI neben der Frage stehen, nicht davor: Wer
   eine Frage bespricht, will sie dabei lesen und die Antworten antippen.
   Ab 1100 px bleibt die Seite deshalb bedienbar — kein Schleier —, und die
   Hülle rückt um die Panelbreite nach links, damit das Panel nichts
   verdeckt. Darunter (Tablet hochkant, Telefon) bleibt es beim
   überlagernden Panel; für beides nebeneinander ist dort kein Platz, und
   die Kontextzeile im Panel sagt, um welche Frage es geht. */
@media (min-width: 1100px) {
  body.ist-quiz .thi-schleier { display: none; }
  body.ist-quiz .shell { transition: padding-right var(--duration-normal) var(--ease-out); }
  body.ist-quiz.thi-offen .shell { padding-right: calc(var(--thi-breite) + 20px); }
}

/* ---------------------------------------------------------------- Panel --- */

.thi-panel {
  position: fixed;
  z-index: 91;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: var(--thi-breite);
  border-left: 1px solid var(--th-line-strong);
  background: var(--th-page);
  box-shadow: -24px 0 64px rgba(10, 39, 71, .18);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--duration-normal) var(--ease-out),
              visibility var(--duration-normal) var(--ease-out);
}

.thi-panel.ist-offen { transform: translateX(0); visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .thi-panel, .thi-schleier { transition-duration: 1ms; }
}

/* ----------------------------------------------------------- Panel-Kopf --- */

.thi-kopf {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 18px;
  background: linear-gradient(135deg, var(--th-navy) 0%, var(--thi-kopf) 100%);
  color: var(--th-white);
}

.thi-kopf-avatar {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .1);
}

.thi-kopf-avatar svg { width: 32px; height: 32px; }

.thi-kopf-text { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }

.thi-kopf-name {
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.1;
}
/* Sprungziel beim Öffnen auf dem Telefon (thi.js), kein Bedienelement. */
.thi-kopf-name:focus { outline: none; }

.thi-kopf-rolle {
  color: rgba(255, 255, 255, .72);
  font-size: var(--text-sm);
  line-height: 1.2;
}

.thi-kopf-knopf {
  display: grid;
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .06);
  color: var(--th-white);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.thi-kopf-knopf:hover { background: rgba(255, 255, 255, .16); }
.thi-kopf-knopf:active { transform: scale(.94); }

.thi-kopf-knopf svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* -------------------------------------------------------- Vorlagenleiste --- */

.thi-vorlagen-leiste {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 54px;
  padding: 5px 14px;
  border-bottom: 1px solid var(--th-line);
  background: var(--th-white);
}

.thi-vorlagen-schalter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--th-blue-text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.thi-vorlagen-schalter:hover,
.thi-vorlagen-schalter[aria-expanded="true"] {
  border-color: var(--th-line);
  background: var(--info-bg);
}

.thi-vorlagen-schalter:active { background: var(--th-soft); }

.thi-vorlagen-schalter svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thi-vorlagen-profil {
  max-width: 16ch;
  overflow: hidden;
  color: var(--th-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------ Fallaufnahme ------- */

.thi-vorlage {
  flex: 1 1 auto;
  padding: 18px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--th-page);
}

.thi-vorlage[hidden] { display: none; }

/* Drei nummerierte Karten statt sechs gleichförmiger Felder untereinander:
   Fahrzeug, Produkt, Anliegen. Die Gliederung sagt, wo man anfängt und wie
   viel noch kommt; die Nummer steht als Kreis vor der Überschrift, die
   Felder liegen auf Weiß, die Seite bleibt hellblau. Zusammengehörige
   Angaben (Modell und Baujahr, Stand und Einbau) teilen sich eine Zeile,
   sobald das Panel breit genug ist. */
.thi-vorlagen-formular { display: grid; gap: 14px; }

.thi-vorlage-kopf { display: grid; gap: 4px; padding: 2px 2px 0; }

.thi-vorlagen-formular h2 {
  margin: 0;
  color: var(--th-navy);
  font-size: var(--text-md);
  font-weight: 800;
  line-height: 1.25;
}

.thi-vorlage-einleitung {
  margin: 0;
  color: var(--th-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.thi-vorlagen-gruppe {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 14px 14px 16px;
  border: 1px solid var(--th-line);
  border-radius: var(--radius-md);
  background: var(--th-white);
  box-shadow: 0 8px 22px rgba(10, 39, 71, .06);
}

.thi-vorlagen-gruppe legend {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
  padding: 0;
  color: var(--th-navy);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.thi-vorlagen-nummer {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--th-navy);
  color: var(--th-white);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: 0;
}

.thi-vorlagen-zeile { display: grid; gap: 12px; }

@media (min-width: 420px) {
  .thi-vorlagen-zeile { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

.thi-vorlagen-feld { display: grid; gap: 6px; min-width: 0; }

.thi-vorlagen-feld label {
  color: var(--th-navy);
  font-size: var(--text-sm);
  font-weight: 700;
}

.thi-vorlagen-feld input,
.thi-vorlagen-feld textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--th-line-strong);
  border-radius: var(--radius-md);
  background: var(--th-page);
  color: var(--th-ink);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.4;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.thi-vorlagen-feld input::placeholder,
.thi-vorlagen-feld textarea::placeholder { color: #8A94A3; }

.thi-vorlagen-feld input:focus,
.thi-vorlagen-feld textarea:focus {
  outline: none;
  /* Navy statt Cyan, wie der Fokusring sonst: Cyan verfehlt die 3:1. */
  border-color: var(--th-navy);
  background: var(--th-white);
  box-shadow: 0 0 0 3px rgba(29, 54, 97, .25);
}

.thi-vorlagen-feld textarea { min-height: 112px; resize: vertical; }

.thi-vorlagen-feld small {
  color: var(--th-muted);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.thi-vorlagen-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0 2px;
  color: var(--th-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.thi-vorlagen-hinweis svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thi-vorlagen-fehler {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--error-line);
  border-radius: var(--radius-sm);
  background: var(--error-bg);
  color: var(--th-ink);
  font-size: var(--text-sm);
  font-weight: 700;
}

.thi-vorlagen-fehler[hidden] { display: none; }

/* Die Aktionen kleben unten am sichtbaren Rand des scrollenden Bereichs:
   Wer das Anliegen tippt, sieht den Knopf, ohne erst nach unten zu
   scrollen. Übernehmen in Neon-Lime wie der Startknopf im Campus, damit
   klar ist, welcher der beiden Knöpfe der Weg nach vorn ist. */
.thi-vorlagen-aktionen {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  margin: 2px -16px -18px;
  padding: 12px 16px max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(240, 246, 250, 0) 0%, var(--th-page) 34%);
}

.thi-vorlagen-aktionen button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 9px 16px;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-press) var(--ease-out);
}

.thi-vorlagen-abbrechen {
  border: 1px solid var(--th-line-strong);
  background: var(--th-white);
  color: var(--th-navy);
}

/* Navy wie jeder Hauptknopf im Campus, nicht mehr Neon-Lime. */
.thi-vorlagen-uebernehmen {
  border: 1px solid var(--th-navy);
  background: var(--th-navy);
  color: var(--th-white);
  box-shadow: 0 10px 22px rgba(29, 54, 97, .22);
}

.thi-vorlagen-uebernehmen svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thi-vorlagen-abbrechen:hover { background: var(--th-soft); }
.thi-vorlagen-uebernehmen:hover { background: var(--th-navy-hover); }
.thi-vorlagen-aktionen button:active { transform: scale(.98); }

/* -------------------------------------------------------------- Verlauf --- */

.thi-verlauf {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.thi-verlauf[hidden],
.thi-fuss[hidden] { display: none; }

/* Die Kontextzeile: welche Wissenscheck-Frage THI gerade kennt. Sichtbar,
   weil das Mitschicken sonst unbemerkt bliebe; dezent, weil sie bei jeder
   Frage da ist. */
.thi-kontext {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  margin: 10px 14px 0;
  padding: 8px 12px;
  border: 1px solid rgba(59, 169, 211, .35);
  border-radius: var(--radius-md);
  background: var(--info-bg);
  color: var(--th-navy);
  font-size: var(--text-sm);
  line-height: 1.3;
}
.thi-kontext[hidden] { display: none; }
.thi-kontext svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.thi-kontext strong { display: block; font-weight: 800; }
.thi-kontext small { display: block; color: var(--th-muted); font-size: var(--text-sm); }

/* Begrüßung: erscheint nur, solange nichts gefragt wurde. */
.thi-start { display: grid; gap: 14px; padding: 6px 2px 0; }

.thi-start-kopf { display: grid; justify-items: center; gap: 10px; text-align: center; }
.thi-start-kopf svg { width: 56px; height: 56px; }

.thi-start-titel {
  margin: 0;
  color: var(--th-navy);
  font-size: var(--text-md);
  font-weight: 800;
  line-height: 1.25;
}

.thi-start-text {
  margin: 0;
  max-width: 34ch;
  color: var(--th-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.thi-vorschlaege { display: grid; gap: 8px; margin-top: 4px; }

/* min-height in var(--tap), nicht in festen 44px: Die Seite laeuft unter
   `body { zoom: .8 }`. Feste 44px messen auf dem Schirm 35 px und reissen
   damit genau das Mindestmass, das die Zahl 44 sichern sollte. --tap steht
   auf 55px, also 44 echte Pixel. Nachgemessen bei 390 px Breite. */
.thi-vorschlag {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--th-line);
  border-radius: var(--radius-md);
  background: var(--th-white);
  color: var(--th-navy);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-press) var(--ease-out);
}

.thi-vorschlag:hover { border-color: var(--th-blue); background: var(--info-bg); }
.thi-vorschlag:active { transform: scale(.99); }

.thi-vorschlag svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--th-blue-text);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------- Nachrichten --- */

.thi-zeile { display: flex; gap: 9px; max-width: 100%; }
.thi-zeile.von-nutzer { justify-content: flex-end; }

.thi-zeile-avatar {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  margin-top: 2px;
  border-radius: var(--radius-sm);
  background: var(--th-navy);
}

.thi-zeile-avatar svg { width: 22px; height: 22px; }

.thi-blase {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.von-thi .thi-blase {
  border: 1px solid var(--th-line);
  border-bottom-left-radius: 6px;
  background: var(--th-white);
  color: var(--th-ink);
  box-shadow: var(--shadow-sm);
}

.von-nutzer .thi-blase {
  border-bottom-right-radius: 6px;
  background: var(--th-navy);
  color: var(--th-white);
}

/* Formatierung innerhalb einer Antwort. Bewusst sparsam: THI antwortet in
   Fließtext mit kurzen Aufzählungen, mehr braucht es nicht. */
.thi-blase p { margin: 0 0 .6em; }
.thi-blase p:last-child { margin-bottom: 0; }
.thi-blase ul, .thi-blase ol { margin: .4em 0 .6em; padding-left: 1.25em; }
.thi-blase li { margin-bottom: .25em; }
.thi-blase strong { font-weight: 800; }
.thi-blase code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--th-soft);
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: .86em;
}
.von-nutzer .thi-blase code { background: rgba(255, 255, 255, .16); }

/* Statuszeile während THI nachschlägt. */
.thi-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--th-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

.thi-punkte { display: inline-flex; gap: 3px; }

.thi-punkte span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--th-blue);
  animation: thi-wippe 1.1s var(--ease-out) infinite;
}

.thi-punkte span:nth-child(2) { animation-delay: .16s; }
.thi-punkte span:nth-child(3) { animation-delay: .32s; }

@keyframes thi-wippe {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .thi-punkte span { animation: none; opacity: .6; }
}

/* Folgefragen unter einer Antwort. */
.thi-folge { display: grid; gap: 6px; margin-top: 10px; }

.thi-folge-knopf {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: var(--tap);
  padding: 8px 11px;
  border: 1px solid var(--th-line);
  border-radius: var(--radius-sm);
  background: var(--info-bg);
  color: var(--th-blue-text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.thi-folge-knopf:hover { border-color: var(--th-blue); }

.thi-folge-knopf svg {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hinweis-, Fehler- und Nicht-eingerichtet-Meldungen. */
.thi-hinweis {
  padding: 12px 14px;
  border: 1px solid var(--error-line);
  border-radius: var(--radius-md);
  background: var(--error-bg);
  color: var(--th-ink);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.thi-hinweis.ist-ruhig {
  border-color: var(--th-line);
  background: var(--th-white);
  color: var(--th-muted);
}

.thi-hinweis strong { display: block; margin-bottom: 3px; color: var(--th-navy); }

/* ----------------------------------------------------------- Eingabefeld --- */

.thi-fuss {
  flex: 0 0 auto;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--th-line);
  background: var(--th-white);
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

.thi-eingabe-feld {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--th-line-strong);
  border-radius: var(--radius-lg);
  background: var(--th-white);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.thi-eingabe-feld:focus-within { border-color: var(--th-blue); }

/* Das Feld selbst ist die Trefferfläche, nicht der Rahmen darum: mit
   min-height 34px waren es 28 echte Pixel. Jetzt so hoch wie der
   Senden-Knopf daneben; das Polster setzt eine Zeile mittig. */
.thi-eingabe {
  flex: 1 1 auto;
  max-height: 132px;
  min-height: var(--tap);
  padding: 16px 0;
  border: 0;
  background: none;
  color: var(--th-ink);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.45;
  resize: none;
  outline: none;
}

.thi-eingabe::placeholder { color: var(--th-muted); }

.thi-senden {
  display: grid;
  flex: 0 0 var(--tap);
  width: var(--tap);
  height: var(--tap);
  place-items: center;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--th-navy);
  color: var(--th-white);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-press) var(--ease-out);
}

.thi-senden:hover:not(:disabled) { background: var(--th-navy-deep); }
.thi-senden:active:not(:disabled) { transform: scale(.94); }
.thi-senden:disabled { background: var(--th-line-strong); cursor: not-allowed; }

.thi-senden svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Abbrechen ersetzt Senden, solange eine Antwort läuft. Eine lange Antwort
   nicht stoppen zu können, wäre in einer Schulung mit Zeitdruck ärgerlich. */
.thi-senden.ist-abbruch { background: var(--th-red); }
.thi-senden.ist-abbruch svg { fill: currentColor; stroke: none; }

.thi-fuss-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.thi-fuss-text {
  color: var(--th-muted);
  font-size: var(--text-sm);
  line-height: 1.35;
}

/* Trefferfläche wie die übrigen Textknöpfe (--tap). Bis 1.67 rund 19 echte
   Pixel hoch, direkt unter dem Eingabefeld — und der Klick löscht das
   Gespräch ohne Rückfrage. */
.thi-leeren {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--th-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: nowrap;
}

.thi-leeren:hover { color: var(--th-red); }
.thi-leeren[hidden] { display: none; }

/* ------------------------------------------------------------ Tastatur ---- */

/* Navy wie der Ring im übrigen Campus (styles.css, :focus-visible). Cyan
   erreichte auf Weiß 2,69 : 1 und verfehlte die 3 : 1 für Bedienelemente;
   am THI-Knopf in der Kopfzeile war das der einzige Cyan-Ring der Seite. */
.thi-panel :focus-visible,
.thi-schalter:focus-visible {
  outline: 3px solid var(--th-navy);
  outline-offset: 2px;
}

.thi-kopf :focus-visible {
  outline-color: var(--th-white);
}

/* --------------------------------------------------------------- Mobil ---- */

@media (max-width: 759px) {
  /* Drei Werkzeuge passen nicht mehr in zwei Spalten: styles.css stellt
     .masthead-tools ab 759px auf ein 2-Spalten-Raster, THI landete dann als
     halbbreiter Rest in Zeile zwei. Drei gleich breite Spalten halten die
     Reihe zusammen; die Beschriftungen sind kurz genug dafür. */
  .masthead-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .masthead-tool { gap: 7px; padding: 6px 8px; }
  .masthead-tool .ta-icon { flex-basis: 32px; width: 32px; height: 32px; }
  .masthead-tool .ta-icon svg { width: 19px; height: 19px; }
  .thi-schalter .ta-icon svg { width: 26px; height: 26px; }
  .masthead-tool .ta-title { font-size: var(--text-sm); }
}

@media (max-width: 640px) {
  /* Vollbild: ein 460-px-Panel neben 20 px Restseite wäre auf dem Telefon
     weder zu lesen noch zu bedienen. Die linke Kante übernimmt die Breite —
     so bleibt es bei Kanten statt Umrechnung (siehe Kopf der Datei). */
  .thi-panel { left: 0; width: auto; border-left: 0; }
  .thi-blase { max-width: 90%; }
  /* Auf dem Telefon nicht klebend: Zwei gestapelte Knöpfe nähmen dem
     kleinen Schirm ein Viertel und lägen beim Tippen über dem Anliegen. */
  .thi-vorlagen-aktionen { position: static; display: grid; grid-template-columns: 1fr; margin: 2px 0 0; padding: 0 0 max(4px, env(safe-area-inset-bottom)); background: none; }
  .thi-vorlagen-uebernehmen { grid-row: 1; }
}

/* Untereinander bleiben Symbol und Name auch auf 320 Pixeln erkennbar.
   Nur Symbole setzen beim ersten Campusbesuch unnötig Vorwissen voraus. */
@media (max-width: 400px) {
  .masthead-tool .ta-text { display: block; flex: none; }
  .masthead-tool .ta-title { font-size: var(--text-sm); white-space: nowrap; }
  .masthead-tool { flex-direction: column; justify-content: center; gap: 3px; padding: 8px 3px; }
  .thi-schalter { position: relative; }
  .thi-schalter .thi-punkt { position: absolute; top: 10px; right: 10px; margin: 0; }
}