/* ══ Gäste: Unterhaltungen mit Gästen (Gäste-Chat, Schritt D, 25.10.2026) ═══
   Liste links, Unterhaltung rechts (Kopf mit Kontext, Verlauf, Antwortfeld).
   Nebeneinander ab 1100 px, darunter nacheinander: Was schmal zu sehen ist,
   sagt data-ansicht am Raster (gesetzt von gaeste-chat.js), die Breite
   entscheidet allein die Media Query. Geladen nach styles.css und brett.css,
   vor den Farbwelten; nur Tokens, keine Farbwerte. */

/* Eigene display-Regeln schlagen das [hidden] des Browsers; hier nicht. */
.gc [hidden] { display: none !important; }

/* ── Raster: schmal nacheinander, breit nebeneinander ── */
.gc-raster { display: block; }
.gc-raster[data-ansicht="liste"] .gc-gespraech { display: none; }
.gc-raster[data-ansicht="verlauf"] .gc-liste { display: none; }

@media (min-width: 1100px) {
  .gc-raster {
    display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: var(--sp-4); align-items: stretch;
  }
  .gc-raster[data-ansicht] .gc-liste,
  .gc-raster[data-ansicht] .gc-gespraech { display: flex; }
  .gc-zurueck { display: none; }
  /* Feste Höhe: der Verlauf rollt in sich, das Antwortfeld bleibt unten stehen. */
  .gc-liste, .gc-gespraech { height: calc(100vh - var(--topbar-h) - var(--subnav-h) - 140px); min-height: 480px; }
  .gc-liste { overflow-y: auto; }
  .gc-verlauf { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}

.gc-stand { margin-left: var(--sp-1); }
.gc-stand.gc-alt { color: var(--warn-ink); font-weight: var(--fw-medium); }
.gc-fehler { margin-top: 0; display: flex; flex-direction: column; gap: 2px; }

/* ── Liste ── */
.gc-liste {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-1);
}
.gc-liste > .ck-leer { padding: var(--sp-3); }
.gc-eintrag {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: var(--sp-2) var(--sp-3); border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.gc-eintrag:hover { background: var(--bg-card2); }
.gc-eintrag:focus-visible { outline: none; box-shadow: var(--ring); }
.gc-eintrag.gc-aktiv { background: var(--brand-soft); border-color: var(--brand-line); }
.gc-e-kopf { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.gc-e-name {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.gc-offen .gc-e-name { font-weight: var(--fw-bold); }
.gc-e-kopf .ck-marke { margin-left: 0; flex: none; }
/* Zahl unbeantworteter Gastnachrichten wie ein Mitteilungs-Badge (rot aus
   .tab-badge, styles.css), ohne dessen Sprung: Die Liste zeichnet jede
   Minute neu. Kennt der Server die Zahl nicht sicher, ein roter Punkt. */
.gc-e-kopf .gc-e-zahl { flex: none; margin-left: 0; animation: none; }
.gc-e-punkt { flex: none; width: 10px; height: 10px; border-radius: var(--r-full); background: var(--crit); }
.gc-e-unter { font-size: var(--fs-xs); color: var(--text-muted); }
.gc-e-hinweis { font-size: var(--fs-xs); color: var(--warn-ink); }
.gc-rot { color: var(--crit-ink); }

/* ── Unterhaltung ── */
.gc-gespraech {
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4);
}
.gc-zurueck { align-self: flex-start; }

/* Kopf: wer, wo, wann, Kanal, dazu die offenen Aktionen und der Stand als Text */
.gc-kopf { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.gc-kopf:empty { display: none; }
.gc-kopf-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }
.gc-name { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--text); }
.gc-kopf-info { font-size: var(--fs-sm); color: var(--text-muted); }
.gc-kopf .ck-marke { margin-left: 0; }
.gc-ki:empty { display: none; }
.gc-kontext { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); color: var(--text-muted); }
.gc-kontext:empty { display: none; }
.gc-link { color: var(--brand); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; }
.gc-link::before { content: '→ '; }
.gc-link:hover { text-decoration: underline; }
.gc-kopf .ck-hinweis { margin-top: 0; }

