/** * 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 - LUXURY ATMOSPHERE ============================================================================ Premium floating orb animations matching landing page style. Uses solid RGBA colors (not radial gradients) for better visibility. ============================================================================ */ .ambient-background { position: fixed; inset: 0; z-index: -1; /* Behind content but still visible */ pointer-events: none; overflow: hidden; /* No container opacity - orbs handle their own opacity */ } .ambient-orb { position: absolute; border-radius: 50%; filter: blur(60px); /* Match landing page blur */ pointer-events: none; animation: ambientOrbFloat 20s ease-in-out infinite; } /* Orb colors match landing page style - solid RGBA, visible opacity */ .ambient-orb-1 { width: 500px; height: 500px; background: rgba(0, 242, 254, 0.15); /* Cyan - matches landing */ top: -150px; left: -100px; animation-delay: 0s; } .ambient-orb-2 { width: 400px; height: 400px; background: rgba(118, 75, 162, 0.15); /* Purple - matches landing */ bottom: -100px; right: -100px; animation-delay: -10s; } .ambient-orb-3 { width: 350px; height: 350px; background: rgba(240, 147, 251, 0.12); /* Pink */ top: 40%; left: 50%; animation-delay: -5s; } .ambient-orb-4 { width: 300px; height: 300px; background: rgba(102, 126, 234, 0.12); /* Blue-purple */ top: 60%; left: 20%; animation-delay: -15s; } /* Float animation - matches landing page pfOrbFloat */ @keyframes ambientOrbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -30px) scale(1.1); } 50% { transform: translate(-20px, 20px) scale(0.95); } 75% { transform: translate(20px, 30px) scale(1.05); } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .ambient-orb { animation: none; } } /* Mobile: suppress the four animated orbs entirely. Each is ~300–500px square with `filter: blur(60px)` and a 20s drift animation. On mobile this rasterizes every frame and drains battery without contributing to legibility — the static page background already provides the ambient color. */ @media (max-width: 767px) { .ambient-orb, .ambient-orb-1, .ambient-orb-2, .ambient-orb-3, .ambient-orb-4 { display: none; } } /* 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.blog-view-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; } /* ============================================================================ 5. DASHBOARD VIEW - ULTIMATE PREMIUM DESIGN ============================================================================ CHANGES FROM PREVIOUS VERSION: - Increased card height (min-height: 540px) - Larger title fonts (clamp 3rem to 5rem) - Animated gradient title - Spinning conic gradient border - Dual animated rings around icons - Larger icons (120px container, 3rem icon) - Premium hover lift (16px + scale) - Holographic gradient overlay - Enhanced feature tags with gradient fill - Starfield background effect - Floating shape decorations ============================================================================ */ /* ============================================================================ 1. DASHBOARD LAYOUT ============================================================================ */ .dashboard-view { min-height: calc(100vh - 60px); padding: clamp(1.5rem, 3vh, 3rem) 2.5rem; padding-top: calc(60px + clamp(1rem, 2vh, 2rem)); /* 60px header offset + responsive gap */ display: flex; flex-direction: column; /* Stack header ABOVE cards, not beside */ align-items: center; justify-content: safe center; /* 'safe' prevents content from being pushed above fold on overflow */ position: relative; background: transparent; } /* Dashboard Particle Canvas */ .dashboard-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.7; } /* Dashboard Mouse-Following Glow */ .dashboard-mouse-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; background: radial-gradient( 600px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(0, 242, 254, 0.06) 0%, rgba(123, 92, 255, 0.03) 25%, transparent 60% ); } .dashboard-mouse-glow.active { opacity: 1; } /* ============================================================================ QUANTUM BACKGROUND LAYERS - Ambient Radial Gradients Adapted from landing page. Lower opacity since ambient orbs already add color. ============================================================================ */ .dashboard-quantum-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .dashboard-quantum-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; will-change: transform; } .dashboard-quantum-layer-1 { background: radial-gradient(circle at 20% 30%, rgba(118, 75, 162, 0.10) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(0, 242, 254, 0.08) 0%, transparent 50%); animation: dashboardQuantumFloat1 15s ease-in-out infinite; } .dashboard-quantum-layer-2 { background: radial-gradient(circle at 60% 20%, rgba(240, 147, 251, 0.08) 0%, transparent 40%), radial-gradient(circle at 40% 80%, rgba(102, 126, 234, 0.06) 0%, transparent 40%); animation: dashboardQuantumFloat2 20s ease-in-out infinite reverse; } .dashboard-quantum-layer-3 { background: radial-gradient(circle at 70% 50%, rgba(0, 255, 136, 0.03) 0%, transparent 45%), radial-gradient(circle at 30% 60%, rgba(0, 212, 255, 0.04) 0%, transparent 35%); animation: dashboardQuantumFloat3 25s ease-in-out infinite; } @keyframes dashboardQuantumFloat1 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(30px, -30px) rotate(120deg); } 66% { transform: translate(-20px, 20px) rotate(240deg); } } @keyframes dashboardQuantumFloat2 { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); } 50% { transform: translate(-40px, -40px) rotate(180deg) scale(1.1); } } @keyframes dashboardQuantumFloat3 { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); } 25% { transform: translate(40px, 20px) scale(1.15) rotate(60deg); } 50% { transform: translate(-20px, 40px) scale(0.95) rotate(120deg); } 75% { transform: translate(-30px, -20px) scale(1.1) rotate(200deg); } } /* Fallback for browsers without 'safe center' support */ @supports not (justify-content: safe center) { .dashboard-view { justify-content: flex-start; padding-top: calc(60px + clamp(2rem, 5vh, 4rem)); } } .dashboard-container { max-width: 1300px; width: 100%; position: relative; z-index: 2; } /* ============================================================================ 2. DASHBOARD HEADER - ENLARGED TYPOGRAPHY ============================================================================ */ .dashboard-header { text-align: center; margin-bottom: clamp(24px, 4vh, 50px); position: relative; overflow: hidden; } .dashboard-title { font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 900; margin: 0 0 12px 0; letter-spacing: -0.04em; line-height: 1.1; } .dashboard-title .title-text { background: linear-gradient(135deg, #ffffff 0%, #00f2fe 40%, #764ba2 70%, #f093fb 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: dashboardGradientShift 8s ease infinite; } @keyframes dashboardGradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .dashboard-subtitle { font-size: clamp(1rem, 2vw, 1.35rem); color: var(--text-muted, rgba(255, 255, 255, 0.6)); font-weight: 400; margin: 0; letter-spacing: 0.02em; } /* Title Glow Underline */ .title-glow-line { width: 120px; height: 2px; margin: 12px auto 16px; background: linear-gradient(90deg, transparent, rgba(0, 242, 254, 0.7), rgba(118, 75, 162, 0.7), transparent ); background-size: 200% 100%; animation: titleGlowShift 4s ease-in-out infinite; border-radius: 2px; box-shadow: 0 0 12px rgba(0, 242, 254, 0.3), 0 0 24px rgba(118, 75, 162, 0.15); } @keyframes titleGlowShift { 0%, 100% { background-position: 0% 50%; opacity: 0.7; } 50% { background-position: 100% 50%; opacity: 1; } } /* Header Shimmer Sweep */ .dashboard-header::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent); animation: dashboardHeaderShimmer 6s ease-in-out infinite; pointer-events: none; } @keyframes dashboardHeaderShimmer { 0% { left: -100%; } 100% { left: 200%; } } /* ============================================================================ 3. SERVICE CARDS GRID ============================================================================ */ .dashboard-cards { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; /* Cap the row on ultra-wide monitors so cards don't drift apart with 100+px of empty space between them. With three 400px cards plus two 32px gaps the natural width is ~1264px; rounding to 1280 leaves a hair of breathing room without permitting the wide-screen sprawl. */ max-width: 1280px; margin-left: auto; margin-right: auto; } /* ============================================================================ 4. SERVICE CARD - ULTRA PREMIUM BASE ============================================================================ */ .service-card { flex: 1; min-width: 340px; max-width: 400px; position: relative; cursor: pointer; } /* Card Inner - Glass Container */ .service-card .card-inner { position: relative; padding: 48px 36px 40px; border-radius: 32px; will-change: transform; background: linear-gradient(165deg, rgba(30, 36, 68, 0.9) 0%, rgba(18, 24, 52, 0.95) 100%); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); overflow: hidden; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 540px; } /* Holographic Gradient Overlay */ .service-card .card-inner::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 125deg, transparent 0%, rgba(0, 242, 254, 0.03) 25%, rgba(118, 75, 162, 0.05) 50%, rgba(240, 147, 251, 0.03) 75%, transparent 100% ); opacity: 0.15; /* Subtle base visibility */ transition: opacity 0.5s ease; pointer-events: none; } /* ============================================================================ 5. ANIMATED CONIC GRADIENT BORDER ============================================================================ */ .service-card .card-border { position: absolute; inset: -2px; padding: 2px; border-radius: 34px; background: linear-gradient(45deg, var(--card-accent, rgba(0, 242, 254, 0.8)), var(--card-accent-2, rgba(118, 75, 162, 0.8)), var(--card-accent, rgba(0, 242, 254, 0.8)), var(--card-accent-2, rgba(118, 75, 162, 0.8)) ); background-size: 400% 400%; z-index: -2; opacity: 0.4; animation: dashboardBorderFlow 6s linear infinite; animation-play-state: paused; transition: opacity 0.5s ease, box-shadow 0.5s ease; /* Mask out centre — only the 2px border ring is visible */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; } /* Only animate border spin when dashboard is visible */ .dashboard-view:not(.is-hidden) .service-card .card-border { animation-play-state: running; } .service-card .card-bg { position: absolute; inset: 2px; border-radius: 30px; background: linear-gradient(165deg, rgba(30, 36, 68, 0.98) 0%, rgba(18, 24, 52, 0.99) 100%); z-index: -1; } @keyframes dashboardBorderFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ============================================================================ 6. COLOR VARIANTS ============================================================================ */ .service-card[data-service="chat"] { --card-accent: rgba(0, 242, 254, 0.9); --card-accent-2: rgba(79, 172, 254, 0.9); --card-glow: rgba(0, 242, 254, 0.25); --icon-gradient: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%); --badge-bg: linear-gradient(135deg, rgba(0, 242, 254, 0.2) 0%, rgba(79, 172, 254, 0.1) 100%); --badge-border: rgba(0, 242, 254, 0.4); } .service-card[data-service="documents"] { --card-accent: rgba(118, 75, 162, 0.9); --card-accent-2: rgba(102, 126, 234, 0.9); --card-glow: rgba(118, 75, 162, 0.25); --icon-gradient: linear-gradient(135deg, #764ba2 0%, #667eea 100%); --badge-bg: linear-gradient(135deg, rgba(118, 75, 162, 0.2) 0%, rgba(102, 126, 234, 0.1) 100%); --badge-border: rgba(118, 75, 162, 0.4); } .service-card[data-service="blog"] { --card-accent: rgba(240, 147, 251, 0.9); --card-accent-2: rgba(245, 87, 108, 0.9); --card-glow: rgba(240, 147, 251, 0.25); --icon-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --badge-bg: linear-gradient(135deg, rgba(240, 147, 251, 0.2) 0%, rgba(245, 87, 108, 0.1) 100%); --badge-border: rgba(240, 147, 251, 0.4); } .service-card[data-service="analytics"] { --card-accent: rgba(105, 240, 174, 0.9); --card-accent-2: rgba(0, 230, 118, 0.9); --card-glow: rgba(105, 240, 174, 0.25); --icon-gradient: linear-gradient(135deg, #69f0ae 0%, #00e676 100%); --badge-bg: linear-gradient(135deg, rgba(105, 240, 174, 0.2) 0%, rgba(0, 230, 118, 0.1) 100%); --badge-border: rgba(105, 240, 174, 0.4); } .service-card[data-service="compliance"] { --card-accent: rgba(46, 204, 113, 0.9); --card-accent-2: rgba(39, 174, 96, 0.9); --card-glow: rgba(46, 204, 113, 0.25); --icon-gradient: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); --badge-bg: linear-gradient(135deg, rgba(46, 204, 113, 0.2) 0%, rgba(39, 174, 96, 0.1) 100%); --badge-border: rgba(46, 204, 113, 0.4); } /* ============================================================================ 7. CARD BADGE - FLOATING PREMIUM ============================================================================ */ .service-card .card-badge { position: absolute; top: 20px; right: 20px; display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--badge-bg); border: 1px solid var(--badge-border); border-radius: 24px; font-size: 0.75rem; font-weight: 700; color: white; backdrop-filter: blur(10px); z-index: 10; transition: all 0.4s ease; text-transform: uppercase; letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .service-card .card-badge i { font-size: 0.7rem; } .service-card:hover .card-badge { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 25px var(--card-glow); } /* ============================================================================ 8. CARD ICON - MEGA PREMIUM WITH DUAL RINGS ============================================================================ */ .service-card .card-icon { position: relative; width: 120px; height: 120px; margin-bottom: 32px; margin-top: 16px; } /* Animated Gradient Ring */ .service-card .icon-ring { position: absolute; inset: -15px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--card-accent); border-right-color: var(--card-accent-2); opacity: 0.6; /* Increased base visibility */ animation: dashboardRingRotate 8s linear infinite; } /* Dashed Inner Ring */ .service-card .icon-ring-2 { position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.15); animation: dashboardRingRotate 12s linear infinite reverse; } @keyframes dashboardRingRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Icon Core */ .service-card .icon-core { position: relative; width: 100%; height: 100%; border-radius: 32px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; transition: all 0.5s ease; overflow: hidden; } /* Inner glow */ .service-card .icon-core::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, var(--card-glow) 0%, transparent 70%); opacity: 0.5; transition: opacity 0.5s ease; } .service-card .icon-core i { font-size: 3rem; background: var(--icon-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 15px var(--card-glow)); transition: all 0.5s ease; position: relative; z-index: 2; } /* ============================================================================ 9. CARD CONTENT & TYPOGRAPHY ============================================================================ */ .service-card .card-info { flex: 1; display: flex; flex-direction: column; margin-bottom: 28px; position: relative; z-index: 2; } .service-card .card-title { font-size: 2rem; font-weight: 800; color: var(--text-primary, #ffffff); margin: 0 0 14px 0; letter-spacing: -0.02em; transition: all 0.4s ease; } .service-card .card-description { font-size: 1.05rem; color: var(--text-muted, rgba(255, 255, 255, 0.6)); line-height: 1.7; margin: 0 0 24px 0; } /* ============================================================================ 10. FEATURE TAGS - PREMIUM WITH GRADIENT FILL ============================================================================ */ .service-card .card-features { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: auto; } .service-card .feature-tag { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; font-size: 0.875rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); transition: all 0.4s ease; position: relative; overflow: hidden; } .service-card .feature-tag::before { content: ''; position: absolute; inset: 0; background: var(--icon-gradient); opacity: 0.06; transition: opacity 0.4s ease; } .service-card .feature-tag i { font-size: 0.8rem; opacity: 0.85; position: relative; z-index: 1; } .service-card .feature-tag span { position: relative; z-index: 1; } .service-card:hover .feature-tag { border-color: rgba(255, 255, 255, 0.2); color: white; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } .service-card:hover .feature-tag::before { opacity: 0.2; } /* ============================================================================ 11. CARD ACTION BUTTON - MEGA PREMIUM ============================================================================ */ .service-card .card-action { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 20px 36px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 60px; color: rgba(255, 255, 255, 0.9); font-size: 1.05rem; font-weight: 700; font-family: inherit; cursor: pointer; position: relative; overflow: hidden; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); letter-spacing: 0.03em; margin-top: 24px; z-index: 2; } /* Button Gradient Fill */ .service-card .card-action::before { content: ''; position: absolute; inset: 0; background: var(--icon-gradient); opacity: 0; transition: opacity 0.5s ease; } /* Button Shine */ .service-card .card-action::after { content: ''; position: absolute; top: -50%; left: -100%; width: 100%; height: 200%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.3), transparent ); transform: skewX(-25deg); transition: left 0.8s ease; } .service-card .card-action > span { position: relative; z-index: 2; } .service-card .action-icon { display: flex; align-items: center; position: relative; z-index: 2; transition: transform 0.4s ease; } .service-card .action-icon i { font-size: 1rem; } /* ============================================================================ 12. HOVER STATES - JAW DROPPING ============================================================================ */ .service-card:hover .card-inner { transform: translateY(-16px) scale(1.02); box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5), 0 0 100px var(--card-glow); } .service-card:hover .card-inner::before { opacity: 1; } .service-card:hover .card-border { opacity: 0.8; animation-duration: 3s; box-shadow: 0 0 30px var(--card-glow), 0 0 60px var(--card-glow); } .service-card:hover .icon-ring { opacity: 1; /* Full visibility on hover (from 0.6) */ animation-duration: 3s; /* Faster on hover */ } .service-card:hover .icon-core { transform: scale(1.1) rotate(5deg); background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%); box-shadow: 0 0 50px var(--card-glow), inset 0 0 30px rgba(255, 255, 255, 0.05); } .service-card:hover .icon-core::before { opacity: 1; } .service-card:hover .icon-core i { transform: scale(1.15); filter: drop-shadow(0 0 25px var(--card-glow)); } .service-card:hover .card-title { background: var(--icon-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .service-card:hover .card-action { border-color: transparent; color: white; box-shadow: 0 15px 40px var(--card-glow), inset 0 0 0 1px rgba(255, 255, 255, 0.2); } .service-card:hover .card-action::before { opacity: 1; } .service-card:hover .card-action::after { left: 100%; } .service-card:hover .action-icon { transform: translateX(6px); } /* Active State */ .service-card:active .card-inner { transform: translateY(-12px) scale(1.01); } /* Focus State */ .service-card .card-action:focus-visible { outline: 2px solid var(--accent-cyan, #00f2fe); outline-offset: 4px; } /* ============================================================================ 13. FLOATING DECORATIONS - PREMIUM GEOMETRIC ============================================================================ */ .dashboard-view .floating-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } .dashboard-view .shape { position: absolute; opacity: 0.35; animation: dashboardShapeFloat 12s ease-in-out infinite; } /* Diamond shape (rotated square outline) */ .dashboard-view .shape-diamond { width: 14px; height: 14px; border: 1.5px solid var(--accent-cyan, #00f2fe); box-shadow: 0 0 8px rgba(0, 242, 254, 0.3); animation-name: dashboardShapeDiamondFloat; } /* Ring shape (circle outline with glow) */ .dashboard-view .shape-ring { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--accent-purple, #764ba2); box-shadow: 0 0 10px rgba(118, 75, 162, 0.3); } /* Square wireframe */ .dashboard-view .shape-square { width: 12px; height: 12px; border: 1px solid #f093fb; box-shadow: 0 0 8px rgba(240, 147, 251, 0.25); } /* Glowing dot */ .dashboard-view .shape-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-cyan, #00f2fe); box-shadow: 0 0 12px rgba(0, 242, 254, 0.5), 0 0 24px rgba(0, 242, 254, 0.2); } /* Cross shape */ .dashboard-view .shape-cross { width: 14px; height: 14px; position: relative; } .dashboard-view .shape-cross::before, .dashboard-view .shape-cross::after { content: ''; position: absolute; background: rgba(102, 126, 234, 0.6); box-shadow: 0 0 6px rgba(102, 126, 234, 0.3); } .dashboard-view .shape-cross::before { width: 100%; height: 1.5px; top: 50%; transform: translateY(-50%); } .dashboard-view .shape-cross::after { width: 1.5px; height: 100%; left: 50%; transform: translateX(-50%); } /* Shape positions and timings */ .dashboard-view .shape-1 { left: 6%; top: 22%; animation-delay: 0s; } .dashboard-view .shape-2 { right: 10%; top: 15%; animation-delay: -2s; } .dashboard-view .shape-3 { left: 12%; bottom: 28%; animation-delay: -4s; } .dashboard-view .shape-4 { right: 6%; bottom: 22%; animation-delay: -6s; } .dashboard-view .shape-5 { left: 48%; top: 8%; animation-delay: -1s; } .dashboard-view .shape-6 { left: 3%; top: 55%; animation-delay: -3s; } .dashboard-view .shape-7 { right: 15%; top: 60%; animation-delay: -5s; } .dashboard-view .shape-8 { left: 55%; bottom: 12%; animation-delay: -7s; } @keyframes dashboardShapeFloat { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.35; } 25% { transform: translate(12px, -18px) scale(1.15) rotate(45deg); opacity: 0.55; } 50% { transform: translate(-8px, -30px) scale(1) rotate(90deg); opacity: 0.4; } 75% { transform: translate(15px, -12px) scale(1.1) rotate(135deg); opacity: 0.5; } } /* Diamond shapes need 45deg base rotation offset */ @keyframes dashboardShapeDiamondFloat { 0%, 100% { transform: translate(0, 0) scale(1) rotate(45deg); opacity: 0.35; } 25% { transform: translate(12px, -18px) scale(1.15) rotate(90deg); opacity: 0.55; } 50% { transform: translate(-8px, -30px) scale(1) rotate(135deg); opacity: 0.4; } 75% { transform: translate(15px, -12px) scale(1.1) rotate(180deg); opacity: 0.5; } } /* ============================================================================ 14. ANIMATIONS ============================================================================ */ /* ============================================================================ 15. RESPONSIVE BREAKPOINTS ============================================================================ */ /* Large Desktop */ @media (max-width: 1200px) { .dashboard-cards { gap: 28px; } .service-card { min-width: 300px; max-width: 360px; } .service-card .card-inner { padding: 40px 28px 32px; min-height: 500px; } .service-card .card-icon { width: 100px; height: 100px; } .service-card .icon-core i { font-size: 2.5rem; } } /* Tablet */ @media (max-width: 1024px) { .dashboard-view { padding: clamp(1.5rem, 3vh, 2.5rem) 1.5rem; padding-top: calc(60px + clamp(0.5rem, 2vh, 1.5rem)); } .dashboard-header { margin-bottom: clamp(20px, 4vh, 40px); } .service-card { min-width: 280px; max-width: 340px; } .service-card .card-inner { min-height: 480px; } } /* Mobile */ @media (max-width: 767px) { .dashboard-view { padding: 2rem 1rem; align-items: flex-start; padding-top: 2.5rem; } .dashboard-header { margin-bottom: 50px; } .dashboard-title { font-size: 2.75rem; } .dashboard-subtitle { font-size: 1.1rem; } .dashboard-cards { flex-direction: column; align-items: center; gap: 24px; } .service-card { min-width: 100%; max-width: 420px; } .service-card .card-inner { padding: 36px 24px 28px; min-height: auto; } .service-card .card-icon { width: 90px; height: 90px; margin-bottom: 24px; } .service-card .icon-ring { display: none; } .service-card .icon-core i { font-size: 2.25rem; } .service-card .card-title { font-size: 1.75rem; } .service-card .card-description { font-size: 1rem; } .service-card .feature-tag { padding: 8px 12px; font-size: 0.8rem; } .service-card .card-action { padding: 16px 28px; font-size: 1rem; } .service-card:hover .card-inner { transform: translateY(-10px); } .dashboard-view .floating-shapes { display: none; } } /* Small Mobile */ @media (max-width: 480px) { .dashboard-view { padding: 1.5rem 0.75rem; } .dashboard-title { font-size: 2.25rem; } .service-card .card-inner { padding: 32px 20px 24px; border-radius: 24px; } .service-card .card-badge { top: 16px; right: 16px; padding: 6px 10px; font-size: 0.7rem; } } /* ============================================================================ 15b. HEIGHT-BASED RESPONSIVE BREAKPOINTS ============================================================================ Only reduce header/padding spacing on short viewports. Cards keep their original size — the page scrolls if needed. ============================================================================ */ /* Short viewports (typical laptops: 768-900px height) */ @media (max-height: 900px) and (min-width: 768px) { .dashboard-view { padding-top: calc(60px + 0.5rem); padding-bottom: 1rem; justify-content: flex-start; } .dashboard-header { margin-bottom: clamp(16px, 3vh, 32px); } } /* Very short viewports (768px and below height) */ @media (max-height: 768px) and (min-width: 768px) { .dashboard-view { padding-top: calc(60px + 0.25rem); padding-bottom: 0.5rem; } .dashboard-header { margin-bottom: 16px; } } /* ============================================================================ 16. REDUCED MOTION SUPPORT ============================================================================ */ @media (prefers-reduced-motion: reduce) { .service-card .card-border, .service-card .icon-ring, .service-card .icon-ring-2, .dashboard-view .shape, .dashboard-title .title-text, .title-glow-line, .dashboard-header::after, .dashboard-quantum-layer { animation: none; } .service-card, .dashboard-header { animation: none; opacity: 1; transform: none; } .dashboard-canvas, .dashboard-mouse-glow { display: none; } .service-card .card-inner, .service-card .card-action, .service-card .icon-core, .service-card .icon-core i, .service-card .feature-tag, .service-card .card-badge { transition-duration: 0.01ms; } } /* Reduce animations on touch devices for better performance */ @media (hover: none) and (pointer: coarse) { .service-card .card-border, .service-card .icon-ring, .service-card .icon-ring-2 { animation: none; opacity: 0.4; } .dashboard-view .floating-shapes { display: none; } .dashboard-mouse-glow { display: none; } .dashboard-quantum-layer { animation: none; } .ambient-orb { animation: none; } } /* ============================================================================ 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, #ffffff); 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, #00f2fe); transform: scale(1.05); } .chat-mobile-menu-toggle:focus-visible { outline: 2px solid var(--color-accent-cyan, #00f2fe); outline-offset: 2px; } .chat-mobile-menu-toggle i { font-size: 1.25rem; } /* NOTE: .modern-chat-container is defined in chat.css with proper height calculation. The animated background ::before pseudo-element is also defined there. */ /* Left Sidebar Base */ .chat-sidebar { width: var(--sidebar-width, 240px); background: var(--sidebar-bg, rgba(21, 26, 53, 0.95)); border-right: 1px solid var(--sidebar-border, rgba(0, 242, 254, 0.15)); display: flex; flex-direction: column; position: relative; backdrop-filter: blur(10px); box-shadow: var(--shadow-soft, 0 4px 25px rgba(0, 0, 0, 0.4)); transition: width var(--transition-base, 250ms ease); } /* Sidebar Header */ .sidebar-header { padding: 1.5rem; border-bottom: 1px solid var(--sidebar-border, rgba(0, 242, 254, 0.15)); background: var(--blur-bg, rgba(15, 20, 45, 0.9)); } /* Sidebar Header Layout (New Chat + Collapse Button) */ .chat-sidebar .sidebar-header { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; } .chat-sidebar .sidebar-header .new-chat-btn { flex: 1; } /* New Chat Button */ .new-chat-btn { width: 100%; padding: 1rem; background: var(--gradient-primary, linear-gradient(135deg, #764ba2 0%, #00f2fe 100%)); color: white; border: none; border-radius: 0.75rem; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: var(--transition-fast, 150ms ease); display: flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: var(--glow-subtle, 0 0 20px rgba(0, 242, 254, 0.15)); } .new-chat-btn:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(0, 242, 254, 0.3); } .new-chat-btn i { font-size: 1.1rem; } /* ============================================================================ 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, #00f2fe); background: rgba(0, 242, 254, 0.1); } .refresh-btn:focus-visible { outline: 2px solid var(--color-accent-cyan, #00f2fe); 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, #00f2fe); } .nav-item.active { background: var(--chat-item-active, rgba(0, 242, 254, 0.15)); color: var(--color-accent-cyan, #00f2fe); border-right: 2px solid var(--color-accent-cyan, #00f2fe); } .nav-item:focus-visible { outline: 2px solid var(--color-accent-cyan, #00f2fe); 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-item { padding: 0.875rem 1rem; margin: 0.375rem 0; cursor: pointer; border-radius: 0.625rem; background: rgba(30, 37, 64, 0.3); border: 1px solid rgba(148, 163, 184, 0.08); transition: all 0.2s ease; position: relative; overflow: hidden; } .chat-item:hover { background: rgba(30, 37, 64, 0.5); border-color: rgba(0, 242, 254, 0.2); transform: translateX(2px); } .chat-item.active { background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%); border-color: rgba(0, 242, 254, 0.3); } .chat-item:focus-visible { outline: 2px solid var(--color-accent-cyan, #00f2fe); outline-offset: 2px; } /* 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, #00f2fe); border-radius: 50%; animation: spin 1s linear infinite; } /* ============================================================================ 9. SIDEBAR COLLAPSE ============================================================================ */ /* Sidebar Collapse Toggle Button */ .sidebar-collapse-btn { width: 36px; height: 36px; min-width: 36px; background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 0.5rem; color: var(--color-text-secondary, rgba(255, 255, 255, 0.85)); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; } .sidebar-collapse-btn:hover { background: rgba(0, 242, 254, 0.1); border-color: var(--color-accent-cyan, #00f2fe); color: var(--color-accent-cyan, #00f2fe); } .sidebar-collapse-btn:focus-visible { outline: 2px solid var(--color-accent-cyan, #00f2fe); outline-offset: 2px; } .sidebar-collapse-btn i { font-size: 1rem; transition: transform 0.2s ease; } /* Rotate icon when collapsed */ body.sidebar-collapsed .sidebar-collapse-btn i { transform: rotate(180deg); } /* Collapsed State (body.sidebar-collapsed) */ body.sidebar-collapsed .chat-sidebar { width: var(--sidebar-width-collapsed, 60px); } /* Sidebar Header - Compact */ body.sidebar-collapsed .chat-sidebar .sidebar-header { padding: 0.75rem 0.5rem; flex-direction: column; gap: 0.5rem; } /* New Chat Button - Icon Only */ body.sidebar-collapsed .chat-sidebar .new-chat-btn { justify-content: center; padding: 0.75rem; width: 100%; } body.sidebar-collapsed .chat-sidebar .new-chat-btn span { display: none; } /* Collapse Button - Centered */ body.sidebar-collapsed .chat-sidebar .sidebar-collapse-btn { width: 100%; } /* Navigation Items - Icon Only */ body.sidebar-collapsed .chat-sidebar .nav-section-title { display: none; } body.sidebar-collapsed .chat-sidebar .nav-item { justify-content: center; padding: 0.75rem; } body.sidebar-collapsed .chat-sidebar .nav-item span { display: none; } /* Sessions Section - Compact */ body.sidebar-collapsed .chat-sidebar .sidebar-sessions-header { justify-content: center; padding: 0.75rem 0.5rem; } body.sidebar-collapsed .chat-sidebar .sidebar-sessions-title { display: none; } body.sidebar-collapsed .chat-sidebar .sidebar-sessions-refresh { margin: 0; } /* Chat Items - Icon Only */ body.sidebar-collapsed .chat-sidebar .chat-item { padding: 0.75rem; justify-content: center; } body.sidebar-collapsed .chat-sidebar .chat-title, body.sidebar-collapsed .chat-sidebar .chat-preview, body.sidebar-collapsed .chat-sidebar .chat-time, body.sidebar-collapsed .chat-sidebar .chat-message-count, body.sidebar-collapsed .chat-sidebar .chat-actions, body.sidebar-collapsed .chat-sidebar .chat-item-header, body.sidebar-collapsed .chat-sidebar .chat-item-footer { display: none; } /* Show chat icon in collapsed state */ body.sidebar-collapsed .chat-sidebar .chat-item::before { content: '\f075'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 1rem; color: var(--color-text-muted, rgba(255, 255, 255, 0.6)); } body.sidebar-collapsed .chat-sidebar .chat-item.active::before { color: var(--color-accent-cyan, #00f2fe); } /* Hover-to-Expand */ body.sidebar-collapsed .chat-sidebar:hover { width: var(--sidebar-width, 240px); box-shadow: var(--shadow-strong, 0 8px 40px rgba(0, 0, 0, 0.6)); } /* Show text on hover */ body.sidebar-collapsed .chat-sidebar:hover .sidebar-header { flex-direction: row; padding: 1rem; } body.sidebar-collapsed .chat-sidebar:hover .new-chat-btn { justify-content: center; padding: 1rem; width: auto; flex: 1; } body.sidebar-collapsed .chat-sidebar:hover .new-chat-btn span { display: inline; } body.sidebar-collapsed .chat-sidebar:hover .sidebar-collapse-btn { width: 36px; } body.sidebar-collapsed .chat-sidebar:hover .nav-section-title { display: block; } body.sidebar-collapsed .chat-sidebar:hover .nav-item { justify-content: flex-start; padding: 0.75rem 1rem; } body.sidebar-collapsed .chat-sidebar:hover .nav-item span { display: inline; } body.sidebar-collapsed .chat-sidebar:hover .sidebar-sessions-header { justify-content: space-between; padding: 1rem 1.25rem; } body.sidebar-collapsed .chat-sidebar:hover .sidebar-sessions-title { display: flex; } body.sidebar-collapsed .chat-sidebar:hover .chat-item { padding: 1rem 1.25rem; justify-content: flex-start; } body.sidebar-collapsed .chat-sidebar:hover .chat-item::before { display: none; } body.sidebar-collapsed .chat-sidebar:hover .chat-title, body.sidebar-collapsed .chat-sidebar:hover .chat-preview, body.sidebar-collapsed .chat-sidebar:hover .chat-time, body.sidebar-collapsed .chat-sidebar:hover .chat-message-count, body.sidebar-collapsed .chat-sidebar:hover .chat-item-header, body.sidebar-collapsed .chat-sidebar:hover .chat-item-footer { display: block; } body.sidebar-collapsed .chat-sidebar:hover .chat-actions { display: flex; } /* ============================================================================ 10. MOBILE RESPONSIVE ============================================================================ */ /* Sidebar Mobile Rules */ @media (max-width: 767px) { .sidebar-collapse-btn { display: none; } /* Reset any collapsed state on mobile */ body.sidebar-collapsed .chat-sidebar { width: var(--sidebar-width-mobile, min(280px, calc(100vw - 60px))); } } /* Dashboard - Tablet */ @media (min-width: 768px) and (max-width: 1023px) { .dashboard-cards { grid-template-columns: repeat(2, 1fr); } .service-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 360px; } } /* Dashboard - Mobile */ @media (max-width: 767px) { .dashboard-view { padding: 1.5rem 1rem; align-items: flex-start; padding-top: 2rem; } .dashboard-header { margin-bottom: 2rem; } .dashboard-title { font-size: 1.75rem; } .dashboard-subtitle { font-size: 1rem; } .dashboard-cards { grid-template-columns: 1fr; gap: 1.5rem; } .service-card { max-width: 100%; padding: 1.5rem; } /* NOTE: Removed unused .service-card-icon, .service-card-title, etc. HTML uses .card-icon, .card-title, .card-description, .card-action */ } /* Dashboard - Small Phones */ @media (max-width: 479px) { .dashboard-view { padding: 1rem; } .dashboard-title { font-size: 1.5rem; } .dashboard-cards { gap: 1rem; } .service-card { padding: 1.25rem; } } /* 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; } .chat-item { padding: 0.75rem; min-height: var(--touch-target-min, 44px); } .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; } .chat-item { padding: 0.625rem; margin: 0.25rem 0; border-radius: 0.5rem; } }