/* ============================================================================
   tc-ausrufe — das Gespräch an einem Termin (05.09.2026, Taskwerk #580)
   ----------------------------------------------------------------------------
   Aus `.tk-*` in css/dashboard.css herausgelöst, wo es am 05.09.2026 für den
   Trash Talk am Termin entstand (#576).

   Tim: „Ich hätte gerne Kommentare am Termin. N bisschen Trash Talk vor den
   Spielen."

   ⚠️ WARUM SIE JETZT EINE KOMPONENTE IST — der Anlass ist wieder ein Fehler.
   Der Terminraum im Untergrund zeigte die Ausrufe gar nicht: Das Markup lag
   in `dashboard-events-extension.js` (12 900 Zeilen, die er nicht lädt) und
   die Regeln in `css/dashboard.css` (das er auch nicht lädt). Tim am
   05.09.2026: „Kommentare sind jetzt an den Terminen überall sauber
   integriert? Im Untergrund und Dashboard?" — im Dashboard ja, im Untergrund
   gar nicht.

   Die Gestaltung folgt einem Gedanken: **Ein Ausruf ist eine Stimme, kein
   Datensatz.** Deshalb kein Kasten je Eintrag, keine Trennlinien, kein Raster
   — sondern Name, Zeit und Satz untereinander wie in einem Gespräch. Die
   Sektion selbst ist die `tc-card`, die auch die anderen Abschnitte trägt.

   VERWENDUNG
     <div class="tc-card tc-ausrufe">
       <h4>💬 Ausrufe (3)</h4>
       <ul class="tc-ausrufe__liste">
         <li class="tc-ausruf">
           <span class="tc-ausruf__wer">Noswad</span>
           <span class="tc-ausruf__wann">vor 5 Minuten</span>
           <button class="tc-ausruf__weg">✕</button>
           <p class="tc-ausruf__text">Diesmal nicht, Timmay.</p>
         </li>
       </ul>
       <form class="tc-ausrufe__form">…</form>
     </div>

   Ab fünf Ausrufen stehen nur die drei neuesten offen, darüber ein Knopf
   `tc-ausrufe__frueher`, und die älteren tragen `hidden` (siehe unten).

   Das Markup baut `js/ui/termin-ausrufe.js` für beide Seiten.
   ========================================================================== */

.tc-ausrufe__liste {
  list-style: none;
  margin: 0 0 var(--tc-space-4, 16px);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-3, 12px);
  /* ⚠️ HIER STAND EIN SCROLLKASTEN (`max-height: 320px; overflow-y: auto`,
     bis 16.09.2026). Tim: „man muss runterscrollen und sieht aber die
     Scrollbar nicht." Der Kasten startete oben beim ältesten Ausruf, sein
     Balken ist auf Mac und iPhone unsichtbar, und auf dem Handy steckte er
     als zweiter Scrollbereich im scrollenden Fenster. Bei sechs Ausrufen
     waren im Dashboard vier ganz zu sehen, am Handy drei — der neueste nie.

     Tims Wahl am selben Tag: die drei neuesten offen, die früheren hinter
     einem Knopf darüber. Die Reihenfolge bleibt alt nach neu, das
     Eingabefeld steht direkt unter dem letzten Ausruf, wie in jedem
     Messenger. */
}

/* ⚠️ `hidden` ALLEIN VERSTECKT HIER NICHTS. Die Browser-Regel dafür ist
   `display: none` aus dem User-Agent-Stilblatt, und `.tc-ausruf` setzt
   darunter `display: grid` — jede Autorenregel schlägt das UA-Blatt. */
.tc-ausruf[hidden] { display: none; }

/* Der Knopf zu den früheren Ausrufen. Leise wie das Rücknahme-Kreuz: Er
   steht über dem Gespräch, nicht darin. `tc-button--sm` hält am Schreibtisch
   28 px und wächst unter `pointer: coarse` auf die Touch-Fläche.
   ⚠️ Zwei Klassen im Selektor: In der Library lädt ausrufe.css VOR
   button.css, und dort gewönne sonst die Farbe von `tc-button--ghost`. */
.tc-ausrufe .tc-ausrufe__frueher {
  /* ⚠️ BLOCKEBENE, LINKSBUENDIG. Als `inline-flex` folgte der Knopf dem
     `text-align` seiner Huelle und stand im Terminfenster mittig ueber dem
     Gespraech — dort gehoert er an die Kante, an der die Namen beginnen. */
  display: flex;
  justify-content: flex-start;
  margin: 0 0 var(--tc-space-3, 12px);
  padding-left: 0;
  color: var(--tc-text-muted);
}
.tc-ausrufe .tc-ausrufe__frueher:hover,
.tc-ausrufe .tc-ausrufe__frueher:focus-visible {
  background: transparent;
  color: var(--tc-text-strong);
}

.tc-ausruf {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: 'wer wann . weg' 'text text text text';
  align-items: baseline;
  gap: 2px var(--tc-space-2, 8px);
}
.tc-ausruf__wer {
  grid-area: wer;
  font-weight: 600;
  color: var(--tc-text-strong, #f0f0f0);
  font-size: 0.86rem;
}
.tc-ausruf__wann {
  grid-area: wann;
  color: var(--tc-text-muted);
  font-size: 0.74rem;
}
.tc-ausruf__text {
  grid-area: text;
  margin: 0;
  color: var(--tc-text-default, #e0e0e0);
  /* ⚠️ `overflow-wrap: anywhere` statt `word-break`: Ein Ausruf kann eine
     lange URL oder ein zusammengeschriebenes Schimpfwort enthalten, und
     `break-all` zerlegt auch gewöhnliche Wörter mitten im Wort. */
  overflow-wrap: anywhere;
}

/* Der Rücknahme-Knopf erscheint nur an eigenen Ausrufen (und für Admins).
   Er ist leise: ein Kreuz, das erst beim Überfahren Farbe bekommt — es soll
   nicht mit dem Ausruf um Aufmerksamkeit streiten. */
.tc-ausruf__weg {
  grid-area: weg;
  border: 0;
  background: none;
  padding: 0 4px;
  color: var(--tc-text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  opacity: 0.55;
  transition: opacity var(--tc-motion-fast, 120ms) ease,
              color var(--tc-motion-fast, 120ms) ease;
}
.tc-ausruf__weg:hover,
.tc-ausruf__weg:focus-visible { opacity: 1; color: var(--tc-danger); }

.tc-ausrufe__leer {
  margin: 0 0 var(--tc-space-4, 16px);
  color: var(--tc-text-muted);
  font-style: italic;
}

.tc-ausrufe__form {
  display: flex;
  gap: var(--tc-space-2, 8px);
  align-items: center;
}

/* ⚠️ DIESER BLOCK STAND IN dashboard.css 80 ZEILEN WEITER UNTEN, in einem
   eigenen `@media` am Ende des Abschnitts. Beim Herausheben von `tc-entrance`
   am selben Tag ist genau so einer beinahe liegengeblieben (er lag dort 850
   Zeilen entfernt) — deshalb steht er hier direkt unter der Regel, die er
   betrifft. */
@media (prefers-reduced-motion: reduce) {
  .tc-ausruf__weg { transition-duration: 0.01ms; }
}

@media (max-width: 620px) {
  /* Nebeneinander bliebe für das Feld bei 375 px kaum Platz, sobald der Knopf
     seine 36 px Höhe und seine Beschriftung braucht. */
  .tc-ausrufe__form { flex-direction: column; align-items: stretch; }
}