/* Verlauf: Gast links, wir rechts; Vorlagen und Automatik rechts, aber leiser (unten) */
.gc-verlauf { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-1) 0; }
.gc-platzhalter { align-self: center; margin: auto 0; }
.gc-n { display: flex; flex-direction: column; gap: 2px; max-width: min(78%, 680px); }
.gc-n-gast { align-self: flex-start; }
.gc-n-wir { align-self: flex-end; align-items: flex-end; }
.gc-blase {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  font-size: var(--fs-base); line-height: var(--lh-base); color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.gc-n-gast .gc-blase { background: var(--bg-card2); border: 1px solid var(--border); border-bottom-left-radius: var(--r-xs); }
.gc-n-wir .gc-blase { background: var(--brand-soft); border: 1px solid var(--brand-line); border-bottom-right-radius: var(--r-xs); }
.gc-meta { font-size: var(--fs-2xs); color: var(--text-subtle); }

/* Systemblasen (gaeste-chat-anzeige.js, 26.10.2026): Vincent will sehen, was
   Smoobu-Vorlagen und Dashboard-Mails schon an den Gast geschickt haben. Sie
   stehen auf unserer Seite, aber leiser als eine persönliche Antwort:
   gedämpfte Fläche statt Markenfarbe, gestrichelte Kante, kleinere Schrift,
   die Herkunft darüber. Lange Texte zeigen sieben Zeilen, der Knopf darunter
   den Rest; die Höhe ist ein Vielfaches der Zeilenhöhe, so endet der
   Ausschnitt an einer Zeilengrenze. Der Text selbst steht in --text: Leise
   Schrift auf --bg-card2 hielte in Bühne hell nur 4,27:1. */
.gc-n-system .gc-blase {
  font-size: var(--fs-sm); color: var(--text);
  background: var(--bg-card2); border: 1px dashed var(--border-strong); border-bottom-right-radius: var(--r-xs);
}
.gc-herkunft { font-weight: var(--fw-medium); color: var(--text-muted); }
.gc-gekuerzt:not(.gc-ganz) > .gc-blase-text { max-height: calc(var(--lh-base) * 7em); overflow: hidden; }
.gc-diagnose {
  align-self: center; max-width: 52ch; text-align: center;
  font-size: var(--fs-xs); color: var(--text-subtle);
}
.gc-vorlage {
  padding: 0; border: 0; background: none; font: inherit; color: var(--text-subtle);
  text-decoration: underline dotted; cursor: pointer;
}
.gc-vorlage:hover { color: var(--text); }
.gc-vorlage:disabled { cursor: default; opacity: .6; }
.gc-trenner {
  align-self: center; font-size: var(--fs-2xs); color: var(--text-subtle);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
}

/* Antwortfeld: steht fest unter dem Verlauf, wird nie neu gezeichnet */
.gc-antwort { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.gc-antwort .ck-hinweis { margin-top: 0; }
.gc-text { width: 100%; min-height: 96px; resize: vertical; font-size: var(--fs-base); line-height: var(--lh-base); }
.gc-text:read-only { background: var(--bg-card2); color: var(--text-muted); }
.gc-gesperrt {
  margin: 0; padding: var(--sp-3); border-radius: var(--r-sm);
  background: var(--bg-card2); color: var(--text-muted); font-size: var(--fs-sm);
}
.gc-leiste { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.gc-status { font-size: var(--fs-sm); color: var(--text-muted); }
.gc-status-laeuft { color: var(--warn-ink); font-weight: var(--fw-medium); }
.gc-status-ok { color: var(--good-ink); }
.gc-status-fehler { color: var(--crit-ink); }
.gc-konflikt {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  background: var(--warn-soft); color: var(--warn-ink); font-size: var(--fs-sm);
}

/* ── KI-Entwurf, Schalter „ohne KI“, Einstellungen (Schritt F, gaeste-wissen.js) ── */
.gc-ki-marke { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); }
.gc-ki-name { font-weight: var(--fw-medium); color: var(--brand); }
.gc-ki-sperre, .gc-ki-warn { color: var(--warn-ink); }
.gc-ki-weg { padding: 0 var(--sp-2); }
.gc-ki-schalter { padding: 0 var(--sp-2); font-size: var(--fs-xs); }
.gc-ki-aus { color: var(--warn-ink); background: var(--warn-soft); }
.gc-einstellungen { margin-top: var(--sp-4); }
.gc-w > summary { cursor: pointer; list-style: none; font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--text); }
.gc-w > summary::-webkit-details-marker { display: none; }
.gc-w > summary::before { content: '▸ '; }
.gc-w[open] > summary::before { content: '▾ '; }
.gc-w-inhalt { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); }
.gc-w-hinweis { font-size: var(--fs-sm); color: var(--text-muted); }
.gc-w-titel { margin: var(--sp-3) 0 0; font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--text); }
.gc-w-einheit {
  margin: var(--sp-2) 0 0; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
}
.gc-w-eintrag {
  display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3);
  background: var(--bg-card2); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.gc-w-eintrag-kopf { display: flex; align-items: center; gap: var(--sp-2); }
