/* =============================================================
   MCT – css/mod_chat.css
   Layout für mod_chat (screen1): Grundstruktur
   Respektiert Variablen/Konventionen aus style.css
   ============================================================= */

#mod-chat > div {
	background: var(--bg-panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .8rem 1rem;
	margin-bottom: 1rem;
}

#chat-titel-zeile {
	background: none;
	border: none;
	padding: 0;
}

#chat-titel-zeile h2 {
	margin: 0;
}

#chat-kaskadenfilter {
	display: flex;
	align-items: center;
	gap: .6rem;
}

#chat-kaskadenfilter label {
	font-size: .85rem;
	color: var(--text-muted);
}

.chat-platzhalter-text {
	color: var(--text-muted);
	font-size: .88rem;
}

/* -------------------------------------------------------------
   Statusübersicht (oben): nur aktuell relevante Vorgänge, keine
   vollständige Chatliste (siehe modules/mod_chat.php)
   ------------------------------------------------------------- */
#chat-status-uebersicht h3 {
	margin: 0 0 .5rem;
}

#chat-status-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

#chat-status-liste li {
	padding: .4rem .6rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-table-alt);
	font-size: .88rem;
}

/* -------------------------------------------------------------
   Neu/Edit-Akkordeon (Grundgerüst, siehe Auftrag Abschnitt 9)
   ------------------------------------------------------------- */
#edit-chat-titelzeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
}

#edit-chat-titelzeile h3 {
	margin: 0;
	flex: 0 0 auto;
}

#chat-meldung {
	flex: 1 1 auto;
	justify-content: center;
	text-align: center;
	min-width: 0;
}

#chat-editor-bereich.chat-editor-offen #edit-chat-titelzeile {
	border-bottom: 1px solid var(--border);
	padding-bottom: .6rem;
	margin-bottom: 1rem;
}

#edit-chat-inhalt textarea {
	width: 100%;
	max-width: 480px;
	resize: vertical;
}

#edit-chat-inhalt input[type="text"] {
	width: 100%;
	max-width: 480px;
}

#chat-editor-hinweis-neu {
	margin-top: .8rem;
}

#edit-chat-action {
	display: flex;
	justify-content: space-between;
	gap: .6rem;
	margin-top: 1rem;
	border-top: 1px solid var(--border);
	padding-top: 1rem;
}

#edit-chat-action #btn-chat-abbrechen { order: 1; }
#edit-chat-action #btn-chat-speichern { order: 2; }

/* Aktuell im Editbereich geöffnete Tabellenzeile */
#chat-tabelle tbody tr.chat-zeile-aktiv {
	background: rgba(59,130,246,.12);
}

/* -------------------------------------------------------------
   Ansehen-Bereich (read-only Chatverlauf, siehe Auftrag Abschnitt 10)
   ------------------------------------------------------------- */
#chat-ansehen-bereich {
	position: relative;
}

#chat-ansehen-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--border);
	padding-bottom: .6rem;
	margin-bottom: .8rem;
}

#chat-ansehen-kopf h3 {
	margin: 0;
}

#chat-ansehen-verlauf {
	max-height: 420px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: .3rem;
}

.chat-nachricht {
	max-width: 80%;
	padding: .5rem .7rem;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	font-size: .88rem;
}

.chat-nachricht-meta {
	font-size: .75rem;
	color: var(--text-muted);
	margin-bottom: .2rem;
}

.chat-nachricht-text {
	white-space: pre-line;
}

.chat-nachricht-lul {
	align-self: flex-end;
	background: var(--bg-hover);
}

.chat-nachricht-ki {
	align-self: flex-start;
	background: var(--bg-table-alt);
}

.chat-nachricht-meldung {
	align-self: center;
	max-width: 90%;
	background: none;
	border-style: dashed;
	font-style: italic;
	color: var(--text-muted);
	text-align: center;
}

/* -------------------------------------------------------------
   Filter-/Aktionsbereich über der Tabelle (gleiches Muster wie
   #lul-aktionsbereich in css/mod_lul.css)
   ------------------------------------------------------------- */
