/* TechTools Mail — dark theme, mobile-first */ :root { --primary-bg: #0a0a0f; --secondary-bg: #141419; --card-bg: #1a1a24; --hover-bg: #20202c; --border-color: rgba(255, 255, 255, 0.1); --accent-primary: #6366f1; --accent-secondary: #8b5cf6; --accent-gradient: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.7); --text-muted: rgba(255, 255, 255, 0.45); --success: #22c55e; --warning: #f59e0b; --error: #ef4444; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 1rem; --transition: 0.15s ease; /* Company-navbar height. This is only the initial estimate so the first paint reserves about the right space; script.js (publishNavHeight) measures #ttnav and overwrites this with the exact px on at load and on every reflow. Seeded here (styles.css loads AFTER shared-topnav.css) so it beats that file's :root{--tt-topnav-h:0px} fallback. See .claude/rules/company-navbar.md. */ --tt-topnav-h: 64px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--primary-bg); color: var(--text-primary); line-height: 1.5; -webkit-font-smoothing: antialiased; } .hidden { display: none !important; } /* ---------- Buttons / fields ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1rem; border: none; border-radius: var(--radius-md); font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: var(--transition); min-height: 44px; } .btn-primary { background: var(--accent-gradient); color: #fff; } .btn-primary:hover { opacity: 0.92; } .btn-secondary { background: var(--card-bg); color: var(--text-secondary); border: 1px solid var(--border-color); } .btn-secondary:hover { background: var(--hover-bg); color: var(--text-primary); } .btn-block { width: 100%; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; background: transparent; color: var(--text-secondary); border-radius: var(--radius-md); cursor: pointer; font-size: 1rem; transition: var(--transition); flex: none; } .icon-btn:hover { background: var(--hover-bg); color: var(--text-primary); } .field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: var(--text-secondary); } .field.row { flex-direction: row; align-items: center; gap: 0.75rem; } .field.row input { flex: 1; } input, textarea { width: 100%; padding: 0.7rem 0.85rem; background: var(--secondary-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); font: inherit; font-size: 0.92rem; transition: var(--transition); } input:focus, textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); } textarea { resize: vertical; min-height: 160px; } .error { color: var(--error); font-size: 0.85rem; min-height: 1rem; } .hint { font-size: 0.85rem; color: var(--text-muted); } /* ---------- Login ---------- */ /* Heights subtract the sticky company navbar (#ttnav). --tt-topnav-h is seeded in :root above and kept exact by script.js (publishNavHeight) so Mail fits flush below the bar with no page overflow. Fallback 64px ≈ navbar if the var is unset. */ .login-view { min-height: calc(100vh - var(--tt-topnav-h, 64px)); display: flex; align-items: center; justify-content: center; padding: 1.25rem; } .login-card { width: 100%; max-width: 380px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 2rem; display: flex; flex-direction: column; gap: 1rem; } .brand { font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; } .brand i { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .brand span { color: var(--text-secondary); font-weight: 500; } .login-sub { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.25rem; } .login-card form { display: flex; flex-direction: column; gap: 0.9rem; } .muted-link { color: var(--text-muted); font-size: 0.85rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; } .muted-link:hover { color: var(--text-secondary); } /* Auth switch (Sign in ⇄ Create mailbox): a labelled divider + a full-width secondary button — a real CTA on-theme with .btn-secondary, not a bare underlined inline link. */ .auth-switch { display: flex; flex-direction: column; gap: 0.75rem; } .auth-divider { display: flex; align-items: center; gap: 0.75rem; color: var(--text-muted); font-size: 0.8rem; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-color); } .field .opt { color: var(--text-muted); font-weight: 400; } .addr-group { display: flex; align-items: stretch; } .addr-group input { border-top-right-radius: 0; border-bottom-right-radius: 0; min-width: 0; } .addr-suffix { display: flex; align-items: center; padding: 0 0.7rem; white-space: nowrap; background: var(--secondary-bg); border: 1px solid var(--border-color); border-left: none; border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); color: var(--text-muted); font-size: 0.85rem; } .reg-note { font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.45rem; } /* honeypot — visually hidden, still in the DOM for bots to fill */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ---------- App shell ---------- */ .app { height: calc(100vh - var(--tt-topnav-h, 64px)); display: flex; flex-direction: column; } /* Mail has NO second header bar: script.js (mountMailIntoNavbar) lifts the folder toggle and mailbox switcher into the ONE company navbar (#ttnav). #mailControls is only the transient holder before that runs — and a graceful fallback toolbar if script.js ever fails to mount them. (Compose is the sidebar "New Email" btn.) */ .mail-controls { flex: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; background: var(--secondary-bg); border-bottom: 1px solid var(--border-color); } .mail-controls .compose-btn { margin-left: auto; } /* ----- Mail's controls as hosted inside the shared navbar (#ttnav = .tt-scope) ----- The switcher button, avatar, dropdown and menu items reuse the navbar's own .tt-scope styles, so they look native there; we only add what's Mail-specific. */ /* Mail is a full-bleed app (edge-to-edge panes), so its header must span the full width too — drop the navbar's 1400px content cap so the brand aligns with the folder rail and the actions align with the reading pane's right edge. The #ttnav id beats the shared `.tt-scope .topnav-inner` rule, and only on Mail's page. */ #ttnav .topnav-inner { max-width: none; } /* "TechTools · Mail" product lockup, right after the brand wordmark. */ #ttnav .ttmail-tag { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-weight: 600; font-size: 0.95rem; white-space: nowrap; } #ttnav .ttmail-tag-sep { width: 1px; height: 20px; background: var(--border); flex: none; } #ttnav .ttmail-tag i { color: var(--accent-secondary); font-size: 0.9rem; } /* Right-hand action cluster: Compose + mailbox switcher, pushed to the navbar end. */ #ttnav .mail-nav-actions { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; } /* The relocated switcher anchors its own dropdown; keep the menu within the viewport. */ #ttnav .topnav-user { position: relative; } #ttnav .topnav-user-menu { max-width: calc(100vw - 16px); } /* Mailbox switcher rows inside the account menu */ .account-list { display: flex; flex-direction: column; gap: 0.1rem; } .account-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; padding: 0.55rem 0.75rem; min-height: 44px; background: transparent; border: none; color: var(--text-secondary); border-radius: 8px; cursor: pointer; font: inherit; font-size: 0.88rem; } .account-item:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); } .account-item.active { color: var(--text-primary); } .account-item .f-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-item.active .check { color: var(--success); margin-left: auto; } .account-item .sign-out-one { margin-left: auto; color: var(--text-muted); } .account-item .sign-out-one:hover { color: var(--error); } /* ---------- Layout (3 panes) ---------- */ .layout { flex: 1; display: flex; min-height: 0; } .sidebar { width: 240px; flex: none; background: var(--secondary-bg); border-right: 1px solid var(--border-color); overflow-y: auto; padding: 0.6rem; } .list-pane { width: 380px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--border-color); min-height: 0; } .read-pane { flex: 1; min-width: 0; overflow-y: auto; } /* "New Email" compose button — pinned at the top of the folder rail (above Inbox), the conventional webmail Compose location. Full-width gradient primary button. */ .sidebar .compose-btn { width: 100%; margin-bottom: 0.6rem; } /* Folders */ .folder-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.7rem; min-height: 44px; border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; transition: var(--transition); border: none; background: transparent; width: 100%; font: inherit; text-align: left; } .folder-item:hover { background: var(--hover-bg); color: var(--text-primary); } .folder-item.active { background: var(--accent-gradient); color: #fff; } .folder-item .f-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; } .folder-item .f-count { font-size: 0.75rem; background: rgba(255,255,255,0.12); padding: 0.1rem 0.45rem; border-radius: 999px; } .folder-item.active .f-count { background: rgba(255,255,255,0.25); } /* List header */ .list-header { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border-color); flex: none; } .list-header h2 { flex: 1; font-size: 1.05rem; font-weight: 600; text-transform: capitalize; } /* Message list */ .message-list { flex: 1; overflow-y: auto; } .msg-item { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: var(--transition); } .msg-item:hover { background: var(--hover-bg); } .msg-item.active { background: var(--hover-bg); box-shadow: inset 3px 0 0 var(--accent-primary); } .msg-item.unseen .msg-from, .msg-item.unseen .msg-subject { font-weight: 700; color: var(--text-primary); } .msg-row { display: flex; align-items: baseline; gap: 0.5rem; } .msg-from { flex: 1; font-size: 0.9rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-date { font-size: 0.75rem; color: var(--text-muted); flex: none; } .msg-subject { font-size: 0.88rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-item .fa-flag { color: var(--warning); font-size: 0.7rem; } .msg-item .fa-paperclip { color: var(--text-muted); font-size: 0.72rem; } .empty-state, .read-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; color: var(--text-muted); height: 100%; padding: 2rem; text-align: center; } .empty-state i, .read-empty i { font-size: 2.5rem; opacity: 0.5; } .pager { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.6rem; border-top: 1px solid var(--border-color); flex: none; font-size: 0.85rem; color: var(--text-secondary); } .pager button { background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-secondary); } .pager button:disabled { opacity: 0.4; } /* ---------- Reading pane ---------- */ .read-content { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; max-width: 900px; } .read-subject { font-size: 1.3rem; font-weight: 700; word-break: break-word; } .read-meta { display: flex; flex-direction: column; gap: 0.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); font-size: 0.86rem; color: var(--text-secondary); } .read-meta .addr-name { color: var(--text-primary); font-weight: 600; } .read-meta .read-date { color: var(--text-muted); } .read-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .read-actions .btn { padding: 0.5rem 0.85rem; } .mail-iframe { width: 100%; border: none; background: #fff; border-radius: var(--radius-md); min-height: 200px; } .mail-text { white-space: pre-wrap; word-break: break-word; font-size: 0.95rem; color: var(--text-primary); } .remote-banner { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.6rem 0.8rem; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.4); border-radius: var(--radius-md); font-size: 0.85rem; color: var(--warning); } .remote-banner button { margin-left: auto; } .attachments { display: flex; flex-direction: column; gap: 0.4rem; } .attachments h4 { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .attachment { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none; font-size: 0.85rem; } .attachment:hover { background: var(--hover-bg); color: var(--text-primary); } .attachment .a-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attachment .a-size { color: var(--text-muted); font-size: 0.78rem; } /* ---------- Modals ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 100; } .modal { width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; background: var(--card-bg); } .modal-head h3 { font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; } .compose-form { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.8rem; } .modal-actions { display: flex; gap: 0.6rem; margin-top: 0.25rem; } /* ---------- Toasts ---------- */ .toast-wrap { position: fixed; bottom: 1rem; right: 1rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 200; } .toast { padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 0.88rem; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.4); display: flex; align-items: center; gap: 0.5rem; animation: slideIn 0.2s ease; } .toast.success { background: #16a34a; } .toast.error { background: #dc2626; } .toast.info { background: #4f46e5; } @keyframes slideIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .spin { animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Mobile (single pane, navigable) ---------- */ @media (max-width: 1023px) { .layout { display: block; position: relative; } .sidebar, .list-pane, .read-pane { display: none; width: 100%; height: 100%; } .layout[data-view="folders"] .sidebar { display: block; } .layout[data-view="list"] .list-pane { display: flex; } .layout[data-view="read"] .read-pane { display: block; } .sidebar { border-right: none; } } @media (min-width: 1024px) { /* The folder toggle is only for the mobile single-pane view. */ .menu-toggle, .back-to-folders { display: none; } } @media (max-width: 600px) { .read-content { padding: 1rem; } .field.row { flex-direction: column; align-items: stretch; gap: 0.35rem; } /* On phones the shared navbar collapses its brand to the icon; drop the lockup separator + envelope so the header reads "[TT] Mail … [✎] [▾]" without crowding. (The switcher's name/menu sizing is handled by the shared .tt-scope navbar CSS.) */ #ttnav .ttmail-tag-sep, #ttnav .ttmail-tag i { display: none; } }