.gc-w-eintrag-kopf .ck-marke { margin-left: 0; }
.gc-w-thema { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); }
.gc-w-feld { width: 100%; resize: vertical; font-size: var(--fs-sm); line-height: var(--lh-base); }
.gc-w-text { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-base); white-space: pre-wrap; overflow-wrap: anywhere; }
.gc-w-leiste, .gc-w-neu, .gc-w-uebernahme { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.gc-w-neu .gc-w-feld { flex: 1 1 320px; }
.gc-w-uebernahme { margin-top: var(--sp-1); }
.gc-w-auswahl { font-size: var(--fs-sm); }

/* ── Automatik (Schritt G, gaeste-wissen.js): geplante Antwort über dem Feld, Einstellungen ── */
.gc-auto-marke {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--warn-soft);
}
.gc-auto-marke .gc-ki-name { color: var(--warn-ink); }
.gc-w-auto { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); }
.gc-w-auftrag { font-size: var(--fs-sm); color: var(--text-muted); }
.gc-w-grund { flex: 1 1 240px; width: auto; }

/* Farbwelt „Gruppen“: farbiges Kästchen hinter dem Symbol wie bei den übrigen Bereichen (farbwelten-rahmen.css). */
:root[data-skin="gruppen"] .rail-area[data-area="gaeste"] { --q: var(--viz-5); }

/* ══ iPhone (Schritt E, handy-gaeste.js): Liste wie in Mail, Unterhaltung als Blatt ══
   Jede Regel ab hier hängt an html.hh, am Mac greift keine (handy-huelle.test.js).
   Das Blatt ist ein .modal: Griff, Wegziehen und die Lage bei offener
   Tastatur (oben, höchstens --hh-vv hoch) kommen aus handy-huelle.css,
   Schritt 5. Der Verlauf rollt in sich, das Antwortfeld steht als letztes
   Element unten im Blatt, bei offener Tastatur also direkt über ihr. */

/* Kopf: Den großen Titel „Gäste“ setzt die Hülle, darunter bleibt der Stand. */
html.hh .gc > .section-title .gc-titel,
html.hh .gc > .section-title svg,
html.hh .gc > .section-title [data-lucide] { display: none; }
html.hh .gc > .section-title { padding-bottom: 0; border-bottom: 0; }
html.hh .gc-stand { margin-left: 0; font-size: var(--fs-md); }
/* „Ganzen Text zeigen“ ist am iPhone der einzige Weg zum Rest einer Vorlage
   und erbt sonst die 11-px-Fußzeile: Trefferfläche 44 pt wie sonst in der Hülle. */
