/* ============================================================
   chat-overrides.css — restyles the /chat interface to match the
   HOME (landing) design language: sky-blue accent, clean elevated
   surfaces, hero-style composer. Loaded AFTER chat.css so it wins.
   All chat.js selectors (.message-input, .send-button, #modelSelector,
   .message*, .typing-indicator, .action-btn, …) are preserved.
   ============================================================ */

/* Page background matches home */
body { background: var(--bg-base) !important; }

/* Kill the legacy purple orbs on the chat page (home provides its own ambient bg) */
body::before,
body::after { content: none !important; display: none !important; }

/* ---------- Layout column ---------- */
.container {
    max-width: 920px !important;
    width: 100% !important;
    padding: var(--space-5) !important;
    padding-top: calc(var(--nav-height) + 2 * var(--space-4) + 7vh) !important;
    gap: var(--space-4);
}
.container.chat-active {
    padding-top: calc(var(--nav-height) + 2 * var(--space-4)) !important;
    justify-content: flex-start !important;
}

/* ---------- Hero title (matches landing h1) ---------- */
.page-title {
    font-size: clamp(2rem, 5vw, var(--text-4xl)) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: var(--leading-tight) !important;
    text-align: center;
    max-width: 16ch;
    margin: 0 auto var(--space-3) !important;
    color: var(--text) !important;
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    animation: none !important;
}
.page-text {
    text-align: center;
    max-width: 52ch;
    margin: 0 auto var(--space-5) !important;
    color: var(--text-muted) !important;
    font-size: var(--text-lg) !important;
}

/* ---------- Chat messages list ---------- */
.chat-messages {
    gap: var(--space-4) !important;
    padding-top: var(--space-2) !important;
    padding-bottom: var(--space-2) !important;
}
.chat-messages.active {
    background: transparent !important;
    border: none !important;
}

/* ---------- Composer (hero-chat style) ---------- */
/* Replaces the legacy .card input. chat.js only needs .message-input,
   .send-button and #modelSelector, so the wrapper class is free to change. */
.chat-composer {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex-shrink: 0;
    transition: border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}
.chat-composer:focus-within {
    border-color: var(--accent);
    box-shadow: var(--shadow-lg), 0 0 0 4px var(--accent-soft);
}
.chat-composer .message-input {
    width: 100%;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    resize: none;
    color: var(--text) !important;
    font-size: var(--text-base) !important;
    font-family: inherit !important;
    line-height: var(--leading-normal) !important;
    padding: 0.5em 0.5em !important;
    min-height: 1.6em;
    max-height: 220px;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.chat-composer .message-input::placeholder { color: var(--text-faint) !important; }
.chat-composer__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-1);
}

/* ---------- Model selector (subtle pill) ---------- */
.model-selector-inline {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    height: 2.2em !important;
    padding: 0 1.8em 0 0.9em !important;
    font-size: var(--text-sm) !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    background-color: var(--surface) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.6em center !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-full) !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast);
}
.model-selector-inline:hover { color: var(--accent) !important; border-color: var(--accent) !important; }
.model-selector-inline:focus { outline: none !important; border-color: var(--accent) !important; }
.model-selector-inline:disabled { opacity: 0.6 !important; }
.model-selector-inline option,
.model-selector-inline optgroup { background: var(--bg-elevated) !important; color: var(--text) !important; }

/* ---------- Send button (accent circle, inline in composer bar) ---------- */
.send-button {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    width: 2.6em !important;
    height: 2.6em !important;
    min-width: 2.6em !important;
    border-radius: var(--radius-md) !important;
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--shadow-glow) !important;
    margin-left: auto !important;
    animation: none !important;
    transition: background var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out) !important;
}
.send-button:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 44px var(--sky-glow) !important;
}
.send-button:active { transform: translateY(0) !important; }
.send-button .send-icon,
.send-button .loading-icon,
.send-button .stop-icon {
    width: 1.3em !important;
    height: 1.3em !important;
    position: absolute !important;
}
.send-button .send-icon { transform: none !important; opacity: 1; }
.send-button:hover .send-icon { transform: none !important; }
/* loading + stopping states (chat.js toggles these) */
.send-button.loading { pointer-events: none; }
.send-button.loading .send-icon { opacity: 0 !important; }
.send-button.loading .loading-icon { opacity: 1 !important; transform: scale(1) !important; animation: spin 1s linear infinite; }
.send-button.stopping {
    background: #ef4444 !important;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35) !important;
}
.send-button.stopping:hover { background: #dc2626 !important; }
.send-button.stopping .send-icon { opacity: 0 !important; }
.send-button.stopping .stop-icon { opacity: 1 !important; transform: scale(1) !important; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Message bubbles ---------- */
.message-bubble {
    max-width: 80% !important;
    padding: var(--space-4) var(--space-5) !important;
    font-size: var(--text-base) !important;
    line-height: var(--leading-normal) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: none !important;
    word-wrap: break-word !important;
}
.message.user .message-bubble {
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
    border: none !important;
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg) !important;
    margin-left: auto !important;
}
.message.ai .message-bubble {
    background: var(--bg-elevated) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs) !important;
}
.message.error { justify-content: center !important; }
.message-bubble.error-bubble {
    background: rgba(239, 68, 68, 0.10) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
    max-width: 90% !important;
}
/* Markdown inside AI bubbles follows the design tokens */
.message.ai .message-bubble h1,
.message.ai .message-bubble h2,
.message.ai .message-bubble h3,
.message.ai .message-bubble h4 { color: var(--text) !important; }
.message.ai .message-bubble a { color: var(--accent) !important; }
.message.ai .message-bubble code {
    background: var(--surface) !important;
    color: var(--accent) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xs) !important;
}
.message.ai .message-bubble pre {
    background: var(--bg-sunken) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
}
.message.ai .message-bubble pre code { color: var(--text) !important; border: none !important; background: none !important; }
.message.ai .message-bubble blockquote {
    border-left: 3px solid var(--accent) !important;
    color: var(--text-muted) !important;
}

