@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap");
@import url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/duotone/style.css");
@import url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css");

:root{
  /* palette */
  --bg:#f3f5f8; --panel:#ffffff; --line:#e4e7ec; --line-soft:#eceef1;
  --canvas:color-mix(in srgb,#f3f5f8 50%,#fff);      /* page background — regular grey lightened 50% */
  --statusbar:color-mix(in srgb,#f3f5f8 70%,#000);   /* status bar — regular grey darkened 30% */
  --ink:#1b1e25; --ink-2:#2a3140; --muted:#5a616e; --muted-2:#6f7682; --muted-3:#8a909b; --muted-4:#aeb4bd;
  --acc:#1e4fd6; --acc-soft:#e8ecfc; --acc-dark:#163fb0; --acc-line:color-mix(in srgb, var(--acc) 26%, #fff);
  --ai:#7a45d1; --ai-soft:#f0e9fb; --ok:#0f7344; --ok-soft:#e1f3e8; --danger:#d92d20; --danger-soft:#fdeae4; --amber:#d1791f;
  --teal:#0d9aa6; --teal-soft:#e9f7f9;
  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --r:3px; --ctl:40px;
  --shadow-card:0 1px 2px rgba(23,26,33,.05),0 4px 12px rgba(23,26,33,.035);
  --sidebar-w:250px; --rail-w:clamp(400px,30vw,480px);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;background:var(--canvas);color:var(--ink);
}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
/* icon helper — flex-centered, no magic nudge; centers with adjacent text in any flex row */
.i{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;}
button{font-family:inherit;cursor:pointer;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:#d3d7de;border-radius:6px;}
::-webkit-scrollbar-track{background:transparent;}
/* center panel — thin 2px muted-cobalt scrollbar */
.feed{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--acc) 35%,#c2c8d3) transparent;}
.feed::-webkit-scrollbar{width:8px;}
.feed::-webkit-scrollbar-track{background:transparent;margin:2px 0;}
.feed::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--acc) 32%,#c9cfd9);border-radius:2px;}
.feed::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--acc) 52%,#b6bece);}

/* ---------- shell ---------- */
.app{height:100vh;height:100dvh;min-width:1180px;display:flex;flex-direction:column;overflow:hidden;}
.body{flex:1;min-height:0;display:flex;}

/* ---------- top bar ---------- */
.topbar{flex-shrink:0;display:flex;align-items:center;padding:var(--s4) var(--s4) 0 0;}
.brand{width:calc(var(--sidebar-w) + var(--s4));flex-shrink:0;display:flex;align-items:center;gap:10px;padding-left:14px;}
.brand .logo{width:30px;height:30px;border-radius:var(--r);background:var(--acc);color:#fff;}
.brand .logo .i{font-size:18px;}
.brand .name{font-size:16px;font-weight:700;letter-spacing:-.3px;}
.search{display:flex;align-items:center;gap:10px;height:var(--ctl);width:440px;max-width:38vw;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:0 12px;color:var(--muted-3);box-shadow:var(--shadow-card);}
.search .ph{font-size:17px;}
.search .txt{font-size:13px;}
.search .kbd{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted-3);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r);padding:2px 6px;}
.spacer{flex:1;}
/* agent status card */
.agent{flex:1;min-width:0;display:flex;align-items:center;gap:9px;height:var(--ctl);padding:0 12px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);}
.agent .i.inf{font-size:18px;color:var(--acc);}
.agent .st{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.agent .st .mid{color:var(--muted-4);margin:0 2px;}
.agent .st .ago{color:var(--muted-3);font-weight:500;}
.agent .caret{font-size:13px;color:var(--muted-4);flex-shrink:0;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--ctl);padding:0 14px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel);font-size:13px;font-weight:600;color:#3a4150;white-space:nowrap;}
.btn .ph{font-size:15px;color:var(--muted-2);}
.btn.solid{border:0;color:#fff;}
.btn.green{background:var(--ok);} .btn.green .ph{color:#fff;}
.btn.red{background:var(--danger);box-shadow:0 2px 8px rgba(217,45,32,.28);} .btn.red .ph{color:#fff;}
.btn.amber{background:var(--amber);box-shadow:0 2px 8px rgba(209,121,31,.28);} .btn.amber .ph{color:#fff;}
.topbar-right{width:var(--rail-w);margin-left:auto;display:flex;align-items:center;gap:9px;}
.topbar-right > .btn{padding:0 12px;}
.btn.ico{width:var(--ctl);}
.topbar-right > .btn.ico{padding:0;}
.ar-btn i{font-size:17px;color:var(--danger);}

/* ---------- sidebar ---------- */
.sidebar{width:var(--sidebar-w);flex-shrink:0;display:flex;flex-direction:column;padding:var(--s4) 0 var(--s4) var(--s3);gap:var(--s2);}
.nav{display:flex;flex-direction:column;gap:2px;}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r);
  font-size:13.5px;font-weight:550;color:var(--muted);text-decoration:none;}
.nav a i{font-size:19px;color:var(--muted-3);display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;}
.nav a .count{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--muted-2);background:var(--line-soft);
  padding:0 7px;height:16px;display:inline-flex;align-items:center;border-radius:var(--r);}
.nav a.active{background:var(--acc-soft);color:var(--acc-dark);}
.nav a.active i{color:var(--acc);}
.nav a.active .count{color:#fff;background:var(--acc);}
.side-fill{flex:1;}
.mbx-head{display:flex;align-items:center;gap:7px;padding:0 8px 2px;}
.mbx-head .lbl{font-size:10.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted-2);line-height:1;transform:translateY(.75px);}
.mbx-head .n{font-size:10px;font-weight:700;color:var(--muted-2);background:var(--line-soft);padding:0 5px;height:15px;
  display:inline-flex;align-items:center;border-radius:var(--r);}
.mbx-head .add{margin-left:auto;font-size:14px;color:var(--muted-4);}
.mbx{display:flex;flex-direction:column;gap:1px;}
.mbx .row{display:flex;align-items:center;gap:9px;padding:6px 6px 6px 9px;border-radius:var(--r);}
.mbx .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.mbx .email{flex:1;min-width:0;font-size:12px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mbx .tgl{position:relative;width:30px;height:17px;border-radius:9px;border:0;background:#cdd2da;flex-shrink:0;padding:0;transition:background .15s;}
.mbx .tgl::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(20,24,31,.25);transition:left .15s;}
.mbx .row.on .email{color:#3a4150;} .mbx .row.on .dot{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft);}
.mbx .row.on .tgl{background:var(--acc);} .mbx .row.on .tgl::after{left:15px;}
.mbx .row.off .email{color:#9aa0ac;} .mbx .row.off .dot{background:#c2c7cf;box-shadow:0 0 0 3px var(--line-soft);}
.mbx .row.add-row{cursor:pointer;}
.mbx .row.add-row .add-ico{color:var(--muted-3);flex-shrink:0;}
.mbx .row.add-row .email{color:var(--muted-2);}
.mbx .row.add-row:hover .add-ico,.mbx .row.add-row:hover .email{color:var(--acc);}
.owner{display:flex;align-items:center;gap:10px;height:46px;padding:0 10px;border:1px solid var(--acc-line);
  background:var(--acc-soft);border-radius:var(--r);}
.owner .av{width:32px;height:32px;border-radius:var(--r);background:var(--acc-dark);color:#fff;font-size:12px;font-weight:700;flex-shrink:0;}
.owner .who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;}
.owner .who .nm{font-size:13px;font-weight:650;color:var(--acc-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.owner .who .ro{font-size:11px;color:color-mix(in srgb,var(--acc-dark) 55%,var(--muted-3));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.owner .caret{font-size:15px;color:var(--acc);}

/* ---------- main ---------- */
.main{flex:1;min-width:0;display:flex;gap:var(--s4);padding:var(--s4);}
.col{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s4);}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-card);}

/* summary card */
.chead{flex-shrink:0;display:flex;align-items:center;gap:14px;padding:0 2px;}
.chead .htxt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.chead .title{font-size:18px;font-weight:700;letter-spacing:-.3px;white-space:nowrap;line-height:1.15;}
.chead .when{font-size:12.5px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chead .when b{color:var(--ink-2);font-weight:600;}
.chead .spacer{flex:1;}
.filters{flex-shrink:0;display:flex;flex-wrap:wrap;gap:var(--s2);}
.fbtn{display:inline-flex;align-items:center;gap:7px;height:calc(var(--ctl) * 2 / 3);padding:0 11px;border:1px solid var(--line);
  border-radius:var(--r);background:transparent;font-size:12px;font-weight:600;color:#3a4150;white-space:nowrap;cursor:pointer;}
.fbtn .sic{margin-right:0;}
.fbtn .fct{font-size:10.5px;font-weight:700;color:var(--muted-2);background:var(--line-soft);padding:1px 6px;border-radius:var(--r);}

/* scroll card */
.feed{flex:1;min-height:0;overflow:auto;padding:18px 20px 22px;}
.sec-h{display:flex;align-items:center;gap:9px;margin-bottom:var(--s3);}
.sec-h .ph{font-size:16px;}
.sec-h .t{font-size:13px;font-weight:700;color:var(--ink-2);letter-spacing:-.1px;}
.sec-h .c{font-size:11px;font-weight:600;color:var(--muted-2);background:var(--line-soft);padding:1px 7px;border-radius:var(--r);}
.sec-h .link{margin-left:auto;font-size:12px;color:var(--muted-3);}
.sec{margin-bottom:26px;}
.sec:last-child{margin-bottom:0;}

/* needs-decision cards */
.list{display:flex;flex-direction:column;gap:var(--s2);}
.list.needs-list{gap:var(--s4);}
.di{background:#fff;border:1.5px solid #e7e9ee;border-radius:var(--r);padding:14px 15px;box-shadow:0 1px 2px rgba(20,24,31,.04);}
.di.sel{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft),0 4px 14px rgba(20,24,31,.07);}
.di .head{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.av{border-radius:50%;font-weight:700;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;}
.di .av{width:30px;height:30px;font-size:11px;}
.di .nm{font-size:13.5px;font-weight:650;color:var(--ink);}
.di .em{font-size:12px;color:var(--muted-3);}
.di .tm{margin-left:auto;font-size:11.5px;color:var(--muted-3);}
.di .subj{font-size:14px;font-weight:550;line-height:1.35;margin-bottom:7px;}
.di .why{display:flex;align-items:flex-start;gap:7px;margin-bottom:11px;}
.di .why .ph{font-size:14px;color:var(--ai);margin-top:1px;}
.di .why span{font-size:12.5px;color:var(--muted);line-height:1.45;}
.di .foot{display:flex;align-items:center;gap:8px;}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:var(--r);}
.badge .ph{font-size:12px;}
.badge.draft{color:var(--ai);background:var(--ai-soft);}
.badge.hold{color:var(--danger);background:var(--danger-soft);}
.di .fold{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:550;color:var(--muted-3);}
.di .fold .ph{font-size:13px;color:var(--muted-4);}
.di .review{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--acc);}
.di .review .ph{font-size:13px;}

/* drafted rows */
.drow{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid #e7e9ee;border-radius:var(--r);padding:12px 15px;box-shadow:0 1px 2px rgba(20,24,31,.04);}
.drow .av{width:28px;height:28px;font-size:10.5px;}
.drow .mid{flex:1;min-width:0;}
.drow .l1{display:flex;align-items:center;gap:8px;}
.drow .nm{font-size:13px;font-weight:650;}
.drow .subj{font-size:11.5px;color:var(--muted-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.drow .prev{font-size:12px;color:var(--muted);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.drow .badge{flex-shrink:0;}
.drow .tm{font-size:11.5px;color:var(--muted-3);flex-shrink:0;}

/* filed grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);}
.fcard{display:flex;align-items:center;gap:11px;background:#fbfcfd;border:1px solid #e7e9ee;border-radius:var(--r);padding:11px 13px;}
.fcard .ic{width:30px;height:30px;border-radius:var(--r);flex-shrink:0;}
.fcard .ic .i{font-size:16px;}
.fcard .mid{flex:1;min-width:0;}
.fcard .l1{display:flex;align-items:center;gap:7px;}
.fcard .fn{font-size:13px;font-weight:600;color:var(--ink-2);}
.fcard .plus{font-size:10.5px;font-weight:700;color:var(--ok);background:var(--ok-soft);padding:1px 6px;border-radius:var(--r);}
.fcard .eg{font-size:11.5px;color:var(--muted-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.fcard .undo{font-size:15px;color:var(--muted-4);flex-shrink:0;}

/* ---------- right rail ---------- */
.rail{width:var(--rail-w);flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;}
.rail .rhead{padding:18px 20px 16px;border-bottom:1px solid var(--line-soft);}
.rail .rhead .top{display:flex;align-items:center;gap:12px;}
.rail .rhead .av{width:42px;height:42px;font-size:15px;}
.rail .rhead .who{flex:1;min-width:0;}
.rail .rhead .nm{font-size:15px;font-weight:700;letter-spacing:-.2px;}
.rail .rhead .em{font-size:12px;color:var(--muted-2);}
.rail .rhead .tm{font-size:11.5px;color:var(--muted-3);}
.rail .rhead .subj{font-size:14px;font-weight:600;margin-top:13px;line-height:1.4;}
.rbody{flex:1;min-height:0;overflow:auto;}
.rblock{padding:16px 20px;border-bottom:1px solid var(--line-soft);}
.rlabel{display:flex;align-items:center;gap:7px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin-bottom:8px;}
.rlabel .ph{font-size:14px;}
.rlabel.orig{color:var(--muted-3);}
.rlabel.read{color:var(--teal);}
.rlabel.draft{color:var(--ai);}
.rblock.read{background:var(--teal-soft);}
.orig-q{font-size:13px;color:#4a515e;line-height:1.55;border-left:2px solid var(--line);padding-left:12px;}
.read-t{font-size:13px;color:#3a4150;line-height:1.5;}
.rblock.draftwrap .rlabel .vc{margin-left:auto;font-size:10.5px;color:var(--muted-3);display:inline-flex;align-items:center;gap:4px;text-transform:none;letter-spacing:0;font-weight:500;}
.rblock.draftwrap .rlabel .vc .ph{font-size:13px;color:var(--acc);}
.draftbox{border:1px solid #d8dde3;border-radius:var(--r);background:#fff;overflow:hidden;}
.draftbox .to{padding:11px 13px;border-bottom:1px solid var(--line-soft);font-size:12px;color:var(--muted-2);display:flex;gap:6px;}
.draftbox .to b{color:#3a4150;font-weight:550;}
.draftbox .body{padding:13px;font-size:13.5px;color:#22262e;line-height:1.6;white-space:pre-line;}
.stylenote{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:11.5px;color:var(--muted-3);}
.stylenote .ph{font-size:13px;color:var(--ok);}
.rfoot{padding:13px 20px;border-top:1px solid var(--line-soft);display:flex;gap:9px;}
.rfoot .btn{height:var(--ctl);font-size:12.5px;}
.rfoot .btn.green{flex:1;justify-content:center;font-size:13px;font-weight:650;box-shadow:0 2px 8px rgba(15,115,68,.24);}

/* ---------- footer ---------- */
.footer{flex-shrink:0;display:flex;align-items:center;gap:var(--s4);margin:var(--s2) var(--s4) var(--s4);padding:5px var(--s4);
  background:var(--statusbar);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 -1px 2px rgba(23,26,33,.05),0 -4px 12px rgba(23,26,33,.035);}   /* card border + shadow, cast upward */
.footer .fl{width:var(--sidebar-w);flex-shrink:0;padding-left:0;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;}
.footer .sic > .sub{background:var(--statusbar);}   /* composite-icon notch matches the darker bar */
.footer .fl .ph{font-size:14px;flex-shrink:0;}
.footer .fl b{font-weight:600;color:#3a4150;}
.footer .fstats{flex:1;min-width:0;font-size:12px;color:var(--muted);white-space:nowrap;}
.footer .fstats b,.footer .fright b{font-weight:600;color:var(--ink-2);}
.footer .fright{margin-left:auto;flex-shrink:0;display:flex;align-items:center;gap:0;white-space:nowrap;}
.footer .fright .it{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);}
.footer .fright .it .ph{font-size:14px;color:var(--muted-3);}
.footer .mid{color:var(--muted-4);margin:0 6px;}
.footer .ar{font-size:16px;}
/* composite stat icons (overlay a small action glyph bottom-right) */
.sic{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;vertical-align:-3px;margin-right:6px;}
.sic > i:first-child{font-size:16px;line-height:1;}
.sic > .sub{position:absolute;right:-4px;bottom:-4px;font-size:10px;line-height:1;background:var(--bg);border-radius:50%;}

/* ===== interactivity: hover / focus / dropdown ===== */
.search{transition:border-color .12s,box-shadow .12s;}
.search:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft);}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:inherit;font-size:13px;color:var(--ink);padding:0;}
.search input::placeholder{color:var(--muted-3);}
.nav a{transition:background .12s,color .12s;}
.nav a:not(.active):hover{background:var(--line-soft);color:var(--ink-2);}
.nav a:not(.active):hover i{color:var(--muted-2);}
.btn{transition:background .12s,border-color .12s,box-shadow .12s,transform .06s,filter .12s;}
.btn:not(.solid):hover{background:var(--acc-soft);border-color:var(--acc);color:var(--acc-dark);}
.btn:not(.solid):hover .ph{color:var(--acc);}
.btn:active{transform:translateY(1px);}
.btn.solid:hover{filter:brightness(1.06);}
.fbtn{transition:background .12s,border-color .12s,color .12s,transform .06s;}
.fbtn:hover{background:var(--acc-soft);border-color:var(--acc);color:var(--acc-dark);}
.fbtn:active{transform:translateY(1px);}
.fbtn.on{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc-dark);}
/* filter dropdown (Spam group) */
.fdrop{position:relative;}
.fdrop-btn .caret{font-size:12px;color:var(--muted-3);margin-left:-2px;transition:transform .15s;}
.fdrop.open .fdrop-btn,.fdrop-btn.on{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc-dark);}
.fdrop.open .fdrop-btn .caret{transform:rotate(180deg);}
.fdrop-menu{position:absolute;top:calc(100% + 3px);left:0;min-width:190px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 10px 28px rgba(20,24,31,.16);padding:5px;z-index:30;opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .13s,transform .13s,visibility .13s;}
.fdrop.open .fdrop-menu{opacity:1;visibility:visible;transform:translateY(0);}
.fdrop-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r);font-size:12.5px;font-weight:550;color:var(--ink-2);cursor:pointer;}
.fdrop-item:hover{background:var(--acc-soft);color:var(--acc-dark);}
.fdrop-item input{width:15px;height:15px;margin:0;accent-color:var(--acc);cursor:pointer;flex-shrink:0;}
.fdrop-item .sic{margin-right:0;}
.fdrop-item .sic > .sub{background:#fff;}
.fdrop-item .fct{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--muted-2);background:var(--line-soft);padding:1px 6px;border-radius:var(--r);}
.di,.drow,.fcard{transition:border-color .12s,box-shadow .12s,background .12s;cursor:pointer;}
.di:not(.sel):hover,.drow:hover{border-color:var(--acc-line);box-shadow:0 3px 12px rgba(20,24,31,.09);}
.fcard:hover{background:#fff;border-color:#d3d8e0;}
.mbx .row{transition:background .12s;}
.mbx .row:hover{background:var(--line-soft);}
.mbx .tgl{cursor:pointer;}
.di .review{cursor:pointer;transition:color .12s;}
.di .review i{transition:transform .12s;}
.di:hover .review i{transform:translateX(2px);}
.sec-h .link{cursor:pointer;transition:color .12s;}
.sec-h .link:hover{color:var(--acc);}
.fcard .undo{cursor:pointer;transition:color .12s,transform .2s;}
.fcard .undo:hover{color:var(--danger);transform:rotate(-40deg);}
.btn:focus-visible,.fbtn:focus-visible,.nav a:focus-visible,.mbx .tgl:focus-visible,.agent:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}
.agent{position:relative;cursor:pointer;transition:border-color .12s,box-shadow .12s;}
.agent:hover{border-color:#d3d8e0;box-shadow:var(--shadow-card);}
.agent .caret{transition:transform .15s;}
.agent.open .caret{transform:rotate(180deg);}
.agent-menu{position:absolute;top:calc(100% + 3px);left:0;right:auto;min-width:205px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 10px 28px rgba(20,24,31,.16);padding:5px;z-index:30;opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .13s,transform .13s,visibility .13s;}
.agent-menu.open{opacity:1;visibility:visible;transform:translateY(0);}
.agent-menu .mlabel{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-3);font-weight:700;padding:5px 8px 3px;}
.agent-menu .mi{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--r);font-size:12.5px;font-weight:550;color:var(--ink-2);cursor:pointer;transition:background .1s;white-space:nowrap;}
.agent-menu .mi:hover{background:var(--line-soft);}
.agent-menu .mi > i{font-size:16px;color:var(--muted-3);}
.agent-menu .mi .rt{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--ok);}
.agent-menu .sep{height:1px;background:var(--line-soft);margin:4px 2px;}
.headcard{flex-shrink:0;padding:14px 16px;display:flex;flex-direction:column;gap:var(--s3);}
.headcard .chead{padding:0;}

/* ============================================================
   Additions for auth / error pages. Everything above this line
   is digest.html's stylesheet, verbatim (the app shell).
   ============================================================ */

/* links */
a{color:var(--acc);text-decoration:none;}
a:hover{color:var(--acc-dark);}

/* button variants used by auth / error */
.btn.cobalt{background:var(--acc);box-shadow:0 2px 8px rgba(30,79,214,.28);}
.btn.cobalt .ph{color:#fff;}
.btn.full{width:100%;}
.btn.lg{height:44px;font-size:14px;font-weight:650;}
.btn:hover{text-decoration:none;}

/* wordmark (auth / error brand — distinct from the digest topbar .brand) */
.wordmark{display:inline-flex;align-items:center;gap:10px;}
.wordmark .logo{width:34px;height:34px;border-radius:var(--r);background:var(--acc);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.wordmark .logo i{font-size:20px;}
.wordmark .name{font-size:18px;font-weight:700;letter-spacing:-.3px;}

/* form fields */
.flabel{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px;}
.field{display:flex;align-items:center;gap:9px;height:var(--ctl);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:0 12px;transition:border-color .12s,box-shadow .12s;}
.field:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft);}
.field > .ph{font-size:16px;color:var(--muted-3);}
.field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:inherit;font-size:13.5px;color:var(--ink);padding:0;}
.field input::placeholder{color:var(--muted-3);}
.field .toggle{border:0;background:transparent;color:var(--muted-3);padding:0;display:inline-flex;font-size:16px;transition:color .12s;}
.field .toggle:hover{color:var(--muted);}
.check{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);cursor:pointer;}
.check input{width:15px;height:15px;accent-color:var(--acc);margin:0;cursor:pointer;}

/* auth (login) layout */
.auth{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:20px;}
.auth-card{width:100%;max-width:384px;padding:30px 30px 26px;}
.auth-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-bottom:22px;}
.auth-top .wordmark .logo{width:40px;height:40px;}
.auth-top .wordmark .logo i{font-size:23px;}
.auth-top .wordmark .name{font-size:20px;}
.auth-top h1{font-size:19px;font-weight:700;letter-spacing:-.3px;margin:0;}
.auth-top .sub{font-size:13px;color:var(--muted-2);margin:5px 0 0;line-height:1.5;}
.auth form{display:flex;flex-direction:column;gap:15px;}
.frow{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;margin-top:-2px;}
.frow a{font-weight:550;}
.auth-foot{text-align:center;font-size:12.5px;color:var(--muted-2);margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);}
.auth-note{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted-3);}
.auth-note .ph{font-size:15px;color:var(--ok);}

