/* Solvix inbox shell: rail · list · thread + compose · context. */

/* ---- shell ---- */
.shell{height:100%;display:grid;grid-template-columns:var(--w-bar) var(--w-rail) var(--w-list) minmax(0,1fr) var(--w-ctx);position:relative}
.shell.rail-compact{--w-rail:var(--w-rail-compact)}
.shell>*{min-height:0;min-width:0}
.rzbar{position:absolute;top:0;bottom:0;width:7px;z-index:6;cursor:col-resize}
.rzbar:hover,.rzbar.dragging{background:var(--acc-soft);box-shadow:inset 2px 0 0 var(--acc)}
#rz-rail{left:calc(var(--w-bar) + var(--w-rail) - 3px)}
#rz-list{left:calc(var(--w-bar) + var(--w-rail) + var(--w-list) - 3px)}
#rz-ctx{right:calc(var(--w-ctx) - 4px)}
.shell.rail-compact #rz-rail{display:none}
.page{grid-column:3/6;overflow-y:auto;background:var(--bg);padding:26px 32px}
.empty{padding:36px 16px;color:var(--ink2);text-align:center;font-size:13px}
.empty.tall{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:80px;color:var(--ink3)}
.empty.tall .i{width:28px;height:28px;stroke-width:1.4}

/* ---- store bar (10-03): one tile per store, Discord/Slack-style, no badges ---- */
.storebar{background:var(--panel2);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0;overflow-y:auto;scrollbar-width:none}
.stile{position:relative;width:100%;display:flex;justify-content:center;flex:none}
.stile>span{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:12.5px;font-weight:700;line-height:1;transition:border-radius .12s}
.stile:hover>span,.stile.on>span{border-radius:11px}
.stile.on>span{box-shadow:0 0 0 2px var(--panel2),0 0 0 4px var(--acc)}
.stile::before{content:"";position:absolute;left:0;top:50%;width:3px;height:0;border-radius:0 3px 3px 0;background:var(--ink);transform:translateY(-50%);transition:height .12s}
.stile:hover::before{height:14px}
.stile.on::before{height:26px}
.stile.add>span{background:var(--panel);color:var(--ink2);border:1px dashed var(--line)}
.stile.add:hover>span{color:var(--acc-strong);border-color:var(--acc-border)}
.stile.add::before{display:none}

