/* =============================================================
   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;
	align-items: flex-start;
}

#chat-editor-links {
	flex: 0 0 320px;
	min-width: 260px;
}

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

#chat-editor-rechts h4 {
	margin: 1rem 0 .4rem;
}

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

/* -------------------------------------------------------------
   "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 {
	max-height: 480px;
	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;
}

#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);
}

/* -------------------------------------------------------------
   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%;
	}
}

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

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

#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; }

#chat-interaktiv-verlauf {
	max-height: 480px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: .3rem;
	margin-bottom: .8rem;
}

/* .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-bottom: .8rem;
	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;
	}
}