h1:focus {
    outline: none;
}

html, body {
    background: #151a2d;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ── Chat ──────────────────────────────────────────────────────────────────── */

/* Fills the screen under the dense app bar (48px); the log scrolls, the input stays put. */
.chat-page {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 48px);
    max-width: 900px;
    margin: 0 auto;
}

.chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px 8px;
}

.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    opacity: 0.9;
}

.bubble-row {
    display: flex;
    margin-bottom: 10px;
}

    .bubble-row.user {
        justify-content: flex-end;
    }

.bubble {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 16px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

    .bubble.user {
        background: #6c63ff;
        color: #fff;
        border-bottom-right-radius: 4px;
    }

    .bubble.friday {
        background: #1e2440;
        color: #e6e8f2;
        border-bottom-left-radius: 4px;
    }

    .bubble.error {
        background: #3a1f2b;
        color: #ffb4c0;
    }

    .bubble.thinking {
        display: flex;
        align-items: center;
        color: #a3a9c4;
    }

.chat-input {
    display: flex;
    align-items: center;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

    /* iOS zooms into inputs under 16px; keep it at 16 so the page doesn't jump. */
    .chat-input input {
        font-size: 16px;
    }