/* ══════════════════════════════════════════════ DARK MODE — Theme variables data-theme="dark" on activates dark mode. theme.js sets this before first paint (no flash). ══════════════════════════════════════════════ */ [data-theme="dark"] { /* Backgrounds */ --bg: #0F0F10; --bg-secondary: #1A1A1B; --bg-tertiary: #242425; --card: #1E1E1F; --sidebar-bg: #161617; /* Text */ --text: #F9FAFB; --text-secondary: #9CA3AF; --text-tertiary: #6B7280; /* Borders */ --border: #2D2D2E; --border-light: #242425; /* Accent */ --primary: #6366F1; --primary-hover: #4F46E5; --primary-light: #1E1B4B; /* Inputs */ --input-bg: #242425; /* Shadows — darker environments need stronger shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3); --shadow-lg: 0 10px 25px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.3); --shadow-xl: 0 20px 40px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.3); } /* ── Font size system ── */ html[data-font="small"] { --font-size-base: 13px; } html[data-font="medium"] { --font-size-base: 15px; } html[data-font="large"] { --font-size-base: 17px; } /* ── Message spacing system ── */ html[data-spacing="compact"] .message-bubble { padding: 8px 12px !important; } html[data-spacing="comfortable"] .message-bubble { padding: 14px 18px !important; } /* ── Dark mode component overrides ── */ [data-theme="dark"] body { background: var(--bg); color: var(--text); } [data-theme="dark"] .auth-card, [data-theme="dark"] .settings-card, [data-theme="dark"] .modal-box, [data-theme="dark"] .toast { background: var(--card); border-color: var(--border); color: var(--text); } [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--input-bg) !important; color: var(--text) !important; border-color: var(--border) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-tertiary) !important; } /* ── Dark mode input-bar (chat input container) ── */ [data-theme="dark"] .input-bar { background: #242425 !important; border-color: #2D2D2E !important; } [data-theme="dark"] .input-bar:focus-within { background: #1E1E1F !important; border-color: #6366F1 !important; } /* Force chat textarea text white in dark mode */ [data-theme="dark"] #chatInput, [data-theme="dark"] .chat-input, [data-theme="dark"] .message-input { color: #F9FAFB !important; background: transparent !important; caret-color: #6366F1 !important; } /* ── Dark mode chat message text ── */ [data-theme="dark"] .message-content, [data-theme="dark"] .message-content *, [data-theme="dark"] .ai-response, [data-theme="dark"] .ai-response *, [data-theme="dark"] .message-bubble, [data-theme="dark"] .message-bubble *, [data-theme="dark"] .message-text, [data-theme="dark"] .message-text *, [data-theme="dark"] .chat-message, [data-theme="dark"] .chat-message *, [data-theme="dark"] .stream-content, [data-theme="dark"] .stream-content * { color: #F9FAFB !important; } [data-theme="dark"] .message.user .message-bubble, [data-theme="dark"] .message.user .message-bubble * { color: #FFFFFF !important; } [data-theme="dark"] pre, [data-theme="dark"] pre * { background: #1E1E1F !important; border-color: #3D3D3E !important; } [data-theme="dark"] pre code { color: #E5E7EB !important; } [data-theme="dark"] :not(pre) > code { background: #2D2D2E !important; color: #E5E7EB !important; border-color: #3D3D3E !important; } /* Fix WebKit autofill black text */ [data-theme="dark"] textarea, [data-theme="dark"] #chatInput, [data-theme="dark"] #messageInput { color: #F9FAFB !important; -webkit-text-fill-color: #F9FAFB !important; } /* ── Markdown reveal animation (fires when streaming finishes) ── */ @keyframes markdownReveal { from { opacity: 0.7; } to { opacity: 1; } } [data-theme="dark"] a { color: var(--primary); } /* ── Theme toggle button ── */ .theme-toggle { display: flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 8px; } .theme-track { width: 48px; height: 26px; background: var(--border-light, #F3F4F6); border-radius: 999px; border: 1.5px solid var(--border, #E5E7EB); position: relative; transition: background 0.2s ease, border-color 0.2s ease; flex-shrink: 0; } .theme-track.dark { background: var(--primary, #4F46E5); border-color: var(--primary, #4F46E5); } .theme-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .theme-track.dark .theme-thumb { transform: translateX(22px); } .theme-icon { font-size: 16px; line-height: 1; } /* ── Pill group (appearance section) ── */ .appearance-pill-group { display: flex; gap: 8px; flex-wrap: wrap; } .appearance-pill { padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--border, #E5E7EB); background: none; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--text-secondary, #6B7280); transition: all 0.15s; } .appearance-pill.active { background: var(--primary-light, #EEF2FF); border-color: var(--primary, #4F46E5); color: var(--primary, #4F46E5); font-weight: 600; } .appearance-pill:hover:not(.active) { border-color: var(--primary, #4F46E5); color: var(--primary, #4F46E5); } /* ── Auto-save indicator ── */ .save-indicator { font-size: 12px; font-weight: 500; opacity: 0; transition: opacity 0.3s ease; margin-left: 8px; } /* ── Character counter ── */ .char-counter { display: block; text-align: right; font-size: 11px; color: var(--text-tertiary, #9CA3AF); margin-top: 4px; transition: color 0.2s ease; } .char-counter.warn { color: #F59E0B; } .char-counter.limit { color: #EF4444; } /* ── Keyboard shortcuts modal ── */ .shortcuts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 20px 24px; } @media (max-width: 500px) { .shortcuts-grid { grid-template-columns: 1fr; } } .shortcut-group h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary, #9CA3AF); margin-bottom: 10px; } .shortcut-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; color: var(--text-secondary, #6B7280); border-bottom: 1px solid var(--border-light, #F3F4F6); } .shortcut-row:last-child { border-bottom: none; } kbd { background: var(--bg-tertiary, #F3F4F6); border: 1px solid var(--border, #E5E7EB); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; font-size: 11px; font-family: monospace; color: var(--text, #111827); white-space: nowrap; } [data-theme="dark"] kbd { background: #2D2D2E; border-color: #3D3D3E; color: #F9FAFB; } /* ── Reset & Base ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #4F46E5; --primary-hover: #3730A3; --primary-light: #EEF2FF; --secondary: #7C3AED; --accent: #10B981; --warning: #F59E0B; --error: #EF4444; --bg: #F9FAFB; --card: #FFFFFF; --text: #111827; --text-secondary: #6B7280; --text-tertiary: #9CA3AF; --border: #E5E7EB; --border-light: #F3F4F6; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04); --radius: 12px; --radius-lg: 16px; --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--primary-hover); } /* ── Utility ── */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ══════════════════════════════════════════════ AUTH PAGES — Login / Signup / Forgot Password ══════════════════════════════════════════════ */ .auth-page { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); } .auth-wrapper { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .auth-card { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 44px 40px 36px; width: 100%; max-width: 440px; border: 1px solid var(--border-light); } /* ── Logo ── */ .auth-logo { text-align: center; margin-bottom: 8px; } .auth-logo .logo-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--primary); border-radius: 14px; margin-bottom: 16px; } .auth-logo .logo-icon svg { width: 26px; height: 26px; fill: none; stroke: white; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .auth-logo .logo-text { font-size: 26px; font-weight: 700; color: var(--primary); letter-spacing: -0.5px; } .auth-logo .tagline { color: var(--text-secondary); font-size: 15px; margin-top: 4px; font-weight: 400; } /* ── Headings ── */ .auth-card h1 { font-size: 22px; font-weight: 700; text-align: center; color: var(--text); margin-top: 28px; margin-bottom: 4px; letter-spacing: -0.3px; } .auth-card .subtitle { color: var(--text-secondary); text-align: center; margin-bottom: 28px; font-size: 14px; line-height: 1.5; } /* ── Form Styles ── */ .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); letter-spacing: 0.01em; } .input-wrapper { position: relative; } .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"] { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 14px; font-family: inherit; color: var(--text); background: var(--card); transition: border-color var(--transition), box-shadow var(--transition); } .form-group input::placeholder { color: var(--text-tertiary); } .form-group input:hover { border-color: #D1D5DB; } .form-group input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12); } /* Password toggle */ .password-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-tertiary); padding: 2px; display: flex; align-items: center; transition: color var(--transition); } .password-toggle:hover { color: var(--text-secondary); } .password-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .input-wrapper input[type="password"], .input-wrapper input[type="text"] { padding-right: 42px; } /* Password strength */ .password-strength { display: flex; gap: 4px; margin-top: 8px; height: 3px; } .strength-bar { flex: 1; height: 100%; border-radius: 2px; background: var(--border); transition: background var(--transition); } .strength-bar.active.weak { background: var(--error); } .strength-bar.active.fair { background: var(--warning); } .strength-bar.active.good { background: #3B82F6; } .strength-bar.active.strong { background: var(--accent); } .strength-label { font-size: 12px; margin-top: 4px; color: var(--text-tertiary); transition: color var(--transition); } .strength-label.weak { color: var(--error); } .strength-label.fair { color: var(--warning); } .strength-label.good { color: #3B82F6; } .strength-label.strong { color: var(--accent); } /* Checkbox */ .checkbox-group { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 24px; } .checkbox-group input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; } .checkbox-group label { font-size: 13px; color: var(--text-secondary); line-height: 1.5; cursor: pointer; } .checkbox-group label a { font-weight: 500; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all var(--transition); width: 100%; letter-spacing: 0.01em; } .btn:active { transform: scale(0.985); } .btn-primary { background: var(--primary); color: white; box-shadow: 0 1px 2px rgba(79, 70, 229, 0.3), 0 1px 3px rgba(0, 0, 0, 0.08); } .btn-primary:hover { background: var(--primary-hover); box-shadow: 0 2px 4px rgba(79, 70, 229, 0.35), 0 1px 3px rgba(0, 0, 0, 0.1); } .btn-primary:disabled { background: #A5B4FC; box-shadow: none; cursor: not-allowed; transform: none; } .btn-secondary { background: transparent; color: var(--primary); border: 1.5px solid var(--border); } .btn-secondary:hover { background: var(--primary-light); border-color: #C7D2FE; } /* ── Forgot password link ── */ .forgot-link { display: block; text-align: center; margin-top: 14px; font-size: 13px; color: var(--text-secondary); transition: color var(--transition); } .forgot-link:hover { color: var(--primary); } /* ── Divider ── */ .auth-divider { display: flex; align-items: center; margin: 24px 0; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .auth-divider span { padding: 0 16px; font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } /* ── Auth footer link ── */ .auth-footer-link { text-align: center; font-size: 14px; color: var(--text-secondary); } .auth-footer-link a { font-weight: 600; } /* ── Alerts ── */ .alert { padding: 12px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 20px; display: none; line-height: 1.5; } .alert.show { display: block; animation: alertIn 0.25s ease; } .alert-error { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; } .alert-success { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; } @keyframes alertIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ── Page Footer ── */ .auth-page-footer { padding: 20px; text-align: center; } .auth-page-footer a { font-size: 12px; color: var(--text-tertiary); margin: 0 12px; transition: color var(--transition); } .auth-page-footer a:hover { color: var(--text-secondary); } /* ── Responsive ── */ @media (max-width: 480px) { .auth-wrapper { padding: 24px 16px; } .auth-card { padding: 32px 24px 28px; border-radius: var(--radius); } .auth-logo .logo-text { font-size: 24px; } .auth-card h1 { font-size: 20px; } } /* ══════════════════════════════════════════════ COMPACT FOOTER — applies to every page ══════════════════════════════════════════════ */ .compact-footer { padding: 16px 24px; border-top: 1px solid #F3F4F6; background: white; } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; max-width: 1200px; margin: 0 auto; } .footer-copy { font-size: 12px; color: #9CA3AF; white-space: nowrap; } .footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; } .footer-links a { font-size: 12px; color: #9CA3AF; text-decoration: none; transition: color 0.15s ease; white-space: nowrap; } .footer-links a:hover { color: #4F46E5; } @media (max-width: 640px) { .footer-inner { flex-direction: column; align-items: flex-start; } } /* ══════════════════════════════════════════════ TOAST NOTIFICATION SYSTEM ══════════════════════════════════════════════ */ #toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: 360px; width: calc(100vw - 40px); } .toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06); border-left: 4px solid #4F46E5; pointer-events: all; animation: toastIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); transition: opacity 0.2s ease, transform 0.2s ease; } .toast.toast-success { border-left-color: #10B981; } .toast.toast-error { border-left-color: #EF4444; } .toast.toast-warning { border-left-color: #F59E0B; } .toast.toast-info { border-left-color: #4F46E5; } .toast.toast-hiding { opacity: 0; transform: translateX(20px); } .toast-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; } .toast-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .toast-success .toast-icon { color: #10B981; } .toast-error .toast-icon { color: #EF4444; } .toast-warning .toast-icon { color: #F59E0B; } .toast-info .toast-icon { color: #4F46E5; } .toast-body { flex: 1; } .toast-title { font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 2px; } .toast-message { font-size: 13px; color: #6B7280; line-height: 1.4; } .toast-close { background: none; border: none; cursor: pointer; color: #9CA3AF; padding: 0; line-height: 1; flex-shrink: 0; transition: color 0.15s ease; } .toast-close:hover { color: #374151; } .toast-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; } @keyframes toastIn { from { opacity: 0; transform: translateX(20px) scale(0.96); } to { opacity: 1; transform: translateX(0) scale(1); } } /* ══════════════════════════════════════════════ PAGE LOADER — progress bar at top ══════════════════════════════════════════════ */ #page-loader { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, #4F46E5, #7C3AED); z-index: 10000; transition: width 0.3s ease; border-radius: 0 2px 2px 0; } /* ══════════════════════════════════════════════ CONFIRMATION MODAL ══════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .modal-overlay.modal-open { opacity: 1; pointer-events: all; } .modal-card { background: white; border-radius: 16px; padding: 28px; max-width: 420px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.18); transform: scale(0.96); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .modal-overlay.modal-open .modal-card { transform: scale(1); } .modal-icon { width: 48px; height: 48px; border-radius: 12px; background: #FEF2F2; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .modal-icon svg { width: 24px; height: 24px; stroke: #EF4444; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .modal-icon.modal-icon-info { background: #EEF2FF; } .modal-icon.modal-icon-info svg { stroke: #4F46E5; } .modal-title { font-size: 17px; font-weight: 700; color: #111827; margin-bottom: 8px; } .modal-body { font-size: 14px; color: #6B7280; line-height: 1.6; margin-bottom: 24px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; } .modal-btn { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: all 0.15s ease; } .modal-btn-cancel { background: #F3F4F6; color: #374151; } .modal-btn-cancel:hover { background: #E5E7EB; } .modal-btn-confirm { background: #EF4444; color: white; } .modal-btn-confirm:hover { background: #DC2626; } .modal-btn-confirm.modal-btn-primary { background: #4F46E5; } .modal-btn-confirm.modal-btn-primary:hover { background: #3730A3; } /* ══════════════════════════════════════════════ PAGE FADE-IN ══════════════════════════════════════════════ */ body { animation: pageFadeIn 0.2s ease forwards; } @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ══════════════════════════════════════════════ FOCUS VISIBLE — keyboard accessibility ══════════════════════════════════════════════ */ :focus-visible { outline: 2px solid #4F46E5; outline-offset: 3px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } /* ══════════════════════════════════════════════ SKELETON LOADING STATES ══════════════════════════════════════════════ */ .skeleton { background: linear-gradient(90deg, #F3F4F6 25%, #E9EAEC 50%, #F3F4F6 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-text { height: 14px; margin: 6px 0; } .skeleton-title { height: 20px; width: 60%; margin-bottom: 12px; } .skeleton-avatar { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; } .skeleton-card { height: 80px; border-radius: 12px; } /* ══════════════════════════════════════════════ EMPTY STATE ══════════════════════════════════════════════ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; color: #9CA3AF; } .empty-state-icon { width: 64px; height: 64px; background: #F9FAFB; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .empty-state-icon svg { width: 32px; height: 32px; stroke: #D1D5DB; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .empty-state h3 { font-size: 15px; font-weight: 600; color: #374151; margin-bottom: 6px; } .empty-state p { font-size: 13px; color: #9CA3AF; line-height: 1.5; max-width: 280px; } /* ══════════════════════════════════════════════ UNVERIFIED EMAIL BANNER ══════════════════════════════════════════════ */ .verify-banner { background: #FEF3C7; border-bottom: 1px solid #FDE68A; padding: 10px 20px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: #92400E; flex-shrink: 0; } .verify-banner svg { width: 16px; height: 16px; stroke: #D97706; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .verify-banner a, .verify-banner button { font-weight: 600; color: #92400E; text-decoration: underline; background: none; border: none; cursor: pointer; font-size: 13px; font-family: inherit; padding: 0; } .verify-banner a:hover, .verify-banner button:hover { color: #78350F; } /* ══════════════════════════════════════════════ EARLY ACCESS BANNER — indigo gradient, white text ══════════════════════════════════════════════ */ .early-access-banner { background: linear-gradient(135deg, #4F46E5, #7C3AED); color: white; padding: 10px 16px; font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; } .early-access-banner, .early-access-banner * { color: white !important; } .early-access-banner button { background: rgba(255,255,255,0.15) !important; border: 1px solid rgba(255,255,255,0.35) !important; border-radius: 6px !important; padding: 4px 12px !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important; font-family: inherit !important; transition: background var(--transition) !important; } .early-access-banner button:hover { background: rgba(255,255,255,0.25) !important; } /* ══════════════════════════════════════════════ SIDEBAR LOGO — primary indigo colour ══════════════════════════════════════════════ */ .sidebar-logo { color: var(--primary, #4F46E5) !important; font-weight: 800 !important; } [data-theme="dark"] .sidebar-logo { color: #818CF8 !important; } /* ══════════════════════════════════════════════ USAGE PERIOD LIMIT BANNER (soft nudge in chat) ══════════════════════════════════════════════ */ .usage-limit-banner { display: none; align-items: center; gap: 10px; padding: 10px 20px; background: #FFFBEB; border-bottom: 1px solid #FDE68A; font-size: 13px; color: #92400E; flex-shrink: 0; flex-wrap: wrap; } .usage-limit-banner.show { display: flex; } .usage-limit-banner svg { stroke: #D97706; flex-shrink: 0; } .usage-limit-banner span { flex: 1; min-width: 160px; } .usage-limit-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .usage-limit-link { font-size: 13px; font-weight: 600; color: #92400E; text-decoration: underline; } .usage-limit-continue { font-size: 13px; font-weight: 600; color: #FFFFFF; background: #D97706; border: none; border-radius: 6px; padding: 5px 12px; cursor: pointer; font-family: inherit; transition: background 0.15s; } .usage-limit-continue:hover { background: #B45309; } /* ══════════════════════════════════════════════ MOBILE RESPONSIVE — Dashboard / History / Settings ══════════════════════════════════════════════ */ @media (max-width: 768px) { /* Dashboard cards */ .dash-stats { grid-template-columns: 1fr 1fr; } .dash-grid { grid-template-columns: 1fr; } /* History */ .history-layout { flex-direction: column; } .history-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 200px; overflow-y: auto; } /* Settings */ .settings-layout { flex-direction: column; } .settings-nav { width: 100%; border-right: none; border-bottom: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 12px; } .settings-nav .nav-item { flex: 1; min-width: 100px; justify-content: center; } /* General layout for app pages */ .app-header { padding: 12px 16px; } .page-main { padding: 16px; } } @media (max-width: 480px) { .dash-stats { grid-template-columns: 1fr; } /* Touch-friendly buttons — minimum 44px tap target */ button, .btn, a.btn, .nav-item, .settings-nav .nav-item { min-height: 44px; } input, select, textarea { min-height: 44px; } /* Compact footer stacks */ .compact-footer { padding: 12px 16px; } } /* ══════════════════════════════════════════════ GLOBAL CLICK-SAFETY RULES Ensure hidden/inactive overlays never silently block clicks on elements beneath them ══════════════════════════════════════════════ */ /* Hidden elements must never intercept clicks */ .hidden, [style*="display: none"], [style*="display:none"], [style*="visibility: hidden"] { pointer-events: none !important; z-index: -1 !important; } /* Modals, overlays, popups — block clicks only when open */ .modal:not(.active), .overlay:not(.visible), .popup:not(.open), .backdrop:not(.showing), .upgrade-overlay.hidden, .confirm-modal.hidden, .credits-popup.hidden, .options-popup.hidden { display: none !important; pointer-events: none !important; } /* Sidebar overlay — must be invisible and non-blocking when closed */ .sidebar-overlay:not(.show) { display: none !important; pointer-events: none !important; } /* Modal overlays with display:none are always non-blocking */ .modal-overlay[style*="display:none"], .modal-overlay[style*="display: none"] { pointer-events: none !important; } /* All interactive elements must sit above background layers */ button, a, [role="button"], .clickable, .settings-nav-item, .option-btn, .color-swatch, .toggle-option, .suggestion-card, .followup-chip, .conv-item, .plan-btn, .mode-pill, .pill-btn, .nav-icon-btn { position: relative; z-index: 2; cursor: pointer; pointer-events: auto !important; } /* Visual press feedback on all interactive elements */ button, .btn, .clickable, .settings-nav-btn, .option-btn, .color-swatch, .pill-btn { transition: transform 0.1s ease, opacity 0.1s ease !important; } button:active:not(:disabled), .btn:active, .clickable:active, .settings-nav-btn:active, .option-btn:active, .color-swatch:active, .pill-btn:active { transform: scale(0.96) !important; opacity: 0.8 !important; } /* ══════════════════════════════════════════════ DARK MODE — Chat area & message color overrides These must stay at the bottom to win specificity ══════════════════════════════════════════════ */ [data-theme="dark"] .chat-messages, [data-theme="dark"] #chatMessages, [data-theme="dark"] .messages-container, [data-theme="dark"] .chat-area, [data-theme="dark"] .chat-main, [data-theme="dark"] .chat-content { background: #0F0F10 !important; color: #F9FAFB !important; } [data-theme="dark"] .message-content, [data-theme="dark"] .message-content p, [data-theme="dark"] .message-content li, [data-theme="dark"] .message-content h1, [data-theme="dark"] .message-content h2, [data-theme="dark"] .message-content h3, [data-theme="dark"] .message-content span, [data-theme="dark"] .message-content strong, [data-theme="dark"] .message-content em, [data-theme="dark"] .ai-message-content, [data-theme="dark"] .response-content, [data-theme="dark"] .ai-response p, [data-theme="dark"] .ai-response li, [data-theme="dark"] .ai-response span { color: #F9FAFB !important; background: transparent !important; } [data-theme="dark"] .ai-bubble, [data-theme="dark"] .ai-message, [data-theme="dark"] .assistant-message, [data-theme="dark"] .bot-message { background: #1E1E1F !important; color: #F9FAFB !important; } [data-theme="dark"] .user-bubble, [data-theme="dark"] .user-message { background: #4F46E5 !important; color: #FFFFFF !important; } /* Dark mode nav grid — handled by .snav-btn rules in chat.css */ /* ── Dark mode — "Message Tokvio…" placeholder ───────────── */ [data-theme="dark"] #chatInput::placeholder { color: #6B7280 !important; opacity: 1 !important; } @keyframes toastPop { from { opacity:0; transform:translateX(-50%) scale(0.9); } to { opacity:1; transform:translateX(-50%) scale(1); } } /* ══════════════════════════════════════════════ TOPBAR CENTER — mode indicator + level switcher ══════════════════════════════════════════════ */ .topbar-center { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; } .chat-mode-indicator { display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--accent-light, #EEF2FF); border: 1px solid var(--accent-border, #C7D2FE); border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--accent, #4F46E5); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .chat-mode-indicator:hover { background: var(--accent, #4F46E5); color: white; } .mode-clear-btn { border: none; background: transparent; color: inherit; font-size: 16px; cursor: pointer; padding: 0; line-height: 1; opacity: 0.7; } .mode-clear-btn:hover { opacity: 1; } .level-switcher { display: flex; align-items: center; gap: 8px; padding: 2px 0; } .level-switcher-label { font-size: 10px; color: var(--text-tertiary, #9CA3AF); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .level-pills { display: flex; gap: 4px; } .level-pill { padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; border: 1px solid var(--border-color, #E5E7EB); background: var(--bg-secondary, #F9FAFB); color: var(--text-secondary, #6B7280); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .level-pill.active { background: var(--accent, #4F46E5); color: white; border-color: var(--accent, #4F46E5); } .level-pill:hover:not(.active) { border-color: var(--accent, #4F46E5); color: var(--accent, #4F46E5); } /* ══════════════════════════════════════════════ STREAMING MESSAGE CONTENT — marked.js output .message-content is on the .stream-content div. ══════════════════════════════════════════════ */ .message-content { font-size: 15px; line-height: 1.55; color: var(--text-primary); } .message-content > * { margin: 0; padding: 0; } .message-content > * + * { margin-top: 6px; } .message-content p { margin: 0; } .message-content p + p { margin-top: 4px; } .message-content ul, .message-content ol { padding-left: 20px; margin: 4px 0; } .message-content ul { list-style-type: disc; } .message-content ol { list-style-type: decimal; } .message-content li { margin: 1px 0; line-height: 1.5; display: list-item; } .message-content h1, .message-content h2, .message-content h3 { font-weight: 700; margin: 8px 0 2px 0; line-height: 1.3; } .message-content h1 { font-size: 1.25em; } .message-content h2 { font-size: 1.1em; } .message-content h3 { font-size: 1.05em; } .message-content code { background: var(--bg-tertiary, #F3F4F6); padding: 1px 5px; border-radius: 4px; font-size: 0.875em; font-family: monospace; } .message-content pre { background: #1E1E2E; color: #CDD6F4; padding: 14px 16px; border-radius: 10px; overflow-x: auto; margin: 6px 0; font-size: 13px; line-height: 1.5; } .message-content pre code { background: transparent; padding: 0; font-size: inherit; color: inherit; } .message-content strong { font-weight: 700; } .message-content em { font-style: italic; } .message-content blockquote { border-left: 3px solid var(--accent, var(--primary)); padding-left: 12px; margin: 6px 0; color: var(--text-secondary); } .message-content hr { border: none; border-top: 1px solid var(--border-color, var(--border)); margin: 8px 0; } [data-theme="dark"] .message-content, [data-theme="dark"] .message-content p, [data-theme="dark"] .message-content li, [data-theme="dark"] .message-content td, [data-theme="dark"] .message-content span { color: #F9FAFB; } [data-theme="dark"] .message-content strong { color: #FFFFFF; } [data-theme="dark"] .message-content h1, [data-theme="dark"] .message-content h2, [data-theme="dark"] .message-content h3 { color: #FFFFFF; } [data-theme="dark"] .message-content code { background: #2D2D2E; color: #E5E7EB; } [data-theme="dark"] .message-content pre { background: #1a1a2e; color: #CDD6F4; } [data-theme="dark"] .message-content blockquote { color: #9CA3AF; } /* ── Streaming cursor ── */ .stream-cursor { display: inline-block; width: 2px; height: 1em; background: var(--accent, var(--primary, #6366F1)); margin-left: 1px; vertical-align: text-bottom; animation: cursorBlink 0.6s infinite; } @keyframes cursorBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }