/* ==========================================================================
   Seite „Quotes“ · Modul-Code QTE · id „quotes“ · Route #quotes
   Skript: public/js/pages/quotes.js

   Archiv als nummerierte Liste (Nummer wie ein Timecode links, Zitat in
   Lesegröße, Herkunft in Mono darunter), Formular mit Chat-Vorschau, der
   Schalter für den Sprüche-Pool und die Chat-Befehle. Jeder Selektor
   beginnt mit .page-quotes; nur Tokens.
   ========================================================================== */

/* ---------- Archiv ---------------------------------------------------------- */

.page-quotes .qte-list .list__row {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 14px 10px 14px 14px;
}
.page-quotes .qte-list .list__t { padding-top: 2px; font-size: 12px; }
.page-quotes .qte-list .list__main {
  font: var(--t-body-l);
  color: var(--ink);
  overflow-wrap: anywhere;
  /* Anführungszeichen hängen links aus der Satzkante */
  text-indent: -0.42em;
}
.page-quotes .qte-list .list__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 6px; }
.page-quotes .qte-author { color: var(--ink-2); }
.page-quotes .qte-list .list__n { margin-top: -3px; }

/* Löschen nur bei Bedarf voll sichtbar (wie Tabellenaktionen) */
@media (hover: hover) {
  .page-quotes .qte-list .list__n .btn { opacity: 0.5; transition: opacity var(--dur-1); }
  .page-quotes .qte-list .list__row:hover .list__n .btn,
  .page-quotes .qte-list .list__n .btn:focus-visible { opacity: 1; }
}

/* ---------- Vorschau: so postet der Bot ------------------------------------------ */

.page-quotes .qte-out {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r1);
  background: var(--void);
}
.page-quotes .qte-out__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.page-quotes .qte-out__call { font: var(--t-code); font-size: 11.5px; color: var(--pgm-ink); white-space: nowrap; }
.page-quotes .qte-out__line,
.page-quotes .qte-pool__line {
  font: 400 12.5px/1.55 var(--f-mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.page-quotes .qte-out__line::before,
.page-quotes .qte-pool__line::before { content: '→ '; color: var(--ink-3); }
.page-quotes .qte-out__line.is-empty,
.page-quotes .qte-pool__line.is-off { color: var(--ink-3); }

/* ---------- Sprüche-Pool ------------------------------------------------------------ */

.page-quotes .qte-pool__note { font: var(--t-small); color: var(--ink-3); }
/* Der Schalter steht an der ersten Zeile seiner (zweizeiligen) Beschriftung */
.page-quotes .qte-pool .switch { align-items: flex-start; }
.page-quotes .qte-pool .switch__track { margin-top: 1px; }

@media (max-width: 1180px) {
  /* Einspaltig: Formular vor dem (langen) Archiv, Befehle danach */
  .page-quotes .qte-side { display: contents; }
  .page-quotes .qte-new { order: -1; }
  .page-quotes .qte-side > :not(.qte-new) { order: 1; }
}

@media (max-width: 560px) {
  .page-quotes .qte-archive .pnl__actions { width: 100%; margin-left: 0; }
  .page-quotes .qte-archive .pnl__actions .search { flex: 1 1 auto; }
  .page-quotes .qte-list .list__row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; padding-left: 12px; }
}