/* =================================================================== SERENE PROTOCOL — Shared Theme System Calm-productivity design tokens with light/dark mode support. Toggle via [data-theme="light"] or [data-theme="dark"] on . =================================================================== */ /* — Typography Imports — */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap'); /* — Material Symbols (keep existing) — */ @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap'); /* ===================================================================== LIGHT MODE (High-Contrast Volumetric Pastel Spec) ===================================================================== */ :root, [data-theme="light"] { /* Surface hierarchy */ --color-surface: #f8fafc; --color-surface-dim: #e2e8f0; --color-surface-bright: #ffffff; --color-surface-container-lowest: #ffffff; --color-surface-container-low: #f1f5f9; --color-surface-container: #e2e8f0; --color-surface-container-high: #cbd5e1; --color-surface-container-highest:#94a3b8; --color-surface-variant: #cbd5e1; --color-surface-tint: #346bf1; /* High-Contrast Readability: Strict Slate-900 and Slate-700 */ --color-on-surface: #0f172a; --color-on-surface-variant: #334155; /* Inverse */ --color-inverse-surface: #0f172a; --color-inverse-on-surface: #f8fafc; /* Primary (Indigo-Blue Hybrid) */ --color-primary: #346bf1; --color-on-primary: #ffffff; --color-primary-container: #e0e7ff; --color-on-primary-container: #312e81; --color-inverse-primary: #94a3b8; --color-primary-fixed: #cbd5e1; --color-primary-fixed-dim: #94a3b8; /* Secondary */ --color-secondary: #4f46e5; --color-on-secondary: #ffffff; --color-secondary-container: #f1f5f9; --color-on-secondary-container: #334155; /* Tertiary */ --color-tertiary: #ec4899; --color-on-tertiary: #ffffff; --color-tertiary-container: #fce7f3; --color-on-tertiary-container: #9d174d; /* Error */ --color-error: #ba1a1a; --color-on-error: #ffffff; --color-error-container: #ffdad6; --color-on-error-container: #93000a; /* Outline */ --color-outline: #94a3b8; --color-outline-variant: #cbd5e1; /* Background and Volumetric sky */ --color-background: #f3f5f9; --color-on-background: #0f172a; /* === Volumetric / Glassmorphism tokens === */ --glass-bg: rgba(255, 255, 255, 0.55); --glass-border: rgba(255, 255, 255, 0.6); --glass-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 8px 32px 0 rgba(15, 23, 42, 0.04); --glass-blur: 32px; --header-bg: rgba(255, 255, 255, 0.65); --header-border: rgba(15, 23, 42, 0.06); --glass-active-bg: rgba(255, 255, 255, 0.85); --glass-active-border: rgba(15, 23, 42, 0.1); --glass-active-shadow: 0 8px 32px rgba(15, 23, 42, 0.08); --bubble-bg: rgba(255, 255, 255, 0.65); --bubble-border: rgba(15, 23, 42, 0.05); --bubble-border-top: rgba(255, 255, 255, 0.5); --bubble-shadow: 0 12px 40px rgba(15, 23, 42, 0.03); /* === Dropdown panel — high-opacity for legibility === */ --dropdown-bg: rgba(255, 255, 255, 0.98); --dropdown-border: rgba(15, 23, 42, 0.08); --dropdown-shadow: 0 20px 60px rgba(15, 23, 42, 0.12), 0 4px 16px rgba(0, 0, 0, 0.02); --dropdown-item-hover-bg: rgba(15, 23, 42, 0.05); /* === Premium Chat Interface Differentiators === */ --chat-container-bg: rgba(255, 255, 255, 0.55); --chat-container-border: rgba(15, 23, 42, 0.06); --bubble-user-bg: rgba(52, 107, 241, 0.08); --bubble-user-border: rgba(52, 107, 241, 0.15); --bubble-user-border-top: rgba(52, 107, 241, 0.24); --bubble-user-shadow: 0 8px 24px rgba(52, 107, 241, 0.04); --bubble-user-text: #0f172a; --bubble-ai-bg: rgba(255, 255, 255, 0.9); --bubble-ai-border: rgba(15, 23, 42, 0.05); --bubble-ai-border-top: rgba(255, 255, 255, 0.5); --bubble-ai-shadow: 0 12px 36px rgba(0, 0, 0, 0.03); --bubble-ai-text: #0f172a; --vol-bg: linear-gradient(135deg, #f5f7fa 0%, #e8ecf5 50%, #f0f4f8 100%); --vol-glow-1: radial-gradient(circle, rgba(52, 107, 241, 0.06) 0%, rgba(0,0,0,0) 70%); --vol-glow-2: radial-gradient(circle, rgba(236, 72, 153, 0.05) 0%, rgba(0,0,0,0) 70%); --sidebar-bg: rgba(255, 255, 255, 0.82); --sidebar-border: rgba(15, 23, 42, 0.08); --scrollbar-thumb: rgba(0, 0, 0, 0.12); --scrollbar-thumb-hover: rgba(0, 0, 0, 0.20); color-scheme: light; } /* ===================================================================== DARK MODE (Original Serene Spec restored with Iridescent Purple/Lavender Ambiance) ===================================================================== */ [data-theme="dark"] { /* Surface hierarchy */ --color-surface: #0d0e11; --color-surface-dim: #0d0e11; --color-surface-bright: #38393c; --color-surface-container-lowest: #0d0e11; --color-surface-container-low: #16171c; --color-surface-container: #1e2025; --color-surface-container-high: #2a2b30; --color-surface-container-highest:#35373d; --color-surface-variant: #343538; --color-surface-tint: #b4c5ff; /* Content on surfaces */ --color-on-surface: #e3e2e6; --color-on-surface-variant: #c3c6d7; /* Inverse */ --color-inverse-surface: #e3e2e6; --color-inverse-on-surface: #2f3033; /* Primary (Lavender Blue) */ --color-primary: #b4c5ff; --color-on-primary: #002a78; --color-primary-container: #346bf1; --color-on-primary-container: #fefcff; --color-inverse-primary: #0853da; --color-primary-fixed: #dbe1ff; --color-primary-fixed-dim: #b4c5ff; /* Secondary (Rose Accent) */ --color-secondary: #ffb4ac; --color-on-secondary: #690007; --color-secondary-container: #b20013; --color-on-secondary-container: #ffbdb6; /* Tertiary */ --color-tertiary: #c4c6cf; --color-on-tertiary: #2d3037; --color-tertiary-container: #71747c; --color-on-tertiary-container: #fdfbff; /* Error */ --color-error: #ffb4ab; --color-on-error: #690005; --color-error-container: #93000a; --color-on-error-container: #ffdad6; /* Outline */ --color-outline: #8d90a0; --color-outline-variant: #434654; /* Background */ --color-background: #0d0e11; --color-on-background: #e3e2e6; /* === Volumetric / Glassmorphism tokens === */ --glass-bg: rgba(30, 32, 34, 0.4); --glass-border: rgba(255, 255, 255, 0.05); --glass-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 32px 0 rgba(0, 0, 0, 0.4); --glass-blur: 32px; --header-bg: rgba(13, 14, 17, 0.5); --header-border: rgba(255, 255, 255, 0.05); --glass-active-bg: rgba(255, 255, 255, 0.06); --glass-active-border: rgba(255, 255, 255, 0.12); --glass-active-shadow: 0 8px 32px rgba(0, 0, 0, 0.40); --bubble-bg: rgba(30, 32, 34, 0.45); --bubble-border: rgba(255, 255, 255, 0.05); --bubble-border-top: rgba(255, 255, 255, 0.1); --bubble-shadow: 0 12px 40px rgba(0, 0, 0, 0.40); /* === Dropdown panel — high-opacity for legibility === */ --dropdown-bg: rgba(22, 26, 24, 0.97); --dropdown-border: rgba(255, 255, 255, 0.09); --dropdown-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35); --dropdown-item-hover-bg: rgba(255, 255, 255, 0.07); /* === Premium Chat Interface Differentiators === */ --chat-container-bg: rgba(30, 32, 34, 0.4); --chat-container-border: rgba(255, 255, 255, 0.04); --bubble-user-bg: rgba(180, 197, 255, 0.12); --bubble-user-border: rgba(180, 197, 255, 0.16); --bubble-user-border-top: rgba(180, 197, 255, 0.28); --bubble-user-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 16px rgba(180, 197, 255, 0.02); --bubble-user-text: #e3e2e6; --bubble-ai-bg: rgba(30, 32, 34, 0.6); --bubble-ai-border: rgba(255, 255, 255, 0.05); --bubble-ai-border-top: rgba(255, 255, 255, 0.1); --bubble-ai-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); --bubble-ai-text: #e3e2e6; /* Background glows - lavender + royal blue */ --vol-bg: #0d0e11; --vol-glow-1: radial-gradient(circle, rgba(180, 197, 255, 0.12) 0%, rgba(0,0,0,0) 70%); --vol-glow-2: radial-gradient(circle, rgba(52, 107, 241, 0.08) 0%, rgba(0,0,0,0) 70%); --sidebar-bg: rgba(13, 14, 17, 0.82); --sidebar-border: rgba(255, 255, 255, 0.06); --scrollbar-thumb: rgba(255, 255, 255, 0.08); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.15); color-scheme: dark; } /* ===================================================================== UTILITY CLASSES (Theme-Aware) ===================================================================== */ /* Opaque glassmorphic sidebar to prevent background distractions while maintaining layout glow */ aside { background-color: var(--sidebar-bg) !important; backdrop-filter: blur(40px) !important; -webkit-backdrop-filter: blur(40px) !important; border-right: 1px solid var(--sidebar-border) !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease !important; } /* Volumetric ambient background */ .volumetric-bg { background: var(--vol-bg); position: relative; overflow-x: hidden; } .volumetric-glow-1 { position: absolute; width: 700px; height: 700px; background: var(--vol-glow-1); top: -15%; left: -15%; filter: blur(90px); animation: floatGlow 18s infinite alternate ease-in-out; pointer-events: none; z-index: 1; } .volumetric-glow-2 { position: absolute; width: 900px; height: 900px; background: var(--vol-glow-2); bottom: -25%; right: -15%; filter: blur(110px); animation: floatGlow 24s infinite alternate-reverse ease-in-out; pointer-events: none; z-index: 1; } /* Shareable Iridescent glows from profile page */ .ambient-glow-1 { background: var(--vol-glow-1) !important; } .ambient-glow-2 { background: var(--vol-glow-2) !important; } /* Frosted glass cards */ .glass-card-frosted { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } .glass-card-active { background: var(--glass-active-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--glass-active-border); box-shadow: var(--glass-active-shadow); } /* Glass card (Profile style) */ .glass-card { background: var(--glass-bg); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid var(--glass-border); } /* Chat bubble glass */ .glass-bubble { background: var(--bubble-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--bubble-border); border-top-color: var(--bubble-border-top); box-shadow: var(--bubble-shadow); } /* Premium user distinct bubble */ .user-bubble { background: var(--bubble-user-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--bubble-user-border); border-top-color: var(--bubble-user-border-top); box-shadow: var(--bubble-user-shadow); color: var(--bubble-user-text); } /* Premium AI distinct bubble */ .ai-bubble { background: var(--bubble-ai-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--bubble-ai-border); border-top-color: var(--bubble-ai-border-top); box-shadow: var(--bubble-ai-shadow); color: var(--bubble-ai-text); } /* Customized chat container panel backing */ .chat-container-panel { background: var(--chat-container-bg) !important; border-color: var(--chat-container-border) !important; } /* Premium theme-aware glass header backing */ .glass-header { background: var(--header-bg) !important; backdrop-filter: blur(var(--glass-blur)) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) !important; border-bottom: 1px solid var(--header-border) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); } /* Premium theme-aware glass bottom navigation backing */ .glass-nav { background: var(--header-bg) !important; backdrop-filter: blur(var(--glass-blur)) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) !important; border-top: 1px solid var(--header-border) !important; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03); } /* ===================================================================== CHAT SESSION DROPDOWN — Glassmorphic Premium Panel ===================================================================== */ /* The dropdown panel itself */ .chat-session-dropdown { background: var(--dropdown-bg); backdrop-filter: blur(48px); -webkit-backdrop-filter: blur(48px); border: 1px solid var(--dropdown-border); box-shadow: var(--dropdown-shadow); z-index: 100; transform-origin: top right; /* Animate on entry */ animation: dropdownFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes dropdownFadeIn { from { opacity: 0; transform: scale(0.95) translateY(-6px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Individual dropdown menu items */ .chat-dropdown-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--color-on-surface); background: transparent; border: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; text-align: left; } .chat-dropdown-item:hover { background: var(--dropdown-item-hover-bg); transform: translateX(2px); } .chat-dropdown-item:active { transform: scale(0.98) translateX(2px); } /* Danger tier — clear history */ .chat-dropdown-danger { color: var(--color-error) !important; } .chat-dropdown-danger:hover { background: rgba(186, 26, 26, 0.08) !important; } /* Nuclear tier — reset full memory */ .chat-dropdown-nuclear { color: var(--color-error) !important; opacity: 0.85; } .chat-dropdown-nuclear:hover { background: rgba(186, 26, 26, 0.12) !important; opacity: 1; } /* Toast notification for session actions */ .chat-toast { position: fixed; bottom: 96px; right: 24px; z-index: 200; display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 14px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; background: var(--color-inverse-surface); color: var(--color-inverse-on-surface); border: 1px solid var(--glass-border); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); transform: translateY(20px); opacity: 0; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease; pointer-events: none; } .chat-toast.visible { transform: translateY(0); opacity: 1; pointer-events: auto; } /* Custom scrollbar (theme-aware) */ .custom-scrollbar::-webkit-scrollbar { width: 6px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 99px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Hidden scrollbar */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ===================================================================== ANIMATIONS ===================================================================== */ @keyframes floatGlow { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, -80px) scale(1.15); } 100% { transform: translate(-30px, 40px) scale(0.9); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes pulseOrb { 0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(176, 205, 195, 0.6), 0 0 20px rgba(176, 205, 195, 0.2); } 50% { transform: scale(1.15); box-shadow: 0 0 16px rgba(176, 205, 195, 0.9), 0 0 32px rgba(176, 205, 195, 0.4); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ===================================================================== SMOOTH THEME TRANSITION ===================================================================== */ html, html *, html *::before, html *::after { transition: background-color 0.35s ease, color 0.25s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* Disable transitions on page load to prevent flash */ html.no-transition, html.no-transition *, html.no-transition *::before, html.no-transition *::after { transition: none !important; } /* ===================================================================== BASE BODY DEFAULTS ===================================================================== */ body { min-height: max(884px, 100dvh); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Prevent native mobile pull-to-refresh page reloads */ html, body { overscroll-behavior-y: contain; } /* Auth Badges */ .avatar-badge { position: absolute; bottom: 0; right: 0; background: white; padding: 4px; border-radius: 50%; border: 2px solid var(--color-surface); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .google-badge { width: 16px; height: 16px; } /* ===================================================================== MOBILE UI CALIBRATIONS (Touch targets, iOS zoom, layout fixes) ===================================================================== */ /* Prevent dreaded horizontal side-scroll on mobile */ html, body { overflow-x: hidden; /* Ensure dynamic viewport heights are respected so keyboard doesn't push UI into oblivion */ height: 100%; min-height: 100dvh; } @media (max-width: 768px) { /* Prevent iOS Safari auto-zoom by forcing 16px font size on inputs */ input, textarea, select, button { font-size: 16px !important; } /* Apple HIG requires a minimum 44px touch target */ button, .chat-dropdown-item, #chat-session-menu-btn, .avatar-badge, #chat-send-btn, .quick-action-btn { min-height: 44px; min-width: 44px; justify-content: center; } } /* ===================================================================== GLOBAL GLASSMORPHIC LOADING OVERLAY ===================================================================== */ #zenith-global-loader { position: fixed; inset: 0; z-index: 99999; background: var(--color-background); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.3s ease, visibility 0.3s ease; } #zenith-global-loader.hidden-loader { opacity: 0; visibility: hidden; pointer-events: none; } @keyframes shimmer { 100% { transform: translateX(100%); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }