/* ============================================================================
 * tc-member-chip / tc-member-picker - Mitglieder markieren
 * ----------------------------------------------------------------------------
 * tc-member-chip   : Avatar + Name als Pille. Standalone, um markierte/
 *                    zugeordnete Mitglieder anzuzeigen (Foto-Tags, Event-
 *                    Teilnehmer, Warband-Owner ...). In .tc-member-chips
 *                    (Flex-Wrap-Cluster) gruppierbar.
 * tc-member-picker : Durchsuchbare Mehrfachauswahl. Ausgewaehlte als Chips
 *                    (mit Entfernen-Button), Suchfeld, Ergebnis-Dropdown.
 *
 * Struktur:
 *   .tc-member-chips > .tc-member-chip (tc-avatar --sm + Name)
 *   .tc-member-picker
 *     .tc-member-picker__selected > .tc-member-picker__chip (+ button)
 *     input.tc-input
 *     .tc-member-picker__results(.is-open) > .tc-member-picker__option(.is-selected)
 *
 * Seit dem 16.09.2026 (#636) auch die @-Erwaehnung:
 *   .tc-member-picker__results--oben   Liste ueber dem Feld (Kommentarfelder
 *                                      stehen unten im Fenster)
 *   .tc-member-picker__option.is-aktiv per Pfeiltaste gewaehlt
 *   .tc-erwaehnung(--weg)              die Erwaehnung im Kommentartext
 *   .tc-erwaehnung-anker               Positionsrahmen, setzt TC.Erwaehnung
 * ASCII-safe.
 * ============================================================================ */

/* --- Anzeige-Chips --- */
.tc-member-chips { display: flex; flex-wrap: wrap; gap: var(--tc-space-2); }
.tc-member-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  padding: 3px 10px 3px 3px;
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-full);
  font-size: var(--tc-text-xs);
  color: var(--tc-text-default);
}

/* --- Picker --- */
.tc-member-picker { position: relative; }
.tc-member-picker__selected { display: flex; flex-wrap: wrap; gap: var(--tc-space-1); margin-bottom: var(--tc-space-2); }
.tc-member-picker__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 3px;
  background: rgba(var(--tc-accent-rgb), 0.12);
  border: 1px solid rgba(var(--tc-accent-rgb), 0.4);
  border-radius: var(--tc-radius-full);
  font-size: var(--tc-text-xs);
  color: var(--tc-highlight);
}
.tc-member-picker__chip button {
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: 0.7; font-size: 0.9rem; line-height: 1; padding: 0;
}
.tc-member-picker__chip button:hover { opacity: 1; }
.tc-member-picker__results {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--tc-bg-surface-2);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md);
  box-shadow: var(--tc-shadow-lg);
  z-index: var(--tc-z-popover);
}
.tc-member-picker__results.is-open { display: block; }
.tc-member-picker__option {
  display: flex; align-items: center; gap: var(--tc-space-2);
  min-height: var(--tc-touch-min, 36px);   /* Heuristik 5: am Handy wird hier getippt */
  padding: var(--tc-space-2) var(--tc-space-3);
  cursor: pointer;
  font-size: var(--tc-text-sm);
  color: var(--tc-text-default);
  transition: background var(--tc-motion-fast);
}
.tc-member-picker__option:hover { background: var(--tc-bg-surface-3); }
.tc-member-picker__option.is-selected { opacity: 0.45; cursor: default; }
.tc-member-picker__option.is-selected:hover { background: transparent; }

/* --- @-Erwaehnung (#636) --------------------------------------------------
   Die Vorschlagsliste oeffnet nach OBEN: Kommentarfelder stehen am unteren
   Rand des Betrachters und unter jedem Faden; eine Liste nach unten laege
   unter der Bildschirmkante oder unter der Tastatur. */
.tc-erwaehnung-anker { position: relative; }
.tc-member-picker__results--oben {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
}
.tc-member-picker__option.is-aktiv { background: var(--tc-bg-surface-3); }

/* Die Erwaehnung im Text. Farbe aus --tc-highlight, nie aus --tc-accent (CLAUDE.md 9). */
.tc-erwaehnung {
  color: var(--tc-highlight);
  font-weight: 600;
  text-decoration: none;
}
a.tc-erwaehnung:hover,
a.tc-erwaehnung:focus-visible { text-decoration: underline; }
/* Wer nicht mehr aufzuloesen ist, bleibt als geschriebenes Wort stehen. */
.tc-erwaehnung--weg { color: inherit; font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  .tc-member-picker__option { transition-duration: 0.01ms; }
}