/* ---- rail ---- */
.rail{background:var(--panel2);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.railhead{height:var(--head-h);flex:none;display:flex;align-items:center;gap:9px;padding:0 10px 0 12px;border-bottom:1px solid var(--line)}
/* New email on its own spot (Rome 09-17: "de compose button mag weg daar en
   op een eigen plek") — Gmail-style at the top of the rail */
.composebtn{display:flex;align-items:center;justify-content:center;gap:7px;flex:none;margin:10px 10px 2px;height:34px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:13px;font-weight:700;color:var(--ink);box-shadow:0 1px 2px rgba(28,27,25,.05)}
.composebtn .i{color:var(--acc)}
.composebtn:hover{background:var(--hover);border-color:var(--acc-border)}
.rail-compact .composebtn{margin:8px 8px 2px;height:32px}
.rail-compact .composebtn span{display:none}
.storename{display:flex;flex-direction:column;line-height:1.15;min-width:0;flex:1}
.storename b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.storename .live{font-size:10.5px;color:var(--ink2);display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden}
.conn{width:6px;height:6px;border-radius:50%;background:var(--ink3);flex:none}
.conn.on{background:var(--good)}
.railbody{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px;display:flex;flex-direction:column;gap:1px;scrollbar-width:auto;scrollbar-color:var(--ink3) transparent}
.rail .sec{display:flex;align-items:center;gap:5px;height:28px;padding:0 10px;margin-top:8px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);cursor:pointer;border-radius:var(--r);user-select:none}
.rail .sec:first-child{margin-top:0}
.rail .sec:hover{color:var(--ink)}
.rail .sec .chev{color:var(--ink3);transition:transform .12s}
.rail .sec.closed .chev{transform:rotate(-90deg)}
.rail .sec .plus{margin-left:auto;color:var(--ink3);display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:5px;opacity:0}
.rail .sec:hover .plus{opacity:1}
.rail .sec .plus:hover{background:var(--panel);color:var(--acc-strong)}
.secbody{display:flex;flex-direction:column;gap:1px}
.rail .row{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:var(--r);color:var(--ink2);font-weight:500;width:100%;text-align:left;white-space:nowrap}
.rail .row:hover{background:var(--panel);color:var(--ink)}
.rail .row.on{background:var(--acc-soft);color:var(--acc-strong);font-weight:600}
.rail .row.ai{color:var(--ai)}
.rail .row.ai.on{background:var(--ai-soft);color:var(--ai)}
.rail .row .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rail .row .n{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums;flex:none}
.rail .row.on .n{color:inherit;font-weight:600}
.rail .row .n.mode{font-size:10.5px;font-weight:600;color:var(--ai);text-transform:capitalize}
.rail .row.sub{height:28px;padding-left:36px;font-size:12.5px}
.rail .row.lblrow{height:28px}
.rail .row.more{color:var(--ink3);font-size:12px;gap:6px}
.rail .row .cfx{display:none;width:20px;height:20px;align-items:center;justify-content:center;border-radius:5px;color:var(--ink3);flex:none}
.rail .row .cfx.tog{display:inline-flex;transition:transform .12s}
.rail .row .cfx.tog.closed{transform:rotate(-90deg)}
.rail .row.custom:hover .cfx,.rail .row.business:hover .cfx{display:inline-flex}
.rail .row.custom:hover .n{display:none}
.rail .row .cfx:hover{background:var(--panel2);color:var(--acc-strong)}
.rail .row .priv{color:var(--ink3);display:inline-flex}
.rail .row.business{color:var(--ink3)}
.rail .row.business .n{color:var(--ink3)}
.rail .row.dropover{outline:2px dashed var(--acc);outline-offset:-2px;background:var(--acc-soft)}
.railnote{font-size:11px;color:var(--ink3);padding:4px 10px 6px;line-height:1.4;white-space:normal}
.railtools{flex:none;padding:8px 10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:1px}
.railfoot{margin:0 10px 8px;padding:8px 10px;border-radius:var(--r-md);background:var(--ai-soft);border:1px solid var(--ai-border);display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ai);text-align:left;white-space:nowrap;overflow:hidden}
.railfoot span{color:var(--ink2);overflow:hidden;text-overflow:ellipsis}
.railfoot:hover{background:var(--panel)}
.railuser{border-top:1px solid var(--line)}
.railuser>summary{display:flex;align-items:center;gap:9px;padding:10px 12px;cursor:pointer}
.railuser>summary:hover{background:var(--panel)}
.ucol{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.ucol b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.urole{font-size:10.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.railuser .more{margin-left:auto;color:var(--ink3);display:inline-flex}
.railuser .popover{left:10px;right:10px;bottom:calc(100% + 4px);top:auto}
/* compact rail: icons only */
.rail-compact .rail .storename,.rail-compact .rail .sec,.rail-compact .rail .row .lbl,.rail-compact .rail .row .n,
.rail-compact .rail .row.sub,.rail-compact .rail .row.lblrow,.rail-compact .rail .railfoot,.rail-compact .rail .ucol,
.rail-compact .rail .more,.rail-compact .rail .cfx,.rail-compact .rail .priv,.rail-compact .rail .railnote{display:none!important}
.rail-compact .railhead{padding:0;justify-content:center;gap:0;flex-direction:column;height:auto;padding:8px 0}
.rail-compact .railbody{padding:8px 6px;gap:2px}
.rail-compact .railtools{padding:8px 6px}
.rail-compact .rail .row{justify-content:center;padding:0;height:34px}
.rail-compact .railuser>summary{justify-content:center;padding:10px 0}
.rail-compact .railuser .popover{left:6px;right:auto;min-width:180px}
.rail-compact .secbody{gap:2px}
.rail-compact .secbody:not(:first-of-type){margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}

/* ---- list ---- */
.list{border-right:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column}
/* the view name has priority (Rome 09-17: the refresh button must never
   push "Tier 2 queue · New" into an ellipsis): tighter gaps, 24px icon
   buttons and a narrower status select before the title gives anything up */
.lhead{height:var(--head-h);flex:none;padding:0 8px 0 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;background:var(--panel)}
.lhead .ibtn{width:24px}
.lhl{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lhead .count{font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums}
.lsearch{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel);color:var(--ink3)}
.lsearch input{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);height:30px;padding:0 10px;font-size:12.5px;color:var(--ink)}
.lsearch input:focus{outline:2px solid var(--acc);outline-offset:-1px}
.lfilters{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--bg);flex:none;align-items:center;min-width:0;overflow:hidden}
.fchip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:12px;border:1px solid var(--line);color:var(--ink2);font-size:11.5px;font-weight:600;background:var(--panel);white-space:nowrap;flex:none}
.fchip:hover{background:var(--hover)}
.fchip.on{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.fchip.ai{color:var(--ai);border-color:var(--ai-border)}
.fchip.ai.on{background:var(--ai);border-color:var(--ai);color:#fff}
.fchip i{font-style:normal;font-size:10.5px;opacity:.8;font-variant-numeric:tabular-nums}
select.fchip{appearance:none;-webkit-appearance:none;padding-right:20px;background-image:var(--chv);background-repeat:no-repeat;background-position:right 6px center;background-size:11px;cursor:pointer;max-width:110px}
.selbar{background:var(--acc-soft);border-bottom:1px solid var(--acc-border);flex-wrap:wrap}
.selbar b{font-size:12px;color:var(--acc-strong);white-space:nowrap}
.selbar .ibtn{margin-left:auto}
.lbody{flex:1;overflow-y:auto;min-height:0;scrollbar-width:auto;scrollbar-color:var(--ink3) transparent}
.item{display:flex;gap:8px;padding:10px 14px 10px 10px;border-bottom:1px solid var(--line);background:var(--panel);cursor:pointer;position:relative}
.item:hover{background:var(--hover)}
.item.on{background:var(--acc-soft);box-shadow:inset 3px 0 0 var(--acc)}
.item .lead{width:16px;flex:none;position:relative;height:18px;display:flex;align-items:center;justify-content:center}
.item .ck{position:absolute;inset:0;margin:0;accent-color:var(--acc);opacity:0;cursor:pointer;width:14px;height:14px;top:2px;left:1px}
.item:hover .ck,.item .ck:checked,.item .ck:focus-visible{opacity:1}
.item .udot{width:8px;height:8px;border-radius:50%;background:var(--acc);opacity:0}
.item.unread .udot{opacity:1}
.item:hover .udot,.item .ck:checked+.udot{opacity:0}
.item .col{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.item .l1{display:flex;align-items:baseline;gap:6px;min-width:0}
.item .who{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.item.unread .who{font-weight:700}
.item .t{margin-left:auto;font-size:11px;color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums;flex:none}
/* paperclip in the list row for tickets with an attachment (Rome 09-11) */
.item .lclip{display:inline-flex;align-items:center;flex:none;color:var(--ink3);margin-left:5px;opacity:.8}
.item.unread .t{color:var(--acc-strong);font-weight:600}
.prio{font-weight:800;font-size:12px;flex:none}
.prio.high{color:var(--warn)}.prio.urgent{color:var(--bad)}
.item .subj{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .prev{font-size:12px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .chips{display:flex;gap:8px;align-items:center;margin-top:3px;min-width:0}
.item .chips .left{display:flex;gap:5px;align-items:center;min-width:0;flex:1 1 auto;overflow:hidden;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 14px),transparent)}
.item .chips .chip{flex:none}
.item .chips .tno{font-family:var(--mono);font-size:10.5px;color:var(--ink3);margin-right:1px;flex:none}
.item .chips .right{margin-left:auto;display:inline-flex;align-items:center;gap:5px;flex:none}
.mark{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;white-space:nowrap;color:var(--ink2)}
.mark.ai{color:var(--ai)}.mark.draft{color:var(--good)}.mark.esc{color:var(--warn)}.mark.act{color:var(--bad)}
.asg.ai{width:18px;height:18px;border-radius:50%;background:var(--ai);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.lfoot{flex:none;display:flex;align-items:center;gap:6px;padding:8px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--ink3);white-space:nowrap;overflow:hidden;background:var(--panel)}
.lfoot kbd{margin-left:6px}
.lfoot kbd:first-child{margin-left:0}

/* ---- thread ---- */
.center{display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--bg)}
/* thread head v2 (Rome 09-30, "gwn cleaner"): one control style — bordered
   30px pills — translate switch first, then status · priority · Solve · ⚑ · ⋯ */
.chead{height:var(--head-h);flex:none;display:flex;align-items:center;gap:6px;padding:0 14px 0 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.chead>.avatar{margin-right:2px}
.chname{display:flex;flex-direction:column;line-height:1.15;min-width:72px;flex:0 1 auto}
.chname b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chmail{font-size:11px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tno{font-family:var(--mono);font-size:10.5px;color:var(--ink3)}
.chead .btn{height:30px;padding:0 12px}
.chead .btn.good{box-shadow:0 1px 2px rgba(29,138,84,.25)}
.chead .hsep{width:1px;height:18px;background:var(--line);margin:0 4px;flex:none}
.hbtn{width:30px;height:30px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink2)}
.hbtn:hover{background:var(--hover);color:var(--ink)}
.hbtn.on{background:var(--acc-soft);border-color:var(--acc-border);color:var(--acc-strong)}
details.menu[open]>summary.hbtn,details.menu[open]>summary.hpill{background:var(--hover);border-color:var(--ink3)}
.hpill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 8px 0 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;flex:none;cursor:pointer;user-select:none}
.hpill:hover{background:var(--hover)}
.hpill .chev,.xlate .chev{color:var(--ink3)}
/* status dot + priority bars, in the pill and in its menu */
.sdot{width:8px;height:8px;border-radius:50%;background:var(--ink3);flex:none}
.st-new .sdot{background:var(--chip-blue-ink)}.st-open .sdot{background:var(--chip-amber-ink)}.st-pending .sdot{background:var(--ink3)}
.st-solved .sdot{background:var(--chip-green-ink)}.st-closed .sdot{background:var(--line);box-shadow:inset 0 0 0 1.5px var(--ink3)}
.pic{color:var(--ink2)}
.pr-low .pic{color:var(--ink3)}.pr-high .pic{color:var(--warn)}.pr-urgent .pic{color:var(--bad)}
.hpill.pr-urgent{color:var(--bad)}.hpill.pr-high{color:var(--warn)}
.hmenu .popover{min-width:150px}
.hmenu .popover>button .ck,.xlpop .ck{margin-left:auto;color:var(--acc-strong)}
/* translate switch: [文A ●━ | NL ▾] — the switch flips the whole thread,
   the chevron opens the language menu */
.xlate{display:inline-flex;align-items:stretch;height:30px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);flex:none}
.xltog{display:inline-flex;align-items:center;gap:7px;padding:0 8px 0 9px;border-radius:calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px);color:var(--ink2)}
.xltog:hover{background:var(--hover)}
.xlate.on .xltog{color:var(--ai)}
.sw{position:relative;width:26px;height:15px;border-radius:8px;background:var(--line);transition:background .15s;flex:none}
.sw i{position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.xlate.on .sw{background:var(--ai)}
.xlate.on .sw i{transform:translateX(11px)}
.xlmenu{display:flex}
.xlmenu>summary{display:inline-flex;align-items:center;gap:4px;padding:0 7px 0 8px;border-left:1px solid var(--line);border-radius:0 calc(var(--r) - 1px) calc(var(--r) - 1px) 0;font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--ink2);user-select:none}
.xlmenu>summary:hover,.xlmenu[open]>summary{background:var(--hover);color:var(--ink)}
.xlate.on .xcode{color:var(--ai)}
.xlmenu .xspin{display:none;color:var(--ai)}
.xlate.busy .xlmenu .chev{display:none}
.xlate.busy .xlmenu .xspin{display:inline-block;animation:spin .9s linear infinite}
/* the language menu */
.xlpop{width:264px;padding:6px;gap:2px;cursor:default}
.xlh{display:flex;align-items:center;gap:6px;padding:6px 8px 2px;font-size:12.5px;color:var(--ink)}
.xlpop .xhint{padding:0 8px 8px;font-size:11px;color:var(--ink3)}
.xlh b{font-weight:600}
.xlh .arr{color:var(--ink3)}
.xlh .xoff{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);background:var(--panel2);border-radius:9px;padding:2px 7px}
.xlh:has(.xoff) b:last-of-type{color:var(--ink3)}
.xls{display:flex;align-items:center;gap:7px;height:32px;padding:0 10px;margin:0 2px 4px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink3)}
.xls:focus-within{border-color:var(--ai-border);box-shadow:0 0 0 3px var(--ai-soft)}
.xls input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:12.5px;color:var(--ink)}
.xll{max-height:min(292px,calc(100vh - 230px));min-height:80px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.xll>button{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--ink);text-align:left;white-space:nowrap}
.xll>button:hover{background:var(--hover)}
.xll>button:focus-visible,.hmenu .popover>button:focus-visible,.xlf>button:focus-visible{outline:2px solid var(--ai);outline-offset:-2px;border-radius:7px}
.xll>button.on{background:var(--ai-soft);font-weight:600}
.xll>button.on .ck{color:var(--ai)}
.xll>button[hidden],.xlnone[hidden]{display:none}
.xll .xt{font-size:10.5px;font-weight:500;color:var(--ink3)}
.xll .ln+.xt{margin-left:2px}
.xlnone{padding:10px 8px;font-size:12px;color:var(--ink3)}
.flag{width:18px;height:12px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.xlf{border-top:1px solid var(--line);margin-top:4px;padding-top:4px;display:flex}
.xlf>button{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--ink);flex:1}
.xlf>button:hover{background:var(--hover)}
.xlf>button .i{color:var(--ink2)}
/* narrow center column (cw-s/cw-xs/cw-xxs from a ResizeObserver in thread.js —
   a CSS container would make the column a stacking context and trap its
   menus): labels go icon-only in steps; below 480px the report flag (also in
   the ⋯ menu) and the tier chip (also in the digest) go; below 420px (a 1280px
   window with default columns) the avatar and the translate glyph */