#chat-aktionsbereich {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.chat-aktion-spalte {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	flex: 1 1 0;
	min-width: 140px;
}

#chat-aktionsbereich label {
	font-size: .85rem;
	color: var(--text-muted);
}

.chat-aktion-spalte input,
.chat-aktion-spalte select {
	width: 100%;
}

#chat-aktionsbereich-meta {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .6rem;
}

.chat-filter-anzahl {
	font-size: .82rem;
	color: var(--text-muted);
	white-space: nowrap;
}

/* -------------------------------------------------------------
   Chattabelle: Sortierpfeile (gleiches Muster wie #lul-tabelle)
   ------------------------------------------------------------- */
#chat-tabelle .sortierbar {
	cursor: pointer;
	user-select: none;
}

#chat-tabelle .sortierbar:hover {
	background: var(--bg-hover);
	color: var(--text-nav-hover);
}

#chat-tabelle .sort-asc::after  { content: ' ▲'; font-size: .75em; }
#chat-tabelle .sort-desc::after { content: ' ▼'; font-size: .75em; }

#chat-tabelle {
	table-layout: fixed;
}

#chat-tabelle th:nth-child(1),
#chat-tabelle td:nth-child(1) {
	width: 100px;
}

/* Bezeichnung/Thema explizit statt "auto": bei table-layout:fixed
   kollabieren Spalten ohne eigene Breite auf 0px, sobald die uebrigen
   Spalten allein schon die volle verfuegbare Breite (bzw. die globale
   Mindestbreite table.data-tabelle aus style.css) ausfuellen - genau
   dieser Fall tritt bei schmalen Bildschirmen ein. */
#chat-tabelle th:nth-child(2),
#chat-tabelle td:nth-child(2),
#chat-tabelle th:nth-child(3),
#chat-tabelle td:nth-child(3) {
	width: 160px;
}

#chat-tabelle th:nth-child(4),
#chat-tabelle td:nth-child(4),
#chat-tabelle th:nth-child(5),
#chat-tabelle td:nth-child(5),
#chat-tabelle th:nth-child(6),
#chat-tabelle td:nth-child(6) {
	width: 90px;
}

#chat-tabelle th:nth-child(7),
#chat-tabelle td:nth-child(7) {
	width: 140px;
}

/* 6 Aktionsicons nebeneinander (siehe Auftrag Abschnitt 18/19) - genug
   Breite, damit keines abgeschnitten wird oder in eine zweite Zeile
   umbricht. */
#chat-tabelle th:last-child,
#chat-tabelle td:last-child {
	width: 270px;
}

@media (max-width: 700px) {
	#edit-chat-inhalt input[type="text"],
	#edit-chat-inhalt textarea {
		max-width: 100%;
	}

	.chat-nachricht {
		max-width: 100%;
	}
}

/* =============================================================
   Schritt 4 (screen2 Neu/Edit): zweispaltiges Layout
   ============================================================= */
#chat-editor-spalten {
	display: flex;
	gap: 1.2rem;
	/* War: flex-start (jede Spalte in eigener Inhaltshöhe, dadurch bei
	   vielen Optionen rechts eine deutlich niedrigere linke Spalte) -
	   stretch koppelt beide Spalten auf die gemeinsame, größere Höhe;
	   #chat-baum-container füllt sie unten aus und scrollt bei Bedarf
	   selbst (siehe dort), statt einer festen max-height. */
	align-items: stretch;
}

#chat-editor-links {
	flex: 0 0 45%;
	min-width: 260px;
	display: flex;
	flex-direction: column;
}

#chat-editor-rechts {
	flex: 1 1 0;
	min-width: 0;
}

#chat-readonly-text,
.chat-readonly-text {
	color: var(--text-base);
	font-size: .92rem;
}

