/* ==========================================================================
   Seite „Übersicht“ · Modul-Code CHT · id „chat“ · Route #chat
   Skript: public/js/pages/chat.js

   Der Regieplatz während des Streams (Richtung A, Dashboard-Vorschau):
   Zähler-Leiste · Live-Chat (7) neben Pegel und Bot-Status (5) · Auswertung.
   Im Live-Chat: Vertrauen je Zeile, Werkzeugleiste zum Moderieren, Marken für Moderiertes;
   die Moderationsdialoge hängen an .page-chat-dialog.
   Jeder Selektor beginnt mit .page-chat; Farben nur über Tokens.
   ========================================================================== */

/* ---------- Live-Chat ---------------------------------------------------- */

/* Kopf: Titel, Filter-Tabs direkt dahinter, Pufferangabe rechts (wie A) */
.page-chat .ov-chat .pnl__actions { flex: 1 1 auto; justify-content: space-between; margin-left: 4px; }
.page-chat .ov-chat__buf { font-size: 10px; }

/* Breite Ansicht: der Chat füllt die Höhe der rechten Spalte, Eingabe bleibt unten */
@media (min-width: 1181px) {
  .page-chat .ov-main { align-items: stretch; }
  .page-chat .ov-chat .pnl__b { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  .page-chat .ov-chat .feed { flex: 1 1 auto; min-height: clamp(360px, 62vh, 640px); }
  .page-chat .ov-chat .feed__scroll { position: absolute; inset: 0; height: auto; }
}

/* Zeilen: die Werkzeuge liegen beim Überfahren über dem Zeilenende – kein reservierter Rand je Zeile */
.page-chat .msg { padding-right: 6px; }
.page-chat .msg:not(.msg--bot):hover { background-color: var(--hover); }
.page-chat .msg.is-picked { outline: 1px solid var(--line-2); outline-offset: -1px; }
.page-chat .msg__tag { padding: 2px 4px; font-size: 9.5px; letter-spacing: 0.06em; vertical-align: 1px; }
.page-chat .msg--bot .msg__name { color: var(--pgm-ink); }
.page-chat .msg__at { color: var(--ink); font-weight: 500; }
.page-chat .msg__at.is-me { color: var(--amber); }
.page-chat .msg--hit .msg__at { color: inherit; font-weight: inherit; }

/* Zeilen, die den eigenen Kanal oder den Bot erwähnen */
.page-chat .msg.is-mention { background: var(--warn-wash); box-shadow: inset 2px 0 0 var(--amber); }
.page-chat .msg.is-mention .msg__time { padding-left: 8px; }

/* Vertrauen des Absenders (A: „V61“ hinter dem Namen, niedrig in Bernstein) */
.page-chat .msg__trust {
  margin: 0 0 0 6px;
  font: 500 10px/1 var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  text-decoration: none;
  vertical-align: 1px;
  cursor: help;
}
.page-chat .msg__trust.is-low { color: var(--amber); }

/* Aus dem Dashboard moderiert: Text durchgestrichen und ausgegraut, Marke mit der Aktion */
.page-chat .msg.is-removed .msg__name { opacity: 0.6; }
.page-chat .msg.is-removed .msg__text {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--red) 80%, transparent);
}
.page-chat .msg.is-removed .msg__at { color: inherit; font-weight: inherit; }
.page-chat .msg__mod {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 5px;
  border: 1px solid var(--danger-line);
  border-radius: var(--r1);
  font: 500 10.5px/1 var(--f-mono);
  color: var(--red);
  white-space: nowrap;
  vertical-align: 1px;
}
.page-chat .msg__mod.is-lifted { border-color: var(--line-2); color: var(--ink-3); }

/* Werkzeugleiste: Löschen · Timeout (10 min | eigene Dauer) · Bann · @ erwähnen */
.page-chat .msg__tools {
  position: absolute;
  top: -1px;
  right: 4px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-2);
  border-radius: var(--r1);
  background: var(--raised);
  opacity: 0;
  transition: opacity var(--dur-1);
}
.page-chat .msg:hover .msg__tools,
.page-chat .msg.is-picked .msg__tools,
.page-chat .msg__tools:focus-within,
.page-chat .msg__tools[aria-busy="true"] { opacity: 1; }

