* { margin:0; padding:0; box-sizing:border-box; } .sm-login-body { min-height:100vh; overflow:auto; font-family:var(--font-ui); background:radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 34%),radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--primary-hover) 12%, transparent), transparent 32%),var(--bg-page); color:var(--text); } .sm-login-top { display:flex; align-items:center; justify-content:space-between; gap:16px; height:60px; padding:10px 20px; background:var(--topbar-bg); color:var(--topbar-text); border-bottom:1px solid var(--topbar-border); box-shadow:var(--shadow-soft); } .sm-login-brand { display:inline-flex; align-items:center; gap:10px; color:var(--topbar-text); text-decoration:none; } .sm-login-brand-logo { display:block; width:auto; height:40px; max-width:min(62vw, 270px); object-fit:contain; } .sm-login-top-note { font-size:13px; font-weight:600; color:color-mix(in srgb, var(--topbar-text) 82%, transparent); } .sm-login-main { min-height:calc(100vh - 60px); display:grid; place-items:center; padding:40px 20px; } .sm-login-card { position:relative; overflow:hidden; width:min(100%, 460px); padding:40px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-modal); backdrop-filter:blur(18px); } .sm-login-card::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--grad-accent); } .sm-login-card-brand { display:flex; align-items:center; gap:14px; margin-bottom:26px; } .sm-login-card-icon { width:46px; height:46px; display:block; border-radius:12px; box-shadow:var(--shadow-card); } .sm-login-title { font-family:var(--font-display); font-size:28px; line-height:1.15; font-weight:700; color:var(--text); letter-spacing:-.025em; } .sm-login-subtitle { margin-top:6px; font-size:15px; line-height:1.45; color:var(--text-dim); } .sm-field { display:block; margin-bottom:16px; } .sm-field-label { display:block; margin-bottom:7px; color:var(--text); font-size:13px; font-weight:700; } .sm-input { width:100%; min-height:48px; padding:12px 14px; background:var(--bg-input); border:1px solid var(--border-strong); color:var(--text); border-radius:10px; font:inherit; font-size:16px; transition:border-color .2s,box-shadow .2s,background .2s; } .sm-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); background:var(--bg-surface-alt); } .sm-input::placeholder { color:var(--text-faint); } .sm-btn { width:100%; min-height:48px; padding:12px 16px; background:var(--grad-accent); color:var(--primary-text); border:none; border-radius:24px; font:inherit; font-size:16px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-card); transition:filter .2s,transform .2s,box-shadow .2s; } .sm-btn:hover { filter:brightness(1.08); transform:translateY(-1px); box-shadow:var(--shadow-hover); } .sm-btn:active { transform:translateY(0); } .sm-btn:focus-visible { outline:3px solid var(--primary-soft); outline-offset:3px; } .sm-error,.sm-revoked { padding:12px 14px; border-radius:10px; font-size:14px; line-height:1.45; margin-bottom:16px; text-align:left; } .sm-error { background:var(--danger-soft); border:1px solid var(--danger-border); color:var(--danger); } .sm-revoked { background:var(--warning-soft); border:1px solid var(--warning-border); color:var(--warning); } .sm-footer { text-align:center; margin-top:24px; padding-top:20px; border-top:1px solid var(--border-faint); font-size:13px; color:var(--text-faint); } @media (max-width:600px) { .sm-login-top { padding:10px 16px; } .sm-login-top-note { display:none; } .sm-login-main { align-items:start; padding:24px 14px; } .sm-login-card { padding:30px 22px; } } @media (prefers-reduced-motion:reduce) { .sm-btn,.sm-input { transition:none; } } /* v3.10 DEEPEN Component 1: thread context bar */ .sm-thread-bar { display:flex; gap:4px; margin-bottom:10px; overflow-x:auto; padding:6px 0; } .sm-thread-label { font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; margin-right:4px; align-self:center; } .sm-thread-chip { font-size:12px; white-space:nowrap; background:rgba(79,141,249,.12); border:1px solid rgba(79,141,249,.2); border-radius:4px; padding:3px 8px; cursor:pointer; transition:background .15s; } .sm-thread-chip:hover { background:rgba(79,141,249,.25); border-color:var(--primary); } .sm-thread-chip a { color:var(--text-link); text-decoration:none; } .sm-thread-chip a:hover { color:var(--text-inverse); } :root { /* === Unified theme tokens (same as SamiPanel) === */ --theme-name: "sami-default"; --theme-mode: "dark"; /* SamiMail's default is dark */ /* Text */ --text: #e9eff7; --topbar-text: #ffffff; --text-dim: #b8c4d1; --text-faint: #8b9bb0; --text-inverse: #1f2937; --text-link: #4f8df9; --text-link-hover:#9d85f7; /* S6.5 */ /* Surfaces */ --bg-page: #0a0e14; --bg-surface: rgba(17, 24, 35, 0.72); --bg-surface-alt: #14202c; --bg-input: #1c2938; --bg-hover: rgba(55, 72, 98, 0.45); --bg-code: #14202c; /* Borders */ --border: rgba(55, 72, 98, 0.45); --border-strong: rgba(75, 95, 125, 0.55); --border-faint: rgba(45, 60, 85, 0.35); /* Brand */ --primary: #4f8df9; --primary-hover: #6b46e5; /* S6.5 */ --primary-soft: rgba(79, 141, 249, 0.15); --primary-text: #ffffff; /* Semantic */ --success: #22c55e; --success-soft: rgba(34, 197, 94, 0.15); --success-border: #22c55e; --danger: #f04b4b; /* S6.4: 4.5:1 on --bg-surface-alt */ --danger-soft: rgba(239, 68, 68, 0.15); --danger-border: #ef4444; --warning: #f0d020; --warning-soft: rgba(240, 208, 32, 0.15); --warning-border: #f0d020; --info: #4f8df9; --info-soft: rgba(79, 141, 249, 0.15); --info-border: #4f8df9; /* SamiMail legacy aliases (existing styles still work) */ --bg: var(--bg-page); --surface: var(--bg-surface); --card: var(--bg-surface-alt); --card-hi: var(--bg-input); --muted: var(--text-dim); --accent: var(--primary); --accent2: var(--primary-hover); --gold: var(--warning); --red: var(--danger); /* Layout */ --radius: 14px; --shadow: 0 12px 40px rgba(2, 6, 14, 0.55); --shadow-soft: 0 2px 12px rgba(2, 6, 14, 0.35); --shadow-card: 0 2px 8px rgba(2, 6, 14, 0.30); --shadow-hover: 0 6px 20px rgba(2, 6, 14, 0.45); --shadow-modal: 0 20px 60px rgba(2, 6, 14, 0.70); /* B43: --grad-accent-deep = same hue family, lightness capped at 0.26 so the white glyph clears WCAG 4.5:1 on EVERY theme — enforced by TestTopbarDeepAccentWhiteContrast (topbar_icon_btns_b42_test.go). */ --grad-accent: linear-gradient(135deg, #4f8df9, #7c5cf5); --grad-accent-deep: linear-gradient(135deg, #043280, #20087d); --topbar-bg: linear-gradient(135deg, #4f8df9, #7c5cf5); --topbar-text: #ffffff; --topbar-border: rgba(255, 255, 255, 0.14); --sidebar-bg: linear-gradient(180deg, #4f8df9, #7c5cf5); /* Shared surface for the dark sidebar and the Select page toolbar. */ --selection-bar-bg: color-mix(in srgb, var(--primary) 22%, var(--bg-surface)); /* Fonts (Sami Grotesk is the brand face — Sami Sans phased out 2026-08-22) */ --font-display: 'Sami Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Sami Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'SF Mono', Monaco, Consolas, monospace; /* S6.7: starred-pill glyph on --grad-accent-deep fills — >= 4.5:1 per theme, enforced by TestThemePaletteFillAndHoverContrast. (S6.6 carried a duplicate pair in the second, fonts-only :root — removed there; this is the single source of truth for default-dark.) */ --gold-text: #ffe082; /* S6.7: required token — solid danger fill under #fff glyphs, >= 4.5:1 per theme (TestThemePaletteFillAndHoverContrast). */ --badge-danger: #dc2626; } /* ===== Sami brand fonts ===== */ /* OFL 1.1 (Sami Grotesk / Sami Classy / Sami Classy Condensed / Sami Serif / Sami Neat Sans). Local copies at /opt/samimail/brand/fonts/*. Originals (Inter / Playfair Display / Source Serif Pro / Fira Code) are kept as fallbacks for older browsers and clean OS-only fetches. */ @font-face { font-family:'Sami Grotesk'; font-weight:400; font-style:normal; font-display:swap; src:url('/brand/fonts/Sami%20Grotesk/SamiGrotesk-Regular.woff2') format('woff2'); } @font-face { font-family:'Sami Grotesk'; font-weight:500; font-style:normal; font-display:swap; src:url('/brand/fonts/Sami%20Grotesk/SamiGrotesk-Medium.woff2') format('woff2'); } @font-face { font-family:'Sami Grotesk'; font-weight:700; font-style:normal; font-display:swap; src:url('/brand/fonts/Sami%20Grotesk/SamiGrotesk-Bold.woff2') format('woff2'); } @font-face { font-family:'Sami Grotesk'; font-weight:600; font-style:normal; font-display:swap; src:url('/brand/fonts/Sami%20Grotesk/SamiGrotesk-Bold.woff2') format('woff2'); } @font-face { font-family:'Sami Classy'; font-weight:400; font-style:normal; font-display:swap; src:url('/brand/fonts/Sami%20Classy/SamiClassy-Regular.woff2') format('woff2'); } @font-face { font-family:'Sami Classy'; font-weight:600; font-style:normal; font-display:swap; src:url('/brand/fonts/Sami%20Classy/SamiClassy-SemiBold.woff2') format('woff2'); } @font-face { font-family:'Sami Classy'; font-weight:700; font-style:normal; font-display:swap; src:url('/brand/fonts/Sami%20Classy/SamiClassy-Bold.woff2') format('woff2'); } @font-face { font-family:'Sami Classy Condensed'; font-weight:400; font-style:normal; font-display:swap; src:url('/brand/fonts/Sami%20Classy%20Condensed/SamiClassyCond-Regular.woff2') format('woff2'); } @font-face { font-family:'Sami Classy Condensed'; font-weight:600; font-style:normal; font-display:swap; src:url('/brand/fonts/Sami%20Classy%20Condensed/SamiClassyCond-SemiBold.woff2') format('woff2'); } @font-face { font-family:'Sami Classy Condensed'; font-weight:700; font-style:normal; font-display:swap; src:url('/brand/fonts/Sami%20Classy%20Condensed/SamiClassyCond-Bold.woff2') format('woff2'); } @font-face { font-family:'Sami Serif'; font-weight:400; font-style:normal; font-display:swap; src:url('/brand/fonts/Sami%20Serif/SamiSerif-Regular.woff2') format('woff2'); } @font-face { font-family:'Sami Serif'; font-weight:600; font-style:normal; font-display:swap; src:url('/brand/fonts/Sami%20Serif/SamiSerif-Semibold.woff2') format('woff2'); } @font-face { font-family:'Sami Serif'; font-weight:700; font-style:normal; font-display:swap; src:url('/brand/fonts/Sami%20Serif/SamiSerif-Bold.woff2') format('woff2'); } @font-face { font-family:'Sami Neat Sans'; font-weight:400; font-style:normal; font-display:swap; src:url('/brand/fonts/Sami%20Neat%20Sans/SamiNeatSans-Regular-Complete.woff2') format('woff2'); } @font-face { font-family:'Sami Neat Sans'; font-weight:700; font-style:normal; font-display:swap; src:url('/brand/fonts/Sami%20Neat%20Sans/SamiNeatSans-Bold-Complete.woff2') format('woff2'); } :root { --font-brand: 'Sami Classy', 'Playfair Display', Georgia, serif; --font-display: 'Sami Grotesk', 'Inter', system-ui, sans-serif; --font-ui: 'Sami Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-email: 'Sami Serif', 'Source Serif Pro', Georgia, serif; --font-condensed: 'Sami Classy Condensed', 'Sami Classy', 'Playfair Display', Georgia, serif; --font-neat: 'Sami Neat Sans', 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; } * { margin:0; padding:0; box-sizing:border-box; } html,body { height:100%; } body { font-family:var(--font-ui); background:var(--bg-page); color:var(--text); font-size:14px; overflow:hidden; } /* ===== Top bar — frosted glass ===== */ .sm-top { display:flex; align-items:center; gap:16px; padding:6px 20px; background:var(--topbar-bg); color:var(--topbar-text); border-bottom:1px solid var(--topbar-border); height:52px; position:fixed; top:0; left:0; right:0; z-index:50; box-shadow:0 1px 0 rgba(0,0,0,.08) inset; transition:background .2s ease; } /* Brand frame: topbar and sidebar draw from the active theme tokens. Both light and dark sidebars use --sidebar-bg; content-area grays and the selection toolbar remain independent and unchanged. */ [data-theme*="-light"] .sm-side { background:var(--sidebar-bg); border-right-color:color-mix(in srgb, var(--topbar-text) 100%, transparent); } [data-theme*="-dark"] .sm-side { background:var(--sidebar-bg); border-right-color:var(--border); } [data-theme*="-light"] .sm-side-title { color:color-mix(in srgb, var(--topbar-text) 70%, transparent); } [data-theme*="-dark"] .sm-side-title { color:color-mix(in srgb, var(--topbar-text) 70%, transparent); } [data-theme*="-light"] .sm-folder { color:color-mix(in srgb, var(--topbar-text) 85%, transparent); } [data-theme*="-dark"] .sm-folder { color:color-mix(in srgb, var(--topbar-text) 85%, transparent); } [data-theme*="-light"] .sm-folder:hover { background:rgba(255,255,255,0.12); color:var(--topbar-text); } [data-theme*="-dark"] .sm-folder:hover { background:rgba(255,255,255,0.12); color:var(--topbar-text); } [data-theme*="-light"] .sm-folder.active { background:rgba(255,255,255,0.22); color:var(--topbar-text); font-weight:600; } [data-theme*="-dark"] .sm-folder.active { background:rgba(255,255,255,0.22); color:var(--topbar-text); font-weight:600; } [data-theme*="-light"] .sm-folder .cnt { background:rgba(255,255,255,0.22); color:var(--topbar-text); } [data-theme*="-dark"] .sm-folder .cnt { background:rgba(255,255,255,0.22); color:var(--topbar-text); } [data-theme*="-light"] .sm-folder.active .cnt { background:var(--grad-accent-deep, var(--primary)); color:#fff; } [data-theme*="-dark"] .sm-folder.active .cnt { background:var(--grad-accent-deep, var(--primary)); color:#fff; } [data-theme*="-light"] .sm-folder .tot { color:color-mix(in srgb, var(--topbar-text) 55%, transparent); } [data-theme*="-dark"] .sm-folder .tot { color:color-mix(in srgb, var(--topbar-text) 55%, transparent); } [data-theme*="-light"] .sm-quota { color:color-mix(in srgb, var(--topbar-text) 85%, transparent); border-top-color:color-mix(in srgb, var(--topbar-text) 12%, transparent); } [data-theme*="-dark"] .sm-quota { color:color-mix(in srgb, var(--topbar-text) 85%, transparent); border-top-color:color-mix(in srgb, var(--topbar-text) 12%, transparent); } [data-theme*="-light"] .sm-quota-text { color:color-mix(in srgb, var(--topbar-text) 70%, transparent); } [data-theme*="-dark"] .sm-quota-text { color:color-mix(in srgb, var(--topbar-text) 70%, transparent); } [data-theme*="-light"] .sm-quota-bar { background:rgba(0,0,0,0.18); } [data-theme*="-dark"] .sm-quota-bar { background:rgba(0,0,0,0.18); } [data-theme*="-light"] .sm-search input { background:color-mix(in srgb, var(--topbar-text) 18%, transparent); border:1px solid color-mix(in srgb, var(--topbar-text) 30%, transparent); color:var(--topbar-text); } [data-theme*="-dark"] .sm-search input { background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.30); color:#ffffff; } [data-theme*="-light"] .sm-search input::placeholder { color:color-mix(in srgb, var(--topbar-text) 78%, transparent); } [data-theme*="-dark"] .sm-search input::placeholder { color:rgba(255,255,255,0.78); } [data-theme*="-light"] .sm-search input:focus:not(:focus-visible) { background:rgba(255,255,255,0.28); border-color:#ffffff; box-shadow:0 0 0 3px rgba(255,255,255,0.22); } [data-theme*="-dark"] .sm-search input:focus:not(:focus-visible) { background:rgba(255,255,255,0.28); border-color:#ffffff; box-shadow:0 0 0 3px rgba(255,255,255,0.22); } [data-theme*="-light"] .sm-search .ico { color:color-mix(in srgb, var(--topbar-text) 85%, transparent); } [data-theme*="-dark"] .sm-search .ico { color:rgba(255,255,255,0.85); } /* topbar buttons (sm-view-toggle / sm-theme-toggle / sm-help-btn) take the per-theme DEEP accent gradient (B43); see the base rule near .sm-theme-toggle */ [data-theme*="-light"] .sm-top .sm-user { color:#ffffff; } [data-theme*="-dark"] .sm-top .sm-user { color:#ffffff; } /* v3.145.1: the legacy per-theme .sm-logout color rules (white text for the old text-link design) were DELETED — they out-specified the v3.145 frosted pill and painted white-on-white. Sign out is styled solely by the .sm-top .sm-logout pill rules below. */ [data-theme*="-light"] .sm-thread-chip { background:color-mix(in srgb, var(--topbar-text) 18%, transparent); border-color:color-mix(in srgb, var(--topbar-text) 30%, transparent); color:var(--topbar-text); } [data-theme*="-dark"] .sm-thread-chip { background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.30); color:#ffffff; } [data-theme*="-light"] .sm-thread-chip:hover { background:rgba(255,255,255,0.32); border-color:#ffffff; } [data-theme*="-dark"] .sm-thread-chip:hover { background:rgba(255,255,255,0.32); border-color:#ffffff; } /* v3.145 (Sami): topbar controls adopt the search-bar frosted-pill treatment. On signature-color topbars (forest green etc.) the old styles left dark chip text sitting directly on the brand gradient — unreadable. Quick-filter chips keep that light frosted pill with dark text. B43 (Sami, 2026-09-11) moved the ROUND icon buttons to the theme accent gradient instead (see the B43 rules below). Active/filter states show a primary ring + bold. */ .sm-top .sm-qf-chip { background:rgba(255,255,255,0.88); border:1px solid rgba(255,255,255,0.55); color:#16281c; } .sm-top .sm-qf-chip:hover { background:#ffffff; border-color:#ffffff; color:#0e1f14; } .sm-top .sm-qf-chip .sm-qf-chip-dot { opacity:.7; } /* Active chip stays frosted (dark text — WCAG-safe on every theme; white-on- primary fails on most brand primaries) and shows engagement via a thick primary ring + primary dot, not a fill flip. */ .sm-top .sm-qf-chip.active { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary); color:#0e1f14; font-weight:700; } .sm-top .sm-qf-chip.active .sm-qf-chip-dot { background:var(--primary); opacity:1; } .sm-top .sm-qf-chip.active:hover { background:#ffffff; border-color:var(--primary-hover); box-shadow:0 0 0 2px var(--primary-hover); color:#0e1f14; } /* B43 (Sami): the frosted white pill is GONE — the round circles wear the THEME ACCENT itself (base rule supplies var(--grad-accent) + foreground, the same pairing as Compose and Sign out). Separation from the same-gradient topbar is an INSET white ring in box-shadow — no border, so no layout shift and the 38px geometry contract holds. */ .sm-top #sm-density-btn[aria-pressed="true"] { box-shadow:inset 0 0 0 2px rgba(255,255,255,0.65); font-weight:700; } /* Sign out: compact topbar counterpart to Compose — same accent gradient, foreground, rounded shape, elevation and hover lift; width/margins stay topbar-sized so the 52px fixed bar and mobile overflow contract hold. */ .sm-top .sm-logout { display:inline-flex; align-items:center; justify-content:center; background:var(--grad-accent-deep, var(--primary)); color:#fff; border:none; border-radius:24px; padding:9px 16px; font-size:14px; font-weight:700; box-shadow:0 4px 16px color-mix(in srgb, var(--primary) 40%, transparent); transition:transform .2s, box-shadow .2s, filter .2s; } .sm-top .sm-logout:hover { transform:translateY(-1px); color:#fff; box-shadow:0 6px 22px color-mix(in srgb, var(--primary) 55%, transparent); filter:saturate(1.08); } @media (prefers-reduced-motion:reduce) { .sm-top .sm-logout { transition:none; } .sm-top .sm-logout:hover { transform:none; filter:none; } } [data-theme*="-light"] .sm-list-head-check input { accent-color:#ffffff; } [data-theme*="-dark"] .sm-list-head-check input { accent-color:#ffffff; } .sm-logo { height:30px; display:block; } .sm-search { flex:1; max-width:560px; margin:0 auto; position:relative; } .sm-search input { width:100%; padding:10px 16px 10px 42px; background:rgba(22,32,46,.55); border:1px solid var(--border); border-radius:24px; color:var(--text); font-size:14px; transition:all .2s; } .sm-search input:focus:not(:focus-visible) { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,141,249,.18); background:rgba(28,41,56,.7); } .sm-search .ico { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-dim); } /* v3.75 quick-filter popover button + dropdown + chip row */ .sm-search-filter-btn { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:transparent; border:1px solid var(--border); border-radius:14px; color:var(--text-dim); cursor:pointer; padding:4px 8px; font-size:11px; line-height:1; } .sm-search-filter-btn:hover { color:var(--text); border-color:var(--primary); } .sm-search-filter-pop { position:absolute; right:0; top:calc(100% + 6px); background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 32px rgba(0,0,0,.35); padding:8px; min-width:240px; display:none; z-index:50; } .sm-search-filter-pop[data-open="true"] { display:block; } .sm-search-filter-item { display:block; width:100%; text-align:left; padding:6px 10px; border:0; background:transparent; color:var(--text); cursor:pointer; border-radius:6px; font-size:13px; } .sm-search-filter-item:hover { background:rgba(79,141,249,.12); } .sm-search-filter-hint { padding:6px 10px; font-size:11px; color:var(--text-dim); } .sm-search-chips { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; padding:6px 8px 0; max-width:560px; margin:0 auto; } .sm-search-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 4px 3px 8px; border:1px solid var(--border); border-radius:14px; background:rgba(79,141,249,.12); color:var(--text); font-size:11.5px; line-height:1; } .sm-search-chip-key { color:var(--primary); font-weight:600; } .sm-search-chip-val { color:var(--text-dim); } .sm-search-chip-x { border:0; background:transparent; color:var(--text-dim); cursor:pointer; font-size:14px; padding:0 4px; line-height:1; border-radius:50%; } .sm-search-chip-x:hover { color:var(--text); background:rgba(255,255,255,.08); } /* v3.117 (B17) quick filter chips */ .sm-qf-strip{display:none;flex-wrap:wrap;gap:6px;padding:0;max-width:760px;margin:0} .sm-qf-strip.has-active{display:flex} .sm-qf-strip .sm-qf-chip:not(.active){display:none} .sm-top.qf-reveal .sm-qf-strip{display:flex;position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);width:max-content;max-width:min(760px,calc(100vw - 32px));padding:8px;background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);z-index:75} .sm-top.qf-reveal .sm-qf-strip .sm-qf-chip{display:inline-flex} .sm-qf-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:14px;background:transparent;border:1px solid var(--border);color:var(--text-dim);font-size:11.5px;line-height:1;cursor:pointer;user-select:none;transition:background .12s,color .12s,border-color .12s;font-family:inherit} .sm-qf-chip:hover{color:var(--text);border-color:var(--primary);background:rgba(79,141,249,.08)} .sm-qf-chip:focus-visible{outline:2px solid var(--primary);outline-offset:1px} .sm-qf-chip.active{background:var(--grad-accent-deep,var(--primary));color:#fff;border-color:var(--primary)} .sm-qf-chip.active:hover{background:var(--grad-accent-deep,var(--primary));color:#fff;opacity:.92} /* S6.4: deep accent fill already paints #fff text on every theme. */ .sm-qf-chip-dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55;flex-shrink:0} .sm-qf-chip.active .sm-qf-chip-dot{background:#fff;opacity:.95} @media(max-width:600px){.sm-qf-chip{padding:3px 8px;font-size:11px}} /* v3.91 saved searches */ .sm-ssearch-row { padding-top:2px; } .sm-ssearch-chip { display:inline-flex; align-items:center; gap:2px; padding:3px 4px 3px 4px; border:1px dashed var(--border); border-radius:14px; background:transparent; color:var(--text); font-size:11.5px; line-height:1; } .sm-ssearch-link { color:var(--text-dim); text-decoration:none; padding:0 4px; } .sm-ssearch-link:hover { color:var(--text); text-decoration:underline; } .sm-ssearch-chip.active { border-style:solid; border-color:var(--primary); } .sm-ssearch-chip.active .sm-ssearch-link { color:var(--primary); font-weight:600; } .sm-ssearch-form { display:inline-flex; margin:0; padding:0; } .sm-ssearch-x { border:0; background:transparent; color:var(--text-dim); cursor:pointer; font-size:14px; padding:0 4px; line-height:1; border-radius:50%; } .sm-ssearch-x:hover { color:var(--text); background:rgba(255,255,255,.08); } .sm-ssearch-save-form { display:inline-flex; margin:0 0 0 8px; padding:0; vertical-align:middle; } .sm-ssearch-save { border:1px solid var(--border); background:transparent; color:var(--text-dim); font-size:11.5px; padding:3px 10px; border-radius:12px; cursor:pointer; line-height:1; } .sm-ssearch-save:hover { color:var(--text); border-color:var(--primary); } .sm-ssearch-saved-flag { color:var(--primary); font-size:11.5px; margin-left:8px; } [data-theme*="-light"] .sm-search-chip { background:color-mix(in srgb, var(--accent) 18%, transparent); } [data-theme*="-dark"] .sm-search-chip { background:rgba(79,141,249,.12); } @media (max-width: 860px) { .sm-search-filter-btn { display:none; } } /* v3.108 / C46: incremental-search debounce loading state. When .sm-search-loading is on the form, the input dims and a 14px spinner fades in over the filter button. The spinner is positioned absolute on the .sm-search container (which has position:relative from .sm-search { ... position:relative }). */ .sm-search-loading input { opacity:.55; transition:opacity .15s; } .sm-search-loading::after { content:""; position:absolute; right:34px; top:50%; transform:translateY(-50%); width:14px; height:14px; border:2px solid var(--text-dim); border-top-color:transparent; border-radius:50%; animation:sm-search-spin 0.9s linear infinite; opacity:.85; pointer-events:none; } @keyframes sm-search-spin { to { transform:translateY(-50%) rotate(360deg); } } .sm-top-right { display:flex; align-items:center; gap:12px; } .sm-user { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim); } /* v3.79: forwarder more-toggle */ /* v3.74: H-menu dropdown */ .sm-user-menu { position:relative; } .sm-user-btn { display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; color:inherit; font:inherit; padding:4px 8px; border-radius:8px; } .sm-user-btn:hover { background:color-mix(in srgb, var(--accent) 20%, transparent); } .sm-user-dropdown { position:absolute; top:calc(100% + 8px); right:0; min-width:240px; background:var(--bg2, var(--panel-bg,#1c2938)); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.4); padding:10px; z-index:900; } .sm-ud-sec { font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-dim); margin:8px 4px 4px; font-weight:700; } .sm-identity-row { display:flex; align-items:center; gap:8px; width:100%; padding:7px 8px; border:none; background:none; color:var(--text); border-radius:8px; cursor:pointer; text-align:left; font-size:12.5px; } .sm-identity-row:hover { background:color-mix(in srgb, var(--accent) 14%, transparent); } .sm-identity-row.active { background:color-mix(in srgb, var(--accent) 22%, transparent); font-weight:600; } .sm-identity-row .sm-avatar-sm { width:24px; height:24px; font-size:11px; } .sm-ud-upload { display:block; padding:7px 8px; border-radius:8px; cursor:pointer; color:var(--text); font-size:12.5px; } .sm-ud-upload:hover { background:color-mix(in srgb, var(--accent) 14%, transparent); } .sm-avatar-sm { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--primary),#8b5cf6); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--text-inverse); overflow:hidden; } .sm-avatar-img { width:32px; height:32px; border-radius:50%; object-fit:cover; display:block; background:linear-gradient(135deg,var(--primary),#8b5cf6); } .sm-logout { color:var(--text-dim); text-decoration:none; font-size:13px; padding:6px 12px; border-radius:8px; transition:all .15s; } .sm-logout:hover { color:var(--text); background:var(--bg-surface-alt); } /* v3.145.5: unified notification centre. Both notification and calendar badges belong to the one Notifications bell. The bell is the positioning anchor; without this, absolutely positioned badges attach to a distant ancestor and can appear beside Sign out. Explicit [hidden] rules prevent the flex declaration from exposing the initial zero-count badges. */ .sm-top #sm-notifs-btn { position:relative; overflow:visible; } .sm-reminders-badge, .sm-notifs-badge { position:absolute; top:2px; right:1px; display:inline-flex; align-items:center; justify-content:center; min-width:15px; height:15px; padding:0 3px; margin:0; border-radius:8px; background:var(--badge-danger, var(--danger)); color:#fff; font-size:9.5px; font-weight:700; line-height:1; } .sm-reminders-badge[hidden], .sm-notifs-badge[hidden] { display:none !important; } [data-theme*="-dark"] .sm-reminders-badge { color:var(--text-inverse); background:var(--badge-danger, var(--danger)); } .sm-rem-panel, .sm-notifs-panel { position:absolute; top:54px; right:14px; width:340px; max-height:480px; overflow-y:auto; background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.18); z-index:60; font-family:inherit; } /* v3.136 (C40): notifications feed */ .sm-notifs-panel ul { list-style:none; margin:0; padding:0; max-height:340px; overflow:auto; } .sm-notifs-panel li { padding:10px 14px; border-bottom:1px solid var(--border,#e5e7eb); display:flex; flex-direction:column; gap:2px; } .sm-notifs-panel li.unread { background:rgba(79,141,249,.08); } .sm-notifs-panel li.empty { color:var(--text-dim,#8a94a6); text-align:center; } .sm-notifs-panel li em { font-style:normal; font-weight:600; font-size:14px; color:var(--text,#111); } .sm-notifs-panel li small { font-size:12.5px; color:var(--text-dim,#8a94a6); } .sm-notifs-panel li time { font-size:11px; color:var(--text-dim,#8a94a6); } .sm-notifs-head { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border,#e5e7eb); } .sm-notifs-head strong { flex:1; font-size:13.5px; } .sm-notifs-head button { border:none; background:none; color:var(--primary,#4a8ad8); cursor:pointer; font-size:12.5px; padding:4px 6px; border-radius:6px; } .sm-notifs-head button:hover { background:rgba(79,141,249,.12); } .sm-rem-panel[hidden] { display:none; } .sm-rem-panel-head { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-bottom:1px solid var(--border); font-size:13px; font-weight:700; color:var(--text); } .sm-rem-panel-empty { padding:18px 14px; color:var(--text-dim); font-size:13px; text-align:center; } .sm-rem-item { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border); font-size:13px; } .sm-rem-item:last-child { border-bottom:none; } .sm-rem-item.overdue { background:rgba(245,158,11,.08); } [data-theme*="-dark"] .sm-rem-item.overdue { background:rgba(245,158,11,.15); } .sm-rem-item-info { flex:1; min-width:0; } .sm-rem-item-title { font-weight:600; color:var(--text); margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sm-rem-item-meta { font-size:11.5px; color:var(--text-dim); font-family:ui-monospace, Menlo, monospace; } .sm-rem-item-actions { display:flex; gap:5px; flex:none; } .sm-rem-item-btn { background:var(--bg-surface-alt); color:var(--text); border:1px solid var(--border); border-radius:7px; padding:4px 8px; font-size:11.5px; font-weight:600; cursor:pointer; font-family:inherit; } .sm-rem-item-btn:hover { background:var(--grad-accent-deep, var(--primary)); color:#fff; border-color:transparent; } .sm-rem-item-btn.primary { background:var(--grad-accent-deep, var(--primary)); color:#fff; border-color:transparent; } .sm-rem-item-btn.primary:hover { filter:brightness(1.08); } /* ===== Layout ===== */ /* v3.169.2 (Sami): sidebar back to full height - starts right under the topbar, nothing overlays its top; the bulk bar now spans only the list/read area. */.sm-app { display:flex; height:calc(100vh - 52px); margin-top:52px; } .sm-side { width:264px; min-width:264px; background:var(--bg-surface); border-right:1px solid var(--border); border-top:3px solid rgba(255,255,255,.35); padding:0 10px 16px; overflow-y:scroll; scrollbar-gutter:stable; display:flex; flex-direction:column; scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--text-dim) 45%, transparent) transparent; overscroll-behavior:contain; } [data-theme$="-light"] .sm-side { border-top-color:rgba(0,0,0,.35); } [data-theme$="-light"] .sm-list-head { border-top-color:rgba(0,0,0,.35); } [data-theme$="-light"] .sm-read { border-color:rgba(0,0,0,.35); } [data-theme$="-light"] .sm-list { border-right-color:rgba(0,0,0,.35); } /* v3.145.7 (Sami): visible, slim scrollbar so long folder/forwarder lists advertise scrollability instead of silently clipping. */ .sm-side::-webkit-scrollbar { width:12px; } .sm-side::-webkit-scrollbar-track { background:color-mix(in srgb, var(--text-dim) 14%, transparent); border-radius:6px; } .sm-side::-webkit-scrollbar-thumb { background:color-mix(in srgb, var(--text-dim) 70%, var(--text) 20%); border-radius:6px; border:2px solid transparent; background-clip:padding-box; } .sm-side::-webkit-scrollbar-thumb:hover { background:color-mix(in srgb, var(--text-dim) 55%, transparent); } .sm-main { flex:1; display:flex; min-width:0; } .sm-list { width:clamp(380px,29vw,440px); min-width:340px; border-right:3px solid rgba(255,255,255,.35); overflow-y:auto; background:var(--bg-page); isolation:isolate; } /* v3.169.6 (Sami): reserve room for the fixed bulk bar so the top of the message list (folder name + select row) is never covered. The bar's real height (it wraps) is measured by JS into --bulkbar-h. */ .sm-main { padding-top: var(--bulkbar-h, 0px); } .sm-list-head { position:sticky; top:0; z-index:20; background:var(--bg-surface); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border); border-top:3px solid rgba(255,255,255,.35); } body[data-theme$="-light"] .sm-list > .sm-list-head { background:rgba(255,255,255,.88); } .sm-read { flex:1; overflow-y:auto; background:var(--bg-page); border:3px solid rgba(255,255,255,.35); border-radius:10px 10px 0 0; } /* ===== Sidebar ===== */ .sm-compose-btn { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; padding:13px 14px; background:var(--grad-accent-deep, var(--primary)); color:#fff; border:none; border-radius:24px; font-size:17px; font-weight:700; letter-spacing:.02em; cursor:pointer; box-shadow:inset 0 0 0 1px color-mix(in srgb, #ffffff 38%, transparent), 0 4px 16px color-mix(in srgb, var(--primary) 40%, transparent); transition:all .2s; margin-top:9px; margin-bottom:14px; } .sm-compose-btn:hover { transform:translateY(-1px); box-shadow:0 6px 22px color-mix(in srgb, var(--primary) 55%, transparent); filter:saturate(1.08); } /* v3.169.4 (Sami): sidebar group spacers - quiet light-gray hairlines that collapse the group above/below them on click. */ .sm-side-spacer { display:block; width:100%; height:2px; margin:10px 0; padding:0; border:none; border-radius:1px; background:rgba(160,170,185,.45); cursor:pointer; transition:background .15s ease, transform .15s ease; } .sm-side-spacer:hover { background:rgba(160,170,185,.85); transform:scaleY(1.6); } .sm-side-spacer:focus-visible { outline:2px solid var(--primary); outline-offset:3px; } /* v3.169.5 (Sami): sidebar back-to-top pill. Same capsule look as the new-mail pill but small, tucked at the bottom of the sidebar, only visible once the folder list is scrolled down. */ .sm-side-top { position:fixed; left:132px; bottom:18px; transform:translateX(-50%); z-index:300; display:inline-flex; align-items:center; justify-content:center; width:44px; height:30px; font-size:14px; color:var(--primary-text,#fff); background:linear-gradient(135deg,var(--primary) 0%,var(--primary-hover) 100%); border:1px solid var(--primary); border-radius:999px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.18), 0 0 0 3px rgba(79,141,249,.14); transition:transform .12s ease, box-shadow .12s ease; user-select:none; } .sm-side-top[hidden] { display:none !important; } .sm-side-top:hover { transform:translateX(-50%) translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.24), 0 0 0 4px rgba(79,141,249,.22); } .sm-side-top:active { transform:translateX(-50%) translateY(0); } .sm-side-top-icon { display:inline-block; animation:sm-side-top-bob 1.6s ease-in-out infinite; } @keyframes sm-side-top-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .sm-side-top-icon { animation:none; } } @media (max-width:860px) { .sm-side-top { left:50%; } } .sm-folders { display:flex; flex-direction:column; gap:2px; margin-top:10px; } .sm-folder { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px; color:var(--text-dim); text-decoration:none; font-size:13.5px; cursor:pointer; transition:all .15s; border:none; background:none; width:100%; text-align:left; } .sm-folder:hover { background:var(--bg-surface-alt); color:var(--text); } .sm-folder.active { background:rgba(59,130,246,.14); color:var(--primary); font-weight:600; } .sm-folder .fic { width:20px; text-align:center; opacity:.85; } .sm-folder .cnt { background:var(--bg-input); color:var(--text-dim); font-size:11px; padding:2px 8px; border-radius:10px; } .sm-folder.active .cnt { background:var(--grad-accent-deep, var(--primary)); color:#fff; } .sm-folder .tot { background:transparent; color:var(--text-dim); font-size:11px; padding:2px 4px; border-radius:6px; opacity:.5; } .sm-folder-cnt { margin-left:auto; display:flex; gap:4px; align-items:center; } /* v3.154 (S1.1): folder manager panel */ .sm-folder-mgr > summary { list-style:none; cursor:pointer; opacity:.85; } .sm-folder-mgr > summary::-webkit-details-marker { display:none; } .sm-folder-mgr[open] > summary { opacity:1; } .sm-folder-mgr-body { padding:6px 10px 10px 22px; display:flex; flex-direction:column; gap:6px; } .sm-folder-mgr-new { display:flex; gap:6px; } .sm-folder-mgr-new input[type=text] { flex:1; min-width:0; padding:5px 8px; border-radius:6px; border:1px solid var(--border); background:var(--bg-input); color:var(--text); font-size:12.5px; } .sm-folder-mgr-row { display:flex; align-items:center; gap:4px; flex-wrap:wrap; } .sm-folder-mgr-name { font-size:12px; color:var(--text-dim); flex:0 0 100%; margin-top:4px; } .sm-folder-mgr-ren { display:flex; gap:4px; flex:1; min-width:0; } .sm-folder-mgr-ren input[type=text] { flex:1; min-width:0; padding:4px 7px; border-radius:6px; border:1px solid var(--border); background:var(--bg-input); color:var(--text); font-size:12px; } .sm-folder-mgr-btn { background:none; border:1px solid var(--border); border-radius:6px; padding:3px 7px; cursor:pointer; color:var(--text-dim); font-size:12px; } .sm-folder-mgr-btn:hover { color:var(--text); border-color:var(--text-dim); } .sm-side-title { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); padding:14px 14px 6px; } /* v3.131: working collapse for the sidebar toggle. On <=860px the sidebar is a fixed slide-in drawer, so the rail layout is desktop-only and every rule here is scoped to min-width:861px — mobile is never reshaped by a persisted collapsed preference. Icon spans (.fic) carry meaning in rail mode; text nodes have no wrapper, hence the font-size:0 technique. */ @media (min-width:861px) { /* v3.145.5 (Sami): collapse no longer squeezes to an icon rail. The sidebar keeps its full width; the folder list slides UP out of view (max-height + opacity + translate) and the quota block settles to the bottom. Compose and the toggle stay put. Toggle again and the list slides back down. The class name "collapsed" is kept so the toggle JS, settings persistence, the "[" shortcut, PJAX re-init and server-side SideClass rendering work unchanged. */ /* v3.145.7 (Sami): max-height + overflow:hidden clipped long folder lists (many forwarder labels) with NO scrollbar — invisible content. The slide now animates opacity+transform only; .sm-side keeps overflow-y:auto so the whole list stays reachable by scroll at any length. */ /* B28 (Sami 2026-08-30): collapse hides ONLY the extra zone (Starred..Scheduled + forwarders). Inbox..Trash (.sm-folders) sit ABOVE the toggle and stay visible whether expanded or collapsed. */ .sm-folders-extra { display:flex; flex-direction:column; gap:2px; margin-top:8px; transition:opacity .26s ease, transform .32s cubic-bezier(.4,0,.2,1); } .sm-side.collapsed .sm-folders-extra { max-height:0; overflow:hidden; opacity:0; transform:translateY(-14px); pointer-events:none; } .sm-quota { transition:margin-top .32s cubic-bezier(.4,0,.2,1); } .sm-side.collapsed .sm-quota { margin-top:auto; } /* base glyph ◀ (fold away) rotates to ▶ when collapsed */ .sm-side.collapsed .sm-side-toggle { transform:rotate(180deg); } } /* B28r2 (Sami correction): "the button should be white" = the GLYPH is white — NO pill/field behind it. Original transparent button, subtle hover tint only. */ /* B28r4 (green-theme report): the sidebar's TEXT convention is var(--topbar-text) (labels: color-mix(--topbar-text 85%)), NOT var(--text) (dark ink). The glyph follows the labels so it reads white on the green theme and correct on every other theme, exactly like folder labels do. */ /* B28r3: the old ◀ text glyph fell back to a symbol/emoji font that paints its own black and ignores CSS color. The glyph is now an inline SVG with fill=currentColor, so color:var(--text) genuinely controls it (white on dark themes). Rotation animation unchanged (CSS transform). */ .sm-side-toggle { flex:none; align-self:flex-end; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; background:none; border:none; border-radius:8px; color:var(--topbar-text); cursor:pointer; transition:transform .2s ease, background .15s ease, color .15s ease; font-size:13px; line-height:1; } .sm-side-toggle:hover { background:rgba(255,255,255,0.12); color:var(--topbar-text); } .sm-side-toggle .sm-tg { display:block; flex:none; } /* v3.110 (C35): drag-to-reorder sidebar folders. The .sm-folder-draggable cursor turns into a "grab" hand when over the row; dragging lifts the row with a subtle shadow; the drop target gets a horizontal accent line on whichever half of the row the cursor is over. */ .sm-folder-draggable { cursor: grab; } .sm-folder-draggable:active { cursor: grabbing; } .sm-folder-dragging { opacity: .35; transform: scale(.98); box-shadow: 0 6px 22px rgba(2,6,14,.32); } .sm-folder-drop-before { box-shadow: inset 0 3px 0 0 var(--primary) !important; } .sm-folder-drop-after { box-shadow: inset 0 -3px 0 0 var(--primary) !important; } /* Touch-friendly: on <= 480px screens, the drop indicator uses a slightly thicker line so it's visible against cramped rows. */ @media (max-width: 480px) { .sm-folder-drop-before { box-shadow: inset 0 4px 0 0 var(--primary) !important; } .sm-folder-drop-after { box-shadow: inset 0 -4px 0 0 var(--primary) !important; } } .sm-quota { margin-top:auto; padding:14px; font-size:12px; color:var(--text-dim); border-top:1px solid var(--border); } .sm-quota-bar { height:6px; background:rgba(255,255,255,0.08); border-radius:3px; margin-top:8px; overflow:hidden; } .sm-quota-fill { height:100%; border-radius:3px; transition:width .4s ease; } .sm-quota-ok { background:linear-gradient(90deg,#34d399,#10b981); } .sm-quota-warn { background:linear-gradient(90deg,#fbbf24,var(--warning)); } .sm-quota-crit { background:linear-gradient(90deg,var(--danger),var(--danger)); } .sm-quota-text { margin-top:6px; font-size:11px; color:var(--text-dim); } .sm-quota-stacked .sm-quota-bar:first-child { margin-top:0; } .sm-quota-stacked .sm-quota-text + .sm-quota-bar { margin-top:4px; } /* ===== Message list ===== */ /* v3.32 topbar select-all + filter-unread */ .sm-list-head-check { display:flex; align-items:center; padding-right:10px; cursor:pointer; } .sm-list-head-check input { width:16px; height:16px; accent-color:var(--primary); cursor:pointer; } [data-theme$="-light"] .sm-list-head-check input { accent-color:#ffffff; } .sm-tb-select-all-top-active { background:var(--primary-soft) !important; border-color:var(--primary) !important; } [data-theme$="-light"] .sm-tb-select-all-top-active { background:rgba(255,255,255,0.32) !important; border-color:#ffffff !important; } #sm-unread-toggle.is-filtering { background:var(--primary-soft) !important; border-color:var(--primary) !important; color:var(--primary-text) !important; } [data-theme$="-light"] #sm-unread-toggle.is-filtering { background:color-mix(in srgb, var(--topbar-text) 32%, transparent) !important; border-color:var(--topbar-text) !important; color:#ffffff !important; } .sm-list-head { display:flex; align-items:center; justify-content:space-between; padding:7px 18px; border-radius:10px 10px 0 0; } .sm-list-title { font-size:13px; font-weight:600; color:var(--text); letter-spacing:-.005em; } .sm-pager { display:flex; gap:6px; align-items:center; font-size:12px; color:var(--text-dim); } .sm-pager a { color:var(--text-dim); text-decoration:none; padding:4px 10px; border-radius:6px; transition:all .15s; } .sm-pager a:hover { background:var(--bg-surface-alt); color:var(--text); } .sm-row { display:flex; gap:12px; min-height:76px; padding:13px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .18s ease, transform .1s ease, box-shadow .18s ease; position:relative; align-items:flex-start; } .sm-row:hover { background:var(--bg-hover); box-shadow:inset 3px 0 0 color-mix(in srgb, var(--primary) 55%, transparent); } .sm-row:active { transform:scale(.995); } .sm-row.active { background:var(--primary-soft); box-shadow:inset 3px 0 0 var(--primary); } .sm-row.unread { background:color-mix(in srgb, var(--primary) 7%, transparent); } .sm-row.unread .sm-r-sub, .sm-row.unread .sm-r-from { font-weight:700; color:var(--text); } .sm-row:not(.unread) .sm-r-sub { color:var(--text-dim); font-weight:400; } .sm-row:not(.unread) .sm-r-from { color:var(--text-dim); font-weight:400; } /* Unread dot — Gmail-style blue pill on the left edge of unread rows */ .sm-row.unread::before { content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:2px; background:var(--primary); } /* Checkbox always visible (Sami 09-17: hover-only checkboxes hid bulk select on touch; v3.151) — quiet idle, full on hover */ .sm-r-check { opacity:.45; transition:opacity .15s; } .sm-row:hover .sm-r-check, .sm-r-check:has(input:checked), .sm-list.has-selection .sm-r-check { opacity:1; } /* v3.151 select-same-sender micro-button in the checkbox column */ .sm-r-same { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-right:2px; border:none; border-radius:6px; background:transparent; color:var(--text-dim); cursor:pointer; opacity:.45; transition:opacity .15s, background .12s, color .12s; font-size:13px; line-height:1; padding:0; flex:none; } .sm-row:hover .sm-r-same, .sm-list.has-selection .sm-r-same { opacity:.7; } .sm-r-same:focus-visible { outline:2px solid var(--primary); outline-offset:1px; opacity:1; } .sm-r-same:hover { opacity:1 !important; background:var(--primary-soft); color:var(--primary); } .sm-r-same:active { transform:scale(.92); } /* Keyboard-highlighted row */ .sm-kbd-active { outline:none; background:rgba(59,130,246,.14) !important; box-shadow:inset 3px 0 0 var(--primary); } /* Navigation feedback: dim content while the next page loads */ html.sm-nav-away .sm-list, html.sm-nav-away .sm-read { opacity:.45; transition:opacity .2s; pointer-events:none; } /* B27: safety valve — if a soft-nav ever leaves the dim stuck >8s it is a bug; JS clears it. */ html.sm-nav-stuck .sm-list, html.sm-nav-stuck .sm-read { opacity:1; pointer-events:auto; } /* Print: only the read pane, clean white layout */ @media print { .sm-top, .sm-side, .sm-list, .sm-bulk-bar, .sm-help-overlay, .sm-toast, .sm-menu-btn, .sm-search { display:none !important; } .sm-main { display:block !important; } .sm-read { display:block !important; position:static !important; inset:auto !important; width:100% !important; } .sm-read-inner { max-width:100% !important; padding:0 !important; } .sm-actions { display:none !important; } body { background:var(--text-inverse) !important; } .sm-body, .sm-read-subject, .sm-read-from, .sm-read-addr { color:#111 !important; } .sm-body a { color:#0645ad !important; } .sm-body .sm-quote { border-left:2px solid var(--text-faint) !important; background:none !important; color:var(--text) !important; } .sm-read-head { border-bottom:1px solid #ccc !important; } } /* Toast (v3.77 SnackBar stack) */ .sm-toast { display:none; } body[data-theme$="-light"] .sm-toast { background: transparent; } .sm-r-av { width:38px; height:38px; min-width:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--text-inverse); position:relative; overflow:hidden; } .sm-r-av img { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; } .sm-r-body { flex:1; min-width:0; } .sm-r-top { display:flex; align-items:baseline; gap:8px; } .sm-r-from { font-size:13.5px; font-weight:400; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sm-r-date { margin-left:auto; font-size:11.5px; color:var(--text-dim); white-space:nowrap; } .sm-r-sub { font-size:13.5px; font-weight:400; color:var(--text); margin:3px 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sm-r-prev { font-size:12.5px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sm-r-flag { position:absolute; right:14px; bottom:10px; color:var(--warning); font-size:13px; } .sm-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:64px 24px; color:var(--text-dim); gap:10px; text-align:center; } .sm-empty-art { width:120px; height:96px; display:grid; place-items:center; margin-bottom:2px; border-radius:26px; background:linear-gradient(145deg, color-mix(in srgb, var(--primary) 12%, var(--bg-surface-alt)), var(--bg-surface)); border:1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); box-shadow:var(--shadow-soft); } .sm-empty-art svg { width:104px; height:82px; overflow:visible; } .sm-empty-art .line { fill:none; stroke:var(--text-dim); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } .sm-empty-art .wash { fill:color-mix(in srgb, var(--primary) 13%, transparent); stroke:none; } .sm-empty-art .accent { fill:color-mix(in srgb, var(--primary) 32%, transparent); stroke:var(--primary); stroke-width:2; stroke-linejoin:round; } .sm-empty-art .badge { fill:var(--primary); } .sm-empty-art .check { fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; } .sm-empty-art .spark { fill:none; stroke:var(--primary); stroke-width:3; stroke-linecap:round; } .sm-empty-title { color:var(--text); font-size:16px; font-weight:700; margin-top:4px; } .sm-empty-copy { max-width:360px; font-size:13px; line-height:1.55; } .sm-empty-compact { padding:18px 10px 14px; gap:7px; } .sm-empty-compact .sm-empty-art { width:92px; height:72px; border-radius:20px; } .sm-empty-compact .sm-empty-art svg { width:80px; height:62px; } .sm-empty-compact .sm-empty-title { font-size:14px; } .sm-empty-compact .sm-empty-copy { font-size:12px; max-width:270px; } .sm-empty-tip { margin-top:6px; padding:7px 11px; border-radius:999px; background:var(--bg-surface-alt); border:1px solid var(--border); color:var(--text-dim); font-size:11.5px; } /* v3.106 (C44): Quick-reply chips — small pill row above the inline reply body. Renders only when the inline reply form is open. Interactive feedback on hover/active; keyboard focus ring matches the global --primary outline. */ .sm-qreply-chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 6px; padding:4px 2px; min-height:6px; } .sm-qreply-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:1px solid var(--border); border-radius:999px; background:var(--bg-surface); color:var(--text); font:inherit; font-size:12.5px; font-weight:500; cursor:pointer; transition:all .12s ease; line-height:1; user-select:none; } .sm-qreply-chip:hover { border-color:var(--primary); color:var(--text); background:var(--primary-soft); transform:translateY(-1px); box-shadow:0 2px 8px rgba(2,6,14,.18); } .sm-qreply-chip:active { transform:translateY(0); background:var(--bg-surface-alt); } .sm-qreply-chip:focus-visible { outline:2px solid var(--primary); outline-offset:2px; } .sm-qreply-chip.is-active { border-color:var(--primary); background:var(--primary-soft); color:var(--text); } .sm-qreply-chip[data-chip-id="clear"] { color:var(--text-dim); } .sm-qreply-chip[data-chip-id="clear"]:hover { color:var(--danger); border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.08); } .sm-qreply-chip .ico { font-size:14px; line-height:1; } /* v3.106: minimal styling for the inline-reply form so the chips + textarea + send button sit consistently. Original ship had no .sm-inline-reply rule — relied on inherited form styles which made the chips hard to position visually. */ .sm-inline-reply { display:flex; flex-direction:column; gap:8px; margin-top:18px; padding:16px 18px; background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-soft, 0 2px 10px rgba(0,0,0,.04)); } .sm-inline-reply[hidden] { display:none !important; } .sm-ir-head { display:flex; align-items:center; justify-content:space-between; gap:10px; } .sm-ir-label { font-size:13px; color:var(--text-dim); } .sm-ir-label b { color:var(--text); font-weight:600; } .sm-ir-x { background:transparent; border:0; color:var(--text-dim); cursor:pointer; font-size:14px; padding:4px 8px; border-radius:6px; font-family:inherit; line-height:1; } .sm-ir-x:hover { background:var(--bg-input); color:var(--danger); } .sm-ir-to, .sm-ir-subject, .sm-ir-body { width:100%; padding:9px 12px; border-radius:8px; border:1px solid var(--border); background:var(--bg-input); color:var(--text); font:inherit; font-size:14px; } .sm-ir-body { resize:vertical; min-height:120px; line-height:1.5; } .sm-ir-to:focus:not(:focus-visible), .sm-ir-subject:focus:not(:focus-visible), .sm-ir-body:focus:not(:focus-visible) { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); } .sm-ir-foot { display:flex; align-items:center; gap:10px; } .sm-ir-send { padding:8px 18px; border-radius:8px; border:1px solid var(--primary); background:var(--grad-accent-deep, var(--primary)); color:#fff; cursor:pointer; font:inherit; font-weight:600; font-size:13.5px; } .sm-ir-send:hover { filter:brightness(1.08); } .sm-ir-send[disabled] { opacity:.5; cursor:not-allowed; } .sm-ir-status { font-size:12.5px; color:var(--text-dim); } /* ===== Reading pane ===== */ .sm-read-inner { max-width:860px; margin:0 auto; padding:28px 32px 60px; } .sm-read-head { padding:20px 0 16px; border-bottom:1px solid var(--border); margin-bottom:20px; } .sm-read-subject { font-size:21px; font-weight:700; line-height:1.3; margin-bottom:14px; } .sm-badge { display:inline-block; font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:20px; vertical-align:middle; margin-left:6px; letter-spacing:.02em; } .sm-badge-signed { background:var(--success-soft); color:var(--success); border:1px solid rgba(52,211,153,.35); } .sm-badge-dkim { background:rgba(59,130,246,.12); color:var(--info); border:1px solid rgba(96,165,250,.3); } .sm-read-meta { display:flex; align-items:center; gap:12px; } .sm-read-av { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--text-inverse); font-size:16px; } .sm-read-who { flex:1; min-width:0; } .sm-read-from { font-size:14px; font-weight:600; } .sm-read-addr { font-size:12.5px; color:var(--text-dim); } .sm-read-date { font-size:12px; color:var(--text-dim); text-align:right; } .sm-actions { display:flex; gap:6px; margin:16px 0 0; padding-top:16px; border-top:1px solid var(--border); flex-wrap:wrap; align-items:center; } /* v3.146 (B26): one-click unsubscribe pill */ .sm-unsub { display:inline-flex; align-items:center; gap:6px; } .sm-unsub-status { font-size:12.5px; color:var(--text-dim); align-self:center; } .sm-act { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; background:rgba(22,32,46,.55); border:1px solid var(--border); color:var(--text-dim); border-radius:20px; font-size:12.5px; cursor:pointer; text-decoration:none; transition:all .18s cubic-bezier(.2,.7,.3,1); backdrop-filter:blur(6px); } .sm-act:hover { color:var(--text); background:var(--bg-hover); border-color:var(--border-strong); transform:translateY(-1px); box-shadow:0 3px 10px rgba(2,6,14,.35); } .sm-act:active { transform:translateY(0); } /* v3.145.2 (Sami): the Add-to-calendar CTA rendered as a generic oversized primary pill that clashed with the theme. It now uses the compose-button DNA (theme gradient + theme text color, same compact size/radius as its read-pane siblings) so it reads as THE primary action yet stays native. */ .sm-addcal-btn { background: var(--grad-accent-deep, var(--primary)); color: #fff; border: none; border-radius: 18px; padding: 7px 16px; font-size: 12.5px; font-weight: 600; box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 35%, transparent); } .sm-addcal-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 45%, transparent); } .sm-addcal-btn:active { transform: translateY(0); filter: brightness(.97); } /* v3.145.2 (Sami): the read-pane action pills (Print / Raw / Reply / Forward / Back …) adopt the same compose-gradient DNA so the whole row shares one accent language: theme gradient fill, theme text color, compact pills. Keyboard-hint chips inside them invert to translucent white for legibility. */ .sm-act { background: var(--grad-accent-deep, var(--primary)); color: #fff; border: none; box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 30%, transparent); } .sm-act:hover { background: var(--grad-accent-deep, var(--primary)); color: #fff; filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 42%, transparent); } .sm-act .kbd { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.35); color: var(--primary-text, #fff); } /* v3.145.4: the snooze