/* =================================================================== 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 (Default / Serene Protocol Spec) ===================================================================== */ :root, [data-theme="light"] { /* Surface hierarchy */ --color-surface: #faf9f7; --color-surface-dim: #dadad8; --color-surface-bright: #faf9f7; --color-surface-container-lowest: #ffffff; --color-surface-container-low: #f4f3f2; --color-surface-container: #efeeec; --color-surface-container-high: #e9e8e6; --color-surface-container-highest:#e3e2e1; --color-surface-variant: #e3e2e1; --color-surface-tint: #49645c; /* Content on surfaces */ --color-on-surface: #1a1c1b; --color-on-surface-variant: #424846; /* Inverse */ --color-inverse-surface: #2f3130; --color-inverse-on-surface: #f1f1ef; /* Primary (Slate Sage) */ --color-primary: #47615a; --color-on-primary: #ffffff; --color-primary-container: #5f7a72; --color-on-primary-container: #f4fffa; --color-inverse-primary: #b0cdc3; --color-primary-fixed: #cce9df; --color-primary-fixed-dim: #b0cdc3; /* Secondary */ --color-secondary: #5d5f5d; --color-on-secondary: #ffffff; --color-secondary-container: #e2e3e1; --color-on-secondary-container: #636563; /* Tertiary */ --color-tertiary: #5c5d4f; --color-on-tertiary: #ffffff; --color-tertiary-container: #757667; --color-on-tertiary-container: #fefeec; /* Error */ --color-error: #ba1a1a; --color-on-error: #ffffff; --color-error-container: #ffdad6; --color-on-error-container: #93000a; /* Outline */ --color-outline: #727976; --color-outline-variant: #c1c8c4; /* Background */ --color-background: #faf9f7; --color-on-background: #1a1c1b; /* === Volumetric / Glassmorphism tokens === */ --glass-bg: rgba(255, 255, 255, 0.75); --glass-border: rgba(0, 0, 0, 0.06); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); --glass-blur: 24px; --header-bg: linear-gradient(to bottom, rgba(250, 249, 247, 0.92), rgba(244, 243, 242, 0.85)); --header-border: rgba(0, 0, 0, 0.06); /* Sync error badge styling */ .sync-error { color: #ef4444; /* red-500 */ } --glass-active-bg: rgba(255, 255, 255, 0.85); --glass-active-border: rgba(0, 0, 0, 0.10); --glass-active-shadow: 0 8px 32px rgba(0, 0, 0, 0.10); --bubble-bg: rgba(255, 255, 255, 0.80); --bubble-border: rgba(0, 0, 0, 0.06); --bubble-border-top: rgba(0, 0, 0, 0.10); --bubble-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); /* === Dropdown panel — high-opacity for legibility === */ --dropdown-bg: rgba(245, 245, 243, 0.97); --dropdown-border: rgba(0, 0, 0, 0.09); --dropdown-shadow: 0 20px 60px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.08); --dropdown-item-hover-bg: rgba(0, 0, 0, 0.05); /* === Premium Chat Interface Differentiators === */ --chat-container-bg: rgba(255, 255, 255, 0.70); --chat-container-border: rgba(0, 0, 0, 0.06); --bubble-user-bg: rgba(71, 97, 90, 0.08); --bubble-user-border: rgba(71, 97, 90, 0.15); --bubble-user-border-top: rgba(71, 97, 90, 0.24); --bubble-user-shadow: 0 8px 24px rgba(71, 97, 90, 0.06); --bubble-user-text: #1a1c1b; --bubble-ai-bg: rgba(255, 255, 255, 0.90); --bubble-ai-border: rgba(0, 0, 0, 0.05); --bubble-ai-border-top: rgba(0, 0, 0, 0.08); --bubble-ai-shadow: 0 12px 36px rgba(0, 0, 0, 0.04); --bubble-ai-text: #1a1c1b; --vol-bg: linear-gradient(135deg, #f5f7fa 0%, #e8ecf5 50%, #f0f4f8 100%); --vol-glow-1: radial-gradient(circle, rgba(95, 122, 114, 0.06) 0%, rgba(0,0,0,0) 70%); --vol-glow-2: radial-gradient(circle, rgba(92, 93, 79, 0.05) 0%, rgba(0,0,0,0) 70%); --scrollbar-thumb: rgba(0, 0, 0, 0.10); --scrollbar-thumb-hover: rgba(0, 0, 0, 0.18); color-scheme: light; } /* ===================================================================== DARK MODE (Derived from Serene Protocol) ===================================================================== */ [data-theme="dark"] { /* Surface hierarchy */ --color-surface: #131614; --color-surface-dim: #131614; --color-surface-bright: #393c3a; --color-surface-container-lowest: #0e110f; --color-surface-container-low: #1b1e1c; --color-surface-container: #1f2220; --color-surface-container-high: #292c2a; --color-surface-container-highest:#343735; --color-surface-variant: #424846; --color-surface-tint: #b0cdc3; /* Content on surfaces */ --color-on-surface: #e3e2e1; --color-on-surface-variant: #c1c8c4; /* Inverse */ --color-inverse-surface: #e3e2e1; --color-inverse-on-surface: #2f3130; /* Primary (Sage — lighter for dark readability) */ --color-primary: #b0cdc3; --color-on-primary: #05201a; --color-primary-container: #324c45; --color-on-primary-container: #cce9df; --color-inverse-primary: #47615a; --color-primary-fixed: #cce9df; --color-primary-fixed-dim: #b0cdc3; /* Secondary */ --color-secondary: #c6c7c5; --color-on-secondary: #2e302e; --color-secondary-container: #454746; --color-on-secondary-container: #e2e3e1; /* Tertiary */ --color-tertiary: #c7c8b7; --color-on-tertiary: #303124; --color-tertiary-container: #46483b; --color-on-tertiary-container: #e3e4d2; /* Error */ --color-error: #ffb4ab; --color-on-error: #690005; --color-error-container: #93000a; --color-on-error-container: #ffdad6; /* Outline */ --color-outline: #8c9390; --color-outline-variant: #424846; /* Background */ --color-background: #131614; --color-on-background: #e3e2e1; /* === Volumetric / Glassmorphism tokens === */ --glass-bg: rgba(20, 22, 20, 0.45); --glass-border: rgba(255, 255, 255, 0.05); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.30); --glass-blur: 24px; --header-bg: linear-gradient(to bottom, rgba(25, 29, 27, 0.90), rgba(20, 22, 20, 0.80)); --header-border: rgba(255, 255, 255, 0.06); --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(20, 22, 20, 0.55); --bubble-border: rgba(255, 255, 255, 0.06); --bubble-border-top: rgba(255, 255, 255, 0.12); --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(15, 18, 16, 0.45); --chat-container-border: rgba(255, 255, 255, 0.04); --bubble-user-bg: rgba(176, 205, 195, 0.12); --bubble-user-border: rgba(176, 205, 195, 0.16); --bubble-user-border-top: rgba(176, 205, 195, 0.28); --bubble-user-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 16px rgba(176, 205, 195, 0.02); --bubble-user-text: #e3e2e1; --bubble-ai-bg: rgba(31, 34, 32, 0.70); --bubble-ai-border: rgba(255, 255, 255, 0.06); --bubble-ai-border-top: rgba(255, 255, 255, 0.12); --bubble-ai-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); --bubble-ai-text: #e3e2e1; --vol-bg: linear-gradient(135deg, #0a0c0b 0%, #111410 50%, #080a09 100%); --vol-glow-1: radial-gradient(circle, rgba(176, 205, 195, 0.04) 0%, rgba(0,0,0,0) 70%); --vol-glow-2: radial-gradient(circle, rgba(199, 200, 183, 0.035) 0%, rgba(0,0,0,0) 70%); --scrollbar-thumb: rgba(255, 255, 255, 0.08); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.15); color-scheme: dark; } /* ===================================================================== UTILITY CLASSES (Theme-Aware) ===================================================================== */ /* Volumetric ambient background */ .volumetric-bg { background: var(--vol-bg); position: relative; overflow: 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; } /* 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; }