/* as-email.css v0.1.30 — all rules #as-app scoped */ /* v0.10.104: was `calc(100vh - 52px)` — live-measured against the real subheader * toolbar + .cnt chrome above this wrap (.as-comms-actions row + whatever else * sits above #as-comms-panel-email) and confirmed via getBoundingClientRect() * that "52" undercounted it by 64px, so the wrap rendered 64px taller than the * actual viewport with nothing clipping the excess locally — the outer .as-main * scroll container took over instead, pushing the sidebar's pinned * settings-gear footer below the fold (Glenn, 2026-08-22). 116 is the real * measured offset, confirmed live to bring mainScrollHeight down to exactly * mainClientHeight (zero overflow) before shipping this constant. */ #as-app .as-email-wrap{display:flex;flex-direction:column;height:calc(100vh - 116px);overflow:hidden} #as-app .as-email-layout{display:flex;flex:1;min-height:0;width:100%;overflow:hidden} /* v0.10.90: was a plain scrolling block (overflow-y:auto directly on the * sidebar) — now flex-column so a pinned settings-gear footer can sit below * the scrolling label list, matching the app-chrome nav sidebar's own * .side/.sfoot split (templates/admin-app.php) rather than inventing a new * layout primitive. */ #as-app .as-email-sidebar{width:185px;flex:0 0 185px;border-right:1px solid var(--b);overflow:hidden;background:var(--s);display:flex;flex-direction:column} /* AS-0055 mobile follow-up (2026-09-12): the "current folder" summary bar * (renderLabels(), as-email.js) and its dropdown wrapper only matter at * <=768px (see the 768px block below) — on desktop the summary bar stays * hidden and the dropdown wrapper stays `display:contents` so * .as-email-labels-scroll/.as-email-sidebar-foot are unaffected, direct * flex children of .as-email-sidebar exactly as before this pass. */ #as-app .as-email-sidebar-summary{display:none} #as-app .as-email-sidebar-dropdown{display:contents} #as-app .as-email-labels-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 0} #as-app .as-email-sidebar-foot{padding:10px 14px;border-top:1px solid var(--b);display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--t2);font-size:12px;flex-shrink:0;transition:background .1s} #as-app .as-email-sidebar-foot:hover{background:var(--sa);color:var(--t1)} #as-app .as-email-sidebar-foot svg{flex-shrink:0} #as-app .as-label-item{display:flex;align-items:center;gap:8px;padding:7px 14px 7px 12px;font-size:12.5px;color:var(--t2);cursor:pointer;border-radius:0 18px 18px 0;margin-right:8px;transition:background .1s} #as-app .as-label-item:hover{background:var(--sa)} #as-app .as-label-active{background:color-mix(in srgb,var(--ac) 14%,transparent)!important;color:var(--t1);font-weight:600} #as-app .as-label-sub{padding-left:34px;font-size:11.5px} #as-app .as-label-icon{width:18px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--t3)} #as-app .as-label-active .as-label-icon{color:var(--ac)} #as-app .as-label-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #as-app .as-label-badge{background:var(--rd);color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:8px;min-width:18px;text-align:center} #as-app .as-label-divider{height:1px;background:var(--b);margin:8px 16px} #as-app .as-drag-over{background:color-mix(in srgb,var(--ac) 18%,transparent)!important} #as-app .as-email-connect-msg{font-size:11px;color:var(--t3);padding:16px} #as-app .as-email-main{flex:1;min-width:0;width:0;display:flex;flex-direction:column;overflow:hidden} /* v0.10.56: .as-email-toolbar / -search / -left / -right and .as-search-icon removed (punch-list item 9) — search, pagination and split-toggle moved into the Communications subheader's #as-comms-actions-email, styled by .osearch-toggle (actionstudio.css) and .as-toolbar-btn below instead. */ /* v0.10.54: 34px to match .btn/.seg's fixed 34px header-bar height (was 32px, a visible 2px mismatch when these sit in the same toolbar row). */ #as-app .as-toolbar-btn{width:34px;height:34px;box-sizing:border-box;border:1px solid var(--b);border-radius:var(--rs);background:var(--s);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);transition:all .12s;padding:0} #as-app .as-toolbar-btn:hover{border-color:var(--ac);color:var(--t1);background:var(--sa)} #as-app .as-compose-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 16px;border:none;border-radius:var(--rs);background:var(--ac);color:#fff;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit;transition:opacity .12s} #as-app .as-compose-btn:hover{opacity:.85} #as-app #as-email-inbox-panel{flex:1;min-height:0;overflow:hidden} #as-app .as-email-inbox-split{display:flex;height:100%;min-height:0;overflow:hidden} #as-app .as-split-horizontal .as-email-inbox-split{flex-direction:column} #as-app .as-split-horizontal #as-email-list-wrap{flex:1 1 50%;min-height:80px;overflow-y:auto;overflow-x:hidden} #as-app .as-split-horizontal .as-email-resize-handle{height:5px;flex-shrink:0;cursor:row-resize;background:var(--b);position:relative;z-index:10} #as-app .as-split-horizontal .as-email-resize-handle:hover{background:var(--ac)} #as-app .as-split-horizontal .as-email-resize-handle::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:3px;border-top:1px solid var(--t3);border-bottom:1px solid var(--t3)} #as-app .as-split-horizontal #as-email-preview{flex:1 1 50%;min-height:80px;overflow:hidden;background:color-mix(in srgb,var(--sa) 50%,transparent)} /* v0.10.151: Split's Inbox/Follow-up resize handle — same shape as * .as-split-horizontal .as-email-resize-handle just above (grip dashes via * ::after, hover accent), scoped to its own class so it can't accidentally * pick up/drift from that other handle's rules. Drag logic lives in * as-email.js's own new RESIZE HANDLE block (as-triage-resize-handle). */ #as-app .as-triage-resize-handle{height:5px;flex-shrink:0;cursor:row-resize;background:var(--b);position:relative;z-index:10} #as-app .as-triage-resize-handle:hover{background:var(--ac)} #as-app .as-triage-resize-handle::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:3px;border-top:1px solid var(--t3);border-bottom:1px solid var(--t3)} /* AS-0226 follow-on: Split's mobile density toggle — the tappable * replacement for the previously non-functional gray gap between the * stacked Inbox/Follow-up column and the Today/Calendar column. Desktop * (.as-triage-wrap stays a row, side-by-side) has no use for this, so it's * hidden by default here; the mobile-only display/behavior rules live in * actionstudio.css's existing @media(max-width:768px) block alongside the * rest of Split's mobile layout (as-density-mail/-cal collapse rules, * AS-0187 collapsible sections). Markup: templates/admin-app.php, between * .as-triage-left and .as-triage-right. Toggle logic: asToggleTriageDensity() * in as-email.js. */ @media (min-width:769px){#as-app .as-triage-vdivider{display:none}} #as-app .as-triage-vdiv-btn{-webkit-appearance:none;appearance:none;border:none;background:transparent;color:var(--t3);cursor:pointer;font-family:inherit} #as-app .as-triage-vdiv-btn:hover{color:var(--ac)} #as-app .as-triage-vdiv-btn.is-active{color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent)} #as-app .as-split-vertical .as-email-inbox-split{flex-direction:row} #as-app .as-split-vertical #as-email-list-wrap{flex:0 0 360px;overflow-y:auto;overflow-x:hidden} #as-app .as-split-vertical .as-email-resize-handle{width:5px;flex-shrink:0;cursor:col-resize;background:var(--b);position:relative;z-index:10} #as-app .as-split-vertical .as-email-resize-handle:hover{background:var(--ac)} #as-app .as-split-vertical .as-email-resize-handle::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:3px;height:30px;border-left:1px solid var(--t3);border-right:1px solid var(--t3)} #as-app .as-split-vertical #as-email-preview{flex:1;min-width:0;overflow:hidden;background:color-mix(in srgb,var(--sa) 50%,transparent)} #as-app .as-split-vertical .as-email-row{flex-wrap:wrap;padding:6px 10px} #as-app .as-split-vertical .as-email-subject{width:100%;order:10;padding-left:38px;margin-top:2px;font-size:11px} #as-app .as-split-vertical .as-email-from{flex:1;width:auto} #as-app .as-split-vertical .as-email-snippet{display:none} #as-app #as-email-list{min-width:0;overflow:hidden} /* AS-0127 (v0.10.238) — `background:var(--s)` is the ROOT-CAUSE fix, not a * cosmetic addition. Read this before touching either row color again. * * The alternating pair was never a pair. Only ONE member had a color: the * .as-row-even rule below. This rule declared no background at all, and * nothing between here and #as-app paints one (#as-email-list, * #as-email-list-wrap, .as-email-inbox-split, #as-email-inbox-panel, * .as-email-main, .as-email-layout, .as-email-wrap, .cnt, .as-main are all * background-less), so the "white" row was transparent all the way down to * #as-app{background:var(--bg)} and painted #f8f6f1 — a warm off-white, never * white. Measured, not inferred: getComputedStyle returned rgba(0,0,0,0) here * and the sampled raster pixel returned rgb(248,246,241). * * That is why this ticket kept RE-OPENING rather than just being wrong once. * With the base pinned to --bg there was no headroom left inside the warm * palette for a visible tint, so every pass had to pick a failure: * - pre-v0.10.159 --zebra:#faf8f4 — warm and correct in family, but only * 0.018 relative luminance from the #f8f6f1 base -> filed as AS-0011, * "flat pale-tan wash, no visible striping". * - v0.10.159 (AS-0011) --zebra:#eceff1 — contrast solved (0.063) by * LEAVING the warm family for a cool blue-gray. The pair now straddled * neutral (base R-B +7, stripe R-B -5), which is the textbook condition * for simultaneous contrast: the warm band reads pink, the cool band * reads gray. Filed as AS-0127. The pixels never changed between loads — * that is exactly why it looked untriggered and screen-dependent. * Fix the hue, lose the contrast; fix the contrast, lose the hue. Recoloring * again could only have swapped one failure for the other. * * Pinning the base to --s restores the headroom (white in light, #1f2228 in * dark) AND makes the row opaque, so it can no longer inherit the tone of * whatever happens to be behind the list. tests/as-0127-inbox-zebra-smoke.js * now asserts BOTH ends at once — warmth (kills #eceff1) and luminance * separation (kills #faf8f4) — so neither future pass can "fix" one by * breaking the other. Run it green before changing any of these three values. * * Specificity note: this is (1,1,0); the .as-row-even stripe below is (1,2,0) * and :hover is (1,2,0) declared after, so both still win cleanly. The * !important state rules (.as-email-selected/.as-email-followedup) are * unaffected — they replace this element's own background exactly as before. */ #as-app .as-email-row{display:flex;align-items:center;gap:8px;padding:7px 14px;background:var(--s);border-bottom:1px solid var(--b);cursor:pointer;transition:background .1s,transform .18s ease-out;font-size:12.5px;position:relative;overflow:hidden;min-width:0;max-width:100%} #as-app .as-email-row:hover{background:var(--row-hover)} /* AS-0055 (mobile Communications build, 2026-09-11): swipe-to-reveal Archive/Delete, per the approved mobile-audit prototype. .as-swipe-actions sits behind .as-email-row at all times (same opaque var(--s) background already set above covers it at rest) — the row is the only thing that ever moves, via touchstart/touchmove/touchend in enableRowDrag() (as-email.js), never CSS alone. Functionally inert on desktop/mouse (nothing fires touch events there), so no viewport gating is needed for correctness — these rules apply at every width. */ #as-app .as-swipe-wrap{position:relative;overflow:hidden} #as-app .as-swipe-actions{position:absolute;top:0;right:0;bottom:0;width:144px;display:flex} #as-app .as-swipe-act{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:none;color:#fff;font-size:10px;font-weight:700;cursor:pointer} #as-app .as-swipe-act svg{width:18px;height:18px} #as-app .as-swipe-archive{background:var(--t3)} #as-app .as-swipe-trash{background:var(--rd)} /* AS-0194: Follow-up section's swipe strip (Resolve/Archive, as-email.js's * followupSwipeRowHTML) and Calendar List view's swipe strip (Delete-only, * as-v-events.js's listCardSwipeHTML) reuse this exact .as-swipe-wrap/ * .as-swipe-actions/.as-swipe-act markup and CSS unchanged — only a new * color for the new "Resolve" action is needed here; Archive/Delete already * have var(--t3)/var(--rd) above. */ #as-app .as-swipe-resolve{background:var(--gn)} /* AS-0221 (mobile-forward rebuild, Stage 2): Split Inbox rows get their own * single-button swipe-left strip (splitInboxSwipeRowHTML, as-email.js) — * "Follow-up"/"Remove", amber, per the approved as-mobile-shell-v1 * prototype's Comm.avatarRow() (swipe-left reveal on un-flagged rows is * amber var(--am), distinct from the Follow-up LIST's own swipe-left * "Resolve" above, which stays green to match that same prototype's * inFollowUp=true "Move to Inbox" reveal). Desktop already has this same * action one click away via the row's kebab menu ("Mark for follow-up") — * this swipe is the mobile-native equivalent, matching every other * touch-primary row in this shell (Priorities/Performance/People/Companies) * already having its own single swipe action. */ #as-app .as-swipe-followup{background:var(--am)} /* AS-0215: defense in depth on top of the opaque-foreground fix (see * actionstudio.css's .as-swipe-wrap > .as-event-card comment for the Calendar * List/Today root cause). AS.swipeReveal.bind() (as-utils.js) and Email * mode's own IS_TOUCH_DEVICE gate (as-email.js) both no-op the swipe gesture * entirely on `matchMedia('(pointer:coarse)').matches===false` — a mouse/ * trackpad device can never open any .as-swipe-actions layer in the first * place, on ANY of the three surfaces that share this markup (Inbox, * Follow-up, Calendar List/Today). `not (pointer:coarse)` mirrors that same * false-gate condition exactly (unlike `(pointer:fine)`, it also covers a * no-pointer environment, same as the JS gate would treat it), so this can * never hide the strip somewhere real touch input could still reveal it. */ @media not (pointer:coarse){ #as-app .as-swipe-actions{display:none} } /* v0.10.140: was :nth-child(even) — the "all caught up" fallback banner * (renderInbox, as-email.js) is inserted as a sibling INSIDE this same list, * so nth-child's DOM-position count shifted by one every time that banner * appeared/disappeared (e.g. between a cached paint and the fresh-fetch * repaint moments later), visibly flipping every row's stripe. Striping is * now driven by an explicit visible-row-index class set in JS * (emailRowHtml/appendInboxRows), immune to unrelated sibling markup. */ #as-app .as-email-row.as-row-even{background:var(--zebra)} #as-app .as-email-row.as-row-even:hover{background:var(--row-hover)} #as-app .as-email-unread{font-weight:600;border-left:3px solid var(--ac)} /* AS-0191: was color-mix(...,transparent) — ~92% see-through, which let the * swipe-reveal Archive/Delete strip (.as-swipe-actions, positioned behind * the row until it translates) bleed through visually on a selected row, * AND meant the still-present, still-opaque-in-the-DOM .as-email-row div * (just visually transparent) is what a tap actually landed on — not the * buttons underneath. Mixing against var(--s), the row's own opaque base * (see .as-email-row above), keeps the identical visible tint but restores * real opacity. Same bug/fix applies to .as-bulk-checked/.as-email-followedup * just below — neither is swiped today, but both share the exact pattern. */ #as-app .as-email-selected{background:color-mix(in srgb,var(--ac) 8%,var(--s))!important} /* AS-0033: bulk row-selection checkbox — native checkbox, no custom skin, * same "don't invent a new visual system" call as the existing * .as-email-dd-checkbox rows. .as-bulk-checked gets its own (distinct from * .as-email-selected, which marks the currently-PREVIEWED row, an unrelated * state that can be true at the same time) tint so a checked-but-not-open * row is still visually obvious at a glance. */ #as-app .as-email-row-check-wrap{display:inline-flex;flex-shrink:0} #as-app .as-email-row-check{width:14px;height:14px;flex-shrink:0;margin:0;cursor:pointer;accent-color:var(--ac)} #as-app .as-bulk-checked{background:color-mix(in srgb,var(--ac) 5%,var(--s))} /* Bulk-selection toolbar — hidden (display:none) until 1+ rows are checked, * see renderBulkBar()/asBulkToggle() in as-email.js. Sits above the list * it belongs to (#as-email-list-wrap / .as-triage-left in admin-app.php), * same height/border language as .pv-hdr just below in this file so it * doesn't read as a new component. */ #as-app .as-email-bulkbar{display:none;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--b);background:var(--sa);flex-shrink:0} #as-app .as-bulk-selectall{display:flex;align-items:center;cursor:pointer;flex-shrink:0} #as-app .as-bulk-selectall input{margin:0;cursor:pointer;accent-color:var(--ac)} #as-app .as-bulk-count{font-size:11px;font-weight:600;color:var(--t2);white-space:nowrap;margin-right:2px} #as-app .as-bulk-spacer{flex:1} #as-app .as-email-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0} #as-app .as-avatar-sm{width:32px;height:32px;font-size:11px} #as-app .as-email-from{width:130px;flex:0 0 130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1)} #as-app .as-email-subject{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1)} #as-app .as-email-subject-text{font-weight:inherit} #as-app .as-email-snippet{color:var(--t3);font-weight:400} #as-app .as-email-date{width:58px;flex:0 0 58px;text-align:right;font-size:11px;color:var(--t3);white-space:nowrap} #as-app .as-email-action-btn{width:26px;height:26px;border:none;background:transparent;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);transition:all .1s;padding:0} #as-app .as-email-action-btn:hover{background:var(--b);color:var(--t1)} /* v0.10.94: replaces .as-email-important-btn (the IMPORTANT-label star, * deprecated — see as-email.js's renderInbox/splitRowHTML comments). The * kebab (More) button now sits at the row's left edge instead, always * visible like the star was. Follow-up state (as_email_followup) shows as * a purple accent — deliberately NOT var(--ac)/var(--acl), which * .as-email-unread's left border and List view's "Now" highlight * (.as-evl-next) already use; a message can be unread AND flagged at once, * so the two states need visually distinct treatments, not the same color * reused for two different meanings on one row. */ #as-app .as-email-kebab-left{width:22px;height:22px;flex-shrink:0;border-radius:50%} /* !important to beat #as-app .as-email-row.as-row-even's zebra-stripe * background (as-email.css above) — same reasoning/precedent as * .as-email-selected's own !important just above it there. */ /* v0.10.118: Glenn wants follow-up to override the unread left border with * blue rather than stay border-less (see the comment above this block for * why it was originally left border-less) — .as-email-followedup comes * after .as-email-unread in source order so this wins the cascade at equal * specificity when a row is both. Bold text (from .as-email-unread) still * survives as the remaining unread signal on a flagged-and-unread row. */ #as-app .as-email-followedup{background:color-mix(in srgb,var(--pu) 6%,var(--s))!important;border-left:3px solid var(--bl)} #as-app .as-email-followedup .as-email-kebab-left{color:var(--pu);background:var(--pul)} /* v0.10.110: sidebar Follow-up box (plain Email mode) — narrower context * than the wide list-pane row style .as-email-row normally renders in, so * this modifier trims padding/font-size to fit the 185px sidebar rail. * min-height on the box keeps it a viable drop target even with zero items. */ #as-app .as-email-followup-box{min-height:40px} #as-app .as-email-followup-empty{padding:10px 14px;font-size:11px;color:var(--t3);line-height:1.4} #as-app .as-email-row-compact{padding:6px 12px} #as-app .as-email-row-compact .as-email-subject{font-size:11.5px} #as-app .as-email-dropdown{position:absolute;right:0;top:100%;background:var(--s);border:1px solid var(--b);border-radius:var(--rs);box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:200;min-width:160px;padding:4px 0} /* v0.10.95: the sidebar-settings dropdown (asEmailSidebarSettings) grew from * 2 rows to up to ~11 (accounts + every FOLDER_DEFS entry) — cap it so it * can't run off-screen on a short window; it opens upward (bottom-anchored, * see the inline style set in JS) so this is the realistic overflow case. */ #as-app .as-email-dd-scroll{max-height:70vh;overflow-y:auto} #as-app .as-email-dd-item{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:12px;cursor:pointer;white-space:nowrap;color:var(--t2)} #as-app .as-email-dd-item:hover{background:var(--sa);color:var(--t1)} #as-app .as-email-dd-item svg{flex-shrink:0} /* AS-0209: read toggle — pending indicator while a read change for the * thread is in flight, and team-inbox "Mark unread" rendered unavailable * (instead of a toast after the click). Rows get a quiet pending hint too. */ #as-app .as-email-dd-readtoggle .as-dd-pending{margin-left:auto;padding-left:10px;font-size:10px;color:var(--t3)} #as-app .as-email-dd-readtoggle.is-disabled{color:var(--t3);cursor:default;opacity:.55} #as-app .as-email-dd-readtoggle.is-disabled:hover{background:transparent;color:var(--t3)} #as-app .as-email-row.as-email-readpending{transition:opacity .15s} #as-app .as-email-row.as-email-readpending .as-email-subject-text{opacity:.85} #as-app .as-email-dd-divider{height:1px;background:var(--b);margin:4px 0} #as-app .as-email-dd-header{padding:4px 14px;font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px} /* v0.10.90: checkbox rows — settings-gear inbox toggles, live-filter popover */ #as-app .as-email-dd-checkbox input{margin:0;flex-shrink:0} /* v0.10.97: per-account rename/disconnect icon buttons on the settings-gear * popover's inbox rows — hidden until hover so the row still scans as a * plain toggle list at a glance. */ #as-app .as-email-dd-acct-label{flex:1;overflow:hidden;text-overflow:ellipsis} #as-app .as-email-dd-acct-actions{display:flex;gap:2px;opacity:0;flex-shrink:0} #as-app .as-email-dd-checkbox:hover .as-email-dd-acct-actions{opacity:1} #as-app .as-email-dd-icon-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--t3);cursor:pointer;border-radius:var(--rs)} #as-app .as-email-dd-icon-btn:hover{background:var(--b);color:var(--t1)} /* v0.10.104: settings-gear popover Manage mode — swaps the checkbox rows * for an X-to-hide/restore-to-show list, with real inline rename for * account rows (see sidebarSettingsInnerHtml() for which rows get which). */ #as-app .as-email-dd-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px} #as-app .as-email-dd-manage-link{border:none;background:none;color:var(--ac);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;padding:0} #as-app .as-email-dd-manage-link:hover{text-decoration:underline} #as-app .as-email-dd-manage-row{cursor:default} #as-app .as-email-dd-manage-row:hover{background:none;color:var(--t2)} #as-app .as-email-dd-manage-hidden{opacity:.5} #as-app .as-email-dd-manage-toggle{flex-shrink:0} #as-app .as-email-dd-manage-input{flex:1;min-width:0;border:1px solid transparent;background:transparent;color:var(--t1);font-size:12px;font-family:inherit;padding:3px 5px;border-radius:var(--rs)} #as-app .as-email-dd-manage-input:hover{border-color:var(--b)} #as-app .as-email-dd-manage-input:focus{outline:none;border-color:var(--ac);background:var(--inp-bg)} /* v0.10.109: drag-to-reorder in Manage mode */ #as-app .as-email-dd-manage-row[draggable="true"]{cursor:grab} #as-app .as-email-dd-grip{display:flex;align-items:center;flex-shrink:0;color:var(--t3);opacity:.5} #as-app .as-email-dd-manage-row:hover .as-email-dd-grip{opacity:1} #as-app .as-email-dd-dragging{opacity:.4} #as-app .as-dragging{opacity:.5} #as-app #as-email-preview{display:none;flex-direction:column} #as-app .as-email-preview-empty{display:flex;align-items:center;justify-content:center;height:100%;font-size:12px;color:var(--t3);padding:40px 20px;text-align:center} #as-app .pv-hdr{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--b);background:var(--sa);flex-shrink:0} #as-app .pv-subject{margin:0;font-size:13.5px;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} #as-app .pv-actions{display:flex;gap:3px;flex-shrink:0;align-items:center} #as-app .pv-act{height:28px;border:1px solid var(--b);border-radius:var(--rs);background:var(--s);display:inline-flex;align-items:center;gap:4px;padding:0 10px;cursor:pointer;color:var(--t2);font-size:11px;font-family:inherit;white-space:nowrap;transition:all .12s} #as-app .pv-act:hover{border-color:color-mix(in srgb,var(--t3) 60%,transparent);color:var(--t1);background:var(--sa)} #as-app .pv-act svg{flex-shrink:0} #as-app .pv-act-icon{width:28px;padding:0;justify-content:center} #as-app .pv-act-danger:hover{color:var(--rd)!important;border-color:var(--rd)!important} #as-app .pv-sep{width:1px;height:20px;background:var(--b);margin:0 2px} /* v0.10.100 (punchlist #1): follow-up flag button in the preview/thread * header action bars — same purple accent as the inbox row's own flagged * state (.as-email-followedup/.as-email-kebab-left) for visual consistency. */ #as-app .pv-act-flag-on{color:var(--pu)!important;background:var(--pul)!important;border-color:var(--pu)!important} #as-app .pv-messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 16px} #as-app .as-thread-msg{border:1px solid var(--b);border-radius:var(--rs);margin-bottom:8px;overflow:hidden;background:var(--s)} #as-app .as-thread-msg-header{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;background:var(--sa);transition:background .1s} #as-app .as-thread-msg-header:hover{background:var(--b)} #as-app .as-thread-msg-meta-line{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0} #as-app .as-thread-msg-from{font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #as-app .as-thread-msg-date{font-size:10px;color:var(--t3);white-space:nowrap;flex-shrink:0} #as-app .as-thread-msg-body{display:none;padding:14px;font-size:13px;line-height:1.65;overflow:hidden} #as-app .as-thread-msg-expanded .as-thread-msg-body{display:block} #as-app .as-thread-msg-meta{font-size:11px;color:var(--t3);margin-bottom:10px} #as-app .as-thread-msg-content{word-wrap:break-word;overflow-wrap:break-word;overflow-x:auto;overflow-y:auto;max-height:500px;max-width:100%} #as-app .as-thread-msg-content img{max-width:100%!important;height:auto!important} #as-app .as-thread-msg-content table{max-width:100%!important;table-layout:fixed!important;word-wrap:break-word} #as-app .as-thread-msg-content *{max-width:100%!important;box-sizing:border-box!important} #as-app .as-thread-msg-content pre,#as-app .as-thread-msg-content code{white-space:pre-wrap;word-wrap:break-word} #as-app .as-thread-msg-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} #as-app .as-attach-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 9px;background:var(--s);border:1px solid var(--b);border-radius:var(--rs);color:var(--t2);cursor:pointer;font-family:inherit;transition:all .12s} #as-app .as-attach-chip:hover{border-color:color-mix(in srgb,var(--t3) 60%,transparent);color:var(--t1);background:var(--sa)} #as-app .as-attach-chip:disabled{opacity:.6;cursor:default} #as-app .as-attach-chip-size{color:var(--t3);font-weight:400} /* AS-0095: inline in-flight spinner for a button's own label (e.g. Compose's * Send button while the email/send request is in flight). Uses currentColor * so it reads correctly on any button background (white on .btn-p's accent * fill, dark text on .btn-g) without a separate light/dark variant, and * reuses the existing as-spin keyframe from actionstudio.css (always * enqueued before as-email.css) instead of defining a duplicate. */ #as-app .as-spinner-btn{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;opacity:.85;animation:as-spin .7s linear infinite} #as-app .pv-reply{padding:10px 16px;border-top:1px solid var(--b);flex-shrink:0;background:var(--s)} #as-app .pv-reply-label{font-size:11px;color:var(--t3);margin-bottom:5px;display:flex;align-items:center;gap:4px} #as-app .pv-reply-label svg{flex-shrink:0} #as-app .as-reply-textarea{width:100%;padding:8px 10px;border:1px solid var(--b);border-radius:var(--rs);font-family:inherit;font-size:12px;resize:vertical;background:var(--s);color:var(--t1);box-sizing:border-box} #as-app .as-reply-textarea:focus{outline:none;border-color:var(--ac)} #as-app .pv-reply-bar{display:flex;align-items:center;gap:10px;margin-top:6px} #as-app .pv-reply-link{font-size:11px;color:var(--t3);cursor:pointer;text-decoration:none} #as-app .pv-reply-link:hover{color:var(--t2)} #as-app .pv-reply-spacer{flex:1} #as-app .pv-reply-send{padding:7px 18px;border:none;border-radius:var(--rs);background:var(--ac);color:#fff;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit} #as-app .pv-reply-send:hover{opacity:.85} #as-app .pv-reply-ccbcc{display:flex;gap:6px;margin-top:6px} #as-app .as-input-sm{flex:1;padding:6px 10px;border:1px solid var(--b);border-radius:var(--rs);font-family:inherit;font-size:11px;background:var(--inp-bg);color:var(--t1);box-sizing:border-box} #as-app .as-input-sm:focus{outline:none;border-color:var(--ac)} #as-app .as-thread-header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--b);flex-wrap:wrap} #as-app .as-thread-subject{margin:0;font-size:15px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #as-app .as-back-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;font-size:11.5px;flex-shrink:0} #as-app .as-thread-actions{flex-shrink:0} #as-app .as-thread-messages{padding:10px 16px} #as-app .as-thread-reply{padding:12px 16px;border-top:1px solid var(--b)} /* v0.10.147: this max-width:560px was silently undoing actionstudio.css's * v0.10.133 `#as-m-compose .as-modal{width:680px}` (max-width caps below an * explicit width) — the exact "compose is cramped" regression Glenn just * reported via screenshot, with no comment explaining why it was there. * Removed; the 680px width from v0.10.133 governs on desktop again. */ /* v0.10.99 (punchlist #5): Split quick-view modal. Fixed-height flex column * so the reused .pv-hdr/.pv-messages rules (sized for the always-present * Email preview pane) work the same way inside a modal — .pv-messages' * flex:1/overflow-y:auto needs a bounded-height flex ancestor, which * .as-modal doesn't provide by default (auto height, overflow-y:auto on the * modal itself). padding-right on .pv-hdr reserves room for the floating * close button rather than overlapping the last action icon. * * v0.10.110: was a full-viewport centered modal (dark backdrop dimming the * whole app, including the Inbox/Follow-up column) — Glenn wanted it scoped * to just #as-triage-right (the calendar/notes/today-list side) with a * fade-up entrance, so Inbox/Follow-up stay visible and usable underneath. * position/top/left/width/height are set inline from JS every open * (positionSplitPreview() in as-email.js, matches #as-triage-right's live * rect) — right/bottom:auto here so those inline values aren't fought by * the generic .as-modal-bg{inset:0} rule. Overridden from display:none/flex * toggling to an opacity/transform one: display can't transition, so the * fade+slide needs visibility/opacity instead — .show still comes from the * same asShowModal()/asHideModals() class toggle every other modal uses, * only the CSS driven by that class differs here. */ #as-app #as-m-splitpreview{right:auto;bottom:auto;align-items:stretch;justify-content:stretch;background:rgba(0,0,0,.15);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(24px);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;display:flex} #as-app #as-m-splitpreview.show{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .22s ease,transform .22s ease} #as-app #as-m-splitpreview .as-modal{width:100%;max-width:none;height:100%;max-height:none;margin:0;display:flex;flex-direction:column;position:relative;padding:0;overflow:hidden} #as-app .as-split-preview-body{display:flex;flex-direction:column;height:100%;overflow:hidden} #as-app .as-split-preview-close{position:absolute;top:8px;right:8px;z-index:2;width:28px;height:28px;border:none;background:var(--s);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);font-size:13px;box-shadow:0 1px 4px rgba(0,0,0,.15)} #as-app .as-split-preview-close:hover{color:var(--t1);background:var(--sa)} #as-app #as-m-splitpreview .pv-hdr{padding-right:44px} /* v0.10.126: the FULL reading surfaces (Split quick-view modal + the * expanded thread panel) shouldn't box the body in a 500px well — let it * use the available screen height and scroll within that. The compact * inline inbox preview keeps its 500px cap (as-email.css:187). */ #as-app #as-m-splitpreview .as-thread-msg-content, #as-app #as-email-thread-panel .as-thread-msg-content{max-height:calc(100vh - 150px)} /* No @media override needed here (unlike the old fixed-width modal) — * positionSplitPreview() (as-email.js) sizes the overlay itself: desktop * reads #as-triage-right's live getBoundingClientRect(), and v0.10.240 added * a <=768px branch that goes full-viewport instead (see that function's * comment for why the right-column rect stops being meaningful on mobile). */ /* v0.10.99 (punchlist #6): attachment lightbox — image/PDF preview modal. */ /* AS-0202: both this modal and #as-m-splitpreview (above) are plain * .as-modal-bg elements sharing that class's generic z-index:200 — neither * one overrides it. asShowModal()/asHideModals() (actionstudio.js) only ever * ADD .show to the modal being opened; they never hide any other modal * that's already open, so opening an attachment (AS.showModal('attachpreview')) * from inside Split's own quick-read modal leaves BOTH .show at once, same * z-index, and plain DOM order decides who paints on top. #as-m-splitpreview * comes AFTER #as-m-attachpreview in templates/admin-app.php, so Split's own * overlay won that tie and rendered over the attachment lightbox, leaving its * zoom/download controls partially covered and non-interactive — confirmed * exactly matching the ticket's screenshot. Same fix shape as the v0.4.7 * #as-m-contact-picker bump (actionstudio.css) that solved this identical * class of bug for the tray/picker pair — reusing that same elevated tier * here rather than inventing a new number, since z:1100 already means "must * render above another already-open same-level overlay" everywhere else in * this app. Full Email (non-Split) view isn't affected — it has no second * modal open underneath the attachment lightbox to compete with. */ #as-app #as-m-attachpreview{z-index:1100} #as-app #as-m-attachpreview .as-modal{width:820px;max-width:calc(100vw - 40px);height:85vh;max-height:85vh;display:flex;flex-direction:column;padding:0;overflow:hidden} #as-app #as-m-attachpreview .ch h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #as-app .as-attach-preview-body{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;background:var(--sa);padding:16px} #as-app .as-attach-preview-body img{max-width:100%;max-height:100%;object-fit:contain} #as-app .as-attach-preview-body embed{width:100%;height:100%;border:none} /* AS-0029: PDF embed has no reliable in-JS "did it actually render" signal * (cross-origin blob content inside the plugin viewport isn't readable), so * rather than a flaky detect-and-hide heuristic, the hint below the embed is * always visible — the one honest way out for the iOS Safari case, where the * embed silently renders blank with no error and no feature-detection signal * exists. */ #as-app .as-attach-preview-body .as-pdf-wrap{display:flex;flex-direction:column;width:100%;height:100%;gap:6px} #as-app .as-attach-preview-body .as-pdf-wrap embed{flex:1;width:100%;height:auto;min-height:0} #as-app .as-attach-preview-body .as-pdf-hint{flex:none;text-align:center;font-size:12px;color:var(--t3)} /* Shown instead of the embed when navigator.pdfViewerEnabled explicitly * reports false (Chrome/Edge/Firefox "download PDFs" setting) — no point * attempting the embed when the browser already told us it won't render. */ #as-app .as-attach-preview-body .as-pdf-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--t3);font-size:13px;text-align:center} @media(max-width:768px){ #as-app #as-m-attachpreview .as-modal{width:calc(100vw - 16px);height:90vh;max-height:90vh} } /* v0.10.112: was #as-email-pagination — renamed with the prev/next buttons' * removal; now just holds the small spinner shown while lazy-loading the * next batch (see loadMoreInboxMessages() in as-email.js). */ #as-app #as-email-loadmore{padding:6px 14px;text-align:center;flex-shrink:0} #as-app .as-email-page-btn{font-size:11px} #as-app .as-email-error{padding:20px;color:var(--rd);text-align:center;font-size:12px} #as-app .as-email-progress{display:none;height:3px;background:var(--b);flex-shrink:0;overflow:hidden} #as-app .as-email-progress-fill{height:100%;width:0;background:var(--ac);transition:width .25s ease-out} @media(max-width:900px){#as-app .as-email-sidebar{width:160px;flex:0 0 160px}#as-app .as-email-from{width:100px;flex:0 0 100px}#as-app .as-split-vertical #as-email-list-wrap{flex:0 0 280px}} @media(max-width:768px){ #as-app .as-email-wrap{height:auto;min-height:calc(100vh - 116px)} #as-app .as-email-layout{flex-direction:column} /* AS-0131: .as-email-main's base rule (line ~45) is `flex:1;min-width:0; * width:0` — a standard "flex-grow item in a ROW flex context, ignore * intrinsic content width" trick, correct for desktop where * .as-email-layout is flex-direction:row (sidebar left, message list * right). Once the rule directly above switches .as-email-layout to * flex-direction:column for mobile, .as-email-main becomes a COLUMN * flex item instead — flex:1 there governs HEIGHT, not width, and the * literal width:0 (only ever meant to zero out the row-context flex- * basis) was never overridden back for the new column context, so it * rendered as the ACTUAL width: the entire message list * (#as-email-inbox-panel, flex:1 child of .as-email-main) collapsed to * 0px and was completely invisible on mobile whenever Communications' * Email mode was open — confirmed live via getComputedStyle at a real * 390px viewport (theasksystem.com, 2026-09-16): .as-email-main * measured width:0px with #as-email-inbox-panel also 0px despite * having real message rows rendered inside it (12000+px tall, 0px * wide). width:auto here restores the normal column-flex default * (stretch to the parent's width) without touching the desktop rule * above this media query. */ #as-app .as-email-main{width:auto} /* AS-0055 mobile follow-up (2026-09-12): replaces the old "squeeze the * whole account/folder sidebar into a horizontal-scroll chip strip" * treatment. That collapsed .as-email-sidebar to display:flex; * flex-direction:row with .as-email-labels-scroll set to * display:contents, which put every .as-acct-section (a plain block * div, not itself a flex row) side by side as flex items — expanding * ANY one account rendered its folder list stacked vertically *inside* * that one flex item, so the whole strip's height ballooned to match * the tallest (expanded) section while the real message list below got * squeezed out of view. Root cause confirmed by inspecting the actual * render (renderLabels()/accountSectionHtml(), as-email.js) rather than * assumed from the symptom. * New design: the sidebar collapses to a single-line "current folder" * summary bar (.as-email-sidebar-summary, always visible, tap to * open/close) and the full account/folder tree — completely unchanged * markup/click handlers from desktop — renders as a normal vertical * list inside .as-email-sidebar-dropdown, an absolutely-positioned * overlay that floats OVER the message list instead of pushing it down. * Selecting any folder/label/account (asSelectFolder/asSelectLabel/ * asSelectMerged/asSelectMergedLabel/asSelectSystemFolder, all set * emailSidebarMobileOpen=false before their own renderLabels() call) * auto-closes the dropdown back to the summary bar. */ #as-app .as-email-sidebar{width:100%!important;flex:0 0 auto!important;border-right:none;border-bottom:1px solid var(--b);position:relative;display:flex;flex-direction:column;overflow:visible;padding:0} /* AS-0181: min-height:44px (not the .tcheck/.as-mode-toggle invisible * ::before hit-area from AS-0098/AS-0148) — this bar isn't a small icon * sitting in a row of siblings, it's the sole full-width control at the * top of the sidebar, so a direct box-height bump costs nothing and * needs no absolute-positioning trick. box-sizing:border-box (global, * #as-app rule) means min-height includes the padding above. */ #as-app .as-email-sidebar-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 14px;min-height:44px;font-size:12.5px;font-weight:600;color:var(--t1);cursor:pointer;background:var(--s)} #as-app .as-email-sidebar-summary-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #as-app .as-email-sidebar-summary-chev{display:inline-flex;flex-shrink:0;color:var(--t3);transform:rotate(90deg);transition:transform .15s} #as-app .as-email-sidebar-mobile-open .as-email-sidebar-summary-chev{transform:rotate(-90deg)} /* Closed by default (the common case — a folder is picked rarely * relative to reading the list beneath it); becomes a real block only * once .as-email-sidebar-mobile-open is toggled on, overriding the * desktop `display:contents` above so .as-email-labels-scroll (still * flex:1/overflow-y:auto, unchanged from desktop) and * .as-email-sidebar-foot keep their existing scroll-region-plus-pinned- * footer relationship inside this now-real flex column. */ #as-app .as-email-sidebar-dropdown{display:none;position:absolute;top:100%;left:0;right:0;max-height:60vh;background:var(--s);border:1px solid var(--b);border-top:none;box-shadow:0 8px 20px rgba(0,0,0,.18);z-index:200;overflow:hidden} #as-app .as-email-sidebar-mobile-open .as-email-sidebar-dropdown{display:flex;flex-direction:column} /* The dropdown is full viewport width now (not the old 185px rail), so * folder rows get a little more breathing room than the desktop pill * list they're otherwise unchanged from. */ /* AS-0181: this dropdown's option rows were flagged as a known gap when * AS-0148 gave the header icon-buttons the 44x44px treatment — rows here * stack directly against each other with zero gap (see .as-acct-section * border-bottom, .as-label-item itself has none), so an invisible * ::before hit-area (the .tcheck/.as-mode-toggle technique from AS-0098/ * AS-0148) would overlap into the neighboring row above/below and mis- * target it — the exact failure mode called out for .as-kb-actions * button (AS-0060 mobile pass, ~line 1906 above) when that same overlay * trick was rejected there for the same adjacency reason. So: a direct * min-height bump instead, like .as-kb-actions button got. box-sizing: * border-box (global #as-app rule) means the 44px includes padding. */ #as-app .as-email-sidebar-dropdown .as-label-item{padding:10px 14px;min-height:44px;font-size:13px} #as-app .as-email-sidebar-dropdown .as-acct-hd-toggle{min-height:44px} #as-app .as-email-sidebar-dropdown .as-email-sidebar-foot{min-height:44px} #as-app .as-label-sub{padding-left:0} /* AS-0196: min-width:0 was missing here — flex items default to * min-width:auto (their content's min-content size), and this still * inherits white-space:nowrap from the desktop rule above, so a long * sender name couldn't shrink and forced the row wider than the screen * ("messages run off the side"). The desktop (non-wrapped) rule already * gets this right; this mobile override just never had it. */ #as-app .as-email-from{flex:1;width:auto;min-width:0;font-size:11px} /* v0.10.254: subject+snippet used to squeeze onto ONE nowrap/ellipsis line * next to a fixed-width from-name — at phone width the subject alone ate * the line and the "— snippet" half (as-email.js splitRowHTML/emailRowHtml) * never got pixels, so it read as bare-subject rows with no Apple-Mail-style * preview text even though the markup already carries it. Same wrap+order * pattern as the existing .as-split-vertical fix just above (as-email.css:75-78) * — but instead of hiding the snippet, give it its own 2-line-clamped row. */ #as-app .as-email-row{flex-wrap:wrap;padding:6px 10px;gap:6px} /* AS-0269: Email-mode row checkbox on phones. Split hides its row checkbox (actionstudio.css triage rule) but here the checkbox is the * ONLY entry to bulk select (the bulk bar renders only once 1+ rows are checked), so it is kept: the native 16px box is unchanged and * its label wrapper gets an invisible 44px+ ::after hit area (not ::before). Pseudo-elements on the itself do not hit-test. */ #as-app .as-email-row-check-wrap{position:relative;display:inline-flex;flex-shrink:0} #as-app .as-email-row-check-wrap::after{content:'';position:absolute;top:-16px;right:-16px;bottom:-16px;left:-16px} #as-app .as-email-subject{width:100%;order:10;padding-left:38px;margin-top:2px;font-size:11px;white-space:normal;overflow:visible;text-overflow:clip} #as-app .as-email-subject-text{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere} #as-app .as-email-snippet{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;margin-top:1px;overflow-wrap:anywhere} #as-app .as-email-date{width:44px;flex:0 0 44px;font-size:10px} #as-app .as-email-inbox-split{flex-direction:column!important} #as-app .as-email-resize-handle{display:none} #as-app .as-compose-btn span{display:none} #as-app .as-compose-btn{padding:7px 10px} #as-app .as-split-toggle-wrap{display:none} #as-app .pv-hdr{flex-wrap:wrap;gap:4px;padding:6px 10px} #as-app .pv-subject{font-size:12px;width:100%;order:-1} #as-app .pv-actions{flex-wrap:wrap} #as-app .pv-act{font-size:10px;padding:0 7px;height:26px} #as-app .pv-messages{padding:8px 10px} #as-app .pv-reply{padding:8px 10px} #as-app .as-thread-msg-from{font-size:11px} #as-app .as-thread-msg-content{max-height:350px} #as-app #as-m-compose .as-modal{max-width:calc(100vw - 24px)} #as-app .as-inbox-switcher{padding:6px 8px} /* AS-0033: icon-only bulk-toolbar buttons on narrow screens, same * space-saving call as .as-compose-btn span{display:none} above. */ #as-app .as-email-bulkbar{flex-wrap:wrap;padding:6px 8px} #as-app .as-email-bulkbar .pv-act span{display:none} #as-app .as-email-bulkbar .pv-act{padding:0 7px} } @media(max-width:480px){ #as-app .as-email-from{flex:1;width:auto;font-size:10px} #as-app .as-email-row{padding:5px 8px;font-size:11px} #as-app .as-email-avatar{width:26px;height:26px;font-size:9px} #as-app .as-email-subject{padding-left:34px}/* smaller avatar at this width, tighter indent to match */ #as-app .as-toolbar-btn{width:28px;height:28px} } /* v0.1.35: Inbox switcher */ #as-app .as-inbox-switcher{padding:8px 10px;border-bottom:1px solid var(--b)} #as-app .as-inbox-switch-btns{display:flex;gap:2px;background:var(--sa);padding:2px} #as-app .as-inbox-sw{flex:1;padding:5px 8px;font-size:11px;font-weight:600;text-align:center;cursor:pointer;border:none;background:transparent;color:var(--t3);transition:all .15s} #as-app .as-inbox-sw:hover{color:var(--t1)} #as-app .as-inbox-sw-on{background:var(--bg);color:var(--t1);box-shadow:0 1px 2px rgba(0,0,0,.08)} /* v0.10.29 (Communications, Phase 8): Mac-Mail-style account sections — * replaces the old .as-inbox-switcher 2-button toggle above (rules kept, * unreferenced, zero visual impact — not worth the churn of hunting every * historical reference in this already-large phase). */ #as-app .as-acct-section{border-bottom:1px solid var(--b2)} #as-app .as-acct-hd{padding:8px 10px 4px;font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--t3);font-weight:700;display:flex;align-items:center;gap:6px} #as-app .as-acct-section:not(.as-acct-active){opacity:.72} /* v0.10.74: collapsible account sections + the merged "All Inboxes" row. */ #as-app .as-acct-hd-toggle{cursor:pointer;user-select:none} #as-app .as-acct-hd-toggle:hover{color:var(--t2)} #as-app .as-acct-chevron{display:inline-flex;transition:transform .15s;flex-shrink:0} #as-app .as-acct-chevron-open{transform:rotate(90deg)} #as-app .as-acct-collapsed{padding-bottom:2px} #as-app .as-acct-merged{border-bottom:1px solid var(--b2)} #as-app .as-acct-merged .as-label-item{font-weight:600} /* Per-row source badge, shown only while the merged view is active so a * message's origin account is still legible once personal/team are interleaved. */ #as-app .as-email-src-badge{font-size:8.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:1px 5px;border-radius:3px;margin-left:5px;background:var(--sa);color:var(--t3);vertical-align:middle} #as-app .as-email-src-badge.as-email-src-team{background:var(--bll);color:var(--bl)} /* "Unread went to 0" empty-state fallback banner (Glenn, 2026-08-19). */ #as-app .as-email-fallback-banner{padding:6px 14px;font-size:10.5px;font-weight:600;color:var(--t3);background:var(--sa);border-bottom:1px solid var(--b2);display:flex;align-items:center;gap:5px} /* v0.10.29: relationship chip on thread rows — mirrors as-v-crm.js's stage * badge styling (contactRowFull) so it reads consistently with People/ * Opportunities. */ #as-app .as-email-chip{display:inline-flex;align-items:center;font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:var(--rs);margin-left:6px;white-space:nowrap} /* v0.10.31: edge-to-edge fix. #as-comms-panel-email/-cal used to carry their * own `.cnt` class (20px/28px padding) NESTED inside #as-v-communications's * own `.cnt` — a real double-padding bug, visible live as a wide blank gap * before the email 3-pane layout even started. Panels no longer carry `.cnt` * in the template; this cancels the ONE remaining `.cnt` inset horizontally * (mirrors Display's `.setwrap{margin:-20px -28px}` idiom, minus the vertical * component since the toolbar's own negative margin already re-establishes * normal spacing below itself). Email panel matches the mock's own `.comms` * (zero extra padding, genuinely edge-to-edge 3-pane); Calendar panel gets * its own padding back, matching the mock's `.calwrap{padding:16px 22px}`. */ #as-app #as-comms-panel-email, #as-app #as-comms-panel-cal, #as-app #as-comms-panel-triage{margin:0 -28px} #as-app #as-comms-panel-cal{padding:16px 22px} /* v0.10.90: Split panel — same edge-to-edge cancel + its own padding back, matching Calendar panel's own treatment above (both are card/grid layouts, not a flush 3-pane like Email). Needs the same margin-top fix below too, since it shares Email panel's fixed-height calc(100vh - 52px) convention (a real split-pane with independently-scrolling columns) rather than Calendar's plain normal-flow scroll. */ #as-app #as-comms-panel-triage{padding:16px 22px} /* v0.10.63: re-fix of the v0.10.59 subheader-gap fix. That fix added `#as-comms-panel-email{margin-top:-20px}` to actionstudio.css, but this file's `margin:0 -28px` shorthand above (v0.10.31) loads AFTER actionstudio.css and resets margin-top back to 0 as part of the shorthand — silently undoing it in production despite testing clean via an injected