html.hh .gc-mehr { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-2); font-size: var(--fs-sm); }

/* Liste: Sie bleibt unter dem Blatt stehen, Zeilen wie in Mail. Der Abschnitt
   ist keine Karte (farbwelten-rahmen.css), die Liste ist die Karte, wie bei
   den Bereichslisten; ohne #tab-gaeste verlöre die Regel gegen die der Farbwelten. */
html.hh #tab-gaeste > section.gc.ck-bereich { padding: 0; background: none; box-shadow: none; border-radius: 0; }
html.hh .gc-raster[data-ansicht] .gc-liste { display: flex; }
html.hh .gc-liste { gap: 0; padding: 0; border: 0; overflow: hidden; }
html.hh .gc-eintrag {
  position: relative; min-height: 60px; gap: 3px;
  padding: var(--sp-3) var(--sp-4); border: 0; border-radius: 0;
  -webkit-touch-callout: none; user-select: none;
}
html.hh .gc-eintrag + .gc-eintrag::before {
  content: ''; position: absolute; top: 0; left: var(--sp-4); right: 0;
  height: 1px; background: var(--border);
}
/* Keine Auswahl und kein klebendes Hover: Am iPhone steht nichts daneben offen. */
html.hh .gc-eintrag:hover, html.hh .gc-eintrag.gc-aktiv { background: none; }
html.hh .gc-eintrag:active { background: var(--bg-card3); transition: none; }
html.hh .gc-e-name { font-size: var(--fs-lg); }
html.hh .gc-e-unter, html.hh .gc-e-hinweis { font-size: var(--fs-sm); }

/* Blatt: feste Höhe, damit der Verlauf in sich rollt und das Feld unten bleibt. */
html.hh .modal.gc-blatt-modal { height: 92dvh; overflow: hidden; gap: var(--sp-2); }
html.hh .gc-blatt-modal .modal-header { flex: none; gap: var(--sp-2); min-height: 44px; }
html.hh .gc-blatt-modal .modal-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.hh .gc-blatt-modal .modal-close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: calc(-1 * var(--sp-2)); }
html.hh .gc-blatt-modal .gc-gespraech {
  flex: 1 1 auto; min-height: 0; gap: var(--sp-2);
  padding: 0; border: 0; border-radius: 0; background: none;
}
/* Den Namen trägt der Kopf des Blatts, Schließen ersetzt „‹ Unterhaltungen“. */
html.hh .gc-blatt-modal .gc-zurueck,
html.hh .gc-blatt-modal .gc-name { display: none; }
html.hh .gc-blatt-modal .gc-kopf { flex: none; max-height: 28dvh; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--sp-2); }
html.hh .gc-blatt-modal .gc-verlauf { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
html.hh .gc-blatt-modal .gc-n { max-width: 86%; }
html.hh .gc-blatt-modal .gc-antwort { flex: none; padding-top: var(--sp-2); }
html.hh .gc-blatt-modal .gc-text { height: 96px; min-height: 44px; max-height: 30dvh; resize: none; font-size: var(--fs-lg); }

/* Bei offener Tastatur zählt nur das Gespräch: Kopf eingeklappt, unten kein
   Platz für den Home-Balken, die Tastatur liegt darüber. */
html.hh.hh-tastatur .gc-blatt-modal .gc-kopf { display: none; }
html.hh.hh-tastatur .modal.gc-blatt-modal { padding-bottom: var(--sp-2); }
/* Einstellungen am iPhone nur zum Lesen (gaeste-wissen.js: „Bearbeiten am Mac“). */
html.hh .gc-einstellungen .gc-w-eintrag { padding: var(--sp-2); }
html.hh .gc-w-mac { color: var(--text); font-weight: var(--fw-semi); }