/* CHAT-06c: Animationen fuer das asynchrone Homepage-Chat-Erlebnis.
 *
 * Dieses Stylesheet liefert die animierte Aufmerksamkeit waehrend der
 * Wartezeit auf eine KI-Antwort (CHAT-05) bzw. fuer den ausbleibenden
 * Outbound (Rate-Limit-Hit, Bot-Toggle off).
 *
 * Inhalte:
 *
 * - `.chat-typing-dots` / `@keyframes chat-typing-dot`:
 *     Drei animierte Punkte, die im Typing-Placeholder
 *     (``aria-live="polite"``, initial ``display:none``) eingeblendet
 *     werden, sobald der Nutzer seine Nachricht abgesendet hat.
 *     Animation wird ueber ``animation-delay`` gestaffelt
 *     (0s / 0.2s / 0.4s) und pulsiert mit ``opacity``.
 *
 * - `.chat-bubble-reveal` / `@keyframes chat-clip-reveal`:
 *     Clip-Path-Animation fuer Outbound-Bubbles (KI-Antworten).
 *     Die Bubble wird vollstaendig im DOM gerendert, aber via
 *     ``clip-path: inset(...)`` von rechts nach links "aufgemacht"
 *     und simuliert so einen Schreib-Effekt. Dauer 1,5s mit einer
 *     natuerlichen Ease-curve.
 *
 * - `@media (prefers-reduced-motion: reduce)`:
 *     Override, der beide Animationen fuer Nutzer mit entsprechender
 *     Accessibility-Einstellung deaktiviert. Barrierefreiheit.
 *
 * Sicherheitsleitplanken:
 *
 * - Keine User-Inputs im CSS (reine Struktur-/Layout-Regeln).
 * - Keine externen Resourcen (alles inline).
 * - Reduced-Motion-Override ist explizit gesetzt.
 */

@keyframes chat-typing-dot {
    0%, 60%, 100% { opacity: 0.2; }
    30% { opacity: 1; }
}

.chat-typing-dots span {
    display: inline-block;
    animation: chat-typing-dot 1.4s infinite;
}

/* Gestaffelte Animationsverzoegerung der drei Punkte. */
.chat-typing-dots span:nth-child(1) { animation-delay: 0s; }
.chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

/* Clip-Path-Reveal-Animation fuer Outbound-Bubbles.
   Die Bubble wird vollstaendig im DOM gerendert, aber via clip-path
   von rechts nach links "aufgemacht" -- simuliert Schreib-Effekt. */
@keyframes chat-clip-reveal {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

.chat-bubble-reveal {
    animation: chat-clip-reveal 1500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Reduced-Motion-Override: Animationen fuer Nutzer mit
   prefers-reduced-motion: reduce deaktivieren (Barrierefreiheit). */
@media (prefers-reduced-motion: reduce) {
    .chat-typing-dots span {
        animation: none;
        opacity: 0.5;
    }
    .chat-bubble-reveal {
        animation: none;
        clip-path: none;
    }
}

/* CHAT-08: "Zu neuesten Nachrichten"-Unread-Button (Smart Auto-Scroll).
   Floatet ueber der Chat-Liste mit dezentem Box-Shadow, damit er
   sichtbar ist ohne den Chat-Verlauf zu verdecken. Position wird im
   Template (style="position:absolute; ...") bewusst inline uebergeben,
   damit die ``card-body`` mit ``position:relative`` als Anker dient.
   Die ``@keyframes chat-typing-dot``-Animation wird hier bewusst
   wiederverwendet (sanftes Pulsieren), damit der Button Aufmerksamkeit
   erregt ohne aufdringlich zu wirken. */
.chat-scroll-to-bottom {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: chat-typing-dot 1.5s infinite;
}

.chat-scroll-to-bottom:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.chat-scroll-to-bottom:focus {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    outline: 2px solid #fff;
    outline-offset: 2px;
}