/***********************************************************************************************/
/* Chat - eigenes Stylesheet ("Soft & rund", siehe CLAUDE.md/termine.css als Vorbild)            */
/* Norbert Hohmann / 31.08.2026                                                                 */
/*                                                                                             */
/* Keine eigene Farbskala noetig (anders als todoliste.css's Prioritaets-Farben/notizen.css's     */
/* Zettelfarben) - eine Chat-Nachricht traegt keine bedeutungstragende Farbe, nur "von mir" vs.   */
/* "von jemand anderem". Layout ist Sidebar+Fenster wie kichat/index.php, aber in der neueren      */
/* "Soft & rund"-Optik statt kichats aelterer Bootstrap-Karten-Optik.                             */
/***********************************************************************************************/

:root {
	/* dunkler Standardwert (bare :root = dunkel, siehe theme.css-Konvention) */
	--chat-karte-schatten: 0 18px 38px -20px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.3);
	--chat-zeile-schatten: 0 10px 22px -16px rgba(0,0,0,.55);
	/* Fund vom 02.09.2026: eingehende Blasen lagen bisher auf --input-bg, das im Hellmodus mit
	   --card-bg identisch ist (beide #ffffff) und im Dunkelmodus nur eine Nuance daneben liegt -
	   kaum von der eigenen Karte zu unterscheiden. Eigenes, sichtbar abgesetztes Token. */
	--chat-blase-eingehend: #262c40;
}
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--chat-karte-schatten: 0 16px 34px -18px rgba(var(--accent-rgb),.22), 0 2px 8px rgba(30,42,61,.06);
		--chat-zeile-schatten: 0 10px 24px -16px rgba(30,42,61,.16);
		--chat-blase-eingehend: #eef2fa;
	}
}
:root[data-theme="dark"] {
	--chat-karte-schatten: 0 18px 38px -20px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.3);
	--chat-zeile-schatten: 0 10px 22px -16px rgba(0,0,0,.55);
	--chat-blase-eingehend: #262c40;
}
:root[data-theme="light"] {
	--chat-karte-schatten: 0 16px 34px -18px rgba(var(--accent-rgb),.22), 0 2px 8px rgba(30,42,61,.06);
	--chat-zeile-schatten: 0 10px 24px -16px rgba(30,42,61,.16);
	--chat-blase-eingehend: #eef2fa;
}

.karte { background:var(--card-bg); border:1px solid var(--border-soft); border-radius:24px; padding:1.6rem 1.4rem; margin:1.1rem 0; box-shadow:var(--chat-karte-schatten); }
.hinweis { color:var(--text-muted-custom); font-size:.9rem; }
/* [hidden] muss display:none behalten, auch wenn ein Element eine Layout-Klasse traegt - die
   seit Langem im Projekt dokumentierte Falle (Live-Spiele, dokumenteAnzeige.inc.php,
   todoliste.css, termine.css). Von Anfang an mitgefuehrt, nicht erst nachtraeglich gefunden. */
[hidden] { display:none !important; }

/* --- Anlegen-Formular (neuer Chat) --- */
.chat-neu-form { display:flex; flex-direction:column; gap:.6rem; }
.chat-neu-form .feld-box {
	display:flex; align-items:center; gap:.6rem;
	background:var(--input-bg); border:1.5px solid var(--border-soft); border-radius:16px;
	padding:.65rem .8rem;
}
.chat-neu-form .feld-box:focus-within { border-color:var(--accent); }
.chat-neu-form .feld-icon { flex:none; color:var(--text-muted-custom); }
.chat-neu-form .feld-eingabe { flex:1; min-width:0; border:none; background:none; padding:0; margin:0; font:inherit; font-weight:600; color:var(--text-main); }
.chat-neu-form .feld-eingabe:focus { outline:none; }
.chat-neu-form button[type=submit] {
	padding:.75rem 1.3rem; border:none; border-radius:999px;
	background:linear-gradient(180deg, var(--accent-hover), var(--accent));
	color:#fff; font-weight:700; cursor:pointer;
	box-shadow:0 10px 22px -10px rgba(var(--accent-rgb),.65);
}
.chat-neu-form button[type=submit]:hover { filter:brightness(1.08); }

