/* app-meeting-gitter.css — WELLE8 M4 (28.09.2026): das Rechte-Gitter eines
   Meetings, dazu die ruhige Personenliste (Handlungs-Symbole erst im Hover,
   Nachtrag Flow 28.09.2026) und die Teilnehmer-Chips beim Anlegen (M1).
   Eigene Datei, wie jede neue Stildatei (G7) — die Ladezeile in seite.html
   setzt der Hauptagent (Naht, siehe Abnahme-Protokoll: U8 besitzt die Seite). */

/* --- Ruhige Personenliste: Symbole erst bei Hover oder Fokus der Zeile --- */
#chatEinstInhalt .rzAktionen {
  display: inline-flex; gap: 4px; margin-left: auto;
  opacity: 0; transition: opacity .12s ease;
}
#chatEinstInhalt .rosterZeile:hover .rzAktionen,
#chatEinstInhalt .rosterZeile:focus-within .rzAktionen,
#chatEinstInhalt .rzAktionen:focus-within {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  #chatEinstInhalt .rzAktionen { transition: none; }
}
/* Tippziele mindestens 44px unter dem kleinsten Breakpoint (U-d). */
@media (max-width: 480px) {
  #chatEinstInhalt .rzAktionen { opacity: 1; }
  #chatEinstInhalt .rzAktionen .zAktion { min-width: 44px; min-height: 44px; }
}

.gitterKnopf { margin-left: auto; }

/* A14 (Runde 2): der Agenten-Satz ist vom Fließtext zum Zeilen-Kopf mit
   Fragezeichen-Hover geworden (app-sitzungen-setup.js); app-eingabe.css legt
   `.agentSatz` als kursiven Absatz an, hier die Zeilen-Form dazu. */
.agentSatz { display: flex; align-items: center; gap: 6px; font-style: normal; }

/* --- Kopf des Gitters: Zurück, Titel, Fragezeichen-Hinweis (U-a) --------- */
.gitterKopf { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; }
.gitterKopf h3 { font: 700 15px var(--schrift); color: var(--text); margin: 0; flex: 1; }
.frageKnopf { color: var(--dim); }

/* --- Die Tabelle selbst: CSS-Grid, Personen als Spalten ------------------ */
.gitterTabelle {
  display: grid;
  grid-template-columns: minmax(96px, auto) repeat(var(--gitter-spalten, 1), minmax(64px, 1fr));
  gap: 2px;
  overflow-x: auto;
  margin: 8px 0 16px;
}
.gitterEck { background: transparent; }
.gitterPersonKopf {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 2px; font: 600 11px var(--schrift); color: var(--dim);
  text-align: center;
}
.gitterPersonName { max-width: 72px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.gitterZeilenName {
  display: flex; align-items: center;
  font: 600 12px var(--schrift); color: var(--text);
  padding: 6px 8px 6px 0; border-top: 1px solid var(--linie);
}
.gitterZelle {
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--linie); padding: 4px;
}

/* --- Brain-Bereiche der Agentin: Symbol-Schalter, kein natives Feld (A6) - */
.gitterBereicheListe { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.gitterBereichZeile {
  display: flex; align-items: center; gap: 8px; font: 400 13px var(--schrift);
  color: var(--text);
}

/* --- Rollen-Kacheln (Symbol-Liste 17, Runde 4) --------------------------- */
.rollenKacheln { display: inline-flex; gap: 4px; }
.rollenKachel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--linie); border-radius: var(--rundKlein);
  background: var(--papier); color: var(--dim); cursor: pointer;
}
.rollenKachel.aktiv { background: var(--gold); border-color: var(--gold); color: #fff; }
.rollenKachel:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 480px) {
  .rollenKachel { width: 44px; height: 44px; }
}

/* --- Teilnehmer-Chips beim Anlegen (M1) ---------------------------------- */
.setupTeilnehmer { margin: 10px 0; }
.setupTeilnehmerChips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.setupChip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--leder); border: 1px solid var(--linie); border-radius: 999px;
  padding: 3px 4px 3px 10px; font: 500 13px var(--schrift); color: var(--text);
}
/* Vertrag Runde 2 (H8b, Roster-Status): eingeladene, noch nicht aktive
   Konten blass, mit Uhr-Symbol statt Wort (Symbol-Liste 16, Runde 4) — Chip
   und Trefferzeile der Suche tragen dieselbe Klasse. */
.setupChipEingeladen { opacity: .6; }
.setupTeilnehmerSuchFeld {
  width: 100%; box-sizing: border-box; font: 400 13px var(--schrift);
  border: 1px solid var(--linie); border-radius: var(--rundKlein); padding: 7px 10px;
}

/* Tippziele mindestens 44px unter dem kleinsten Breakpoint (U-d), an den
   Stellen, an denen 390/768/1280px Klicks von Menschen sind, nicht Mäusen. */
@media (max-width: 480px) {
  .setupChip .zAktion, .gitterZelle .uKnopf, .gitterBereichZeile .uKnopf {
    min-width: 44px; min-height: 44px;
  }
}