/* -------------------------------------------------------------
   Fieldset-Gliederung des rechten Formulars (Stammdaten/
   Bildungskontext/Optionen/Quellen) - gleiche Boxoptik wie die
   Hauptbereiche in #mod-chat > div, nur kompakter. Alle Formular-
   Tabellen innerhalb #chat-editor-rechts teilen sich dieselbe 30/70-
   Spaltenaufteilung (eine gemeinsame, scope-basierte Regel statt
   Breiten je Tabelle) - bewusst nur hier überschrieben, nicht global
   in style.css (table.form-tabelle-kompakt wird an vielen anderen
   Stellen im Projekt mit anderer Breite verwendet).
   ------------------------------------------------------------- */
.chat-fieldset {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .6rem .8rem .8rem;
	margin-bottom: .8rem;
}

.chat-fieldset legend {
	padding: 0 .4rem;
	font-size: .85rem;
	color: var(--text-muted);
	font-weight: 600;
}

/* table-layout:fixed nimmt Spaltenbreiten nur aus der ERSTEN Zeile bzw.
   <colgroup> - bei "fixed" reicht ein th{width:30%} in einer späteren
   Zeile NICHT (die Stammdaten-Tabelle beginnt mit der Themapfad-Zeile,
   die als eine einzelne colspan=2-Zelle keine Spaltenbreite vorgibt),
   deshalb hier bewusst per <colgroup> je Tabelle (siehe modules/mod_chat.php). */
#chat-editor-rechts table.form-tabelle-kompakt {
	table-layout: fixed;
}

#chat-editor-rechts .chat-fk-spalte-label {
	width: 30%;
}

/* style.css setzt für alle form-tabelle-kompakt-Zeilen global th{width:36%}
   und white-space:nowrap (an anderer Stelle im Projekt gewollt). Beides
   hier überschrieben: white-space:normal, damit die schmalere 30%-Spalte
   umbrechen darf (z.B. "Automatische KI-Prüfung der Ergebnisse") statt
   die Tabelle zu sprengen bzw. Checkbox/Select zu überlappen - und width
   explizit ebenfalls auf 30% (nicht nur über <colgroup>), weil Chromium
   bei table-layout:fixed uneinheitlich priorisiert: die Themapfad-Zeile
   in "Stammdaten" hat KEIN th in der ersten Zeile (colspan=2-Zelle),
   dort greift <colgroup> korrekt; sobald eine Tabelle dagegen bereits in
   Zeile 1 ein eigenes th mit abweichender width hat (hier via globalem
   36%-Erbe), gewinnt dieses th teils gegen <colgroup> - deshalb beide
   Werte hier bewusst identisch gehalten statt sich allein auf <colgroup>
   zu verlassen. */
#chat-editor-rechts table.form-tabelle-kompakt th {
	width: 30%;
	white-space: normal;
}

/* Zeilen mit einem <textarea> rechts (Beschreibung/Themenliste/URLs):
   Label oben ausrichten statt vertikal mittig, damit die Oberkante des
   Labeltextes optisch mit der ersten Textarea-Zeile harmoniert. Bewusst
   nur für diese Zeilen (:has()), nicht pauschal für die ganze Tabelle -
   dieselbe Technik wird bereits in mod_themen.css/mod_freigaben.css
   verwendet. */
#chat-editor-rechts table.form-tabelle-kompakt tr:has(textarea) th {
	vertical-align: top;
	padding-top: .5rem;
}

.chat-thema-pfad-zeile {
	font-weight: 600;
	padding-bottom: .5rem !important;
}

/* Bildungsplan-Select: bewusst NICHT die volle 70%-Spalte ausnutzen -
   auf breiten Bildschirmen reicht eine lesbare, begrenzte Breite,
   responsiv über max-width:100% trotzdem nie breiter als die Zelle. */
#chat-edit-bildungsplan {
	width: 100%;
	max-width: 420px;
}