/* error pages */
.err{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:26px;text-align:center;}
.err .wordmark{position:fixed;top:22px;left:24px;}
.err .wordmark .logo{width:30px;height:30px;} .err .wordmark .logo i{font-size:18px;} .err .wordmark .name{font-size:16px;}
.err-badge{width:72px;height:72px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;background:var(--acc-soft);border:1px solid var(--acc-line);color:var(--acc);}
.err-badge i{font-size:38px;}
.err-badge.amber{background:#fbecd6;border-color:color-mix(in srgb,var(--amber) 32%,#fff);color:var(--amber);}
.err-badge.danger{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 30%,#fff);color:var(--danger);}
.err-code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;font-weight:700;letter-spacing:2px;color:var(--muted-3);text-transform:uppercase;}
.err-txt{display:flex;flex-direction:column;gap:10px;align-items:center;}
.err-txt h1{font-size:24px;font-weight:700;letter-spacing:-.4px;margin:0;}
.err-txt p{font-size:14px;color:var(--muted-2);line-height:1.55;margin:0;max-width:410px;}
.err-actions{display:flex;gap:10px;margin-top:4px;flex-wrap:wrap;justify-content:center;}

/* ---------- drafts page ---------- */
.drow.sel{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft),0 4px 14px rgba(20,24,31,.07);}
.mtag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--muted-2);background:var(--line-soft);padding:2px 7px;border-radius:var(--r);flex-shrink:0;}
.mtag .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0;}
.mtag.off .dot{background:#c2c7cf;}
.conf{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;flex-shrink:0;}
.conf .ph{font-size:13px;}
.conf.hi{color:var(--ok);}
.conf.mid{color:var(--amber);}
.drow .rgt{display:flex;align-items:center;gap:12px;flex-shrink:0;}

/* ---------- activity page ---------- */
.act-day{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-3);margin:0 0 8px;padding-left:2px;}
.act-day.mt{margin-top:22px;}
.act{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r);transition:background .12s;}
.act:hover{background:var(--line-soft);}
.act-ic{width:32px;height:32px;border-radius:var(--r);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;}
.act-ic i{font-size:17px;}
.act-ic.filed{background:var(--ok-soft);color:var(--ok);}
.act-ic.drafted{background:var(--ai-soft);color:var(--ai);}
.act-ic.replied{background:var(--ok-soft);color:var(--ok);}
.act-ic.deleted{background:var(--danger-soft);color:var(--danger);}
.act-ic.spam{background:#fbecd6;color:var(--amber);}
.act-ic.blocked{background:var(--danger-soft);color:var(--danger);}
.act-ic.learned{background:var(--teal-soft);color:var(--teal);}
.act-mid{flex:1;min-width:0;}
.act-desc{font-size:13px;color:var(--ink-2);line-height:1.4;}
.act-desc b{font-weight:650;color:var(--ink);}
.act-sub{font-size:11.5px;color:var(--muted-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.act .tm{font-size:11.5px;color:var(--muted-3);flex-shrink:0;}
.act-undo{width:28px;height:28px;border:0;background:transparent;color:var(--muted-4);border-radius:var(--r);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;transition:color .12s,background .12s;cursor:pointer;}
.act-undo i{font-size:15px;}
.act-undo:hover{color:var(--danger);background:#fff;}
.act-sent{font-size:10.5px;font-weight:600;color:var(--muted-3);flex-shrink:0;display:inline-flex;align-items:center;gap:4px;}
.act-sent .ph{font-size:13px;color:var(--ok);}
/* activity rail summary */
.asum{flex:1;min-height:0;overflow:auto;padding:18px 20px;}
.asum h3{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-3);font-weight:700;margin:0 0 6px;}
.asum h3.mt{margin-top:22px;}
.astat{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--line-soft);}
.astat > i{font-size:17px;flex-shrink:0;display:inline-flex;justify-content:center;width:20px;}
.astat .lbl{flex:1;font-size:13px;color:var(--ink-2);}
.astat .ct{font-size:13.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.learn{display:flex;gap:9px;padding:9px 0;font-size:12.5px;color:var(--muted);line-height:1.45;border-bottom:1px solid var(--line-soft);}
.learn:last-child{border-bottom:0;}
.learn > i{font-size:16px;color:var(--teal);flex-shrink:0;margin-top:1px;}
.learn b{color:var(--ink-2);font-weight:600;}

/* ---------- settings & forms (shared across settings-family pages) ---------- */
.pagewrap{flex:1;min-width:0;overflow:auto;}
.pageinner{max-width:760px;margin:0 auto;padding-bottom:34px;}
.pagehead{margin:4px 2px 18px;}
.pagehead .bk{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted-2);margin-bottom:11px;}
.pagehead .bk:hover{color:var(--acc);}
.pagehead h1{font-size:22px;font-weight:700;letter-spacing:-.4px;margin:0;}
.pagehead .sub{font-size:13.5px;color:var(--muted-2);margin:5px 0 0;line-height:1.5;}
.sect{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-card);margin-bottom:16px;}
.sect > .sh{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-soft);}
.sect > .sh .st{font-size:13.5px;font-weight:700;color:var(--ink-2);}
.sect > .sh .sd{font-size:12px;color:var(--muted-3);}
.sect > .sh .spacer{flex:1;}
.sect > .bd{padding:4px 18px;}
.sect.flush > .bd{padding:0 18px;}
.srow{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-soft);}
.srow:last-child{border-bottom:0;}
.srow .rl{flex:1;min-width:0;}
.srow .rl .rt{font-size:13.5px;font-weight:600;color:var(--ink-2);}
.srow .rl .rd{font-size:12px;color:var(--muted-3);margin-top:2px;line-height:1.45;}
.srow .rc{flex-shrink:0;display:flex;align-items:center;gap:10px;}
.srow.col{flex-direction:column;align-items:stretch;gap:9px;}
.switch{position:relative;width:40px;height:23px;border-radius:12px;border:0;background:#cdd2da;flex-shrink:0;padding:0;cursor:pointer;transition:background .15s;}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(20,24,31,.25);transition:left .15s;}
.switch.on{background:var(--acc);}
.switch.on::after{left:19px;}
.switch.green.on{background:var(--ok);}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:2px;gap:2px;}
.seg button{border:0;background:transparent;font-size:12.5px;font-weight:600;color:var(--muted-2);padding:6px 12px;border-radius:2px;cursor:pointer;font-family:inherit;transition:color .12s;}
.seg button.on{background:var(--panel);color:var(--acc-dark);box-shadow:var(--shadow-card);}
.range{width:220px;accent-color:var(--acc);}
.tin{width:100%;height:var(--ctl);border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:0 12px;font-family:inherit;font-size:13.5px;color:var(--ink);outline:0;transition:border-color .12s,box-shadow .12s;}
.tin:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft);}
textarea.tin{height:auto;padding:10px 12px;line-height:1.5;resize:vertical;}
select.tin{cursor:pointer;}
.tin.sm{height:34px;width:auto;}
.navgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.navcard{display:flex;align-items:flex-start;gap:13px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-card);text-decoration:none;transition:border-color .12s,box-shadow .12s;cursor:pointer;}
.navcard:hover{border-color:var(--acc-line);box-shadow:0 3px 12px rgba(20,24,31,.09);text-decoration:none;}
.navcard .nci{width:38px;height:38px;border-radius:var(--r);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--acc-soft);color:var(--acc);}
.navcard .nci i{font-size:20px;}
.navcard .nct{flex:1;min-width:0;}
.navcard .nct .t{font-size:13.5px;font-weight:650;color:var(--ink);}
.navcard .nct .d{font-size:12px;color:var(--muted-2);margin-top:3px;line-height:1.45;}
.navcard .arr{color:var(--muted-4);font-size:16px;align-self:center;}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:var(--r);}
.pill.ok{color:var(--ok);background:var(--ok-soft);} .pill.muted{color:var(--muted-2);background:var(--line-soft);} .pill.amber{color:var(--amber);background:#fbecd6;} .pill.cobalt{color:var(--acc-dark);background:var(--acc-soft);}
.keyfield{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:var(--muted-2);background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:0 6px 0 10px;height:34px;}
.keyfield .kbtn{border:0;background:transparent;color:var(--muted-3);cursor:pointer;font-size:15px;display:inline-flex;padding:4px;}
.keyfield .kbtn:hover{color:var(--muted);}
.steps{display:flex;align-items:center;margin-bottom:22px;}
.steps .step{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted-3);}
.steps .step .sn{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;}
.steps .step.on{color:var(--acc-dark);} .steps .step.on .sn{border-color:var(--acc);background:var(--acc);color:#fff;}
.steps .step.done{color:var(--ok);} .steps .step.done .sn{border-color:var(--ok);background:var(--ok);color:#fff;}
.steps .bar{flex:1;height:1.5px;background:var(--line);margin:0 12px;}
.prov{display:flex;align-items:center;gap:13px;padding:15px 2px;border-bottom:1px solid var(--line-soft);}
.prov:last-child{border-bottom:0;}
.prov .radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;}
.prov.on .radio{border-color:var(--acc);box-shadow:inset 0 0 0 3px var(--acc);}
.prov .pv{flex:1;min-width:0;}
.prov .pv .pn{font-size:13.5px;font-weight:650;color:var(--ink);}
.prov .pv .pm{font-size:12px;color:var(--muted-2);margin-top:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.avatar-lg{width:64px;height:64px;border-radius:var(--r);background:var(--acc-dark);color:#fff;font-size:22px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.samplecard{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:#fbfcfd;font-size:12.5px;color:var(--muted);line-height:1.55;}
.samplecard .sm-h{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--ink-2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;}

/* ---------- auth form validation ---------- */
.auth-error{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding:9px 12px;border-radius:var(--r);background:var(--danger-soft);color:var(--danger);font-size:13px;font-weight:500;border:1px solid color-mix(in srgb,var(--danger) 22%,#fff);}
.auth-error i{font-size:16px;flex-shrink:0;}

/* ============================================================
   Unified shell v2 (2026-07-01) — SAME shell on every page:
   a fixed page-head card (title + quick actions + optional filters),
   a collapsible Settings nav group, a contextual right rail, and a
   radial ripple on button press.
   ============================================================ */

/* page-head: quick-actions slot to the right of the title, in the fixed .headcard */
.headcard .chead .spacer{flex:1;}
.headcard .ph-actions{display:flex;align-items:center;gap:var(--s2);flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;}
.headcard .ph-actions .btn{height:34px;font-size:12.5px;padding:0 12px;}
.headcard .chead .sub{font-size:12.5px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* generic scrollable column body (settings-type pages) — sits under the fixed page-head */
.pagescroll{flex:1;min-height:0;overflow:auto;padding:1px 2px 22px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--acc) 35%,#c2c8d3) transparent;}
.pagescroll::-webkit-scrollbar{width:8px;}
.pagescroll::-webkit-scrollbar-track{background:transparent;margin:2px 0;}
.pagescroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--acc) 32%,#c9cfd9);border-radius:2px;}
.pagescroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--acc) 52%,#b6bece);}
.pagescroll .sect:last-child{margin-bottom:0;}

/* collapsible Settings group in the sidebar nav */
.navgroup{display:flex;flex-direction:column;}
.navparent{width:100%;display:flex;align-items:center;gap:11px;padding:9px 10px;border:0;background:transparent;border-radius:var(--r);
  font-size:13.5px;font-weight:550;color:var(--muted);font-family:inherit;text-align:left;cursor:pointer;transition:background .12s,color .12s;}
.navparent > i:first-child{font-size:19px;color:var(--muted-3);display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;}
.navparent .caret{margin-left:auto;font-size:14px;color:var(--muted-4);transition:transform .2s;}
.navparent:hover{background:var(--line-soft);color:var(--ink-2);}
.navparent:hover > i:first-child{color:var(--muted-2);}
.navparent.active{color:var(--acc-dark);}
.navparent.active > i:first-child{color:var(--acc);}
.navgroup.open .navparent .caret{transform:rotate(180deg);}
.subnav{display:flex;flex-direction:column;gap:1px;max-height:0;overflow:hidden;transition:max-height .24s ease;
  margin:1px 0 0 19px;padding-left:8px;border-left:1.5px solid var(--line);}
.navgroup.open .subnav{max-height:400px;}
.subnav a{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r);
  font-size:12.5px;font-weight:500;color:var(--muted);text-decoration:none;transition:background .12s,color .12s;}
.subnav a > i{font-size:16px;color:var(--muted-3);flex-shrink:0;}
.subnav a .count{margin-left:auto;font-size:10px;font-weight:700;color:var(--muted-2);background:var(--line-soft);padding:0 6px;height:15px;display:inline-flex;align-items:center;border-radius:var(--r);}
.subnav a:hover{background:var(--line-soft);color:var(--ink-2);}
.subnav a:hover > i{color:var(--muted-2);}
.subnav a.active{background:var(--acc-soft);color:var(--acc-dark);}
.subnav a.active > i{color:var(--acc);}

/* contextual right rail (settings-type pages) — reuses the .rail card wrapper */
.rail-h{padding:17px 20px 15px;border-bottom:1px solid var(--line-soft);flex-shrink:0;}
.rail-h .rt{font-size:14.5px;font-weight:700;letter-spacing:-.2px;color:var(--ink-2);display:flex;align-items:center;gap:8px;}
.rail-h .rt > i{font-size:18px;color:var(--acc);}
.rail-h .rs{font-size:12px;color:var(--muted-2);margin-top:4px;line-height:1.5;}
.rail-b{flex:1;min-height:0;overflow:auto;padding:16px 20px 20px;display:flex;flex-direction:column;gap:18px;}
.rail-block{display:flex;flex-direction:column;gap:9px;}
.rail-block > .rbh{font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--muted-3);}
.rk{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--line-soft);}
.rk:last-child{border-bottom:0;}
.rk > i{font-size:16px;color:var(--muted-3);width:20px;text-align:center;flex-shrink:0;}
.rk .rkl{flex:1;font-size:12.5px;color:var(--muted);}
.rk .rkv{font-size:12.5px;font-weight:650;color:var(--ink-2);flex-shrink:0;}

/* radial ripple on button press (default -> hover colour, growing from the click point) */
.btn,.fbtn,.seg button,.navparent{position:relative;overflow:hidden;}
.ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;background:var(--acc);opacity:.17;animation:ripple .5s ease-out forwards;}
.btn.solid .ripple{background:#fff;opacity:.32;}
@keyframes ripple{to{transform:scale(1.06);opacity:0;}}

/* ============================================================
   Content panel · Tom Select dropdowns · owner-active (2026-07-01)
   ============================================================ */

/* hide an empty page-head meta line (pages without page_meta) */
.headcard .when:empty{display:none;}

/* settings pages: the scroll body is ONE content panel (like the digest feed),
   with section groups as flat inner cards — so the panel is the only scrollable item */
.pagescroll{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-card);padding:16px 18px;}
.pagescroll .sect{box-shadow:none;border:1.5px solid #e7e9ee;}
.pagescroll .sect:last-child{margin-bottom:0;}

/* owner card active — Profile now lives on the user card, not the Settings menu */
.owner.active{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc);}

