/* ===== FantasyGPT Redesign v3.0 =====
   Template-inspired layout with FFN brand tokens
   Overrides app-shell.css for the new chat UI
   ===================================== */

/* --- CSS Variables for Redesign --- */
:root {
    --gpt-bg: var(--ffn-ed-bg, #f1f5fb);
    --gpt-surface: rgba(255, 255, 255, 0.82);
    --gpt-surface-hover: #edf3fb;
    --gpt-text: var(--brand-text-heading, #0f172a);
    --gpt-text-secondary: var(--ffn-ed-text-muted, #42516c);
    --gpt-text-tertiary: var(--ffn-ed-text-soft, #7d8ca8);
    --gpt-accent: var(--ffn-ed-accent, #0057ff);
    --gpt-accent-dark: #0047d5;
    --gpt-accent-bg: rgba(0, 87, 255, 0.08);
    --gpt-accent-border: rgba(0, 87, 255, 0.18);
    --gpt-bloom-1: var(--brand-navy, #0e2240);
    --gpt-bloom-2: var(--brand-blue, #38b6ff);
    --gpt-bloom-3: rgba(203, 213, 225, 0.9);
    --gpt-panel: rgba(255, 255, 255, 0.72);
    --gpt-panel-strong: rgba(255, 255, 255, 0.86);
    --gpt-border: rgba(7, 16, 31, 0.08);
    --gpt-border-strong: rgba(7, 16, 31, 0.12);
    --gpt-shadow: 0 18px 60px rgba(21, 45, 91, 0.08);
    --gpt-sidebar-w: 280px;
    --gpt-max-msg: 800px;
    --gpt-font-sans: var(--font-body);
    --gpt-font-mono: var(--font-mono);
    --gpt-green: var(--brand-green, #047857);
    --gpt-green-light: var(--brand-green-light, #059669);
}

[data-theme="dark"] {
    --gpt-bg: #08111f;
    --gpt-surface: rgba(17, 27, 44, 0.88);
    --gpt-surface-hover: rgba(24, 38, 57, 0.96);
    --gpt-text: #f3f7ff;
    --gpt-text-secondary: #c2d0e6;
    --gpt-text-tertiary: #8ea2c0;
    --gpt-accent-bg: rgba(99, 180, 255, 0.12);
    --gpt-accent-border: rgba(99, 180, 255, 0.22);
    --gpt-bloom-1: #1e3a5f;
    --gpt-bloom-2: rgba(41, 98, 255, 0.46);
    --gpt-bloom-3: rgba(94, 116, 155, 0.28);
    --gpt-panel: rgba(11, 22, 37, 0.82);
    --gpt-panel-strong: rgba(13, 25, 41, 0.92);
    --gpt-border: rgba(148, 168, 198, 0.16);
    --gpt-border-strong: rgba(148, 168, 198, 0.24);
    --gpt-shadow: 0 24px 64px rgba(2, 8, 17, 0.34);
}

/* --- Animations --- */
@keyframes gpt-drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(3%, 6%) scale(1.05); }
}

@keyframes gpt-msg-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Ambient Canvas (Background Blooms) --- */
.gpt-ambient-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: var(--gpt-bg);
}

.gpt-bloom {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.12;
    mix-blend-mode: multiply;
    animation: gpt-drift 25s infinite alternate ease-in-out;
}

[data-theme="dark"] .gpt-bloom {
    mix-blend-mode: screen;
    opacity: 0.08;
}

.gpt-bloom-1 {
    top: -10%;
    left: 20%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, var(--gpt-bloom-1) 0%, transparent 70%);
    animation-delay: -5s;
}

.gpt-bloom-2 {
    bottom: -20%;
    right: 10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, var(--gpt-bloom-2) 0%, transparent 70%);
    opacity: 0.08;
}

.gpt-bloom-3 {
    top: 40%;
    left: -10%;
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle, var(--gpt-bloom-3) 0%, transparent 70%);
    animation-duration: 30s;
}

/* --- Global Overrides --- */
body.gpt-redesign {
    background: var(--gpt-bg) !important;
    overflow: hidden;
    font-family: var(--gpt-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove old app-container background patterns */
body.gpt-redesign .app-container {
    background: transparent !important;
    position: relative;
    z-index: 10;
}

body.gpt-redesign .app-container::before {
    display: none !important;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); }

[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

/* --- Sidebar Redesign --- */
.sidebar {
    width: var(--gpt-sidebar-w) !important;
    border-right: 1px solid var(--gpt-border) !important;
    background: var(--gpt-panel) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 20 !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar::before {
    display: none !important;
}

[data-theme="dark"] .sidebar {
    background: var(--gpt-panel-strong) !important;
    border-right-color: var(--gpt-border) !important;
}

/* Sidebar Header */
.sidebar-header {
    padding: 1rem !important;
    border-bottom: 1px solid var(--gpt-border) !important;
    margin-bottom: 0 !important;
}

[data-theme="dark"] .sidebar-header {
    border-bottom-color: var(--gpt-border) !important;
}

.sidebar-header-content {
    gap: 0.75rem !important;
    margin-bottom: 0 !important;
}

.sidebar-brand-link {
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

/* Sidebar brand uses the shared FFN wordmark image. */
.sidebar-logo {
    width: clamp(5.75rem, 22vw, 7.5rem) !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

.sidebar-logo-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}

.sidebar-logo::after {
    content: none !important;
}

.sidebar-title {
    font-size: 0.875rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.05em !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--gpt-text) !important;
    background-clip: unset !important;
    filter: none !important;
}

.sidebar-subtitle {
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.64rem !important;
    font-weight: 500 !important;
    color: var(--gpt-text-tertiary) !important;
    letter-spacing: 0.08em !important;
    margin-top: 2px !important;
    opacity: 1 !important;
    text-transform: uppercase !important;
}

/* Sidebar Hamburger */
.sidebar-hamburger {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--gpt-text-tertiary) !important;
    width: 28px !important;
    height: 28px !important;
    padding: 4px !important;
}

.sidebar-hamburger:hover {
    color: var(--gpt-text) !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 4px !important;
    transform: none !important;
}

/* New Chat Button - template "INITIALIZE QUERY" style */
.new-chat-btn {
    width: 100% !important;
    padding: 0.625rem 1rem !important;
    border-radius: 999px !important;
    border: 1px solid var(--gpt-accent-border) !important;
    background: var(--gpt-accent-bg) !important;
    color: var(--gpt-accent) !important;
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
}

.new-chat-btn:hover {
    background: rgba(0, 87, 255, 0.1) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(0, 87, 255, 0.22) !important;
    box-shadow: none !important;
}

/* History Section */
.history-section {
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.history-header {
    padding: 1rem 1rem 0.5rem !important;
}

.history-title {
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.7rem !important;
    color: var(--gpt-text-tertiary) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
}

/* Search Input */
.history-search {
    margin: 0 0.75rem 0.5rem !important;
}

.search-input {
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid var(--gpt-border) !important;
    border-radius: 6px !important;
    padding: 8px 32px 8px 12px !important;
    font-size: 0.82rem !important;
    color: var(--gpt-text) !important;
}

[data-theme="dark"] .search-input {
    background: rgba(17, 27, 44, 0.72) !important;
    border-color: var(--gpt-border) !important;
}

.search-input:focus {
    border-color: var(--gpt-accent) !important;
    box-shadow: 0 0 0 2px rgba(0, 87, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.78) !important;
}

[data-theme="dark"] .search-input:focus {
    border-color: rgba(99, 180, 255, 0.38) !important;
    box-shadow: 0 0 0 2px rgba(99, 180, 255, 0.14) !important;
    background: rgba(17, 27, 44, 0.88) !important;
}

/* Conversation List - Nav Items */
.conversation-list {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0.25rem 0.5rem !important;
}

.conversation-item {
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.85rem !important;
    color: var(--gpt-text-secondary) !important;
    padding: 0.6rem 0.75rem !important;
    border-radius: 6px !important;
    margin-bottom: 2px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.conversation-item::before {
    display: none !important;
}

.conversation-item:hover {
    background: var(--gpt-accent-bg) !important;
    color: var(--gpt-text) !important;
    transform: none !important;
    border: none !important;
}

.conversation-item.active {
    background: var(--gpt-surface) !important;
    color: var(--gpt-text) !important;
    font-weight: 500 !important;
    border: none !important;
}

[data-theme="dark"] .conversation-item.active {
    background: var(--gpt-surface) !important;
}

.conversation-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 !important;
    font-size: 0.82rem !important;
}

.conversation-meta {
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.64rem !important;
    font-weight: 500 !important;
    color: var(--gpt-text-tertiary) !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Sidebar Starter Notes - styled as nav items */
.sidebar-starter-section {
    padding: 0.5rem 0 !important;
}

.sidebar-starter-title {
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.7rem !important;
    color: var(--gpt-text-tertiary) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    padding: 0.25rem 0.5rem !important;
    margin-bottom: 0.25rem !important;
}

.sidebar-starter-item {
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.82rem !important;
    color: var(--gpt-text-secondary) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    border: none !important;
    background: transparent !important;
}

.sidebar-starter-item:hover {
    background: var(--gpt-accent-bg) !important;
    color: var(--gpt-text) !important;
}

.sidebar-starter-item.is-command {
    font-family: var(--gpt-font-mono) !important;
    font-size: 0.75rem !important;
    color: var(--gpt-accent) !important;
}

.sidebar-starter-section.is-chip-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    padding: 0.5rem !important;
}

.sidebar-starter-section.is-chip-grid .sidebar-starter-title {
    width: 100% !important;
}

.sidebar-starter-section.is-chip-grid .sidebar-starter-item {
    width: auto !important;
    display: inline-flex !important;
    padding: 0.35rem 0.75rem !important;
    border: 1px solid var(--gpt-accent-border) !important;
    border-radius: 999px !important;
    font-size: 0.7rem !important;
}

/* Sidebar Actions (bottom) */
.sidebar-actions {
    padding: 0.75rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

[data-theme="dark"] .sidebar-actions {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

.sidebar-button {
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.82rem !important;
    color: var(--gpt-text-secondary) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
}

.sidebar-button:hover {
    background: var(--gpt-accent-bg) !important;
    color: var(--gpt-text) !important;
}

.sidebar-button svg {
    width: 14px !important;
    height: 14px !important;
    color: var(--gpt-text-tertiary) !important;
}

/* Restore Sidebar Button */
.restore-sidebar-btn {
    background: var(--gpt-panel-strong) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid var(--gpt-border) !important;
    border-radius: 6px !important;
    box-shadow: var(--gpt-shadow) !important;
    color: var(--gpt-text-secondary) !important;
}

[data-theme="dark"] .restore-sidebar-btn {
    background: var(--gpt-panel-strong) !important;
    border-color: var(--gpt-border) !important;
}

.restore-sidebar-btn:hover {
    color: var(--gpt-text) !important;
    background: var(--gpt-surface) !important;
    transform: none !important;
}

/* --- Chat Container --- */
.chat-container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* --- Chat Header --- */
.chat-header {
    padding: 0.75rem 1.5rem !important;
    border-bottom: 1px solid var(--gpt-border) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: var(--gpt-panel-strong) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    z-index: 10 !important;
    gap: 0.75rem !important;
    min-height: 4rem !important;
}

[data-theme="dark"] .chat-header {
    background: rgba(8, 17, 31, 0.82) !important;
    border-bottom-color: var(--gpt-border) !important;
}

/* When sidebar is collapsed, shift header left content to make room for restore button */
.app-container.sidebar-hidden .chat-header .header-left,
.sidebar-start-collapsed .chat-header .header-left {
    padding-left: 36px !important;
}

.header-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.header-backlink {
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--ffn-ed-text-muted, #42516c) !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    transition: color 0.2s ease !important;
}

.header-backlink:hover {
    color: var(--gpt-accent) !important;
}

/* Chat Title as Model Selector Badge */
.chat-title {
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--gpt-accent) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: var(--gpt-accent-bg) !important;
    padding: 0.4rem 0.75rem !important;
    border-radius: 999px !important;
    border: 1px solid var(--gpt-accent-border) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* Sports Selector */
.sports-selector {
    order: 0 !important;
}

.sports-dropdown-toggle {
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(7, 16, 31, 0.08) !important;
    background: transparent !important;
    color: var(--ffn-ed-text-muted, #42516c) !important;
    cursor: pointer !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.sports-dropdown-toggle:hover {
    transform: translateY(-2px) !important;
    background: #f8fafc !important;
    border-color: rgba(0, 87, 255, 0.22) !important;
    color: var(--ffn-ed-text, #07101f) !important;
}

/* Header Controls */
.header-controls {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.header-link {
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--ffn-ed-text-muted, #42516c) !important;
    text-decoration: none !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0.5rem 1rem !important;
    border: 1px solid rgba(7, 16, 31, 0.08) !important;
    border-radius: 999px !important;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.header-link:hover {
    transform: translateY(-2px) !important;
    background: #f8fafc !important;
    border-color: rgba(0, 87, 255, 0.22) !important;
    color: var(--ffn-ed-text, #07101f) !important;
}

/* Theme Toggle */
.ffn-ed-theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid var(--gpt-border) !important;
    color: var(--ffn-ed-text-muted, #42516c) !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.ffn-ed-theme-toggle.is-desktop {
    width: 2.9rem !important;
    min-height: 2.9rem !important;
}

.ffn-ed-theme-toggle:hover {
    transform: translateY(-2px) !important;
    background: #f8fafc !important;
    border-color: rgba(0, 87, 255, 0.22) !important;
    color: var(--ffn-ed-text, #07101f) !important;
}

[data-theme="dark"] .ffn-ed-theme-toggle {
    background: rgba(11, 22, 37, 0.82) !important;
    border-color: var(--gpt-border) !important;
    color: var(--gpt-text-secondary) !important;
}

[data-theme="dark"] .ffn-ed-theme-toggle:hover {
    background: rgba(17, 27, 44, 0.94) !important;
    border-color: rgba(99, 180, 255, 0.28) !important;
    color: var(--gpt-text) !important;
}

.ffn-ed-theme-label {
    display: none !important;
}

.ffn-ed-theme-icon-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1rem !important;
    height: 1rem !important;
}

.ffn-ed-theme-icon-wrap svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.ffn-ed-theme-icon--sun {
    opacity: 0 !important;
    transform: scale(0.82) rotate(-16deg) !important;
}

[data-theme="dark"] .ffn-ed-theme-icon--sun {
    opacity: 1 !important;
    transform: scale(1) rotate(0deg) !important;
}

[data-theme="dark"] .ffn-ed-theme-icon--moon {
    opacity: 0 !important;
    transform: scale(0.82) rotate(16deg) !important;
}

/* Auth Buttons */
.auth-button {
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 999px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
    border: none !important;
}

.auth-button::before {
    display: none !important;
}

.auth-button:hover {
    transform: translateY(-2px) !important;
}

.login-button {
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--ffn-ed-text-muted, #42516c) !important;
    border: 1px solid var(--gpt-border) !important;
}

.login-button:hover {
    border-color: rgba(0, 87, 255, 0.22) !important;
    color: var(--ffn-ed-text, #07101f) !important;
    background: #f8fafc !important;
}

.signup-button {
    background: var(--ffn-ed-accent, #0057ff) !important;
    color: white !important;
    box-shadow: 0 18px 48px rgba(0, 87, 255, 0.22) !important;
}

.signup-button:hover {
    background: #0047d5 !important;
}

[data-theme="dark"] .login-button {
    background: rgba(11, 22, 37, 0.82) !important;
    border-color: var(--gpt-border) !important;
    color: var(--gpt-text-secondary) !important;
}

[data-theme="dark"] .login-button:hover {
    border-color: rgba(0, 87, 255, 0.3) !important;
    color: var(--gpt-accent) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* --- Chat Messages Feed --- */
.chat-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 2rem 0 !important;
    scroll-behavior: smooth !important;
    background: transparent !important;
}

/* --- Message Wrappers --- */
.message {
    padding: 1.5rem 1rem !important;
    display: flex !important;
    justify-content: center !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    gap: 0 !important;
    animation: gpt-msg-in 0.3s ease-out !important;
    align-self: stretch !important;
    flex-direction: row !important;
}

.message.user {
    max-width: 100% !important;
    flex-direction: row !important;
    align-self: stretch !important;
}

.message.assistant {
    max-width: 100% !important;
    background: rgba(255, 255, 255, 0.38) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.02) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.02) !important;
}

[data-theme="dark"] .message.assistant {
    background: rgba(11, 22, 37, 0.52) !important;
    border-top-color: rgba(255, 255, 255, 0.03) !important;
    border-bottom-color: rgba(255, 255, 255, 0.03) !important;
}

/* Inner message content - centered, max-width */
.message .message-inner {
    max-width: var(--gpt-max-msg);
    width: 100%;
    display: flex;
    gap: 1.25rem;
}

/* Since we can't easily change the HTML structure for messages via CSS alone,
   let's style the existing .message structure */
.message.user,
.message.assistant {
    padding-left: calc((100% - var(--gpt-max-msg)) / 2) !important;
    padding-right: calc((100% - var(--gpt-max-msg)) / 2) !important;
}

@media (max-width: 880px) {
    .message.user,
    .message.assistant {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Remove conversation container padding since messages handle it */
.conversation-container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* --- Avatars --- */
.message-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-family: var(--gpt-font-mono) !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    margin-top: 0 !important;
}

.message.user .message-avatar {
    background: var(--gpt-text) !important;
    color: white !important;
    box-shadow: none !important;
}

.message.assistant .message-avatar {
    background: var(--gpt-surface) !important;
    border: 1px solid var(--gpt-accent-border) !important;
    color: var(--gpt-accent) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .message.assistant .message-avatar {
    background: var(--gpt-surface) !important;
}

/* --- Message Content --- */
.message-content {
    flex: 1 !important;
    color: var(--gpt-text) !important;
    line-height: 1.6 !important;
    font-size: 1rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.message.user .message-content {
    background: transparent !important;
    color: var(--gpt-text) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-weight: 500 !important;
    font-size: 1.05rem !important;
}

.message.assistant .message-content {
    background: transparent !important;
    color: var(--gpt-text) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
}

.message.error .message-content {
    background: rgba(239, 68, 68, 0.06) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
    padding: 1rem !important;
    border-radius: 8px !important;
}

/* Message text markdown rendering */
.message-text {
    line-height: 1.6 !important;
}

.message-text.md-rendered .md-heading {
    font-family: var(--gpt-font-mono) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--gpt-text-secondary) !important;
    margin-bottom: 0.75rem !important;
    margin-top: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.message-text.md-rendered .md-heading::before {
    content: '' !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    background: var(--gpt-accent) !important;
    border-radius: 1px !important;
    flex-shrink: 0 !important;
}

.message-text.md-rendered h1.md-heading { font-size: 0.9rem !important; }
.message-text.md-rendered h2.md-heading { font-size: 0.85rem !important; }
.message-text.md-rendered h3.md-heading { font-size: 0.82rem !important; }

.message-text.md-rendered .md-inline-code {
    font-family: var(--gpt-font-mono) !important;
    color: var(--gpt-accent) !important;
    background: var(--gpt-accent-bg) !important;
    border: 1px solid var(--gpt-accent-border) !important;
    border-radius: 3px !important;
    padding: 1px 5px !important;
    font-size: 0.88em !important;
}

[data-theme="light"] .message-text.md-rendered .md-inline-code {
    background: var(--gpt-accent-bg) !important;
}

.message-text.md-rendered .md-code-block {
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 8px !important;
    margin: 1rem 0 !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="dark"] .message-text.md-rendered .md-code-block {
    background: rgba(8, 17, 31, 0.94) !important;
    border-color: var(--gpt-border) !important;
}

.message-text.md-rendered .md-code-block code {
    font-family: var(--gpt-font-mono) !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
}

.message-text.md-rendered .md-link {
    color: var(--gpt-accent) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    border-bottom: 1px solid var(--gpt-accent-border) !important;
}

.message-text.md-rendered .md-link:hover {
    border-bottom-color: var(--gpt-accent) !important;
}

[data-theme="light"] .message-text.md-rendered .md-link {
    color: var(--gpt-accent) !important;
}

/* Data tables in messages */
.message-text table,
.message-text .data-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 1.25rem 0 !important;
    font-size: 0.9rem !important;
    background: white !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="dark"] .message-text table,
[data-theme="dark"] .message-text .data-table {
    background: var(--gpt-surface) !important;
}

.message-text table th {
    font-family: var(--gpt-font-mono) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--gpt-text-tertiary) !important;
    background: var(--gpt-surface) !important;
    font-weight: 600 !important;
    padding: 0.625rem 0.75rem !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.message-text table td {
    padding: 0.625rem 0.75rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    font-size: 0.88rem !important;
}

.message-text table tr:last-child td {
    border-bottom: none !important;
}

/* --- Chat Input Container --- */
.chat-input-container {
    padding: 1.5rem !important;
    background: linear-gradient(to top, var(--gpt-bg) 60%, transparent) !important;
    position: relative !important;
    z-index: 10 !important;
    border-top: none !important;
}

[data-theme="dark"] .chat-input-container {
    background: linear-gradient(to top, var(--gpt-bg) 60%, transparent) !important;
}

/* Context Bar */
.chat-context-bar {
    max-width: var(--gpt-max-msg) !important;
}

.chat-context-control {
    border-radius: 6px !important;
    border: 1px solid var(--gpt-border) !important;
    background: rgba(255, 255, 255, 0.52) !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
}

[data-theme="dark"] .chat-context-control {
    background: rgba(11, 22, 37, 0.72) !important;
    border-color: rgba(148, 168, 198, 0.18) !important;
}

.chat-context-label {
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.64rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* Input Box */
.chat-input-wrapper {
    max-width: var(--gpt-max-msg) !important;
    margin: 0 auto !important;
    position: relative !important;
    background: var(--gpt-panel-strong) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border: 1px solid var(--gpt-border) !important;
    border-radius: 1rem !important;
    box-shadow: var(--gpt-shadow) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    padding: 0 !important;
    gap: 0 !important;
    display: block !important;
}

[data-theme="dark"] .chat-input-wrapper {
    background: var(--gpt-panel-strong) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border-color: var(--gpt-border) !important;
    box-shadow: var(--gpt-shadow) !important;
}

.chat-input-wrapper:focus-within {
    border-color: var(--gpt-accent) !important;
    box-shadow: 0 12px 24px -8px rgba(0, 87, 255, 0.15) !important;
    transform: none !important;
}

.chat-input {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 1rem 3.5rem 1rem 1rem !important;
    font-family: var(--gpt-font-sans) !important;
    font-size: 1rem !important;
    color: var(--gpt-text) !important;
    resize: none !important;
    outline: none !important;
    max-height: 200px !important;
    min-height: 48px !important;
    line-height: 1.5 !important;
}

.chat-input::placeholder {
    color: var(--gpt-text-tertiary) !important;
}

/* Send Button */
.send-button,
#send-button {
    position: absolute !important;
    right: 0.6rem !important;
    bottom: 0.6rem !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--ffn-ed-accent, #0057ff) !important;
    border: none !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
    padding: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 87, 255, 0.25) !important;
}

.send-button:hover,
#send-button:hover {
    background: #0047d5 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(0, 87, 255, 0.3) !important;
}

.send-button:active,
#send-button:active {
    transform: scale(0.95) !important;
}

.send-button svg,
#send-button svg {
    width: 18px !important;
    height: 18px !important;
    color: white !important;
}

/* Hide the text label inside the send button (icon-only) */
.send-button .send-button-label,
#send-button .send-button-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Disabled state */
.send-button:disabled,
#send-button:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: var(--gpt-surface) !important;
}

/* Input Footer */
.chat-input-container .input-footer,
.chat-input-container::after {
    text-align: center;
    font-family: var(--gpt-font-sans);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--gpt-text-tertiary);
    margin-top: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Data freshness pill */
.data-freshness-pill {
    border-radius: 999px !important;
    padding: 4px 10px !important;
    min-height: auto !important;
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: rgba(4, 120, 87, 0.06) !important;
}

/* --- Welcome Screen --- */
.welcome-screen {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    padding: 2rem !important;
}

.welcome-sidecar {
    max-width: var(--gpt-max-msg) !important;
    width: 100% !important;
}

/* Chat Top Bar - Smart Routing (left) + Queries (right) */
.chat-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 24px !important;
    position: relative !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
}

/* Floating Model Selector */
.chat-top-bar .floating-model-selector {
    position: static !important;
    margin: 0 !important;
}

/* Rate Limit Meter in top bar */
.chat-top-bar .rate-limit-meter {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    text-align: right !important;
}

/* Legacy floating model selector (for welcome-sidecar remnant) */
.floating-model-selector {
    margin-bottom: 1rem !important;
}

.model-selector-button {
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--gpt-accent) !important;
    background: var(--gpt-accent-bg) !important;
    border: 1px solid var(--gpt-accent-border) !important;
    border-radius: 999px !important;
    padding: 0.5rem 1rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}

.model-selector-button:hover {
    background: rgba(0, 87, 255, 0.1) !important;
    transform: translateY(-2px) !important;
}

/* Rate Limit Meter */
.rate-limit-meter {
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    color: var(--gpt-text-tertiary) !important;
    letter-spacing: 0.04em !important;
}

/* Help Button */
.welcome-help-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: transparent !important;
    color: var(--gpt-text-tertiary) !important;
    font-family: var(--gpt-font-mono) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.welcome-help-btn:hover {
    border-color: var(--gpt-accent-border) !important;
    color: var(--gpt-accent) !important;
}

/* Help Popover */
.welcome-help-popover {
    background: var(--gpt-panel-strong) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border: 1px solid var(--gpt-border) !important;
    border-radius: 1.6rem !important;
    box-shadow: var(--gpt-shadow) !important;
}

[data-theme="dark"] .welcome-help-popover {
    background: var(--gpt-panel-strong) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border-color: var(--gpt-border) !important;
}

.help-popover-title {
    font-family: var(--gpt-font-sans) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.help-tab-btn {
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.help-tab-btn.is-active {
    color: var(--gpt-accent) !important;
    border-bottom-color: var(--gpt-accent) !important;
}

/* --- Online Status --- */
.online-status {
    font-family: var(--gpt-font-sans) !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
}

/* --- Sidebar overlay: plain dim scrim, no blur --- */
.sidebar-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.3) !important;
}

/* --- Mobile Responsive --- */
/* Sidebar rules handled authoritatively in app-shell.css (MOBILE UX FIXES section) */
@media (max-width: 768px) {
    /* -- STACKING CONTEXT FIX -- */
    /* app-container has z-index:10 which traps the sidebar (z-index:1000) inside it.
       The sidebar-overlay (z-index:999) is OUTSIDE app-container, so it renders
       ON TOP of the entire app-container, blurring/tinting the sidebar.
       Fix: remove z-index on mobile so sidebar escapes to root stacking context. */
    body.gpt-redesign .app-container {
        z-index: auto !important;
    }

    /* -- Header fixes -- */
    .chat-header {
        min-height: 52px !important;
        padding: 10px 16px !important;
        gap: 8px !important;
    }

    /* Mobile menu button: override old green gradient from app-shell */
    .mobile-menu-btn {
        background: transparent !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        color: var(--gpt-text-secondary) !important;
        box-shadow: none !important;
    }

    [data-theme="dark"] .mobile-menu-btn {
        border-color: rgba(255, 255, 255, 0.08) !important;
        color: var(--gpt-text-tertiary) !important;
    }

    /* Remove ghost padding from desktop restore-button offset */
    .app-container.sidebar-hidden .chat-header .header-left,
    .sidebar-start-collapsed .chat-header .header-left {
        padding-left: 0 !important;
    }

    /* Hide pricing link on mobile -- accessible via sidebar or other pages */
    .header-link {
        display: none !important;
    }

    .auth-button-label {
        display: none !important;
    }

    /* -- Top bar -- */
    .chat-top-bar {
        padding: 8px 16px !important;
    }

    .chat-top-bar .floating-model-selector .model-selector-button {
        font-size: 0.7rem !important;
        padding: 0.35rem 0.75rem !important;
    }

    .chat-top-bar .rate-limit-meter {
        font-size: 0.65rem !important;
    }

    /* -- Sidebar: fully opaque on mobile (overlays chat content) -- */
    /* z-index MUST be > 999 (overlay) -- base rule sets 20 !important which loses to overlay's 999 */
    .sidebar,
    .sidebar.mobile-open,
    .sidebar.hidden.mobile-open {
        width: 320px !important;
        transition: left 0.3s ease !important;
        background: #eff4fb !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 1 !important;
        z-index: 1000 !important;
    }

    [data-theme="dark"] .sidebar,
    [data-theme="dark"] .sidebar.mobile-open,
    [data-theme="dark"] .sidebar.hidden.mobile-open {
        background: #08111f !important;
    }

    .sidebar-header {
        background: #eff4fb !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    [data-theme="dark"] .sidebar-header {
        background: #08111f !important;
    }

    .sidebar-actions {
        background: #eff4fb !important;
    }

    [data-theme="dark"] .sidebar-actions {
        background: #08111f !important;
    }

    /* -- Messages: proper mobile spacing -- */
    .message.user,
    .message.assistant {
        padding: 0.75rem 1rem !important;
    }

    .message {
        gap: 0.75rem !important;
    }

    .message-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.7rem !important;
    }

    /* Horizontal scroll for tables and code on mobile */
    .message-text table,
    .message-text .data-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(0, 0, 0, 0.15) transparent !important;
    }
    .message-text table::-webkit-scrollbar,
    .message-text .data-table::-webkit-scrollbar { height: 6px; }
    .message-text table::-webkit-scrollbar-thumb,
    .message-text .data-table::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.15);
        border-radius: 3px;
    }

    .message-text.md-rendered .md-code-block {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .message-text pre {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* -- Chat input -- */
    .chat-input-container {
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .chat-input-wrapper {
        max-width: 100% !important;
        border-radius: 1rem !important;
    }

    .chat-input {
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 0.75rem 3rem 0.75rem 0.75rem !important;
        min-height: 44px !important;
    }

    /* -- Welcome screen: scrollable on mobile -- */
    .welcome-screen {
        padding: 1.25rem 1rem !important;
        overflow-y: auto !important;
        justify-content: flex-start !important;
    }

    /* -- Background -- */
    .gpt-bloom {
        animation: none;
        filter: blur(80px);
    }
}

/* Desktop: hide mobile menu button */
@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none !important;
    }

    .sidebar.hidden {
        transform: translateX(-100%) !important;
        width: 0 !important;
        min-width: 0 !important;
        flex: 0 0 0 !important;
        border: none !important;
        padding: 0 !important;
    }

    .sidebar.hidden > * {
        display: none !important;
    }

    .app-container.sidebar-hidden .chat-container {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* FOUC-prevention: sidebar-start-collapsed is set on <html> before JS loads */
    .sidebar-start-collapsed .sidebar {
        transform: translateX(-100%) !important;
        width: 0 !important;
        min-width: 0 !important;
        flex: 0 0 0 !important;
        border: none !important;
        padding: 0 !important;
    }

    .sidebar-start-collapsed .sidebar > * {
        display: none !important;
    }

    .sidebar-start-collapsed .chat-container {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .sidebar-start-collapsed .restore-sidebar-btn,
    .app-container.sidebar-hidden .restore-sidebar-btn {
        display: flex !important;
    }

    .restore-sidebar-btn {
        top: 12px !important;
        left: 12px !important;
    }
}

/* --- Typing Indicator --- */
/* JS creates .typing-dots, not .typing-indicator */
.typing-dots {
    display: flex !important;
    gap: 4px !important;
    padding: 8px 0 !important;
    align-items: center !important;
}

.typing-dots span {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--gpt-accent) !important;
    opacity: 0.4 !important;
    animation: gpt-typing-pulse 1.4s infinite ease-in-out !important;
}

.typing-dots span:nth-child(1) { animation-delay: 0s !important; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s !important; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s !important; }

@keyframes gpt-typing-pulse {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
}

/* --- Perimeter Meta (decorative side labels) --- */
.gpt-perimeter-meta {
    position: fixed;
    z-index: 5;
    font-family: var(--gpt-font-sans);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gpt-text-tertiary);
    text-transform: uppercase;
    pointer-events: none;
    display: none;
}

@media (min-width: 1200px) {
    .gpt-perimeter-meta {
        display: block;
    }

    .gpt-meta-left {
        top: 50%;
        left: 2rem;
        transform: translateY(-50%) rotate(-90deg);
        transform-origin: left center;
    }

    .gpt-meta-right {
        top: 50%;
        right: 2rem;
        transform: translateY(-50%) rotate(90deg);
        transform-origin: right center;
    }
}

/* --- Print --- */
@media print {
    .gpt-ambient-canvas,
    .gpt-perimeter-meta,
    .sidebar,
    .chat-input-container {
        display: none !important;
    }

    .message {
        break-inside: avoid;
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .gpt-bloom {
        animation: none !important;
    }

    .message {
        animation: none !important;
    }
}