/* Bildungskontext-Kaskade: auf Desktop ausdrücklich EINE Zeile
   (flex-wrap:nowrap), Bildungsgang etwas breiter als Bereich/Stufe.
   min-width:0 ist nötig, damit die Selects innerhalb des flexiblen
   Containers auch tatsächlich schrumpfen statt die Zeile zu sprengen
   (Standard-Flexbox-Falle bei Formularelementen mit intrinsischer
   Breite). Erst auf schmalen Displays (siehe Media Query unten) darf
   die Kaskade umbrechen. */
#chat-bk-pfad-anzeige {
	margin: 0 0 .4rem;
	font-size: .82rem;
	color: var(--text-muted);
}

.chat-bk-kaskade {
	display: flex;
	flex-wrap: nowrap;
	gap: .5rem;
}

.chat-bk-kaskade select {
	flex: 1 1 0;
	min-width: 0;
}

.chat-bk-kaskade select:nth-child(1) { flex-grow: .8; }
.chat-bk-kaskade select:nth-child(2) { flex-grow: 1.6; }
.chat-bk-kaskade select:nth-child(3) { flex-grow: 1.1; }

@media (max-width: 600px) {
	.chat-bk-kaskade {
		flex-wrap: wrap;
	}

	.chat-bk-kaskade select {
		flex: 1 1 140px;
	}
}

/* -------------------------------------------------------------
   "Neues Thema auf oberster Ebene" - 1:1 Prinzip aus mod_themen.css
   ------------------------------------------------------------- */
.chat-fe-label {
	display: block;
	font-size: .85rem;
	color: var(--text-muted);
	margin-bottom: .3rem;
}

.chat-bl-gruppe {
	display: flex;
	gap: .5rem;
}

#chat-top-bezeichnung {
	flex: 1 1 auto;
	min-width: 0;
}

.chat-top-trennlinie {
	border: none;
	border-top: 1px solid var(--border);
	margin: .8rem 0;
}

/* -------------------------------------------------------------
   Themenbaum (eigenständig, siehe js/mod_chat.js)
   ------------------------------------------------------------- */
#chat-baum-container {
	/* Füllt die von #chat-editor-spalten (align-items:stretch) gemeinsam
	   mit #chat-editor-rechts vorgegebene Höhe von #chat-editor-links
	   aus (#chat-top-anlegen darüber bleibt in fester Inhaltshöhe,
	   min-height:0 ist nötig, damit dieser Flex-Kindbereich innerhalb
	   seiner Höhe tatsächlich scrollen statt überlaufen kann). Auf
	   Smartphone unten wieder auf die bisherige feste Höhe zurückgesetzt
	   (Zwei-Spalten-Kopplung ist dort nicht mehr relevant). */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.chat-tv-baum-liste {
	list-style: none;
	margin: 0;
	padding-left: 1.1rem;
}

.chat-tv-baum-wurzel {
	padding-left: 0;
}

.chat-tv-knoten {
	padding: .15rem 0;
}

.chat-tv-toggle,
.chat-tv-toggle-leer {
	display: inline-block;
	width: 1.1rem;
	text-align: center;
	cursor: pointer;
	user-select: none;
	font-size: .75em;
	color: var(--text-muted);
}

.chat-tv-knoten-name {
	cursor: pointer;
	padding: .1rem .3rem;
	border-radius: var(--radius);
}

.chat-tv-knoten-name:hover {
	background: var(--bg-hover);
	color: var(--text-nav-hover);
}

.chat-tv-knoten-name.chat-tv-aktiv {
	background: var(--bg-hover);
	color: var(--text-nav-hover);
	font-weight: 600;
}

.chat-tv-fragen-anzahl {
	font-size: .8em;
	color: var(--text-muted);
}

.chat-tv-knoten-name.chat-tv-aktiv .chat-tv-fragen-anzahl {
	color: inherit;
	opacity: .85;
}

.chat-thema-aktionen {
	margin-left: .3rem;
	display: inline-flex;
	gap: .25rem;
}

.chat-ta-btn {
	cursor: pointer;
	font-size: .85em;
	opacity: .7;
}

.chat-ta-btn:hover {
	opacity: 1;
}

/* -------------------------------------------------------------
   Chatart-Hinweis + Fachdaten/Quellen
   ------------------------------------------------------------- */
