/* Sovereign Console — Extracted from index.ejs Sprint 19.19 */
/* Sovereign Scrollbar - Industrial Precision */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }

/* Sovereign Transitions */
.sovereign-transition { transition: all 0.15s ease-in-out; }

/* ═══ MODAL COLOR ARCHITECTURE — Sprint 19.2 ═══ */
/* P1-21: Hearts per mode. Every message, every bubble, every badge
   carries the color of the cognitive gear that produced it.
   Social 💚 Green | Brainstorm 🩵 Cyan | Execution 💜 Purple | Sixdots ❤️ Red | Shadow 🖤 Black */
:root {
    --mode-social:      #10b981;  /* emerald-500 */
    --mode-brainstorm:  #22d3ee;  /* cyan-400 */
    --mode-execution:   #a855f7;  /* purple-500 */
    --mode-hot:         #ef4444;  /* red-500 (sixdots/evaluation) */
    --mode-shadow:      #64748b;  /* slate-500 (ash/inversion) */
    --mode-social-bg:      rgba(16, 185, 129, 0.08);
    --mode-brainstorm-bg:  rgba(34, 211, 238, 0.08);
    --mode-execution-bg:   rgba(168, 85, 247, 0.08);
    --mode-hot-bg:         rgba(239, 68, 68, 0.08);
    --mode-shadow-bg:      rgba(100, 116, 139, 0.08);
}

/* Mode bubble border tinting — applied to assistant messages */
.bubble-mode-social     { border-left-color: var(--mode-social) !important; }
.bubble-mode-brainstorm { border-left-color: var(--mode-brainstorm) !important; }
.bubble-mode-execution  { border-left-color: var(--mode-execution) !important; }
.bubble-mode-hot        { border-left-color: var(--mode-hot) !important; }
.bubble-mode-shadow     { border-left-color: var(--mode-shadow) !important; }
.bubble-mode-sixdots    { border-left-color: var(--mode-hot) !important; }

