/*
 * Beans chat widget: supplemental styles only.
 *
 * Token-driven, no hex, no ID selectors. Tailwind utilities cover most of
 * the chat shell from the Jinja template; this file carries the patterns
 * that arbitrary utilities cannot express:
 *   - The thinking-dots keyframes (beans-ai-thinking-states rule 5).
 *   - The streaming-cursor block + blink (beans-streaming-ui rule 3 / beans-motion rule 8).
 *   - Markdown bubble overrides for assistant text.
 *   - prefers-reduced-motion guards for the two looping animations.
 *   - Mobile takeover safety net.
 */

/* Disable browser scroll-anchoring on the thread (beans-streaming-ui rule 5). */
.beans-thread {
    overflow-anchor: none;
}

/* Typing indicator: three dots pulsing in sequence. Capped to ~3 cycles in code. */
.beans-thinking {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.beans-thinking span {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--color-text-muted);
    opacity: 0.3;
}

@media (prefers-reduced-motion: no-preference) {
    .beans-thinking span {
        animation: beans-pulse 1.4s ease-in-out infinite;
    }
    .beans-thinking span:nth-child(2) { animation-delay: 0.2s; }
    .beans-thinking span:nth-child(3) { animation-delay: 0.4s; }
}

@keyframes beans-pulse {
    0%, 80%, 100% { opacity: 0.3; }
    40%           { opacity: 1; }
}

/*
 * Streaming cursor: 1ch-wide block on the active assistant bubble.
 * Per beans-motion rule 8 + beans-streaming-ui rule 3. Today the response
 * is sync: the cursor flashes briefly during state==='streaming'. Future
 * SSE endpoint hooks here without rewriting the UI.
 */
.beans-cursor {
    display: inline-block;
    width: 1ch;
    height: 1.1em;
    vertical-align: -0.18em;
    background: var(--color-text-muted);
    margin-left: 2px;
    opacity: 0.85;
    animation: beans-streaming-blink 1.2s steps(2, end) infinite;
}

@keyframes beans-streaming-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/*
 * Markdown content rendered inside assistant bubbles. The bubble itself sets
 * the surface and text colors via tokens; this file only handles the inline
 * elements that markdown spits out.
 */
.beans-md p { margin: 0; }
.beans-md p + p { margin-top: 0.5rem; }
.beans-md strong { font-weight: 600; color: var(--color-text); }
.beans-md em { font-style: italic; }
.beans-md code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.05em 0.35em;
}
.beans-md ul, .beans-md ol {
    margin: 0.25rem 0 0.25rem 1.25rem;
    padding: 0;
}
.beans-md li + li { margin-top: 0.15rem; }
.beans-md a {
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/*
 * prefers-reduced-motion: short-circuit the looping animations
 * (beans-motion rule 12). The avatar halo stays visible (solid, not breathing);
 * the thinking dots collapse to a static dim opacity; the streaming cursor
 * stops blinking (solid block).
 */
@media (prefers-reduced-motion: reduce) {
    .beans-thinking span {
        animation: none;
        opacity: 0.6;
    }
    .beans-cursor {
        animation: none;
        opacity: 1;
    }
    .beans-chat,
    .beans-chat * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/*
 * Mobile takeover (< sm = 640px). Safety net so the chat can never leak
 * behind page chrome on a small phone.
 */
@media (max-width: 639px) {
    .beans-chat[data-open="true"] {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        border: 0 !important;
    }
}