#chat-thema-hinweis {
	margin: .4rem 0 .8rem;
	/* Chatinfo-Ansicht (Auftrag "mod_chat: Layout laufender Chat") baut hier
	   mehrzeiligen Text mit \n zusammen (Themenliste nutzen/Unterthemen
	   erstellen/Themen-Liste) - ohne pre-line würde das zu einer Zeile
	   zusammenfallen. */
	white-space: pre-line;
}

#chat-edit-themenliste-pflicht {
	color: var(--text-muted);
	font-weight: normal;
}

#chat-quellen-bereich textarea,
#chat-quellen-readonly {
	margin-top: .4rem;
}

#chat-quellen-readonly-liste,
#chat-quellen-readonly-liste li {
	list-style: none;
	margin: 0;
	padding: 0;
}

#chat-quellen-readonly-liste {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

#chat-quellen-readonly-liste li {
	padding: .3rem .5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-table-alt);
	font-size: .85rem;
}

/* -------------------------------------------------------------
   Datei-Upload (Drag&Drop + Auswahl) - gleiches Grundmuster wie
   #bp-upload-zone in css/mod_bildungsplaene.css, eigener Namensraum
   ------------------------------------------------------------- */
#chat-upload-zone {
	border: 2px dashed var(--border-input);
	border-radius: var(--radius);
	padding: 1.2rem;
	text-align: center;
	cursor: pointer;
	margin-top: .5rem;
}

#chat-upload-zone p {
	margin: .2rem 0;
}

#chat-upload-zone:hover,
#chat-upload-zone:focus {
	border-color: var(--border-focus);
	background: var(--bg-hover);
	color: var(--text-nav-hover);
	outline: none;
}

#chat-upload-zone.chat-upload-dragover {
	border-color: var(--border-focus);
	background: var(--bg-hover);
	color: var(--text-nav-hover);
}

#chat-dateiliste {
	list-style: none;
	margin: .6rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

#chat-dateiliste li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .3rem .5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-table-alt);
	font-size: .85rem;
}

.chat-dateiliste-entfernen {
	cursor: pointer;
	font-size: 1.1em;
	color: var(--text-muted);
	padding: 0 .3rem;
}

.chat-dateiliste-entfernen:hover {
	color: var(--text-base);
}

/* -------------------------------------------------------------
   Optionen-Checkboxzeilen (KI-Prüfung/Unterthemen) - bewusst NICHT die
   30/70-Beschriftungsspalte von table.form-tabelle-kompakt (Auftrag
   "Layout MultiChat-Optionsbereich"): Checkbox zuerst, Beschriftung
   danach, keine erzwungene linke Spaltenbreite, damit der darunter
   liegende MultiChat-Themenblock die volle Breite von #chat-editor-rechts
   nutzen kann.
   ------------------------------------------------------------- */
.chat-opt-checkbox-zeile {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .6rem;
}

.chat-opt-checkbox-zeile input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
}

.chat-opt-checkbox-zeile label {
	cursor: pointer;
}

/* "Unterthemen erstellen" ist fachlich nur relevant, wenn "Themenliste
   nutzen" aktiv ist (Auftrag "mod_chat konsolidieren") - leichte
   Einrückung macht diese Abhängigkeit auch optisch sichtbar. */
.chat-opt-checkbox-eingerueckt {
	margin-left: 1.6rem;
}

/* "Themen für den MultiChat": eigene volle Breite unter der Unterthemen-
   Checkbox statt einer eigenen th-Spalte (siehe oben) - dadurch mehr
   Platz für lange Themenbezeichnungen. */
.chat-opt-mc-block {
	margin-top: .2rem;
}

/* -------------------------------------------------------------
   "Themen für den MultiChat" (Screen2, unterthemenchat) - bewusst
   untereinander statt als horizontale Chipliste (Auftrag MultiChat-
   Themenauswahl), lange Bezeichnungen sollen sauber umbrechen statt
   horizontal zu scrollen.
   ------------------------------------------------------------- */