/* ---------- Typing indicator ---------- */
.typing-indicator { padding: var(--space-3) var(--space-4) !important; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); width: fit-content; }
.typing-indicator span { background: var(--accent) !important; }

/* ---------- Action buttons (auth/payment prompts from the agent) ---------- */
.chat-action-container { margin-top: var(--space-3) !important; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.action-btn {
    display: inline-flex !important;
    align-items: center;
    gap: var(--space-2);
    padding: 0.6em 1.2em !important;
    font-size: var(--text-sm) !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
    border: 1px solid var(--accent) !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background var(--dur-fast), transform var(--dur-fast) !important;
}
.action-btn:hover {
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
    transform: translateY(-1px) !important;
}

/* ---------- Floating side buttons (history / deployments) ----------
   Original positions sat at top:32px / 92px — directly behind the floating
   navbar (z-1000), hiding the history (conversations) button. Drop both
   below the navbar band so they stack visibly: conversations on top,
   deployments/projects beneath — as before. */
.history-btn {
    top: calc(var(--nav-height) + 2 * var(--space-4) + var(--space-3)) !important;
}
.deployments-btn {
    top: calc(var(--nav-height) + 2 * var(--space-4) + var(--space-3) + 62px) !important;
}
.history-btn,
.deployments-btn {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    box-shadow: var(--shadow-md) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) !important;
}
.history-btn:hover,
.deployments-btn:hover {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ---------- Sidebars: swap legacy purple for the sky-blue accent ---------- */
.history-sidebar,
.history-sidebar * { scrollbar-color: var(--border-strong) transparent; }
.new-conversation-btn {
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
    box-shadow: var(--shadow-glow) !important;
}
.new-conversation-btn:hover { background: var(--accent-hover) !important; }
.sidebar-tab.active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
.project-item.has-code:hover { border-color: var(--accent) !important; }

/* ---------- Loading overlay (model init) ---------- */
.loading-overlay { background: rgba(7, 8, 12, 0.92) !important; }
.loading-content h2 { color: var(--text) !important; }
.progress-fill { background: var(--accent) !important; }
.loading-spinner-large { border-top-color: var(--accent) !important; }

/* ---------- History / Projects drawer ----------
   The deployments/projects button reuses #historySidebar, so this single
   restyle covers both. Full-height side panel anchored to the left edge. */
.history-sidebar {
    top: 0 !important;
    left: -360px !important;
    width: 350px !important;
    max-width: calc(100vw - 2 * var(--space-4)) !important;
    height: 100vh !important;
    background: var(--bg-elevated) !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-lg) !important;
    transition: left var(--dur) var(--ease-out) !important;
    z-index: var(--z-dropdown) !important;
}
.history-sidebar.open { left: 0 !important; }

.history-header {
    padding: var(--space-4) var(--space-5) !important;
    border-bottom: 1px solid var(--border) !important;
}
.history-header__actions { display: inline-flex; align-items: center; gap: var(--space-2); }
.history-header h3,
.history-header h2 { color: var(--text) !important; font-size: var(--text-lg) !important; margin: 0 !important; }
.close-history-btn {
    color: var(--text-muted) !important;
    border-radius: var(--radius-sm) !important;
    width: 2em; height: 2em; font-size: var(--text-lg);
    display: inline-flex; align-items: center; justify-content: center;
}
.close-history-btn:hover { background: var(--surface-hover) !important; color: var(--text) !important; }

/* New-conversation: discrete icon button (same styling as the close button) */
.new-conversation-btn {
    width: 2em !important;
    height: 2em !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-muted) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast) !important;
}
.new-conversation-btn:hover {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
    transform: none !important;
    box-shadow: none !important;
}
.new-conversation-btn svg { width: 1.05em !important; height: 1.05em !important; }

.history-content { padding: var(--space-3) !important; }
.history-loading { color: var(--text-muted) !important; padding: var(--space-6) !important; }

.conversation-item {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-3) var(--space-4) !important;
    margin-bottom: var(--space-2) !important;
    transition: background var(--dur-fast), border-color var(--dur-fast) !important;
}
.conversation-item:hover {
    background: var(--surface-hover) !important;
    border-color: var(--accent) !important;
    transform: none !important;
}
.conversation-item.active {
    background: var(--accent-soft) !important;
    border: 1px solid var(--accent) !important;
    box-shadow: none !important;
}
.conversation-item.active .conversation-title { color: var(--accent) !important; }
.conversation-title { color: var(--text) !important; }
.conversation-meta { color: var(--text-muted) !important; }

.deployment-badge { background: var(--accent-soft) !important; color: var(--accent) !important; border-radius: var(--radius-full) !important; }
.deployment-group-header {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
}

/* Tabs inside the drawer (Projects / Deployments) */
.sidebar-tab-bar { border-bottom: 1px solid var(--border) !important; }
.sidebar-tab { color: var(--text-muted) !important; border-bottom: 2px solid transparent !important; }
.sidebar-tab:hover { color: var(--text) !important; background: var(--surface) !important; }
.sidebar-tab.active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
.project-item { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; }
.project-item.has-code:hover { border-color: var(--accent) !important; background: var(--surface-hover) !important; }

/* Overlay behind the drawer */
.history-overlay {
    background: rgba(5, 6, 10, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}