/* Mode bubble subtle background wash */
.bubble-mode-social     { background: linear-gradient(135deg, var(--mode-social-bg), #0f172a 60%) !important; }
.bubble-mode-brainstorm { background: linear-gradient(135deg, var(--mode-brainstorm-bg), #0f172a 60%) !important; }
.bubble-mode-execution  { background: linear-gradient(135deg, var(--mode-execution-bg), #0f172a 60%) !important; }
.bubble-mode-hot        { background: linear-gradient(135deg, var(--mode-hot-bg), #0f172a 60%) !important; }
.bubble-mode-shadow     { background: linear-gradient(135deg, var(--mode-shadow-bg), #0f172a 60%) !important; }
.bubble-mode-sixdots    { background: linear-gradient(135deg, var(--mode-hot-bg), #0f172a 60%) !important; }

/* Mode badge pill — colored per active mode */
.mode-badge-social     { background: rgba(16,185,129,0.15) !important; color: var(--mode-social) !important; border-color: rgba(16,185,129,0.3) !important; }
.mode-badge-brainstorm { background: rgba(34,211,238,0.15) !important; color: var(--mode-brainstorm) !important; border-color: rgba(34,211,238,0.3) !important; }
.mode-badge-execution  { background: rgba(168,85,247,0.15) !important; color: var(--mode-execution) !important; border-color: rgba(168,85,247,0.3) !important; }
.mode-badge-hot        { background: rgba(239,68,68,0.15) !important; color: var(--mode-hot) !important; border-color: rgba(239,68,68,0.3) !important; }
.mode-badge-shadow     { background: rgba(100,116,139,0.15) !important; color: var(--mode-shadow) !important; border-color: rgba(100,116,139,0.3) !important; }
.mode-badge-sixdots    { background: rgba(239,68,68,0.15) !important; color: var(--mode-hot) !important; border-color: rgba(239,68,68,0.3) !important; }

/* Mode button active ring colors */
.mode-ring-social     { --tw-ring-color: var(--mode-social) !important; }
.mode-ring-brainstorm { --tw-ring-color: var(--mode-brainstorm) !important; }
.mode-ring-execution  { --tw-ring-color: var(--mode-execution) !important; }
.mode-ring-hot        { --tw-ring-color: var(--mode-hot) !important; }
.mode-ring-shadow     { --tw-ring-color: var(--mode-shadow) !important; }
.mode-ring-sixdots    { --tw-ring-color: var(--mode-hot) !important; }

/* Heart label color for SOVEREIGN AI label */
.label-mode-social     { color: var(--mode-social) !important; }
.label-mode-brainstorm { color: var(--mode-brainstorm) !important; }
.label-mode-execution  { color: var(--mode-execution) !important; }
.label-mode-hot        { color: var(--mode-hot) !important; }
.label-mode-shadow     { color: var(--mode-shadow) !important; }
.label-mode-sixdots    { color: var(--mode-hot) !important; }

/* Resize Handle Styling (P1-1) */
aside::-webkit-resizer {
    background: linear-gradient(135deg, transparent 40%, #facc15 40%, #facc15 60%, transparent 60%);
    border: none;
}

/* Active Project Glow */
.project-active { 
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.4);
    border-color: rgb(250, 204, 21);
}

/* HTMX Settling State - Sprint 5.3 */
.htmx-settling {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
}

/* ═══ ARTIFACT SYSTEM — Sprint 10.1d ═══ */

/* Artifact Panel Transition */
#artifact-panel {
    transition: width 0.2s ease-out, opacity 0.2s ease-out;
    width: 0;
    opacity: 0;
}
#artifact-panel.artifact-panel-open {
    width: 480px;
    opacity: 1;
}

/* Artifact Inline Card (in chat) */
.artifact-card {
    cursor: pointer;
    margin: 12px 0;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    transition: all 0.15s ease;
}
.artifact-card:hover {
    border-color: #fbbf24;
    background: linear-gradient(135deg, #1e293b 0%, #172133 100%);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
}
.artifact-card-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}
.artifact-card-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.artifact-card-title {
    color: #f59e0b;
    font-weight: 700;
    font-size: 13px;
}
.artifact-card-meta {
    color: #64748b;
    font-size: 10px;
    font-family: monospace;
}
.artifact-card-action {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.artifact-card:hover .artifact-card-action {
    color: #f59e0b;
}

/* Artifact Tab Styles */
.artifact-tab-active {
    color: #f59e0b;
    border-bottom: 2px solid #f59e0b;
}
.artifact-tab-inactive {
    color: #64748b;
    border-bottom: 2px solid transparent;
}
.artifact-tab-inactive:hover {
    color: #94a3b8;
}

/* Artifact Code Block */
#artifact-code-view pre {
    margin: 0;
    background: transparent !important;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
#artifact-code-view code {
    font-size: 13px;
    line-height: 1.6;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ═══ RESIZABLE SPLITTERS — R2-02a ═══ */
.splitter-handle {
    width: 5px;
    cursor: col-resize;
    background: transparent;
    position: relative;
    flex-shrink: 0;
    z-index: 10;
    transition: background 0.15s;
}
.splitter-handle:hover,
.splitter-handle.dragging {
    background: rgba(245, 158, 11, 0.3);
}
.splitter-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 32px;
    border-radius: 2px;
    background: #334155;
    transition: background 0.15s;
}
.splitter-handle:hover::after,
.splitter-handle.dragging::after {
    background: #f59e0b;
}

/* Version nav disabled state */
.version-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ═══ HEARTBEAT DASHBOARD — Sprint 19.5 (P1-20) ═══ */
@keyframes heartbeat-pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    14% { transform: scale(1.4); opacity: 1; }
    28% { transform: scale(1); opacity: 0.8; }
    42% { transform: scale(1.25); opacity: 1; }
    56% { transform: scale(1); opacity: 0.8; }
}
@keyframes heartbeat-ring {
    0%, 100% { transform: scale(1); opacity: 0; }
    14% { transform: scale(2.2); opacity: 0.4; }
    42% { transform: scale(2); opacity: 0.3; }
    70% { opacity: 0; }
}
.heartbeat-dot {
    width: 8px; height: 8px; border-radius: 50%;
    animation: heartbeat-pulse 2s ease-in-out infinite;
    position: relative;
}
.heartbeat-dot::after {
    content: ''; position: absolute; inset: -2px;
    border-radius: 50%; border: 1px solid currentColor;
    animation: heartbeat-ring 2s ease-in-out infinite;
}
.heartbeat-dot.alive { background: #10b981; color: #10b981; }
.heartbeat-dot.dormant { background: #f59e0b; color: #f59e0b; animation-duration: 3s; }
.heartbeat-dot.dormant::after { animation-duration: 3s; }
.heartbeat-dot.critical { background: #ef4444; color: #ef4444; animation: none; opacity: 0.4; }
.heartbeat-dot.critical::after { animation: none; }

.heartbeat-bar {
    width: 100%; min-height: 2px; border-radius: 1px 1px 0 0;
    transition: height 0.3s ease;
}

/* Error Toast Animation */
@keyframes toast-slide {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.toast-animate {
    animation: toast-slide 0.3s ease-out;
}

/* ═══ MOBILE RESPONSIVE — Sprint 10.4 ═══ */

/* Sidebar overlay on mobile */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 40;
}
#sidebar-overlay.active { display: block; }

@media (max-width: 768px) {
    /* Full-screen app shell on mobile */
    body { background: #0f172a !important; }
    #app-shell {
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        border: none !important;
        resize: none !important;
        box-shadow: none !important;
    }

    /* Sidebar: hidden by default, slide-in overlay */
    #sidebar {
        position: fixed !important;
        left: 0; top: 0; bottom: 0;
        z-index: 45;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 85vw !important;
        transform: translateX(-100%);
        transition: transform 0.2s ease-out;
        resize: none !important;
    }
    #sidebar.sidebar-open {
        transform: translateX(0);
    }

    /* Show hamburger on mobile */
    #mobile-hamburger { display: flex !important; }

    /* Button row: compact, scrollable */
    #button-row {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 4px !important;
        padding: 6px 8px !important;
    }
    #button-row::-webkit-scrollbar { display: none; }

    /* Mode buttons: icon-only on mobile */
    .mode-btn .mode-label { display: none; }
    .mode-btn { padding: 8px 10px !important; min-width: auto !important; gap: 0 !important; flex-shrink: 0; }

    /* Model selector: compact */
    #model-selector { font-size: 10px; max-width: 120px; padding: 6px 20px 6px 6px !important; }

    /* Utility buttons: icon-only */
    .toolbar-label { display: none !important; }
    .toolbar-btn { padding: 8px 10px !important; gap: 0 !important; flex-shrink: 0; }

    /* Remove flex spacer that pushes MCP/Voice/Metal off-screen */
    #button-row > .flex-1 { display: none !important; }

    /* Prevent button wrapper divs from shrinking */
    #button-row > div { flex-shrink: 0; }

    /* Speed Dial panel: fixed overlay on mobile — anchored to bottom for full scroll access */
    #speed-dial-panel {
        position: fixed !important;
        top: 60px !important;
        bottom: 8px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-height: none !important;
        margin-top: 0 !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
    }

    /* MCP status: shorter text  */
    #mcp-status-text { font-size: 9px; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Context status bar: compact */
    #context-status-bar { padding: 4px 8px !important; gap: 4px !important; font-size: 8px; }

    /* Chat input area: full width textarea */
    #chat-input { font-size: 16px !important; /* prevents iOS zoom */ }

    /* Mobile input bar: textarea on top row, all buttons on bottom row */
    #chat-input-bar { flex-wrap: wrap !important; gap: 6px !important; }
    #chat-input-bar #chat-input { order: -1; width: 100% !important; flex: 0 0 100% !important; min-height: 56px; max-height: 150px; margin-bottom: 2px; rows: 2; font-size: 16px !important; }
    #chat-input-bar .chat-btn-group { display: flex; gap: 4px; margin-left: auto; }
    #chat-input-bar > .relative { order: 1; } /* attach button in bottom row */

    /* Sprint 19.1: Compose expand button — visible on mobile only */
    #compose-expand-btn { display: flex !important; }

    /* Sprint 21.9: Mic button — own full-width row between textarea and buttons on mobile */
    #chat-input-bar > #mic-btn {
        order: 0;
        flex: 0 0 100% !important;
        justify-content: center !important;
        padding: 14px 16px !important;
        border-width: 2px !important;
    }
    #chat-input-bar > #mic-btn #mic-label { display: inline !important; }

    /* Sprint 19.1: Retry button — 44px minimum touch target on mobile */
    .retry-btn-mobile { min-height: 44px !important; min-width: 44px !important; padding: 10px 16px !important; font-size: 14px !important; }

    /* Project anchor: compact */
    #active-project-anchor { padding: 8px 12px !important; font-size: 12px; }
    #active-project-anchor .text-sm { display: none; }
    #active-project-id-label { display: none; }

    /* Sprint 21.26: Search grounding — bigger touch target on mobile */
    #search-grounding-btn { min-height: 44px; min-width: 44px; }

    /* Artifact panel: full-screen overlay on mobile */
    #artifact-panel.artifact-panel-open {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        z-index: 50;
        border: none !important;
    }

    /* Hide splitters on mobile — no room for drag handles */
    .splitter-handle { display: none !important; }

    /* Sprint 21.2: Dictation Studio header — wrap actions on mobile so Clear is visible */
    #dictation-modal > div:first-child {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Playback console: compact */
    #playback-console .mobile-hide { display: none !important; }

    /* Scroll-to-bottom button: mobile position */
    #scroll-bottom-btn { bottom: 180px !important; right: 12px !important; }

    /* ═══ MOBILE COMMAND STRIP — R2-06 ═══ */
    /* Voice panel: fixed overlay on mobile */
    #voice-panel {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100vw !important;
        max-height: 75vh !important;
        z-index: 60 !important;
        border-radius: 12px 12px 0 0 !important;
        border: none !important;
        border-top: 2px solid rgba(245, 158, 11, 0.4) !important;
        margin: 0 !important;
    }

    /* MCP dropdown: fixed overlay on mobile */
    #mcp-dropdown {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100vw !important;
        max-height: 75vh !important;
        z-index: 60 !important;
        border-radius: 12px 12px 0 0 !important;
        border: none !important;
        border-top: 2px solid rgba(16, 185, 129, 0.4) !important;
        margin: 0 !important;
    }

    /* Sovereign tools panel: hidden on mobile (Metal = always on, no toggle needed) */
    #sovereign-tools-toggle { display: none !important; }
    #sovereign-tools-panel { display: none !important; }

    /* Spotify Jukebox panel: fixed overlay on mobile */
    #spotify-jukebox-panel {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100vw !important;
        max-height: 75vh !important;
        z-index: 60 !important;
        border-radius: 12px 12px 0 0 !important;
        border: none !important;
        border-top: 2px solid rgba(34, 197, 94, 0.4) !important;
        margin: 0 !important;
    }

    /* Mobile panel backdrop */
    .mobile-panel-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.7);
        z-index: 59;
    }

    /* Modals: tighter padding, full width */
    .modal-content { max-width: 95vw !important; margin: 8px !important; }

    /* ═══ MOBILE MEETING FULL-PAGE — H-ENG Directive 4 ═══ */
    /* When a meeting is open, hide the main cockpit footer to maximise message space */
    .meeting-active #chat-input-area { display: none !important; }
    .meeting-active #scroll-bottom-btn { display: none !important; }
    .meeting-active #mobile-hamburger { display: none !important; }

    /* Meeting action buttons: icon-only, no wrapping */
    .meeting-active .meeting-action-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 4px !important;
        margin-bottom: 2px !important;
    }
    .meeting-active .meeting-action-bar::-webkit-scrollbar { display: none; }
    .meeting-active .meeting-action-bar button {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .meeting-active .meeting-action-bar .meeting-btn-label { display: none; }

    /* Meeting chat window: remove padding, full height */
    .meeting-active #chat-window {
        padding: 0 !important;
    }

    /* Great Hall: roster sidebar handled by inline CSS transform approach (index.ejs STAMP-009h/j) */
    /* Mobile toggle uses .gh-sidebar-open class */

    /* Great Hall: compact header on mobile */
    #great-hall-header { padding: 6px 8px !important; gap: 6px !important; flex-wrap: wrap !important; }
    #great-hall-header .toolbar-label { display: none !important; }
    /* Great Hall: textarea size on mobile (prevent iOS zoom) */
    #gh-msg-input { font-size: 16px !important; }
    /* Great Hall: hide view toggle on mobile, keep actions visible */
    #great-hall-header > div:nth-child(3) { display: none !important; } /* View toggle */
    /* Great Hall: actions row wraps to full width on mobile */
    #great-hall-header > div:nth-child(4) { flex: 0 0 100% !important; justify-content: flex-end !important; }
}