#chat-mc-vorhandene {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.chat-mc-zeile {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	padding: .3rem .5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-table-alt);
	font-size: .85rem;
}

.chat-mc-zeile input[type="checkbox"] {
	margin-top: .15rem;
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
}

.chat-mc-zeile label {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
	cursor: pointer;
}

#chat-mc-keine-vorhandene {
	margin: 0;
}

#chat-mc-neue-liste {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin-top: .4rem;
}

.chat-mc-neu-zeile {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.chat-mc-neu-eingabe {
	flex: 1 1 auto;
	min-width: 0;
}

.chat-mc-neu-btn {
	flex: 0 0 auto;
	margin: 0;
}

/* -------------------------------------------------------------
   Themen-Popup (Neu/Umbenennen) - gleiches Grundmuster wie
   #feedback-overlay/#feedback-box in css/style.css
   ------------------------------------------------------------- */
#chat-thema-popup-overlay {
	position:        fixed;
	inset:           0;
	z-index:         1000;
	background:      rgba(0, 0, 0, 0.45);
	display:         flex;
	align-items:     center;
	justify-content: center;
}

#chat-thema-popup-box {
	background:     var(--bg-panel);
	color:          var(--text-base);
	border:         1px solid var(--border);
	border-radius:  var(--radius);
	box-shadow:     var(--shadow-md);
	padding:        1.5rem 2rem;
	width:          min(420px, 95vw);
	display:        flex;
	flex-direction: column;
	gap:            1rem;
}

#chat-thema-popup-box h3 {
	margin: 0;
}

#chat-thema-popup-aktion {
	display: flex;
	justify-content: space-between;
	gap: .6rem;
}

@media (max-width: 800px) {
	#chat-editor-spalten {
		flex-direction: column;
	}

	#chat-editor-links {
		flex: 1 1 auto;
		width: 100%;
		display: block; /* Höhenkopplung der Spalten ist einspaltig irrelevant */
	}

	/* Einspaltig keine gekoppelte Höhe verfügbar - bisherige feste
	   Begrenzung (unverändert, keine neue/größere Zahl) statt der
	   Desktop-Flex-Füllung. */
	#chat-baum-container {
		flex: none;
		max-height: 480px;
	}

	/* "Chat-Optionen anzeigen/ausblenden" (Auftrag "mod_chat: Layout
	   laufender Chat") ist spürbar länger als das bisherige "Neu" - bei
	   langer Chat-Bezeichnung (h3, nicht schrumpfbar) reichte der
	   verbleibende Platz auf schmalen Bildschirmen nicht mehr aus
	   (horizontales Überlaufen der Titelzeile). Zeilenumbruch nur hier
	   (Ansehen-Modus, laufender Chat) - die übrigen Zustände (screen1/2)
	   verwenden weiterhin ausschließlich "Neu" und sind unverändert. */
	#chat-editor-bereich.chat-chatinfo-modus #edit-chat-titelzeile {
		flex-wrap: wrap;
	}
}

/* =============================================================
   Schritt 5 (screen3): interaktiver Chat
   ============================================================= */

/* Chatinfo im Lesemodus: Titel signalisiert Auf-/Zuklappen */
#chat-editor-bereich.chat-chatinfo-modus #edit-chat-titelzeile h3 {
	cursor: pointer;
}