/* ---------- Tom Select — themed to match the Claude-card dropdown ---------- */
.ts-wrapper{width:auto;display:inline-block;min-width:150px;max-width:100%;vertical-align:middle;}
.ts-wrapper.ts-full{width:100%;display:block;}
.ts-control{min-height:34px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:3px 34px 3px 11px;font-family:inherit;font-size:13.5px;color:var(--ink);box-shadow:none;
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;transition:border-color .12s,box-shadow .12s;}
.ts-wrapper.single .ts-control{cursor:pointer;}
.ts-control:hover{border-color:#d3d8e0;}
.ts-wrapper.focus .ts-control{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft);}
.ts-control input{font-family:inherit !important;font-size:13.5px !important;color:var(--ink) !important;}
.ts-control input::placeholder{color:var(--muted-3);}
.ts-wrapper.single .ts-control > .item{color:var(--ink);font-weight:550;}
/* caret — spaced from the right border, cobalt + flip on open */
.ts-wrapper.single{position:relative;}
.ts-wrapper.single .ts-control:after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;margin-top:-6px;
  border-right:1.6px solid var(--muted-3);border-bottom:1.6px solid var(--muted-3);transform:rotate(45deg);
  transition:transform .15s,border-color .15s;pointer-events:none;}
.ts-wrapper.single.dropdown-active .ts-control:after{transform:rotate(-135deg);margin-top:-1px;border-color:var(--acc);}
/* dropdown menu — .agent-menu aesthetic */
.ts-dropdown{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 28px rgba(20,24,31,.16);
  margin-top:4px;padding:5px;z-index:60;}
