/* Bausteine „Yannick-Funk“ und „Discord live“ für start-interaktiv.html.
   Alles hier greift erst, wenn funk-discord.js eigene Zustands-Attribute setzt (data-fd-*, .fd-*).
   Ohne Skript oder ohne diese Datei bleibt die Bühne unverändert: alle Nachrichten, Feeds und Posts sichtbar.
   Farben und Schriften aus site.css bzw. den Discord-Tönen der Bühne (stage.css, --dc-*). */

[data-funk], [data-discord] { --fd-css: 1; --fd-ease: cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------- Yannick-Funk ---------- */
/* wait = noch nicht gesendet (Platz bleibt reserviert), voice = Yannick funkt, Text folgt */
[data-funk][data-fd-funk="on"] [data-funk-msg][data-fd-step="wait"] { opacity: 0; }
[data-funk][data-fd-funk="on"] [data-funk-msg][data-fd-step="voice"] > p { opacity: 0; }
[data-funk][data-fd-funk="on"] [data-funk-msg][data-fd-step="voice"] [data-funk-wave] > span { opacity: 1; }

/* ---------- Discord: Kanäle als Reiter ---------- */
/* Alle Feeds liegen in derselben Rasterzelle: das Fenster ist so hoch wie der höchste Feed,
   ein Kanalwechsel verschiebt die Seite nicht. Der Tipp-Hinweis behält darunter seine Zeile. */
[data-discord][data-fd="on"] .fd-stack { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: start; }
[data-discord][data-fd="on"] .fd-stack > [data-feed] { grid-area: 1 / 1; border-top: 0; align-self: stretch; display: flex; flex-direction: column; }
/* Wie im echten Discord: Kanalkopf oben, Nachrichten unten direkt über „schreibt …“ (kein Loch zwischen Post und Hinweis) */
[data-discord][data-fd="on"] .fd-stack > [data-feed] > .fd-msgs { margin-top: auto; }
[data-discord][data-fd="on"] .fd-stack > [data-typing] { grid-area: 2 / 1; }
[data-discord][data-fd="on"] [data-feed][data-fd-active="false"] { opacity: 0; visibility: hidden; pointer-events: none; }
[data-discord][data-fd="on"] [data-channel] { cursor: pointer; }

/* Kanalwechsel: der alte Kanal ist sofort weg (keine Überlagerung in derselben Zelle), der neue blendet in 150 ms ein.
   Erst nach dem ersten Bild aktiv (kein Einblenden beim Laden); beim Wechsel per Pfeiltaste schaltet das Skript
   data-fd-anim kurz auf „off“, dann wechselt der Kanal ohne Übergang. */
@media (prefers-reduced-motion: no-preference) {
  [data-discord][data-fd-anim="on"] [data-feed][data-fd-active="true"] { transition: opacity 150ms var(--fd-ease), visibility 0s; }
}

/* Tipp-Hinweis: Zeile bleibt reserviert, sichtbar nur während „schreibt …“ */
[data-discord][data-fd="on"] [data-typing][data-fd-typing] { min-height: 32px; }
[data-discord][data-fd="on"] [data-typing][data-fd-typing="off"] { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  [data-discord][data-fd-anim="on"] [data-typing][data-fd-typing="off"] { transition: opacity 120ms var(--fd-ease), visibility 0s linear 120ms; }
  [data-discord][data-fd-anim="on"] [data-typing][data-fd-typing="on"] { transition: opacity 150ms var(--fd-ease), visibility 0s; }
  [data-discord][data-fd="on"] [data-typing][data-fd-typing="on"] [aria-hidden="true"] > i { animation: fd-dot 720ms var(--fd-ease) infinite both; }
  [data-discord][data-fd="on"] [data-typing][data-fd-typing="on"] [aria-hidden="true"] > i:nth-child(2) { animation-delay: 120ms; }
  [data-discord][data-fd="on"] [data-typing][data-fd-typing="on"] [aria-hidden="true"] > i:nth-child(3) { animation-delay: 240ms; }
}
@keyframes fd-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* Post wartet auf seinen Auftritt (nur vor dem ersten Sichtkontakt) */
[data-discord][data-fd="on"] [data-post][data-fd-post="wait"] { opacity: 0; }

/* ---------- Discord: Rennankündigung ---------- */
[data-discord][data-fd="on"] [data-rsvp-count] { display: inline-block; min-width: 1ch; text-align: center; }
[data-discord][data-fd="on"] [data-rsvp] { position: relative; transition: transform 100ms var(--fd-ease); }
[data-discord][data-fd="on"] [data-rsvp]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px #FFFFFF;
  opacity: 0; pointer-events: none; transition: opacity 120ms var(--fd-ease);
}
[data-discord][data-fd="on"] [data-rsvp][aria-pressed="true"] { filter: brightness(1.12); }
[data-discord][data-fd="on"] [data-rsvp][aria-pressed="true"]::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  [data-discord][data-fd="on"] [data-rsvp]:active { transform: scale(0.97); }
}

/* Antwort „Nur du kannst das sehen“ wie die kurzlebige Bot-Antwort im echten Discord */
.fd-eph { max-width: 440px; margin-top: 10px; padding: 9px 12px 8px; border-radius: 6px; border: 1px solid rgba(88, 101, 242, 0.32); background: rgba(88, 101, 242, 0.1); }
.fd-eph[hidden] { display: none; }
/* Mit funk-discord.css: Platz bleibt reserviert (die Nachrichten stehen unten im Fenster; ein neu hinzukommender
   Block würde den Beitrag samt Knopf nach oben schieben). Ein- und Ausblenden nur über opacity/transform. */
.fd-eph[data-fd-eph="off"] { visibility: hidden; opacity: 0; }
.fd-eph-text { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.35; color: var(--dc-text, var(--text-body)); }
.fd-eph-text .ic { font-size: 17px; color: #FFFFFF; }
.fd-eph-text b { color: #FFFFFF; font-weight: 600; }
.fd-eph-note { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 12px; line-height: 1.3; color: var(--dc-muted, var(--text-muted)); }
.fd-eph-note .ic { font-size: 14px; }

/* nur für Screenreader */
.fd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media print {
  [data-funk] [data-funk-msg], [data-funk] [data-funk-msg] > p, [data-discord] [data-post] { opacity: 1 !important; }
}