/* -------------------------------------------------------------
   Desktop: Chatbereich als flexibler Restraum (Auftrag "mod_chat:
   Layout laufender Chat") - verhindert, dass wachsender Chatinhalt
   (insbesondere der KI-Statushinweis) die äußere Seite/den Footer
   verschiebt. #mod-chat.chat-screen3-aktiv wird nur im Zustand
   screen3-chat gesetzt (siehe chat_switchState() in js/mod_chat.js) -
   screen1/2 behalten den normalen Seitenfluss vollständig unverändert.
   #chat-editor-bereich (Titel + ggf. geöffnete Chat-Optionen) bleibt in
   natürlicher Höhe; #chat-interaktiv-bereich füllt darunter den
   verbleibenden Platz - öffnen sich die Optionen, wird der Chatbereich
   dadurch automatisch kleiner, schließen sie sich, wieder größer, ohne
   dass sich die Gesamthöhe von #mod-chat ändert. Bewusst nur ab dieser
   Breite (nicht auf Smartphone, siehe Auftrag Abschnitt 22 - dort
   bleibt die bisherige, einfache feste Höhe von
   #chat-interaktiv-scrollbereich unverändert bestehen, keine
   zusätzliche vh-Logik auf mobilen Browsern/WebApps).
   ------------------------------------------------------------- */
@media (min-width: 801px) {
	#mod-chat.chat-screen3-aktiv {
		display: flex;
		flex-direction: column;
		max-height: 75vh;
	}

	/* #chat-editor-bereich selbst wird zum verschachtelten Flex-Container
	   (seine Kinder - Titelzeile, #edit-chat-inhalt, Aktionsknöpfe -
	   liefen sonst im normalen Blockfluss und ignorierten die von außen
	   zugewiesene, ggf. kleinere Höhe komplett, statt sie an
	   #edit-chat-inhalt weiterzureichen).
	   BUGFIX (verrutschte Buttonleiste): hier bewusst KEIN min-height:0 -
	   das hätte die automatische Mindesthöhe des gesamten Elements
	   aufgehoben, also auch von Titelzeile und #chat-interaktiv-aktionen
	   (beide flex-shrink:0, dürfen nie schrumpfen). Bei wenig Platz
	   (kurzes Browserfenster, #mod-chat max-height:75vh) quetschte der
	   äußere Flex-Algorithmus die Box dann unter die Höhe von Titelzeile+
	   Aktionsknöpfen zusammen - durch overflow:visible wurden die
	   Aktionsknöpfe dadurch sichtbar unterhalb der geschrumpften Box
	   gerendert ("schwebten" dort). Die eigentlich gewünschte Schrumpf-
	   Freigabe für den langen Optionsbereich sitzt bereits eine Ebene
	   tiefer (siehe #edit-chat-inhalt unten, min-height:0) - das reicht
	   aus: die automatische Mindesthöhe von #chat-editor-bereich selbst
	   berücksichtigt das dortige min-height:0 seines Kindes und schrumpft
	   dadurch schon korrekt bis auf Titelzeile+Aktionsknöpfe, nie
	   darunter. */
	#mod-chat.chat-screen3-aktiv #chat-editor-bereich {
		flex: 0 1 auto;
		display: flex;
		flex-direction: column;
	}

	#mod-chat.chat-screen3-aktiv #chat-editor-bereich #edit-chat-titelzeile {
		flex: 0 0 auto;
	}

	#mod-chat.chat-screen3-aktiv #chat-editor-bereich #chat-interaktiv-aktionen {
		flex: 0 0 auto;
	}

	/* Garantierte Mindesthöhe fürs Eingabefeld + etwas Chatverlauf -
	   verschwindet nie, egal wie lang die geöffneten Chat-Optionen sind
	   (siehe #edit-chat-inhalt unten, das stattdessen selbst schrumpft/
	   scrollt). Wächst über diese Mindesthöhe hinaus mit dem
	   verbleibenden Platz (flex:1). */
	#mod-chat.chat-screen3-aktiv #chat-interaktiv-bereich {
		flex: 1 1 auto;
		min-height: 160px;
		display: flex;
		flex-direction: column;
	}

	#mod-chat.chat-screen3-aktiv #chat-interaktiv-scrollbereich {
		flex: 1 1 auto;
		min-height: 0;
		max-height: none;
	}

	#mod-chat.chat-screen3-aktiv #chat-interaktiv-eingabe-bereich {
		flex: 0 0 auto;
	}

	/* Die read-only Chat-Optionen (Bildungskontext + ggf. lange
	   Themenliste bei MultiChat) sind sonst unbegrenzt hoch und könnten
	   #mod-chat trotz max-height:75vh nach unten aus der Seite drücken
	   (sichtbar als kurzzeitige Browser-Scrollleiste). Als flex:1 1 auto
	   mit min-height:0 INNERHALB des jetzt selbst flexiblen
	   #chat-editor-bereich (siehe oben) bekommt #edit-chat-inhalt genau
	   die von der Flex-Verteilung zugewiesene (ggf. geschrumpfte) Höhe
	   tatsächlich als eigene Boxhöhe - erst dadurch greift
	   overflow-y:auto und schneidet/scrollt den Überschuss lokal ab,
	   statt dass er sichtbar übersteht. Die konkrete Höhe ergibt sich
	   rein aus der Flex-Verteilung (kein fester vh-/px-Wert nötig),
	   #chat-interaktiv-bereich behält so immer seine 160px. Nur im
	   Ansehen-Modus (laufender Chat) aktiv - das normale
	   "Neu"-Formular mit Themenbaum bleibt unverändert. */
	#mod-chat.chat-screen3-aktiv #chat-editor-bereich.chat-chatinfo-modus #edit-chat-inhalt {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
	}
}