/* ═══ BLINDS — Full-screen read/write shades (all screens) ═══ */

/* ─── READING MODE: output fills screen, input hidden ─── */
.blind-reading #chat-input-area { display: none !important; }
.blind-reading #scroll-bottom-btn { display: none !important; }
.blind-reading #mobile-hamburger { display: none !important; }
.blind-reading #button-row { display: none !important; }
.blind-reading #mobile-blind-bar {
    border-top: 2px solid rgba(34,211,238,0.3) !important;
    border-bottom: none !important;
}
.blind-reading .blind-normal { display: none !important; }
.blind-reading .blind-read-bar { display: flex !important; }

/* ─── WRITING MODE: input fills screen, output hidden ─── */
.blind-writing #chat-window { display: none !important; }
.blind-writing #scroll-bottom-btn { display: none !important; }
.blind-writing #mobile-hamburger { display: none !important; }
.blind-writing #compose-expand-btn { display: none !important; }
.blind-writing #button-row { display: none !important; }
.blind-writing #mobile-blind-bar {
    border-bottom: 2px solid rgba(245,158,11,0.3) !important;
    border-top: none !important;
}
.blind-writing .blind-normal { display: none !important; }
.blind-writing .blind-write-bar { display: flex !important; }

/* Input area fills the remaining space */
.blind-writing #chat-input-area {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
/* Hide chrome to maximize writing space */
.blind-writing #active-project-anchor { display: none !important; }
.blind-writing #playback-console-bar { display: none !important; }
.blind-writing #chat-session-bar { display: none !important; }
.blind-writing .p-3.border-b { display: none !important; }