/* --- Layout: Sidebar + Fenster, analog kichat/index.php aber "Soft & rund" --- */
.chat-layout { display:grid; grid-template-columns:minmax(190px,240px) 1fr; gap:1rem; margin-top:1rem; }
/* Ein anonymer Gast hat keine Sidebar (keine "Liste seiner Chats" - siehe index.php) - die
   einspaltige Variante fuellt die Breite, statt eine leere erste Spalte freizulassen. */
.chat-layout--ohne-sidebar { grid-template-columns:1fr; }
.chat-sidebar { display:flex; flex-direction:column; gap:.7rem; }
.chat-sidebar__titel { font-weight:700; font-size:.8rem; color:var(--text-muted-custom); text-transform:uppercase; letter-spacing:.03em; padding:0 .2rem; }
.chat-liste { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.chat-liste li a {
	display:flex; flex-direction:column; gap:.2rem; text-decoration:none; color:var(--text-main);
	border-radius:18px; border:1px solid var(--border-soft); background:var(--card-bg);
	padding:.75rem .9rem; box-shadow:var(--chat-zeile-schatten);
}
.chat-liste li.aktiv a { border-color:var(--accent); }
.chat-eintrag-titel { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-eintrag-meta { display:flex; gap:.5rem; font-size:.75rem; color:var(--text-muted-custom); }
.chat-eintrag-meta .badge { background:var(--tag-bg); color:var(--tag-text); border-radius:999px; padding:.1rem .5rem; }

/* "Fokus & Schublade" (02.09.2026): .chat-haupt haelt nur noch zwei Kinder -
   .chat-haupt__gespraech (Kopf+Verlauf+Eingabe, die eigentliche Konversation) und die
   Rauminfo-Schublade (.freigabe, siehe unten) - dadurch kann Letztere per Media Query zur
   Schublade (Handy) oder zur dritten Spalte (Desktop/Tablet) werden, ohne das aeussere
   Sidebar-Grid anzufassen. */
.chat-haupt { min-width:0; display:flex; flex-direction:column; gap:1rem; }
.chat-haupt__gespraech { min-width:0; display:flex; flex-direction:column; gap:.9rem; }
.chat-haupt__kopf { display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.chat-haupt__titel { font-weight:700; font-size:1.1rem; color:var(--text-strong); }
.chat-haupt__teilnehmer { font-size:.82rem; color:var(--text-muted-custom); }

/* Nur am Handy sichtbar (siehe Media Query unten) - fuehrt von der offenen Konversation zurueck
   zur Chat-Liste. Text+Pfeilentity statt SVG, wie includes/appLayout.inc.php's
   .app-header__zurueck - dort ebenfalls kein Icon-Font/SVG fuer einen simplen Zurueck-Pfeil. */
.chat-zurueck-link { display:none; color:var(--text-muted-custom); text-decoration:none; font-weight:700; font-size:.85rem; }
.chat-zurueck-link:hover { color:var(--accent); }

/* --- Rauminfo-Schublade, wortgleiches <details>-Grundgeruest zu alben/album.php's
   <details class="freigabe"> - traegt seit 02.09.2026 zusaetzlich die Teilnehmerliste, nicht
   mehr nur den Einladungslink. Auf/Zu bleibt komplett nativ (<summary> als Klickflaeche), auch
   am Handy: zugeklappt zeigt <details> von sich aus nur die <summary>-Zeile, das ist bereits der
   "Peek"-Griff aus dem Mockup, ganz ohne eigenes JS. --- */
.freigabe { border-radius:18px; border:1px solid var(--border-soft); background:var(--card-bg); box-shadow:var(--chat-zeile-schatten); }
.freigabe summary { padding:.8rem 1rem; cursor:pointer; font-weight:700; display:flex; align-items:center; gap:.6rem; list-style:none; }
.freigabe summary::-webkit-details-marker { display:none; }
.freigabe__marke { font-size:.72rem; font-weight:700; border-radius:999px; padding:.15rem .6rem; background:var(--tag-bg); color:var(--text-muted-custom); }
.freigabe__marke.aktiv { background:var(--accent); color:#fff; }
.freigabe__inhalt { padding:0 1rem 1rem; display:flex; flex-direction:column; gap:.9rem; }
.freigabe-schalter { display:flex; align-items:center; gap:.5rem; }
.freigabe-link-zeile { display:flex; gap:.5rem; flex-wrap:wrap; }
.freigabe-link-zeile input {
	flex:1 1 14rem; min-width:0; border:1.5px solid var(--border-soft); border-radius:12px;
	background:var(--input-bg); color:var(--text-main); padding:.55rem .7rem; font:inherit;
}
.freigabe-link-zeile button {
	border:none; border-radius:999px; padding:.55rem 1rem; font-weight:700; cursor:pointer;
	background:var(--tag-bg); color:var(--text-main);
}
.freigabe-link-zeile button:hover { background:var(--accent); color:#fff; }

/* --- Teilnehmerliste innerhalb der Schublade --- */
.freigabe__label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted-custom); }
.freigabe-teilnehmer { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.freigabe-teilnehmer li { display:flex; align-items:center; gap:.55rem; font-size:.9rem; }
/* Bewusst KEIN personenspezifischer Farb-Hash wie bei den Nachrichten-Avataren (siehe chat.js) -
   der muesste sonst in PHP und JS identisch nachgebaut und synchron gehalten werden, nur fuer
   eine rein kosmetische Uebereinstimmung. Neutrale Initiale in den ohnehin vorhandenen Tag-Farben. */
.freigabe-teilnehmer__initiale {
	flex:none; width:1.8rem; height:1.8rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
	background:var(--tag-bg); color:var(--tag-text); font-weight:700; font-size:.78rem;
}

/* --- Nachrichtenverlauf --- */
.verlauf { display:flex; flex-direction:column; gap:.6rem; border-radius:24px; border:1px solid var(--border-soft); background:var(--card-bg); box-shadow:var(--chat-karte-schatten); padding:1rem; min-height:14rem; max-height:60vh; overflow-y:auto; }
.nachricht { max-width:min(80%, 34rem); display:flex; flex-direction:column; gap:.15rem; }
.nachricht.von-mir { align-self:flex-end; align-items:flex-end; }
/* .nachricht--folge: direkte Fortsetzung derselben Wortmeldung (siehe chat.js) - engerer Abstand
   nach oben, bei eingehenden Nachrichten zusaetzlich ohne sichtbaren Avatar/Namen (siehe unten). */
.nachricht--folge { margin-top:-.35rem; }
.nachricht__reihe { display:flex; align-items:flex-end; gap:.5rem; }
.nachricht__avatar {
	flex:none; width:1.7rem; height:1.7rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
	color:#fff; font-weight:700; font-size:.72rem;
}
.nachricht__avatar--platzhalter { visibility:hidden; }
.nachricht__gruppe { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.nachricht__absender { font-size:.72rem; font-weight:700; color:var(--text-muted-custom); padding:0 .3rem; }
/* Zeitangabe je Nachricht (02.09.2026) - klein, gedaempft, kursiv; unabhaengig von der Gruppierung
   (siehe chat.js), da einzelne Nachrichten innerhalb einer Gruppe zeitlich auseinanderliegen
   koennen, auch wenn Avatar/Name dort unterdrueckt sind. */
.nachricht__zeit { font-size:.68rem; font-style:italic; color:var(--text-muted-custom); padding:0 .3rem; }
.nachricht__blase { padding:.6rem .85rem; border-radius:16px; white-space:pre-wrap; overflow-wrap:anywhere; }
.nachricht.von-mir .nachricht__blase { background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
.nachricht.von-anderen .nachricht__blase { background:var(--chat-blase-eingehend); border:1px solid var(--border-soft); border-bottom-left-radius:4px; }
.nachricht__blase img { display:block; max-width:100%; border-radius:12px; margin-top:.2rem; }

/* --- Eingabezeile --- */
.chat-eingabe-form { display:flex; gap:.5rem; align-items:flex-end; flex-wrap:wrap; }
.chat-eingabe-form textarea {
	flex:1 1 12rem; min-height:2.9rem; max-height:8rem; resize:vertical;
	border:1.5px solid var(--border-soft); border-radius:16px; background:var(--input-bg);
	color:var(--text-main); padding:.65rem .85rem; font:inherit;
}
.chat-eingabe-form textarea:focus { outline:none; border-color:var(--accent); }
.chat-anhang-knopf {
	flex:none; width:2.9rem; height:2.9rem; display:flex; align-items:center; justify-content:center;
	border-radius:999px; border:1.5px solid var(--border-soft); background:var(--input-bg);
	color:var(--text-muted-custom); cursor:pointer;
}
.chat-anhang-knopf:hover { color:var(--accent); border-color:var(--accent); }
.chat-anhang-name { font-size:.78rem; color:var(--text-muted-custom); flex-basis:100%; }
.chat-eingabe-form button[type=submit] {
	flex:none; padding:.8rem 1.3rem; border:none; border-radius:999px;
	background:linear-gradient(180deg, var(--accent-hover), var(--accent));
	color:#fff; font-weight:700; cursor:pointer;
	box-shadow:0 10px 22px -10px rgba(var(--accent-rgb),.65);
}
.chat-eingabe-form button[type=submit]:disabled { opacity:.5; cursor:default; }

/* --- Aktionsknoepfe (Verlassen/Loeschen) --- */
.chat-aktionen { display:flex; gap:.4rem; }
.chat-aktion {
	flex:none; width:2.3rem; height:2.3rem; display:flex; align-items:center; justify-content:center;
	background:var(--tag-bg); border:none; cursor:pointer; border-radius:12px; color:var(--text-muted-custom);
}
.chat-aktion svg { width:1rem; height:1rem; pointer-events:none; }
.chat-aktion:hover { color:var(--accent); }
.chat-aktion.gefahr:hover { color:#e05555; }

.chat-fusszeile { margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border-soft); text-align:center; }

/* "Fokus & Schublade": am Handy ist immer nur EINE Spalte sichtbar, nie beide untereinander wie
   vor 02.09.2026 - chat-layout--leer (siehe chat/index.php, gesetzt wenn kein Chat offen ist)
   entscheidet welche. .chat-layout--ohne-sidebar (Gast-Chat/oeffentlicher Raum) hat gar keine
   Sidebar und ist von dieser Umschaltung unberuehrt - dort ist .chat-haupt immer die einzige
   Spalte. */
@media (max-width: 720px) {
	.chat-layout { display:flex; flex-direction:column; }
	.chat-layout .chat-sidebar { display:none; }
	.chat-layout .chat-haupt { display:flex; }
	.chat-layout.chat-layout--leer .chat-sidebar { display:flex; }
	.chat-layout.chat-layout--leer .chat-haupt { display:none; }

	.chat-zurueck-link { display:inline-flex; margin-bottom:-.3rem; }

	/* Platz fuer den permanent angedockten Schublade-Griff am unteren Bildschirmrand, damit er
	   die Eingabezeile nicht ueberdeckt. An .chat-haupt statt .chat-haupt__gespraech, da Letzteres
	   in raum.php zusaetzlich eine .karte ist - der Abstand soll NACH der Karte entstehen, nicht
	   als Leerraum davor innerhalb ihres Rahmens. .freigabe ist an dieser Stelle bereits
	   position:fixed (siehe unten) und traegt zur Hoehe von .chat-haupt nichts mehr bei. */
	.chat-haupt { padding-bottom:3.4rem; }
	.freigabe {
		position:fixed; left:0; right:0; bottom:0; z-index:20;
		border-radius:18px 18px 0 0; box-shadow:0 -10px 24px -12px rgba(0,0,0,.4);
	}
	.freigabe[open] .freigabe__inhalt { max-height:60vh; overflow-y:auto; }
}

/* Ab hier reicht die Breite fuer eine echte dritte Spalte statt einer Schublade - siehe Plan fuer
   die Begruendung, warum das eine eigene, hoehere Schwelle als die 720px-Sidebar-Grenze ist. */
@media (min-width: 900px) {
	.chat-haupt { flex-direction:row; align-items:flex-start; }
	.chat-haupt__gespraech { flex:1; }
	.freigabe {
		flex:0 0 15.5rem; align-self:stretch;
		/* <details> versteckt nicht-summary-Kinder browserseitig, solange [open] fehlt - hier
		   bewusst uebersteuert, die Schublade ist am Desktop immer eine offene Spalte. */
		height:fit-content;
	}
	.freigabe summary { cursor:default; }
	.freigabe__inhalt { display:flex !important; }
}

/* --------------------------------------------------------------------------------------------
   Oeffentliche Raeume ("Soziales", 02.09.2026) - Raumliste und Beitrittsformular.
   Bewusst im vorhandenen "Soft & rund"-Stil dieser Datei, keine eigenen Farbtokens: die Raeume
   sind Teil desselben Bereichs, nur mit einem anderen Zugangsweg.
   -------------------------------------------------------------------------------------------- */
.raum-liste { list-style:none; margin:1rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:.8rem; }
.raum-eintrag {
	display:flex; flex-direction:column; gap:.45rem;
	background:var(--card-bg); border:1px solid var(--border-soft); border-radius:20px;
	padding:1rem 1.1rem; box-shadow:var(--chat-zeile-schatten);
}
.raum-eintrag--voll { opacity:.6; }
.raum-eintrag__kopf { display:flex; align-items:center; gap:.45rem; }
.raum-eintrag__titel { font-weight:700; font-size:1.02rem; color:var(--text-strong); overflow-wrap:break-word; min-width:0; }
.raum-schloss { flex:none; display:inline-flex; color:var(--text-muted-custom); }
.raum-eintrag__meta { font-size:.8rem; color:var(--text-muted-custom); }
.raum-eintrag__knopf {
	align-self:flex-start; margin-top:.25rem;
	border:none; border-radius:999px; padding:.45rem 1.1rem;
	background:var(--accent); color:#fff; font:inherit; font-weight:700; text-decoration:none;
}
.raum-eintrag__knopf:hover { filter:brightness(1.08); }
.raum-eintrag__knopf--aus { background:var(--tag-bg); color:var(--text-muted-custom); cursor:default; }
.raum-eintrag__knopf--aus:hover { filter:none; }

.raum-beitritt__titel { margin:0 0 .8rem; font-size:1.15rem; color:var(--text-strong); }
.feld-label { font-weight:700; font-size:.85rem; color:var(--text-muted-custom); }
.hinweis--fehler { color:var(--negative, #e05a5a); font-weight:600; }

/* Moderationsansicht (chat/admin/raum.php) - nutzt sonst die Quiz-Admin-Stylesheets, nur diese
   beiden Kleinigkeiten haben dort kein Gegenstueck. */
.moderation-zeile { display:flex; align-items:flex-start; gap:.6rem; padding:.45rem 0; border-bottom:1px solid var(--border-soft); }
.moderation-zeile:last-child { border-bottom:none; }