/*
  workspace-bento-teamchat-liste.css — Team-Chat als schlichte Liste im neuen Menü (Logik: workspace-bento-teamchat-liste.js).
  Kurzbeschreibung (für Laien): Ralph, 02.11.2026 — „Seiten ohne Bento“. Die Liste links nutzt die gemeinsamen Klassen aus
  workspace-bento-schlicht.css; hier steht nur, wie der geöffnete Chat rechts aussieht: schlichter Kopf (Name, Beschreibung)
  statt der farbigen Kopfkarte, Verlauf und Mitglieder ohne schwebende Kachel. Gilt nur mit html.wb-menue-modus.
  Farben nur aus marke.css bzw. den Bento-Variablen (hell/dunkel).
*/
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl { padding: 0; }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl .wss-liste { flex: 1 1 auto; }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl .wss-detail { overflow: hidden; }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-neu { overflow-y: auto; }

/* Chat rechts: Kopf, Verlauf mit Eingabe, Mitglieder daneben */
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat { flex: 1 1 auto; min-height: 0; display: flex; }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat > .tc-raum { flex: 1 1 auto; min-width: 0; min-height: 0; gap: 0 var(--marke-sp-4);
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat > .tc-raum.tcl-dm { grid-template-columns: minmax(0, 1fr); }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat .tc-kopf { grid-column: 1 / -1; padding: 0 0 var(--marke-sp-3); gap: 2px; border-radius: 0;
  background: none; color: var(--wb-text); box-shadow: none; transform: none; border-bottom: 1px solid var(--wb-linie); margin-bottom: var(--marke-sp-3); }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat .tc-kopf:hover { box-shadow: none; transform: none; }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat .tc-kopf h2 { font: 600 16px var(--marke-schrift); letter-spacing: 0; }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat .tc-kopf p { font: 400 12px var(--marke-schrift); color: var(--wb-leise); }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat .tc-kopf p:empty { display: none; }
/* Kopf: Name links, Mitglieder als Kürzel-Kreise und „+“ rechts; Mitglieder-Spalte entfällt (Ralph 03.11.2026) */
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl .wss-detail { padding-top: 0; box-sizing: border-box; }   /* sonst schneidet die Liste den Kopf oben ab */
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat .tc-kopf { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--marke-sp-4); }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat .tc-kopf-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat .tc-kopf-r { flex: none; display: flex; align-items: center; gap: var(--marke-sp-2); }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat .tc-kreise { display: flex; margin: 0; gap: 4px; }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat .tc-kopf .tc-kreis { background: color-mix(in srgb, var(--wbm-f, var(--marke-akzent)) 12%, transparent); color: var(--wbm-f, var(--marke-akzent)); }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat .tc-plus svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat .tc-mitglieder { display: none; }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tc-zitat.leise { font-style: italic; }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat .tc-karte { background: transparent; box-shadow: none; border-radius: 0; padding: 0; }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat .tc-gespraech { grid-column: 1; grid-row: 2; }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat .tc-mitglieder:hover, :root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat .tc-gespraech:hover { box-shadow: none; }
@media (max-width: 900px) {
  :root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat > .tc-raum { grid-template-columns: minmax(0, 1fr); }
  :root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-chat .tc-mitglieder { display: none; }
}

/* Umschalter „Team | Postfach“ überflüssig: Nachrichten hat im Menü eine eigene Seite */
:root.wb-menue-modus:has(#bsBereich[data-bereich="teamchat"]) #wbNachrTabs { display: none; }

/* Menü-Karte (Rechtsklick auf einen Raum): Auswahl-Pillen wie im Raum; das Menü hängt am Seitenende, nicht im Bereich */
.tc-menue .tc-wahl { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.tc-menue .tc-wahl-titel { font-size: 12px; font-weight: 500; color: var(--marke-text-2); }
.tc-menue .tc-pillen { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-menue .tc-pille { height: 28px; padding: 0 12px; border: 1px solid var(--marke-linie); border-radius: var(--marke-r-pill); background: var(--marke-flaeche);
  color: var(--marke-text); font: 600 12px var(--marke-schrift); cursor: pointer; }
.tc-menue .tc-pille.an { background: var(--marke-nav-blau); border-color: var(--marke-nav-blau); color: #fff; }
.tc-menue .tc-pille:disabled { cursor: default; opacity: .8; }
.tc-menue .bs-knopf.tc-haupt { background: var(--marke-akzent); }
.tc-menue .tc-fehler { margin: 0; font-size: 13px; }
:root.wb-menue-modus #bsBereich[data-bereich="teamchat"] .tcl-dm .tc-kopf { flex-direction: column; align-items: flex-start; justify-content: flex-start; }

/* Mitte ohne Auswahl: Übersicht mit Zähler-Kacheln (Ralph 08.11.2026; die Liste steht rechts im Baustein BentoSpalte) */
.tcl .tcl-ue { display: flex; flex-direction: column; gap: 12px; padding: 0 0 var(--marke-sp-3); }
.tcl .tcl-ue-t { margin: 0; font: 700 20px var(--marke-schrift); color: var(--wb-text); }
.tcl .tcl-ue-u { margin: 12px 0 0; font: 700 13px var(--marke-schrift); color: var(--wb-text); }
.tcl .tcl-kz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tcl .tcl-kzk { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--wb-linie); border-radius: var(--marke-r-m, 9px); min-width: 0; }
.tcl .tcl-kzk b { font: 700 24px var(--marke-schrift); color: var(--wb-text); font-variant-numeric: tabular-nums; }
.tcl .tcl-kzk b.rot { color: var(--marke-gefahr); }
.tcl .tcl-kzk span { font: 400 12px var(--marke-schrift); color: var(--wb-leise); }
.tcl .tcl-stand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: 12px; }
.tcl .tcl-chip { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 6px 10px; border-radius: var(--marke-r-s); background: var(--wb-weich); white-space: nowrap; }
.tcl .tcl-chip b { font: 600 14px var(--marke-schrift); color: var(--wb-text); }
.tcl .tcl-chip small { font: 400 12px var(--marke-schrift); color: var(--wb-leise); overflow: hidden; text-overflow: ellipsis; }
.tcl .tcl-ue-leer { margin: 8px 0 0; font: 400 13px var(--marke-schrift); color: var(--wb-leise); }
:root.wb-menue-modus.wb-menue-flaeche #bsBereich[data-bereich="teamchat"] .wss.tcl { margin-top: 0; }   /* die Spalte hat ihr ＋ selbst; die alte Hochschiebung für das Eck-＋ entfällt */