.ts-dropdown .option{padding:8px 10px;border-radius:var(--r);font-size:12.5px;font-weight:550;color:var(--ink-2);cursor:pointer;}
.ts-dropdown .option:hover,.ts-dropdown .active{background:var(--line-soft);color:var(--ink);}
.ts-dropdown .option.selected,.ts-dropdown .selected{background:var(--acc-soft);color:var(--acc-dark);}
.ts-dropdown .optgroup-header{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-3);font-weight:700;padding:6px 8px 3px;}
/* multi-select chips — cobalt badges with a remove button */
.ts-wrapper.multi .ts-control{padding:5px 8px;}
.ts-wrapper.multi .ts-control > .item{background:var(--acc-soft);color:var(--acc-dark);border:1px solid var(--acc-line);
  border-radius:var(--r);padding:2px 5px 2px 9px;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:4px;}
.ts-wrapper.multi .ts-control > .item.active{background:var(--acc);color:#fff;border-color:var(--acc);}
.ts-wrapper.multi .ts-control > .item .remove{border:0;color:inherit;opacity:.55;padding:0 1px;font-weight:700;text-decoration:none;}
.ts-wrapper.multi .ts-control > .item .remove:hover{opacity:1;background:transparent;}
.ts-wrapper.disabled .ts-control{background:var(--bg);color:var(--muted-3);cursor:not-allowed;}