.page-chat .msg__act {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 4px;
  border: 1px solid var(--line-2);
  border-bottom-color: var(--key-lo);
  border-radius: var(--r1);
  background: var(--key);
  box-shadow: var(--key-inset);
  font: 500 12px/1 var(--f-mono);
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1);
}
.page-chat .msg__act .icon { width: 14px; height: 14px; }
.page-chat .msg__act:hover:not(:disabled) { color: var(--ink); border-color: var(--line-3); }
.page-chat .msg__act--danger:hover:not(:disabled) { color: var(--red); border-color: var(--danger-line); }
.page-chat .msg__act:focus-visible { outline-offset: 1px; }
.page-chat .msg__act:disabled { cursor: not-allowed; opacity: 0.45; box-shadow: none; }
.page-chat .msg__tools[aria-busy="true"] .msg__act:disabled { cursor: progress; }
/* Geteilte Taste: links 10 min, rechts der Pfeil zum Dialog mit eigener Dauer */
.page-chat .msg__act--split { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.page-chat .msg__act--more { min-width: 16px; margin-left: -2px; padding: 0; border-left-color: var(--key-lo); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.page-chat .msg__act--more .icon { width: 11px; height: 11px; }
.page-chat .msg__act--text { padding: 0 7px; font: 500 11.5px/1 var(--f-sans); }
.page-chat .msg__act--mention:not(:first-child) { margin-left: 4px; }

/* Tastaturhilfe, solange der Verlauf den Fokus hat */
.page-chat .ov-chat__keys {
  position: absolute;
  top: 8px;
  right: 12px;
  display: none;
  padding: 4px 7px;
  border: 1px solid var(--line-2);
  border-radius: var(--r1);
  background: var(--float);
  font: 400 11px/1 var(--f-mono);
  color: var(--ink-2);
  pointer-events: none;
}
.page-chat .feed__scroll:focus-visible ~ .ov-chat__keys { display: block; }

/* Leerer Tab („keine Befehle im Verlauf“) */
.page-chat .ov-chat__none {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--ink-3);
  font: var(--t-small);
  text-align: center;
  pointer-events: none;
}

/* Als Bot schreiben: Zeichenzähler im Feld */
.page-chat .say { align-items: center; }
.page-chat .say__field { position: relative; flex: 1 1 auto; min-width: 0; }
.page-chat .say__field .input { padding-right: 64px; }
.page-chat .say__count {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font: 400 11px/1 var(--f-mono);
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ---------- Pegel: Stimmung ------------------------------------------------- */

.page-chat .ov-mood { padding: 14px 14px 14px; }
.page-chat .ov-mood--locked { padding-bottom: 14px; }
.page-chat .ov-mood__words { display: grid; gap: 4px; align-self: end; padding-bottom: 3px; }
.page-chat .ov-mood__trend { display: inline-flex; margin-right: 6px; color: var(--ink-2); vertical-align: -2px; }
.page-chat .ov-mood__trend .icon { width: 13px; height: 13px; }

/* Zonen wie im Mood-Modul: je 20 Punkte = 8 Segmente, durch eine breitere Fuge getrennt */
.page-chat .ov-mood .meter i:nth-child(8n):not(:last-child) { margin-right: 3px; }
.page-chat .ov-mood__zones {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 7px;
  font: 400 10.5px/1.2 var(--f-mono);
  color: var(--ink-3);
  text-align: center;
}
.page-chat .ov-mood__zones span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--dur-2); }
.page-chat .ov-mood__zones .is-on { color: var(--ink); }

.page-chat .ov-hist__wrap { margin-top: 16px; }
.page-chat .ov-hist__plot { position: relative; }
.page-chat .ov-hist { display: block; width: 100%; height: 64px; overflow: visible; }
.page-chat .ov-hist__dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--pgm-ink);
  box-shadow: 0 0 0 2px var(--panel);
  pointer-events: none;
}
.page-chat .ov-hist__mid { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.page-chat .ov-hist__area { fill: color-mix(in srgb, var(--pgm) 10%, transparent); stroke: none; }
.page-chat .ov-hist__line { fill: none; stroke: var(--pgm); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.page-chat .ov-hist__x { display: flex; justify-content: space-between; margin-top: 6px; font: 400 10.5px/1 var(--f-mono); color: var(--ink-3); }
.page-chat .ov-hist__note { margin-top: 8px; font: var(--t-small); color: var(--ink-3); }

/* ---------- Pegel: Messbrücke --------------------------------------------- */

.page-chat .ov-bridge { padding: 12px 14px 16px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--void) 35%, var(--panel)); }
.page-chat .ov-mood--locked + .ov-bridge { border-top-color: var(--line); }
.page-chat .ov-bridge__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.page-chat .ov-bridge__win { font-size: 10px; text-align: right; }
.page-chat .ov-bridge__strips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 6px; margin-top: 12px; }

