/*
 * Runtime Web – Unified Serverless Framework for Full-Stack TypeScript Applications
 * Documentation: https://runtimeweb.com/docs/getting-started
 *
 * @template: ai-chat
 */

/**
 * AI Chat Template Styles
 *
 * Responsive chat interface with user/assistant message distinction.
 * Supports light and dark backgrounds with mobile-friendly design.
 */

/* CSS Variables for theming */
:root {
    --chat-bg: #f5f5f5;
    --chat-header-bg: #ffffff;
    --chat-footer-bg: #ffffff;
    --chat-border: #e0e0e0;
    --message-user-bg: #007bff;
    --message-user-text: #ffffff;
    --message-assistant-bg: #ffffff;
    --message-assistant-text: #333333;
    --input-bg: #ffffff;
    --input-border: #d0d0d0;
    --input-focus-border: #007bff;
    --button-bg: #007bff;
    --button-hover-bg: #0056b3;
    --button-disabled-bg: #cccccc;
    --button-text: #ffffff;
    --error-bg: #fff0f0;
    --error-border: #ffcccc;
    --error-text: #cc0000;
    --loading-dot: #007bff;
    --timestamp-text: #888888;
    --welcome-text: #666666;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --chat-bg: #1a1a1a;
        --chat-header-bg: #2d2d2d;
        --chat-footer-bg: #2d2d2d;
        --chat-border: #404040;
        --message-user-bg: #0066cc;
        --message-user-text: #ffffff;
        --message-assistant-bg: #2d2d2d;
        --message-assistant-text: #e0e0e0;
        --input-bg: #2d2d2d;
        --input-border: #404040;
        --input-focus-border: #0066cc;
        --button-bg: #0066cc;
        --button-hover-bg: #0052a3;
        --button-disabled-bg: #404040;
        --button-text: #ffffff;
        --error-bg: #3d1a1a;
        --error-border: #662222;
        --error-text: #ff6666;
        --loading-dot: #0066cc;
        --timestamp-text: #888888;
        --welcome-text: #999999;
    }
}

/* Reset and base styles */
* {
    box-sizing: border-box;
}

/* Chat Container (legacy) */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    background-color: var(--chat-bg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.chat-container--loading {
    justify-content: center;
    align-items: center;
}

/* ============================================
 * CHAT PAGE COMPONENT
 * Main chat interface layout with semantic HTML
 * Validates: Requirements 7.1, 10.3
 * ============================================ */

.chat-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    background-color: var(--color-bg-primary, var(--chat-bg));
    font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

.chat-page--loading {
    justify-content: center;
    align-items: center;
}

.chat-page__loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4, 1rem);
}

/* Chat Page Header */
.chat-page__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
    background-color: var(--color-bg-secondary, var(--chat-header-bg));
    border-bottom: 1px solid var(--color-border, var(--chat-border));
    flex-shrink: 0;
    min-height: var(--header-height, 64px);
}

.chat-page__header-left {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
}

.chat-page__title {
    margin: 0;
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, var(--message-assistant-text));
}

/* Chat Page Main Area */
.chat-page__main {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Chat Page Footer */
.chat-page__footer {
    padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
    background-color: var(--color-bg-secondary, var(--chat-footer-bg));
    border-top: 1px solid var(--color-border, var(--chat-border));
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chat-page__header {
        padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
        flex-wrap: wrap;
        gap: var(--space-2, 0.5rem);
    }

    .chat-page__header-left {
        flex: 1;
        min-width: 0;
    }

    .chat-page__title {
        font-size: var(--font-size-lg, 1.125rem);
    }

    .chat-page__footer {
        padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    }
}

/* Chat Header (legacy) */
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: var(--chat-header-bg);
    border-bottom: 1px solid var(--chat-border);
    flex-shrink: 0;
}

.chat-header__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--message-assistant-text);
}

/* Chat Main Area */
.chat-main {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

/* Chat Footer */
.chat-footer {
    padding: 1rem 1.5rem;
    background-color: var(--chat-footer-bg);
    border-top: 1px solid var(--chat-border);
    flex-shrink: 0;
}

/* ============================================
 * MESSAGE LIST COMPONENT
 * Container for chat messages with smooth scrolling
 * Validates: Requirements 8.3
 * ============================================ */

.message-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
    padding: var(--space-4, 1rem);
    padding-bottom: var(--space-6, 1.5rem);
    /* Enable smooth scrolling for the container */
    scroll-behavior: smooth;
    /* Optimize scroll performance */
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent layout shift during scroll */
    overscroll-behavior: contain;
    /* GPU acceleration for smooth scrolling */
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .message-list {
        scroll-behavior: auto;
    }
}

