/* Creator-Bereich, Seite Nachrichten als Chat (03.09. abends). Baut auf
   board.css und creator.css auf. Unsere Blasen links in Grau, seine rechts in
   Gelb mit dunkler Schrift, Zeit klein darunter, Tagestrenner, Eingabe unten.
   Kein Inline-Stil, die Seite laeuft unter einer strengen Inhaltsrichtlinie. */

.karte.chat { padding: 0; max-width: 40rem; overflow: hidden; display: flex; flex-direction: column; }
.chat-kopf { padding: 1.1rem 1.25rem 0.85rem; border-bottom: 1px solid var(--linie, #222); }
.chat-kopf h2 { margin: 0 0 0.25rem; }
.chat-kopf .meta { margin: 0; color: var(--leise, #888); font-size: 0.8125rem; line-height: 1.45; }

/* Verlauf: eigener Scrollbereich mit fester Hoehe, etwas dunkler als die
   Karte, damit die Blasen Kontrast haben. */
.chat-fenster { position: relative; background: #0f0f0f; }
.chat-verlauf { height: clamp(20rem, 58vh, 38rem); overflow-y: auto; overscroll-behavior: contain; padding: 0.9rem 1rem 0.75rem; -webkit-overflow-scrolling: touch; }
.chat-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.chat-leer { color: var(--leise, #888); text-align: center; margin: 3.5rem 1rem; line-height: 1.5; }

/* Trenner: Tag und „Neu", eine Zeile mit Haarlinien links und rechts. */
.chat-tag, .chat-neu { display: flex; align-items: center; gap: 0.8rem; margin: 1.1rem 0 0.5rem; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise, #888); }
.chat-tag:first-child { margin-top: 0.2rem; }
.chat-tag::before, .chat-tag::after, .chat-neu::before, .chat-neu::after { content: ''; flex: 1; height: 1px; background: var(--linie, #222); }
.chat-neu { color: var(--gelb, #F4CE14); }
.chat-neu::before, .chat-neu::after { background: rgba(244, 206, 20, 0.35); }

/* Eine Nachricht: Absender, Bezug, Blase, Zeit. Rechts seine, links unsere.
   Folgt eine Blase derselben Seite direkt, rueckt sie enger heran und die
   Ecke zur Vorgaengerin wird flach, so liest sich eine Gruppe als eine. */
.chat-nachricht { display: flex; flex-direction: column; max-width: 78%; margin-top: 0.7rem; }
.chat-nachricht.folge { margin-top: 0.15rem; }
.chat-nachricht.raus { align-self: flex-start; align-items: flex-start; }
.chat-nachricht.rein { align-self: flex-end; align-items: flex-end; }
.chat-wer { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise, #888); margin: 0 0 0.25rem 0.75rem; }
.chat-bezug { font-size: 0.6875rem; color: var(--stumm, #999); margin: 0 0.75rem 0.25rem; display: flex; align-items: center; gap: 0.35rem; overflow-wrap: anywhere; }
.chat-bezug::before { content: ''; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--gelb, #F4CE14); }
.chat-blase { padding: 0.55rem 0.85rem; border-radius: 1.15rem; line-height: 1.45; font-size: 0.9375rem; white-space: pre-line; overflow-wrap: anywhere; }
.chat-nachricht.raus .chat-blase { background: var(--flaeche3, #232323); color: #fff; border-bottom-left-radius: 0.35rem; }
.chat-nachricht.rein .chat-blase { background: var(--gelb, #F4CE14); color: #111; border-bottom-right-radius: 0.35rem; }
.chat-nachricht.raus.folge .chat-blase { border-top-left-radius: 0.35rem; }
.chat-nachricht.rein.folge .chat-blase { border-top-right-radius: 0.35rem; }
.chat-zeit { display: flex; gap: 0.35rem; margin: 0.25rem 0.75rem 0; font-size: 0.6875rem; color: var(--leise, #888); font-variant-numeric: tabular-nums; }
.chat-gelesen::before { content: '· '; }

@media (prefers-reduced-motion: no-preference) {
  .chat-nachricht { animation: chat-auf 0.18s ease-out; }
  @keyframes chat-auf { from { opacity: 0; transform: translateY(0.3rem); } to { opacity: 1; transform: none; } }
}

/* Pille „nach unten", nur sichtbar, wenn der Nutzer oben liest. */
.chat-runter { position: absolute; right: 1rem; bottom: 0.75rem; background: rgba(20, 20, 20, 0.92); color: #fff; border: 1px solid var(--linie, #333); border-radius: 2rem; padding: 0.4rem 0.85rem 0.4rem 0.75rem; font: inherit; font-size: 0.8125rem; cursor: pointer; backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
.chat-runter::before { content: '↓'; color: var(--gelb, #F4CE14); margin-right: 0.4rem; }
.chat-runter:focus-visible { outline: 2px solid var(--gelb, #F4CE14); outline-offset: 2px; }

/* Eingabe: ein rundes Feld, das mit dem Text waechst, daneben der Knopf. */
.chat-eingabe { display: flex; gap: 0.5rem; align-items: flex-end; padding: 0.75rem 1rem 0.5rem; border-top: 1px solid var(--linie, #222); background: var(--karte, #141414); }
.karte .chat-eingabe textarea { flex: 1; width: auto; min-width: 0; resize: none; border-radius: 1.3rem; padding: 0.6rem 1rem; min-height: 2.6rem; max-height: 9.5rem; line-height: 1.4; background: #0b0b0b; border: 1px solid #333; color: #fff; }
.karte .chat-eingabe textarea::placeholder { color: var(--leise, #777); }
.chat-senden { flex: none; border-radius: 2rem; padding: 0.6rem 1.05rem; min-height: 2.6rem; }
.chat-tipp { margin: 0; padding: 0 1.1rem 0.75rem; color: var(--leise, #777); font-size: 0.6875rem; }
.karte.chat .fehler { margin: 0; padding: 0 1.1rem 0.75rem; }
@media (hover: none) { .chat-tipp { display: none; } .chat-eingabe { padding-bottom: 0.75rem; } }

@media (max-width: 40rem) {
  .chat-verlauf { height: clamp(18rem, 55vh, 34rem); padding: 0.7rem 0.75rem 0.6rem; }
  .chat-nachricht { max-width: 88%; }
  .chat-kopf { padding: 1rem 1rem 0.75rem; }
  .chat-eingabe { padding: 0.6rem 0.75rem 0.5rem; }
}