/* NexaMails Brand palette (matches dashboard): gold #B28E44 cream #F7F3E9 navy #282F39 Nexa logo treatments (mirrors dashboard ka-fab + .k-logo patterns): - .k-logo — 14x14 black chip, inline action buttons - .k-logo-sm — 12x12 black chip, suggestion chips - .k-logo-inline — 14x14 black chip, baseline-aligned for inline text - .nexa-btn .k-logo (large variant) — 18x18 for hero CTAs - .nexa-fab — 56x56 corner FAB with breathing animation - .nexa-mini-logo — 28x28 in the Nexa panel header - .brand-mark — 32x32 in the left rail See brand_delta_logo.md in user memory — MANDATORY on every Nexa button. */ :root { /* NexaMails brand palette — see brand_transform_iran.md */ --gold: #B28E44; /* wordmark + decorative stripes */ --gold-dark: #8E6F35; --red: #E92A2E; /* primary emphasis + CTAs (Impact Report pill, Mission box) */ --red-dark: #C81F23; --cream: #F7F3E9; --cream-dark: #EDE6D2; --navy: #282F39; /* body text + section tabs */ --navy-soft: #4A5260; --paper: #FFFFFF; --line: #E2DBC8; --muted: #8A8576; --good: #4F9D5A; --bad: #C44545; --radius: 8px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(40, 47, 57, .06); --shadow-md: 0 6px 18px rgba(40, 47, 57, .08); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* ── Appearance pref tokens — overridden via data-attributes on . ── */ --accent: var(--gold); /* default accent (Sunset). Body[data-accent="…"] overrides. */ --accent-dark: var(--gold-dark); --row-height: 56px; /* comfortable density default. */ --row-padding-y: 10px; --body-font-size: 14px; /* default body font. */ --reader-font-size: 15px; /* used in message reading pane. */ } /* ─────────── Accent palettes (5 curated; chosen on Settings → Appearance) ─────────── */ /* Sunset is the brand default — matches our gold so existing UI keeps its identity. The other four palettes are genuine alternatives. */ body[data-accent="sunset"] { --accent: #B28E44; --accent-dark: #8E6F35; --gold: #B28E44; --gold-dark: #8E6F35; } body[data-accent="glacier"] { --accent: #2E91D1; --accent-dark: #1F70A4; --gold: #2E91D1; --gold-dark: #1F70A4; } body[data-accent="forest"] { --accent: #4F9D5A; --accent-dark: #357B40; --gold: #4F9D5A; --gold-dark: #357B40; } body[data-accent="amethyst"] { --accent: #9B5BC4; --accent-dark: #743EA3; --gold: #9B5BC4; --gold-dark: #743EA3; } body[data-accent="berry"] { --accent: #D5396F; --accent-dark: #A22250; --gold: #D5396F; --gold-dark: #A22250; } /* ─────────── Density ─────────── */ body[data-density="compact"] { --row-height: 42px; --row-padding-y: 6px; } /* ─────────── Body font scale ─────────── */ body[data-body-font-size="small"] { --body-font-size: 12.5px; --reader-font-size: 13.5px; } body[data-body-font-size="default"] { --body-font-size: 14px; --reader-font-size: 15px; } body[data-body-font-size="large"] { --body-font-size: 15.5px; --reader-font-size: 17px; } body[data-body-font-size="xl"] { --body-font-size: 17px; --reader-font-size: 19px; } /* ─────────── Dark theme ─────────── */ body[data-theme="dark"] { --cream: #14171c; /* page background */ --cream-dark: #1c2026; --paper: #1e232b; /* cards / message rows */ --navy: #e8e9ec; /* primary text */ --navy-soft: #b7bcc6; --muted: #7f8590; --line: #2a2f38; --good: #6cbe78; --bad: #e36868; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 6px 18px rgba(0, 0, 0, .35); } /* "System" honours OS preference via prefers-color-scheme */ @media (prefers-color-scheme: dark) { body[data-theme="system"] { --cream: #14171c; --cream-dark: #1c2026; --paper: #1e232b; --navy: #e8e9ec; --navy-soft: #b7bcc6; --muted: #7f8590; --line: #2a2f38; --good: #6cbe78; --bad: #e36868; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 6px 18px rgba(0, 0, 0, .35); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; /* The page itself never scrolls — only the email list and the reading pane scroll independently inside their columns. */ overflow: hidden; font-family: var(--font); font-size: 14px; color: var(--navy); background: var(--cream); } /* Backfill banner — sits above the .app grid when historical indexing is running. Slim, gold-themed, dismissible once done. */ .backfill-banner { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: linear-gradient(90deg, rgba(178, 142, 68, .08), rgba(178, 142, 68, .04)); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--navy); flex-shrink: 0; position: relative; } /* The `hidden` HTML attribute relies on the UA default `display: none`. `display: flex` above wins, leaving Microsoft users (whose backfill status is permanently "none") staring at the static placeholder. This rule restores the expected hide behaviour. */ .backfill-banner[hidden] { display: none !important; } .backfill-banner.complete { background: linear-gradient(90deg, rgba(79, 157, 90, .08), rgba(79, 157, 90, .03)); } .bfb-spinner { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.9s linear infinite; flex-shrink: 0; } .backfill-banner.complete .bfb-spinner { border: 2px solid var(--good); border-top-color: var(--good); animation: none; position: relative; } .backfill-banner.complete .bfb-spinner::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--good); font-size: 10px; font-weight: 800; } .bfb-body { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; } .bfb-title { font-weight: 600; } .bfb-meta { color: var(--muted); font-size: 11.5px; } .bfb-bar { flex: 1; height: 4px; background: var(--cream-dark); border-radius: 2px; overflow: hidden; margin: 0 6px; } .bfb-bar-fill { height: 100%; background: var(--gold); width: 0%; transition: width .5s ease; } .backfill-banner.complete .bfb-bar-fill { background: var(--good); } .bfb-dismiss { background: transparent; border: none; color: var(--muted); font-size: 18px; line-height: 1; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; } .bfb-dismiss:hover { background: var(--cream-dark); color: var(--navy); } /* App grid uses available height under the banner */ body { display: flex; flex-direction: column; } .app { flex: 1; min-height: 0; } button { font-family: inherit; cursor: pointer; } /* ============================================================ APP SHELL — three-pane Outlook layout ============================================================ */ .app { display: grid; grid-template-columns: 240px 360px 1fr 320px; height: 100vh; overflow: hidden; /* container never scrolls — children manage their own */ background: var(--paper); } .app.right-panel-hidden { grid-template-columns: 240px 360px 1fr 0; } .app.right-panel-hidden .right-panel { display: none; } /* LEFT RAIL — frozen WHEN content fits, scrolls only if labels grow. overflow-y:auto = no scrollbar when content is short (looks frozen), scrollbar appears automatically when label list exceeds viewport. */ .rail { background: var(--cream); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 10px; min-height: 0; /* allows the grid cell to constrain it */ overflow-y: auto; /* frozen until folder list grows past viewport */ overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Hide scrollbar visually when not actually scrolling — keeps the "frozen" look until growth actually requires interaction. */ .rail::-webkit-scrollbar { width: 0; } .rail:hover::-webkit-scrollbar { width: 6px; } .rail::-webkit-scrollbar-thumb { background: rgba(40,47,57,.18); border-radius: 3px; } .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; border-bottom: 1px solid var(--line); margin-bottom: 12px; } .brand-mark { width: 32px; height: 32px; background: #000; border-radius: 7px; padding: 3px; object-fit: contain; display: block; box-sizing: border-box; flex-shrink: 0; } .brand-text { font-weight: 700; letter-spacing: .2px; color: var(--navy); } .compose-btn { width: 100%; background: var(--red); color: white; border: none; border-radius: 999px; /* pill shape matches the brand's URL pills */ padding: 11px 12px; font-weight: 600; letter-spacing: .2px; margin-bottom: 16px; box-shadow: 0 4px 10px rgba(233, 42, 46, .18); transition: background .15s; } .compose-btn:hover:not(:disabled) { background: var(--red-dark); } .compose-btn:disabled { opacity: .55; cursor: not-allowed; } .folders { display: flex; flex-direction: column; gap: 14px; } .folders-group { display: flex; flex-direction: column; } .folders-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 0 8px; } .folder { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius); text-decoration: none; color: var(--navy); font-weight: 500; } .folder-i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--navy-soft); flex-shrink: 0; } .folder-i svg { width: 16px; height: 16px; fill: currentColor; } .folder.active .folder-i { color: var(--gold-dark); } .folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .folder:hover { background: var(--cream-dark); } .folder.active { background: var(--cream-dark); color: var(--gold-dark); font-weight: 600; } .folder.muted { color: var(--navy-soft); font-weight: 500; } /* User-folder tree (Outlook nested folders). Caret rotates 90deg on expand. Children indent by 14px per level, capped via nested .folder-children selectors. Hidden state honored via the explicit [hidden] attribute (also defensively here). */ .folder-tree-node { display: block; } .folder-tree-node .folder { cursor: pointer; } .folder-caret-btn { background: none; border: none; padding: 0; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--navy-soft); flex-shrink: 0; transition: transform 0.12s ease; } .folder-caret-btn:hover { color: var(--gold-dark); } .folder-caret-btn.expanded { transform: rotate(90deg); } .folder-caret-btn svg { fill: currentColor; } .folder-caret-spacer { display: inline-block; width: 14px; height: 14px; flex-shrink: 0; } .folder-children { padding-left: 14px; } .folder-children[hidden] { display: none !important; } /* Important folders — per-user dynamic list (loaded from /api/important-contacts). Each contact gets a colored dot for quick recognition. Spans Inbox + Archive + Sent so the user can see the full conversation history with that person. */ .folder.important, .folder.vip /* legacy class still applied by older builds */ { display: flex; align-items: center; gap: 8px; color: var(--navy); position: relative; } .folder.important .vip-dot, .folder.vip .vip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .folder.important:hover, .folder.vip:hover { background: var(--cream-dark); } .folder.important.active, .folder.vip.active { background: var(--cream-dark); color: var(--navy); font-weight: 600; } /* Inline X on each Important folder row — appears on hover. Doesn't navigate; calls DELETE /api/important-contacts/:id. */ .folder.important .important-remove { margin-left: auto; background: transparent; border: none; color: var(--muted); font-size: 14px; line-height: 1; width: 18px; height: 18px; border-radius: 4px; cursor: pointer; opacity: 0; transition: opacity .12s, color .12s, background .12s; flex-shrink: 0; } .folder.important:hover .important-remove { opacity: 1; } .folder.important .important-remove:hover { color: var(--bad); background: rgba(196, 69, 69, .12); } /* The "Important" section label gets a flex layout so the + button sits inline with the text. */ .folders-group-label.important-label { display: flex; align-items: center; justify-content: space-between; } .important-add { background: transparent; border: 1px solid var(--line); color: var(--gold-dark); width: 18px; height: 18px; border-radius: 4px; font-size: 14px; line-height: 1; cursor: pointer; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .12s, border-color .12s; } .important-add:hover { background: var(--cream); border-color: var(--gold); } .important-empty { padding: 6px 10px; font-size: 11px; color: var(--muted); font-style: italic; } /* "+ Important" chip / "Important" badge next to the From sender in the reader. The button promotes the sender into the user's Important list with one click. */ .rh-add-important, .rh-is-important { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 2px 8px; font-size: 10.5px; font-weight: 600; border-radius: 999px; vertical-align: 2px; } .rh-add-important { background: var(--cream); border: 1px solid var(--line); color: var(--gold-dark); cursor: pointer; font-family: inherit; transition: background .12s, border-color .12s, color .12s; } .rh-add-important:hover:not(:disabled) { background: var(--paper); border-color: var(--gold); } .rh-add-important:disabled { opacity: .5; cursor: not-allowed; } .rh-add-important svg, .rh-is-important svg { width: 11px; height: 11px; fill: currentColor; } .rh-is-important { background: rgba(178, 142, 68, .12); color: var(--gold-dark); border: 1px solid transparent; } .folder.folder-tool { display: flex; align-items: center; gap: 8px; } .folder.folder-tool .ftool-i { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--navy-soft); flex-shrink: 0; } .folder.folder-tool:hover .ftool-i { color: var(--navy); } .folder.folder-tool .ftool-i svg { width: 16px; height: 16px; fill: currentColor; display: block; } .folder-count { color: var(--muted); font-size: 12px; } .folder.active .folder-count { color: var(--gold-dark); font-weight: 700; } .folder-count:empty { display: none; } /* Unread badge — red pill ALWAYS gets white text, regardless of folder state. Higher specificity (.folder.active selector + .has-unread) ensures we beat the active-folder color rule above. */ .folder-count.has-unread, .folder.active .folder-count.has-unread { background: var(--red); color: white; padding: 1px 7px; border-radius: 999px; font-weight: 700; font-size: 11px; } /* Load more button at the bottom of the message list */ .load-more-row { padding: 12px 16px; border-top: 1px solid var(--line); background: var(--paper); display: flex; justify-content: center; } .load-more-btn { background: transparent; border: 1px solid var(--line); color: var(--navy); padding: 7px 18px; border-radius: 999px; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color .12s, background .12s, color .12s; } .load-more-btn:hover { border-color: var(--red); color: var(--red-dark); } .load-more-btn:disabled { opacity: .55; cursor: wait; } .rail-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); } .user-chip { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); } .user-initial { width: 28px; height: 28px; background: var(--gold); color: white; border-radius: 50%; display: grid; place-items: center; font-weight: 700; } .user-name { color: var(--navy-soft); font-size: 13px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logout-link { color: var(--muted); text-decoration: none; font-size: 16px; padding: 0 6px; border-radius: 4px; } .logout-link:hover { background: var(--cream-dark); color: var(--navy); } /* MIDDLE — email list. Header is sticky-style (flex-shrink: 0), the .mail-list inner area scrolls. */ .list { border-right: 1px solid var(--line); display: flex; flex-direction: column; background: var(--paper); min-height: 0; /* allows children to constrain to grid cell */ overflow: hidden; /* contains the inner scroll */ } .list-header { padding: 16px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; /* header never collapses */ background: var(--paper); position: relative; /* anchor point for .notif-dropdown */ } .list-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 4px; position: relative; } .list-title-row .list-title { flex: 1; } .notif-bell { position: relative; } .notif-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: white; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--paper); pointer-events: none; } /* Notification dropdown — Phase 5.BB. * NOTE: `display: flex` overrides the HTML5 `[hidden]` rule's * `display: none`, so we have to explicitly re-hide it. Without * this the dropdown renders into the layout flow (off-screen but * eating height) and pushes the rest of the page up. (Phase 5.BE fix) */ .notif-dropdown[hidden] { display: none !important; } .notif-dropdown { position: absolute; top: 100%; right: 0; margin-top: 6px; width: 380px; max-height: 520px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(40,47,57,0.18); z-index: 1000; display: flex; flex-direction: column; overflow: hidden; } .notif-dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--cream); border-bottom: 1px solid var(--line); } .notif-dropdown-title { font-weight: 700; font-size: 14px; color: var(--navy); } .notif-clear-all { background: none; border: none; color: var(--gold-dark); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 4px; } .notif-clear-all:hover { background: rgba(178,142,68,.12); } .notif-dropdown-body { flex: 1; overflow-y: auto; padding: 4px 0; } .notif-empty { padding: 32px 16px; text-align: center; font-size: 13px; color: var(--muted); } .notif-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(232, 223, 208, .5); cursor: pointer; transition: background .12s ease; align-items: start; } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--cream); } .notif-item.severity-high { border-left: 3px solid var(--red); padding-left: 11px; } .notif-item.severity-medium { border-left: 3px solid var(--gold); padding-left: 11px; } .notif-icon { width: 26px; height: 26px; border-radius: 50%; background: rgba(178,142,68,.14); color: var(--gold-dark); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .notif-icon svg { width: 14px; height: 14px; fill: currentColor; } .notif-item.severity-high .notif-icon { background: rgba(233,42,46,.14); color: var(--red); } .notif-body { min-width: 0; } .notif-title { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notif-snippet { font-size: 12px; color: var(--navy-soft); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .notif-meta { font-size: 11px; color: var(--muted); margin-top: 3px; } .notif-dismiss { background: none; border: none; color: var(--muted); cursor: pointer; width: 22px; height: 22px; border-radius: 4px; display: inline-grid; place-items: center; opacity: 0; transition: opacity .12s ease, background .12s ease; } .notif-item:hover .notif-dismiss { opacity: 1; } .notif-dismiss:hover { background: rgba(40,47,57,.08); color: var(--navy); } .notif-dismiss svg { width: 12px; height: 12px; fill: currentColor; } .list-title { font-size: 18px; font-weight: 700; } .refresh-btn { background: transparent; border: 1px solid transparent; color: var(--navy-soft); width: 30px; height: 30px; border-radius: 6px; display: inline-grid; place-items: center; cursor: pointer; transition: background .12s, color .12s, transform .25s; } .refresh-btn:hover { background: var(--cream-dark); color: var(--navy); } .refresh-btn.spinning { transform: rotate(360deg); transition: transform .8s; color: var(--gold-dark); } .refresh-btn svg { width: 16px; height: 16px; fill: currentColor; } .list-search input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); font-size: 13px; } .list-search input:disabled { opacity: .7; } /* Quick filter pills — under the search bar, before the list */ .quick-filters { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; } .quick-filters::-webkit-scrollbar { display: none; } .qf-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--cream); border: 1px solid var(--line); color: var(--navy-soft); padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; transition: border-color .12s, color .12s, background .12s; flex-shrink: 0; } .qf-pill:hover { border-color: var(--gold); color: var(--navy); } .qf-pill.active { border-color: var(--red); color: var(--red-dark); background: var(--paper); box-shadow: 0 1px 3px rgba(233, 42, 46, .12); } .qf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .qf-dot.tag-urgent { background: var(--red); } .qf-dot.tag-reply-needed { background: var(--gold); } .qf-dot.tag-task { background: var(--navy); } .qf-dot.tag-internal { background: #3FB6FF; } .qf-count { font-size: 10.5px; font-weight: 700; color: var(--muted); padding: 1px 6px; background: rgba(40, 47, 57, .07); border-radius: 8px; min-width: 14px; text-align: center; } .qf-pill.active .qf-count { background: var(--red); color: white; } .mail-list { flex: 1; min-height: 0; /* required for flex children to scroll */ overflow-y: auto; /* THIS is what scrolls for long inboxes */ overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Nexa search filter banner — shown above the inbox list when the user clicks an email reference from a Nexa search_inbox result. */ .nexa-search-banner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(178, 142, 68, .12); border-bottom: 1px solid var(--line); border-top: 1px solid rgba(178, 142, 68, .25); font-size: 12.5px; color: var(--navy); } .dsb-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--gold-dark); flex-shrink: 0; } .dsb-icon svg { width: 14px; height: 14px; fill: currentColor; } .dsb-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dsb-label { color: var(--muted); font-weight: 500; } .dsb-query { color: var(--navy); font-weight: 600; margin-left: 4px; } .dsb-count { color: var(--muted); margin-left: 6px; font-size: 11.5px; } .dsb-clear { display: inline-flex; align-items: center; gap: 4px; background: var(--paper); border: 1px solid var(--line); color: var(--navy); font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer; font-family: inherit; flex-shrink: 0; } .dsb-clear:hover { border-color: var(--gold); color: var(--gold-dark); } .dsb-clear svg { width: 11px; height: 11px; fill: currentColor; } .mail-row.filtered-out { display: none; } .mail-row { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s ease; position: relative; } .mail-row:hover { background: var(--cream); } /* Outlook-style hover quick-actions — shown only when hovering the row. */ .mail-row-actions { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: flex; gap: 2px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 2px; box-shadow: 0 2px 8px rgba(40, 47, 57, .12); opacity: 0; pointer-events: none; transition: opacity .12s ease; } .mail-row:hover .mail-row-actions { opacity: 1; pointer-events: auto; } .mail-row.selected .mail-row-actions { background: var(--cream); } .mra-btn { background: transparent; border: none; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; color: var(--navy-soft); display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .12s, color .12s; } .mra-btn:hover { background: var(--cream-dark); color: var(--navy); } .mra-btn:disabled { opacity: .4; cursor: not-allowed; } .mra-btn svg { width: 14px; height: 14px; fill: currentColor; } .mra-btn.starred { color: var(--gold-dark); } .mra-btn.delete:hover { color: var(--bad); background: rgba(196, 69, 69, .1); } .mail-row.selected { background: var(--cream-dark); } .mail-row.unread .mail-sender, .mail-row.unread .mail-subject { font-weight: 700; color: var(--navy); } .mail-row.unread::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); /* unread = red dot (matches brand emphasis) */ margin-top: 14px; margin-left: -8px; flex-shrink: 0; } .mail-avatar { width: 36px; height: 36px; background: var(--gold); /* sender avatar stays gold — decorative, not action */ color: white; border-radius: 50%; display: grid; place-items: center; font-weight: 600; flex-shrink: 0; } .mail-body { flex: 1; min-width: 0; } .mail-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 2px; } .mail-sender { font-weight: 600; color: var(--navy); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail-time { color: var(--muted); font-size: 12px; flex-shrink: 0; } /* Paperclip indicator on rows with attachments (Phase 5.BA) */ .mail-row-top-right { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } .mail-attach-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: var(--gold-dark); opacity: .85; } .mail-attach-icon svg { width: 14px; height: 14px; fill: currentColor; } .mail-row.unread .mail-attach-icon { color: var(--red); opacity: 1; } .mail-subject { font-size: 13.5px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; } .mail-row-meta { display: flex; align-items: center; gap: 6px; overflow: hidden; } .mail-tag-slot { flex-shrink: 0; display: inline-flex; } .mail-snippet { font-size: 12.5px; color: var(--navy-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* AI classification tag chips — one per category, color-coded. Urgent = brand red. Reply needed = gold. Task = navy. The rest are muted/neutral so the urgent stuff visually dominates. */ .mail-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; white-space: nowrap; line-height: 1.4; } .mail-tag.tag-urgent { background: var(--red); color: white; } .mail-tag.tag-reply-needed { background: var(--gold); color: white; } .mail-tag.tag-task { background: var(--navy); color: white; } .mail-tag.tag-internal { background: rgba(63, 182, 255, .15); color: #1B6FA8; } .mail-tag.tag-receipt { background: rgba(40, 47, 57, .08); color: var(--navy-soft); } .mail-tag.tag-newsletter { background: rgba(138, 133, 118, .12); color: var(--muted); } .mail-tag.tag-fyi { background: rgba(138, 133, 118, .12); color: var(--muted); } .mail-tag.tag-auto { background: rgba(138, 133, 118, .10); color: var(--muted); } .mail-tag.tag-done { background: var(--good); color: white; } .mail-tag.tag-done::before { content: "✓ "; } .list-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px 24px; color: var(--muted); } .empty-icon { font-size: 42px; color: var(--gold); margin-bottom: 10px; } .empty-title { font-size: 15px; color: var(--navy); font-weight: 600; margin-bottom: 6px; } .empty-sub { font-size: 13px; line-height: 1.5; max-width: 280px; } /* RIGHT — reading pane. Scrolls based on the open email's length. */ .reader { background: var(--paper); padding: 24px; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* Positioning context for .compose-modal.docked (Phase 5.AR) so * the docked compose card's position:absolute anchors here and not * to the viewport. */ position: relative; } /* ==================================================================== RIGHT PANEL — calendar (mini-month + agenda). Nexa panel slides in over this when opened. Toggleable via header button. ==================================================================== */ .right-panel { background: var(--cream); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .rp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--cream); } .rp-head-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--gold-dark); } .rp-head-actions { display: flex; gap: 4px; align-items: center; } .rp-icon-btn { background: transparent; border: none; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; } .rp-icon-btn:hover { background: var(--paper); color: var(--navy); } .rp-icon-btn svg { width: 14px; height: 14px; fill: currentColor; } /* Mini-month inside right panel */ .rp-mini { padding: 12px 14px 8px; border-bottom: 1px solid var(--line); background: var(--paper); } .rp-mini-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; color: var(--navy); } .rp-mini-nav { background: transparent; border: none; padding: 2px 6px; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; border-radius: 4px; } .rp-mini-nav:hover { background: var(--cream); color: var(--navy); } .rp-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 11px; text-align: center; } .rp-mini-dow { color: var(--muted); font-weight: 600; padding: 2px 0; text-transform: uppercase; letter-spacing: .3px; } .rp-mini-day { padding: 4px 0; border-radius: 50%; cursor: pointer; color: var(--navy); transition: background .12s; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; position: relative; } .rp-mini-day:hover { background: var(--cream-dark); } .rp-mini-day.muted { color: var(--muted); opacity: .5; } .rp-mini-day.today { background: var(--gold); color: white; font-weight: 700; } .rp-mini-day.has-events::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--gold-dark); } .rp-mini-day.today.has-events::after { background: white; } /* Agenda list */ .rp-agenda { flex: 1; overflow-y: auto; padding: 12px 14px 16px; } .rp-agenda::-webkit-scrollbar { width: 6px; } .rp-agenda::-webkit-scrollbar-thumb { background: rgba(40,47,57,.15); border-radius: 3px; } .rp-day { border-bottom: 1px solid var(--line); padding: 8px 0 10px; } .rp-day:last-child { border-bottom: none; } .rp-day-label { font-size: 11.5px; font-weight: 700; color: var(--navy); margin-bottom: 4px; } .rp-day-label.today { color: var(--gold-dark); } .rp-event { display: flex; gap: 8px; padding: 5px 4px; border-radius: 6px; cursor: pointer; align-items: flex-start; } .rp-event:hover { background: var(--paper); } .rp-event-bar { width: 3px; border-radius: 2px; align-self: stretch; flex-shrink: 0; } .rp-event-body { flex: 1; min-width: 0; } .rp-event-title { font-size: 12.5px; color: var(--navy); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rp-event-time { font-size: 11px; color: var(--muted); margin-top: 1px; } .rp-agenda-empty { font-size: 12px; color: var(--muted); font-style: italic; padding: 4px 0; } .rp-agenda-loading { font-size: 12px; color: var(--muted); padding: 8px 0; } /* Toggle button shown on the email reader top — re-opens the panel when hidden, hides when shown. */ .right-panel-toggle { background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 11px; font-weight: 600; cursor: pointer; color: var(--muted); font-family: inherit; display: inline-flex; align-items: center; gap: 5px; } .right-panel-toggle:hover { color: var(--navy); border-color: var(--gold); } .right-panel-toggle svg { width: 12px; height: 12px; fill: currentColor; } .reader-empty { display: flex; height: 100%; align-items: center; justify-content: center; color: var(--muted); } .reader-head { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 20px; } .reader-subject { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 12px; } /* Email header rows (From / To / Cc / Date) */ .reader-headers { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; } .rh-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--navy); line-height: 1.5; } .rh-label { display: inline-block; width: 44px; flex-shrink: 0; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; padding-top: 2px; } .rh-value { flex: 1; word-wrap: break-word; min-width: 0; } .rh-email { color: var(--muted); font-weight: 400; font-size: 12.5px; } .rh-more { color: var(--muted); font-size: 12px; font-style: italic; } .rh-row.rh-date .rh-value { color: var(--muted); font-size: 12px; } /* Legacy classes kept for any other usage */ .reader-from { font-size: 14px; color: var(--navy); margin-bottom: 4px; } .reader-email { color: var(--muted); margin-left: 6px; font-weight: 400; } .reader-meta { font-size: 12px; color: var(--muted); } .reader-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; } .reader-loading, .reader-empty-body { color: var(--muted); padding: 20px 0; text-align: center; font-size: 13px; } .reader-error { color: var(--bad); padding: 14px; background: #FCEDED; border: 1px solid rgba(196, 69, 69, .25); border-radius: 8px; font-size: 13px; } .reader-iframe { width: 100%; border: none; /* Always white — emails are authored for a light background. In dark mode this renders the email as a light "sheet" so the sender's (usually dark) text stays readable, matching Gmail / Apple Mail behaviour. */ background: #ffffff; min-height: 200px; display: block; } .reader-text { white-space: pre-wrap; word-wrap: break-word; font-family: inherit; font-size: 14px; line-height: 1.6; color: var(--navy); margin: 0; padding: 0; } /* Legacy bottom-of-body attachment tray (kept for any cached HTML) */ .reader-attachments { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } .reader-attachments-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 8px; } .reader-attachment { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--cream); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; font-size: 13px; } .reader-attachment .ra-name { flex: 1; font-weight: 500; color: var(--navy); } .reader-attachment .ra-meta { color: var(--muted); font-size: 11.5px; } .reader-attachment .ra-icon { display: inline-grid; place-items: center; color: var(--muted); flex-shrink: 0; } .reader-attachment .ra-icon svg { width: 16px; height: 16px; fill: currentColor; display: block; } /* ============================================================ READER HEADER ATTACHMENT BAR — Outlook-style chips below To/Cc ============================================================ */ .reader-attachments-bar { margin-top: 14px; padding: 12px 0 4px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rab-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; } .rab-chip { display: inline-flex; align-items: stretch; gap: 10px; padding: 6px 12px 6px 6px; background: var(--cream); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--navy); font-size: 13px; transition: background .12s, border-color .12s; max-width: 280px; min-height: 44px; } .rab-chip:hover { background: var(--paper); border-color: var(--gold); } .rab-icon { display: inline-flex; align-items: center; flex-shrink: 0; } .rab-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden; } .rab-name { font-weight: 500; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; } .rab-meta { font-size: 11px; color: var(--muted); line-height: 1.2; } .rab-all { background: transparent; border: none; color: var(--gold-dark); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: underline; text-underline-offset: 3px; flex-shrink: 0; } .rab-all:hover { color: var(--red-dark); } /* File-type tile — colored square with the extension label, similar to Outlook / Gmail file chips. Avoids per-format icon assets. */ .ft-tile { width: 36px; height: 36px; border-radius: 6px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; color: white; position: relative; flex-shrink: 0; } .ft-tile svg { width: 28px; height: 28px; fill: currentColor; opacity: .25; position: absolute; inset: 4px; } .ft-label { position: relative; z-index: 1; font-size: 9.5px; font-weight: 800; letter-spacing: .3px; } .ft-tile.ft-xls { background: #1F8552; } /* Excel green */ .ft-tile.ft-doc { background: #2A6FBA; } /* Word blue */ .ft-tile.ft-pdf { background: #C0392B; } /* PDF red */ .ft-tile.ft-img { background: #8E44AD; } /* Image purple */ .ft-tile.ft-ppt { background: #C75B12; } /* PowerPoint orange */ .ft-tile.ft-zip { background: #555E68; } /* Zip grey */ .ft-tile.ft-generic { background: var(--gold-dark); } /* ============================================================ OUTLOOK-STYLE READER TOOLBAR — top of the open email ============================================================ */ .reader-toolbar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; margin: -24px -24px 16px; /* extends to the column edges */ border-bottom: 1px solid var(--line); background: var(--cream); flex-wrap: wrap; } .tb-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid transparent; color: var(--navy-soft); padding: 6px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .tb-btn:hover:not(:disabled) { background: var(--paper); color: var(--navy); border-color: var(--line); } .tb-btn:disabled { opacity: .45; cursor: wait; } .tb-btn svg { width: 16px; height: 16px; fill: currentColor; display: block; flex-shrink: 0; } .tb-btn.active { color: var(--gold-dark); background: rgba(178, 142, 68, .08); } .tb-btn.tb-danger:hover:not(:disabled) { color: var(--bad); border-color: rgba(196, 69, 69, .25); background: #FCEDED; } .tb-divider { width: 1px; height: 22px; background: var(--line); margin: 0 4px; } /* ============================================================ TOAST — small ephemeral notification (archive/star/etc feedback) ============================================================ */ .nexa-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--navy); color: white; padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 500; box-shadow: 0 8px 24px rgba(40, 47, 57, .25); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 9500; } .nexa-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .nexa-toast.error { background: var(--bad); } .nexa-toast.ok { background: var(--good); } /* Undo-send count-down toast — bigger, more present than the regular * toast because the user is actively waiting for it to time out. */ .nexa-undo-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 500; box-shadow: 0 8px 24px rgba(40, 47, 57, .35); display: inline-flex; align-items: center; gap: 16px; z-index: 9700; opacity: 0; transition: opacity .18s, transform .18s; } .nexa-undo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .nexa-undo-toast .dut-text { white-space: nowrap; } .nexa-undo-toast #dutCount { font-weight: 700; color: var(--gold); } .nexa-undo-toast .dut-undo { background: var(--accent, var(--gold)); color: #fff; border: none; padding: 5px 14px; border-radius: 999px; font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; transition: background .15s, transform .12s; } .nexa-undo-toast .dut-undo:hover { background: var(--accent-dark, var(--gold-dark)); transform: translateY(-1px); } /* Phase 5.CA — auto-complete task toast. * Shows up when a sent reply auto-closes a linked To Do task. Sits * bottom-right, stays for 6 seconds, has an Undo button. */ .nexa-task-toast { position: fixed; right: 24px; bottom: 24px; z-index: 9600; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--paper); border: 1px solid rgba(46, 160, 67, .35); border-left: 4px solid #2ea043; border-radius: 10px; box-shadow: 0 8px 24px rgba(40, 47, 57, .15); min-width: 280px; max-width: 380px; opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease; } .nexa-task-toast.show { opacity: 1; transform: translateY(0); } .nexa-task-toast .dtt-check { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(46, 160, 67, .14); color: #2ea043; display: inline-grid; place-items: center; } .nexa-task-toast .dtt-check svg { width: 16px; height: 16px; fill: currentColor; } .nexa-task-toast .dtt-body { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; } .nexa-task-toast .dtt-title { color: var(--navy); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nexa-task-toast .dtt-title strong { font-weight: 700; color: var(--navy); margin-left: 4px; } .nexa-task-toast .dtt-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; } .nexa-task-toast .dtt-undo { flex-shrink: 0; background: transparent; border: 1px solid var(--line); color: var(--navy-soft); padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; } .nexa-task-toast .dtt-undo:hover { background: rgba(178, 142, 68, .14); border-color: rgba(178, 142, 68, .35); color: var(--navy); } /* ============================================================ COMPOSE MODAL — new email from the "+ New email" button ============================================================ */ .compose-modal { position: fixed; inset: 0; z-index: 9700; display: grid; place-items: center; } /* Respect the [hidden] attribute — CSS display:grid above otherwise wins over the browser's default 'hidden→display:none', leaving the modal visible on page load until JS removes the attribute. */ .compose-modal[hidden] { display: none; } /* Phase 5.AR — when docked inside the reader column, drop the * overlay treatment and stretch to fill the section. Lots more * writing space, plus the email list remains visible on the left. * * Phase 5.AS — match the red-bordered card styling of .draft-composer * so all five composer entry points (Reply / Reply-All / Forward / * New email / Nexa-drafted) feel visually identical. */ .compose-modal.docked { position: absolute; inset: 0; z-index: auto; display: block; background: transparent; padding: 0; } .compose-modal.docked .compose-backdrop { display: none; } .compose-modal.docked .compose-card { position: static; width: 100%; height: 100%; max-width: none; max-height: none; /* Red-bordered card style matching .draft-composer */ background: var(--paper); border: 1px solid var(--red); border-radius: 14px; box-shadow: 0 8px 24px rgba(233, 42, 46, .12); overflow: hidden; } .compose-backdrop { position: absolute; inset: 0; background: rgba(40, 47, 57, .45); backdrop-filter: blur(2px); } .compose-card { position: relative; background: var(--paper); border-radius: 16px; width: 680px; max-width: calc(100vw - 40px); max-height: calc(100vh - 80px); box-shadow: 0 32px 80px rgba(40, 47, 57, .35); display: flex; flex-direction: column; overflow: hidden; } .compose-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: var(--cream); border-bottom: 1px solid var(--line); } .compose-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy); font-size: 14px; } .compose-title svg { width: 18px; height: 18px; fill: var(--red); } .compose-close { background: transparent; border: none; color: var(--muted); font-size: 22px; line-height: 1; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; } .compose-close:hover { background: var(--cream-dark); color: var(--navy); } .compose-fields { padding: 12px 18px 0; } .compose-field { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); } .compose-field label { width: 60px; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; flex-shrink: 0; } .compose-field input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 14px; color: var(--navy); padding: 4px 0; } /* Top action bar (Outlook-style) */ .compose-actionbar { display: flex; align-items: center; gap: 4px; padding: 8px 12px; background: var(--paper); border-bottom: 1px solid var(--line); } .cmp-send-top { margin-right: 8px; } .cmp-send-top svg { width: 14px; height: 14px; fill: currentColor; vertical-align: text-bottom; margin-right: 4px; } .cmp-icon-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid transparent; padding: 6px 10px; border-radius: 6px; font-size: 12.5px; color: var(--navy-soft); font-family: inherit; cursor: pointer; transition: background .12s, color .12s; } .cmp-icon-btn:hover:not(:disabled) { background: var(--cream); color: var(--navy); border-color: var(--line); } .cmp-icon-btn:disabled { opacity: .4; cursor: not-allowed; } .cmp-icon-btn svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; } .cmp-actionbar-spacer { flex: 1; } .cmp-tiny-btn { background: transparent; border: none; color: var(--navy-soft); font-size: 11.5px; cursor: pointer; font-family: inherit; padding: 2px 6px; border-radius: 4px; font-weight: 600; } .cmp-tiny-btn:hover { background: var(--cream-dark); color: var(--navy); } /* Rich-text formatting toolbar */ .compose-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 12px; background: var(--cream); border-bottom: 1px solid var(--line); flex-wrap: wrap; } .compose-toolbar button { display: inline-grid; place-items: center; background: transparent; border: 1px solid transparent; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; color: var(--navy-soft); font-family: inherit; font-size: 13px; padding: 0; transition: background .12s, color .12s, border-color .12s; } .compose-toolbar button:hover { background: var(--paper); color: var(--navy); border-color: var(--line); } .compose-toolbar button svg { width: 16px; height: 16px; fill: currentColor; } .compose-toolbar button b, .compose-toolbar button i, .compose-toolbar button u, .compose-toolbar button s { font-size: 13.5px; } .ct-divider { width: 1px; height: 20px; background: var(--line); margin: 0 4px; } .ct-select { background: transparent; border: 1px solid transparent; font-family: inherit; font-size: 12.5px; color: var(--navy); padding: 4px 6px; border-radius: 6px; cursor: pointer; height: 30px; } .ct-select:hover { background: var(--paper); border-color: var(--line); } .ct-size { width: 56px; } .ct-color { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; position: relative; border: 1px solid transparent; transition: background .12s, border-color .12s; } .ct-color:hover { background: var(--paper); border-color: var(--line); } .ct-color input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .ct-color-letter { font-size: 13.5px; font-weight: 700; color: var(--navy); font-family: inherit; } /* Rich-text body */ .compose-body-rich { flex: 1; min-height: 260px; width: 100%; border: none; outline: none; padding: 18px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.6; color: var(--navy); overflow-y: auto; box-sizing: border-box; position: relative; /* Phase 5.BD — auto bidi per paragraph */ unicode-bidi: plaintext; } .compose-body-rich div, .compose-body-rich p, .compose-body-rich li, .compose-body-rich blockquote { unicode-bidi: plaintext; } .compose-body-rich:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; display: block; } .compose-body-rich p { margin: 0 0 10px; } .compose-body-rich blockquote { border-left: 3px solid var(--gold); padding-left: 10px; margin: 6px 0; color: var(--navy-soft); font-style: italic; } .compose-body-rich a { color: var(--gold-dark); } /* Footer (status + sig hint) — was .compose-actions before */ .compose-footer { display: flex; align-items: center; gap: 10px; padding: 8px 18px; background: var(--cream); border-top: 1px solid var(--line); flex-wrap: wrap; min-height: 32px; } .compose-status { flex: 1; font-size: 12.5px; color: var(--muted); text-align: right; } .compose-status.ok { color: var(--good); font-weight: 600; } .compose-status.error { color: var(--bad); } .compose-status a { color: inherit; } .compose-sig-hint { font-size: 11.5px; color: var(--gold-dark); font-weight: 600; } /* Send button — slightly more emphatic than other primary buttons */ .draft-btn-send svg, .cd-send svg { width: 14px; height: 14px; fill: currentColor; vertical-align: text-bottom; margin-right: 4px; } /* ============================================================ DRAFT COMPOSER — inline reply card above the read message ============================================================ */ .draft-composer { background: var(--paper); border: 1px solid var(--red); border-radius: 14px; margin-bottom: 24px; overflow: hidden; box-shadow: 0 8px 24px rgba(233, 42, 46, .12); } .draft-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--cream); } .draft-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy); font-size: 13.5px; } .draft-title .k-logo { width: 16px; height: 16px; padding: 2px; } .draft-close { background: transparent; border: none; color: var(--muted); font-size: 20px; cursor: pointer; width: 28px; height: 28px; border-radius: 6px; line-height: 1; } .draft-close:hover { background: var(--cream-dark); color: var(--navy); } /* Style-match confidence banner under the draft header */ .draft-confidence { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 12.5px; font-weight: 500; border-bottom: 1px solid var(--line); } .draft-confidence svg { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; } .draft-confidence.conf-high { background: rgba(79, 157, 90, .10); color: var(--good); } .draft-confidence.conf-medium { background: rgba(178, 142, 68, .10); color: var(--gold-dark); } .draft-confidence.conf-low { background: var(--cream); color: var(--muted); } /* Tone preset chip row */ .draft-tones { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 16px; background: var(--cream); border-bottom: 1px solid var(--line); } .draft-tones-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-right: 4px; } .tone-chip { background: var(--paper); border: 1px solid var(--line); color: var(--navy); font-size: 11.5px; font-weight: 500; font-family: inherit; padding: 4px 10px; border-radius: 999px; cursor: pointer; transition: border-color .12s, color .12s, background .12s; } .tone-chip:hover { border-color: var(--red); color: var(--red-dark); background: var(--paper); } .draft-fields { padding: 12px 16px 0; } .draft-field { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); } .draft-field label { width: 60px; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; } .draft-field input { flex: 1; border: none; outline: none; background: transparent; font-size: 13.5px; color: var(--navy); font-family: inherit; padding: 4px 0; } /* Cc / Bcc toggle pills on the To row of the draft composer. */ .draft-cc-toggle { background: transparent; border: 1px solid var(--line); color: var(--muted); font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: color .12s, border-color .12s; } .draft-cc-toggle:hover { color: var(--navy); border-color: var(--gold); } .draft-instructions { display: flex; gap: 8px; padding: 10px 16px; background: var(--cream); border-bottom: 1px solid var(--line); } .draft-extra-instructions { flex: 1; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 12.5px; background: var(--paper); outline: none; font-family: inherit; } .draft-extra-instructions:focus { border-color: var(--gold); } .draft-body-wrap { padding: 0 16px; } .draft-body { width: 100%; min-height: 240px; max-height: 600px; overflow-y: auto; border: none; outline: none; font-family: inherit; font-size: 14px; line-height: 1.6; color: var(--navy); padding: 16px 0; background: transparent; /* Phase 5.BD — auto bidi per paragraph. * `unicode-bidi: plaintext` tells the browser to look at the first * strong character of each block and pick LTR or RTL accordingly. * That way the user can switch keyboards mid-draft (English greeting, * Farsi body, English signature) and every paragraph aligns correctly. */ unicode-bidi: plaintext; } .draft-body div, .draft-body p, .draft-body li, .draft-body blockquote { unicode-bidi: plaintext; } /* Phase 5.AQ — contenteditable visual states. */ .draft-body:focus { outline: none; } .draft-body.disabled { opacity: 0.6; pointer-events: none; cursor: not-allowed; user-select: none; } .draft-body:empty:before { content: attr(data-placeholder); color: var(--muted, #9aa0a6); pointer-events: none; display: block; } /* Preserve original styles inside the editor — don't let the editor's * font override the quoted HTML's signature styling. */ .draft-body * { max-width: 100%; } .draft-body img { max-width: 100%; height: auto; } .draft-actions { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--cream); } .draft-status { flex: 1; font-size: 12.5px; color: var(--muted); } .draft-sig-hint { font-size: 11.5px; color: var(--gold-dark); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .draft-sig-hint::before { content: "✓"; font-weight: 800; } .draft-status.ok { color: var(--good); font-weight: 600; } .draft-status.error { color: var(--bad); } .draft-status a { color: inherit; } .reader-body { font-size: 14px; color: var(--navy); line-height: 1.6; } /* ─── DARK-THEME EMAIL CONTENT — light card, native colors preserved ─── * Emails arrive with hardcoded inline colors from the sender (signatures, * marketing emails, branded headers, etc.) that assume a light background. * Forcing dark-mode tokens on .reader-body would turn that content into * black-on-black. Instead: when the user is in dark mode, the body card * itself stays light, so the sender's styling renders the way they * intended. Surrounding chrome stays dark. * Same treatment for any other place we render arbitrary email HTML — * the draft composer's reply pane, the signature iframe wrapper, etc. */ body[data-theme="dark"] .reader-body, body[data-theme="dark"] .draft-body, body[data-theme="dark"] .cmp-body-rich, body[data-theme="dark"] .draft-quoted, body[data-theme="dark"] .reader-note, body[data-theme="dark"] .sig-preview, body[data-theme="dark"] #sigIframe { background: #ffffff; color: #1a1a1a; border-radius: 10px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.06); } body[data-theme="dark"] .reader-body * { color: inherit; } body[data-theme="dark"] .reader-body a { color: #1a5bbb; } /* Same treatment when the user is on system theme AND the OS is in dark. */ @media (prefers-color-scheme: dark) { body[data-theme="system"] .reader-body, body[data-theme="system"] .draft-body, body[data-theme="system"] .cmp-body-rich, body[data-theme="system"] .draft-quoted, body[data-theme="system"] .reader-note, body[data-theme="system"] .sig-preview, body[data-theme="system"] #sigIframe { background: #ffffff; color: #1a1a1a; border-radius: 10px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.06); } body[data-theme="system"] .reader-body * { color: inherit; } body[data-theme="system"] .reader-body a { color: #1a5bbb; } } .reader-snippet { margin: 0 0 24px; } .reader-note { font-size: 12px; color: var(--muted); padding: 10px 12px; background: var(--cream); border-radius: 8px; border: 1px solid var(--line); } /* ============================================================ NEXA SMALL ICON BUTTONS — mirrors dashboard .nexa-btn pattern Use this whenever an action invokes Nexa. Logo to the left of the text label with 7px gap. Never substitute an emoji. ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--navy); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; font-family: inherit; } .btn:hover { background: var(--cream); } .btn.primary { background: var(--red); border-color: var(--red); color: white; } .btn.primary:hover { background: var(--red-dark); border-color: var(--red-dark); } .btn.nexa-btn { display: inline-flex; align-items: center; gap: 7px; } .btn.nexa-btn img.k-logo { width: 14px; height: 14px; display: block; object-fit: contain; flex-shrink: 0; background: #000; border-radius: 3px; padding: 1.5px; box-sizing: border-box; } .btn.nexa-btn.large img.k-logo { width: 18px; height: 18px; padding: 2px; } /* Standalone small logo (for chips, suggestion pills, etc.) */ .k-logo { width: 14px; height: 14px; display: inline-block; object-fit: contain; flex-shrink: 0; background: #000; border-radius: 3px; padding: 1.5px; vertical-align: text-bottom; box-sizing: border-box; } .k-logo-sm { width: 12px; height: 12px; padding: 1px; } /* Inline variant for headings + label text — baseline-aligned */ .k-logo-inline { width: 14px; height: 14px; display: inline-block; object-fit: contain; flex-shrink: 0; background: #000; border-radius: 3px; padding: 1.5px; vertical-align: middle; margin-right: 4px; box-sizing: border-box; } /* ============================================================ NEXA FAB — bottom-right floating launcher Matches dashboard pattern: 56x56, radius 14, bottom 22 right 22 ============================================================ */ .nexa-fab { position: fixed; bottom: 22px; right: 22px; width: 56px; height: 56px; border-radius: 14px; background: #000; border: none; cursor: pointer; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); z-index: 9000; transition: transform .15s, box-shadow .15s; } .nexa-fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0, 0, 0, .5); } .nexa-fab img { width: 70%; height: 70%; display: block; object-fit: contain; } .nexa-fab .nexa-fab-x { display: none; color: #fff; font-size: 24px; font-weight: 300; line-height: 1; } .nexa-fab.open img { display: none; } .nexa-fab.open .nexa-fab-x { display: block; } body.nexa-panel-open .nexa-fab { display: none; } /* Soft "breathing" idle animation — gentle outward glow pulse + subtle scale. Matches the dashboard's ka-fab pattern. */ @keyframes nexa-breathe { 0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,.4), 0 0 0 0 rgba(178, 142, 68, .35); transform: scale(1); } 50% { box-shadow: 0 4px 14px rgba(0,0,0,.4), 0 0 0 14px transparent; transform: scale(1.025); } } .nexa-fab:not(.open):not(:hover) { animation: nexa-breathe 2.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .nexa-fab { animation: none !important; } } /* NEXA PANEL — full-height slide-in from the RIGHT side. Pairs with the mail list on the left and reading pane in the middle, putting the AI assistant in arm's reach without obscuring email content. The panel sits ABOVE the inbox; you can still see the email list/folders peek behind it on wide screens. */ .nexa-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: calc(100vw - 60px); background: var(--paper); border-left: 1px solid var(--line); box-shadow: -8px 0 40px rgba(40, 47, 57, .14); display: flex; flex-direction: column; z-index: 9001; overflow: hidden; transform: translateX(100%); transition: transform .25s ease-out; pointer-events: none; } .nexa-panel.open { transform: translateX(0); pointer-events: auto; } /* ---------- NEXA PANEL HEADER ---------- */ .nexa-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--cream); flex-shrink: 0; } .nexa-panel-title { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .2px; color: var(--navy); font-size: 14px; } .nexa-mini-logo { width: 28px; height: 28px; background: #000; border-radius: 6px; padding: 3px; object-fit: contain; display: block; box-sizing: border-box; flex-shrink: 0; } .nexa-panel-actions { display: flex; align-items: center; gap: 8px; } .nexa-close { background: transparent; border: none; color: var(--navy-soft); font-size: 22px; line-height: 1; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; } .nexa-close:hover { background: var(--cream-dark); color: var(--navy); } .nexa-new-chat { display: inline-flex; align-items: center; gap: 5px; background: var(--red); color: white; border: none; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 2px 6px rgba(233, 42, 46, .25); transition: background .15s, transform .1s; } .nexa-new-chat:hover { background: var(--red-dark); transform: translateY(-1px); } .nexa-new-chat svg { width: 14px; height: 14px; fill: currentColor; } /* ---------- NEXA WELCOME STATE — vertically centered ---------- */ .nexa-welcome { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; /* vertical centering — the key fix */ align-items: center; padding: 24px; text-align: center; min-height: 0; } /* Respect [hidden] — display:flex above would otherwise win and leave the welcome state visible after sending the first message. */ .nexa-welcome[hidden] { display: none; } .nexa-big-logo { width: 72px; height: 72px; border-radius: 18px; overflow: hidden; margin-bottom: 18px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); background: #000; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nexa-big-logo img { width: 70%; height: 70%; display: block; object-fit: contain; } .nexa-greet { font-size: 16px; font-weight: 500; margin-bottom: 24px; color: var(--navy-soft); } .nexa-input-wrap { width: 100%; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s; } .nexa-input-wrap:focus-within { border-color: var(--gold); } .nexa-input { width: 100%; background: transparent; color: var(--navy); border: none; outline: none; resize: none; font-family: inherit; font-size: 13.5px; line-height: 1.5; min-height: 48px; max-height: 160px; } .nexa-input::placeholder { color: var(--muted); } .nexa-input-actions { display: flex; justify-content: space-between; align-items: center; } .nexa-input-actions-left { display: flex; gap: 2px; align-items: center; } /* Icon-only borderless circular buttons (mic + attach) — exact dashboard treatment. */ .nexa-icon-btn { background: transparent; border: none; color: var(--muted); width: 36px; height: 36px; padding: 0; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .12s, color .12s; } .nexa-icon-btn:hover:not(:disabled) { background: var(--cream-dark); color: var(--navy); } .nexa-icon-btn:disabled { opacity: .45; cursor: not-allowed; } .nexa-icon-btn svg { width: 18px; height: 18px; fill: currentColor; display: block; } .nexa-send { background: var(--navy); color: white; border: none; padding: 7px 16px; border-radius: 999px; font-weight: 600; font-size: 13px; cursor: pointer; flex-shrink: 0; transition: opacity .15s; } .nexa-send:hover:not(:disabled) { opacity: .85; } .nexa-send:disabled { opacity: .45; cursor: not-allowed; } .nexa-footer-note { margin-top: 20px; font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.5; } /* Suggestion chips in welcome state — Shortwave-style rounded pills. Soft cream background, navy text, brand-red outline on hover/active. */ .nexa-suggestions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; } .nexa-chip { background: var(--cream); border: 1px solid var(--line); color: var(--navy); padding: 8px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 500; font-family: inherit; cursor: pointer; transition: border-color .15s, color .15s, background .15s, box-shadow .15s; } .nexa-chip:hover { border-color: var(--red); color: var(--red-dark); background: var(--paper); box-shadow: 0 2px 6px rgba(233, 42, 46, .08); } .nexa-chip:active { transform: translateY(1px); } /* ---------- CHAT STATE ---------- */ .nexa-chat { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .nexa-chat[hidden] { display: none; } .nexa-messages { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; } .nexa-messages::-webkit-scrollbar { width: 6px; } .nexa-messages::-webkit-scrollbar-thumb { background: rgba(40,47,57,.15); border-radius: 3px; } .nexa-msg-wrap { display: flex; flex-direction: column; max-width: 90%; } .nexa-msg-wrap.user { align-self: flex-end; align-items: flex-end; } .nexa-msg-wrap.assistant { align-self: flex-start; align-items: flex-start; } .nexa-msg { padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; word-wrap: break-word; /* Phase 5.BW — per-paragraph auto bidi. With dir="auto" on the bubble * + unicode-bidi:plaintext on the inner blocks, each paragraph picks * its own LTR / RTL from the first strong character. Lets Nexa mix * English + Farsi + Arabic + Hebrew in a single reply cleanly. */ unicode-bidi: plaintext; } .nexa-msg p, .nexa-msg div, .nexa-msg li, .nexa-msg blockquote, .nexa-msg .md-content, .nexa-msg .md-content > * { unicode-bidi: plaintext; } /* The chat-input textareas inherit dir=auto from HTML — mirror the * CSS bidi hint so cursor + alignment follow the typed script. */ .nexa-input { unicode-bidi: plaintext; } .nexa-msg.user { background: var(--red); color: white; border-bottom-right-radius: 4px; white-space: pre-wrap; } .nexa-msg.assistant { background: var(--cream); color: var(--navy); border: 1px solid var(--line); border-bottom-left-radius: 4px; } .nexa-msg.error { background: #FCEDED; color: #8B1F1F; border: 1px solid rgba(196, 69, 69, .3); } .nexa-msg .nexa-msg-avatar { display: inline-block; width: 18px; height: 18px; background: #000; border-radius: 4px; padding: 2px; margin-right: 6px; vertical-align: text-bottom; box-sizing: border-box; } /* Interactive cleanup batch card (propose_inbox_cleanup tool result) Shortwave-style: tight rows with sender favicons, no chat-bubble framing. */ .cleanup-batch { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; overflow: hidden; box-shadow: 0 2px 10px rgba(40, 47, 57, .06); align-self: stretch; max-width: 100%; } .cb-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 8px; border-bottom: 1px solid var(--line); background: var(--cream); } .cb-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy); font-size: 13.5px; flex: 1; min-width: 0; } .cb-title .k-logo { width: 16px; height: 16px; padding: 2px; flex-shrink: 0; } .cb-title span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cb-count { flex-shrink: 0; background: var(--cream-dark); color: var(--navy-soft); font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; letter-spacing: .3px; } .cb-close { background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; width: 24px; height: 24px; border-radius: 4px; flex-shrink: 0; line-height: 1; } .cb-close:hover { background: var(--cream-dark); color: var(--navy); } .cb-desc { padding: 8px 14px 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; } .cb-list { max-height: 360px; overflow-y: auto; padding: 4px 0; } .cb-list::-webkit-scrollbar { width: 6px; } .cb-list::-webkit-scrollbar-thumb { background: rgba(40,47,57,.15); border-radius: 3px; } .cb-row { display: flex; align-items: center; gap: 10px; padding: 7px 14px; cursor: pointer; transition: background .12s; border-bottom: 1px solid transparent; } .cb-row + .cb-row { border-top: 1px solid rgba(40, 47, 57, .04); } .cb-row:hover { background: var(--cream); } .cb-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--gold); flex-shrink: 0; cursor: pointer; } .cb-avatar { width: 26px; height: 26px; background: var(--gold); color: white; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } /* Favicon container — shows the sender's brand logo if available, falls back to a gold initial circle if the favicon fails to load. */ .cb-favicon { width: 24px; height: 24px; border-radius: 6px; background: var(--cream); display: grid; place-items: center; position: relative; flex-shrink: 0; overflow: hidden; } .cb-favicon img { width: 18px; height: 18px; display: block; position: relative; z-index: 2; } .cb-favicon-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--gold-dark); background: var(--cream); z-index: 1; } .cb-favicon:not(.no-fav) .cb-favicon-fallback { z-index: 0; } .cb-favicon.no-fav { background: var(--gold); } .cb-favicon.no-fav .cb-favicon-fallback { color: white; background: transparent; z-index: 2; } .cb-content { flex: 1; min-width: 0; overflow: hidden; } .cb-sender { font-size: 12px; font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; } .cb-subject { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; } .cb-more { padding: 8px 12px; font-size: 11.5px; color: var(--muted); font-style: italic; } .cb-actions { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--cream); border-top: 1px solid var(--line); } .cb-skip { background: transparent; border: none; color: var(--navy-soft); font-size: 13px; font-weight: 600; cursor: pointer; padding: 7px 14px; border-radius: 6px; } .cb-skip:hover { background: var(--paper); color: var(--navy); } .cb-action-group { display: flex; gap: 6px; flex: 1; justify-content: flex-end; } .cb-primary-btn, .cb-alt-btn { border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 999px; transition: background .12s; } .cb-primary-btn { background: var(--red); color: white; box-shadow: 0 2px 6px rgba(233, 42, 46, .22); } .cb-primary-btn:hover:not(:disabled) { background: var(--red-dark); } .cb-primary-btn:disabled, .cb-alt-btn:disabled, .cb-skip:disabled { opacity: .5; cursor: not-allowed; } .cb-alt-btn { background: var(--paper); color: var(--navy); border: 1px solid var(--line); } .cb-alt-btn:hover:not(:disabled) { background: var(--cream-dark); } .cb-status { font-size: 12px; color: var(--muted); margin-left: 8px; } .cb-status.ok { color: var(--good); font-weight: 600; } .cb-status.error { color: var(--bad); } /* Inline draft card in chat (draft_reply tool result) */ .chat-draft { background: var(--paper); border: 1px solid var(--red); border-radius: 14px; margin: 6px 0; overflow: hidden; box-shadow: 0 6px 18px rgba(233, 42, 46, .10); align-self: stretch; max-width: 100%; } .chat-draft-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--cream); border-bottom: 1px solid var(--line); } .chat-draft-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--navy); } .chat-draft-title .k-logo { width: 16px; height: 16px; padding: 2px; } .chat-draft-close { background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; width: 24px; height: 24px; border-radius: 4px; line-height: 1; } .chat-draft-close:hover { background: var(--cream-dark); color: var(--navy); } .chat-draft-conf { display: flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 11.5px; font-weight: 500; border-bottom: 1px solid var(--line); } .chat-draft-conf svg { width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; } .chat-draft-conf.conf-high { background: rgba(79, 157, 90, .10); color: var(--good); } .chat-draft-conf.conf-medium { background: rgba(178, 142, 68, .10); color: var(--gold-dark); } .chat-draft-conf.conf-low { background: var(--cream); color: var(--muted); } .chat-draft-fields { padding: 8px 14px; } .cd-field { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); } .cd-field label { width: 50px; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; } .cd-field input { flex: 1; border: none; outline: none; background: transparent; font-size: 13px; color: var(--navy); font-family: inherit; } .chat-draft-body { width: calc(100% - 28px); margin: 6px 14px; min-height: 180px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-family: inherit; font-size: 13px; line-height: 1.55; color: var(--navy); resize: vertical; outline: none; unicode-bidi: plaintext; } .chat-draft-body:focus { border-color: var(--red); } .chat-draft-actions { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--cream); border-top: 1px solid var(--line); } .cd-status { flex: 1; font-size: 12px; color: var(--muted); } .cd-status.ok { color: var(--good); font-weight: 600; } .cd-status.error { color: var(--bad); } .cd-status a { color: inherit; } .cd-sig-hint { font-size: 11px; color: var(--gold-dark); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .cd-sig-hint::before { content: "✓"; font-weight: 800; } /* Tool-call transparency lines (Shortwave-style) */ .nexa-tool-event { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); padding: 4px 10px; align-self: flex-start; } .nexa-tool-event svg { width: 12px; height: 12px; fill: var(--good); flex-shrink: 0; } .nexa-tool-event strong { color: var(--navy-soft); font-weight: 600; } /* "Nexa is thinking..." dots */ .nexa-thinking { color: var(--muted); font-style: italic; } .nexa-thinking .dot { display: inline-block; opacity: 0; animation: dotPulse 1.4s infinite; } .nexa-thinking .dot:nth-child(1) { animation-delay: 0s; } .nexa-thinking .dot:nth-child(2) { animation-delay: .25s; } .nexa-thinking .dot:nth-child(3) { animation-delay: .5s; } @keyframes dotPulse { 0%, 60%, 100% { opacity: 0; } 30% { opacity: 1; } } /* Per-message action row under assistant bubbles */ .nexa-msg-actions { display: flex; gap: 2px; margin-top: 4px; margin-left: 6px; opacity: 0; transition: opacity .15s; } .nexa-msg-wrap.assistant:hover .nexa-msg-actions { opacity: 1; } .nexa-msg-act { background: transparent; border: none; width: 26px; height: 26px; border-radius: 6px; display: inline-grid; place-items: center; cursor: pointer; color: var(--muted); transition: background .12s, color .12s; padding: 0; } .nexa-msg-act:hover { background: var(--cream-dark); color: var(--navy); } .nexa-msg-act svg { width: 14px; height: 14px; fill: currentColor; } /* ---- Markdown content inside Nexa messages ---- */ .md-content { display: block; } .md-content > *:first-child { margin-top: 0; } .md-content > *:last-child { margin-bottom: 0; } .md-content p { margin: 0 0 8px; } .md-content .md-h { margin: 14px 0 6px; font-size: 15px; font-weight: 700; letter-spacing: .1px; color: var(--navy); } .md-content h3.md-h { font-size: 14px; } .md-content h4.md-h { font-size: 13px; color: var(--gold-dark); text-transform: uppercase; letter-spacing: .6px; } .md-content strong { font-weight: 700; color: var(--navy); } .md-content em { font-style: italic; } .md-content .md-list { margin: 4px 0 10px; padding-left: 20px; } .md-content .md-list li { margin: 3px 0; } .md-content ol.md-list li { padding-left: 4px; } .md-content .md-code { background: rgba(40, 47, 57, .07); padding: 1px 5px; border-radius: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--gold-dark); } .md-content .md-pre { background: rgba(40, 47, 57, .06); padding: 10px 12px; border-radius: 8px; font-size: 12.5px; overflow-x: auto; margin: 6px 0; } .md-content .md-pre code { background: none; color: var(--navy); padding: 0; } .md-content .md-bq { border-left: 3px solid var(--gold); padding-left: 10px; margin: 6px 0; color: var(--navy-soft); font-style: italic; } .md-content a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 2px; } .md-content a:hover { color: var(--red-dark); } /* Tables — Phase 5.AZ. Categorized, easy to scan. */ .md-content .md-table { border-collapse: collapse; margin: 10px 0 14px; width: 100%; font-size: 12.5px; background: var(--paper); border-radius: 8px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(40, 47, 57, .04); } .md-content .md-table thead { background: var(--cream); border-bottom: 2px solid var(--gold); } .md-content .md-table th { text-align: left; padding: 8px 10px; font-weight: 700; color: var(--navy); font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; } .md-content .md-table td { padding: 7px 10px; border-top: 1px solid var(--line); color: var(--navy); vertical-align: top; line-height: 1.45; } .md-content .md-table tbody tr:nth-child(even) td { background: rgba(247, 243, 233, .55); /* zebra-stripe in cream */ } .md-content .md-table tbody tr:hover td { background: rgba(178, 142, 68, .08); } .md-content .md-table td strong { color: var(--navy); font-weight: 600; } /* Right-align cells that look numeric (digits, %, currency, decimals). */ .md-content .md-table td:not(:first-child) { font-variant-numeric: tabular-nums; } /* Email reference — inline citation to a real message */ .md-content .md-email-ref { display: inline-flex; align-items: baseline; gap: 4px; background: rgba(178, 142, 68, .12); color: var(--gold-dark); padding: 1px 8px; border-radius: 4px; text-decoration: none; border: 1px solid rgba(178, 142, 68, .25); font-weight: 500; } .md-content .md-email-ref:hover { background: rgba(178, 142, 68, .22); color: var(--navy); cursor: pointer; } .md-content .md-email-ref::before { content: "✉"; font-size: 10px; opacity: .7; } /* Mail row flash when opened from a Nexa email-ref click */ .mail-row.just-opened { animation: rowFlash 1.4s ease; } @keyframes rowFlash { 0% { background: rgba(178, 142, 68, .35); } 100% { background: transparent; } } .nexa-foot { padding: 12px 14px 14px; border-top: 1px solid var(--line); background: var(--paper); flex-shrink: 0; position: relative; } .nexa-foot .nexa-input-wrap { margin: 0; } .nexa-foot .nexa-input { min-height: 24px; } .nexa-foot textarea { rows: 1; } .nexa-input-actions-right { display: flex; align-items: center; gap: 8px; } /* Model picker pill — bottom-right of input */ .nexa-model-picker { display: inline-flex; align-items: center; gap: 2px; background: transparent; border: 1px solid var(--line); color: var(--navy-soft); border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 11.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color .12s, color .12s; } .nexa-model-picker:hover { border-color: var(--gold); color: var(--navy); } .nexa-model-picker svg { width: 12px; height: 12px; fill: currentColor; } /* Model picker popover */ .nexa-model-popover { position: absolute; bottom: 60px; right: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 4px; box-shadow: 0 8px 24px rgba(40, 47, 57, .14); z-index: 200; min-width: 220px; } .dmp-opt { width: 100%; text-align: left; background: transparent; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; display: block; font-family: inherit; } .dmp-opt:hover { background: var(--cream); } .dmp-opt strong { display: block; font-size: 13px; color: var(--navy); margin-bottom: 2px; } .dmp-opt span { display: block; font-size: 11.5px; color: var(--muted); } /* Saved prompts popover */ .nexa-prompts-popover { position: absolute; bottom: 60px; left: 14px; width: calc(100% - 28px); max-height: 320px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(40, 47, 57, .15); z-index: 200; display: flex; flex-direction: column; overflow: hidden; } .nexa-prompts-popover[hidden] { display: none; } .dpp-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--cream); font-size: 12px; font-weight: 600; color: var(--navy-soft); text-transform: uppercase; letter-spacing: .5px; } .dpp-add { background: transparent; border: 1px solid var(--gold); color: var(--gold-dark); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; cursor: pointer; text-transform: none; letter-spacing: 0; font-family: inherit; } .dpp-add:hover { background: var(--gold); color: white; } .dpp-list { overflow-y: auto; flex: 1; padding: 4px; } .dpp-empty { padding: 18px 14px; font-size: 12.5px; color: var(--muted); text-align: center; } .dpp-item { display: flex; align-items: stretch; border-radius: 8px; } .dpp-item:hover { background: var(--cream); } .dpp-use { flex: 1; background: transparent; border: none; text-align: left; padding: 10px 14px; cursor: pointer; font-family: inherit; } .dpp-title { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 2px; } .dpp-body { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dpp-del { background: transparent; border: none; color: var(--muted); font-size: 18px; line-height: 1; width: 32px; cursor: pointer; } .dpp-del:hover { color: var(--bad); } /* ============================================================ GUIDED INBOX-ORGANIZE ROUTINE WIZARD (start_inbox_routine) One step at a time. Brand: cream + gold + navy. ============================================================ */ .routine-wizard { align-self: stretch; max-width: 100%; margin: 8px 0; } .rw-step { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(40, 47, 57, .08); display: flex; flex-direction: column; } .rw-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--cream); border-bottom: 1px solid var(--line); } .rw-step-meta { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .rw-step-num { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--gold-dark); } .rw-progress { width: 100%; height: 3px; background: var(--cream-dark); border-radius: 999px; overflow: hidden; } .rw-progress-fill { height: 100%; background: var(--gold); transition: width .35s ease; border-radius: 999px; } .rw-close { background: transparent; border: none; color: var(--muted); font-size: 20px; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; line-height: 1; flex-shrink: 0; margin-left: 10px; } .rw-close:hover { background: var(--paper); color: var(--navy); } .rw-title { padding: 14px 14px 4px; font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.3; } .rw-desc { padding: 0 14px 8px; font-size: 12px; color: var(--muted); line-height: 1.5; } .rw-count { padding: 4px 14px 8px; font-size: 11px; color: var(--gold-dark); font-weight: 600; } .rw-list { /* inherits .cb-list rules but tighter for the wizard */ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .rw-actions { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--cream); } .rw-skip { background: transparent; border: none; color: var(--navy-soft); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 7px 12px; border-radius: 6px; } .rw-skip:hover:not(:disabled) { background: var(--paper); color: var(--navy); } .rw-action-group { display: flex; gap: 6px; flex: 1; justify-content: flex-end; } .rw-primary { background: var(--red); color: white; border: none; font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 16px; border-radius: 999px; cursor: pointer; box-shadow: 0 2px 6px rgba(233, 42, 46, .22); transition: background .12s; } .rw-primary:hover:not(:disabled) { background: var(--red-dark); } .rw-primary:disabled, .rw-skip:disabled, .cb-alt-btn:disabled { opacity: .5; cursor: not-allowed; } .rw-status { font-size: 11.5px; color: var(--muted); margin-left: 8px; flex-shrink: 0; } .rw-status.ok { color: var(--good); font-weight: 600; } .rw-status.error { color: var(--bad); } /* Final summary card after the last step (or early stop). */ .rw-summary { background: var(--paper); border: 1px solid var(--gold); border-left: 4px solid var(--gold); border-radius: 12px; padding: 16px 18px; box-shadow: 0 4px 14px rgba(178, 142, 68, .14); } .rw-summary-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 10px; } .rw-summary-head svg { width: 18px; height: 18px; fill: var(--good); } .rw-summary-list { margin: 0 0 12px; padding-left: 20px; font-size: 12.5px; color: var(--navy-soft); line-height: 1.7; } .rw-summary-list li strong { color: var(--navy); } .rw-summary-empty { font-size: 12.5px; color: var(--muted); font-style: italic; margin-bottom: 12px; } .rw-summary-actions { display: flex; gap: 8px; } .rw-summary-btn { background: var(--navy); color: white; text-decoration: none; font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; } .rw-summary-btn:hover { opacity: .9; } .rw-summary-btn.primary { background: var(--red); box-shadow: 0 2px 6px rgba(233, 42, 46, .22); } /* The 'Organize my inbox' chip — highlighted as the recommended first choice. */ .nexa-chip.primary { background: var(--navy); color: white; border-color: var(--navy); box-shadow: 0 2px 8px rgba(40, 47, 57, .14); } .nexa-chip.primary:hover { background: var(--navy); color: white; border-color: var(--red); box-shadow: 0 4px 12px rgba(233, 42, 46, .18); } /* Inline 'Nexa remembered' card — appears when Nexa proactively saves a memory. Gives the user one-click Undo + a link to manage in Settings. Cream + gold styling per brand. Smaller / quieter than the task card since it's lower-stakes ambient feedback. */ .memory-saved-card { background: var(--cream); border: 1px solid var(--gold); border-left: 3px solid var(--gold); border-radius: 10px; padding: 10px 12px; margin: 6px 0; align-self: stretch; max-width: 100%; font-size: 12.5px; color: var(--navy); transition: opacity .4s; } .memory-saved-card.undone { opacity: 0.55; } .ms-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .ms-icon { display: inline-flex; color: var(--gold-dark); } .ms-icon svg { width: 14px; height: 14px; fill: currentColor; } .ms-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--gold-dark); } .ms-source { margin-left: auto; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); background: var(--paper); padding: 1px 6px; border-radius: 999px; } .ms-subject { font-weight: 600; color: var(--navy); margin-bottom: 3px; } .ms-category { font-weight: 500; color: var(--muted); font-size: 11px; } .ms-fact { color: var(--navy-soft); margin-bottom: 8px; line-height: 1.4; } .ms-actions { display: flex; align-items: center; gap: 10px; font-size: 11.5px; } .ms-undo { background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 3px 10px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 11.5px; transition: color .12s, border-color .12s; } .ms-undo:hover:not(:disabled) { color: var(--bad); border-color: var(--bad); } .ms-undo:disabled { opacity: .5; cursor: not-allowed; } .ms-edit { color: var(--gold-dark); text-decoration: none; font-size: 11.5px; } .ms-edit:hover { text-decoration: underline; } .ms-status { font-size: 11px; color: var(--muted); margin-left: auto; } .ms-status.ok { color: var(--good); font-weight: 600; } .ms-status.error { color: var(--bad); } /* Inline task-created card in chat (create_task tool result) */ .chat-task-card { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 12px; margin: 6px 0; padding: 12px 14px; align-self: stretch; max-width: 100%; box-shadow: 0 2px 10px rgba(40, 47, 57, .06); } /* ============================================================ CALENDAR EVENT PREVIEW CARD (Shortwave-style) ============================================================ */ .cal-proposal-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; margin: 8px 0; padding: 12px; align-self: stretch; max-width: 100%; box-shadow: 0 2px 10px rgba(40, 47, 57, .06); } .cal-proposal-card .cpc-grid { display: grid; grid-template-columns: 64px 1fr; gap: 12px; } .cpc-date-badge { background: rgba(178,142,68,.10); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 6px; text-align: center; } .cpc-month { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--red); } .cpc-day { font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--navy); } .cpc-weekday { font-size: 10px; font-weight: 600; color: var(--navy-soft); margin-top: 2px; } .cpc-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .cpc-title { font-weight: 700; font-size: 15px; color: var(--navy); margin-bottom: 2px; } .cpc-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--navy-soft); } .cpc-row svg { width: 14px; height: 14px; fill: var(--navy-soft); flex-shrink: 0; } .cpc-row a { color: var(--gold-dark); text-decoration: none; } .cpc-row a:hover { text-decoration: underline; } .cpc-att-list { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .cpc-att { display: flex; align-items: center; gap: 6px; font-size: 12.5px; } .cpc-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: white; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .cpc-email { color: var(--navy); overflow: hidden; text-overflow: ellipsis; } .cpc-ok { background: rgba(79,157,90,.08); color: #2d6a36; font-size: 12px; padding: 5px 10px; border-radius: 6px; align-self: flex-start; } .cpc-warn { font-size: 12px; padding: 5px 10px; border-radius: 6px; align-self: flex-start; } .cpc-warn-conflict { background: rgba(233,42,46,.06); color: var(--red-dark); } .cpc-warn-focus { background: rgba(178,142,68,.10); color: var(--gold-dark); } .cpc-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .cpc-skip { background: none; border: 0; color: var(--navy-soft); cursor: pointer; font-family: inherit; font-size: 13px; padding: 8px 14px; border-radius: 8px; } .cpc-skip:hover:not(:disabled) { background: rgba(40,47,57,.06); color: var(--navy); } .cpc-create { background: var(--red); color: white; border: 0; border-radius: 8px; padding: 8px 18px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; } .cpc-create:hover:not(:disabled) { background: var(--red-dark); } .cpc-create:disabled, .cpc-skip:disabled { opacity: .5; cursor: not-allowed; } .cpc-status { font-size: 12px; color: var(--muted); } .cpc-status.error { color: var(--red-dark); } .cal-proposal-card.cpc-created { opacity: .85; border-left: 3px solid var(--good, #4F9D5A); } .cal-proposal-card.cpc-skipped { opacity: .55; } .ctc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .ctc-title { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .ctc-check { flex-shrink: 0; width: 18px; height: 18px; color: var(--gold-dark); display: inline-flex; align-items: center; justify-content: center; } .ctc-check svg { width: 18px; height: 18px; } .ctc-titletext { font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.3; word-break: break-word; } .ctc-list { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--gold-dark); background: var(--cream); padding: 3px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; } .ctc-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .ctc-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 6px; background: var(--cream); color: var(--muted); } .ctc-flag svg { width: 11px; height: 11px; fill: currentColor; } .ctc-flag.important { background: rgba(233, 42, 46, .10); color: var(--red); } .ctc-flag.myday { background: rgba(178, 142, 68, .14); color: var(--gold-dark); } .ctc-flag.due { background: rgba(40, 47, 57, .08); color: var(--navy); } .ctc-notes { margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.45; white-space: pre-wrap; } .ctc-source { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--gold-dark); text-decoration: none; padding: 4px 0; max-width: 100%; } .ctc-source svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .ctc-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctc-source:hover { text-decoration: underline; } .ctc-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .ctc-open { font-size: 12px; padding: 6px 12px; text-decoration: none; } .ctc-status { font-size: 11.5px; color: var(--muted); } /* ============================================================ SNOOZE POPOVER — quick-pick options + custom datetime modal ============================================================ */ .snooze-popover { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(40, 47, 57, .18); padding: 6px; z-index: 90; min-width: 250px; max-width: 320px; } .snz-head { padding: 8px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 4px; } .snz-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: none; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--navy); text-align: left; gap: 12px; } .snz-opt:hover { background: var(--cream); } .snz-opt-label { font-weight: 500; } .snz-opt-when { font-size: 11.5px; color: var(--muted); } .snz-opt.snz-custom { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; color: var(--gold-dark); font-weight: 600; } .snooze-custom-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; } .snz-custom-backdrop { position: absolute; inset: 0; background: rgba(40, 47, 57, .35); } .snz-custom-card { position: relative; background: var(--paper); border-radius: 14px; box-shadow: 0 22px 50px rgba(40, 47, 57, .25); padding: 18px 22px; width: min(380px, 92vw); } .snz-custom-head { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 12px; } .snz-custom-input { width: 100%; background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-family: inherit; font-size: 14px; color: var(--navy); outline: none; margin-bottom: 14px; } .snz-custom-input:focus { border-color: var(--gold); } .snz-custom-actions { display: flex; justify-content: flex-end; gap: 8px; } /* Red overdue-count badge on the rail's To Do entry. Mirrors the unread badge pattern but red-on-red since these are emphatically urgent. */ .todo-rail-badge { margin-left: auto; background: var(--red); color: white; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; min-width: 18px; text-align: center; flex-shrink: 0; letter-spacing: .2px; } /* ============================================================ MORNING BRIEFING CARD (Phase 5.AD) Delivered as the first card in the chat panel on the first open of the day. Cream + gold + navy. Inline pre-drafted replies. ============================================================ */ .briefing-card { background: var(--paper); border: 1px solid var(--gold); border-left: 4px solid var(--gold); border-radius: 14px; padding: 16px 18px; margin: 8px 0; align-self: stretch; max-width: 100%; box-shadow: 0 6px 20px rgba(178, 142, 68, .14); } .briefing-card.briefing-loading { border-left: 4px solid var(--line); border-color: var(--line); color: var(--muted); font-size: 13px; } .bc-loading-text { padding: 4px 0; font-style: italic; } .bc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .bc-head-text { display: flex; flex-direction: column; } .bc-greeting { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--gold-dark); } .bc-date { font-size: 14px; font-weight: 600; color: var(--navy); margin-top: 2px; } .bc-dismiss { background: transparent; border: none; color: var(--muted); font-size: 20px; cursor: pointer; width: 26px; height: 26px; border-radius: 6px; line-height: 1; } .bc-dismiss:hover { background: var(--cream); color: var(--navy); } .bc-headline { font-size: 14.5px; font-weight: 700; color: var(--navy); line-height: 1.4; margin: 6px 0 10px; } .bc-section { margin-top: 10px; } .bc-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .bc-count { background: var(--gold); color: white; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; } .bc-priorities { margin: 0; padding-left: 20px; color: var(--navy); font-size: 13px; line-height: 1.55; } .bc-priorities li { margin-bottom: 3px; } .bc-priorities li::marker { color: var(--gold-dark); } .bc-inline { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--navy-soft); padding: 4px 0; } .bc-inline-icon { color: var(--gold-dark); flex-shrink: 0; } .bc-inline-icon svg { width: 13px; height: 13px; fill: currentColor; } /* Phase 5.BX / 5.BZ — colour-coded inline briefing blocks. * User feedback: "give the calendar info a light blue background and * the To Do info a light green background so eyes catch them fast." * Same idea as .bc-commitments (red) for promises — each domain gets * a calm tint so it stands out without shouting. */ .bc-section.bc-calendar { background: rgba(126, 154, 224, .12); /* soft sky blue */ border: 1px solid rgba(126, 154, 224, .28); border-radius: 8px; padding: 8px 12px; margin-top: 12px; font-size: 13px; color: #2b3850; line-height: 1.5; } .bc-section.bc-calendar .bc-inline-icon { color: #4a6fc4; } .bc-section.bc-tasks { background: rgba(46, 160, 67, .10); /* soft sage green */ border: 1px solid rgba(46, 160, 67, .28); border-radius: 8px; padding: 8px 12px; margin-top: 12px; font-size: 13px; color: #1e3a26; line-height: 1.5; } .bc-section.bc-tasks .bc-inline-icon { color: #2ea043; } /* Pre-drafted replies stack */ .bc-replies { display: flex; flex-direction: column; gap: 10px; } .bc-reply { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .bc-reply-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; } .bc-reply-num { background: var(--navy); color: white; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .bc-reply-meta { flex: 1; min-width: 0; } .bc-reply-sender { font-size: 12.5px; font-weight: 700; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bc-reply-subject { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bc-reply-why { font-size: 11.5px; color: var(--gold-dark); font-style: italic; margin-bottom: 6px; } .bc-reply-body { width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 13px; color: var(--navy); outline: none; resize: vertical; min-height: 90px; line-height: 1.5; } .bc-reply-body:focus { border-color: var(--gold); } .bc-reply-actions { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bc-btn { background: transparent; border: 1px solid var(--line); color: var(--navy); font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; } .bc-btn:hover { border-color: var(--gold); } .bc-btn:disabled { opacity: .5; cursor: not-allowed; } .bc-btn.bc-save { background: var(--red); color: white; border-color: var(--red); box-shadow: 0 2px 6px rgba(233, 42, 46, .22); } .bc-btn.bc-save:hover:not(:disabled) { background: var(--red-dark); } .bc-reply-status { font-size: 11px; color: var(--muted); margin-left: 6px; } .bc-reply-status.ok { color: var(--good); font-weight: 600; } .bc-reply-status.error { color: var(--bad); } .bc-reply-status a { color: var(--gold-dark); text-decoration: none; font-weight: 600; } .bc-reply-status a:hover { text-decoration: underline; } /* =================================================================== * RULE SUGGESTION CARD — Phase 5.AF. * Appears in chat when the miner finds a high-confidence behavioural * pattern worth confirming. Smaller and softer than the briefing card. * =================================================================== */ .rule-suggestion { margin: 8px 12px; padding: 12px 14px; background: var(--cream-deep, #f3eedf); border-left: 3px solid var(--gold, #b28e44); border-radius: 8px; font-size: 13px; box-shadow: 0 2px 8px rgba(40, 47, 57, 0.06); animation: rs-in .25s ease-out; } @keyframes rs-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .rule-suggestion.rs-fadeout { opacity: 0; transform: translateY(-4px); transition: opacity .35s ease, transform .35s ease; } .rule-suggestion .rs-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .rule-suggestion .rs-head .k-logo { width: 14px; height: 14px; } .rule-suggestion .rs-title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dark, #8a6b2a); font-weight: 700; } .rule-suggestion .rs-prompt { color: var(--navy, #282f39); line-height: 1.45; margin-bottom: 10px; } .rule-suggestion .rs-actions { display: flex; align-items: center; gap: 8px; } .rule-suggestion .rs-btn { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--gold, #b28e44); background: white; color: var(--navy, #282f39); font-size: 12px; cursor: pointer; font-weight: 600; } .rule-suggestion .rs-btn:hover:not(:disabled) { background: var(--gold-soft, rgba(178, 142, 68, .1)); } .rule-suggestion .rs-btn.rs-confirm { background: var(--gold, #b28e44); color: white; box-shadow: 0 2px 6px rgba(178, 142, 68, .25); } .rule-suggestion .rs-btn.rs-confirm:hover:not(:disabled) { background: var(--gold-dark, #8a6b2a); } .rule-suggestion .rs-btn:disabled { opacity: .55; cursor: not-allowed; } .rule-suggestion .rs-status { font-size: 11px; color: var(--muted, #6b6b6b); margin-left: 4px; } .rule-suggestion .rs-status.ok { color: var(--good, #2ea043); font-weight: 600; } .rule-suggestion .rs-status.error { color: var(--bad, #d12d2d); } /* =================================================================== * TTS / Voice Output — Phase 5.AH * =================================================================== */ /* Header auto-play toggle. Same shape as the New chat / close buttons. */ .nexa-tts-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: transparent; color: var(--navy, #282f39); border-radius: 8px; cursor: pointer; padding: 0; margin-right: 2px; opacity: 0.6; transition: opacity .15s ease, background .15s ease, color .15s ease; } .nexa-tts-toggle svg { width: 16px; height: 16px; fill: currentColor; } .nexa-tts-toggle:hover { opacity: 1; background: rgba(178, 142, 68, 0.10); } .nexa-tts-toggle.active { opacity: 1; color: var(--gold-dark, #8a6b2a); background: rgba(178, 142, 68, 0.16); } .nexa-tts-toggle.active:hover { background: rgba(178, 142, 68, 0.24); } /* Per-message Listen button — re-uses .nexa-msg-act styling and adds * a playing-state highlight + a small loading spinner. */ .nexa-msg-act.nexa-listen.playing { background: var(--gold, #b28e44); color: white; } .nexa-msg-act.nexa-listen.playing svg { fill: white; } .nexa-msg-act.nexa-listen.loading { cursor: wait; } .nexa-listen-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: nexa-listen-spin .7s linear infinite; vertical-align: middle; } @keyframes nexa-listen-spin { to { transform: rotate(360deg); } } /* Briefing card — Listen button in the head (next to dismiss ×). */ .briefing-card .bc-head { display: flex; align-items: flex-start; gap: 6px; } .briefing-card .bc-head-text { flex: 1; } .briefing-card .bc-listen { width: 28px; height: 28px; border: none; background: transparent; color: var(--gold-dark, #8a6b2a); border-radius: 6px; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; opacity: .75; transition: opacity .15s ease, background .15s ease; } .briefing-card .bc-listen svg { width: 16px; height: 16px; fill: currentColor; } .briefing-card .bc-listen:hover { opacity: 1; background: rgba(178, 142, 68, 0.12); } .briefing-card .bc-listen.playing { background: var(--gold, #b28e44); color: white; } .briefing-card .bc-listen.playing svg { fill: white; } /* Per-reply listen — slim, same shape as the existing bc-btn pills. */ .briefing-card .bc-btn.bc-reply-listen { padding: 4px 8px; display: inline-flex; align-items: center; gap: 4px; } .briefing-card .bc-btn.bc-reply-listen svg { width: 13px; height: 13px; fill: currentColor; } .briefing-card .bc-btn.bc-reply-listen.playing { background: var(--gold, #b28e44); color: white; border-color: var(--gold, #b28e44); } .briefing-card .bc-btn.bc-reply-listen.playing svg { fill: white; } /* TTS toast — small floating status pill bottom-right. Used when * voice generation starts, succeeds, or fails so silence is never * an acceptable failure mode for an audio feature. */ .nexa-tts-toast { position: fixed; bottom: 20px; right: 20px; z-index: 9999; background: var(--navy, #282f39); color: white; padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; box-shadow: 0 4px 16px rgba(40, 47, 57, 0.25); opacity: 0; pointer-events: none; transition: opacity .25s ease; max-width: 360px; } .nexa-tts-toast.ok { background: #2ea043; } .nexa-tts-toast.error { background: var(--red, #e92a2e); } /* Mic button — recording / transcribing states. */ .nexa-mic[disabled] { opacity: .35; } .nexa-mic:not([disabled]) { opacity: 1; cursor: pointer; } .nexa-mic.recording { background: var(--red, #e92a2e); color: white; border-radius: 8px; animation: nexa-mic-pulse 1.2s ease-in-out infinite; } .nexa-mic.recording svg { fill: white; } @keyframes nexa-mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(233, 42, 46, 0.55); } 50% { box-shadow: 0 0 0 8px rgba(233, 42, 46, 0.0); } } .nexa-mic.transcribing { opacity: 0.6; cursor: wait; } /* Autoplay-pulse — a soft gold glow on the Listen button when * auto-play is on but the browser blocked the programmatic start. * Invites the user to tap. */ .nexa-msg-act.autoplay-pulse, .bc-listen.autoplay-pulse, .bc-reply-listen.autoplay-pulse { animation: nexa-autoplay-pulse 1.4s ease-in-out infinite; color: var(--gold-dark, #8a6b2a) !important; } @keyframes nexa-autoplay-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(178, 142, 68, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(178, 142, 68, 0.0); } } /* Phase 5.AK — folder-badge: small pill on rail items showing counts. * Default = navy chip. Red variant for "needs attention now" (overdue). */ .folder-badge { margin-left: auto; background: rgba(40, 47, 57, 0.10); color: var(--navy-soft, #5a6470); padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; min-width: 20px; text-align: center; } .folder-badge-red { background: var(--red, #e92a2e); color: white; } /* Phase 5.AK — render in the briefing card too if Nexa included * a commitments_summary field. */ .bc-section.bc-commitments { border-left: 3px solid var(--red, #e92a2e); padding-left: 12px; background: rgba(233, 42, 46, 0.04); border-radius: 0 8px 8px 0; margin-top: 10px; } .bc-section.bc-commitments .bc-section-label { color: var(--red, #e92a2e); } /* =================================================================== * Phase 5.AL — Action items card + smart reply chips * =================================================================== */ /* Action items card — top of reader body */ .ai-card { background: var(--cream, #f7f3e9); border: 1px solid var(--line, #e8dfd0); border-left: 4px solid var(--gold-dark, #8a6b2a); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px 0; transition: opacity .24s ease; } .ai-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .ai-card-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--navy, #282f39); text-transform: none; } .ai-card-title .k-logo-inline { width: 16px; height: 16px; } .ai-card-dismiss { background: transparent; border: 0; font-size: 18px; line-height: 1; color: var(--navy-soft, #5a6470); cursor: pointer; padding: 2px 8px; border-radius: 6px; } .ai-card-dismiss:hover { background: rgba(40,47,57,0.08); color: var(--navy, #282f39); } .ai-card-list { list-style: none; padding: 0; margin: 0; } .ai-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; border-top: 1px solid rgba(232, 223, 208, 0.7); gap: 12px; } .ai-item:first-child { border-top: 0; } .ai-item-text { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .ai-item-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-dark, #8a6b2a); flex-shrink: 0; } .ai-item-high .ai-item-bullet { background: var(--red, #e92a2e); } .ai-item-medium .ai-item-bullet { background: var(--gold, #b28e44); } .ai-item-low .ai-item-bullet { background: var(--navy-soft, #5a6470); } .ai-item-label { font-size: 14px; color: var(--navy, #282f39); font-weight: 500; } .ai-item-due { font-size: 12px; color: var(--navy-soft, #5a6470); font-style: italic; margin-left: 6px; } .ai-item-high .ai-item-due { color: var(--red, #e92a2e); font-weight: 600; } .ai-item-add { background: var(--paper, #fff); border: 1px solid var(--line, #e8dfd0); border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--navy, #282f39); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; transition: background .12s ease, border-color .12s ease, color .12s ease; } .ai-item-add svg { width: 12px; height: 12px; fill: currentColor; } .ai-item-add:hover { background: var(--gold, #b28e44); border-color: var(--gold, #b28e44); color: white; } .ai-item-add.ai-item-added { background: #2ea043; border-color: #2ea043; color: white; pointer-events: none; } .ai-spinner { display: inline-block; width: 11px; height: 11px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: ai-spin .7s linear infinite; vertical-align: middle; } @keyframes ai-spin { to { transform: rotate(360deg); } } /* Phase 5.CB — action-item row layout + Reply picker. */ .ai-item-row { display: flex; align-items: center; gap: 10px; } .ai-item-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .ai-item-reply { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--gold-dark); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; transition: background .12s, border-color .12s, color .12s; } .ai-item-reply svg { width: 12px; height: 12px; fill: currentColor; } .ai-item-reply:hover { background: rgba(178,142,68,.18); border-color: rgba(178,142,68,.45); color: var(--navy); } .ai-item-picker { margin-top: 10px; padding: 10px 12px; background: rgba(178,142,68,.06); border: 1px solid rgba(178,142,68,.18); border-radius: 10px; animation: ai-picker-in .18s ease-out; } .ai-item-picker[hidden] { display: none !important; } @keyframes ai-picker-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .ai-picker-label { font-size: 11.5px; color: var(--navy-soft); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; } .ai-picker-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .ai-picker-opt { display: flex; align-items: center; gap: 8px; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--navy); cursor: pointer; transition: background .12s, border-color .12s; } .ai-picker-opt:hover { background: var(--cream); border-color: rgba(178,142,68,.45); } .ai-picker-opt-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(178,142,68,.16); color: var(--gold-dark); display: inline-grid; place-items: center; font-weight: 600; font-size: 13px; } .ai-picker-opt.ai-picker-opt-other { grid-column: 1 / -1; border-style: dashed; justify-content: flex-start; } .ai-picker-custom { display: flex; gap: 6px; margin-top: 10px; } .ai-picker-custom[hidden] { display: none !important; } .ai-picker-custom-input { flex: 1; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; outline: none; } .ai-picker-custom-input:focus { border-color: var(--gold); } .ai-picker-custom-go { background: var(--red); border: 1px solid var(--red); color: white; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } .ai-picker-custom-go:hover { background: #c41d20; } /* Smart reply chips — between reader head and the main action row */ .smart-reply-chips { display: flex; align-items: center; gap: 8px; padding: 10px 0 6px; margin: 0 0 4px; flex-wrap: wrap; } .src-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--navy-soft, #5a6470); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .src-label .k-logo-inline { width: 14px; height: 14px; } .src-chip { background: var(--paper, #fff); border: 1px solid var(--line, #e8dfd0); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--navy, #282f39); cursor: pointer; transition: all .15s ease; white-space: nowrap; } .src-chip:hover { background: var(--gold, #b28e44); border-color: var(--gold, #b28e44); color: white; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(178, 142, 68, 0.20); } .src-chip-commit:hover { background: #2ea043; border-color: #2ea043; } .src-chip-clarify:hover { background: var(--gold, #b28e44); border-color: var(--gold, #b28e44); } .src-chip-delegate:hover { background: var(--navy, #282f39); border-color: var(--navy, #282f39); } /* =================================================================== * Phase 5.AO — Sources Nexa consulted (grounding panel) * Slim FOOTER strip at the bottom of the draft composer frame. * Small font, low contrast — visible without competing with the * email body content above. * =================================================================== */ .draft-grounding { margin: 6px 0 0 0; background: transparent; border-top: 1px solid var(--line, #e8dfd0); border-radius: 0; font-size: 11px; color: var(--navy-soft, #5a6470); } .draft-grounding.empty { padding: 6px 14px; background: transparent; color: var(--navy-soft, #5a6470); font-size: 11px; font-style: italic; opacity: 0.85; } .draft-grounding.empty .dg-mini { display: inline-flex; align-items: center; gap: 6px; } .draft-grounding.empty .k-logo-inline { width: 11px; height: 11px; opacity: 0.7; } .draft-grounding summary { list-style: none; cursor: pointer; padding: 6px 14px; display: flex; align-items: center; gap: 8px; user-select: none; border-radius: 0; font-size: 11px; } .draft-grounding summary::-webkit-details-marker { display: none; } .draft-grounding summary::before { content: "▸"; display: inline-block; width: 10px; font-size: 10px; color: var(--navy-soft, #5a6470); transition: transform .15s ease; } .draft-grounding[open] summary::before { transform: rotate(90deg); } .draft-grounding summary:hover { background: rgba(178, 142, 68, 0.06); } .dg-summary .k-logo-inline { width: 11px; height: 11px; opacity: 0.85; } .dg-summary strong { font-weight: 600; color: var(--navy, #282f39); } .dg-counts { color: var(--navy-soft, #5a6470); margin-left: auto; font-weight: 400; font-size: 10.5px; } .dg-body { padding: 4px 14px 10px; font-size: 11px; } .dg-section-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy-soft, #5a6470); margin: 8px 0 3px; font-weight: 600; opacity: 0.85; } .dg-list { list-style: none; padding: 0; margin: 0; } .dg-source { padding: 4px 0; border-bottom: 1px dashed rgba(232, 223, 208, 0.6); } .dg-source:last-child { border-bottom: 0; } .dg-open-link { background: transparent; border: 0; padding: 0; margin: 0; text-align: left; display: grid; grid-template-columns: 80px 1fr 2fr; gap: 10px; width: 100%; cursor: pointer; color: var(--navy, #282f39); font-size: 11px; align-items: baseline; } .dg-open-link:hover .dg-subject { color: var(--gold-dark, #8a6b2a); text-decoration: underline; } .dg-meta { color: var(--navy-soft, #5a6470); font-size: 10.5px; white-space: nowrap; } .dg-from { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dg-subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--navy-soft, #5a6470); } .dg-attachment { display: flex; align-items: center; gap: 6px; font-size: 11px; } .dg-att-icon { color: var(--navy-soft, #5a6470); } .dg-filename { font-weight: 500; } .dg-att-meta { color: var(--navy-soft, #5a6470); font-size: 10.5px; margin-left: auto; } .dg-foot { margin-top: 8px; padding-top: 6px; border-top: 1px dashed rgba(232, 223, 208, 0.6); color: var(--navy-soft, #5a6470); font-size: 10.5px; font-style: italic; line-height: 1.4; opacity: 0.9; } /* =================================================================== * Phase 5.AP — Recipient autocomplete + @mention menu * =================================================================== */ .rcpt-suggest, .mention-menu { position: absolute; background: var(--paper, #fff); border: 1px solid var(--line, #e8dfd0); border-radius: 8px; box-shadow: 0 8px 24px rgba(40, 47, 57, 0.14); max-height: 320px; overflow-y: auto; z-index: 9999; min-width: 260px; } .rcpt-suggest-item, .mention-item { padding: 8px 12px; cursor: pointer; display: flex; align-items: baseline; gap: 10px; font-size: 13px; border-bottom: 1px solid rgba(232, 223, 208, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rcpt-suggest-item:last-child, .mention-item:last-child { border-bottom: 0; } .rcpt-suggest-item.active, .mention-item.active { background: rgba(178, 142, 68, 0.14); } .rcpt-suggest-item:hover, .mention-item:hover { background: rgba(178, 142, 68, 0.08); } .rs-name, .mm-name { font-weight: 600; color: var(--navy, #282f39); } .rs-email, .mm-email { color: var(--navy-soft, #5a6470); font-size: 12px; } .rs-org { color: var(--gold-dark, #8a6b2a); font-size: 11.5px; font-style: italic; margin-left: auto; } .rs-count { color: var(--navy-soft, #5a6470); font-size: 11px; background: rgba(40, 47, 57, 0.08); padding: 1px 6px; border-radius: 999px; margin-left: auto; } /* =================================================================== * Phase 5.AS — Nexa action card (docked in reader) * Used by Summarize / Translate / Ask about this / Add to To Do. * Same red-bordered card style as .draft-composer so every * email-action interaction lives in the middle pane consistently. * =================================================================== */ .nexa-action-card { background: var(--paper, #fff); border: 1px solid var(--red, #e92a2e); border-radius: 14px; margin-bottom: 24px; overflow: hidden; box-shadow: 0 8px 24px rgba(233, 42, 46, .12); display: flex; flex-direction: column; max-height: 720px; } .dac-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line, #e8dfd0); background: var(--cream, #f7f3e9); } .dac-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy, #282f39); font-size: 13.5px; } .dac-title .k-logo { width: 16px; height: 16px; padding: 2px; } .dac-close { background: transparent; border: none; font-size: 22px; line-height: 1; color: var(--navy-soft, #5a6470); cursor: pointer; padding: 2px 10px; border-radius: 6px; } .dac-close:hover { background: rgba(40, 47, 57, 0.08); color: var(--navy, #282f39); } .dac-body { padding: 18px 20px; overflow-y: auto; flex: 1; min-height: 80px; font-size: 14.5px; line-height: 1.6; color: var(--navy, #282f39); } .dac-body p { margin: 0 0 10px 0; } .dac-body ul, .dac-body ol { margin: 0 0 10px 0; padding-left: 22px; } .dac-body li { margin: 4px 0; } .dac-body h1, .dac-body h2, .dac-body h3 { font-size: 15px; font-weight: 600; margin: 12px 0 6px; color: var(--navy, #282f39); } .dac-body code { background: var(--cream, #f7f3e9); padding: 1px 6px; border-radius: 4px; font-size: 13px; } .dac-loading { display: flex; align-items: center; gap: 10px; color: var(--navy-soft, #5a6470); font-size: 13.5px; font-style: italic; } .dac-spinner { width: 14px; height: 14px; border: 2px solid var(--gold, #b28e44); border-top-color: transparent; border-radius: 50%; animation: dac-spin .7s linear infinite; } @keyframes dac-spin { to { transform: rotate(360deg); } } .dac-error { color: var(--red, #e92a2e); background: rgba(233, 42, 46, 0.06); padding: 10px 14px; border-radius: 8px; font-size: 13px; } /* Follow-up Q&A on "Ask about this" — input + send button at footer. */ .dac-followup { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line, #e8dfd0); background: var(--cream, #f7f3e9); } .dac-followup-input { flex: 1; border: 1px solid var(--line, #e8dfd0); background: var(--paper, #fff); border-radius: 8px; padding: 8px 12px; font-size: 13.5px; outline: none; color: var(--navy, #282f39); } .dac-followup-input:focus { border-color: var(--gold, #b28e44); } .dac-followup-send { background: var(--red, #e92a2e); color: white; border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .dac-followup-send svg { width: 12px; height: 12px; fill: currentColor; } .dac-followup-send:disabled { opacity: 0.5; cursor: not-allowed; } /* Conversation turns (only when follow-ups happen). */ .dac-message { padding: 10px 14px; margin: 6px 0; border-radius: 10px; font-size: 13.5px; line-height: 1.55; } .dac-message-user { background: var(--cream, #f7f3e9); color: var(--navy, #282f39); border-left: 3px solid var(--navy, #282f39); } .dac-message-assistant { background: transparent; color: var(--navy, #282f39); } /* Footer actions row */ .dac-actions { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line, #e8dfd0); background: var(--paper, #fff); } .dac-actions:empty { display: none; } .dac-action-btn { background: var(--paper, #fff); border: 1px solid var(--line, #e8dfd0); border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--navy, #282f39); cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; } .dac-action-btn:hover { background: var(--cream, #f7f3e9); border-color: var(--gold, #b28e44); color: var(--gold-dark, #8a6b2a); } /* =================================================================== * Phase 5.AT — Translation UX (inbound + outbound) * =================================================================== */ /* Inline translate chip under non-English emails. */ .inline-translate-chip { margin: 16px 0 8px; display: flex; justify-content: flex-start; } .itc-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--cream, #f7f3e9); border: 1px solid var(--line, #e8dfd0); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 500; color: var(--navy, #282f39); cursor: pointer; transition: all .15s ease; } .itc-btn svg { width: 14px; height: 14px; fill: var(--gold-dark, #8a6b2a); } .itc-btn:hover { background: var(--gold, #b28e44); border-color: var(--gold, #b28e44); color: white; } .itc-btn:hover svg { fill: white; } /* Language-mismatch chip in the reply composer. */ .lang-mismatch-chip { display: flex; align-items: center; gap: 10px; margin: 8px 16px 0; padding: 8px 12px; background: rgba(178, 142, 68, 0.08); border: 1px solid var(--gold, #b28e44); border-radius: 8px; font-size: 12.5px; color: var(--navy, #282f39); } .lmc-text { flex: 1; display: flex; align-items: center; gap: 6px; } .lmc-text .k-logo-inline { width: 14px; height: 14px; } .lmc-text strong { color: var(--gold-dark, #8a6b2a); } .lmc-yes { background: var(--gold, #b28e44); color: white; border: none; border-radius: 6px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; } .lmc-yes:hover { background: var(--gold-dark, #8a6b2a); } .lmc-yes:disabled { opacity: 0.6; cursor: wait; } .lmc-no { background: transparent; border: none; color: var(--navy-soft, #5a6470); font-size: 18px; line-height: 1; padding: 2px 8px; border-radius: 6px; cursor: pointer; } .lmc-no:hover { background: rgba(40, 47, 57, 0.08); color: var(--navy, #282f39); } /* ============================================================ * VOICE MODE — Phase 5.BF (OpenAI Realtime WebRTC) * * Overlay covers the Nexa panel during a live call. position:absolute * so it anchors to .nexa-panel (NOT viewport — the panel uses * transform: which would re-anchor position:fixed children to the * panel anyway; cleaner to be explicit). * ============================================================ */ .nexa-voice-overlay { position: absolute; inset: 0; z-index: 10; /* Phase 5.BJ — deep-space backdrop. The starfield is painted by * .nexa-voice-overlay::before below so it can rotate slowly. */ background: radial-gradient(ellipse at center, #0a0d17 0%, #04050a 70%, #020308 100%); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 28px 24px 32px; color: #f0e9d4; overflow: hidden; } /* Phase 5.BJ — full-overlay starfield. Hundreds of tiny dots painted * via stacked radial-gradients (one declaration, many points so the * browser can rasterize it efficiently). Slow rotation gives the * "drifting cosmos" feel without distracting the eye. */ .nexa-voice-overlay::before { content: ""; position: absolute; inset: -10%; pointer-events: none; background: /* Bright "main sequence" stars — larger, fewer */ radial-gradient(circle 1.4px at 8% 12%, rgba(255,255,255,1) 0%, transparent 60%), radial-gradient(circle 1.2px at 24% 6%, rgba(220,230,255,.95) 0%, transparent 60%), radial-gradient(circle 1.6px at 40% 18%, rgba(255,255,255,1) 0%, transparent 60%), radial-gradient(circle 1.3px at 55% 8%, rgba(255,235,200,.95) 0%, transparent 60%), radial-gradient(circle 1.4px at 72% 14%, rgba(255,255,255,1) 0%, transparent 60%), radial-gradient(circle 1.2px at 88% 6%, rgba(210,225,255,.95) 0%, transparent 60%), radial-gradient(circle 1.5px at 4% 28%, rgba(255,255,255,.95) 0%, transparent 60%), radial-gradient(circle 1.3px at 18% 34%, rgba(255,230,210,.9) 0%, transparent 60%), radial-gradient(circle 1.4px at 36% 30%, rgba(255,255,255,1) 0%, transparent 60%), radial-gradient(circle 1.2px at 84% 28%, rgba(220,235,255,.9) 0%, transparent 60%), radial-gradient(circle 1.5px at 96% 40%, rgba(255,255,255,1) 0%, transparent 60%), radial-gradient(circle 1.3px at 8% 50%, rgba(255,240,210,.9) 0%, transparent 60%), radial-gradient(circle 1.4px at 92% 52%, rgba(255,255,255,1) 0%, transparent 60%), radial-gradient(circle 1.3px at 4% 64%, rgba(220,225,255,.9) 0%, transparent 60%), radial-gradient(circle 1.4px at 18% 78%, rgba(255,255,255,1) 0%, transparent 60%), radial-gradient(circle 1.5px at 32% 88%, rgba(255,255,255,1) 0%, transparent 60%), radial-gradient(circle 1.3px at 56% 92%, rgba(255,230,210,.95) 0%, transparent 60%), radial-gradient(circle 1.4px at 74% 82%, rgba(255,255,255,1) 0%, transparent 60%), radial-gradient(circle 1.5px at 88% 92%, rgba(220,230,255,.95) 0%, transparent 60%), /* Mid-distance stars — denser, smaller */ radial-gradient(circle 0.8px at 14% 18%, rgba(255,255,255,.85) 0%, transparent 70%), radial-gradient(circle 0.9px at 28% 22%, rgba(255,220,200,.85) 0%, transparent 70%), radial-gradient(circle 0.8px at 42% 8%, rgba(255,255,255,.85) 0%, transparent 70%), radial-gradient(circle 0.7px at 60% 22%, rgba(200,220,255,.8) 0%, transparent 70%), radial-gradient(circle 0.9px at 78% 8%, rgba(255,255,255,.85) 0%, transparent 70%), radial-gradient(circle 0.8px at 12% 40%, rgba(255,235,210,.8) 0%, transparent 70%), radial-gradient(circle 0.9px at 28% 46%, rgba(255,255,255,.85) 0%, transparent 70%), radial-gradient(circle 0.7px at 48% 42%, rgba(220,210,255,.8) 0%, transparent 70%), radial-gradient(circle 0.8px at 64% 46%, rgba(255,255,255,.85) 0%, transparent 70%), radial-gradient(circle 0.9px at 78% 38%, rgba(255,230,200,.8) 0%, transparent 70%), radial-gradient(circle 0.7px at 6% 58%, rgba(255,255,255,.8) 0%, transparent 70%), radial-gradient(circle 0.9px at 22% 62%, rgba(220,230,255,.85) 0%, transparent 70%), radial-gradient(circle 0.8px at 38% 56%, rgba(255,255,255,.8) 0%, transparent 70%), radial-gradient(circle 0.7px at 88% 64%, rgba(255,220,200,.8) 0%, transparent 70%), radial-gradient(circle 0.9px at 10% 72%, rgba(255,255,255,.85) 0%, transparent 70%), radial-gradient(circle 0.8px at 26% 84%, rgba(220,225,255,.8) 0%, transparent 70%), radial-gradient(circle 0.7px at 48% 80%, rgba(255,235,210,.8) 0%, transparent 70%), radial-gradient(circle 0.9px at 66% 88%, rgba(255,255,255,.85) 0%, transparent 70%), /* Distant pinpricks — many tiny */ radial-gradient(circle 0.5px at 6% 6%, rgba(255,255,255,.7) 0%, transparent 80%), radial-gradient(circle 0.5px at 16% 8%, rgba(255,255,255,.65) 0%, transparent 80%), radial-gradient(circle 0.4px at 22% 16%, rgba(220,225,255,.65) 0%, transparent 80%), radial-gradient(circle 0.5px at 32% 12%, rgba(255,255,255,.7) 0%, transparent 80%), radial-gradient(circle 0.4px at 46% 4%, rgba(255,230,210,.65) 0%, transparent 80%), radial-gradient(circle 0.5px at 50% 16%, rgba(255,255,255,.7) 0%, transparent 80%), radial-gradient(circle 0.4px at 62% 12%, rgba(220,225,255,.6) 0%, transparent 80%), radial-gradient(circle 0.5px at 68% 4%, rgba(255,255,255,.7) 0%, transparent 80%), radial-gradient(circle 0.4px at 76% 18%, rgba(255,255,255,.6) 0%, transparent 80%), radial-gradient(circle 0.5px at 82% 10%, rgba(255,235,210,.65) 0%, transparent 80%), radial-gradient(circle 0.4px at 92% 24%, rgba(255,255,255,.65) 0%, transparent 80%), radial-gradient(circle 0.5px at 2% 22%, rgba(255,255,255,.7) 0%, transparent 80%), radial-gradient(circle 0.4px at 12% 28%, rgba(220,225,255,.6) 0%, transparent 80%), radial-gradient(circle 0.5px at 32% 36%, rgba(255,255,255,.65) 0%, transparent 80%), radial-gradient(circle 0.4px at 44% 22%, rgba(255,230,210,.6) 0%, transparent 80%), radial-gradient(circle 0.5px at 56% 30%, rgba(255,255,255,.7) 0%, transparent 80%), radial-gradient(circle 0.4px at 70% 24%, rgba(220,210,255,.6) 0%, transparent 80%), radial-gradient(circle 0.5px at 82% 32%, rgba(255,255,255,.7) 0%, transparent 80%), radial-gradient(circle 0.4px at 6% 36%, rgba(255,235,210,.6) 0%, transparent 80%), radial-gradient(circle 0.5px at 18% 50%, rgba(255,255,255,.65) 0%, transparent 80%), radial-gradient(circle 0.4px at 32% 52%, rgba(220,225,255,.6) 0%, transparent 80%), radial-gradient(circle 0.5px at 44% 60%, rgba(255,255,255,.7) 0%, transparent 80%), radial-gradient(circle 0.4px at 58% 54%, rgba(255,230,210,.6) 0%, transparent 80%), radial-gradient(circle 0.5px at 72% 58%, rgba(255,255,255,.65) 0%, transparent 80%), radial-gradient(circle 0.4px at 86% 50%, rgba(220,225,255,.6) 0%, transparent 80%), radial-gradient(circle 0.5px at 94% 60%, rgba(255,255,255,.7) 0%, transparent 80%), radial-gradient(circle 0.4px at 2% 70%, rgba(255,235,210,.6) 0%, transparent 80%), radial-gradient(circle 0.5px at 14% 76%, rgba(255,255,255,.65) 0%, transparent 80%), radial-gradient(circle 0.4px at 28% 70%, rgba(220,225,255,.6) 0%, transparent 80%), radial-gradient(circle 0.5px at 40% 78%, rgba(255,255,255,.7) 0%, transparent 80%), radial-gradient(circle 0.4px at 54% 70%, rgba(255,230,210,.6) 0%, transparent 80%), radial-gradient(circle 0.5px at 68% 76%, rgba(255,255,255,.65) 0%, transparent 80%), radial-gradient(circle 0.4px at 80% 70%, rgba(220,225,255,.6) 0%, transparent 80%), radial-gradient(circle 0.5px at 90% 80%, rgba(255,255,255,.7) 0%, transparent 80%), radial-gradient(circle 0.4px at 4% 86%, rgba(255,235,210,.6) 0%, transparent 80%), radial-gradient(circle 0.5px at 22% 96%, rgba(255,255,255,.65) 0%, transparent 80%), radial-gradient(circle 0.4px at 38% 92%, rgba(220,225,255,.6) 0%, transparent 80%), radial-gradient(circle 0.5px at 62% 96%, rgba(255,255,255,.7) 0%, transparent 80%), radial-gradient(circle 0.4px at 82% 96%, rgba(255,230,210,.6) 0%, transparent 80%); animation: dvo-overlay-drift 180s linear infinite, dvo-overlay-twinkle 6s ease-in-out infinite; } @keyframes dvo-overlay-drift { to { transform: rotate(360deg); } } @keyframes dvo-overlay-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .75; } } .nexa-voice-overlay[hidden] { display: none !important; } .dvo-status { align-self: flex-start; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgba(240, 233, 212, .85); letter-spacing: .2px; z-index: 2; } .dvo-status-dot { display: none; /* Apple-style: word alone, no dot */ } @keyframes dvo-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .55; } } .dvo-close { position: absolute; top: 22px; right: 22px; width: 30px; height: 30px; background: transparent; border: none; color: rgba(240, 233, 212, .55); border-radius: 50%; font-size: 22px; cursor: pointer; display: inline-grid; place-items: center; transition: background .12s, color .12s; z-index: 2; } .dvo-close:hover { background: rgba(255,255,255,.08); color: #fff; } .dvo-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; flex: 1; width: 100%; position: relative; } /* ---------- ANIMATED ORB (Siri-style, Phase 5.BG) ---------- * Layout (back → front): * • dvo-orb-aurora large soft halo (pink / peach / cyan / purple) * • dvo-orb-aurora-2 counter-rotating second halo, slightly tighter * • dvo-orb-ripple ×2 subtle expanding rings (kept faint) * • dvo-orb-particles white "stars" that drift around the orb * • dvo-orb-core dark navy sphere with red-pink reflection * • dvo-orb-highlight white specular dot on top-left of sphere * The aurora EXTENDS beyond the orb's bounding box, so overflow:visible * on .dvo-orb is essential. */ .dvo-orb { position: relative; width: 220px; height: 220px; overflow: visible; z-index: 1; } .dvo-stage { z-index: 1; } .dvo-orb-aurora, .dvo-orb-aurora-2, .dvo-orb-ripple, .dvo-orb-ripple-2, .dvo-orb-particles, .dvo-orb-core, .dvo-orb-highlight { position: absolute; inset: 0; border-radius: 50%; } /* Big amber/orange halo — the nebula glow. */ .dvo-orb-aurora { inset: -100px; background: radial-gradient(circle at center, rgba(255, 175, 90, .55) 0%, rgba(255, 135, 60, .35) 25%, rgba(220, 90, 50, .20) 50%, transparent 75%); filter: blur(36px); animation: dvo-aurora 24s ease-in-out infinite; mix-blend-mode: screen; } .dvo-orb-aurora-2 { inset: -70px; background: radial-gradient(circle at 45% 55%, rgba(255, 220, 140, .35) 0%, rgba(255, 160, 80, .25) 35%, transparent 70%); filter: blur(28px); animation: dvo-aurora 18s ease-in-out 4s infinite reverse; mix-blend-mode: screen; } @keyframes dvo-aurora { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } } /* Ripples — kept faint so they don't muddy the aurora. */ .dvo-orb-ripple { border: 1px solid rgba(255, 178, 200, .25); opacity: 0; animation: dvo-ripple 4.5s ease-out infinite; } .dvo-orb-ripple-2 { border: 1px solid rgba(170, 195, 240, .20); opacity: 0; animation: dvo-ripple 4.5s ease-out 2.2s infinite; } @keyframes dvo-ripple { 0% { transform: scale(0.92); opacity: 0; } 25% { opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } } /* White star particles scattered around the orb. */ .dvo-orb-particles { inset: -40px; background: radial-gradient(circle 2px at 18% 30%, rgba(255,255,255,1) 0%, transparent 50%), radial-gradient(circle 1.5px at 82% 22%, rgba(255,255,255,.95) 0%, transparent 50%), radial-gradient(circle 2px at 12% 78%, rgba(255,255,255,.9) 0%, transparent 50%), radial-gradient(circle 1px at 88% 72%, rgba(255,255,255,.85) 0%, transparent 50%), radial-gradient(circle 1.5px at 50% 8%, rgba(255,255,255,.9) 0%, transparent 50%), radial-gradient(circle 1px at 6% 50%, rgba(255,255,255,.8) 0%, transparent 50%), radial-gradient(circle 1.5px at 94% 50%, rgba(255,255,255,.85) 0%, transparent 50%); animation: dvo-spin 38s linear infinite; } @keyframes dvo-spin { to { transform: rotate(360deg); } } /* The luminous nebula core — bright cyan-white center, fading to a * warm amber edge that blends into the outer aurora. */ .dvo-orb-core { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(220, 245, 255, .95) 10%, rgba(170, 220, 245, .85) 24%, rgba(120, 180, 230, .65) 42%, rgba(220, 140, 80, .55) 65%, rgba(180, 80, 50, .40) 82%, rgba(120, 40, 30, .25) 100%); box-shadow: /* Outer warm bloom */ 0 0 60px 10px rgba(255, 150, 80, .35), 0 0 120px 30px rgba(255, 110, 60, .22), /* Inner cool glow */ 0 0 40px rgba(170, 220, 255, .55); animation: dvo-breathe 4s ease-in-out infinite; overflow: hidden; /* clip wisps to the sphere */ isolation: isolate; } @keyframes dvo-breathe { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.06); filter: brightness(1.15); } } /* Phase 5.BJ — SWIRLING WISPS inside the bright core. * Three layers of thin elliptical rings rotating at different tilts + * speeds simulate the curved tendrils in a neutron-star / pulsar * nebula. Each ring has a thin white border, partially transparent. */ .dvo-orb-core::before, .dvo-orb-core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; } /* Layer 1 — wide horizontal tendril (an ellipse seen edge-on). */ .dvo-orb-core::before { inset: 8% -20%; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 50%; box-shadow: inset 0 0 18px rgba(255, 255, 255, .35), 0 0 12px rgba(255, 220, 200, .25); transform: rotate(20deg); animation: dvo-wisp-1 9s linear infinite; } @keyframes dvo-wisp-1 { 0% { transform: rotate(0deg) scaleY(.28); opacity: .85; } 25% { transform: rotate(90deg) scaleY(.18); opacity: 1; } 50% { transform: rotate(180deg) scaleY(.32); opacity: .85; } 75% { transform: rotate(270deg) scaleY(.20); opacity: 1; } 100% { transform: rotate(360deg) scaleY(.28); opacity: .85; } } /* Layer 2 — second tendril, tilted differently, rotating opposite. */ .dvo-orb-core::after { inset: 15% -10%; border: 1.2px solid rgba(220, 245, 255, .50); border-radius: 50%; box-shadow: inset 0 0 14px rgba(200, 230, 255, .30); transform: rotate(-30deg); animation: dvo-wisp-2 11s linear infinite reverse; } @keyframes dvo-wisp-2 { 0% { transform: rotate(15deg) scaleY(.22); opacity: .8; } 50% { transform: rotate(195deg) scaleY(.36); opacity: 1; } 100% { transform: rotate(375deg) scaleY(.22); opacity: .8; } } /* Layer 3 — .dvo-orb-galaxy gets a third tendril + embedded sparkles. */ .dvo-orb-galaxy { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; } .dvo-orb-galaxy::before { content: ""; position: absolute; inset: 22% -5%; border: 1px solid rgba(255, 240, 220, .45); border-radius: 50%; box-shadow: inset 0 0 10px rgba(255, 220, 180, .25); animation: dvo-wisp-3 13s linear infinite; } @keyframes dvo-wisp-3 { 0% { transform: rotate(60deg) scaleY(.18); } 50% { transform: rotate(240deg) scaleY(.30); } 100% { transform: rotate(420deg) scaleY(.18); } } .dvo-orb-galaxy::after { content: ""; position: absolute; inset: 0; border-radius: 50%; /* Bright bursts inside the core */ background: radial-gradient(circle 2.5px at 50% 50%, rgba(255,255,255,1) 0%, transparent 50%), radial-gradient(circle 1.5px at 38% 44%, rgba(255,255,255,.9) 0%, transparent 60%), radial-gradient(circle 1.3px at 62% 56%, rgba(255,255,255,.85) 0%, transparent 60%), radial-gradient(circle 1px at 30% 60%, rgba(255,230,200,.8) 0%, transparent 65%), radial-gradient(circle 1.2px at 70% 40%, rgba(200,225,255,.85) 0%, transparent 65%), radial-gradient(circle 0.9px at 55% 36%, rgba(255,255,255,.8) 0%, transparent 65%), radial-gradient(circle 0.9px at 45% 64%, rgba(255,255,255,.8) 0%, transparent 65%), radial-gradient(circle 0.8px at 26% 50%, rgba(255,210,180,.75) 0%, transparent 70%), radial-gradient(circle 0.8px at 74% 50%, rgba(220,235,255,.75) 0%, transparent 70%); animation: dvo-core-sparkle 2.6s ease-in-out infinite; } @keyframes dvo-core-sparkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .65; transform: scale(1.04); } } /* Voice-state speed-ups — when speaking or listening, every layer * spins faster + the core pulses harder. */ .nexa-voice-overlay.state-listening .dvo-orb-core::before { animation-duration: 5s; } .nexa-voice-overlay.state-listening .dvo-orb-core::after { animation-duration: 6s; } .nexa-voice-overlay.state-listening .dvo-orb-galaxy::before { animation-duration: 7s; } .nexa-voice-overlay.state-listening .dvo-orb-galaxy::after { animation-duration: 1.4s; } .nexa-voice-overlay.state-speaking .dvo-orb-core::before { animation-duration: 4s; } .nexa-voice-overlay.state-speaking .dvo-orb-core::after { animation-duration: 5s; } .nexa-voice-overlay.state-speaking .dvo-orb-galaxy::before { animation-duration: 6s; } .nexa-voice-overlay.state-speaking .dvo-orb-galaxy::after { animation-duration: 1s; } /* Specular flare — kept subtle since the core is already luminous. */ .dvo-orb-highlight { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .08) 18%, transparent 40%); mix-blend-mode: screen; pointer-events: none; animation: dvo-flare 3s ease-in-out infinite; } @keyframes dvo-flare { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } /* React to mic input — speed up the breathing while listening. */ .nexa-voice-overlay.state-listening .dvo-orb-core { animation-duration: 2s; } .nexa-voice-overlay.state-speaking .dvo-orb-aurora { animation-duration: 9s; } .nexa-voice-overlay.state-speaking .dvo-orb-aurora-2 { animation-duration: 13s; } .dvo-partial { min-height: 38px; max-width: 88%; text-align: center; font-size: 16px; line-height: 1.45; color: rgba(240, 233, 212, .9); font-weight: 400; text-shadow: 0 1px 12px rgba(0, 0, 0, .8); z-index: 2; } .dvo-end-btn { background: rgba(233, 42, 46, .92); color: white; border: none; padding: 10px 24px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .3px; cursor: pointer; transition: background .12s ease, transform .1s ease; } .dvo-end-btn:hover { background: var(--red); transform: scale(1.04); } .dvo-end-btn:active { transform: scale(0.97); } /* Voice mode button in panel header */ .nexa-voice-mode-btn { background: transparent; border: 1px solid transparent; color: var(--gold-dark); width: 30px; height: 30px; border-radius: 6px; display: inline-grid; place-items: center; cursor: pointer; transition: background .12s ease, color .12s ease; } .nexa-voice-mode-btn:hover { background: rgba(178,142,68,.14); color: var(--navy); } .nexa-voice-mode-btn svg { width: 16px; height: 16px; } /* Voice transcript section divider in chat */ .voice-divider { display: flex; align-items: center; gap: 10px; margin: 22px 4px 8px; color: var(--muted); font-size: 11.5px; font-weight: 500; } .voice-divider::before, .voice-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(178,142,68,.35), transparent); } .voice-copy-row { display: flex; justify-content: center; margin: 4px 0 14px; } .voice-copy-btn { background: var(--cream); border: 1px solid var(--gold); color: var(--gold-dark); font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .12s ease, border-color .12s ease; } .voice-copy-btn:hover { background: rgba(178,142,68,.18); border-color: var(--gold-dark); } .voice-copy-btn.copied { background: rgba(46,160,67,.14); border-color: #2ea043; color: #2ea043; } /* ============================================================ * VOICE DRAFT CHIP + FLASH — Phase 5.BL * ============================================================ */ .dvo-draft-chip { position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%) translateY(8px); opacity: 0; pointer-events: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 220, 200, .35); border-radius: 999px; color: rgba(255, 240, 220, .95); font-size: 13px; font-weight: 500; cursor: pointer; backdrop-filter: blur(8px); transition: opacity .25s ease, transform .25s ease, background .12s ease; z-index: 3; } .dvo-draft-chip.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; animation: dvo-chip-pulse 2s ease-in-out 2; } .dvo-draft-chip:hover { background: rgba(255, 220, 200, .25); border-color: rgba(255, 220, 200, .6); } .dvo-draft-chip svg { width: 14px; height: 14px; } @keyframes dvo-chip-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 140, 0); } 50% { box-shadow: 0 0 0 6px rgba(255, 200, 140, .25); } } /* Flash highlight on the composer when voice opens / refreshes it, * so the user notices it pop into the middle pane. */ .voice-draft-flash { animation: dvo-composer-flash 1.8s ease-out; } @keyframes dvo-composer-flash { 0% { box-shadow: 0 0 0 0 rgba(255, 150, 80, .8), 0 6px 32px rgba(255, 150, 80, .35); } 100% { box-shadow: 0 0 0 0 rgba(255, 150, 80, 0), 0 0 0 rgba(255, 150, 80, 0); } } /* ============================================================ * INLINE ATTACHMENT PREVIEW — Phase 5.BP * Outlook-style: click an attachment → it opens INSIDE the inbox * (full-screen modal with PDF/image viewer), no new tab, no * download dialog. Download + Open-externally are buttons in the * header bar for the cases where the user does want those actions. * ============================================================ */ .att-preview { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; } .att-preview[hidden] { display: none !important; } .att-preview-backdrop { position: absolute; inset: 0; background: rgba(20, 22, 30, .68); backdrop-filter: blur(6px); } .att-preview-card { position: relative; width: min(92vw, 1100px); height: min(92vh, 900px); background: var(--paper); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); display: flex; flex-direction: column; overflow: hidden; animation: att-preview-in .22s ease-out; } @keyframes att-preview-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } .att-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--cream); border-bottom: 1px solid var(--line); flex-shrink: 0; } .att-preview-title { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; } .att-preview-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 6px; background: var(--red); color: white; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .3px; } .att-preview-text { min-width: 0; display: flex; flex-direction: column; } .att-preview-name { font-size: 14px; font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .att-preview-meta { font-size: 12px; color: var(--muted); } .att-preview-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .att-preview-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; background: transparent; border: 1px solid var(--line); color: var(--navy); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s; } .att-preview-btn:hover { background: rgba(178, 142, 68, .12); border-color: rgba(178, 142, 68, .35); } .att-preview-btn svg { width: 14px; height: 14px; fill: currentColor; } .att-preview-close { background: transparent; border: none; color: var(--muted); font-size: 22px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: inline-grid; place-items: center; margin-left: 4px; } .att-preview-close:hover { background: rgba(0, 0, 0, .06); color: var(--navy); } .att-preview-body { flex: 1; min-height: 0; background: #2a2a2a; display: flex; align-items: center; justify-content: center; } .att-preview-body iframe { width: 100%; height: 100%; border: none; background: white; } .att-preview-body img { max-width: 100%; max-height: 100%; object-fit: contain; } .att-preview-body .att-fallback { color: white; text-align: center; padding: 32px; font-size: 14px; line-height: 1.6; }