/* Input bar becomes vertical: textarea fills, buttons at bottom */
.blind-writing #chat-input-bar {
    flex: 1 !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    overflow: hidden !important;
}
.blind-writing #chat-input {
    flex: 1 !important;
    max-height: none !important;
    min-height: 0 !important;
    width: 100% !important;
    order: -1 !important;
    resize: none !important;
}
/* Buttons row stays at the bottom */
.blind-writing #chat-input-bar .chat-btn-group {
    align-self: flex-end !important;
    flex-shrink: 0 !important;
    padding-top: 8px !important;
}
.blind-writing #chat-input-bar > .relative {
    align-self: flex-start !important;
    flex-shrink: 0 !important;
    order: 1 !important;
}

/* ═══ GREAT HALL BLINDS — Full-screen read/write for meetings ═══ */

/* ─── GH READING: output fills screen, input hidden ─── */
.gh-blind-reading #gh-input-area { display: none !important; }
.gh-blind-reading #great-hall-header { display: none !important; }
.gh-blind-reading #gh-roster-sidebar { display: none !important; }
.gh-blind-reading #gh-blind-bar {
    border-top: 2px solid rgba(34,211,238,0.3) !important;
    border-bottom: none !important;
}
.gh-blind-reading .gh-blind-normal { display: none !important; }
.gh-blind-reading .gh-blind-read-bar { display: flex !important; }