.message-list--empty {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-8, 2rem);
}

/* Scroll anchor for programmatic scrolling */
.message-list__scroll-anchor {
    height: 1px;
    width: 100%;
    flex-shrink: 0;
}

/* ============================================
 * WELCOME MESSAGE COMPONENT
 * Empty state display with design system tokens
 * ============================================ */

.welcome-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--color-text-secondary, var(--welcome-text));
    padding: var(--space-8, 2rem);
    max-width: var(--chat-max-width, 800px);
    animation: slide-up-fade var(--duration-slow, 350ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) forwards;
}

.welcome-message__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-16, 4rem);
    height: var(--space-16, 4rem);
    margin-bottom: var(--space-4, 1rem);
    background: linear-gradient(135deg,
            var(--color-primary-100, #dbeafe) 0%,
            var(--color-primary-50, #eff6ff) 100%);
    border-radius: var(--radius-full, 9999px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
}

@media (prefers-color-scheme: dark) {
    .welcome-message__icon {
        background: linear-gradient(135deg,
                var(--color-primary-900, #1e3a8a) 0%,
                var(--color-primary-800, #1e40af) 100%);
    }
}

.welcome-message__sparkle {
    font-size: var(--font-size-2xl, 1.5rem);
    color: var(--color-interactive-primary, var(--color-primary-600, #2563eb));
    line-height: 1;
}

.welcome-message__title {
    margin: 0 0 var(--space-2, 0.5rem) 0;
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, var(--message-assistant-text));
    line-height: var(--line-height-tight, 1.25);
}

.welcome-message__description {
    margin: 0;
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text-secondary, var(--welcome-text));
    line-height: var(--line-height-normal, 1.5);
}

/* Legacy welcome message styles for backward compatibility */
.welcome-message h2 {
    margin: 0 0 var(--space-2, 0.5rem) 0;
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, var(--message-assistant-text));
}

.welcome-message p {
    margin: 0;
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text-secondary, var(--welcome-text));
}

/* Message Item */
.message-item {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-item--user {
    align-self: flex-end;
}

.message-item--assistant {
    align-self: flex-start;
}

.message-item__bubble {
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1.5;
}

.message-item--user .message-item__bubble {
    background-color: var(--message-user-bg);
    color: var(--message-user-text);
    border-bottom-right-radius: 0.25rem;
}

.message-item--assistant .message-item__bubble {
    background-color: var(--message-assistant-bg);
    color: var(--message-assistant-text);
    border-bottom-left-radius: 0.25rem;
    border: 1px solid var(--chat-border);
}

.message-item__timestamp {
    font-size: 0.75rem;
    color: var(--timestamp-text);
    margin-top: 0.25rem;
    padding: 0 0.5rem;
}

.message-item--user .message-item__timestamp {
    text-align: right;
}

.message-item--assistant .message-item__timestamp {
    text-align: left;
}

/* Streaming indicator */
.message-item--streaming .message-item__bubble::after {
    content: '▋';
    animation: blink 1s infinite;
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

/* ============================================
 * MESSAGE BUBBLE COMPONENT
 * Enhanced message display with avatar support
 * Validates: Requirements 2.1, 2.2, 2.3, 2.7, 2.8
 * ============================================ */

.message-bubble {
    display: flex;
    gap: var(--space-3, 0.75rem);
    max-width: 80%;
    animation: message-enter var(--duration-normal, 250ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) forwards;
}

/* User messages: right-aligned, primary color */
.message-bubble--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

/* Assistant messages: left-aligned, surface color */
.message-bubble--assistant {
    align-self: flex-start;
    flex-direction: row;
}

/* Avatar container */
.message-bubble__avatar {
    flex-shrink: 0;
    width: var(--space-8, 2rem);
    height: var(--space-8, 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-tertiary, #f4f4f5);
    border-radius: var(--radius-full, 9999px);
    border: 1px solid var(--color-border, #e4e4e7);
}

.message-bubble__avatar-icon {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-interactive-primary, #2563eb);
    line-height: 1;
}

/* Content wrapper */
.message-bubble__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
    min-width: 0;
    /* Allow text truncation */
}

/* Text container with bubble styling */
.message-bubble__text {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border-radius: var(--radius-xl, 0.75rem);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: var(--line-height-normal, 1.5);
    box-shadow: var(--shadow-message, 0 1px 3px 0 rgb(0 0 0 / 0.08));
}

/* User message bubble styling */
.message-bubble--user .message-bubble__text {
    background-color: var(--color-msg-user-bg, #2563eb);
    color: var(--color-msg-user-text, #ffffff);
    border-bottom-right-radius: var(--radius-sm, 0.125rem);
}

/* Assistant message bubble styling */
.message-bubble--assistant .message-bubble__text {
    background-color: var(--color-msg-assistant-bg, #ffffff);
    color: var(--color-msg-assistant-text, #18181b);
    border: 1px solid var(--color-msg-assistant-border, #e4e4e7);
    border-bottom-left-radius: var(--radius-sm, 0.125rem);
}

/* Paragraph reset for user messages */
.message-bubble__paragraph {
    margin: 0;
    padding: 0;
}

/* Markdown container for assistant messages */
.message-bubble__markdown {
    white-space: pre-wrap;
}

/* Streaming cursor indicator */
.message-bubble__cursor {
    display: inline-block;
    margin-left: var(--space-0-5, 0.125rem);
    color: var(--color-interactive-primary, #2563eb);
    font-weight: var(--font-weight-normal, 400);
}

/* Timestamp styling */
.message-bubble__timestamp {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-tertiary, #a1a1aa);
    padding: 0 var(--space-1, 0.25rem);
}

.message-bubble--user .message-bubble__timestamp {
    text-align: right;
}

.message-bubble--assistant .message-bubble__timestamp {
    text-align: left;
}

/* Streaming state indicator */
.message-bubble[data-streaming="true"] .message-bubble__text {
    position: relative;
}

/* Mobile responsive adjustments for MessageBubble */
@media (max-width: 768px) {
    .message-bubble {
        max-width: 90%;
    }

    .message-bubble__avatar {
        width: var(--space-7, 1.75rem);
        height: var(--space-7, 1.75rem);
    }

    .message-bubble__avatar-icon {
        font-size: var(--font-size-xs, 0.75rem);
    }

    .message-bubble__text {
        padding: var(--space-2-5, 0.625rem) var(--space-3, 0.75rem);
        font-size: var(--font-size-sm, 0.875rem);
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .message-bubble {
        gap: var(--space-2, 0.5rem);
    }

    .message-bubble__avatar {
        width: var(--space-6, 1.5rem);
        height: var(--space-6, 1.5rem);
    }
}

/* Input Area (Legacy) */
.input-area {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

.input-area__textarea {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--input-border);
    border-radius: 1.5rem;
    background-color: var(--input-bg);
    color: var(--message-assistant-text);
    font-size: 1rem;
    font-family: inherit;
    resize: none;
    min-height: 2.75rem;
    max-height: 8rem;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.2s ease;
}

.input-area__textarea:focus {
    border-color: var(--input-focus-border);
}

.input-area__textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.input-area__textarea::placeholder {
    color: var(--timestamp-text);
}

.input-area__button {
    padding: 0.75rem 1.5rem;
    background-color: var(--button-bg);
    color: var(--button-text);
    border: none;
    border-radius: 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.input-area__button:hover:not(:disabled) {
    background-color: var(--button-hover-bg);
}

.input-area__button:disabled {
    background-color: var(--button-disabled-bg);
    cursor: not-allowed;
}

/* ============================================
 * INPUT COMPOSER COMPONENT
 * Enhanced message input with auto-resize, focus states,
 * loading indicator, and keyboard shortcut hints
 * Validates: Requirements 4.1, 4.2, 4.3, 4.4, 4.6, 4.7, 4.8
 * ============================================ */

.input-composer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    width: 100%;
    max-width: var(--chat-max-width, 800px);
    margin: 0 auto;
    /* Pinned to bottom via parent container */
}

/* Container for textarea and send button */
.input-composer__container {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem);
    background-color: var(--color-bg-secondary, #ffffff);
    border: 1px solid var(--color-border, #e4e4e7);
    border-radius: var(--radius-2xl, 1rem);
    box-shadow: var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1));
    transition: border-color var(--duration-fast, 150ms) var(--ease-out),
        box-shadow var(--duration-fast, 150ms) var(--ease-out);
}

/* Focus state - smooth focus ring animation */
.input-composer--focused .input-composer__container {
    border-color: var(--color-border-focus, #3b82f6);
    box-shadow: var(--shadow-input-focus, 0 0 0 3px rgb(59 130 246 / 0.15));
}

/* Disabled state */
.input-composer--disabled .input-composer__container {
    background-color: var(--color-bg-tertiary, #f4f4f5);
    opacity: 0.7;
}

/* Auto-resize textarea */
.input-composer__textarea {
    flex: 1;
    min-height: var(--input-min-height, 44px);
    max-height: var(--input-max-height, 200px);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border: none;
    background-color: transparent;
    color: var(--color-text-primary, #18181b);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base, 1rem);
    line-height: var(--line-height-normal, 1.5);
    resize: none;
    outline: none;
    overflow-y: auto;
}

.input-composer__textarea::placeholder {
    color: var(--color-text-tertiary, #a1a1aa);
}

.input-composer__textarea:disabled {
    cursor: not-allowed;
    color: var(--color-text-secondary, #52525b);
}

/* Send button */
.input-composer__send {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10, 2.5rem);
    height: var(--space-10, 2.5rem);
    padding: 0;
    border: none;
    border-radius: var(--radius-full, 9999px);
    background-color: var(--color-interactive-disabled, #d4d4d8);
    color: var(--color-text-inverse, #ffffff);
    cursor: not-allowed;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out),
        transform var(--duration-fast, 150ms) var(--ease-out);
}

/* Active state - can send */
.input-composer__send--active {
    background-color: var(--color-interactive-primary, #2563eb);
    cursor: pointer;
}

.input-composer__send--active:hover {
    background-color: var(--color-interactive-primary-hover, #1d4ed8);
}

.input-composer__send--active:active {
    background-color: var(--color-interactive-primary-active, #1e40af);
    transform: scale(0.95);
}

/* Focus visible state for keyboard navigation */
.input-composer__send:focus-visible {
    outline: 2px solid var(--color-focus-ring, #3b82f6);
    outline-offset: 2px;
}

/* Loading state */
.input-composer__send--loading {
    background-color: var(--color-interactive-primary, #2563eb);
    cursor: wait;
}

/* Send icon */
.input-composer__icon {
    width: var(--space-5, 1.25rem);
    height: var(--space-5, 1.25rem);
}

/* Loading spinner */
.input-composer__spinner {
    width: var(--space-5, 1.25rem);
    height: var(--space-5, 1.25rem);
    animation: spin 1s linear infinite;
}

/* Keyboard shortcut hints */
.input-composer__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5, 0.375rem);
    padding: 0 var(--space-2, 0.5rem);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-tertiary, #a1a1aa);
    user-select: none;
}

.input-composer__hint-text {
    color: var(--color-text-tertiary, #a1a1aa);
}

.input-composer__hint-separator {
    color: var(--color-text-tertiary, #a1a1aa);
    margin: 0 var(--space-1, 0.25rem);
}

/* Keyboard key styling */
.input-composer__kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-5, 1.25rem);
    height: var(--space-5, 1.25rem);
    padding: 0 var(--space-1-5, 0.375rem);
    background-color: var(--color-bg-tertiary, #f4f4f5);
    border: 1px solid var(--color-border, #e4e4e7);
    border-radius: var(--radius-sm, 0.125rem);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-secondary, #52525b);
    box-shadow: 0 1px 0 var(--color-border, #e4e4e7);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .input-composer__container {
        padding: var(--space-2, 0.5rem);
        border-radius: var(--radius-xl, 0.75rem);
    }

    .input-composer__textarea {
        min-height: var(--touch-target-min, 44px);
        font-size: var(--font-size-base, 1rem);
        /* Prevent zoom on iOS */
    }

    .input-composer__send {
        width: var(--touch-target-min, 44px);
        height: var(--touch-target-min, 44px);
    }

    /* Hide keyboard hints on mobile - not relevant for touch */
    .input-composer__hint {
        display: none;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .input-composer__container {
        gap: var(--space-2, 0.5rem);
    }

    .input-composer__textarea {
        padding: var(--space-2, 0.5rem);
    }
}

/* ============================================
 * BEHAVIOR SELECTOR COMPONENT
 * AI response style selector with design system tokens
 * Validates: Requirements 8.4, 8.5
 * ============================================ */

.behavior-selector {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.behavior-selector__label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-secondary, #52525b);
    white-space: nowrap;
}

.behavior-selector__options {
    display: flex;
    gap: var(--space-1, 0.25rem);
    padding: var(--space-1, 0.25rem);
    background-color: var(--color-bg-tertiary, #f4f4f5);
    border-radius: var(--radius-lg, 0.5rem);
}

.behavior-selector__option {
    padding: var(--space-1-5, 0.375rem) var(--space-3, 0.75rem);
    border: none;
    border-radius: var(--radius-md, 0.25rem);
    background-color: transparent;
    color: var(--color-text-secondary, #52525b);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out),
        color var(--duration-fast, 150ms) var(--ease-out),
        transform var(--duration-fast, 150ms) var(--ease-out);
}

.behavior-selector__option:hover {
    background-color: var(--color-bg-secondary, #ffffff);
    color: var(--color-text-primary, #18181b);
}

.behavior-selector__option:active {
    transform: scale(0.98);
}

.behavior-selector__option--active {
    background-color: var(--color-bg-secondary, #ffffff);
    color: var(--color-text-primary, #18181b);
    box-shadow: var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1));
}

/* Focus visible for keyboard navigation */
.behavior-selector__option:focus-visible {
    outline: 2px solid var(--color-focus-ring, #3b82f6);
    outline-offset: 2px;
}

/* ============================================
 * TYPING INDICATOR COMPONENT
 * Enhanced loading indicator with avatar and animated dots
 * Validates: Requirements 3.1, 3.2, 3.3, 3.4, 3.6
 * ============================================ */

.typing-indicator {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 0.75rem);
    max-width: 80%;
    align-self: flex-start;
    animation: message-enter var(--duration-normal, 250ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) forwards;
}

/* Avatar matching assistant messages */
.typing-indicator__avatar {
    flex-shrink: 0;
    width: var(--space-8, 2rem);
    height: var(--space-8, 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-tertiary, #f4f4f5);
    border-radius: var(--radius-full, 9999px);
    border: 1px solid var(--color-border, #e4e4e7);
}

.typing-indicator__avatar-icon {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-interactive-primary, #2563eb);
    line-height: 1;
}

/* Bubble containing the dots */
.typing-indicator__bubble {
    display: flex;
    align-items: center;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background-color: var(--color-msg-assistant-bg, #ffffff);
    border: 1px solid var(--color-msg-assistant-border, #e4e4e7);
    border-radius: var(--radius-xl, 0.75rem);
    border-bottom-left-radius: var(--radius-sm, 0.125rem);
    box-shadow: var(--shadow-message, 0 1px 3px 0 rgb(0 0 0 / 0.08));
    min-height: var(--space-10, 2.5rem);
}

/* Dots container */
.typing-indicator__dots {
    display: flex;
    align-items: center;
    gap: var(--space-1-5, 0.375rem);
}

/* Individual dot styling */
.typing-indicator__dot {
    width: var(--space-2, 0.5rem);
    height: var(--space-2, 0.5rem);
    background-color: var(--color-interactive-primary, #2563eb);
    border-radius: var(--radius-full, 9999px);
    /* Animation defined in animations.css */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .typing-indicator {
        max-width: 90%;
    }

    .typing-indicator__avatar {
        width: var(--space-7, 1.75rem);
        height: var(--space-7, 1.75rem);
    }

    .typing-indicator__avatar-icon {
        font-size: var(--font-size-xs, 0.75rem);
    }

    .typing-indicator__bubble {
        padding: var(--space-2-5, 0.625rem) var(--space-3, 0.75rem);
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .typing-indicator {
        gap: var(--space-2, 0.5rem);
    }

    .typing-indicator__avatar {
        width: var(--space-6, 1.5rem);
        height: var(--space-6, 1.5rem);
    }
}

/* Legacy Loading Indicator (backward compatibility) */
.loading-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--timestamp-text);
    font-size: 0.875rem;
}

.loading-indicator__dots {
    display: flex;
    gap: 0.25rem;
}

.loading-indicator__dot {
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--loading-dot);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.loading-indicator__dot:nth-child(1) {
    animation-delay: -0.32s;
}

.loading-indicator__dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

/* Error Message */
.error-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: 0.5rem;
    margin: 0.5rem 0;
}

.error-message__text {
    color: var(--error-text);
    font-size: 0.875rem;
    flex: 1;
}

.error-message__actions {
    display: flex;
    gap: 0.5rem;
}

.error-message__button {
    padding: 0.375rem 0.75rem;
    border: none;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.error-message__button:hover {
    opacity: 0.8;
}

.error-message__button--retry {
    background-color: var(--button-bg);
    color: var(--button-text);
}

.error-message__button--dismiss {
    background-color: transparent;
    color: var(--timestamp-text);
    border: 1px solid var(--chat-border);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .chat-header {
        padding: 0.75rem 1rem;
        flex-direction: column;
        gap: 0.75rem;
    }

    .chat-header__title {
        font-size: 1.125rem;
    }

    .chat-footer {
        padding: 0.75rem 1rem;
    }

    .message-item {
        max-width: 90%;
    }

    .behavior-selector {
        width: 100%;
        justify-content: center;
    }

    .behavior-selector__option {
        flex: 1;
        text-align: center;
        padding: 0.375rem 0.5rem;
        font-size: 0.8125rem;
    }

    .input-area__button {
        padding: 0.75rem 1rem;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .chat-main {
        padding: 0.75rem;
    }

    .message-item__bubble {
        padding: 0.625rem 0.875rem;
        font-size: 0.9375rem;
    }

    .error-message {
        flex-direction: column;
        align-items: stretch;
    }

    .error-message__actions {
        justify-content: flex-end;
    }
}

/* ============================================
 * EMPTY STATE COMPONENT
 * Welcoming interface for empty conversations
 * Validates: Requirements 5.1, 5.2, 5.3, 5.4, 5.5, 5.6
 * ============================================ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8, 2rem);
    max-width: var(--chat-max-width, 800px);
    margin: auto;
    animation: slide-up-fade var(--duration-slow, 350ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) forwards;
}

.empty-state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-16, 4rem);
    height: var(--space-16, 4rem);
    margin-bottom: var(--space-4, 1rem);
    background: linear-gradient(135deg,
            var(--color-primary-100, #dbeafe) 0%,
            var(--color-primary-50, #eff6ff) 100%);
    border-radius: var(--radius-full, 9999px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
}

@media (prefers-color-scheme: dark) {
    .empty-state__icon {
        background: linear-gradient(135deg,
                var(--color-primary-900, #1e3a8a) 0%,
                var(--color-primary-800, #1e40af) 100%);
    }
}

.empty-state__sparkle {
    font-size: var(--font-size-2xl, 1.5rem);
    color: var(--color-interactive-primary, #2563eb);
    line-height: 1;
}

.empty-state__title {
    margin: 0 0 var(--space-2, 0.5rem) 0;
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #18181b);
}

.empty-state__description {
    margin: 0 0 var(--space-6, 1.5rem) 0;
    font-size: var(--font-size-base, 1rem);
    color: var(--color-text-secondary, #52525b);
}

.empty-state__prompts {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    width: 100%;
    max-width: 400px;
}

.empty-state__prompt {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background-color: var(--color-bg-secondary, #ffffff);
    border: 1px solid var(--color-border, #e4e4e7);
    border-radius: var(--radius-lg, 0.5rem);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-primary, #18181b);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-fast, 150ms) var(--ease-out),
        box-shadow var(--duration-fast, 150ms) var(--ease-out);
}

.empty-state__prompt:hover {
    border-color: var(--color-border-hover, #d4d4d8);
    box-shadow: var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1));
}

.empty-state__prompt:focus-visible {
    outline: 2px solid var(--color-focus-ring, #3b82f6);
    outline-offset: 2px;
}

.empty-state__prompt-icon {
    flex-shrink: 0;
    color: var(--color-text-tertiary, #a1a1aa);
}

.empty-state__prompt-text {
    flex: 1;
}

/* ============================================
 * ERROR STATE COMPONENT
 * User-friendly error feedback with recovery options
 * Validates: Requirements 6.1, 6.2, 6.3, 6.4, 6.5, 6.7
 * ============================================ */

.error-state {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-4, 1rem);
    margin: var(--space-4, 1rem);
    background-color: var(--color-state-error-bg, #fef2f2);
    border: 1px solid var(--color-state-error-border, #fecaca);
    border-radius: var(--radius-lg, 0.5rem);
    animation: slide-up-fade var(--duration-normal, 250ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) forwards;
}

.error-state__icon {
    flex-shrink: 0;
    color: var(--color-state-error-text, #b91c1c);
}

.error-state__content {
    flex: 1;
    min-width: 0;
}

.error-state__message {
    margin: 0 0 var(--space-1, 0.25rem) 0;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-state-error-text, #b91c1c);
}

.error-state__hint {
    margin: 0;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-secondary, #52525b);
}

.error-state__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    flex-shrink: 0;
}

.error-state__retry {
    padding: var(--space-1-5, 0.375rem) var(--space-3, 0.75rem);
    background-color: var(--color-state-error-text, #b91c1c);
    border: none;
    border-radius: var(--radius-md, 0.25rem);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: #ffffff;
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out);
}

.error-state__retry:hover {
    background-color: var(--color-error-600, #dc2626);
}

.error-state__retry:focus-visible {
    outline: 2px solid var(--color-focus-ring, #3b82f6);
    outline-offset: 2px;
}

.error-state__dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8, 2rem);
    height: var(--space-8, 2rem);
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: var(--radius-md, 0.25rem);
    color: var(--color-text-secondary, #52525b);
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out);
}

.error-state__dismiss:hover {
    background-color: var(--color-state-error-border, #fecaca);
}

.error-state__dismiss:focus-visible {
    outline: 2px solid var(--color-focus-ring, #3b82f6);
    outline-offset: 2px;
}

/* ============================================
 * SESSION INDICATOR COMPONENT
 * Conversation persistence status indicator
 * Validates: Requirements 9.1, 9.3, 9.5
 * ============================================ */

.session-indicator {
    position: relative;
}

.session-indicator__button {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-1-5, 0.375rem) var(--space-3, 0.75rem);
    background-color: transparent;
    border: 1px solid var(--color-border, #e4e4e7);
    border-radius: var(--radius-full, 9999px);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-secondary, #52525b);
    cursor: pointer;
    transition: border-color var(--duration-fast, 150ms) var(--ease-out),
        background-color var(--duration-fast, 150ms) var(--ease-out);
}

.session-indicator__button:hover {
    background-color: var(--color-bg-tertiary, #f4f4f5);
    border-color: var(--color-border-hover, #d4d4d8);
}

.session-indicator__button:focus-visible {
    outline: 2px solid var(--color-focus-ring, #3b82f6);
    outline-offset: 2px;
}

.session-indicator__dot {
    width: var(--space-2, 0.5rem);
    height: var(--space-2, 0.5rem);
    background-color: var(--color-success-500, #22c55e);
    border-radius: var(--radius-full, 9999px);
}

.session-indicator__text {
    white-space: nowrap;
}

.session-indicator__backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-dropdown, 100);
}

.session-indicator__menu {
    position: absolute;
    top: calc(100% + var(--space-1, 0.25rem));
    left: 0;
    min-width: 180px;
    padding: var(--space-1, 0.25rem);
    background-color: var(--color-bg-secondary, #ffffff);
    border: 1px solid var(--color-border, #e4e4e7);
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: var(--shadow-dropdown, 0 4px 12px rgb(0 0 0 / 0.15));
    z-index: calc(var(--z-dropdown, 100) + 1);
    animation: scale-in var(--duration-fast, 150ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) forwards;
}

.session-indicator__menu-item {
    display: block;
    width: 100%;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    background-color: transparent;
    border: none;
    border-radius: var(--radius-md, 0.25rem);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-primary, #18181b);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out);
}

.session-indicator__menu-item:hover {
    background-color: var(--color-bg-tertiary, #f4f4f5);
}

.session-indicator__menu-item:focus-visible {
    outline: 2px solid var(--color-focus-ring, #3b82f6);
    outline-offset: -2px;
}


/* ============================================
 * REASONING SECTION STYLES
 * Collapsible reasoning display for AI model responses
 * ============================================ */

.message-bubble__reasoning {
    margin-bottom: var(--space-2, 0.5rem);
    border-radius: var(--radius-md, 0.375rem);
    background-color: var(--color-bg-tertiary, #f4f4f5);
    border: 1px solid var(--color-border, #e4e4e7);
    overflow: hidden;
}

@media (prefers-color-scheme: dark) {
    .message-bubble__reasoning {
        background-color: var(--color-bg-tertiary, #27272a);
        border-color: var(--color-border, #3f3f46);
    }
}

.message-bubble__reasoning-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    width: 100%;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #71717a);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: background-color var(--duration-fast, 150ms) var(--ease-out);
}

.message-bubble__reasoning-toggle:hover {
    background-color: var(--color-bg-secondary, rgba(0, 0, 0, 0.05));
}

.message-bubble__reasoning-icon {
    font-size: var(--font-size-2xs, 0.625rem);
    color: var(--color-text-tertiary, #a1a1aa);
    transition: transform var(--duration-fast, 150ms) var(--ease-out);
}

.message-bubble__reasoning-label {
    color: var(--color-text-secondary, #71717a);
}

.message-bubble__reasoning-content {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    padding-top: 0;
    border-top: 1px solid var(--color-border, #e4e4e7);
}

.message-bubble__reasoning-item {
    font-size: var(--font-size-xs, 0.75rem);
    line-height: var(--line-height-relaxed, 1.625);
    color: var(--color-text-tertiary, #a1a1aa);
    white-space: pre-wrap;
    word-break: break-word;
}

.message-bubble__reasoning-item+.message-bubble__reasoning-item {
    margin-top: var(--space-2, 0.5rem);
    padding-top: var(--space-2, 0.5rem);
    border-top: 1px dashed var(--color-border, #e4e4e7);
}

/* ============================================
 * MARKDOWN CONTENT STYLES
 * Styling for rendered markdown in assistant messages
 * ============================================ */

.markdown-content {
    font-size: var(--font-size-base, 1rem);
    line-height: var(--line-height-relaxed, 1.625);
    color: inherit;
}

/* Headings */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    margin-top: var(--space-4, 1rem);
    margin-bottom: var(--space-2, 0.5rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--line-height-tight, 1.25);
}

.markdown-content h1:first-child,
.markdown-content h2:first-child,
.markdown-content h3:first-child {
    margin-top: 0;
}

.markdown-content h1 {
    font-size: var(--font-size-xl, 1.25rem);
}

.markdown-content h2 {
    font-size: var(--font-size-lg, 1.125rem);
}

.markdown-content h3 {
    font-size: var(--font-size-base, 1rem);
}

.markdown-content h4 {
    font-size: var(--font-size-sm, 0.875rem);
}

/* Paragraphs */
.markdown-content p {
    margin: 0 0 var(--space-3, 0.75rem) 0;
}

.markdown-content p:last-child {
    margin-bottom: 0;
}

/* Lists */
.markdown-content ul,
.markdown-content ol {
    margin: 0 0 var(--space-3, 0.75rem) 0;
    padding-left: var(--space-5, 1.25rem);
}

.markdown-content li {
    margin-bottom: var(--space-1, 0.25rem);
}

.markdown-content li:last-child {
    margin-bottom: 0;
}

/* Blockquotes */
.markdown-content blockquote {
    margin: var(--space-3, 0.75rem) 0;
    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
    border-left: 3px solid var(--color-interactive-primary, #2563eb);
    background-color: var(--color-bg-tertiary, #f4f4f5);
    border-radius: 0 var(--radius-sm, 0.125rem) var(--radius-sm, 0.125rem) 0;
    color: var(--color-text-secondary, #52525b);
    font-style: italic;
}

/* Inline code */
.markdown-content__code--inline {
    padding: var(--space-0-5, 0.125rem) var(--space-1-5, 0.375rem);
    background-color: var(--color-bg-tertiary, #f4f4f5);
    border-radius: var(--radius-sm, 0.125rem);
    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: 0.875em;
    color: var(--color-text-primary, #18181b);
}

@media (prefers-color-scheme: dark) {
    .markdown-content__code--inline {
        background-color: var(--color-bg-tertiary, #3f3f46);
    }
}

/* Code blocks */
.markdown-content__pre {
    margin: var(--space-3, 0.75rem) 0;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background-color: var(--color-bg-tertiary, #1e1e1e);
    border-radius: var(--radius-md, 0.375rem);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.markdown-content__code {
    display: block;
    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: var(--line-height-relaxed, 1.625);
    color: var(--color-text-inverse, #e4e4e7);
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
}

@media (prefers-color-scheme: light) {
    .markdown-content__pre {
        background-color: #1e1e1e;
    }

    .markdown-content__code {
        color: #e4e4e7;
    }
}

/* Tables */
.markdown-content__table-wrapper {
    margin: var(--space-3, 0.75rem) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md, 0.375rem);
    border: 1px solid var(--color-border, #e4e4e7);
}

.markdown-content__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm, 0.875rem);
}

.markdown-content__table th,
.markdown-content__table td {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    text-align: left;
    border-bottom: 1px solid var(--color-border, #e4e4e7);
}

.markdown-content__table th {
    background-color: var(--color-bg-tertiary, #f4f4f5);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #18181b);
}

.markdown-content__table tr:last-child td {
    border-bottom: none;
}

.markdown-content__table tr:hover td {
    background-color: var(--color-bg-secondary, rgba(0, 0, 0, 0.02));
}

@media (prefers-color-scheme: dark) {
    .markdown-content__table th {
        background-color: var(--color-bg-tertiary, #27272a);
    }
}

/* Links */
.markdown-content__link {
    color: var(--color-interactive-primary, #2563eb);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--duration-fast, 150ms) var(--ease-out);
}

.markdown-content__link:hover {
    color: var(--color-interactive-primary-hover, #1d4ed8);
}

/* Horizontal rule */
.markdown-content hr {
    margin: var(--space-4, 1rem) 0;
    border: none;
    border-top: 1px solid var(--color-border, #e4e4e7);
}

/* Strong and emphasis */
.markdown-content strong {
    font-weight: var(--font-weight-semibold, 600);
}

.markdown-content em {
    font-style: italic;
}

/* Strikethrough */
.markdown-content del {
    text-decoration: line-through;
    color: var(--color-text-tertiary, #a1a1aa);
}

/* Task lists */
.markdown-content input[type="checkbox"] {
    margin-right: var(--space-2, 0.5rem);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .markdown-content {
        font-size: var(--font-size-sm, 0.875rem);
    }

    .markdown-content__pre {
        padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    }

    .markdown-content__code {
        font-size: var(--font-size-xs, 0.75rem);
    }

    .markdown-content__table th,
    .markdown-content__table td {
        padding: var(--space-1-5, 0.375rem) var(--space-2, 0.5rem);
    }
}