#chat-interaktiv-aktionen {
	display: flex;
	justify-content: space-between;
	gap: .6rem;
	margin-top: 1rem;
	border-top: 1px solid var(--border);
	padding-top: 1rem;
}

#chat-interaktiv-aktionen #btn-chat-unterbrechen { order: 1; }
#chat-interaktiv-aktionen #btn-chat-prognose      { order: 2; }
#chat-interaktiv-aktionen #btn-chat-fragen-erstellen { order: 3; }

/* Interner Scrollcontainer (Auftrag "mod_chat: Layout laufender Chat") -
   enthält #chat-interaktiv-verlauf + #chat-interaktiv-wartehinweis als
   Geschwister (siehe modules/mod_chat.php). Die feste max-height ist
   der bestehende, unveränderte Wert (vorher direkt auf
   #chat-interaktiv-verlauf) - gilt unverändert für Smartphone; auf
   Desktop wird sie weiter unten durch eine flexible Höhe ersetzt. */
#chat-interaktiv-scrollbereich {
	max-height: 480px;
	overflow-y: auto;
	padding: .3rem;
	margin-bottom: .8rem;
}

#chat-interaktiv-verlauf {
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

/* .chat-nachricht/-lul/-ki/-meldung bereits vorhanden (Ansehen-Bereich,
   Schritt 3) - hier bewusst unverändert wiederverwendet (Auftrag
   Abschnitt 5: "optisch an den bereits vorhandenen read-only
   Chatbereich anlehnen"). */

#chat-interaktiv-wartehinweis {
	margin-top: .6rem;
	padding: .5rem .7rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-table-alt);
	font-size: .88rem;
	color: var(--text-muted);
}

#chat-interaktiv-eingabe-bereich {
	display: flex;
	gap: .6rem;
	align-items: flex-end;
}

#chat-interaktiv-eingabe {
	flex: 1 1 auto;
	resize: vertical;
	min-height: 2.6em;
}

#btn-chat-interaktiv-senden {
	flex: 0 0 auto;
}

@media (max-width: 700px) {
	#chat-interaktiv-eingabe-bereich {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Status "Fehlgeschlagen" (Auftrag "Themenbaum-Zählung"/UI-Nachtrag Bug 2):
   sichtbares Info-Symbol neben dem Statustext, nutzt die native
   title-Tooltip-Mechanik wie die übrigen Aktionsicons dieser Tabelle
   (z.B. title="Bearbeiten") - keine neue Tooltip-Bibliothek, kein
   Hover-Panel wie .feld-hilfe-icon (style.css), nur dezente Optik. */
.chat-status-info-icon {
	display: inline-block;
	margin-left: .3rem;
	color: var(--text-muted);
	font-size: .85rem;
	cursor: help;
}

.chat-status-info-icon:hover,
.chat-status-info-icon:focus {
	color: var(--btn-bg);
}