.center.cw-s .chead .hpill .plabel,.center.cw-s .chead .hsep{display:none}
.center.cw-s .chead .hpill{padding:0 7px 0 8px}
.center.cw-s .csub .chip.lbl{display:none}
.center.cw-xs .xlmenu .xcode,.center.cw-xs .chead .hpill .slabel,.center.cw-xs .chead .btn .bl{display:none}
.center.cw-xs .chead .btn{padding:0 9px}
.center.cw-xs .opill>.i:first-child{display:none}
.center.cw-xs .csub .subject{min-width:48px}
.center.cw-xxs .chead .hbtn[data-act$=report],.center.cw-xxs .csub .chip.tier,.center.cw-xxs .hgrp>[data-act=exportdispute]{display:none}
.center.cw-4 .chead>.avatar,.center.cw-4 .xltog>.i{display:none}
.center.cw-4 .chead{padding:0 10px 0 12px;gap:5px}
.center.cw-4 .chname{min-width:56px}
.center.cw-4 .csub{padding:7px 12px}
.csub{display:flex;align-items:center;gap:6px;padding:7px 16px;border-bottom:1px solid var(--line);background:var(--panel);font-size:12.5px;min-width:0;flex:none}
.csub .subject{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:120px;flex:1 1 auto}
.csub .chip{flex:0 1 auto;min-width:0;overflow:hidden}
.csub .chip.cat,.csub .chip.tier,.csub .chip.sbu{flex:none}
/* order number + link/copy: two small bordered pills at the end of the subject row */
.opill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);font-size:11.5px;font-weight:600;color:var(--ink2);white-space:nowrap;flex:none}
.opill .onum{font-variant-numeric:tabular-nums}
.opill .cp{color:var(--ink3);opacity:0;transition:opacity .12s;margin-left:-1px}
.opill:hover{background:var(--hover);color:var(--acc-strong)}
.opill:hover .cp{opacity:1}
.hgrp{display:inline-flex;height:24px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);flex:none}
.hgrp>button{width:28px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink3)}
.hgrp>button+button{border-left:1px solid var(--line)}
.hgrp>button:hover{background:var(--hover);color:var(--acc-strong)}
.hgrp>button:first-child{border-radius:calc(var(--r-sm) - 1px) 0 0 calc(var(--r-sm) - 1px)}
.hgrp>button:last-child{border-radius:0 calc(var(--r-sm) - 1px) calc(var(--r-sm) - 1px) 0}
.hgrp>button:focus-visible{outline-offset:-2px}
.thread{flex:1;min-height:0;padding:14px 20px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;scrollbar-width:auto;scrollbar-color:var(--ink3) transparent}
.ev{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;color:var(--ink2);text-align:center}
.ev .pill{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:10px;border:1px dashed var(--line);max-width:100%;text-align:left}
.ev .pill.esc{border:1px solid var(--acc-border);background:var(--acc-soft);color:var(--acc-strong)}
.ev .t{font-family:var(--mono);font-size:10px;color:var(--ink3);white-space:nowrap}
/* thread v3 (concept D, 09-09): digest card · day separators · chat bubbles ·
   folded history · one language switch */
