/* ============================================================================
 * tc-comment-thread - Kommentar-Faden
 * ----------------------------------------------------------------------------
 * Wiederverwendbarer Kommentar-Thread: Liste aus Kommentar-Bubbles (Avatar +
 * Autor + Zeit + Text, optional Loeschen) plus Eingabe-Form. Einsetzbar
 * ueberall wo kommentiert wird (Galerie, Chroniken, Warbands, Events ...).
 *
 * Struktur:
 *   .tc-comment-thread
 *     .tc-comment
 *       (tc-avatar --sm)
 *       .tc-comment__bubble
 *         .tc-comment__head > __author / __time / __delete
 *         .tc-comment__text
 *     .tc-comment-thread__empty   (Hinweis wenn leer)
 *   .tc-comment-form  (Input + Senden-Button; separat platzierbar)
 * ASCII-safe.
 * ============================================================================ */

.tc-comment-thread { display: flex; flex-direction: column; gap: var(--tc-space-3); }

.tc-comment-thread__empty {
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
}

.tc-comment { display: flex; gap: var(--tc-space-2); }
.tc-comment__bubble {
  flex: 1;
  min-width: 0;
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-subtle);
  border-radius: var(--tc-radius-md);
  padding: var(--tc-space-2) var(--tc-space-3);
}
.tc-comment__head { display: flex; align-items: baseline; gap: var(--tc-space-2); }
.tc-comment__author { font-size: var(--tc-text-sm); font-weight: var(--tc-weight-semibold); color: var(--tc-highlight); }
.tc-comment__time { font-size: var(--tc-text-2xs); color: var(--tc-text-disabled); }
/* Das Loeschkreuz: klein im Bild, gross unterm Daumen (Heuristik 5).
   Bis zum 16.09.2026 hatte es `padding: 0 2px` und damit rund 12 x 20px
   Trefferflaeche — der Eigenbau bei Meisterin Grubb hatte 36px und die
   Druck-Rueckmeldung; beides ist beim Umzug auf diesen Faden hierher
   gewandert (#511). Negativer Rand, damit die Kopfzeile nicht waechst. */
.tc-comment__delete {
  margin: -10px -8px -10px auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tc-touch-min);
  min-height: var(--tc-touch-min);
  background: none; border: none; cursor: pointer;
  color: var(--tc-text-muted);
  font-size: var(--tc-text-base);
  line-height: 1;
  padding: 0;
  transition: color var(--tc-motion-fast), transform var(--tc-motion-fast);
}
.tc-comment__delete:hover { color: var(--tc-danger); }
/* Beim Loeschen ist die Rueckmeldung mehr als Politur: Man will sehen, dass
   man das richtige Kreuz erwischt hat, bevor man loslaesst. */
.tc-comment__delete:active { transform: scale(0.88); }
@media (prefers-reduced-motion: reduce) {
  .tc-comment__delete { transition-duration: 0.01ms; }
}
.tc-comment__text {
  font-size: var(--tc-text-sm);
  color: var(--tc-text-default);
  line-height: var(--tc-leading-snug);
  margin-top: 2px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Eingabe-Form (Input + Button). Border-top trennt sie vom Faden. */
.tc-comment-form {
  display: flex;
  gap: var(--tc-space-2);
  padding: var(--tc-space-3) var(--tc-space-4);
  border-top: 1px solid var(--tc-border-subtle);
  background: rgba(0,0,0,0.15);
}
.tc-comment-form .tc-input { flex: 1; }

/* --eingebettet: Der Faden steht IN einer Karte (Wunsch bei Meisterin Grubb),
   nicht als Fuss eines Fensters. Ohne eigene Flaeche und Trennlinie —
   sonst stapeln sich zwei Rahmen. Seit 16.09.2026 (#511). */
.tc-comment-form--eingebettet {
  padding: var(--tc-space-2) 0 var(--tc-space-1);
  border-top: none;
  background: none;
}
.tc-comment-form--eingebettet .tc-input { min-width: 0; }