/* ═══════════════════════════════════════════════════════════════════════
CORR-7 — focus-visible migration (Jun 2026)
─────────────────────────────────────────────────────────────────────
The browser's default focus outline was visible on mouse-click of any
focusable element — including div-clickables made keyboard-focusable
by the prior A11Y work. The ticket reports this as a "blue border on
click" UX issue, while requiring the keyboard accessibility ring to
stay intact for Tab navigation.
Fix has two parts:
(1) Global suppression rule below — removes the browser-default
outline when focus arrives via mouse (or any non-keyboard
modality). :focus:not(:focus-visible) matches only when
the UA decides the focus should NOT be visible — i.e. mouse
focus on buttons, divs, and other non-text-input elements.
:focus-visible itself continues to match on keyboard Tab,
so the .edi-thread-collapsed:focus-visible keyboard ring
in app.js (~L24339) is unaffected.
(2) The 16 form-input `:focus{border-color:var(--blue)}` rules
further down this file are migrated to `:focus-visible`.
For text inputs the browser's :focus-visible heuristic
always matches on focus (text inputs are always "should
be visible"), so this is behaviourally a no-op for the
affected inputs — but it makes the intent explicit and
guards against future repurposing of the same selectors
on non-text-input elements.
═══════════════════════════════════════════════════════════════════════ */
:focus:not(:focus-visible) { outline: none; }
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;font-family:'DM Sans',sans-serif;background:#fff;color:var(--g900);overflow:hidden;-webkit-font-smoothing:antialiased;}
:root{
--sidebar-w:210px;--rbar-w:48px;--topbar-h:56px;--toolbar-h:44px;
--blue:#4a9ee8;--blue-light:#d6eafa;--blue-bg:#eaf4fd;
--red:#e84444;--green:#00c2b8;--orange:#f07a6a;--purple:#8430ce;--teal:#00c2b8;
--g50:#f8f9fa;--g100:#f1f3f4;--g200:#e8eaed;--g300:#dadce0;--g400:#bdc1c6;
--g500:#9aa0a6;--g600:#80868b;--g700:#5f6368;--g800:#3c4043;--g900:#202124;
--coral:#e85454;--cyan:#6bb5f0;
--accent-grad:linear-gradient(135deg, #e85454, #f09080, #6bb5f0, #4a9ee8);
}
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr var(--rbar-w);grid-template-rows:var(--topbar-h) 1fr;height:100vh;}
/* ═══ TOPBAR ═══ */
.topbar{grid-column:1/-1;display:flex;align-items:center;padding:0 16px;gap:16px;border-bottom:1px solid var(--g200);background:#fff;z-index:10;}
.topbar-logo{display:flex;align-items:center;gap:10px;min-width:calc(var(--sidebar-w) - 32px);padding-right:12px;}
.logo-icon{width:36px;height:36px;border-radius:10px;background:var(--accent-grad);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.logo-icon::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.25));}
.logo-icon svg{width:20px;height:20px;color:#fff;position:relative;z-index:1;}
.logo-text{display:flex;flex-direction:column;}
.logo-name{font-weight:700;font-size:15px;color:var(--g900);letter-spacing:-0.3px;line-height:1.2;}
.logo-tagline{font-size:11px;color:var(--cyan);font-style:italic;font-weight:500;letter-spacing:0.2px;}
.search-wrapper{flex:1;max-width:640px;margin:0 auto;position:relative;}
.search-box{display:flex;align-items:center;gap:10px;background:var(--g100);border:1px solid transparent;border-radius:28px;padding:0 16px;height:40px;transition:all 0.25s;}
.search-box:focus-within{background:#fff;border-color:var(--blue);box-shadow:0 1px 6px rgba(74,158,232,0.15);}
.search-box svg{width:18px;height:18px;color:var(--g600);flex-shrink:0;}
.search-box input{flex:1;background:none;border:none;outline:none;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--g800);}
.search-box input::placeholder{color:var(--g500);}
/* A7 — Refine button inside the search box + the refine pane below it. */
.search-refine-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--g600);flex-shrink:0;transition:background 0.12s,color 0.12s;}
.search-refine-btn svg{width:16px;height:16px;}
.search-refine-btn:hover{background:var(--g200);color:var(--g900);}
.search-refine-pane{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--g300);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,0.16);padding:16px;z-index:210;}
.search-refine-pane.open{display:block;}
.refine-title{font-size:13px;font-weight:700;color:var(--g900);margin-bottom:12px;}
.refine-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;}
.refine-field{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--g600);font-weight:600;}
.refine-field input,.refine-field select{font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g800);padding:7px 10px;border:1px solid var(--g300);border-radius:7px;outline:none;background:#fff;}
.refine-field input:focus-visible,.refine-field select:focus-visible{border-color:var(--blue);}
.refine-checks{display:flex;gap:18px;margin-top:12px;}
.refine-check{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--g800);font-weight:500;cursor:pointer;}
.refine-check input{accent-color:var(--blue);cursor:pointer;}
.refine-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}
.refine-clear{padding:7px 16px;font-size:13px;border:1px solid var(--g300);background:#fff;color:var(--g700);border-radius:7px;cursor:pointer;}
.refine-clear:hover{background:var(--g100);}
.refine-search{padding:7px 18px;font-size:13px;border:none;background:var(--blue);color:#fff;font-weight:600;border-radius:7px;cursor:pointer;}
.refine-search:hover{filter:brightness(1.05);}
/* A7 — contact autocomplete suggestions under From / To. */
.refine-suggest{position:absolute;top:calc(100% + 2px);left:0;right:0;background:#fff;border:1px solid var(--g300);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.14);padding:4px;z-index:60;max-height:240px;overflow-y:auto;}
.refine-suggest-item{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:6px;cursor:pointer;transition:background 0.12s;}
.refine-suggest-item:hover{background:var(--g100);}
.refine-suggest-avatar{width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.refine-suggest-info{min-width:0;}
.refine-suggest-name{font-size:13px;color:var(--g900);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.refine-suggest-email{font-size:12px;color:var(--g600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-right{display:flex;align-items:center;gap:4px;}
.icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;transition:background 0.15s;color:var(--g700);}
.icon-btn:hover{background:var(--g100);}
.icon-btn svg{width:20px;height:20px;}
/* ═══ SIDEBAR ═══ */
.sidebar{border-right:1px solid var(--g200);display:flex;flex-direction:column;overflow:hidden;background:#fff;padding-top:4px;}
.compose-btn{margin:10px 14px 12px;display:flex;align-items:center;gap:10px;padding:0 24px;height:38px;background:var(--accent-grad);border:none;border-radius:22px;color:#fff;font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;cursor:pointer;transition:all 0.2s;box-shadow:0 1px 4px rgba(255,107,74,0.3);letter-spacing:0.2px;}
.compose-btn:hover{box-shadow:0 2px 12px rgba(255,107,74,0.4);transform:translateY(-1px);}
.compose-btn svg{width:18px;height:18px;}
.sidebar-nav{flex:1;overflow-y:auto;padding:6px 0;}
.nav-item{display:flex;align-items:center;gap:12px;padding:0 10px 0 20px;height:36px;cursor:pointer;transition:all 0.1s;font-size:13.5px;font-weight:500;color:var(--g800);border-radius:0 20px 20px 0;margin-right:12px;position:relative;}
.nav-item:hover{background:var(--g100);}
.nav-item.active{background:var(--blue-bg);color:var(--blue);font-weight:600;}
.nav-item.active::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--blue);border-radius:0 3px 3px 0;}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:0.75;}
.nav-item.active svg{opacity:1;color:var(--blue);}
.nav-item .badge{margin-left:auto;font-size:12px;font-weight:600;color:var(--g700);}
.nav-item.active .badge{color:var(--blue);}
.nav-section{padding:18px 20px 8px;font-size:11px;font-weight:700;color:var(--g800);letter-spacing:0.3px;}
.reply-suggestion{margin:auto 12px 14px;padding-top:16px;border-top:1px solid var(--g200);}
.reply-label{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--g800);padding:0 8px;margin-bottom:8px;}
.reply-label svg{width:16px;height:16px;color:var(--orange);}
.reply-box{padding:12px 14px;background:var(--blue-bg);border-radius:10px;font-size:13px;color:var(--g700);cursor:pointer;transition:background 0.15s;border:1px solid var(--blue-light);max-height:none;overflow-y:visible;}
.reply-box:hover{background:var(--blue-light);}
.reply-sug-item{padding:8px 0;border-bottom:1px solid rgba(26,115,232,0.1);cursor:pointer;line-height:1.4;color:var(--g700);transition:color 0.1s;}
.reply-sug-item:last-child{border-bottom:none;}
.reply-sug-item:hover{color:var(--blue);}
.reply-sug-loading{display:flex;align-items:center;gap:8px;color:var(--g500);font-size:12px;}
.reply-sug-loading .dot-pulse{display:inline-flex;gap:3px;}
.reply-sug-loading .dot-pulse span{width:4px;height:4px;border-radius:50%;background:var(--g400);animation:dotPulse 1.2s infinite;}
.reply-sug-loading .dot-pulse span:nth-child(2){animation-delay:0.2s;}
.reply-sug-loading .dot-pulse span:nth-child(3){animation-delay:0.4s;}
@keyframes dotPulse{0%,80%,100%{opacity:0.3;transform:scale(0.8);}40%{opacity:1;transform:scale(1.2);}}
/* ═══ MAIN ═══ */
.main{display:flex;flex-direction:column;overflow:hidden;background:#fff;}
.toolbar{display:flex;align-items:center;padding:0 12px;height:var(--toolbar-h);border-bottom:1px solid var(--g200);gap:4px;background:#fff;}
.toolbar-left{display:flex;align-items:center;gap:2px;}
.tool-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g700);transition:background 0.15s;}
.tool-btn:hover{background:var(--g100);}
.tool-btn svg{width:18px;height:18px;}
.toolbar-cb{display:flex;align-items:center;gap:2px;padding:4px 4px 4px 8px;border-radius:4px;cursor:pointer;transition:background 0.15s;}
.toolbar-cb:hover{background:var(--g100);}
.toolbar-cb input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:var(--blue);}
.toolbar-cb svg{width:14px;height:14px;color:var(--g600);}
/* A4 4b — select-all subset dropdown (All / None / Read / Unread / ...). */
.toolbar-cb-dropdown{position:relative;display:flex;align-items:center;}
.toolbar-cb-chevron{display:flex;align-items:center;justify-content:center;padding:4px 2px;border:none;background:transparent;cursor:pointer;border-radius:4px;color:var(--g600);transition:background 0.15s;}
.toolbar-cb-chevron:hover{background:var(--g100);}
.toolbar-cb-chevron svg{width:14px;height:14px;}
.toolbar-cb-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:140px;background:#fff;border:1px solid var(--g300);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,0.12);padding:4px;z-index:50;}
.toolbar-cb-menu.open{display:block;}
.toolbar-cb-menu-item{padding:7px 12px;font-size:13px;color:var(--g800);border-radius:5px;cursor:pointer;transition:background 0.12s;}
.toolbar-cb-menu-item:hover{background:var(--g100);}
/* A5 — toolbar "More" (⋮) dropdown menu. */
.toolbar-more-dropdown{position:relative;display:inline-flex;align-items:center;}
.toolbar-more-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:180px;background:#fff;border:1px solid var(--g300);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,0.12);padding:4px;z-index:200;}
.toolbar-more-menu.open{display:block;}
.toolbar-more-item{padding:8px 12px;font-size:13px;color:var(--g800);border-radius:5px;cursor:pointer;transition:background 0.12s;white-space:nowrap;}
.toolbar-more-item:hover{background:var(--g100);}
.toolbar-more-danger{color:var(--red);}
.toolbar-more-danger:hover{background:#fee2e2;}
.toolbar-right{margin-left:auto;display:flex;align-items:center;gap:4px;}
.page-info{font-size:12.5px;color:var(--g600);margin-right:4px;font-variant-numeric:tabular-nums;}
.bulk-actions{display:flex;align-items:center;gap:2px;margin-left:6px;padding-left:10px;border-left:1px solid var(--g300);animation:bulkSlideIn 0.18s ease-out;}
@keyframes bulkSlideIn{from{opacity:0;transform:translateX(-6px);}to{opacity:1;transform:translateX(0);}}
.bulk-btn{color:var(--g700);}
.bulk-btn:hover{background:var(--g100);color:var(--g900);}
.bulk-btn-danger:hover{background:#fee2e2;color:var(--red);}
.bulk-count{font-size:12.5px;font-weight:600;color:var(--blue);margin-left:8px;white-space:nowrap;}
.nav-arrow{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g600);transition:all 0.15s;}
.nav-arrow:hover{background:var(--g100);color:var(--g800);}
.nav-arrow svg{width:20px;height:20px;}
/* ═══ SMART TABS ═══ */
.smart-tabs{display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--g200);gap:0;background:#fff;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--g300) transparent;-webkit-overflow-scrolling:touch;} /* CORR-23 · CORR-75 ① scrollbar-color pins the thumb to the same light-grey (var(--g300)) that the ::-webkit-scrollbar-thumb rule at L2278 uses for vertical bars — so a browser that takes the standard-path branch (scrollbar-width:thin) no longer paints the default dark thumb that read as an unwanted horizontal line under the tabs */
.smart-tabs::-webkit-scrollbar{height:6px;} /* CORR-23 — slim horizontal bar; thumb/track cascade from global ::-webkit-scrollbar-thumb (L2262) */
.smart-tab{display:flex;align-items:center;gap:8px;padding:12px 20px;font-size:13px;font-weight:500;color:var(--g700);cursor:pointer;transition:all 0.15s;border-bottom:3px solid transparent;white-space:nowrap;flex:0 0 auto;} /* CORR-23 flex:0 0 auto — preserve natural width, overflow into .smart-tabs scroll region */
.smart-tab:hover{background:var(--g50);color:var(--g900);}
.smart-tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600;}
.smart-tab svg{width:16px;height:16px;opacity:0.7;}
.smart-tab.active svg{opacity:1;color:var(--blue);}
/* ═══ EMAIL LIST ═══ */
.email-list{flex:1;overflow-y:auto;}
/* ── B4 — reading pane layout ────────────────────────────────────────────────
.main-split wraps the list + detail. Pane class on .main drives the arrangement.
Right: row (list | preview). Bottom: column (list / preview). Off: detail
replaces the list (list hidden by JS), full area. */
.main-split{flex:1;min-height:0;display:flex;overflow:hidden;}
/* ── B4 — resize splitter between list and preview ──────────────────────────
Hidden by default; shown only in Right/Bottom modes with the matching cursor.
It sits between the list and the detail in the flex flow. */
.pane-splitter{display:none;flex:0 0 auto;background:transparent;position:relative;z-index:5;}
.pane-splitter::after{content:"";position:absolute;background:var(--g300);transition:background 0.12s;}
.pane-splitter:hover::after,.pane-splitter.dragging::after{background:var(--blue);}
/* Right mode: a vertical handle, col-resize cursor. */
.main.pane-right .pane-splitter{display:block;width:7px;cursor:col-resize;margin:0 -3px;}
.main.pane-right .pane-splitter::after{top:0;bottom:0;left:50%;transform:translateX(-50%);width:1px;}
.main.pane-right .pane-splitter:hover::after,.main.pane-right .pane-splitter.dragging::after{width:3px;}
/* Bottom mode: a horizontal handle, row-resize cursor. */
.main.pane-bottom .pane-splitter{display:block;height:7px;cursor:row-resize;margin:-3px 0;width:100%;}
.main.pane-bottom .pane-splitter::after{left:0;right:0;top:50%;transform:translateY(-50%);height:1px;}
.main.pane-bottom .pane-splitter:hover::after,.main.pane-bottom .pane-splitter.dragging::after{height:3px;}
/* Off mode: no splitter (list hidden). */
.main.pane-off .pane-splitter{display:none;}
/* While dragging, kill the body cursor flicker + text selection. */
body.pane-dragging{cursor:col-resize;user-select:none;}
body.pane-dragging.row{cursor:row-resize;}
/* RIGHT — list on the left at a fixed-ish width, preview fills the rest. */
.main.pane-right .main-split{flex-direction:row;}
.main.pane-right .main-split .email-list{flex:0 0 38%;border-right:1px solid var(--g200);}
.main.pane-right .main-split .email-detail-inline{flex:1;min-width:0;}
/* RIGHT — Outlook-style condensed list cards showing ALL elements (nothing
dropped), laid out as a grid:
Line 1: [check] recipient + count + label
Line 2: [star] subject attach time
Line 3: body snippet (clipped to width)
The checkbox (L1) and star (L2) share a left gutter column and align
vertically; recipient / subject / snippet align in the content column. */
.main.pane-right .email-row{
display:grid;
grid-template-columns:24px 1fr auto auto; /* gutter | text | icon | meta */
grid-template-rows:auto auto auto;
grid-template-areas:
"check sender label label"
"star subject attach time"
"snippet snippet snippet assigned";
align-items:center;
height:auto;column-gap:6px;row-gap:5px;
padding:11px 12px 12px 8px;
}
/* email-content is just a wrapper around subject+snippet — dissolve it so its
children become direct grid items and can land in their own rows. */
.main.pane-right .email-row .email-content{display:contents;}
.main.pane-right .email-row .email-check{grid-area:check;margin:0;align-self:start;justify-self:start;margin-top:2px;}
.main.pane-right .email-row .email-star{grid-area:star;align-self:start;justify-self:start;width:18px;height:18px;padding:0;margin:0;}
.main.pane-right .email-row .email-sender{grid-area:sender;width:auto;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.main.pane-right .email-row .email-labels{grid-area:label;justify-self:end;display:flex;flex-shrink:0;white-space:nowrap;}
.main.pane-right .email-row .email-subject{grid-area:subject;max-width:100%;width:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
.main.pane-right .email-row .email-attach{grid-area:attach;flex-shrink:0;align-self:center;}
.main.pane-right .email-row .email-time{grid-area:time;justify-self:end;flex-shrink:0;white-space:nowrap;font-size:12px;color:var(--g600);}
.main.pane-right .email-row .email-snippet{grid-area:snippet;max-width:100%;width:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--g600);font-size:12.5px;}
/* Assigned chip sits in its own cell at the end of the snippet row, so the
body ellipsizes against it and stays readable. No background box. */
.main.pane-right .email-row .email-assigned{grid-area:assigned;justify-self:end;align-self:center;flex-shrink:0;font-size:11px;white-space:nowrap;padding-left:8px;}
/* Reminder chip + cancel button ride the label cell so they stay visible. */
.main.pane-right .email-row .email-reminder-chip,
.main.pane-right .email-row .sched-cancel-btn{grid-area:label;justify-self:end;flex-shrink:0;}
/* Hover quick-actions overlay the time/attach corner on hover (unchanged
behaviour, just constrained so they don't disturb the grid). */
.main.pane-right .email-row .email-row-hover-actions{grid-area:time;justify-self:end;}
/* BOTTOM — list on top (capped), preview below. */
.main.pane-bottom .main-split{flex-direction:column;}
.main.pane-bottom .main-split .email-list{flex:0 0 45%;border-bottom:1px solid var(--g200);}
.main.pane-bottom .main-split .email-detail-inline{flex:1;min-height:0;}
/* OFF — original behaviour: detail replaces the list (JS hides the list), so the
detail just fills the split container. */
.main.pane-off .main-split{flex-direction:column;}
.main.pane-off .main-split .email-detail-inline{flex:1;min-height:0;}
/* The row currently shown in a split preview pane. */
.email-row.email-row-reading{background:var(--blue-bg);box-shadow:inset 3px 0 0 var(--blue);}
/* On phones a side-by-side pane is unusable — force full-screen detail:
show the list when no detail is open, and the detail full-area when one is. */
@media (max-width:768px){
.main.pane-right .main-split,
.main.pane-bottom .main-split{flex-direction:column;}
.main.pane-right .main-split .email-list,
.main.pane-bottom .main-split .email-list{flex:1;max-width:none;max-height:none;border-right:none;border-bottom:none;}
/* When a detail is open on mobile, hide the list so the preview is full-screen. */
.main.detail-open.pane-right .main-split .email-list,
.main.detail-open.pane-bottom .main-split .email-list{display:none;}
}
.email-row{display:flex;align-items:center;padding:0 16px;height:42px;border-bottom:1px solid var(--g200);cursor:pointer;transition:box-shadow 0.1s;gap:8px;font-size:13px;}
/* B3 — display density. Default = base (42px). Comfortable taller, Compact
shorter. Applied via .app.density-* set from Settings. */
.app.density-comfortable .email-row{height:52px;line-height:1.5;}
.app.density-compact .email-row{height:34px;line-height:1.2;font-size:12.5px;}
.app.density-compact .email-snippet{font-size:12px;}
.email-row:hover{box-shadow:inset 3px 0 0 var(--blue),0 1px 4px rgba(0,0,0,0.06);background:var(--g50);z-index:1;}
/* CORR-36 — inbox read/unread emphasis. UNREAD = bright white + bold so new mail
stands out; READ = muted NEUTRAL grey so handled mail recedes. Read must stay a
grey (not a blue tint like the old #f2f6fc): blue reads as "selected" and would
collide with .selected / .email-row-reading (var(--blue-bg)), which remain the
only blue-tinted rows. */
.email-row.unread{background:#fff;font-weight:600;}
.email-row.read{background:var(--g100);}
.email-row.selected{background:var(--blue-bg);}
.email-check{width:18px;height:18px;accent-color:var(--blue);cursor:pointer;flex-shrink:0;}
.email-star{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--g400);flex-shrink:0;border-radius:50%;transition:all 0.15s;}
.email-star:hover{color:var(--orange);background:rgba(227,116,0,0.08);}
.email-star.starred{color:var(--orange);}
.email-star svg{width:18px;height:18px;}
.email-labels{display:flex;gap:4px;flex-shrink:0;margin-right:4px;}
.elabel{font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:3px;letter-spacing:0.2px;white-space:nowrap;}
.elabel.bl{background:#dbeafe;color:#1d4ed8;}.elabel.ops{background:#fce7f3;color:#be185d;}.elabel.docs{background:#e0e7ff;color:#4338ca;}.elabel.acct{background:#d1fae5;color:#065f46;}.elabel.customs{background:#ede9fe;color:#6d28d9;}.elabel.alert{background:#fee2e2;color:#b91c1c;}.elabel.si{background:#ccfbf1;color:#0f766e;}.elabel.pre-alert{background:#fef9c3;color:#a16207;}.elabel.invoice{background:#ffedd5;color:#c2410c;}.elabel.tracking{background:#d1fae5;color:#047857;}.elabel.dg{background:#fee2e2;color:#b91c1c;}
.email-sender{width:180px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--g900);}
.email-sender .email-thread-count{
display:inline-block;margin-left:4px;font-size:11px;font-weight:400;color:var(--g600);
font-variant-numeric:tabular-nums;
}
.email-row.unread .email-sender .email-thread-count{color:var(--g700);font-weight:500;}
.email-sender .email-draft-tag{
display:inline-block;margin-left:6px;padding:1px 6px;
background:#fee2e2;color:var(--red);
border-radius:4px;font-size:10.5px;font-weight:600;line-height:1.4;
vertical-align:middle;letter-spacing:0.2px;
}
/* "Draft" prefix shown in the inbox-row snippet when a thread has a draft. */
.email-snippet-draft{
color:var(--red);font-weight:600;
}
.email-row.read .email-sender{color:var(--g700);font-weight:400;}
/* "+N" overflow count in the Gmail-style participant list. */
.email-sender .email-participant-more{
color:var(--g600);font-weight:400;font-variant-numeric:tabular-nums;
}
.email-row.unread .email-sender .email-participant-more{color:var(--g700);}
.email-content{flex:1;display:flex;align-items:center;gap:0;overflow:hidden;min-width:0;}
.email-subject{color:var(--g900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;max-width:45%;}
.email-row.read .email-subject{color:var(--g700);font-weight:400;}
.email-snippet{color:var(--g500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;margin-left:4px;font-weight:400 !important;}
.email-snippet::before{content:'— ';}
.email-attach{flex-shrink:0;color:var(--g500);margin-left:8px;display:flex;align-items:center;}
.email-attach svg{width:16px;height:16px;}
.email-time{flex-shrink:0;font-size:12px;color:var(--g600);margin-left:auto;white-space:nowrap;min-width:60px;text-align:right;font-variant-numeric:tabular-nums;}
.email-assigned{flex-shrink:0;font-size:11px;color:var(--cyan);white-space:nowrap;margin-left:8px;}
.email-assigned b{font-weight:600;color:var(--blue);}
.email-row.unread .email-time{font-weight:600;color:var(--g900);}
/* A4 4a — row hover quick-actions. Hidden by default; revealed on row hover.
The .email-time is hidden on hover so the actions occupy the same slot
without overlapping. The actions sit flush-right like .email-time did. */
.email-row-hover-actions{display:none;flex-shrink:0;align-items:center;gap:2px;margin-left:auto;}
.email-row:hover .email-row-hover-actions{display:flex;}
.email-row:hover .email-time{display:none;}
.erha-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--g600);transition:background 0.12s,color 0.12s;}
.erha-btn svg{width:16px;height:16px;}
.erha-btn:hover{background:var(--g200);color:var(--g900);}
.erha-btn-danger:hover{background:#fee2e2;color:var(--red);}
/* ═══ RIGHT BAR ═══ */
.right-bar{border-left:1px solid var(--g200);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:4px;background:#fff;}
.right-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g600);transition:all 0.15s;}
.right-icon:hover{background:var(--g100);color:var(--g800);}
.right-icon svg{width:20px;height:20px;}
/* ═══ MODAL / PANEL SHARED ═══ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.18);z-index:100;display:none;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
/* ═══ LOGIN PAGE (full-bleed) ═══ */
.login-overlay{background:linear-gradient(135deg,#3949AB 0%,#1976D2 35%,#1E88E5 70%,#26C6DA 100%);align-items:center;justify-content:center;padding:24px;}
.login-card{
width:100%;max-width:440px;background:#fff;border-radius:20px;
padding:36px 32px 28px;box-shadow:0 20px 60px rgba(0,0,0,0.18),0 2px 8px rgba(0,0,0,0.06);
display:flex;flex-direction:column;align-items:stretch;text-align:center;
font-family:'DM Sans',sans-serif;
}
.login-logo{
width:54px;height:54px;margin:0 auto 14px;
display:flex;align-items:center;justify-content:center;
}
.login-title{font-size:24px;font-weight:700;color:var(--g900);letter-spacing:-0.4px;margin-bottom:6px;}
.login-tagline{font-size:13px;color:var(--g700);margin-bottom:18px;line-height:1.45;}
.login-subhead{font-size:13.5px;font-weight:600;color:var(--g800);margin-bottom:4px;}
.login-desc{font-size:11.5px;color:var(--g500);line-height:1.5;margin-bottom:22px;}
.login-tabs{
display:flex;background:var(--g100);border-radius:10px;padding:4px;gap:4px;margin-bottom:18px;
}
.login-tab{
flex:1;padding:8px 10px;background:transparent;border:none;border-radius:7px;
font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:var(--g600);
cursor:pointer;transition:all 0.15s;
}
.login-tab:hover{color:var(--g800);}
.login-tab.active{background:#fff;color:var(--g900);box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.login-fields{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.login-input{
width:100%;padding:12px 14px;border:1.5px solid var(--g300);border-radius:10px;
font-family:'DM Sans',sans-serif;font-size:13.5px;color:var(--g900);outline:none;
transition:border-color 0.15s;background:#fff;
}
.login-input:focus-visible{border-color:var(--blue);}
.login-input::placeholder{color:var(--g500);}
.login-pw-wrap{position:relative;}
.login-pw-wrap .login-input{padding-right:42px;}
.login-pw-toggle{
position:absolute;top:50%;right:8px;transform:translateY(-50%);
width:30px;height:30px;display:flex;align-items:center;justify-content:center;
background:none;border:none;border-radius:6px;color:var(--g500);cursor:pointer;
}
.login-pw-toggle:hover{background:var(--g100);color:var(--g800);}
.login-btn{
width:100%;padding:13px;background:linear-gradient(135deg,#4a9ee8 0%,#26C6DA 100%);
border:none;border-radius:24px;color:#fff;font-weight:700;font-size:14px;
font-family:'DM Sans',sans-serif;cursor:pointer;transition:all 0.2s;
box-shadow:0 4px 12px rgba(74,158,232,0.3);
margin-bottom:14px;
}
.login-btn:hover{box-shadow:0 6px 18px rgba(74,158,232,0.4);transform:translateY(-1px);}
.login-btn:active{transform:translateY(0);}
.login-foot-primary{font-size:11px;color:var(--g500);line-height:1.5;}
.login-foot-features{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
font-size:10.5px;color:var(--g500);margin-top:12px;margin-bottom:10px;
}
.login-foot-features .dot{color:var(--g300);}
.login-tos{font-size:10.5px;color:var(--g500);line-height:1.6;margin-top:6px;}
.login-tos a{color:var(--blue);text-decoration:none;}
.login-tos a:hover{text-decoration:underline;}
.login-demo-link{
margin-top:10px;background:none;border:none;color:var(--g500);
font-family:'DM Sans',sans-serif;font-size:11.5px;cursor:pointer;text-decoration:underline;
}
.login-demo-link:hover{color:var(--g700);}
/* ═══ DETAIL PANEL ═══ */
.detail-panel{width:720px;max-height:85vh;background:#fff;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;}
@keyframes slideUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.detail-header{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--g200);gap:8px;}
.detail-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g700);}
.detail-back:hover{background:var(--g100);}
.detail-back svg{width:20px;height:20px;}
.detail-title{font-size:18px;font-weight:700;color:var(--g900);flex:1;letter-spacing:-0.3px;}
.detail-labels{display:flex;gap:6px;}
.detail-actions{display:flex;gap:2px;}
.detail-body{flex:1;overflow-y:auto;padding:20px 24px;}
.detail-meta{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.detail-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;flex-shrink:0;}
.detail-sender-info{flex:1;}
.detail-sender-name{font-weight:600;font-size:14px;color:var(--g900);}
.detail-sender-email{font-size:12px;color:var(--g600);}
.detail-date{font-size:12px;color:var(--g600);}
.detail-content{font-size:14px;line-height:1.75;color:var(--g800);}
.detail-content p{margin-bottom:14px;}
.detail-attachments{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}
.att-chip{display:flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--g300);border-radius:8px;font-size:12.5px;color:var(--g700);cursor:pointer;transition:all 0.15s;}
.att-chip:hover{background:var(--g50);border-color:var(--g400);}
.att-chip svg{width:16px;height:16px;color:var(--g500);}
.att-size{color:var(--g500);font-size:11px;}
.detail-reply{padding:16px 20px;border-top:1px solid var(--g200);display:flex;align-items:center;gap:10px;}
.detail-reply-input{flex:1;padding:10px 16px;border:1px solid var(--g300);border-radius:24px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g800);outline:none;transition:border-color 0.2s;}
.detail-reply-input:focus-visible{border-color:var(--blue);}
.detail-reply-input::placeholder{color:var(--g500);}
.send-btn{padding:8px 20px;background:linear-gradient(135deg,var(--coral),#FF8A6A);border:none;border-radius:20px;color:#fff;font-weight:600;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:'DM Sans',sans-serif;transition:all 0.2s;}
.send-btn:hover{box-shadow:0 2px 12px rgba(255,107,74,0.35);}
.send-btn svg{width:14px;height:14px;}
/* ═══ COMPOSE ═══ */
.compose-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.2);z-index:150;display:none;align-items:flex-end;justify-content:flex-end;padding:0 24px 24px 0;}
.compose-overlay.open{display:flex;}
.compose-overlay.compose-maximized{align-items:center;justify-content:center;padding:5vh 5vw;background:rgba(0,0,0,0.35);}
.compose-modal{position:relative;width:640px;background:#fff;border-radius:12px 12px 0 0;box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);display:flex;flex-direction:column;animation:compIn 0.2s ease-out;}
/* B6 — drag-and-drop attachment drop zone. Hidden until a file drag enters the
compose modal, then overlays it with a dashed target. */
.compose-dropzone{display:none;position:absolute;inset:0;z-index:50;border-radius:12px 12px 0 0;background:rgba(74,158,232,0.08);border:2px dashed var(--blue);align-items:center;justify-content:center;pointer-events:none;}
.compose-dropzone.active{display:flex;}
.compose-dropzone-inner{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--blue);}
.compose-dropzone-inner svg{width:48px;height:48px;}
.compose-dropzone-text{font-size:16px;font-weight:600;}
.compose-overlay.compose-maximized .compose-modal{width:90vw;height:90vh;max-width:1100px;border-radius:12px;}
/* Color picker for compose window — mirrors the reply composer's picker styling. */
.compose-color-picker{
display:none;position:absolute;z-index:60;
background:#fff;border:1px solid var(--g200);border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.06);
padding:12px;width:204px;
}
.compose-color-picker.open{display:block;animation:slideUp 0.15s ease-out;}
.compose-overlay.compose-maximized .compose-body-area{flex:1;display:flex;flex-direction:column;}
.compose-overlay.compose-maximized .compose-body-editor{flex:1;max-height:none;min-height:0;}
.compose-modal.compose-minimized{width:320px;border-radius:8px 8px 0 0;}
.compose-modal.compose-minimized .compose-fields,
.compose-modal.compose-minimized .compose-body-area,
.compose-modal.compose-minimized .compose-format-row,
.compose-modal.compose-minimized .compose-bottom,
.compose-modal.compose-minimized .compose-attach-strip{display:none !important;}
.compose-modal.compose-minimized .compose-top{cursor:pointer;border-radius:8px 8px 0 0;}
@keyframes compIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.compose-top{display:flex;align-items:center;padding:10px 16px;background:var(--g800);border-radius:12px 12px 0 0;color:#fff;}
.compose-top-title{font-size:13px;font-weight:600;flex:1;}
.compose-top-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:rgba(255,255,255,0.7);border-radius:50%;}
.compose-top-btn:hover{color:#fff;background:rgba(255,255,255,0.1);}
.compose-top-btn svg{width:16px;height:16px;}
.compose-field{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid var(--g200);}
.compose-field-label{font-size:13px;color:var(--g600);width:40px;flex-shrink:0;}
.compose-field input{flex:1;border:none;outline:none;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g900);background:none;}
.compose-body-area{padding:16px;}
.compose-body-area textarea, .compose-body-editor{width:100%;min-height:280px;border:none;outline:none;font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.7;color:var(--g900);resize:none;background:none;}
.compose-body-editor{max-height:480px;overflow-y:auto;}
.compose-body-editor:empty::before{content:attr(data-placeholder);color:var(--g500);pointer-events:none;}
.compose-body-editor table{border-collapse:collapse;margin:8px 0;}
.compose-body-editor table td, .compose-body-editor table th{border:1px solid var(--g300);padding:6px 10px;min-width:60px;vertical-align:top;}
.compose-body-editor table th{background:var(--g100);font-weight:600;text-align:left;}
.compose-bottom{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--g200);}
.compose-send{padding:8px 24px;background:linear-gradient(135deg,var(--coral),#FF8A6A);border:none;border-radius:20px;color:#fff;font-weight:600;font-size:13px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.2s;}
.compose-send:hover{box-shadow:0 2px 12px rgba(255,107,74,0.35);}
.compose-tool{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g600);}
.compose-tool:hover{background:var(--g100);}
.compose-tool svg{width:18px;height:18px;}
/* ═══ SMART SORT PANEL ═══ */
.ss-panel{
width:440px;max-height:80vh;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;
animation:slideUp 0.2s ease-out;
}
.ss-header{
display:flex;align-items:center;padding:18px 22px;gap:10px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.ss-header-icon{display:flex;align-items:center;color:var(--g900);}
.ss-header-icon svg{width:22px;height:22px;}
.ss-header-title{font-size:17px;font-weight:700;color:var(--g900);flex:1;}
.ss-header-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g700);transition:background 0.15s;}
.ss-header-btn:hover{background:rgba(0,0,0,0.06);}
.ss-header-btn svg{width:18px;height:18px;}
.ss-desc{
padding:18px 24px 14px;font-size:15px;color:var(--g800);
border-bottom:1px solid var(--g200);line-height:1.5;
}
.ss-list{
flex:1;overflow-y:auto;padding:16px 22px;
display:flex;flex-direction:column;gap:10px;
}
.ss-item{
display:flex;align-items:center;
padding:14px 18px;
border:1.5px solid var(--g300);border-radius:12px;
background:#fff;cursor:pointer;transition:all 0.15s;
gap:12px;
}
.ss-item:hover{border-color:var(--g400);background:var(--g50);}
.ss-item.selected{border-color:var(--blue);background:var(--blue-bg);}
.ss-item-name{font-size:15px;font-weight:600;color:var(--g900);flex:1;}
.ss-item-check{
width:22px;height:22px;border:2px solid var(--g400);border-radius:6px;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
transition:all 0.15s;
}
.ss-item.selected .ss-item-check{border-color:var(--blue);background:var(--blue);}
.ss-item.selected .ss-item-check::after{
content:'';width:6px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);margin-top:-2px;
}
.ss-item-delete{
width:28px;height:28px;display:none;align-items:center;justify-content:center;
border:none;background:none;border-radius:50%;cursor:pointer;
color:var(--red);transition:all 0.15s;flex-shrink:0;
}
.ss-item-delete:hover{background:rgba(217,48,37,0.08);}
.ss-item:hover .ss-item-delete{display:flex;}
.ss-item-delete svg{width:16px;height:16px;}
.ss-footer{
padding:14px 22px;border-top:1px solid var(--g200);
background:var(--g50);display:flex;align-items:center;gap:12px;
}
.ss-build-btn{
padding:10px 28px;
background:linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
border:none;border-radius:24px;color:#fff;
font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;
cursor:pointer;transition:all 0.2s;
}
.ss-build-btn:hover{box-shadow:0 2px 12px rgba(79,195,247,0.4);transform:translateY(-1px);}
/* ═══ BUILD YOUR OWN PANEL ═══ */
.byo-panel{
width:560px;max-height:88vh;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;
animation:slideUp 0.2s ease-out;
}
.byo-preview-section{margin-top:4px;}
.byo-preview-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.byo-preview-title{font-size:13px;font-weight:700;color:var(--g900);letter-spacing:-0.1px;}
.byo-preview-count{font-size:12px;font-weight:600;color:var(--blue);background:var(--blue-bg);padding:2px 10px;border-radius:12px;}
.byo-preview-count.empty{color:var(--g600);background:var(--g100);}
.byo-preview-list{
border:1px solid var(--g200);border-radius:10px;background:var(--g50);
max-height:200px;overflow-y:auto;
}
.byo-preview-empty{padding:24px 16px;text-align:center;font-size:12.5px;color:var(--g500);line-height:1.5;}
.byo-preview-row{
display:flex;align-items:center;gap:10px;padding:8px 12px;
border-bottom:1px solid var(--g200);font-size:12.5px;
cursor:default;transition:background 0.1s;
}
.byo-preview-row:last-child{border-bottom:none;}
.byo-preview-row:hover{background:#fff;}
.byo-preview-sender{font-weight:600;color:var(--g900);min-width:120px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.byo-preview-subj{flex:1;color:var(--g700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.byo-preview-time{font-size:11px;color:var(--g500);white-space:nowrap;font-variant-numeric:tabular-nums;}
.byo-header{
display:flex;align-items:center;padding:18px 22px;gap:10px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.byo-header-title{font-size:17px;font-weight:700;color:var(--g900);flex:1;}
.byo-body{padding:24px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;flex:1;}
.byo-field-label{font-size:15px;font-weight:700;color:var(--g900);margin-bottom:8px;}
.byo-input{
width:100%;padding:14px 18px;
border:1.5px solid var(--g300);border-radius:12px;
font-family:'DM Sans',sans-serif;font-size:14px;
color:var(--g800);outline:none;transition:border-color 0.2s;
background:#fff;
}
.byo-input:focus-visible{border-color:var(--blue);}
.byo-input::placeholder{color:var(--g500);}
.byo-textarea{
width:100%;padding:14px 18px;min-height:56px;
border:1.5px solid var(--g300);border-radius:12px;
font-family:'DM Sans',sans-serif;font-size:14px;
color:var(--g800);outline:none;transition:border-color 0.2s;
background:#fff;resize:none;
}
.byo-textarea:focus-visible{border-color:var(--blue);}
.byo-textarea::placeholder{color:var(--g500);}
.byo-help{font-size:13.5px;color:var(--g700);line-height:1.6;margin-top:4px;}
.byo-help-example{margin-top:8px;font-size:13px;color:var(--g800);}
.byo-footer{
padding:14px 22px;border-top:1px solid var(--g200);
background:var(--g50);display:flex;align-items:center;gap:12px;
}
.byo-create-btn{
padding:10px 28px;
background:linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
border:none;border-radius:24px;color:#fff;
font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;
cursor:pointer;transition:all 0.2s;
}
.byo-create-btn:hover{box-shadow:0 2px 12px rgba(79,195,247,0.4);transform:translateY(-1px);}
.byo-create-btn.disabled{opacity:0.35;pointer-events:none;transform:none;box-shadow:none;}
.byo-cancel-btn{
padding:10px 22px;background:none;
border:1.5px solid var(--cyan);border-radius:24px;
color:var(--coral);font-family:'DM Sans',sans-serif;
font-weight:600;font-size:14px;cursor:pointer;transition:all 0.15s;
}
.byo-cancel-btn:hover{background:rgba(255,107,74,0.05);}
/* Smart Sort Definition Fields */
.byo-def-fields{display:flex;flex-direction:column;gap:0;}
.byo-def-row{display:flex;align-items:center;gap:0;border:1.5px solid var(--g300);border-radius:10px;overflow:hidden;margin:0;}
.byo-def-row:focus-within{border-color:var(--blue);}
.byo-def-label{
padding:10px 12px;background:var(--g100);font-family:'DM Mono',monospace;
font-size:12px;font-weight:600;color:var(--g700);white-space:nowrap;
border-right:1px solid var(--g200);min-width:72px;
}
.byo-def-input{
flex:1;padding:10px 14px;border:none;outline:none;
font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g800);background:#fff;
}
.byo-def-input::placeholder{color:var(--g500);}
.byo-def-or{
text-align:center;font-size:11px;font-weight:700;color:var(--g500);
padding:4px 0;letter-spacing:1px;font-family:'DM Mono',monospace;
}
.byo-def-preview{
margin-top:10px;padding:10px 14px;background:var(--g50);border:1px solid var(--g200);
border-radius:8px;font-family:'DM Mono',monospace;font-size:11.5px;
color:var(--g600);min-height:28px;line-height:1.5;word-break:break-all;
}
/* ═══ AUTO LABEL PANEL ═══ */
.al-panel{
width:90vw;max-width:1100px;max-height:88vh;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;
}
.al-header{
display:flex;align-items:center;padding:14px 22px;gap:10px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.al-header-icon{display:flex;align-items:center;color:var(--g900);}
.al-header-icon svg{width:22px;height:22px;}
.al-header-title{font-size:17px;font-weight:700;color:var(--g900);flex:1;}
.al-body{flex:1;overflow-y:auto;padding:20px 24px;}
.al-section-title{font-size:15px;font-weight:700;color:var(--g900);margin-bottom:10px;display:flex;align-items:center;}
.al-section-actions{margin-left:auto;display:flex;gap:2px;}
.al-custom-box{
padding:16px 20px;background:var(--g50);border:1.5px solid var(--g200);
border-radius:12px;font-size:13.5px;color:var(--g500);min-height:60px;
margin-bottom:8px;resize:vertical;
}
.al-grid{
display:grid;grid-template-columns:repeat(7,1fr);gap:8px 12px;
}
.al-grid-item{
display:flex;align-items:center;gap:7px;cursor:pointer;padding:2px 0;
}
.al-grid-item input[type="checkbox"]{
width:16px;height:16px;accent-color:var(--blue);cursor:pointer;flex-shrink:0;
}
.al-grid-tag{
font-size:12px;font-weight:600;padding:3px 10px;border-radius:4px;
white-space:nowrap;letter-spacing:0.1px;
}
.al-footer{
padding:14px 22px;border-top:1px solid var(--g200);
background:var(--g50);display:flex;align-items:center;gap:12px;
}
.al-add-btn{
padding:10px 28px;
background:linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
border:none;border-radius:24px;color:#fff;
font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;
cursor:pointer;transition:all 0.2s;
}
.al-add-btn:hover{box-shadow:0 2px 12px rgba(79,195,247,0.4);transform:translateY(-1px);}
.al-view-btn{
padding:10px 22px;background:none;
border:1.5px solid var(--cyan);border-radius:24px;
color:var(--coral);font-family:'DM Sans',sans-serif;
font-weight:600;font-size:14px;cursor:pointer;transition:all 0.15s;
}
.al-view-btn:hover{background:rgba(255,107,74,0.05);}
/* Auto Label Create Panel */
.alc-panel{
width:560px;max-height:88vh;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;
}
.alc-body{padding:24px;display:flex;flex-direction:column;gap:16px;flex:1;overflow-y:auto;}
.alc-tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;}
.alc-tag-item{display:flex;align-items:center;gap:6px;cursor:pointer;}
.alc-tag-item input[type="checkbox"]{display:none;}
.alc-tag-label{
font-size:12px;font-weight:600;padding:5px 14px;border-radius:6px;white-space:nowrap;
cursor:pointer;transition:all 0.15s;border:2px solid transparent;
user-select:none;
}
.alc-tag-label:hover{transform:scale(1.05);}
.alc-tag-item.selected .alc-tag-label{
border-color:var(--g900);
box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--g400);
transform:scale(1.08);
}
/* ═══ REMINDER PANEL ═══ */
.rem-panel{
width:560px;max-height:85vh;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;
}
.rem-header{
display:flex;align-items:center;padding:16px 22px;gap:10px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.rem-header-icon{display:flex;align-items:center;color:var(--g900);}
.rem-header-icon svg{width:22px;height:22px;}
.rem-header-title{font-size:17px;font-weight:700;color:var(--g900);flex:1;}
.rem-body{flex:1;overflow-y:auto;padding:0;}
.rem-emails{max-height:220px;overflow-y:auto;}
.rem-email-card{border-bottom:1px solid var(--g200);padding:14px 24px;}
.rem-email-card:last-child{border-bottom:1px solid var(--g200);}
.rem-info{padding:4px 0;}
.rem-info-label{font-size:14px;font-weight:700;color:var(--g900);display:inline;}
.rem-info-value{font-size:14px;color:var(--g700);display:inline;margin-left:4px;}
.rem-options{padding:16px 24px;display:flex;flex-direction:column;gap:10px;}
.rem-option{
display:flex;align-items:center;padding:14px 18px;
border:1.5px solid var(--g300);border-radius:12px;
cursor:pointer;transition:all 0.15s;gap:12px;
}
.rem-option:hover{border-color:var(--g400);background:var(--g50);}
.rem-option.selected{border-color:var(--cyan);background:rgba(79,195,247,0.06);}
.rem-option-text{flex:1;font-size:14px;font-weight:600;color:var(--g900);}
.rem-option-radio{
width:22px;height:22px;border:2px solid var(--g400);border-radius:50%;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
transition:all 0.15s;
}
.rem-option.selected .rem-option-radio{border-color:var(--blue);}
.rem-option.selected .rem-option-radio::after{
content:'';width:12px;height:12px;border-radius:50%;background:var(--blue);
}
.rem-footer{
padding:14px 22px;border-top:1px solid var(--g200);
background:var(--g50);display:flex;align-items:center;gap:12px;justify-content:flex-end;
}
.rem-confirm{
padding:10px 28px;background:linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
border:none;border-radius:24px;color:#fff;font-family:'DM Sans',sans-serif;
font-weight:600;font-size:14px;cursor:pointer;transition:all 0.2s;
}
.rem-confirm:hover{box-shadow:0 2px 12px rgba(79,195,247,0.4);transform:translateY(-1px);}
.rem-cancel{
padding:10px 22px;background:none;border:1.5px solid var(--cyan);border-radius:24px;
color:var(--coral);font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;
cursor:pointer;transition:all 0.15s;
}
.rem-cancel:hover{background:rgba(255,107,74,0.05);}
/* ═══ DATE TIME PICKER ═══ */
.dtp-panel{
width:620px;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;
}
.dtp-header{
display:flex;align-items:center;padding:16px 22px;gap:10px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.dtp-header-icon{display:flex;align-items:center;color:var(--g900);}
.dtp-header-icon svg{width:22px;height:22px;}
.dtp-header-title{font-size:17px;font-weight:700;color:var(--g900);flex:1;}
.dtp-body{display:flex;padding:24px;gap:32px;}
.dtp-calendar{flex:1;}
.dtp-cal-nav{display:flex;align-items:center;margin-bottom:16px;}
.dtp-cal-title{flex:1;font-size:16px;font-weight:700;color:var(--g900);text-align:center;}
.dtp-cal-arrow{
width:32px;height:32px;display:flex;align-items:center;justify-content:center;
border:1px solid var(--g300);border-radius:50%;background:none;cursor:pointer;
color:var(--g600);transition:all 0.15s;
}
.dtp-cal-arrow:hover{background:var(--g100);color:var(--g800);}
.dtp-cal-arrow svg{width:18px;height:18px;}
.dtp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:0;margin-bottom:8px;}
.dtp-weekday{text-align:center;font-size:12px;font-weight:600;color:var(--cyan);padding:4px 0;}
.dtp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.dtp-day{
width:36px;height:36px;display:flex;align-items:center;justify-content:center;
border-radius:50%;font-size:13px;color:var(--g800);cursor:pointer;transition:all 0.1s;
border:none;background:none;font-family:'DM Sans',sans-serif;margin:0 auto;
}
.dtp-day:hover{background:var(--g100);}
.dtp-day.today{background:var(--cyan);color:#fff;font-weight:700;}
.dtp-day.selected{background:var(--blue);color:#fff;font-weight:700;}
.dtp-day.empty{cursor:default;}
.dtp-day.empty:hover{background:none;}
.dtp-right{width:240px;display:flex;flex-direction:column;gap:20px;padding-top:8px;}
.dtp-field-label{font-size:15px;font-weight:700;color:var(--g900);margin-bottom:8px;}
.dtp-date-input{
padding:12px 16px;border:1.5px solid var(--g300);border-radius:12px;
font-family:'DM Sans',sans-serif;font-size:14px;color:var(--g800);
display:flex;align-items:center;gap:8px;
}
.dtp-date-input svg{width:18px;height:18px;color:var(--g500);margin-left:auto;}
.dtp-time-row{display:flex;gap:0;align-items:stretch;border:1.5px solid var(--g300);border-radius:12px;overflow:hidden;}
.dtp-time-input{
flex:1;padding:12px 14px;border:none;
font-family:'DM Sans',sans-serif;font-size:16px;font-weight:600;color:var(--g800);
text-align:center;outline:none;letter-spacing:1px;min-width:0;
}
.dtp-time-input:focus-visible{background:var(--g50);}
.dtp-ampm-toggle{display:flex;flex-shrink:0;border-left:1.5px solid var(--g300);}
.dtp-ampm-btn{
padding:12px 16px;border:none;background:#fff;
font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;
color:var(--g600);cursor:pointer;transition:all 0.15s;
border-left:1px solid var(--g200);flex-shrink:0;
}
.dtp-ampm-btn:first-of-type{border-left:1.5px solid var(--g300);}
.dtp-ampm-btn:hover{background:var(--g100);}
.dtp-ampm-btn.selected{background:var(--cyan);color:#fff;}
.dtp-footer{
padding:14px 22px;border-top:1px solid var(--g200);
background:var(--g50);display:flex;align-items:center;gap:12px;justify-content:flex-end;
}
/* ═══ TEMPLATES PANEL ═══ */
.tpl-panel{
width:620px;max-height:90vh;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;
}
.tpl-header{
display:flex;align-items:center;padding:14px 22px;gap:10px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.tpl-header-icon{display:flex;align-items:center;color:var(--g900);}
.tpl-header-icon svg{width:22px;height:22px;}
.tpl-header-title{font-size:17px;font-weight:700;color:var(--g900);flex:1;}
.tpl-body{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:16px;}
.tpl-field-label{font-size:14px;font-weight:700;color:var(--g900);margin-bottom:6px;}
.tpl-input{
width:100%;padding:12px 16px;border:1.5px solid var(--g300);border-radius:12px;
font-family:'DM Sans',sans-serif;font-size:14px;color:var(--g800);outline:none;
transition:border-color 0.2s;
}
.tpl-input:focus-visible{border-color:var(--blue);}
.tpl-input::placeholder{color:var(--g500);}
.tpl-subject-editor{min-height:46px;line-height:1.5;white-space:pre-wrap;background:#fff;}
.tpl-subject-editor:empty::before{content:attr(data-placeholder);color:var(--g500);pointer-events:none;}
.tpl-subject-editor br{display:none;} /* keep subject as a single visual line */
.tpl-editor-wrap{border:1.5px solid var(--g300);border-radius:12px;overflow:visible;position:relative;}
.tpl-editor-wrap:focus-within{border-color:var(--blue);}
.tpl-toolbar{
display:flex;align-items:center;gap:2px;padding:6px 10px;
background:var(--g50);border-bottom:1px solid var(--g200);flex-wrap:wrap;
border-radius:12px 12px 0 0;
}
.tpl-toolbar select, .tpl-tb-select{
padding:5px 8px;border:1px solid var(--g300);border-radius:6px;
font-family:'DM Sans',sans-serif;font-size:12px;color:var(--g700);
background:#fff;cursor:pointer;outline:none;appearance:auto;
max-width:130px;
}
.tpl-tb-font{min-width:110px;}
.tpl-tb-select:hover{border-color:var(--g400);}
.tpl-tb-select:focus-visible{border-color:var(--blue);}
.tpl-tb-btn{
width:28px;height:28px;display:flex;align-items:center;justify-content:center;
border:none;background:none;border-radius:5px;cursor:pointer;
color:var(--g700);font-size:15px;font-weight:700;transition:all 0.1s;
font-family:'DM Sans',sans-serif;position:relative;
}
.tpl-tb-btn:hover{background:var(--g200);color:var(--g900);}
.tpl-tb-sep{width:1px;height:20px;background:var(--g300);margin:0 4px;}
/* Color buttons (font color + highlight) */
.tpl-tb-color-wrap{position:relative;display:inline-flex;}
.tpl-tb-color-btn{flex-direction:column;gap:0;padding:0;width:30px;height:28px;}
.tpl-tb-color-btn svg{margin-bottom:1px;}
.tpl-tb-color-bar{display:block;width:18px;height:3px;border-radius:1px;margin-top:-2px;border:0.5px solid rgba(0,0,0,0.12);}
/* Shared color-picker popup */
.tpl-color-picker{
display:none;position:absolute;top:46px;left:200px;z-index:50;
background:#fff;border:1px solid var(--g200);border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.06);
padding:12px;width:204px;
}
.tpl-color-picker.open{display:block;animation:slideUp 0.15s ease-out;}
.tpl-cp-label{font-size:12px;font-weight:700;color:var(--g800);margin-bottom:8px;}
.tpl-cp-grid{display:grid;grid-template-columns:repeat(8, 1fr);gap:4px;}
.tpl-cp-swatch{
width:20px;height:20px;border-radius:4px;cursor:pointer;
border:1px solid rgba(0,0,0,0.1);transition:transform 0.1s;
}
.tpl-cp-swatch:hover{transform:scale(1.15);box-shadow:0 1px 4px rgba(0,0,0,0.15);}
.tpl-cp-actions{margin-top:10px;padding-top:8px;border-top:1px solid var(--g200);}
.tpl-cp-clear{
width:100%;padding:6px 10px;background:var(--g100);border:none;border-radius:6px;
font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;color:var(--g700);
cursor:pointer;transition:background 0.1s;
}
.tpl-cp-clear:hover{background:var(--g200);color:var(--g900);}
/* Table picker grid */
.tpl-tb-table-wrap{position:relative;display:inline-flex;}
.tpl-table-picker{
display:none;position:absolute;top:32px;right:0;z-index:50;
background:#fff;border:1px solid var(--g200);border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.06);
padding:12px;
}
.tpl-table-picker.open{display:block;animation:slideUp 0.15s ease-out;}
.tpl-tp-label{font-size:12px;font-weight:700;color:var(--g800);margin-bottom:8px;text-align:center;}
.tpl-tp-grid{display:grid;grid-template-columns:repeat(8,16px);grid-gap:2px;}
.tpl-tp-cell{
width:16px;height:16px;border:1px solid var(--g300);
background:#fff;border-radius:2px;cursor:pointer;
}
.tpl-tp-cell.hover{background:var(--blue-light);border-color:var(--blue);}
/* Tables inserted into the editor */
.tpl-editor table.tpl-table{
border-collapse:collapse;margin:8px 0;
font-family:inherit;font-size:13px;
}
.tpl-editor table.tpl-table td{
border:1px solid var(--g300);padding:6px 10px;
min-width:60px;vertical-align:top;
}
.tpl-editor table.tpl-table th{
border:1px solid var(--g300);padding:6px 10px;
background:var(--g100);font-weight:600;text-align:left;
}
.tpl-editor{
min-height:100px;padding:12px 16px;outline:none;
font-family:'DM Sans',sans-serif;font-size:14px;color:var(--g800);
line-height:1.7;
}
.tpl-editor:empty::before{content:attr(data-placeholder);color:var(--g500);}
.tpl-editor .tpl-var, .tpl-subject-editor .tpl-var, .compose-body-editor .tpl-var, .edi-ic-body .tpl-var{
display:inline-block;background:var(--blue);color:#fff;
padding:1px 9px;border-radius:10px;font-weight:600;font-size:12.5px;
font-family:'DM Sans',sans-serif;line-height:1.5;letter-spacing:0.1px;
user-select:all;vertical-align:baseline;margin:0 1px;
box-shadow:0 1px 2px rgba(74,158,232,0.25);
}
.tpl-editor .tpl-var::before, .tpl-subject-editor .tpl-var::before, .compose-body-editor .tpl-var::before, .edi-ic-body .tpl-var::before{
content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
background:#fff;opacity:0.85;margin-right:6px;vertical-align:middle;margin-top:-1px;
}
.tpl-btn-row{display:flex;gap:10px;align-items:center;}
.tpl-save-btn{
padding:8px 22px;background:var(--coral);border:none;border-radius:24px;
color:#fff;font-family:'DM Sans',sans-serif;font-weight:600;font-size:13px;
cursor:pointer;transition:all 0.2s;
}
.tpl-save-btn:hover{box-shadow:0 2px 10px rgba(255,107,74,0.3);}
.tpl-vars-section{margin-top:4px;}
.tpl-vars-title{font-size:14px;font-weight:700;color:var(--g900);margin-bottom:8px;display:flex;align-items:center;}
.tpl-vars-title-actions{margin-left:auto;display:flex;gap:2px;}
.tpl-var-chips{display:flex;flex-wrap:wrap;gap:8px;}
.tpl-var-chip{
display:flex;align-items:center;gap:4px;padding:7px 16px;
border:1.5px solid var(--g300);border-radius:24px;background:#fff;
font-size:13px;color:var(--g700);cursor:pointer;transition:all 0.15s;
font-family:'DM Sans',sans-serif;
}
.tpl-var-chip:hover{border-color:var(--cyan);background:rgba(79,195,247,0.04);color:var(--g900);}
.tpl-var-chip .plus{color:var(--cyan);font-weight:700;margin-right:2px;}
.tpl-saved-section{margin-top:8px;}
.tpl-saved-title{font-size:14px;font-weight:700;color:var(--g900);margin-bottom:10px;}
.tpl-saved-list{display:flex;flex-direction:column;gap:8px;}
.tpl-saved-item{
display:flex;align-items:center;padding:14px 18px;
border:1.5px solid var(--g300);border-radius:12px;background:#fff;
transition:all 0.15s;
}
.tpl-saved-item:hover{border-color:var(--g400);background:var(--g50);}
.tpl-saved-name{flex:1;font-size:14px;font-weight:600;color:var(--g900);}
.tpl-saved-actions{display:flex;gap:2px;}
.tpl-saved-act{
width:30px;height:30px;display:flex;align-items:center;justify-content:center;
border:none;background:none;border-radius:50%;cursor:pointer;
color:var(--g600);transition:all 0.15s;
}
.tpl-saved-act:hover{background:var(--g100);color:var(--g900);}
.tpl-saved-act svg{width:16px;height:16px;}
.tpl-footer{
padding:14px 22px;border-top:1px solid var(--g200);
background:var(--g50);display:flex;align-items:center;gap:12px;justify-content:flex-end;
}
/* Create Variable Panel */
.cv-panel{
width:420px;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;
}
.cv-body{padding:24px;display:flex;flex-direction:column;gap:16px;}
/* Template slash dropdown */
.tpl-slash-dropdown{
position:absolute;bottom:100%;left:0;right:0;margin-bottom:6px;
background:#fff;border:1.5px solid var(--g300);border-radius:12px;
box-shadow:0 4px 20px rgba(0,0,0,0.12);max-height:200px;overflow-y:auto;
z-index:50;display:none;
}
.tpl-slash-dropdown.open{display:block;}
.tpl-slash-header{
padding:8px 14px;font-size:11px;font-weight:700;color:var(--g500);
text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--g200);
}
.tpl-slash-item{
padding:10px 16px;cursor:pointer;font-size:13.5px;font-weight:500;
color:var(--g800);transition:all 0.1s;display:flex;align-items:center;gap:8px;
}
.tpl-slash-item:hover{background:var(--blue-bg);color:var(--blue);}
.tpl-slash-item .slash-name{font-weight:600;}
.tpl-slash-item .slash-subj{color:var(--g500);font-size:12px;margin-left:auto;}
.tpl-slash-empty{padding:12px 16px;font-size:13px;color:var(--g500);font-style:italic;}
/* Variable Fill Window */
.vf-panel{
width:480px;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;
}
.vf-body{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:16px;}
.vf-body .byo-input{border-color:#6366f1;border-width:2px;}
.vf-body .byo-input:focus-visible{border-color:#4f46e5;box-shadow:0 0 0 3px rgba(99,102,241,0.1);}
.vf-body .byo-field-label{color:#1e1b4b;font-size:15px;}
.vf-footer{
padding:20px 24px;
background:linear-gradient(180deg, rgba(224,220,255,0.3) 0%, rgba(199,194,255,0.4) 100%);
display:flex;flex-direction:column;gap:12px;
}
.vf-controls{display:flex;gap:12px;align-items:center;}
.vf-ai-btn{
padding:10px 16px;border:1px solid var(--g300);border-radius:10px;
background:#fff;display:flex;align-items:center;gap:6px;
cursor:pointer;color:#6366f1;font-size:13px;font-weight:600;
font-family:'DM Sans',sans-serif;transition:all 0.15s;
}
.vf-ai-btn:hover{background:var(--g50);border-color:#6366f1;}
.vf-ai-btn svg{width:18px;height:18px;}
.vf-length-btn{
padding:10px 16px;border:1px solid var(--g300);border-radius:10px;
background:#fff;display:flex;align-items:center;gap:6px;
cursor:pointer;color:#6366f1;font-size:15px;font-weight:700;
font-family:'DM Sans',sans-serif;transition:all 0.15s;
}
.vf-length-btn:hover{background:var(--g50);border-color:#6366f1;}
.vf-write-btn{
width:100%;padding:14px;border:none;border-radius:12px;
background:#6366f1;color:#fff;font-family:'DM Sans',sans-serif;
font-size:15px;font-weight:700;cursor:pointer;transition:all 0.2s;
display:flex;align-items:center;justify-content:center;gap:8px;
}
.vf-write-btn:hover{background:#4f46e5;box-shadow:0 4px 16px rgba(99,102,241,0.3);}
.vf-write-btn svg{width:18px;height:18px;}
.vf-clear{
font-size:13px;font-weight:600;color:#6366f1;cursor:pointer;
background:none;border:none;margin-left:auto;text-decoration:underline;
font-family:'DM Sans',sans-serif;
}
.vf-clear:hover{color:#4f46e5;}
/* Compose enhancements */
.compose-fields{}
.compose-ccbcc-btns{display:flex;gap:4px;flex-shrink:0;margin-left:8px;}
.compose-ccbcc{
padding:2px 10px;border:1px solid var(--g300);border-radius:12px;
background:none;font-family:'DM Sans',sans-serif;font-size:11px;
font-weight:600;color:var(--g600);cursor:pointer;transition:all 0.15s;
}
.compose-ccbcc:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg);}
.compose-ccbcc.active{background:var(--blue-bg);color:var(--blue);border-color:var(--blue);}
.compose-send-group{display:flex;align-items:stretch;position:relative;}
.compose-send{border-radius:20px 0 0 20px;padding:8px 18px 8px 24px;}
.compose-send-arrow{
padding:8px 10px;background:var(--coral);border:none;
border-left:1px solid rgba(255,255,255,0.3);border-radius:0 20px 20px 0;
color:#fff;cursor:pointer;display:flex;align-items:center;transition:background 0.15s;
}
.compose-send-arrow:hover{background:#e55a3a;}
.compose-schedule-dd{
position:absolute;bottom:100%;left:0;margin-bottom:6px;
background:#fff;border:1.5px solid var(--g300);border-radius:10px;
box-shadow:0 4px 16px rgba(0,0,0,0.12);display:none;min-width:180px;z-index:10;
}
.compose-schedule-dd.open{display:block;}
.compose-schedule-item{
display:flex;align-items:center;gap:8px;padding:10px 16px;
cursor:pointer;font-size:13px;font-weight:500;color:var(--g800);
transition:all 0.1s;border-radius:10px;
}
.compose-schedule-item:hover{background:var(--blue-bg);color:var(--blue);}
.compose-delete:hover{color:var(--red) !important;background:rgba(217,48,37,0.08) !important;}
.compose-format-bar{
display:flex;align-items:center;gap:4px;padding:6px 10px;
background:var(--g50);border-bottom:1px solid var(--g200);
}
/* Account dropdown menu */
.account-menu{
position:absolute;top:100%;right:0;margin-top:8px;
width:280px;background:#fff;border:1.5px solid var(--g200);border-radius:16px;
box-shadow:0 4px 20px rgba(0,0,0,0.12);z-index:50;
display:none;animation:slideUp 0.15s ease-out;
padding:16px;
}
.account-menu.open{display:block;}
.acct-profile{display:flex;align-items:center;gap:12px;padding-bottom:14px;}
.acct-avatar{
width:44px;height:44px;border-radius:50%;
background:linear-gradient(135deg,var(--cyan),#29B6F6);
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:18px;flex-shrink:0;
}
.acct-info{flex:1;min-width:0;}
.acct-email{font-size:13px;font-weight:600;color:var(--g900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-name{font-size:12.5px;color:var(--g600);margin-top:1px;}
.acct-actions{display:flex;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--g200);margin-bottom:12px;}
.acct-manage{
padding:7px 20px;background:linear-gradient(135deg,#4FC3F7,#29B6F6);
border:none;border-radius:20px;color:#fff;font-family:'DM Sans',sans-serif;
font-weight:600;font-size:12.5px;cursor:pointer;transition:all 0.15s;
}
.acct-manage:hover{box-shadow:0 2px 10px rgba(79,195,247,0.35);}
.acct-remove{
padding:7px 18px;background:none;border:1.5px solid var(--cyan);
border-radius:20px;color:var(--cyan);font-family:'DM Sans',sans-serif;
font-weight:600;font-size:12.5px;cursor:pointer;transition:all 0.15s;
}
.acct-remove:hover{background:rgba(79,195,247,0.06);}
/* E1 P3 — AI usage chip in the account menu (between Manage/Remove and
"+ Connect another account"). Subtle, info-only; warning tint above 80%
and red tint at 100% so a user knows when they're close to the cap. */
.acct-ai-usage{
padding:10px 2px 14px;border-bottom:1px solid var(--g200);margin-bottom:12px;
font-family:'DM Sans',sans-serif;
}
.acct-ai-usage-label{
display:flex;justify-content:space-between;align-items:baseline;
font-size:11.5px;color:var(--g600);font-weight:500;margin-bottom:6px;
letter-spacing:0.02em;
}
.acct-ai-usage-pct{font-weight:600;color:var(--g800);font-variant-numeric:tabular-nums;}
.acct-ai-usage-bar{
width:100%;height:6px;background:var(--g200);border-radius:3px;overflow:hidden;
}
.acct-ai-usage-fill{
height:100%;background:linear-gradient(90deg,#4FC3F7,#29B6F6);
border-radius:3px;transition:width 0.4s ease;
}
/* Warn at >=80%, red at >=100% — applied by JS via classes on the wrapper. */
.acct-ai-usage.warn .acct-ai-usage-fill{background:linear-gradient(90deg,#fbbf24,#f59e0b);}
.acct-ai-usage.warn .acct-ai-usage-pct{color:#b45309;}
.acct-ai-usage.over .acct-ai-usage-fill{background:linear-gradient(90deg,#ef4444,#dc2626);}
.acct-ai-usage.over .acct-ai-usage-pct{color:#b91c1c;}
.acct-add{
width:100%;padding:10px;background:none;
border:1.5px solid var(--g300);border-radius:24px;
font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
color:var(--g700);cursor:pointer;transition:all 0.15s;text-align:center;
}
.acct-add:hover{border-color:var(--cyan);color:var(--g900);background:var(--g50);}
/* ═══ SETTINGS PANEL ═══ */
.settings-panel{
width:820px;max-height:88vh;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;
}
.settings-header{
display:flex;align-items:center;padding:14px 22px;gap:10px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.settings-header-icon{display:flex;align-items:center;color:var(--g900);}
.settings-header-icon svg{width:22px;height:22px;}
.settings-header-title{font-size:17px;font-weight:700;color:var(--g900);flex:1;}
.settings-body{display:flex;flex:1;overflow:hidden;}
.settings-sidebar{
width:200px;border-right:1px solid var(--g200);padding:16px 0;
flex-shrink:0;overflow-y:auto;
}
.settings-nav-section{
font-size:12px;font-weight:700;color:var(--g800);
padding:12px 20px 6px;letter-spacing:0.3px;
}
.settings-nav-item{
display:flex;align-items:center;gap:10px;
padding:9px 20px;font-size:13.5px;font-weight:500;
color:var(--g700);cursor:pointer;transition:all 0.1s;
}
.settings-nav-item:hover{background:var(--g50);color:var(--g900);}
.settings-nav-item.active{color:var(--blue);font-weight:600;background:var(--blue-bg);}
.settings-nav-item svg{width:18px;height:18px;opacity:0.7;flex-shrink:0;}
.settings-nav-item.active svg{opacity:1;color:var(--blue);}
.settings-content{flex:1;overflow-y:auto;padding:24px 32px;}
.settings-page-title{font-size:18px;font-weight:700;color:var(--g900);margin-bottom:4px;}
.settings-page-desc{font-size:13px;color:var(--g600);margin-bottom:20px;}
.settings-section{margin-bottom:20px;}
.settings-label{font-size:14px;font-weight:700;color:var(--g900);margin-bottom:6px;}
.settings-input{
width:100%;padding:12px 16px;border:1.5px solid var(--g300);border-radius:12px;
font-family:'DM Sans',sans-serif;font-size:14px;color:var(--g800);outline:none;
transition:border-color 0.2s;
}
.settings-input:focus-visible{border-color:var(--blue);}
.settings-input::placeholder{color:var(--g500);}
.settings-pw-wrap{position:relative;}
.settings-pw-wrap .settings-input{padding-right:46px;}
.settings-pw-toggle{
position:absolute;top:50%;right:8px;transform:translateY(-50%);
width:32px;height:32px;display:flex;align-items:center;justify-content:center;
background:none;border:none;border-radius:8px;color:var(--g500);cursor:pointer;
transition:all 0.15s;
}
.settings-pw-toggle:hover{background:var(--g100);color:var(--g800);}
.settings-pw-error{
margin-top:8px;padding:8px 12px;border-radius:8px;
background:#fee2e2;color:var(--red);font-size:12.5px;line-height:1.5;
font-family:'DM Sans',sans-serif;
}
.settings-input.invalid{border-color:var(--red);}
.settings-textarea{
width:100%;padding:12px 16px;border:1.5px solid var(--g300);border-radius:12px;
font-family:'DM Sans',sans-serif;font-size:14px;color:var(--g800);outline:none;
min-height:80px;resize:vertical;transition:border-color 0.2s;
}
.settings-textarea:focus-visible{border-color:var(--blue);}
.settings-textarea::placeholder{color:var(--g500);}
.settings-select{
width:100%;padding:12px 16px;border:1.5px solid var(--g300);border-radius:12px;
font-family:'DM Sans',sans-serif;font-size:14px;color:var(--g800);
background:#fff;appearance:auto;cursor:pointer;outline:none;
}
.settings-photo-row{
display:flex;align-items:center;gap:16px;padding:16px;
border:1.5px solid var(--g300);border-radius:12px;margin-bottom:4px;
}
.settings-photo-avatar{
width:64px;height:64px;border-radius:50%;
background:linear-gradient(135deg,var(--cyan),#29B6F6);
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:24px;flex-shrink:0;
}
.settings-photo-info{flex:1;}
.settings-photo-label{font-size:14px;font-weight:600;color:var(--g900);margin-bottom:6px;}
.settings-upload-btn{
padding:6px 18px;background:linear-gradient(135deg,#4FC3F7,#29B6F6);
border:none;border-radius:16px;color:#fff;font-family:'DM Sans',sans-serif;
font-weight:600;font-size:12px;cursor:pointer;transition:all 0.15s;
}
.settings-upload-btn:hover{box-shadow:0 2px 8px rgba(79,195,247,0.35);}
.settings-photo-delete{
width:32px;height:32px;display:flex;align-items:center;justify-content:center;
border:1px solid var(--g300);background:none;border-radius:50%;cursor:pointer;
color:var(--g600);transition:all 0.15s;
}
.settings-photo-delete:hover{color:var(--red);border-color:var(--red);background:rgba(217,48,37,0.05);}
.settings-photo-delete svg{width:16px;height:16px;}
.settings-text-style{
display:flex;align-items:center;gap:4px;padding:8px 12px;
border:1.5px solid var(--g300);border-radius:12px;flex-wrap:wrap;
}
.settings-text-style select{
padding:4px 8px;border:1px solid var(--g300);border-radius:6px;
font-family:'DM Sans',sans-serif;font-size:12px;color:var(--g700);
background:#fff;cursor:pointer;appearance:auto;
}
.settings-text-style .tpl-tb-btn{
width:28px;height:28px;
}
.settings-footer{
padding:14px 24px;border-top:1px solid var(--g200);
background:var(--g50);display:flex;align-items:center;gap:12px;
}
.settings-save{
padding:10px 28px;background:var(--coral);border:none;border-radius:24px;
color:#fff;font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;
cursor:pointer;transition:all 0.2s;
}
.settings-save:hover{box-shadow:0 2px 12px rgba(255,107,74,0.35);}
.settings-cancel-btn{
padding:10px 22px;background:none;border:1px solid var(--g300);border-radius:24px;
color:var(--g700);font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;
cursor:pointer;transition:all 0.15s;
}
.settings-cancel-btn:hover{background:var(--g50);border-color:var(--g400);}
/* ═══ INLINE EMAIL DETAIL ═══ */
.email-detail-inline{
flex:1;display:flex;flex-direction:column;overflow:hidden;
}
.edi-toolbar{
display:flex;align-items:center;padding:0 12px;height:44px;
border-bottom:1px solid var(--g200);gap:2px;
}
.edi-back{
width:32px;height:32px;display:flex;align-items:center;justify-content:center;
border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g700);
transition:background 0.15s;margin-right:8px;
}
.edi-back:hover{background:var(--g100);}
.edi-back svg{width:20px;height:20px;}
.edi-tool{
width:32px;height:32px;display:flex;align-items:center;justify-content:center;
border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g600);
transition:all 0.15s;
}
.edi-tool:hover{background:var(--g100);color:var(--g800);}
.edi-tool-warn:hover{background:#fff3e0;color:#e65100;}
.edi-tool-danger:hover{background:#fee2e2;color:var(--red);}
.edi-tool svg{width:18px;height:18px;}
.edi-spacer{flex:1;}
.edi-page{font-size:12px;color:var(--g600);margin:0 8px;font-variant-numeric:tabular-nums;}
.edi-subject-row{
display:flex;align-items:center;gap:10px;
padding:16px 24px 12px;
}
.edi-subject{font-size:19px;font-weight:700;color:var(--g900);flex:1;letter-spacing:-0.3px;}
.edi-label-chip{
font-size:13px;font-weight:600;padding:5px 14px;border-radius:6px;
background:var(--blue-bg);color:var(--blue);letter-spacing:0.2px;
}
.edi-scroll{flex:1;overflow-y:auto;padding:0 24px 24px;}
.edi-meta{
display:flex;align-items:center;gap:12px;padding:12px 0 4px;
}
.edi-avatar{
width:40px;height:40px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:15px;flex-shrink:0;
}
.edi-sender-info{flex:1;}
.edi-sender-name{font-size:14px;font-weight:600;color:var(--g900);display:flex;align-items:center;gap:6px;}
.edi-sender-email{font-size:12px;color:var(--g600);}
.edi-to-me{font-size:12px;color:var(--g600);margin-top:1px;}
.edi-to-row{display:flex;align-items:center;gap:6px;margin-top:1px;}
.edi-headers-toggle{
width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
background:none;border:none;border-radius:3px;cursor:pointer;color:var(--g500);
transition:background 0.12s, transform 0.18s;
}
.edi-headers-toggle:hover{background:var(--g100);color:var(--g800);}
.edi-headers-toggle svg{width:14px;height:14px;}
.edi-headers-toggle.open{transform:rotate(-180deg);color:var(--g800);}
.edi-headers{
margin-top:10px;padding:14px 18px;background:#fff;
border:1px solid var(--g200);border-radius:10px;
box-shadow:0 1px 3px rgba(0,0,0,0.04);
animation:slideUp 0.18s ease-out;
}
.edi-headers-table{border-collapse:collapse;width:100%;font-size:13px;line-height:1.6;}
.edi-headers-table td{padding:4px 0;vertical-align:top;}
.edi-headers-key{
width:72px;padding-right:14px !important;text-align:right;
color:var(--g600);font-weight:400;text-transform:lowercase;
font-variant-numeric:tabular-nums;
}
.edi-headers-val{color:var(--g800);}
.edi-headers-val b{font-weight:700;color:var(--g900);}
.edi-date{font-size:12px;color:var(--g600);flex-shrink:0;font-variant-numeric:tabular-nums;}
.edi-date-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.edi-assigned-chip{
font-size:11.5px;color:#4a9ee8;background:rgba(74,158,232,0.10);
padding:3px 10px;border-radius:12px;white-space:nowrap;font-weight:500;
}
.edi-assigned-chip b{font-weight:700;}
.edi-content{font-size:14px;line-height:1.75;color:var(--g800);padding:0 0 16px;}
/* Single-message body — indent it to line up with the sender name + "to"
line (which sit to the right of the 40px avatar + 12px gap), and there's
no divider line above it. Mirrors Gmail's single-message layout. */
.edi-content-single{padding-left:52px;padding-top:2px;}
.edi-content-single > *:first-child{margin-top:0;padding-top:0;}
.edi-thread{margin-top:8px;display:flex;flex-direction:column;}
/* .edi-thread-msg no longer draws its own separator line in the thread
collapse engine — that wraps every message in a .edi-thread-item div
which carries the single border-top. A border here too produced a
double line on expanded messages.
The legacy in-memory reply list (renderThreadReplies) still stacks
bare .edi-thread-msg elements inside a .edi-thread container, so we
scope the old separator to that container only. */
.edi-thread-msg{
padding-top:4px;
}
.edi-thread > .edi-thread-msg{
border-top:1px solid var(--g200);padding-top:18px;margin-top:12px;
}
/* Thread message: keep the body close to the "to ..." header line. The body
HTML often leads with a /
that carries its own top margin — strip
that so there's no large empty band between the header and the first line. */
.edi-thread-msg-header{padding-bottom:4px;}
.edi-thread-msg-body{margin-top:0;}
.edi-thread-msg-body > *:first-child{margin-top:0;padding-top:0;}
.edi-thread-msg .edi-content{padding-bottom:8px;}
.edi-content p{margin-bottom:14px;}
.edi-attachments{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.edi-reply-bar{
display:flex;align-items:center;gap:8px;
padding:12px 24px;border-top:1px solid var(--g200);
background:#fff;flex-shrink:0;
}
.edi-reply-btn{
display:flex;align-items:center;gap:6px;padding:8px 18px;
border:1.5px solid var(--g300);border-radius:20px;background:#fff;
font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
color:var(--g700);cursor:pointer;transition:all 0.15s;
}
.edi-reply-btn:hover{border-color:var(--g400);background:var(--g50);color:var(--g900);}
.edi-reply-btn svg{width:16px;height:16px;}
/* Inline reply compose */
.edi-inline-compose{
position:relative;
border-top:1px solid var(--g200);flex-shrink:0;
padding:0 24px 16px;background:#fff;
}
.edi-ic-header{
display:flex;align-items:center;gap:8px;padding:10px 0 8px;
font-size:13px;color:var(--g600);
}
.edi-ic-header span{font-weight:600;color:var(--g800);}
/* C1 — Edit subject link in the inline composer header. */
.edi-ic-edit-subject{margin-left:auto;border:none;background:none;color:var(--blue);font-size:12px;font-weight:600;cursor:pointer;padding:2px 6px;border-radius:5px;font-family:inherit;}
.edi-ic-edit-subject:hover{background:var(--blue-bg);}
.edi-ic-subject .edi-ic-to-value{font-weight:500;}
.edi-ic-to{
display:flex;align-items:center;gap:6px;padding:6px 0;
font-size:13px;color:var(--g700);border-bottom:1px solid var(--g200);
}
.edi-ic-to-label{color:var(--g500);font-size:12px;width:36px;flex-shrink:0;}
.edi-ic-to-value{flex:1;font-size:13px;color:var(--g800);border:none;outline:none;font-family:'DM Sans',sans-serif;background:none;}
/* Recipient chips (To / Cc / Bcc in compose, reply, reply-all, forward). The wrap is a
flex container that holds previously-entered addresses as blue pills plus the live
editable input that flexes to fill the rest of the row. */
.recip-chips-wrap{
display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;
flex:1;min-width:0;
}
.recip-chips{display:contents;}
.recip-chip{
display:inline-flex;align-items:center;gap:4px;
background:var(--blue-bg);color:var(--blue);
border-radius:14px;padding:2px 4px 2px 10px;
font-size:12.5px;font-weight:500;font-family:'DM Sans',sans-serif;
line-height:1.5;max-width:100%;
}
.recip-chip-text{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;
}
.recip-chip-x{
width:18px;height:18px;border:none;background:transparent;color:var(--blue);
cursor:pointer;display:flex;align-items:center;justify-content:center;
border-radius:50%;font-size:14px;line-height:1;padding:0;flex-shrink:0;
font-family:inherit;
}
.recip-chip-x:hover{background:rgba(74,158,232,0.18);}
.recip-chips-input{
flex:1;min-width:80px;border:none;outline:none;background:none;
font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g800);
padding:2px 0;
}
.edi-ic-recip-triggers{display:inline-flex;gap:2px;flex-shrink:0;margin-left:6px;}
.edi-ic-recip-add{
background:none;border:none;padding:3px 8px;border-radius:6px;
font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;
color:var(--g600);cursor:pointer;transition:all 0.12s;
}
.edi-ic-recip-add:hover{background:var(--blue-bg);color:var(--blue);}
.edi-ic-body{
min-height:100px;max-height:200px;overflow-y:auto;
padding:10px 0;font-size:14px;line-height:1.7;color:var(--g800);
outline:none;font-family:'DM Sans',sans-serif;
}
.edi-ic-body:empty::before{content:attr(data-placeholder);color:var(--g500);}
.edi-ic-body table{border-collapse:collapse;margin:8px 0;}
.edi-ic-body table td, .edi-ic-body table th{border:1px solid var(--g300);padding:6px 10px;min-width:60px;vertical-align:top;}
.edi-ic-body table th{background:var(--g100);font-weight:600;text-align:left;}
.edi-ic-toolbar{
display:flex;align-items:center;gap:4px;padding:8px 0 0;
border-top:1px solid var(--g200);
}
.edi-ic-send{
padding:7px 20px;background:linear-gradient(135deg,var(--coral),#FF8A6A);
border:none;border-radius:18px;color:#fff;font-weight:600;font-size:13px;
cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.2s;
}
.edi-ic-send:hover{box-shadow:0 2px 10px rgba(255,107,74,0.3);}
.compose-send-group .edi-ic-send{border-radius:18px 0 0 18px;padding:7px 16px 7px 20px;}
.edi-ic-tool{
width:30px;height:30px;display:flex;align-items:center;justify-content:center;
border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g600);
transition:all 0.15s;
}
.edi-ic-tool:hover{background:var(--g100);color:var(--g800);}
.edi-ic-tool svg{width:16px;height:16px;}
/* Reply composer format row */
.edi-ic-format-row{
display:flex;align-items:center;gap:2px;padding:6px 0 8px;
border-top:1px solid var(--g200);flex-wrap:wrap;
}
.fmt-select{
padding:4px 8px;border:1px solid var(--g300);border-radius:6px;
font-family:'DM Sans',sans-serif;font-size:12px;color:var(--g700);
background:#fff;cursor:pointer;outline:none;appearance:auto;
max-width:130px;
}
.fmt-font{min-width:110px;}
.fmt-select:hover{border-color:var(--g400);}
.fmt-select:focus-visible{border-color:var(--blue);}
/* Color buttons + picker (reply composer; shares logic with template editor's color picker) */
.edi-color-wrap{position:relative;display:inline-flex;}
.edi-color-btn{flex-direction:column;gap:0;padding:0;width:30px;height:28px;}
.edi-color-btn svg{margin-bottom:1px;}
.edi-color-bar{display:block;width:18px;height:3px;border-radius:1px;margin-top:-2px;border:0.5px solid rgba(0,0,0,0.12);}
.edi-color-picker{
display:none;position:absolute;z-index:50;
background:#fff;border:1px solid var(--g200);border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.06);
padding:12px;width:204px;
}
.edi-color-picker.open{display:block;animation:slideUp 0.15s ease-out;}
.edi-cp-label{font-size:12px;font-weight:700;color:var(--g800);margin-bottom:8px;}
.edi-cp-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;}
.edi-cp-swatch{width:20px;height:20px;border-radius:4px;cursor:pointer;border:1px solid rgba(0,0,0,0.1);transition:transform 0.1s;}
.edi-cp-swatch:hover{transform:scale(1.15);box-shadow:0 1px 4px rgba(0,0,0,0.15);}
.edi-cp-actions{margin-top:10px;padding-top:8px;border-top:1px solid var(--g200);}
.edi-cp-clear{
width:100%;padding:6px 10px;background:var(--g100);border:none;border-radius:6px;
font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;color:var(--g700);
cursor:pointer;transition:background 0.1s;
}
.edi-cp-clear:hover{background:var(--g200);color:var(--g900);}
/* Signature dropdown menu (used by both compose and reply) */
.sig-menu{
display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
background:#fff;border:1px solid var(--g200);border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.06);
min-width:260px;max-width:340px;max-height:300px;overflow-y:auto;
z-index:60;padding:6px;
}
.sig-menu.open{display:block;animation:slideUp 0.15s ease-out;}
.sig-menu-header{font-size:11px;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:0.6px;padding:6px 10px 4px;}
.sig-menu-item{
display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:6px;cursor:pointer;
transition:background 0.12s;
}
.sig-menu-item:hover{background:var(--blue-bg);}
.sig-menu-item .sig-menu-name{font-size:13px;font-weight:600;color:var(--g900);}
.sig-menu-item .sig-menu-preview{font-size:11.5px;color:var(--g600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px;}
.sig-menu-empty{padding:14px 12px;font-size:12.5px;color:var(--g600);text-align:center;line-height:1.5;}
.sig-menu-empty a{color:var(--blue);font-weight:600;cursor:pointer;text-decoration:underline;}
/* Inline image embedded into reply/compose */
.compose-body-editor img, .edi-ic-body img{max-width:100%;height:auto;border-radius:6px;margin:6px 0;}
/* Bullet/numbered lists inside the editors. The global `* { padding:0 }` reset strips
the default ul/ol padding so the bullets sit outside the visible area. Restore proper
list styling here so insertUnorderedList / insertOrderedList produce visible lists. */
.compose-body-editor ul, .edi-ic-body ul,
.compose-body-editor ol, .edi-ic-body ol{
margin:6px 0;padding-left:32px;
}
.compose-body-editor ul, .edi-ic-body ul{list-style:disc outside;}
.compose-body-editor ol, .edi-ic-body ol{list-style:decimal outside;}
.compose-body-editor ul ul, .edi-ic-body ul ul{list-style:circle outside;}
.compose-body-editor ul ul ul, .edi-ic-body ul ul ul{list-style:square outside;}
.compose-body-editor li, .edi-ic-body li{margin:2px 0;line-height:1.6;}
/* Attachment chip strips (reply + compose) */
.edi-ic-attach-strip, .compose-attach-strip{
display:flex;flex-wrap:wrap;gap:6px;
padding:8px 0;border-top:1px solid var(--g200);
}
.compose-attach-strip{padding:8px 16px;}
.attach-strip-chip{
display:inline-flex;align-items:center;gap:8px;
background:var(--g100);border:1px solid var(--g200);border-radius:16px;
padding:5px 6px 5px 12px;font-size:12px;color:var(--g800);
font-family:'DM Sans',sans-serif;max-width:240px;
transition:background 0.12s, border-color 0.12s;
}
.attach-strip-chip:hover{background:var(--g50);border-color:var(--g300);}
.attach-strip-chip svg.att-icon{width:14px;height:14px;color:var(--g600);flex-shrink:0;}
.attach-strip-chip .att-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.attach-strip-chip .att-size{color:var(--g500);font-size:11px;font-variant-numeric:tabular-nums;flex-shrink:0;}
.attach-strip-chip .att-remove{
width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g500);flex-shrink:0;
}
.attach-strip-chip .att-remove:hover{background:#fee2e2;color:var(--red);}
.attach-strip-chip .att-remove svg{width:12px;height:12px;}
.edi-ic-discard{margin-left:auto;}
.edi-ic-discard:hover{color:var(--red) !important;}
/* ═══ ASSIGN EMAIL PANEL ═══ */
.assign-panel{
position:fixed;top:var(--topbar-h);right:var(--rbar-w);bottom:0;
width:360px;background:#fff;border-left:1px solid var(--g200);
box-shadow:-4px 0 16px rgba(0,0,0,0.06);z-index:40;
display:none;flex-direction:column;animation:slideLeft 0.2s ease-out;
}
@keyframes slideLeft{from{transform:translateX(20px);opacity:0;}to{transform:translateX(0);opacity:1;}}
.assign-panel.open{display:flex;}
.assign-header{
display:flex;align-items:center;gap:8px;padding:12px 16px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.assign-header svg{width:20px;height:20px;color:var(--g800);}
.assign-header-title{font-size:15px;font-weight:700;color:var(--g900);flex:1;}
.assign-body{flex:1;overflow-y:auto;padding:12px 16px;}
.assign-current{
padding:8px 12px;background:rgba(255,107,74,0.08);border:1px solid rgba(255,107,74,0.2);
border-radius:8px;font-size:12.5px;color:var(--g800);margin-bottom:12px;
}
.assign-current b{color:var(--coral);}
.assign-self-card{
display:flex;align-items:center;gap:10px;padding:10px 0;
border-bottom:1px solid var(--g200);margin-bottom:8px;
}
.assign-avatar{
width:36px;height:36px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:14px;flex-shrink:0;position:relative;
}
/* Online / offline status indicator on Connect tab + Assign panel avatars.
Small dot sits at bottom-right with a white ring so it reads cleanly against
the coloured avatar background. */
.status-dot{
position:absolute;bottom:-1px;right:-1px;
width:11px;height:11px;border-radius:50%;
border:2px solid #fff;background:var(--g400);
box-sizing:border-box;
}
.status-dot.online{background:#22c55e;}
.status-dot.offline{background:#9ca3af;}
/* Smaller status dot for the compact 32px avatars (chat header, team-member card) */
.conn-avatar[style*="32px"] .status-dot,
.team-member-card .assign-avatar .status-dot{
width:9px;height:9px;border-width:1.5px;
}
.assign-name{font-size:13px;font-weight:600;color:var(--g900);}
.assign-email-text{font-size:11.5px;color:var(--g600);}
.assign-self-btn{
width:100%;padding:8px;background:linear-gradient(135deg,#4FC3F7,#29B6F6);
border:none;border-radius:8px;color:#fff;font-family:'DM Sans',sans-serif;
font-weight:600;font-size:12.5px;cursor:pointer;transition:all 0.15s;margin-top:6px;
}
.assign-self-btn:hover{box-shadow:0 2px 8px rgba(79,195,247,0.35);}
.assign-search{
width:100%;padding:8px 12px 8px 34px;border:1.5px solid var(--g300);border-radius:10px;
font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g800);
outline:none;margin:10px 0;background:#fff;transition:border-color 0.2s;
}
.assign-search:focus-visible{border-color:var(--blue);}
.assign-search-wrap{position:relative;}
.assign-search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--g500);}
.assign-member{
border:1.5px solid var(--g200);border-radius:10px;padding:12px;margin-bottom:10px;
}
.assign-member-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.assign-btn{
width:100%;padding:7px;border:1.5px solid var(--cyan);border-radius:8px;
background:none;font-family:'DM Sans',sans-serif;font-weight:600;font-size:12.5px;
color:var(--cyan);cursor:pointer;transition:all 0.15s;
}
.assign-btn:hover{background:rgba(79,195,247,0.06);}
.assign-section-title{font-size:13px;font-weight:700;color:var(--g900);margin:16px 0 8px;}
.assign-date-label{font-size:11px;color:var(--g600);font-weight:600;margin:10px 0 6px;border-bottom:1px solid var(--g200);padding-bottom:4px;}
.assigned-item{
border:1.5px solid var(--g200);border-radius:10px;padding:10px 12px;margin-bottom:8px;
position:relative;
}
.assigned-item-line{font-size:12px;color:var(--g700);line-height:1.6;}
.assigned-item-line b{color:var(--g900);font-weight:600;}
.assigned-reminder{
position:absolute;top:10px;right:10px;width:24px;height:24px;
display:flex;align-items:center;justify-content:center;
border:none;background:none;cursor:pointer;color:var(--g500);
border-radius:50%;transition:all 0.15s;
}
.assigned-reminder:hover{background:var(--g100);color:var(--g800);}
.assigned-reminder svg{width:16px;height:16px;}
/* ═══ CONNECT / CHAT PANEL ═══ */
.connect-panel{
position:fixed;top:var(--topbar-h);right:var(--rbar-w);bottom:0;
width:360px;background:#fff;border-left:1px solid var(--g200);
box-shadow:-4px 0 16px rgba(0,0,0,0.06);z-index:40;
display:none;flex-direction:column;animation:slideLeft 0.2s ease-out;
}
.connect-panel.open{display:flex;}
.conn-header{
display:flex;align-items:center;gap:8px;padding:12px 16px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.conn-header svg{width:20px;height:20px;color:var(--g800);}
.conn-header-title{font-size:15px;font-weight:700;color:var(--g900);flex:1;}
.conn-search{
width:100%;padding:8px 12px 8px 36px;border:1.5px solid var(--g300);border-radius:10px;
font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g800);
outline:none;box-sizing:border-box;margin:0;
}
.conn-search:focus-visible{border-color:var(--blue);}
/* The wrap owns the outer 16px gutter; the input fills it edge-to-edge.
The icon sits inside the input box, 12px in from the input's left edge
(16px wrap padding + 12px = 28px from the wrap edge). */
.conn-search-wrap{position:relative;padding:10px 16px;}
.conn-search-wrap svg{
position:absolute;left:28px;top:50%;transform:translateY(-50%);
width:16px;height:16px;color:var(--g500);pointer-events:none;
}
.conn-search-wrap input{width:100%;}
.conn-list{flex:1;overflow-y:auto;}
/* Connect list-view tab strip: Team Members / Groups */
.conn-tabs{display:flex;border-bottom:1px solid var(--g200);padding:0 16px;flex-shrink:0;}
.conn-tab{
flex:1;padding:10px 4px;background:none;border:none;cursor:pointer;
font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:var(--g500);
border-bottom:2px solid transparent;margin-bottom:-1px;
}
.conn-tab:hover{color:var(--g800);}
.conn-tab.active{color:var(--blue);border-bottom-color:var(--blue);}
/* Unread-count badge on a Connect tab. */
.conn-tab-badge{
display:inline-flex;align-items:center;justify-content:center;
min-width:16px;height:16px;padding:0 4px;margin-left:6px;border-radius:8px;
background:var(--blue);color:#fff;font-size:9px;font-weight:700;
vertical-align:middle;box-sizing:border-box;
}
.conn-contact{
display:flex;align-items:center;gap:10px;padding:10px 16px;
cursor:pointer;transition:background 0.1s;border-bottom:1px solid var(--g100);
}
.conn-contact:hover{background:var(--g50);}
.conn-avatar{
width:36px;height:36px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:14px;flex-shrink:0;position:relative;
}
.conn-badge{
position:absolute;top:-2px;right:-2px;width:16px;height:16px;
border-radius:50%;background:var(--blue);color:#fff;font-size:8px;
font-weight:700;display:flex;align-items:center;justify-content:center;
border:2px solid #fff;
}
.conn-info{flex:1;min-width:0;}
.conn-name{font-size:13px;font-weight:600;color:var(--g900);}
.conn-last-msg{font-size:11.5px;color:var(--g600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.conn-time{font-size:10.5px;color:var(--g500);flex-shrink:0;}
/* Per-conversation unread count — a pill on the right of the list row. */
.conn-unread{
flex-shrink:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
background:var(--blue);color:#fff;font-size:10px;font-weight:700;
display:flex;align-items:center;justify-content:center;box-sizing:border-box;
}
/* A row with unread messages: darker, heavier text so it stands out. */
.conn-contact.has-unread .conn-name{font-weight:800;}
.conn-contact.has-unread .conn-last-msg{color:var(--g800);font-weight:600;}
/* Chat view */
.chat-header{
display:flex;align-items:center;gap:10px;padding:10px 16px;
border-bottom:1px solid var(--g200);
}
.chat-back{
width:28px;height:28px;display:flex;align-items:center;justify-content:center;
border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g600);
}
.chat-back:hover{background:var(--g100);}
.chat-back svg{width:18px;height:18px;}
.chat-name{flex:1;font-size:14px;font-weight:600;color:var(--g900);}
.chat-action{
width:28px;height:28px;display:flex;align-items:center;justify-content:center;
border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g600);
}
.chat-action:hover{background:var(--g100);}
.chat-action svg{width:18px;height:18px;}
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;}
.chat-bubble{
max-width:80%;padding:10px 14px;border-radius:14px;font-size:13px;
line-height:1.5;position:relative;
}
/* Sender name above a message in a GROUP chat — bigger and bold so it's
clearly distinct from the message text below it. */
.chat-bubble-sender{
font-size:14px;font-weight:800;color:var(--g900);
margin-bottom:3px;line-height:1.3;
}
.chat-bubble.them{
background:var(--g100);color:var(--g900);align-self:flex-start;
border-bottom-left-radius:4px;
}
.chat-bubble.me{
background:linear-gradient(135deg,#B3E5FC,#81D4FA);color:var(--g900);
align-self:flex-end;border-bottom-right-radius:4px;
}
.chat-bubble-time{font-size:10px;color:var(--g500);margin-top:4px;}
.chat-input-bar{
padding:10px 16px;border-top:1px solid var(--g200);display:flex;flex-direction:column;gap:8px;
}
.chat-input{
width:100%;padding:10px 14px;border:1.5px solid var(--g300);border-radius:10px;
font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g800);outline:none;
}
.chat-input:focus-visible{border-color:var(--blue);}
.chat-input::placeholder{color:var(--g500);}
.chat-send-btn{
width:100%;padding:9px;background:linear-gradient(135deg,#4FC3F7,#29B6F6);
border:none;border-radius:10px;color:#fff;font-family:'DM Sans',sans-serif;
font-weight:600;font-size:13px;cursor:pointer;transition:all 0.15s;
}
.chat-send-btn:hover{box-shadow:0 2px 8px rgba(79,195,247,0.35);}
/* Chat email card */
.chat-email-card{
max-width:85%;
border:1.5px solid var(--g200);border-radius:12px;padding:10px 14px;
background:#fff;cursor:pointer;transition:all 0.15s;margin:4px 0;
}
/* Side depends on sender, same as .chat-bubble.me / .them */
.chat-email-card.me{align-self:flex-end;}
.chat-email-card.them{align-self:flex-start;}
.chat-email-card:hover{border-color:var(--g400);box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.chat-email-card-line{font-size:12px;color:var(--g700);line-height:1.6;}
.chat-email-card-line b{color:var(--g900);font-weight:600;}
.chat-email-card-assignee{font-size:11px;color:var(--cyan);margin-top:3px;}
.chat-email-card .chat-bubble-time{margin-top:4px;}
.chat-email-card-icon{
float:right;width:20px;height:20px;color:var(--g400);margin-left:8px;margin-top:2px;
}
/* ═══ OPENED EMAIL PANEL ═══ */
.opened-panel{
position:fixed;top:var(--topbar-h);right:var(--rbar-w);bottom:0;
width:360px;background:#fff;border-left:1px solid var(--g200);
box-shadow:-4px 0 16px rgba(0,0,0,0.06);z-index:40;
display:none;flex-direction:column;animation:slideLeft 0.2s ease-out;
}
.opened-panel.open{display:flex;}
.opened-list{flex:1;overflow-y:auto;padding:0 16px 16px;}
.opened-card{
border:1.5px solid var(--g200);border-radius:10px;padding:10px 14px;
margin-bottom:8px;cursor:pointer;transition:all 0.15s;
}
.opened-card:hover{border-color:var(--g400);background:var(--g50);}
.opened-card-line{font-size:12px;color:var(--g700);line-height:1.6;}
.opened-card-line b{color:var(--g900);font-weight:600;}
/* ═══ ADD TO TEAM PANEL ═══ */
.team-panel{
position:fixed;top:var(--topbar-h);right:var(--rbar-w);bottom:0;
width:360px;background:#fff;border-left:1px solid var(--g200);
box-shadow:-4px 0 16px rgba(0,0,0,0.06);z-index:40;
display:none;flex-direction:column;animation:slideLeft 0.2s ease-out;
}
.team-panel.open{display:flex;}
.team-tabs{display:flex;border-bottom:1px solid var(--g200);}
.team-tab{
flex:1;padding:10px;text-align:center;font-size:13px;font-weight:600;
color:var(--g600);cursor:pointer;border-bottom:2px solid transparent;
transition:all 0.15s;font-family:'DM Sans',sans-serif;background:none;border-top:none;border-left:none;border-right:none;
}
.team-tab:hover{color:var(--g800);}
.team-tab.active{color:var(--cyan);border-bottom-color:var(--cyan);}
.team-body{flex:1;overflow-y:auto;padding:16px;}
.team-member-card{
display:flex;align-items:center;gap:10px;padding:10px;
border:1.5px solid var(--g200);border-radius:10px;margin-bottom:8px;
}
.team-member-card .assign-avatar{width:32px;height:32px;font-size:13px;}
.team-member-name{font-size:13px;font-weight:600;color:var(--g900);}
.team-member-email{font-size:11px;color:var(--g600);}
.team-member-remove{
margin-left:auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
border:none;background:none;cursor:pointer;color:var(--g500);border-radius:50%;
}
.team-member-remove:hover{background:var(--g100);color:var(--red);}
.team-member-remove svg{width:14px;height:14px;}
/* ═══ ASK AI PANEL ═══ */
.askai-panel{
position:fixed;top:var(--topbar-h);right:var(--rbar-w);bottom:0;
width:380px;background:#fff;border-left:1px solid var(--g200);
box-shadow:-4px 0 16px rgba(0,0,0,0.06);z-index:40;
display:none;flex-direction:column;animation:slideLeft 0.2s ease-out;
}
.askai-panel.open{display:flex;}
.askai-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;}
.askai-msg{max-width:90%;font-size:13px;line-height:1.6;}
.askai-msg.assistant{align-self:flex-start;}
.askai-msg.user{align-self:flex-end;}
.askai-msg-label{font-size:11px;font-weight:700;color:var(--g900);margin-bottom:4px;}
.askai-msg-label.user-label{text-align:right;color:var(--coral);}
.askai-msg-bubble{padding:10px 14px;border-radius:12px;}
/* Ask AI answer: numbered items each on their own block with spacing
between them; plain text lines get a smaller gap. */
.askai-list-item{margin:8px 0;line-height:1.55;}
.askai-list-item:first-child{margin-top:0;}
.askai-list-item:last-child{margin-bottom:0;}
.askai-list-item strong{font-weight:700;color:var(--g900);}
.askai-text-line{margin:4px 0;line-height:1.55;}
.askai-text-line:first-child{margin-top:0;}
/* Ask AI section headings — Summary / Key Information / Pending Actions /
Operational Risks / Recommended Action. The model emits these as
"Heading: body" at the start of a line; the renderer wraps the heading
in this class so it's visually distinguished from the surrounding prose.
Bold + underline makes the structure scannable at a glance. */
.askai-heading{font-weight:700;text-decoration:underline;text-underline-offset:2px;color:var(--g900);}
.askai-msg.assistant .askai-msg-bubble{background:var(--g100);color:var(--g800);border-bottom-left-radius:4px;}
.askai-msg.user .askai-msg-bubble{background:linear-gradient(135deg,#FFF3E0,#FFE0B2);color:var(--g900);border-bottom-right-radius:4px;}
/* CORR-75 ② — one-line footnote above the Ask AI input row, standard AI-
assistant hedge. Muted grey (var(--g500)) matches the placeholder colour
(.askai-input::placeholder below), so the disclaimer reads as low-
emphasis chrome, not a message from the model. Sits on the panel
background above the input row's border-top so it stays a distinct
affordance instead of being pulled into the input's visual group. */
.askai-disclaimer{padding:6px 16px 0;font-size:11px;color:var(--g500);text-align:center;line-height:1.4;}
/* CORR-77 — reference disclaimer chip shown UNDER a freight-knowledge answer,
inside the assistant bubble. Distinct from the always-on .askai-disclaimer:
this ties the "verify with official sources" caveat to the specific
knowledge answer (knowledge answers return no email cards). Driven by the
`knowledge` flag the backend returns. */
.askai-knowledge-chip{margin-top:8px;padding:6px 10px;background:var(--blue-bg);color:var(--g700);border-left:3px solid var(--blue);border-radius:6px;font-size:11px;line-height:1.4;}
/* CORR-68 — align-items:flex-end so the Send button stays pinned to the
bottom as the textarea grows. Pre-CORR-68 was implicit stretch (both
items filling the row height); with a growing textarea that would
stretch the button too. */
.askai-input-bar{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--g200);align-items:flex-end;}
.askai-input{
flex:1;padding:10px 14px;border:1.5px solid var(--g300);border-radius:10px;
font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g800);outline:none;
/* CORR-68 — auto-growing textarea. resize:none prevents the corner
drag-handle native to