.page-chat .ov-strip { display: flex; flex-direction: column; align-items: center; min-width: 0; cursor: default; }
.page-chat .ov-strip__max { font: 400 10px/1 var(--f-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.page-chat .ov-strip .meter--ladder { width: 22px; height: 116px; gap: 2px; margin-top: 6px; }
.page-chat .ov-strip__v { margin-top: 10px; font: 500 17px/1 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.page-chat .ov-strip__u { margin-top: 4px; font: 400 10px/1.2 var(--f-mono); color: var(--ink-3); text-align: center; }
.page-chat .ov-strip__l { margin-top: 8px; font-size: 10px; letter-spacing: 0.06em; }

/* Filter-Treffer als Achtungs-Pegel (A: Leiter in Bernstein) */
.page-chat .ov-strip--hits .meter i.on { background: var(--amber); }
.page-chat .ov-strip--hits .meter i.pk { background: color-mix(in srgb, var(--amber) 55%, var(--chart-track)); }

/* ---------- Bot-Status ----------------------------------------------------- */

.page-chat .ov-bot__sum.is-ok { color: var(--sig); }
.page-chat .ov-bot .kv__empty { border-bottom: 1px solid var(--line); }

/* ---------- Auswertung des Verlaufs ----------------------------------------- */

.page-chat .ov-digest .pnl { min-height: 100%; }
.page-chat .ov-digest .list__row { grid-template-columns: 44px minmax(0, 1fr) auto; }
.page-chat .ov-digest .list__x b { font-weight: 500; }
.page-chat .ov-digest .code { white-space: normal; overflow-wrap: anywhere; }
.page-chat .ov-none { padding: 14px; color: var(--ink-3); font: var(--t-small); }

/* ---------- Schmal ------------------------------------------------------------ */

/* Mittlere Breite: Chat oben, darunter Stimmung und Aktivität nebeneinander statt weit auseinandergezogen */
@media (min-width: 721px) and (max-width: 1180px) {
  .page-chat .ov-levels .pnl__b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-chat .ov-levels .ov-bridge { border-top: 0; border-left: 1px solid var(--line); }
}

@media (max-width: 1024px) {
  .page-chat .ov-digest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-chat .ov-digest > .pnl:last-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .page-chat .ov-digest { grid-template-columns: minmax(0, 1fr); }
  .page-chat .ov-chat__buf { display: none; }
  .page-chat .ov-chat .tabs button { padding: 0 8px; }
  .page-chat .msg { grid-template-columns: 56px minmax(0, 1fr); column-gap: 6px; }
  .page-chat .ov-strip .meter--ladder { height: 96px; }
  /* Eingabe über die volle Breite; Kanalwahl und Senden darunter (nur mit mehreren Kanälen) */
  .page-chat .say:has(.select:not([hidden])) { flex-wrap: wrap; }
  .page-chat .say:has(.select:not([hidden])) .say__field { flex: 1 1 100%; order: -1; }
  .page-chat .say .select { flex: 1 1 auto; max-width: none; }
}

/* Touch-Geräte: kein Hover – erst das Antippen einer Zeile zeigt ihre Werkzeuge (sonst lägen unsichtbare
   Tasten über dem Text). Sie stehen dann als eigene Reihe unter der Nachricht, mit größeren Zielen. */
@media (hover: none) {
  .page-chat .msg__tools { display: none; }
  .page-chat .msg.is-picked .msg__tools {
    position: static;
    grid-column: 2;
    justify-self: start;
    display: flex;
    margin: 4px 0 2px;
    opacity: 1;
  }
  .page-chat .msg__act { min-width: 34px; height: 32px; }
  .page-chat .msg__act--more { min-width: 24px; }
}

/* ---------- Dialoge: Timeout mit eigener Dauer, Bann --------------------------- */

.page-chat-dialog .ov-mod__quote {
  padding: 8px 10px;
  border-left: 2px solid var(--line-3);
  background: var(--void);
  color: var(--ink-2);
  font: var(--t-small);
  overflow-wrap: anywhere;
}
.page-chat-dialog .ov-mod__quote b { font-weight: 600; color: var(--ink); }
.page-chat-dialog .ov-mod__chan { margin-right: 6px; font: 500 10.5px/1 var(--f-mono); color: var(--ink-3); }
.page-chat-dialog .ov-mod__presets { gap: 4px; margin-top: 2px; }
.page-chat-dialog .ov-mod__presets .chip { min-width: 44px; height: 24px; justify-content: center; }
.page-chat-dialog .ov-mod__presets .chip[aria-pressed="true"] { border-color: var(--pgm-line); background: var(--pgm-wash); color: var(--ink); }