/* ─── GH WRITING: input fills screen, output hidden ─── */
.gh-blind-writing #gh-chat-view { display: none !important; }
.gh-blind-writing #gh-theatre-view { display: none !important; }
.gh-blind-writing #great-hall-header { display: none !important; }
.gh-blind-writing #gh-roster-sidebar { display: none !important; }
.gh-blind-writing #gh-blind-bar {
    border-bottom: 2px solid rgba(245,158,11,0.3) !important;
    border-top: none !important;
}
.gh-blind-writing .gh-blind-normal { display: none !important; }
.gh-blind-writing .gh-blind-write-bar { display: flex !important; }
/* Input area fills remaining space */
.gh-blind-writing #gh-input-area {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
/* Control row stays compact at top */
.gh-blind-writing #gh-input-area > div:first-child {
    flex-shrink: 0 !important;
}
/* Message row expands to fill space */
.gh-blind-writing #gh-message-row {
    flex: 1 !important;
    flex-direction: column !important;
    align-items: stretch !important;
}
.gh-blind-writing #gh-msg-input {
    flex: 1 !important;
    max-height: none !important;
    min-height: 0 !important;
    resize: none !important;
}
/* Action buttons row at the bottom */
.gh-blind-writing #gh-message-row > button,
.gh-blind-writing #gh-message-row > select {
    flex-shrink: 0 !important;
}

/* Tablet tweaks (768-1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    #app-shell {
        width: 98vw !important;
        height: 96vh !important;
        max-width: none !important;
        max-height: none !important;
    }
    .toolbar-label { display: none !important; }
    .toolbar-btn { padding: 8px 10px !important; gap: 0 !important; }
}