.csub .subject{min-width:80px}
.thread .day{display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--ink3);margin:4px 0 -2px}
.digest{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:8px 12px 10px;display:flex;flex-direction:column;gap:6px;margin-bottom:4px;flex:none}
.digest.closed{padding-bottom:8px}
.digest .dh{display:flex;align-items:center;gap:6px;width:100%;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);text-align:left}
.digest .dh .i.ai{color:var(--ai)}
.digest .dh .facts{margin-left:auto;display:inline-flex;gap:5px;align-items:center;text-transform:none;letter-spacing:0}
.digest .dh .chev{color:var(--ink3);transition:transform .12s}
.digest.closed .dh .chev{transform:rotate(-90deg)}
.digest .dtext{font-size:12.5px;line-height:1.5;color:var(--ink)}
.digest .dupd{font-size:10.5px;color:var(--ink3)}
/* structured summary (Rome 09-17): Customer / We did / Now as fixed rows */
.dgrid{display:grid;grid-template-columns:auto 1fr;gap:3px 12px}
.dgrid .dk{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);padding-top:2px;white-space:nowrap}
.dgrid .dv{font-size:12.5px;line-height:1.5;color:var(--ink)}
/* manual refresh button (Rome 09-17) */
.ibtn.spin .i{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bub{max-width:76%;display:flex;flex-direction:column;gap:4px;flex:none}
.bub.in{align-self:flex-start}
.bub.out{align-self:flex-end;align-items:flex-end}
.bub.note{align-self:center;max-width:86%}
.bub .b{padding:9px 13px;border-radius:14px;background:var(--bub-in-bg,var(--panel));border:1px solid var(--bub-in-border,var(--line));box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.bub.in .b{border-bottom-left-radius:4px}
.bub.out .b{background:var(--bub-out-bg,var(--acc-soft));border-color:var(--bub-out-border,var(--acc-border));border-bottom-right-radius:4px}
.bub.note .b{background:var(--bub-note-bg,var(--note-soft));border-color:var(--bub-note-border,var(--note-border));flex-direction:row;align-items:flex-start;gap:8px;border-radius:var(--r-lg)}
.bub.note .b .i{color:var(--note);margin-top:3px}
.bub .body{font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.bub .body a,.transdraft a{color:var(--acc-strong);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.bub .body a:hover,.transdraft a:hover{color:var(--acc)}
.bub .m{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--ink3);padding:0 4px;flex-wrap:wrap}
.bub .m b{color:var(--ink2);font-weight:600}
.bub .m .dot{color:var(--line)}
.bub .m .lk{color:var(--ink2);font-weight:600}
.bub .m .lk:hover{color:var(--acc-strong);text-decoration:underline}
.bub .m .lk.muted{color:var(--ink3);font-weight:500;cursor:default}
.bub .m .lk.fold{display:inline-flex;align-items:center;gap:2px;color:var(--ink3)}
.bub .m .lk.fold:hover{color:var(--acc-strong)}
.bub .m .ai{display:inline-flex;align-items:center;gap:3px;color:var(--ai);font-weight:600;font-size:inherit;max-width:260px;min-width:0;white-space:nowrap;cursor:pointer}
.bub .m .ai .aitxt{overflow:hidden;text-overflow:ellipsis;min-width:0}
/* one line, always: the AI verdict gives way, the rest keeps its width */
.bub.in .m{flex-wrap:nowrap;white-space:nowrap;max-width:100%}
.bub.in .m>*{flex:none}
.bub.in .m>.ai{flex:0 1 auto;min-width:16px;overflow:hidden}
.bub .m .ai:hover .aitxt{text-decoration:underline}
/* Gmail's "•••": greeting + signature fold lives in the bubble, not in the meta line (Rome 09-19) */
.bub .morefold{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;height:14px;padding:0 6px;border-radius:7px;background:var(--panel2);color:var(--ink3);cursor:pointer;margin-top:-2px}
.bub .morefold:hover,.bub .morefold.on{color:var(--ink);background:var(--line)}
.bub.out .morefold{background:rgba(0,0,0,.06)}
.bub .m .chip{height:16px;font-size:9.5px;padding:0 6px}
.bub.fold{cursor:pointer;max-width:80%}
.bub.fold .b{flex-direction:row;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:16px;box-shadow:none;white-space:nowrap;font-size:12px;color:var(--ink2);min-width:0;max-width:100%;overflow:hidden}
.bub.fold.in .b{border-bottom-left-radius:16px}
.bub.fold.out .b{border-bottom-right-radius:16px;color:var(--acc-strong)}
.bub.fold .b .ex{overflow:hidden;text-overflow:ellipsis;min-width:0}
.bub.fold .b .t{color:var(--ink3);font-size:10.5px;flex:none}
.bub.fold .b .chev{color:var(--ink3);flex:none}
.bub.fold .b .chip{height:16px;font-size:9.5px;padding:0 6px;flex:none}
.bub.fold:hover .b{border-color:var(--acc-border)}
.bub.note.fold .b{height:32px;align-items:center}
.bub.note.fold .b .i{margin-top:0}
.bub .steps{list-style:none;margin:2px 0 0;border:1px solid var(--ai-border);border-radius:var(--r-md);background:var(--panel);padding:8px 12px;display:flex;flex-direction:column;gap:6px;font-size:11.5px;max-width:100%}
.bub .steps li{display:flex;gap:9px;align-items:flex-start}
.bub .steps li .i{color:var(--ai);margin-top:2px}
.bub .steps li b{font-weight:600;display:block}
.bub .steps li .sd{display:block;color:var(--ink2);font-size:11px;line-height:1.4}
.bub .steps li.bad b{color:var(--warn)}
.atts{display:flex;gap:6px;flex-wrap:wrap}
.att{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:0 10px;height:26px;border-radius:13px;background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.att:hover{border-color:var(--acc-border);color:var(--acc-strong)}
.att .asz{font-weight:400;color:var(--ink2);font-size:10px}
.attimg{display:inline-block;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.attimg img{display:block;max-height:180px;max-width:260px;object-fit:cover}
.sendstate{font-size:10px;color:var(--ink2);text-align:right}
.sendstate.failed{color:var(--bad)}
.actionbar{display:flex;align-items:center;gap:10px;margin:0 18px 8px;padding:9px 12px;border:1px solid var(--acc-border);background:var(--acc-soft);border-radius:var(--r-lg);font-size:12.5px;flex:none;color:var(--acc-strong)}
.actionbar .txt{flex:1;min-width:0;color:var(--ink)}
.actionbar .txt b{color:var(--acc-strong)}
.actionbar .btn{height:26px;padding:0 10px;font-size:11.5px}
.actionbar .rcheck{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:11.5px;color:var(--ink2)}
.actionbar .rcheck .chip{margin:0 2px}
/* reported (muted) customer — grey, not an action */
.actionbar.muted{border-color:var(--line);background:var(--panel2);color:var(--ink2)}
.actionbar.muted .txt{color:var(--ink2)}
.actionbar.muted .txt b{color:var(--ink)}
/* Observix card: refunds with % of order value */
details.fold>summary .src{margin-left:auto;font-size:10px;font-weight:600;color:var(--ink3);text-transform:none;letter-spacing:0}
details.fold>summary .src+.chev{margin-left:8px}
.rlist{display:flex;flex-direction:column;gap:2px}
/* refund + dispute rows: date | head (title · amount · chip right) over a grey sub line */
.rrow{display:flex;align-items:flex-start;gap:6px;font-size:12px;padding:4px 0;border-top:1px solid var(--line);min-width:0}
.rrow:first-child{border-top:none}
.rrow .d{font-family:var(--mono);font-size:10.5px;color:var(--ink3);flex:none;min-width:48px;padding-top:2px}
.rrow b{white-space:nowrap}
.rrow .amt{font-variant-numeric:tabular-nums;white-space:nowrap}
.rrow.muted{opacity:.6}
.rrow .dmain{flex:1;min-width:0}
.rrow .dhead{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px}
.rrow .dhead .chip{margin-left:auto}
.rrow .dsub{font-size:11px;color:var(--ink3);margin-top:1px;overflow-wrap:anywhere}
.rrow .due{color:var(--chip-amber-ink);font-weight:600}
.chip.exc{outline:1px dashed var(--warn);outline-offset:-1px}

/* ---- compose card ---- */
.compose{flex:none;position:relative;margin:0 18px 14px;max-height:55%;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);display:flex;flex-direction:column;scrollbar-width:auto;scrollbar-color:var(--ink3) transparent}
.compose.collapsed{max-height:none;overflow:visible}
.compose.maxed{flex:1;max-height:none;height:auto!important;margin-top:14px}
.compose.maxed .dwrap,.compose.sized .dwrap{flex:1 1 auto;min-height:0}
.compose.maxed .dbody,.compose.sized .dbody{flex:1 1 auto;max-height:none;min-height:72px}
.composevrz{position:absolute;left:0;right:0;top:-4px;height:8px;cursor:row-resize;z-index:5}
.composevrz:hover{box-shadow:inset 0 3px 0 var(--acc-border)}
.ctabs{display:flex;align-items:center;gap:4px;padding:8px 10px 0;flex:none;position:relative}
.compose.collapsed .ctabs{padding-bottom:8px}
.ctab{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 12px;border-radius:var(--r);font-size:12.5px;font-weight:500;color:var(--ink2)}
.ctab:hover{background:var(--hover)}
.ctab.on{background:var(--panel2);color:var(--ink);font-weight:600}
.compose.notemode .ctab.on{background:var(--note-soft);color:var(--note)}
.dwrap{display:flex;flex-direction:column;margin:8px 12px 0;flex:none}
.dwrap.ai{border:1px solid var(--ai-border);border-radius:var(--r-md);background:var(--ai-soft);overflow:hidden}
.dtop{display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:11.5px;color:var(--ink2);min-width:0;flex:none}
.dwrap.ai .dtop{border-bottom:1px solid var(--ai-border)}
.dtop .rat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dtop .ibtn{width:24px;height:24px;color:var(--ai)}
.dbody{width:100%;padding:10px 12px;font-size:13px;line-height:1.55;min-height:110px;max-height:220px;overflow-y:auto;white-space:pre-wrap;word-break:break-word;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);scrollbar-width:auto;scrollbar-color:var(--ink3) transparent}
.dwrap.ai .dbody{background:transparent;border:none;border-radius:0}
.dbody:focus{outline:2px solid var(--acc);outline-offset:-2px}
.dwrap.ai .dbody:focus{outline-color:var(--ai)}
.dbody:empty::before{content:attr(data-ph);color:var(--ink3);font-style:italic;pointer-events:none}
.notebody{background:var(--note-soft);border-color:var(--note-border)}
.transdraft{border-top:1px solid var(--ai-border);font-size:12px;color:var(--ink2);flex:none;max-height:120px;overflow-y:auto;scrollbar-width:auto;scrollbar-color:var(--ink3) transparent}
.transdraft>summary{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:11px;color:var(--acc-strong);font-weight:600;cursor:pointer;list-style:none;position:sticky;top:0;background:var(--panel)}
.transdraft>summary::-webkit-details-marker{display:none}
.transdraft>summary .chev{margin-left:auto;color:var(--ink3);transition:transform .12s}
.transdraft[open]>summary .chev{transform:rotate(180deg)}
.transdraft[open]{max-height:min(48vh,520px)}
/* Sized/maxed compose: the dwrap is a clipped flex column, so an open translation must shrink with it (own scrollbar) instead of being cut off below (07-10). */
.compose.maxed .transdraft[open],.compose.sized .transdraft[open]{flex:0 1 auto;min-height:56px;max-height:45%}
.transdraft>div{font-size:12.5px}
.transdraft>div{padding:0 12px 10px;font-style:italic;white-space:pre-wrap;line-height:1.5}
.adjust{display:flex;align-items:center;gap:8px;margin:8px 12px 0;padding:0 10px;height:30px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);color:var(--ai);flex:none}
.adjust input{flex:1;min-width:0;background:transparent;border:none;font-size:12.5px;color:var(--ink);outline:none;height:100%}
.adjust:focus-within{border-color:var(--ai);background:var(--panel)}
.actions{display:flex;align-items:center;gap:4px;padding:8px 10px 10px;flex:none}
.tplsel{font:inherit;font-size:12px;font-weight:600;height:28px;padding:0 20px 0 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink2);cursor:pointer;max-width:120px;appearance:none;-webkit-appearance:none;background-image:var(--chv);background-repeat:no-repeat;background-position:right 5px center;background-size:11px}
.tplsel:hover{background-color:var(--hover)}
.actions kbd{margin:0 6px}
.split{display:inline-flex;flex:none}
.split>.btn{border-radius:var(--r) 0 0 var(--r)}
.split details.menu>summary.btn{border-radius:0 var(--r) var(--r) 0;padding:0 8px;border-left:1px solid rgba(255,255,255,.35)}
.split .popover{min-width:210px}

/* ---- context column ---- */
.ctx{background:var(--bg);display:flex;flex-direction:column;overflow:hidden;border-left:1px solid var(--line)}
.ctxhead{height:var(--head-h);flex:none;display:flex;align-items:center;gap:10px;padding:0 12px 0 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.cname{display:flex;flex-direction:column;line-height:1.15;min-width:0;flex:1}
.cname b{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cname .mono{font-size:11px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctags{display:inline-flex;gap:4px;flex:none}
.ctxbody{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;scrollbar-width:auto;scrollbar-color:var(--ink3) transparent}
.shopmail{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink2);padding:0 2px;white-space:nowrap;overflow:hidden}
.ctx .kv .v .chip{flex:none}
.ctx .kv .v.warn{color:var(--warn)}
.ctx .kv .v.bad{color:var(--bad);font-weight:600}
.ocard{border-top:1px solid var(--line)}
.ocard>summary{display:flex;align-items:center;gap:6px;padding:9px 14px;cursor:pointer;list-style:none;font-size:12.5px;min-width:0;overflow:hidden}
.ocard>summary::-webkit-details-marker{display:none}
.ocard>summary:hover{background:var(--hover)}
.ocard>summary b{font-weight:600;white-space:nowrap}
.ocard>summary .chip{flex:none}
.ocard>summary .amt{margin-left:auto;font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.ocard>summary .chev{color:var(--ink3);transition:transform .12s;flex:none}
.ocard[open]>summary .chev{transform:rotate(180deg)}
.obody{padding:0 14px 12px;font-size:12px}
.oli{display:flex;gap:9px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:12px}
.oli img,.oli .noimg{width:36px;height:36px;border-radius:7px;object-fit:cover;background:var(--panel2);flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--ink3)}
.oli .olit{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.oli .olit b,.oli .olit .oprod{font-weight:600;line-height:1.3}
.oli .olit .oprod{color:inherit}.oli .olit .oprod:hover{color:var(--acc-strong);text-decoration:underline;text-underline-offset:2px}
.oli .olit>span{font-size:11px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oli .olit .orf{margin-top:2px}
.oli .olt{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.osub{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);margin:10px 0 4px}
.small{font-size:11.5px}
.oactions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.olinked{display:flex;align-items:center;gap:6px;padding:8px 0 0;font-size:12px}
.olinked .muted{font-size:11px}
.olinked .ibtn{margin-left:auto}
.osuggs{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px}
.osl{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--acc-strong)}
.osugg{background:var(--panel2);border:1px solid var(--acc-border);border-radius:var(--r-md);padding:9px 11px;display:flex;flex-direction:column;gap:4px}
.oshead{display:flex;justify-content:space-between;font-size:12.5px}
.ossub{font-size:11.5px;color:var(--ink2);line-height:1.4}
.olinkform{display:flex;gap:6px;margin-top:10px}
.olinkform input{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);height:26px;padding:0 10px;color:var(--ink);font-size:12px}
.tl{list-style:none;font-size:11.5px;display:flex;flex-direction:column;gap:2px;margin-top:6px}
.tl li{display:flex;gap:8px;padding:2px 0;line-height:1.4}
.tl .d{font-family:var(--mono);font-size:10.5px;color:var(--ink3);min-width:78px;flex:none}
.tlc{color:var(--chip-pink-ink);font-weight:600}.tlcs{color:var(--acc-strong);font-weight:600}
.tlev{color:var(--ink2);font-style:italic}.tlnote{color:var(--note);font-weight:600}
.aisum{font-size:12px;background:var(--good-soft);border-radius:var(--r);padding:8px 10px;line-height:1.45}
.aisum b{color:var(--good)}
.relrow{width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px;display:flex;flex-direction:column;gap:3px;margin-top:6px}
.relrow:first-child{margin-top:0}
.relrow:hover{border-color:var(--acc-border);background:var(--hover)}
.reltop{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.reltop .d{font-family:var(--mono);font-size:10px;color:var(--ink2)}
.reln{font-size:10px;color:var(--ink2);margin-left:auto;white-space:nowrap}
.relsum{font-size:11.5px;color:var(--ink2);line-height:1.4}
.cnotes{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:7px 10px;font-size:12px;color:var(--ink);resize:vertical;line-height:1.45}
.cnotes:focus{outline:2px solid var(--acc);outline-offset:-1px}
.fbody .hint{display:block;margin-top:4px}

/* ---- toast ---- */
.toast{position:fixed;bottom:20px;right:20px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--good);border-radius:var(--r-md);padding:10px 16px;font-size:12.5px;z-index:50;box-shadow:var(--shadow-pop)}
.toast.err{border-left-color:var(--bad)}
@media (prefers-reduced-motion: no-preference){
  .toast{animation:pop .18s ease-out}
  @keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
}
/* click-to-copy (Rome 09-09: email address + order number) */
.copyable{display:inline-flex;align-items:center;gap:3px;color:inherit;font:inherit;cursor:pointer;border-radius:4px;padding:0 2px}
.copyable .i{opacity:0;transition:opacity .12s;color:var(--ink3)}
.copyable:hover{background:var(--hover);color:var(--acc-strong)}
.copyable:hover .i{opacity:1}
/* accepted % → amount */
.amt{white-space:nowrap;color:var(--acc-strong)}
.ev .pill .amt{color:inherit}
.ev .pill .tlink,.tlev .tlink{color:inherit;font-weight:600;text-decoration:underline dotted;text-underline-offset:2px}.ev .pill .tlink:hover,.tlev .tlink:hover{color:var(--acc-strong);text-decoration-style:solid}
/* ✦ line in write mode (empty reply box) */
.adjust.write{border-color:var(--ai-border);background:var(--ai-soft)}
.adjust.write input::placeholder{color:var(--ai)}
.actions .btn.ghost.sm{height:28px;padding:0 8px;font-size:12px;color:var(--ink2)}
/* copied feedback */
.copyable.copied,.ibtn.copied,.opill.copied,.hgrp>button.copied{color:var(--good)!important}
.copyable.copied .i,.ibtn.copied .i,.opill.copied .i,.hgrp>button.copied .i{opacity:1!important;color:var(--good)}
.copyable.copied::after{content:"Copied";font-size:10px;font-weight:600;color:var(--good);margin-left:2px}

/* select-all checkbox in the list filter row (Rome 09-10) */
.lfilters .ckall{flex:none;width:14px;height:14px;margin:0 2px 0 1px;accent-color:var(--acc);cursor:pointer}
.selbar .lk{font-size:12px;color:var(--acc-strong);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;white-space:nowrap}
/* delivery events on the orders timeline (Rome 09-10): failed attempts red, delivered green */
.tl li.bad span:last-child{color:var(--chip-red-ink)}
.tl li.ok span:last-child{color:var(--chip-green-ink);font-weight:600}

/* Required links before sending (09-14): bar under the draft */
.reqbar{display:flex;flex-direction:column;gap:6px;margin:8px 12px 0;flex:none}
.reqbar:empty{display:none}
/* outgoing attachments (Rome 09-16): chips above the toolbar, ✕ removes */
.attrow{display:flex;flex-wrap:wrap;gap:6px;margin:8px 12px 0;flex:none}
.attrow:empty{display:none}
.attrow.nemail{margin:0 0 10px}
.modal textarea.dropping{outline:2px dashed var(--acc-border);outline-offset:-2px}
.att.pending{padding-right:3px}
.att.pending a{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none}
.att.pending a:hover{color:var(--acc-strong)}
.att .x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:0;border-radius:9px;background:none;color:var(--ink3);cursor:pointer;padding:0;margin-left:2px}
.att .x:hover{background:var(--chip-amber-bg);color:var(--ink)}
.att.sent{cursor:default}
.compose.dropping{outline:2px dashed var(--acc);outline-offset:-4px}
.reqlist{margin:6px 0 10px 18px;padding:0}
.reqlist li{margin:3px 0}
.req{display:flex;align-items:center;gap:8px;padding:0 10px;min-height:30px;border:1px solid var(--line);border-radius:var(--r);font-size:12px;color:var(--ink2);flex-wrap:wrap}
.req b{color:var(--ink);font-weight:600}
.req.ok{background:var(--good-soft);border-color:transparent;color:var(--good)}
.req.ok b{color:var(--good)}
.req.missing{background:var(--chip-amber-bg);border-color:var(--note-border);color:var(--chip-amber-ink)}
.req.missing .hint{color:var(--chip-amber-ink)}
.req input{flex:1;min-width:160px;height:22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 8px;font-size:12px;color:var(--ink)}
.req input:focus{outline:2px solid var(--acc);outline-offset:-1px}
.req .btn.sm{height:22px;padding:0 9px;font-size:11.5px}
/* A reply that did not reach the customer (audit 09-22): red frame on the
   bubble, the reason and Send again / Remove underneath. */
.bub.out.notsent .b{background:var(--bad-soft);border-color:var(--bad)}
.sendfail{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;max-width:100%;margin-top:4px;padding:6px 8px 6px 10px;border:1px solid var(--bad);border-radius:var(--r);background:var(--bad-soft);font-size:12px;color:var(--bad)}
.sendfail .why{flex:1 1 220px;min-width:0;color:var(--ink)}
.sendfail .acts{display:flex;gap:6px;margin-left:auto}
.sendfail .btn.sm{height:24px;padding:0 10px;font-size:12px}
/* A newer AI draft arrived while the operator had edited the text. */
.newdraft{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0 0 8px;padding:6px 8px 6px 10px;border:1px solid var(--ai-border);border-radius:var(--r);background:var(--ai-soft);font-size:12px;color:var(--ai)}
.newdraft .btn.sm{height:22px;padding:0 9px;font-size:11.5px}
.newdraft.warn{border-color:var(--note-border);background:var(--chip-amber-bg);color:var(--chip-amber-ink)}