/* NOTE: these rules used to target `.blog-view-wrapper`, a class that exists in NO template — the blog root is `.blog-writer-view` (blog_view.html:2). Every blog rule in this file was therefore dead, and blog visibility worked only via JS toggling `.is-hidden`. Corrected to the real class. Verified safe before enabling: workspace.js manages the .transitioning-in / .transitioned lifecycle for the blog view, and blog's two modals (#ai-blog-generation-modal, #load-blog-draft-modal) sit OUTSIDE #blog-writer-view — so the transform: scale() these rules apply cannot capture their position:fixed. Blog now gets the same view transition as chat and documents instead of none. */ /** * Workspace Core Styles (Consolidated) * ===================================== * All workspace layout, visibility controls, dashboard, and sidebar styles. * * Contents: * 1. Workspace Container * 2. View Visibility Controls * 3. Chat View Overrides * 4. Documents View Overrides * 5. Deep View Header (legacy) * 6. Dashboard View & Service Cards * 7. Sidebar Base & Layout * 8. Sidebar Navigation * 9. Sidebar Collapse * 10. Mobile Responsive * * Z-INDEX SCALE (defined in design-system.css): * ---------------------------------------- * --z-base: 1 : Default stacking level * --z-dropdown: 100 : Dropdown menus * --z-sticky: 200 : Sticky elements * --z-sidebar: 300 : Sidebars (desktop) * --z-header: 350 : Header/navbar * --z-feature-view: 400 : Feature views (chat, docs, blog) * --z-floating-nav: 600 : Floating navigation bar * --z-input-area: 650 : Chat input area (above nav) * --z-menu-toggle: 700 : Mobile hamburger menu * --z-overlay: 800 : Overlay backdrops * --z-sidebar-mobile: 850 : Mobile slide-in sidebar * --z-modal-backdrop: 1000 : Modal backdrop/overlay * --z-modal: 1010-1050 : Modal dialogs * --z-popover: 1020 : Popovers * --z-tooltip: 1030-1250 : Tooltips * --z-toast: 1040-1300 : Toast notifications * --z-loading: 1050 : Loading overlays * --z-critical: 9999 : Critical UI elements * --z-max: 10000 : Maximum - reserved for critical modals * * Dependencies: design-system.css (CSS variables) */ /* ============================================================================ 1. WORKSPACE CONTAINER ============================================================================ */ /* NOTE: workspace.html removes the .container wrapper via empty block overrides. Dashboard handles its own header offset via padding-top on .dashboard-view. The .workspace-container class is not used in the HTML. */ /* ============================================================================ 1b. DASHBOARD FLASH MESSAGES - FLOATING TOAST STYLE ============================================================================ Flash messages render as direct children (workspace.html removes the .container wrapper). Float them as toast overlays to avoid pushing layout down. ============================================================================ */ body.dashboard-mode > .alert { position: fixed; top: 80px; /* Below fixed header (60px + 20px gap) */ left: 50%; transform: translateX(-50%); z-index: var(--z-toast, 1300); max-width: 500px; width: calc(100% - 40px); animation: flashToastIn 0.4s ease-out both; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); border-radius: 12px; } /* Stack multiple flash messages */ body.dashboard-mode > .alert + .alert { top: 140px; } @keyframes flashToastIn { from { opacity: 0; transform: translateX(-50%) translateY(-20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ============================================================================ AMBIENT BACKGROUND — CALM, STILL ROOM ============================================================================ The workspace is one still atmosphere, not a theatre: --ws-ambient (two static radial gradients — purple top-left, cyan bottom-right, defined in premium-components.css) painted once on --ws-bg-primary. This file only loads on the workspace, so a bare `body` rule is correctly scoped. This replaces the four animated, blurred, infinitely-drifting orbs that used to live here. The templates already opt out of base.html's animated backdrop for the workspace (see workspace.html's page_background block override) — this is the calm replacement they expect. ============================================================================ */ body { background-color: var(--ws-bg-primary); background-image: var(--ws-ambient); background-attachment: fixed; } /* Hide footer in immersive workspace modes (dashboard keeps footer visible) */ body.chat-mode .quantum-footer, body.documents-mode .quantum-footer, body.blog-mode .quantum-footer, body.external-service-mode .quantum-footer { display: none; } /* ============================================================================ 2. CHAT VIEW OVERRIDES ============================================================================ */ /* Chat view wrapper - layout only, visibility handled by visibility-system.css */ .chat-view-wrapper { width: 100%; position: relative; } /* ============================================================================ 4. DOCUMENTS VIEW OVERRIDES ============================================================================ */ /* Documents view container - override fixed positioning */ /* Visibility handled by visibility-system.css */ #documents-view, #documents-view.documents-view { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: 100%; height: auto; min-height: calc(100vh - var(--doc-content-offset, 120px)); } /* When in documents mode, glue the view to the viewport so its dark ambient canvas extends behind the floating-nav (no detached top band). Mirrors how #blog-writer-view is positioned below in this same file — established pattern, not new architecture. */ body.documents-mode #documents-view, body.documents-mode #documents-view.documents-view { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; height: 100dvh; /* iOS Safari dynamic viewport */ min-height: 100vh; min-height: 100dvh; z-index: var(--z-documents-view, 400); overflow: hidden; /* internal scrolling lives on .markdown-editor / sidebar */ } /* Belt-and-braces: even if the immersive-mode class application is ever delayed (300 ms transition) or interrupted, silence the body padding-top: 90px from components/header.html so other fixed siblings (modals, toasts) stay aligned with the viewport top. */ html body.documents-mode { padding-top: 0; } /* Document writer container */ #documents-view .document-writer-container { height: 100%; width: 100%; display: flex; flex-direction: column; } #documents-view .document-header { flex-shrink: 0; } #documents-view .document-main { flex: 1; min-height: 0; overflow: hidden; } /* ============================================================================ 4b. BLOG VIEW OVERRIDES ============================================================================ */ /* Blog view container - override fixed positioning */ /* Visibility handled by visibility-system.css */ /* Blog view: position fixed to fill viewport (immersive mode hides header) */ #blog-writer-view, #blog-writer-view { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; } /* ============================================================================ 7. SIDEBAR BASE & LAYOUT ============================================================================ */ /* NOTE: Mobile element visibility is now handled in visibility-system.css */ /* Chat Mobile Menu Toggle Button - styling only */ .chat-mobile-menu-toggle { position: fixed; top: 70px; left: 1rem; width: 44px; height: 44px; background: var(--sidebar-bg, rgba(21, 26, 53, 0.95)); border: 1px solid var(--sidebar-border, rgba(0, 242, 254, 0.15)); border-radius: 0.75rem; color: var(--color-text-primary, var(--ws-text)); cursor: pointer; transition: all 0.2s ease; align-items: center; justify-content: center; z-index: var(--z-header, 350); box-shadow: var(--shadow-soft, 0 4px 25px rgba(0, 0, 0, 0.4)); backdrop-filter: blur(10px); } .chat-mobile-menu-toggle:hover { background: var(--chat-item-hover, rgba(0, 242, 254, 0.08)); border-color: var(--color-accent-cyan, var(--ws-accent)); transform: scale(1.05); } .chat-mobile-menu-toggle:focus-visible { outline: 2px solid var(--color-accent-cyan, var(--ws-accent)); outline-offset: 2px; } .chat-mobile-menu-toggle i { font-size: 1.25rem; } /* ============================================================================ 8. SIDEBAR NAVIGATION ============================================================================ */ .sidebar-nav { flex: 1; overflow-y: auto; padding: 1rem 0; } .nav-section { margin-bottom: 1.5rem; } .nav-section-title { padding: 0 1.5rem 0.5rem; color: var(--color-text-muted, rgba(255, 255, 255, 0.6)); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 0.5rem; } .nav-section-title i { font-size: 0.8rem; opacity: 0.7; } /* Refresh Button */ .refresh-btn { margin-left: auto; background: transparent; border: none; color: var(--color-text-muted, rgba(255, 255, 255, 0.6)); cursor: pointer; padding: 0.25rem; border-radius: 50%; transition: var(--transition-fast, 150ms ease); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; } .refresh-btn:hover { color: var(--color-accent-cyan, var(--ws-accent)); background: rgba(0, 242, 254, 0.1); } .refresh-btn:focus-visible { outline: 2px solid var(--color-accent-cyan, var(--ws-accent)); outline-offset: 2px; } .refresh-btn.refreshing i { animation: spin 1s linear infinite; } /* Nav Items */ .nav-item { padding: 0.75rem 1.5rem; color: var(--color-text-secondary, rgba(255, 255, 255, 0.85)); cursor: pointer; transition: all 0.15s ease-out; display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; position: relative; user-select: none; -webkit-tap-highlight-color: transparent; will-change: background-color, color; transform: translateZ(0); } .nav-item:hover { background: var(--chat-item-hover, rgba(0, 242, 254, 0.08)); color: var(--color-accent-cyan, var(--ws-accent)); } .nav-item.active { background: var(--chat-item-active, rgba(0, 242, 254, 0.15)); color: var(--color-accent-cyan, var(--ws-accent)); border-right: 2px solid var(--color-accent-cyan, var(--ws-accent)); } .nav-item:focus-visible { outline: 2px solid var(--color-accent-cyan, var(--ws-accent)); outline-offset: -2px; } .nav-item i { width: 20px; text-align: center; opacity: 0.8; } /* Chat History */ .chat-history { max-height: 40vh; overflow-y: auto; padding: 0.5rem; } /* Chat Loading State */ .chat-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; color: var(--color-text-muted, rgba(255, 255, 255, 0.6)); gap: 0.75rem; } .chat-loading .loading-spinner { width: 24px; height: 24px; border: 2px solid rgba(0, 242, 254, 0.2); border-top-color: var(--color-accent-cyan, var(--ws-accent)); border-radius: 50%; animation: spin 1s linear infinite; } /* Navigation Items - Icon Only */ body.sidebar-collapsed .ws-sidebar .nav-section-title { display: none; } body.sidebar-collapsed .ws-sidebar .nav-item { justify-content: center; padding: 0.75rem; } body.sidebar-collapsed .ws-sidebar .nav-item span { display: none; } body.sidebar-collapsed .ws-sidebar:hover .nav-section-title { display: block; } body.sidebar-collapsed .ws-sidebar:hover .nav-item { justify-content: flex-start; padding: 0.75rem 1rem; } body.sidebar-collapsed .ws-sidebar:hover .nav-item span { display: inline; } /* ============================================================================ 10. MOBILE RESPONSIVE ============================================================================ */ /* Sidebar Mobile Rules */ @media (max-width: 767px) { } /* Sidebar Navigation - Mobile */ @media (max-width: 767px) { .sidebar-nav { padding: 0.75rem 0; } .nav-section { margin-bottom: 1rem; } .nav-section-title { padding: 0 1rem 0.375rem; font-size: 0.8rem; } .nav-item { padding: 0.875rem 1rem; min-height: var(--touch-target-min, 44px); font-size: 0.9rem; } .chat-history { max-height: 50vh; padding: 0.375rem; } .refresh-btn { width: var(--touch-target-min, 44px); height: var(--touch-target-min, 44px); } } /* Sidebar Navigation - Small Phones */ @media (max-width: 479px) { .nav-section-title { padding: 0 0.75rem 0.25rem; font-size: 0.75rem; } .nav-item { padding: 0.75rem; gap: 0.5rem; } }