/* ============================================================ CYBERINSIGHT MAIL v2 — Outlook-style FluentUI theme ============================================================ */ :root { --primary: #0F6CBD; --primary-dark: #0F548C; --primary-darker: #0C3B5E; --primary-light: #B4D6FA; --primary-lighter: #CFE4FA; --primary-lighter-alt: #EBF3FC; --primary-tertiary: #62ABF5; --neutral-dark: #242424; --neutral-primary: #424242; --neutral-secondary: #616161; --neutral-tertiary: #808080; --neutral-quaternary: #A6A6A6; --neutral-light: #D1D1D1; --neutral-lighter: #E0E0E0; --neutral-lightest: #F5F5F5; --bg: #FAF9F8; --bg-card: #FFFFFF; --divider: #EDEBE9; --border: #D1D1D1; --hover: #F0F0F0; --selected: #EBF3FC; --selected-hover: #CFE4FA; --danger: #A4262C; --warn: #F2C811; --success: #107C10; --shadow-sm: 0 0.3px 0.9px rgba(0,0,0,0.108), 0 1.6px 3.6px rgba(0,0,0,0.132); --shadow-md: 0 1.2px 3.6px rgba(0,0,0,0.108), 0 6.4px 14.4px rgba(0,0,0,0.132); --shadow-lg: 0 6.4px 14.4px rgba(0,0,0,0.13), 0 25.6px 57.6px rgba(0,0,0,0.22); --header-h: 48px; --rail-w: 56px; --folder-w: 256px; --list-w: 380px; --font: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; } /* Dark theme variables (toggle via [data-theme="dark"] on ) */ [data-theme="dark"] { --neutral-dark: #ffffff; --neutral-primary: #e0e0e0; --neutral-secondary: #a6a6a6; --neutral-tertiary: #808080; --bg: #1f1f1f; --bg-card: #2d2d2d; --divider: #3d3d3d; --border: #525252; --hover: #383838; --selected: #1a3a5c; --selected-hover: #2a4a6c; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font); font-size: 14px; background: var(--bg); color: var(--neutral-dark); -webkit-font-smoothing: antialiased; overflow: hidden; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; font-size: 14px; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ============================================================ LOGIN SCREEN ============================================================ */ .login-screen { position: fixed; inset: 0; background: linear-gradient(135deg, #f0f8ff 0%, #e6f0fa 100%); display: flex; align-items: center; justify-content: center; padding: 24px; } .login-screen::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(15,108,189,0.10) 0, transparent 40%), radial-gradient(circle at 80% 80%, rgba(15,84,140,0.08) 0, transparent 40%); pointer-events: none; } .login-card { position: relative; z-index: 1; width: 100%; max-width: 420px; background: #fff; border-radius: 8px; box-shadow: var(--shadow-lg); padding: 44px 44px 28px 44px; } .login-brand { text-align: center; margin-bottom: 24px; } .login-logo { display: block; margin: 0 auto 16px; } .login-title { font-size: 22px; font-weight: 600; color: var(--neutral-dark); } .login-subtitle { font-size: 14px; color: var(--neutral-secondary); margin-top: 4px; } .login-form { display: flex; flex-direction: column; gap: 4px; } .login-form label { font-size: 13px; font-weight: 600; color: var(--neutral-dark); margin-top: 14px; margin-bottom: 4px; } .login-form input { padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px; background: #fff; font-size: 15px; color: var(--neutral-dark); transition: border-color 80ms, box-shadow 80ms; } .login-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .login-error { margin-top: 14px; padding: 10px 12px; background: #FDE7E9; color: #A4262C; border-left: 3px solid #A4262C; border-radius: 2px; font-size: 13px; } .btn-primary { background: var(--primary); color: #fff; border: none; border-radius: 4px; padding: 10px 24px; font-weight: 600; font-size: 15px; letter-spacing: 0.2px; cursor: pointer; transition: background 80ms; } .btn-primary:hover { background: var(--primary-dark); } .btn-primary:disabled { background: var(--neutral-light); cursor: not-allowed; } .btn-secondary { background: #fff; color: var(--neutral-dark); border: 1px solid var(--border); border-radius: 4px; padding: 8px 20px; font-weight: 600; font-size: 14px; cursor: pointer; } .btn-secondary:hover { background: var(--hover); } .login-submit { margin-top: 20px; padding: 12px; position: relative; } .submit-spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; margin-left: 8px; vertical-align: middle; } .login-submit.loading .submit-text { opacity: 0.5; } .login-submit.loading .submit-spinner { display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* AI-1/AI-2: triage badges + "why this matters" reason */ .ai-cat-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; margin-left: 6px; background: #eef4ff; color: #0F548C; border: 1px solid #cfe2ff; text-transform: uppercase; letter-spacing: 0.3px; } .ai-cat-personal { background:#e8fff0;color:#107c41;border-color:#bbe5cd; } .ai-cat-work { background:#eef4ff;color:#0F548C;border-color:#cfe2ff; } .ai-cat-invoice { background:#fff8e1;color:#876300;border-color:#ffe6a3; } .ai-cat-newsletter, .ai-cat-promotion { background:#f3e7ff;color:#5c2d91;border-color:#dcc7f5; } .ai-cat-notification { background:#f0f0f0;color:#525252;border-color:#d0d0d0; } .ai-cat-receipt { background:#fff4e1;color:#8b4513;border-color:#f0d09a; } .ai-cat-security { background:#fde7e9;color:#a4262c;border-color:#f5bec4; } .ai-cat-travel { background:#dff6dd;color:#0e7a0e;border-color:#a8d8a8; } .ai-cat-social { background:#ffe5f1;color:#a4006b;border-color:#f0b8d4; } .urgency-dot { color: #d13438; font-size: 14px; margin-right: 4px; } /* SEC-2: tracker-blocked banner */ .tracker-banner { background: #f0f7ff; border: 1px solid #c4d9f1; border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; font-size: 12px; color: #0F548C; display: flex; align-items: center; gap: 6px; } .msg-ai-reason { font-size: 12px; color: var(--neutral-secondary); font-style: italic; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ RIBBON BAR — Outlook-style command tiles below header ============================================================ */ .ribbon-bar { background: var(--bg-card, #fff); border-bottom: 1px solid var(--divider); padding: 4px 8px 0; display: flex; align-items: stretch; gap: 0; overflow-x: auto; overflow-y: hidden; flex-shrink: 0; -webkit-overflow-scrolling: touch; min-height: 76px; } .ribbon-bar.empty { display: none; } .ribbon-bar::-webkit-scrollbar { height: 0; } .ribbon-group { display: flex; flex-direction: column; flex-shrink: 0; padding: 0 4px; } .ribbon-tiles { display: flex; align-items: stretch; flex: 1; } .ribbon-group-name { font-size: 10px; color: var(--neutral-secondary); text-align: center; border-top: 1px solid var(--divider); padding: 3px 4px 2px; margin-top: 2px; font-weight: 500; letter-spacing: 0.2px; } .ribbon-sep { width: 1px; background: var(--divider); margin: 4px 4px 20px; flex-shrink: 0; } .ribbon-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background: transparent; border: none; padding: 4px 8px; min-width: 56px; max-width: 92px; cursor: pointer; border-radius: 4px; gap: 4px; transition: background 0.12s; } .ribbon-tile:hover { background: var(--hover, #e1efff); } .ribbon-tile-icon { font-size: 22px; line-height: 1; height: 28px; display: flex; align-items: center; justify-content: center; } .ribbon-tile-label { font-size: 11px; font-weight: 500; color: var(--neutral-dark); text-align: center; line-height: 1.15; white-space: normal; max-width: 80px; word-wrap: break-word; } .ribbon-tile.ribbon-add .ribbon-tile-icon { color: var(--neutral-secondary); border: 1.5px dashed var(--divider); border-radius: 4px; width: 28px; height: 28px; font-size: 18px; } .ribbon-tile.ribbon-add:hover .ribbon-tile-icon { color: var(--primary); border-color: var(--primary); } .cmdk-item-row { display: flex; align-items: center; } .cmdk-item-row .cmdk-item { flex: 1; } .cmdk-pin { width: 36px; height: 36px; background: transparent; border: none; color: var(--neutral-tertiary, #a8a8a8); font-size: 16px; cursor: pointer; border-radius: 4px; } .cmdk-pin.pinned { color: #f7b300; } .cmdk-pin:hover { background: var(--hover, #e1efff); } @media (max-width: 768px) { .ribbon-bar { min-height: 64px; padding: 3px 6px 0; } .ribbon-tile { padding: 3px 6px; min-width: 50px; max-width: 70px; } .ribbon-tile-icon { font-size: 18px; height: 22px; } .ribbon-tile-label { font-size: 10px; max-width: 64px; } .ribbon-group-name { font-size: 9px; padding: 2px 4px 1px; } .ribbon-sep { margin: 3px 3px 16px; } } .login-footer { margin-top: 22px; text-align: center; font-size: 11px; color: var(--neutral-tertiary); letter-spacing: 0.4px; } /* ============================================================ APP SHELL ============================================================ */ .app-screen { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); } /* Header */ .app-header { height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); background: var(--primary); color: #fff; display: flex; align-items: center; flex-shrink: 0; z-index: 10; } .header-launcher { width: var(--rail-w); height: var(--header-h); background: transparent; border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; } .header-launcher:hover { background: var(--primary-darker); } .header-brand { display: flex; align-items: center; gap: 10px; padding-right: 24px; min-width: 280px; } .header-logo { flex-shrink: 0; } .header-title { font-size: 16px; font-weight: 600; letter-spacing: -0.1px; } .header-search { flex: 1; max-width: 720px; margin: 0 auto; background: rgba(255,255,255,0.85); border-radius: 4px; display: flex; align-items: center; padding: 0 12px; height: 32px; transition: background 80ms; } .header-search:hover { background: #fff; } .header-search:focus-within { background: #fff; box-shadow: 0 0 0 1px var(--primary-darker); } .search-icon { color: var(--primary-darker); margin-right: 10px; flex-shrink: 0; } .header-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--neutral-dark); font-size: 14px; } .header-search input::placeholder { color: var(--primary-darker); } .search-clear { background: transparent; border: none; color: var(--neutral-secondary); font-size: 14px; cursor: pointer; padding: 4px; } .header-actions { display: flex; align-items: center; gap: 4px; padding: 0 12px; } .header-btn { width: 40px; height: 40px; background: transparent; border: none; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; } .header-btn:hover { background: var(--primary-darker); } .header-user { width: 36px; height: 36px; margin-left: 8px; border-radius: 50%; background: #fff; color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; cursor: pointer; position: relative; } .header-user:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.5); } .user-menu { display: none; position: absolute; top: 44px; right: 0; background: #fff; color: var(--neutral-dark); min-width: 260px; border-radius: 6px; box-shadow: var(--shadow-md); border: 1px solid var(--divider); z-index: 100; overflow: hidden; } .user-menu.open { display: block; } .user-menu-header { display: flex; gap: 12px; align-items: center; padding: 16px; background: var(--neutral-lightest); border-bottom: 1px solid var(--divider); } .user-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; } .user-menu-name { font-weight: 600; font-size: 14px; } .user-menu-email { font-size: 12px; color: var(--neutral-secondary); } .user-menu-item { display: block; width: 100%; padding: 10px 16px; border: none; background: transparent; text-align: left; font-size: 14px; color: var(--neutral-dark); cursor: pointer; } .user-menu-item:hover { background: var(--hover); } /* ============================================================ BODY (left rail + folder + list + read) ============================================================ */ .app-body { flex: 1; display: grid; grid-template-columns: var(--rail-w) var(--folder-w) var(--list-w) 1fr; min-height: 0; } /* Left rail */ .left-rail { background: #fff; border-right: 1px solid var(--divider); display: flex; flex-direction: column; padding: 8px 0; } .rail-btn { width: var(--rail-w); height: 48px; background: transparent; border: none; color: var(--neutral-secondary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; position: relative; transition: background 80ms; } .rail-btn:hover { background: var(--hover); color: var(--primary); } .rail-btn-active { color: var(--primary); background: var(--selected); } .rail-btn-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--primary); border-radius: 0 2px 2px 0; } .rail-label { font-size: 10px; font-weight: 500; } .rail-spacer { flex: 1; } /* Folder pane */ .folder-pane { background: var(--bg); border-right: 1px solid var(--divider); display: flex; flex-direction: column; overflow-y: auto; padding: 12px 0; } .drawer-cmdk-btn { margin: 0 12px 12px 12px; background: var(--bg-card, #fff); color: var(--neutral-dark); border: 1px solid var(--divider); border-radius: 4px; padding: 10px 12px; font-weight: 500; font-size: 13px; display: flex; align-items: center; gap: 8px; cursor: pointer; width: calc(100% - 24px); text-align: left; } .drawer-cmdk-btn:hover { background: var(--hover); } .drawer-cmdk-btn span:nth-child(2) { flex: 1; } .drawer-cmdk-hint { font-size: 11px; color: var(--neutral-secondary); background: var(--neutral-lightest); border: 1px solid var(--divider); border-radius: 3px; padding: 2px 6px; } .compose-btn { margin: 0 12px 12px 12px; background: var(--primary); color: #fff; border: none; border-radius: 4px; padding: 10px 16px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; box-shadow: var(--shadow-sm); transition: background 80ms; } .compose-btn:hover { background: var(--primary-dark); } .folder-section { margin-bottom: 16px; } .folder-section-title { font-size: 11px; font-weight: 600; color: var(--neutral-secondary); padding: 4px 16px; text-transform: uppercase; letter-spacing: 0.5px; } .folder-list { list-style: none; margin: 0; padding: 0; } .folder-list li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 16px; margin: 1px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; color: var(--neutral-dark); position: relative; transition: background 60ms; } .folder-list li:hover { background: var(--hover); } .folder-list li.active { background: var(--selected); font-weight: 600; } .folder-list li.active::before { content: ""; position: absolute; left: -8px; top: 4px; bottom: 4px; width: 3px; background: var(--primary); border-radius: 0 2px 2px 0; } .folder-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--neutral-secondary); } .folder-list li.active .folder-icon { color: var(--primary); } .folder-name { flex: 1; } .folder-count { font-size: 12px; color: var(--neutral-secondary); background: transparent; padding: 0 4px; } .folder-list li.unread .folder-name { font-weight: 600; } .folder-list li.unread .folder-count { background: var(--primary); color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 600; } .folder-loading { color: var(--neutral-secondary); font-style: italic; padding: 8px 16px; } /* List pane */ .list-pane { background: #fff; border-right: 1px solid var(--divider); display: flex; flex-direction: column; min-height: 0; } .list-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--divider); flex-shrink: 0; } .list-header-title { display: flex; align-items: baseline; gap: 8px; } .list-header-title h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--neutral-dark); } .list-count { font-size: 12px; color: var(--neutral-secondary); font-weight: 400; } .icon-btn { width: 32px; height: 32px; background: transparent; border: none; color: var(--neutral-secondary); border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .icon-btn:hover { background: var(--hover); color: var(--neutral-dark); } .list-filters { display: flex; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--divider); overflow-x: auto; } .chip { background: transparent; border: 1px solid var(--border); color: var(--neutral-dark); font-size: 12px; font-weight: 500; padding: 3px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 80ms; } .chip:hover { background: var(--hover); } .chip-active { background: var(--selected); border-color: var(--primary); color: var(--primary); font-weight: 600; } .message-list { flex: 1; overflow-y: auto; overflow-x: hidden; } .message-row { display: flex; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--divider); cursor: pointer; position: relative; transition: background 60ms; } .message-row:hover { background: var(--hover); } .message-row.selected { background: var(--selected); } .message-row.selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); } .message-row.unread::after { content: ""; position: absolute; left: 4px; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); transform: translateY(-50%); } .message-row.unread { padding-left: 20px; } .msg-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 12px; letter-spacing: 0.4px; } .msg-body { flex: 1; min-width: 0; } .msg-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .msg-from { font-size: 14px; color: var(--neutral-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .message-row.unread .msg-from { font-weight: 600; color: var(--primary); } .msg-date { font-size: 12px; color: var(--neutral-secondary); white-space: nowrap; flex-shrink: 0; } .message-row.unread .msg-date { color: var(--primary); font-weight: 600; } .msg-subject { font-size: 13px; color: var(--neutral-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .message-row.unread .msg-subject { font-weight: 600; } .msg-preview { font-size: 12px; color: var(--neutral-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .msg-icons { display: flex; gap: 4px; color: var(--neutral-secondary); font-size: 13px; margin-top: 2px; } .list-skeleton { padding: 12px; } .skeleton-row { height: 56px; background: linear-gradient(90deg, var(--hover) 0%, var(--neutral-lightest) 50%, var(--hover) 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite; margin-bottom: 8px; border-radius: 4px; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Reading pane */ .read-pane { background: var(--bg); display: flex; flex-direction: column; overflow: hidden; } .read-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--neutral-secondary); } .read-empty-art { margin-bottom: 12px; color: var(--neutral-tertiary); } .read-empty-title { font-size: 18px; font-weight: 600; color: var(--neutral-dark); } .read-empty-subtitle { font-size: 14px; margin-top: 4px; } .read-message { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .read-actions { display: flex; align-items: center; gap: 4px; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--divider); flex-shrink: 0; overflow-x: auto; } .action-btn { display: flex; align-items: center; gap: 6px; background: transparent; border: 1px solid transparent; color: var(--neutral-dark); padding: 5px 10px; border-radius: 4px; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 80ms; } .action-btn:hover { background: var(--hover); } .action-primary { background: var(--primary); color: #fff; } .action-primary:hover { background: var(--primary-dark); } .action-sep { width: 1px; height: 20px; background: var(--divider); margin: 0 4px; } .read-card { flex: 1 1 0; min-height: 0; background: #fff; margin: 8px; border-radius: 6px; box-shadow: var(--shadow-sm); overflow-y: auto; overflow-x: hidden; } .read-head { padding: 24px 32px 16px 32px; border-bottom: 1px solid var(--divider); } .read-subject { margin: 0 0 16px 0; font-size: 22px; font-weight: 600; color: var(--neutral-dark); letter-spacing: -0.3px; line-height: 1.3; } .read-meta { display: flex; gap: 12px; align-items: flex-start; } .read-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .read-meta-info { flex: 1; min-width: 0; } .read-from { font-size: 14px; } .read-from strong { color: var(--neutral-dark); font-weight: 600; } .read-from-email { color: var(--neutral-secondary); margin-left: 8px; font-size: 13px; } .read-to { font-size: 13px; color: var(--neutral-secondary); margin-top: 4px; } .read-to-label { color: var(--neutral-secondary); } .read-date { font-size: 13px; color: var(--neutral-secondary); white-space: nowrap; } .read-body { padding: 24px 32px; font-size: 14px; line-height: 1.55; color: var(--neutral-dark); max-width: 980px; } .read-body * { max-width: 100%; } .read-body img { max-width: 100%; height: auto; } .read-body a { color: var(--primary); } .read-attachments { padding: 16px 32px 24px; border-top: 1px solid var(--divider); } .attachment-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; margin-right: 8px; margin-bottom: 8px; background: var(--neutral-lightest); font-size: 13px; color: var(--neutral-dark); cursor: pointer; text-decoration: none; } .attachment-item:hover { background: var(--hover); } /* ============================================================ COMPOSE DIALOG ============================================================ */ .compose-dialog { position: fixed; bottom: 24px; right: 24px; top: auto; left: auto; width: 600px; max-width: calc(100vw - 48px); height: 540px; max-height: calc(100vh - 48px); background: #fff; border: 1px solid var(--divider); border-radius: 8px; box-shadow: var(--shadow-lg); padding: 0; margin: 0; } .compose-dialog::backdrop { background: transparent; } .compose-dialog[open] { display: flex; flex-direction: column; } .compose-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--primary); color: #fff; border-radius: 8px 8px 0 0; flex-shrink: 0; } .compose-title { font-weight: 600; font-size: 14px; } .compose-header-actions { display: flex; gap: 4px; } .compose-header-actions .icon-btn { color: rgba(255,255,255,0.9); width: 28px; height: 28px; } .compose-header-actions .icon-btn:hover { background: var(--primary-darker); color: #fff; } .compose-form { flex: 1; display: flex; flex-direction: column; padding: 12px 16px; min-height: 0; } .compose-row { display: flex; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--divider); } .compose-row label { font-size: 13px; font-weight: 600; color: var(--neutral-secondary); width: 60px; flex-shrink: 0; } .compose-input { flex: 1; border: none; background: transparent; padding: 6px 4px; font-size: 14px; color: var(--neutral-dark); outline: none; } .compose-row-actions-mini { justify-content: flex-end; border-bottom: none; } .link-btn { background: transparent; border: none; color: var(--primary); font-size: 13px; cursor: pointer; padding: 4px 8px; } .link-btn:hover { text-decoration: underline; } .compose-editor-wrap { flex: 1; padding: 12px 0; display: flex; flex-direction: column; min-height: 200px; } .compose-editor { flex: 1; outline: none; font-size: 14px; line-height: 1.5; color: var(--neutral-dark); overflow-y: auto; } .compose-attachments { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; } .compose-footer { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--divider); } .compose-status { margin-left: auto; font-size: 12px; color: var(--neutral-secondary); } .compose-status.saving::after { content: " · saving"; } .compose-status.saved::after { content: " · saved"; color: var(--success); } .compose-status.error { color: var(--danger); } /* ============================================================ TOAST ============================================================ */ .toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column-reverse; gap: 8px; z-index: 1000; pointer-events: none; } .toast { pointer-events: auto; background: var(--neutral-dark); color: #fff; padding: 10px 16px; border-radius: 4px; font-size: 14px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 12px; min-width: 280px; animation: toastIn 0.2s ease; } .toast .toast-action { background: transparent; border: none; color: var(--primary-light); font-weight: 600; cursor: pointer; margin-left: auto; } .toast-success { background: var(--success); } .toast-error { background: var(--danger); } @keyframes toastIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ============================================================ SCROLLBARS (Outlook-style) ============================================================ */ ::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0; border: 4px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--neutral-tertiary); } /* ============================================================ RESPONSIVE ============================================================ */ .header-back { display: none; width: 44px; height: var(--header-h); background: transparent; border: 0; color: #fff; cursor: pointer; align-items: center; justify-content: center; } @media (max-width: 1024px) { :root { --folder-w: 200px; --list-w: 320px; } .header-brand { min-width: 200px; } .header-title { display: none; } } /* ============================================================ MOBILE — Outlook-style 3-screen flow (folders → list → read) ============================================================ */ @media (max-width: 768px) { :root { --header-h: 52px; } /* Header tweaks for mobile */ .header-brand { display: none; } .header-search { display: none; } .header-actions .header-btn[title="Settings"] { display: none; } .header-launcher { width: 48px; } .header-back[hidden] { display: none !important; } .header-launcher[hidden] { display: none !important; } .header-back { display: inline-flex; } /* Mobile header title (where breadcrumb lives) */ .header-mobile-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; } /* Body becomes single-column; one screen visible at a time. Explicit height (not flex:1) so iOS Safari computes child heights correctly and inner scroll panes (.message-list, .read-pane) get scrollable. */ .app-body { display: block !important; position: relative; height: calc(100vh - var(--header-h) - env(safe-area-inset-top, 0px)); height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px)); overflow: hidden; } .left-rail { display: none; } /* Slim permanent folder rail on left (icon-only) */ .mobile-folder-rail { position: absolute; top: 0; left: 0; bottom: 0; width: 56px; background: #fff; border-right: 1px solid var(--divider); display: flex; flex-direction: column; padding: 4px 0 env(safe-area-inset-bottom, 0px) 0; z-index: 5; overflow-y: auto; overscroll-behavior: contain; } .mfr-btn { width: 56px; height: 56px; border: none; background: transparent; color: var(--neutral-secondary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; font-size: 10px; font-weight: 600; position: relative; } .mfr-btn svg { width: 22px; height: 22px; } .mfr-btn:hover, .mfr-btn.active { color: var(--primary); background: var(--neutral-lightest); } .mfr-btn.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--primary); border-radius: 0 2px 2px 0; } .mfr-badge { position: absolute; top: 6px; right: 8px; min-width: 16px; height: 16px; background: #d13438; color: #fff; border-radius: 8px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .folder-pane, .list-pane, .read-pane { position: absolute; top: 0; right: 0; bottom: 0; left: 56px; background: var(--bg); } .app-body.mobile-on-read .read-pane, .app-body.mobile-on-read .list-pane { left: 0; } .list-pane { display: flex; flex-direction: column; } .message-list { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Default state: show LIST (inbox), folders & read hidden */ .folder-pane { display: none; } .list-pane { display: flex; } .read-pane { display: none; } /* mobile-on-folders: show folder drawer (slides from left, overlay behind) */ .app-body.mobile-on-folders .folder-pane { display: flex; z-index: 30; position: fixed; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); left: 0; bottom: 0; width: 86%; max-width: 320px; background: #fff; box-shadow: 4px 0 24px rgba(0,0,0,0.18); transform: translateX(0); animation: drawerSlideIn 0.22s ease-out; } .app-body.mobile-on-folders::before { content: ""; position: fixed; inset: 0; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); background: rgba(0,0,0,0.45); z-index: 20; animation: fadeIn 0.22s ease-out; } .app-body.mobile-on-folders .list-pane { display: flex; } .app-body.mobile-on-folders .read-pane { display: none; } @keyframes drawerSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* User menu — pin to right edge using fixed positioning on mobile */ .user-menu { position: fixed !important; right: 8px !important; left: auto !important; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 4px) !important; min-width: 0 !important; width: 260px !important; max-width: calc(100vw - 16px) !important; z-index: 200; } /* mobile-on-list: show message list */ .app-body.mobile-on-list .folder-pane { display: none; } .app-body.mobile-on-list .list-pane { display: flex; z-index: 2; } .app-body.mobile-on-list .read-pane { display: none; } /* mobile-on-read: show reading pane (when a message is open) — full-screen */ .app-body.mobile-on-read .folder-pane, .app-body.mobile-on-read .list-pane { display: none; } .app-body.mobile-on-read #mobileFolderRail { display: none; } .app-body.mobile-on-read .read-pane { display: flex; z-index: 4; left: 0; right: 0; top: 0; bottom: 0; } /* Folder pane fills width on mobile and shows compose at top */ .folder-pane { padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 16px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .folder-section-title { padding: 12px 16px 6px; } .folder-list .folder-item { padding: 14px 16px; font-size: 15px; } .compose-btn { margin: 8px 12px 12px; padding: 12px; font-size: 15px; } /* Message rows: larger touch targets */ .message-row { padding: 12px 14px; min-height: 72px; } .message-row .message-from { font-size: 15px; } .message-row .message-subject { font-size: 14px; } .message-row .message-preview { font-size: 13px; } /* List pane: pad bottom for safe area */ .message-list { padding-bottom: env(safe-area-inset-bottom, 0px); } /* Reading pane: full screen + safe-area + larger action buttons + scrollable */ .read-pane { padding-bottom: env(safe-area-inset-bottom, 0px); overflow-y: auto !important; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: block !important; } /* Disable nested overflow on read-message + read-card so the only scroller is the read-pane itself. iOS Safari can't reliably scroll nested flex containers with overflow:auto inside an absolutely-positioned parent. */ .read-message { overflow: visible !important; flex: none !important; display: block !important; height: auto !important; } .read-card { overflow: visible !important; flex: none !important; height: auto !important; } .read-body { overflow: visible !important; height: auto !important; } /* OWA-style sticky toolbar: primary actions left, ⋯ on right */ .read-actions { position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid var(--divider); flex-wrap: nowrap; overflow-x: auto; padding: 6px 8px; gap: 2px; -webkit-overflow-scrolling: touch; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .read-actions::-webkit-scrollbar { display: none; } .read-actions .action-sep { display: none; } /* Compact icon+small-label on mobile */ .action-btn { flex-shrink: 0; padding: 6px 10px; font-size: 12px; min-height: 36px; gap: 4px; } .action-btn[data-act="archive"], .action-btn[data-act="flag"], .action-btn[data-act="ai"] { font-size: 0; padding: 6px 8px; } .action-btn[data-act="archive"] svg, .action-btn[data-act="flag"] svg, .action-btn[data-act="ai"] svg { width: 16px; height: 16px; } .read-actions::-webkit-scrollbar { display: none; } .action-btn { flex-shrink: 0; padding: 8px 12px; font-size: 13px; min-height: 38px; } .read-card { padding: 16px; max-width: 100%; box-shadow: none; border-radius: 0; } .read-subject { font-size: 20px; line-height: 1.3; } .read-meta { gap: 10px; } .read-body { font-size: 15px; line-height: 1.55; } .read-body img, .read-body table { max-width: 100% !important; height: auto !important; } /* Compose: full-screen sheet */ .compose-dialog { width: 100vw; height: 100vh; max-width: none; max-height: none; bottom: 0; right: 0; left: 0; top: 0; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } .compose-header { padding: 10px 14px; } .compose-footer { flex-wrap: wrap; gap: 6px; padding: 10px 12px; } .compose-footer .btn-secondary { font-size: 12px; padding: 8px 10px; } /* View panel: full-bleed on mobile */ .view-panel { padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 24px); position: absolute; top: 0; right: 0; bottom: 0; left: 56px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; z-index: 6; background: var(--bg); } /* Toast: above safe area */ .toasts { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); } } /* iOS standalone PWA: never let content slide under the status bar */ @supports (padding: env(safe-area-inset-top)) { .app-screen { padding-top: 0; } } [hidden] { display: none !important; } /* ============================================================ VIEW PANEL (Tasks / Contacts / Rules / Vacation) ============================================================ */ .view-panel { grid-column: 2 / -1; background: var(--bg); overflow-y: auto; padding: 24px 32px; } .vp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .vp-header h1 { font-size: 24px; font-weight: 600; margin: 0; } .vp-help { color: var(--neutral-secondary); font-size: 13px; margin-bottom: 16px; } .vp-card { background: var(--bg-card); border-radius: 8px; padding: 24px; margin-bottom: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--divider); max-width: 800px; } .vp-card h2 { font-size: 18px; font-weight: 600; margin: 0 0 12px 0; } .vp-card label { display: block; font-size: 13px; font-weight: 600; color: var(--neutral-dark); margin-top: 12px; margin-bottom: 6px; } .vp-input { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); color: var(--neutral-dark); font-size: 14px; margin-bottom: 4px; } .vp-input-small { width: auto; min-width: 120px; } .vp-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .vp-textarea { min-height: 120px; font-family: inherit; resize: vertical; } .vp-actions { margin-top: 16px; display: flex; gap: 8px; } .vp-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; } .vp-toggle input { width: auto; } .vp-coming-soon { text-align: center; padding: 48px 24px; max-width: 600px; margin: 0 auto; } .cs-icon { font-size: 56px; margin-bottom: 16px; } /* Tasks */ .vp-tasks-add { display: flex; gap: 8px; align-items: center; background: var(--bg-card); border: 1px solid var(--divider); padding: 12px; border-radius: 6px; margin-bottom: 16px; box-shadow: var(--shadow-sm); } .vp-tasks-add .vp-input { margin-bottom: 0; } .task-list { list-style: none; padding: 0; margin: 0; max-width: 800px; } .task-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--divider); border-radius: 6px; margin-bottom: 6px; box-shadow: var(--shadow-sm); transition: opacity 0.15s; } .task-item.task-done { opacity: 0.6; } .task-item.task-done .task-title { text-decoration: line-through; } .task-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); } .task-body { flex: 1; } .task-title { font-weight: 600; font-size: 14px; color: var(--neutral-dark); } .task-notes { font-size: 13px; color: var(--neutral-secondary); margin-top: 4px; white-space: pre-wrap; } .task-meta { display: flex; gap: 8px; margin-top: 6px; font-size: 12px; } .task-due { color: var(--primary); } .task-pri-high { background: #FDE7E9; color: #A4262C; padding: 2px 8px; border-radius: 999px; } .task-pri-med { background: #FFF4CE; color: #876300; padding: 2px 8px; border-radius: 999px; } /* Contacts */ .vp-contact-add { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto auto; gap: 8px; align-items: center; background: var(--bg-card); border: 1px solid var(--divider); padding: 12px; border-radius: 6px; margin-bottom: 16px; box-shadow: var(--shadow-sm); } .vp-contact-add .vp-input { margin-bottom: 0; } .contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .contact-card { background: var(--bg-card); border: 1px solid var(--divider); border-radius: 8px; padding: 16px; display: flex; gap: 12px; align-items: flex-start; box-shadow: var(--shadow-sm); } .contact-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; flex-shrink: 0; } .contact-info { flex: 1; min-width: 0; } .contact-name { font-weight: 600; font-size: 14px; } .contact-email { font-size: 12px; color: var(--neutral-secondary); margin-top: 2px; word-break: break-all; } .contact-phone, .contact-company { font-size: 12px; color: var(--neutral-secondary); margin-top: 2px; } .contact-actions { display: flex; gap: 4px; flex-direction: column; } /* Rules */ .rule-list { list-style: none; padding: 0; margin: 0 0 16px 0; max-width: 900px; } .rule-item { background: var(--bg-card); border: 1px solid var(--divider); border-radius: 8px; padding: 16px; margin-bottom: 8px; display: grid; grid-template-columns: 1fr auto; gap: 8px; box-shadow: var(--shadow-sm); } .rule-name { font-weight: 600; font-size: 14px; } .rule-detail { font-size: 13px; color: var(--neutral-secondary); margin-top: 4px; grid-column: 1; } .rule-when, .rule-then { font-weight: 600; color: var(--primary); } .rule-cond, .rule-act { background: var(--hover); padding: 2px 8px; border-radius: 4px; } .rule-cond em { font-style: normal; font-weight: 600; color: var(--neutral-dark); } .rule-row-actions { display: flex; gap: 4px; align-items: flex-start; } .rule-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .rule-edit { margin-top: 24px; } .empty { color: var(--neutral-secondary); padding: 20px; text-align: center; } /* Bulk selection bar */ .bulk-bar { display: flex; gap: 8px; align-items: center; padding: 8px 14px; background: var(--selected); border-bottom: 1px solid var(--selected-hover); position: sticky; top: 0; z-index: 5; } .bulk-count { font-weight: 600; font-size: 13px; color: var(--primary); } .bulk-btn { background: transparent; border: 1px solid var(--primary); color: var(--primary); padding: 4px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; } .bulk-btn:hover { background: var(--primary); color: #fff; } .row-check { margin-top: 8px; accent-color: var(--primary); width: 16px; height: 16px; } .message-row.bulk-selected { background: var(--selected); } /* Thread count badge */ .thread-count { background: var(--primary); color: #fff; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; margin-left: 6px; } /* Cmd+K command palette */ .cmdk-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 9999; animation: cmdkFade 0.15s ease; } @keyframes cmdkFade { from { opacity: 0; } to { opacity: 1; } } .cmdk-modal { background: var(--bg-card); width: 100%; max-width: 560px; border-radius: 8px; box-shadow: var(--shadow-lg); overflow: hidden; } .cmdk-input { width: 100%; padding: 16px 20px; border: none; border-bottom: 1px solid var(--divider); background: transparent; font-size: 16px; color: var(--neutral-dark); outline: none; } .cmdk-list { max-height: 60vh; overflow-y: auto; padding: 4px; } .cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; border: none; background: transparent; text-align: left; font-size: 14px; color: var(--neutral-dark); border-radius: 4px; cursor: pointer; } .cmdk-item[data-active] { background: var(--selected); } .cmdk-item:hover { background: var(--hover); } .cmdk-icon { font-size: 18px; width: 24px; text-align: center; } /* Dark mode tweaks */ [data-theme="dark"] body { background: var(--bg); color: var(--neutral-dark); } [data-theme="dark"] .login-screen { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); } [data-theme="dark"] .login-card { background: var(--bg-card); } [data-theme="dark"] .login-form input, [data-theme="dark"] .vp-input { background: #1a1a1a; border-color: var(--border); color: #e0e0e0; } [data-theme="dark"] .header-search { background: rgba(0,0,0,0.3); } [data-theme="dark"] .header-search input { color: #fff; } [data-theme="dark"] .header-search input::placeholder { color: rgba(255,255,255,0.6); } [data-theme="dark"] .read-body { background: var(--bg-card); } /* ============================================================ CALENDAR ============================================================ */ .cal-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cal-controls .btn-secondary { padding: 6px 12px; } .cal-anchor { font-size: 16px; font-weight: 600; color: var(--neutral-dark); margin: 0 12px; min-width: 180px; } .cal-view-switch { display: inline-flex; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; margin: 0 8px; } .cal-vs { padding: 6px 14px; background: transparent; border: none; font-size: 13px; color: var(--neutral-dark); cursor: pointer; } .cal-vs.active { background: var(--primary); color: #fff; } .cal-body { margin-top: 16px; } /* Month view */ .cal-month { background: var(--bg-card); border: 1px solid var(--divider); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm); } .cal-month-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--neutral-lightest); border-bottom: 1px solid var(--divider); } .cal-month-head > div { padding: 10px 12px; font-size: 12px; font-weight: 600; color: var(--neutral-secondary); text-transform: uppercase; letter-spacing: 0.4px; text-align: center; } .cal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 100px); } .cal-day { border-right: 1px solid var(--divider); border-bottom: 1px solid var(--divider); padding: 6px 8px; cursor: pointer; overflow: hidden; transition: background 80ms; } .cal-day:hover { background: var(--hover); } .cal-day.cal-other { background: var(--neutral-lightest); } .cal-day.cal-other .cal-day-num { color: var(--neutral-tertiary); } .cal-day.cal-today .cal-day-num { background: var(--primary); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; } .cal-day-num { font-size: 13px; color: var(--neutral-dark); margin-bottom: 4px; } .cal-day-events { display: flex; flex-direction: column; gap: 2px; } .cal-event { font-size: 11px; padding: 2px 6px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .cal-event-blue { background: #DEECF9; color: #004578; border-left: 3px solid #0078D4; } .cal-event-green { background: #DFF6DD; color: #0B5D0B; border-left: 3px solid #107C10; } .cal-event-red { background: #FDE7E9; color: #8E1923; border-left: 3px solid #A4262C; } .cal-event-purple { background: #F0E7F6; color: #4B0E66; border-left: 3px solid #5C2D91; } .cal-event-orange { background: #FED9CC; color: #6F1900; border-left: 3px solid #D83B01; } .cal-event-teal { background: #CCEDF0; color: #00585E; border-left: 3px solid #038387; } .cal-more { font-size: 11px; color: var(--neutral-secondary); padding-left: 6px; } /* Day view */ .cal-day-view { background: var(--bg-card); border: 1px solid var(--divider); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm); } .cal-allday { background: var(--neutral-lightest); padding: 8px 16px; border-bottom: 1px solid var(--divider); font-size: 12px; color: var(--neutral-secondary); } .cal-allday .cal-event { display: inline-block; margin-right: 4px; } .cal-hour { display: grid; grid-template-columns: 64px 1fr; border-bottom: 1px solid var(--divider); min-height: 48px; cursor: pointer; } .cal-hour:hover { background: var(--hover); } .cal-hour-label { font-size: 11px; color: var(--neutral-secondary); padding: 4px 12px; text-align: right; border-right: 1px solid var(--divider); } .cal-hour-events { padding: 4px 8px; display: flex; flex-direction: column; gap: 2px; } .cal-hour-events .cal-event { padding: 6px 10px; font-size: 13px; } /* Agenda view */ .cal-agenda { background: var(--bg-card); border: 1px solid var(--divider); border-radius: 8px; padding: 16px; box-shadow: var(--shadow-sm); } .agenda-day { margin-bottom: 24px; } .agenda-day-head { font-size: 14px; font-weight: 600; color: var(--neutral-dark); padding-bottom: 6px; border-bottom: 2px solid var(--primary); margin-bottom: 8px; } .agenda-event { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 10px 12px; border-radius: 4px; background: var(--neutral-lightest); margin-bottom: 6px; cursor: pointer; } .agenda-event:hover { background: var(--hover); } .agenda-time { font-weight: 600; font-size: 13px; color: var(--primary); } .agenda-title { font-weight: 600; font-size: 14px; } .agenda-loc, .agenda-notes { font-size: 12px; color: var(--neutral-secondary); margin-top: 2px; } /* Calendar event dialog */ .cal-dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: cmdkFade 0.15s ease; } .cal-dialog { background: var(--bg-card); border-radius: 8px; box-shadow: var(--shadow-lg); width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column; } .cal-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--divider); } .cal-dialog-head h2 { margin: 0; font-size: 18px; font-weight: 600; } .cal-dialog-body { padding: 16px 20px; overflow-y: auto; } .cal-dialog-body label { display: block; font-size: 13px; font-weight: 600; margin-top: 12px; margin-bottom: 4px; } .cal-dialog-body label:first-child { margin-top: 0; } .cal-dialog-actions { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--divider); justify-content: flex-end; } .cal-color-pick { display: flex; gap: 8px; } .cal-color-pick button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; } .cal-color-pick button.active { border-color: var(--neutral-dark); transform: scale(1.1); } .cal-color-blue { background: #0078D4; } .cal-color-green { background: #107C10; } .cal-color-red { background: #A4262C; } .cal-color-purple { background: #5C2D91; } .cal-color-orange { background: #D83B01; } .cal-color-teal { background: #038387; } /* Snooze & more menus */ .snooze-menu, .more-menu { background: var(--bg-card); border: 1px solid var(--divider); border-radius: 6px; box-shadow: var(--shadow-md); padding: 4px; display: flex; flex-direction: column; z-index: 9999; min-width: 240px; } .snooze-menu button, .more-menu button { display: block; width: 100%; text-align: left; padding: 8px 14px; background: transparent; border: none; font-size: 13px; color: var(--neutral-dark); cursor: pointer; border-radius: 4px; } .snooze-menu button:hover, .more-menu button:hover { background: var(--hover); } /* Settings view extras */ .sig-item, .ext-item, .sched-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--divider); border-radius: 6px; margin-bottom: 8px; background: var(--bg-card); } .sig-name { font-weight: 600; font-size: 14px; } .sig-preview { font-size: 12px; color: var(--neutral-secondary); margin-top: 4px; max-height: 60px; overflow: hidden; } .badge-default { background: var(--primary); color: #fff; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; margin-left: 6px; } .ext-label { font-weight: 600; } .ext-email { font-size: 12px; color: var(--neutral-secondary); margin-top: 2px; } .ext-meta { font-size: 11px; color: var(--neutral-tertiary); margin-top: 2px; } .theme-pick { display: flex; gap: 8px; } .theme-opt { padding: 8px 16px; border: 2px solid var(--border); background: var(--bg-card); border-radius: 6px; cursor: pointer; font-size: 13px; } .theme-opt.active { border-color: var(--primary); background: var(--selected); color: var(--primary); font-weight: 600; } .theme-colors { display: flex; gap: 8px; margin-top: 8px; } .theme-color { width: 32px; height: 32px; border: 2px solid var(--border); border-radius: 50%; cursor: pointer; } .theme-color:hover { transform: scale(1.1); } /* AI features */ .action-ai { background: linear-gradient(135deg, #BA6DF1, #4B9DF5) !important; color: #fff !important; border: none !important; } .action-ai:hover { filter: brightness(1.1); } .ai-result { position: fixed; bottom: 24px; right: 24px; width: 420px; max-width: calc(100vw - 48px); max-height: 70vh; background: var(--bg-card); border: 1px solid var(--divider); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 999; display: flex; flex-direction: column; transform: translateY(20px); opacity: 0; transition: transform 0.18s ease, opacity 0.18s ease; } .ai-result.ai-visible { transform: translateY(0); opacity: 1; } .ai-result-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--divider); background: linear-gradient(135deg, rgba(186,109,241,0.08), rgba(75,157,245,0.08)); border-radius: 12px 12px 0 0; } .ai-icon { font-size: 18px; } .ai-result-head strong { flex: 1; font-size: 14px; } .ai-result-close { background: transparent; border: none; cursor: pointer; color: var(--neutral-secondary); font-size: 14px; padding: 4px 8px; border-radius: 4px; } .ai-result-close:hover { background: var(--hover); } .ai-result-body { padding: 16px; overflow-y: auto; font-size: 14px; line-height: 1.55; color: var(--neutral-dark); } .ai-suggestion { background: var(--neutral-lightest); border: 1px solid var(--divider); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; } .ai-suggestion-actions { margin-top: 8px; } .ai-suggestion-actions button { background: var(--primary); color: #fff; border: none; padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; } .ai-suggestion-actions button:hover { background: var(--primary-dark); } .ai-features { list-style: none; padding: 0; margin: 0; } .ai-features li { padding: 8px 12px; background: var(--neutral-lightest); border-radius: 6px; margin-bottom: 6px; font-size: 13px; } .ai-usage { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 8px; } .ai-stat { background: var(--neutral-lightest); border: 1px solid var(--divider); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; align-items: center; } .ai-stat .num { font-size: 24px; font-weight: 700; color: var(--primary); } .ai-stat .lbl { font-size: 11px; color: var(--neutral-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; } /* Statistics dashboard */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; } .stat-card { background: var(--bg-card); border: 1px solid var(--divider); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; align-items: center; box-shadow: var(--shadow-sm); } .stat-card .num { font-size: 24px; font-weight: 700; color: var(--primary); } .stat-card .lbl { font-size: 11px; color: var(--neutral-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; text-align: center; } .chart-bars { display: flex; align-items: flex-end; gap: 4px; height: 80px; overflow-x: auto; padding: 8px 0; } .chart-col { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 28px; flex-shrink: 0; } .bar { width: 10px; background: var(--primary); border-radius: 2px 2px 0 0; } .bar-in { background: var(--primary); } .bar-out { background: #107C10; opacity: 0.7; } .chart-label { font-size: 9px; color: var(--neutral-tertiary); margin-top: 4px; transform: rotate(-45deg); transform-origin: top right; white-space: nowrap; } .chart-legend { font-size: 12px; color: var(--neutral-secondary); margin-top: 12px; } .legend-in, .legend-out { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; } .legend-in { background: var(--primary); } .legend-out { background: #107C10; } .stats-table { width: 100%; border-collapse: collapse; } .stats-table td { padding: 8px 12px; border-bottom: 1px solid var(--divider); font-size: 13px; } .stats-table .num-cell { text-align: right; font-weight: 600; color: var(--primary); } /* Mail merge */ .merge-preview { background: var(--neutral-lightest); border: 1px solid var(--divider); border-radius: 6px; padding: 12px; margin-top: 12px; font-size: 13px; } .merge-results { background: #DFF6DD; border: 1px solid #107C10; color: #0B5D0B; padding: 12px; border-radius: 6px; margin-top: 12px; font-size: 13px; } .merge-results pre { max-height: 240px; overflow: auto; background: rgba(0,0,0,0.04); padding: 8px; border-radius: 4px; font-size: 11px; } /* Density modes (#61) */ [data-density="compact"] { --header-h: 40px; --rail-w: 48px; } [data-density="compact"] .message-row { padding: 6px 12px; } [data-density="compact"] .message-row td { padding: 4px 8px !important; } [data-density="compact"] .folder-list li { padding: 4px 12px 4px 14px !important; font-size: 13px; } [data-density="compact"] .read-head { padding: 14px 24px 10px 24px !important; } [data-density="compact"] .read-body { padding: 14px 24px !important; } [data-density="compact"] .read-subject { font-size: 18px !important; } [data-density="compact"] body { font-size: 13px; } [data-density="cozy"] body { font-size: 14px; } [data-density="cozy"] .message-row { padding: 8px 12px; } [data-density="comfortable"] { --header-h: 56px; } [data-density="comfortable"] body { font-size: 15px; } [data-density="comfortable"] .message-row { padding: 14px 16px; } [data-density="comfortable"] .folder-list li { padding: 9px 14px 9px 18px !important; font-size: 15px; } [data-density="comfortable"] .read-subject { font-size: 26px !important; } [data-density="comfortable"] .read-head { padding: 32px 36px 22px 36px !important; } [data-density="comfortable"] .read-body { padding: 28px 36px !important; line-height: 1.65; } /* RTL layout (#66) — auto when document dir="rtl" */ [dir="rtl"] .app-body { direction: rtl; } [dir="rtl"] .left-rail { border-right: none; border-left: 1px solid var(--divider); } [dir="rtl"] .rail-btn-active::before { left: auto; right: 0; border-radius: 2px 0 0 2px; } [dir="rtl"] .folder-pane { border-right: none; border-left: 1px solid var(--divider); } [dir="rtl"] .folder-list li.active::before { left: auto; right: -8px; border-radius: 2px 0 0 2px; } [dir="rtl"] .list-pane { border-right: none; border-left: 1px solid var(--divider); } [dir="rtl"] .message-row.selected::before { left: auto; right: 0; } [dir="rtl"] .message-row.unread::after { left: auto; right: 4px; } [dir="rtl"] .message-row.unread { padding-left: 12px; padding-right: 20px; } [dir="rtl"] .compose-dialog { right: auto; left: 24px; } /* Category badges */ .cat-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 3px; margin-left: 6px; text-transform: uppercase; letter-spacing: 0.4px; } /* Compose toggle buttons (markdown, voice, self-destruct, encrypt) */ .md-active { background: linear-gradient(135deg, #4B9DF5, #2B88D8) !important; color: #fff !important; border: none !important; } .voice-active { background: linear-gradient(135deg, #E81123, #A4262C) !important; color: #fff !important; border: none !important; animation: pulseRec 1s infinite; } .sd-active { background: linear-gradient(135deg, #D83B01, #A4262C) !important; color: #fff !important; border: none !important; } @keyframes pulseRec { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* Unsubscribe banner */ .unsub-banner { background: #FFF4CE; color: #876300; border: 1px solid #F4D35E; padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; font-size: 13px; } .unsub-banner button { padding: 4px 12px; font-size: 12px; } /* Attachment preview overlay */ .att-preview-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; } .att-preview-modal { background: var(--bg-card); width: 90%; max-width: 1000px; max-height: 90vh; overflow: auto; border-radius: 8px; padding: 16px; box-shadow: var(--shadow-lg); } .att-preview-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--divider); } .att-preview-head .ai-result-close { margin-left: auto; } /* PGP */ .pgp-active { background: linear-gradient(135deg, #5C2D91, #881798) !important; color: #fff !important; border: none !important; } .pgp-banner { background: #F0E7F6; border: 1px solid #5C2D91; color: #4B0E66; padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; } .pgp-banner .btn-secondary { padding: 4px 12px; font-size: 12px; } .pgp-success { background: #DFF6DD; border-color: #107C10; color: #0B5D0B; } /* Out-of-office banner */ .oof-banner { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #FFF4CE; border-bottom: 1px solid #F4D35E; color: #876300; font-size: 13px; font-weight: 500; } .oof-icon { font-size: 18px; } .oof-text { flex: 1; } .oof-btn { background: #876300; color: #fff; border: none; padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; } .oof-btn:hover { background: #6b4d00; } .oof-close { background: transparent; border: none; color: #876300; font-size: 14px; cursor: pointer; padding: 2px 6px; border-radius: 4px; } .oof-close:hover { background: rgba(135,99,0,0.15); } /* Drag & drop visual cues */ .message-row.dragging { opacity: 0.4; } .folder-list li.drop-target, .folder-section li.drop-target { background: var(--selected) !important; outline: 2px dashed var(--primary); outline-offset: -2px; } /* Context menu (right-click) */ .context-menu, .move-picker { min-width: 220px; z-index: 10000; } .move-picker button { display: flex !important; align-items: center; gap: 8px; } .move-picker button svg { flex-shrink: 0; } /* Templates view */ .tpl-list { display: flex; flex-direction: column; gap: 6px; } .tpl-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px; background: var(--neutral-lightest); border: 1px solid var(--divider); border-radius: 6px; } .tpl-name { font-weight: 600; font-size: 14px; } .tpl-name code { background: var(--primary); color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 12px; margin-right: 6px; } .tpl-subject { font-size: 12px; color: var(--neutral-secondary); margin-top: 4px; font-style: italic; } .tpl-body-preview { font-size: 12px; color: var(--neutral-secondary); margin-top: 6px; line-height: 1.4; } /* Print mode for read pane */ @media print { .app-header, .left-rail, .folder-pane, .list-pane, .read-actions, #toasts, .header-launcher, .header-brand, .header-search, .header-actions, .pgp-banner, .unsub-banner, .oof-banner { display: none !important; } .app-body { display: block !important; padding: 0 !important; } .read-pane, .read-card, .read-body { background: #fff !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } .read-head { padding: 0 0 16px 0 !important; border-bottom: 2px solid #333 !important; margin-bottom: 16px !important; } .read-body { padding: 0 !important; max-width: none !important; font-size: 12pt; line-height: 1.5; color: #000 !important; } .read-subject { font-size: 18pt !important; color: #000 !important; } .read-avatar { display: none !important; } body, .app-screen { background: #fff !important; } a { color: #000 !important; text-decoration: underline; } a::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555; } img { max-width: 100% !important; page-break-inside: avoid; } } /* Tour overlay (#64) */ .tour-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.6); pointer-events: auto; } .tour-spotlight { position: absolute; border: 3px solid var(--primary); border-radius: 8px; box-shadow: 0 0 0 9999px rgba(0,0,0,0.6); pointer-events: none; transition: all 0.3s ease; } .tour-card { position: absolute; background: var(--bg-card); border-radius: 10px; padding: 18px 20px; width: 320px; box-shadow: var(--shadow-lg); } .tour-card h3 { margin: 6px 0 10px 0; font-size: 16px; color: var(--neutral-dark); } .tour-card p { font-size: 13px; color: var(--neutral-secondary); margin: 0 0 14px 0; line-height: 1.5; } .tour-card .tour-step { font-size: 11px; color: var(--primary); font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; } .tour-actions { display: flex; gap: 8px; justify-content: flex-end; } /* Hidden screens */ .screen { display: block; } .screen[hidden] { display: none; }