/* ========================================================================= M&S Electronics — Liquid Glass UI Theme Shared theme used by index.html, chat.html, settings.html. Light & dark modes via [data-theme] on . Button radii are kept at fb-inbox-manager's original values (per Hnin's request); only the finish/material changes. ========================================================================= */ :root { /* Brand */ --brand-primary: #0A84FF; --brand-primary-dark: #0066CC; --brand-secondary: #30D158; --brand-secondary-dark: #25A244; --brand-accent: #FF9F0A; --brand-danger: #FF453A; /* Light Mode — default */ --bg-primary: #F2F2F7; --bg-secondary: #FFFFFF; --bg-tertiary: #E5E5EA; --glass-bg: rgba(255, 255, 255, 0.55); --glass-bg-strong: rgba(255, 255, 255, 0.75); --glass-border: rgba(255, 255, 255, 0.8); --glass-shadow: rgba(0, 0, 0, 0.08); --glass-shadow-strong: rgba(0, 0, 0, 0.15); --text-primary: #1C1C1E; --text-secondary: #3A3A3C; --text-tertiary: #6C6C70; --text-placeholder: #AEAEB2; --text-on-accent: #FFFFFF; --divider: rgba(60, 60, 67, 0.12); --divider-strong: rgba(60, 60, 67, 0.25); --mesh-color-1: #c8e6ff; --mesh-color-2: #e8f5e9; --mesh-color-3: #fff3e0; --mesh-color-4: #f3e5f5; /* Legacy mapping — keeps fb-inbox-manager's existing variable names working unchanged. This is the bridge that lets us re-style without touching the JS or HTML structure. */ --bg: var(--bg-primary); --surface: var(--glass-bg); --surface2: var(--glass-bg-strong); --border: var(--divider); --accent: var(--brand-primary); --accent2: var(--brand-secondary); --text: var(--text-primary); --muted: var(--text-tertiary); --unread: var(--brand-accent); --danger: var(--brand-danger); } [data-theme="dark"] { --bg-primary: #000000; --bg-secondary: #1C1C1E; --bg-tertiary: #2C2C2E; --glass-bg: rgba(255, 255, 255, 0.07); --glass-bg-strong: rgba(255, 255, 255, 0.12); --glass-border: rgba(255, 255, 255, 0.15); --glass-shadow: rgba(0, 0, 0, 0.4); --glass-shadow-strong: rgba(0, 0, 0, 0.6); --text-primary: #FFFFFF; --text-secondary: #EBEBF5; --text-tertiary: #AEAEB2; --text-placeholder: #6C6C70; --divider: rgba(84, 84, 88, 0.4); --divider-strong: rgba(84, 84, 88, 0.7); --mesh-color-1: #0a1628; --mesh-color-2: #0a1a0f; --mesh-color-3: #1a1200; --mesh-color-4: #130a1a; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'DM Sans', 'Noto Sans Myanmar', -apple-system, sans-serif; color: var(--text-primary); background-color: var(--bg-primary); min-height: 100vh; transition: background-color 0.3s ease, color 0.3s ease; overflow-x: hidden; } /* Animated Gradient Mesh Background */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse 80% 60% at 10% 20%, var(--mesh-color-1) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 90% 10%, var(--mesh-color-4) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 50% 90%, var(--mesh-color-2) 0%, transparent 60%), radial-gradient(ellipse 50% 70% at 80% 60%, var(--mesh-color-3) 0%, transparent 60%), var(--bg-primary); animation: meshShift 15s ease-in-out infinite alternate; pointer-events: none; } @keyframes meshShift { 0% { opacity: 1; } 50% { opacity: 0.85; } 100% { opacity: 1; } } /* ========================================================================= GLASS MATERIALS Apply by adding `.glass` or `.glass-strong` class to any element. These are also automatically applied to legacy --surface backgrounds via the chat.html / settings.html / index.html overrides below. ========================================================================= */ .glass { background: var(--glass-bg); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: 0 8px 32px var(--glass-shadow), 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(0, 0, 0, 0.05) inset; } .glass-strong { background: var(--glass-bg-strong); backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%); border: 1px solid var(--glass-border); box-shadow: 0 4px 24px var(--glass-shadow), 0 1px 0 rgba(255, 255, 255, 0.6) inset; } [data-theme="dark"] .glass, [data-theme="dark"] .glass-strong { box-shadow: 0 8px 32px var(--glass-shadow-strong), 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 -1px 0 rgba(0, 0, 0, 0.4) inset; } /* ========================================================================= iOS 26-STYLE BUTTONS (Liquid Glass) Border radii are preserved from each page's original CSS — these styles only change colors, gradients, shadows, and hover behavior. ========================================================================= */ /* Primary action — blue gradient with depth */ button, .btn { font-family: inherit; cursor: pointer; border: none; transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease; } button:active, .btn:active { transform: scale(0.97); } /* Theme toggle pill */ .theme-toggle { position: relative; width: 44px; height: 28px; border-radius: 14px; background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); box-shadow: 0 2px 8px var(--glass-shadow), 0 1px 0 rgba(255, 255, 255, 0.4) inset; cursor: pointer; display: inline-flex; align-items: center; padding: 0 4px; flex-shrink: 0; } .theme-toggle::before { content: ''; position: absolute; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #FFD700 0%, #FF9500 100%); box-shadow: 0 2px 6px rgba(255, 149, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset; transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1), background 0.3s; } [data-theme="dark"] .theme-toggle::before { transform: translateX(16px); background: linear-gradient(135deg, #6E8FFF 0%, #0A84FF 100%); box-shadow: 0 2px 6px rgba(10, 132, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.3) inset; } /* ========================================================================= FORMS ========================================================================= */ input, textarea, select { font-family: inherit; color: var(--text-primary); background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15); } input::placeholder, textarea::placeholder { color: var(--text-placeholder); } /* ========================================================================= SCROLLBARS — subtle, glass-friendly ========================================================================= */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--glass-bg-strong); border-radius: 4px; border: 1px solid var(--glass-border); } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } /* ========================================================================= MOBILE OVERFLOW PROTECTION When the header contains many items (user pill, theme toggle, AI button, Refresh, Logout, etc.), it can overflow the viewport on narrow phones. Lock horizontal scroll, allow header items to wrap or shrink, and on small screens drop the text label of action buttons so only the icon stays — preserving every original button, just compressed visually. ========================================================================= */ html, body { overflow-x: hidden; max-width: 100vw; } /* Header layout — wrap when items don't fit, allow flex children to shrink */ .header { flex-wrap: wrap; row-gap: 8px; min-width: 0; } .header > * { min-width: 0; } /* Truncate long contact / page names in header instead of pushing layout */ .contact-info, .header-logo > div:last-child { min-width: 0; overflow: hidden; } .contact-name, .contact-sub, .logo-text, .logo-sub, .header-title, .header-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* On small phones, compress the action buttons to icons only. The button is still there and clickable — we just hide the trailing text node so the row fits inside the viewport. */ @media (max-width: 480px) { /* User pill: cap width so long emails truncate instead of pushing layout */ #userPill { max-width: 90px; overflow: hidden; text-overflow: ellipsis; } /* Settings / Refresh / Logout buttons: tighten padding on mobile */ .refresh-btn { padding: 6px 8px !important; font-size: 13px !important; } /* Hide the text label of action buttons on small screens — emoji stays */ .btn-label { display: none; } } @media (max-width: 380px) { /* Even smaller screens: hide pill entirely (still visible in /api/auth/me) */ #userPill { display: none; } }