/* ================= TM Inbox — design system ================= */
:root{
  --font: 'Assistant', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --r-sm:7px; --r:11px; --r-lg:16px; --r-xl:22px;
  --sp:1;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-1: 0 1px 2px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
  --shadow-2: 0 8px 30px rgba(0,0,0,.28);
  --shadow-pop: 0 18px 60px rgba(0,0,0,.45);
}
/* ---- Dark (default) ---- */
[data-theme="dark"]{
  --bg:#0b1120; --bg-2:#0f172a; --panel:#111a2e; --panel-2:#16203a;
  --elev:#1a2540; --line:#243252; --line-soft:#1b2740;
  --text:#e8edf7; --text-2:#9fb0cc; --text-3:#6b7d9e;
  --brand:#6366f1; --brand-2:#818cf8; --brand-soft:#6366f126;
  --accent:#22d3ee;
  --ok:#34d399; --ok-soft:#34d39922;
  --warn:#fbbf24; --warn-soft:#fbbf2422;
  --danger:#f87171; --danger-soft:#f8717122;
  --info:#60a5fa; --info-soft:#60a5fa22;
  --purple:#c084fc; --purple-soft:#c084fc22;
  --sel:#6366f11f; --hover:#ffffff0a; --overdue:#f8717115;
}
/* ---- Light ---- */
[data-theme="light"]{
  --bg:#eef1f7; --bg-2:#f6f8fc; --panel:#ffffff; --panel-2:#f7f9fd;
  --elev:#ffffff; --line:#e2e8f0; --line-soft:#eef1f6;
  --text:#101828; --text-2:#475467; --text-3:#8896ab;
  --brand:#5b5bf0; --brand-2:#4f46e5; --brand-soft:#5b5bf014;
  --accent:#0891b2;
  --ok:#059669; --ok-soft:#0596691a;
  --warn:#b45309; --warn-soft:#f59e0b1f;
  --danger:#dc2626; --danger-soft:#dc26261a;
  --info:#2563eb; --info-soft:#2563eb15;
  --purple:#9333ea; --purple-soft:#9333ea15;
  --sel:#5b5bf012; --hover:#00000006; --overdue:#dc26260d;
  --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 2px 10px rgba(16,24,40,.06);
  --shadow-2: 0 10px 34px rgba(16,24,40,.12);
  --shadow-pop: 0 20px 60px rgba(16,24,40,.20);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font-family:inherit}
kbd{
  font-family:var(--font); font-size:.72em; font-weight:700; padding:.12em .45em;
  border-radius:5px; background:var(--elev); border:1px solid var(--line);
  color:var(--text-2); box-shadow:0 1px 0 var(--line); white-space:nowrap;
}
.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
[hidden]{display:none !important}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--text-3)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);
  background:var(--elev);color:var(--text);border-radius:var(--r-sm);padding:9px 15px;font-size:14px;
  font-weight:600;cursor:pointer;transition:.13s var(--ease);white-space:nowrap}
.btn:hover{background:var(--panel-2);border-color:var(--text-3)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:var(--hover)}
.btn-danger{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.btn-ok:hover{background:var(--ok);color:#fff}
.btn-block{width:100%}
.btn-sm{padding:6px 11px;font-size:13px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;
  border:1px solid transparent;background:transparent;color:var(--text-2);cursor:pointer;font-size:16px;transition:.12s var(--ease)}
.icon-btn:hover{background:var(--hover);color:var(--text)}
.icon-btn.active{background:var(--brand-soft);color:var(--brand-2)}
.mini-btn{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:14px;padding:2px 5px;border-radius:5px}
.mini-btn:hover{background:var(--hover);color:var(--text)}
.link-btn{background:none;border:none;color:var(--brand-2);cursor:pointer;font-weight:600;font-size:14px;padding:4px}
.link-btn:hover{text-decoration:underline}
.spinner{width:16px;height:16px;border-radius:50%;border:2.5px solid #ffffff55;border-top-color:#fff;animation:spin .6s linear infinite;display:inline-block}
.spinner.big{width:30px;height:30px;border-color:var(--line);border-top-color:var(--brand)}
@keyframes spin{to{transform:rotate(360deg)}}

/* =================== LOGIN =================== */
.login-view{position:fixed;inset:0;display:grid;place-items:center;padding:24px;z-index:50}
.login-bg{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(60% 60% at 80% 10%, var(--brand-soft), transparent 60%),
  radial-gradient(50% 50% at 15% 90%, #22d3ee18, transparent 60%), var(--bg)}
.login-card{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:34px 30px;box-shadow:var(--shadow-pop);animation:pop .4s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.login-logo,.app-logo,.boot-logo{display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff;font-weight:800;border-radius:13px}
.login-logo{width:50px;height:50px;font-size:20px}
.login-brand h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.3px}
.login-sub{margin:2px 0 0;color:var(--text-2);font-size:13px}
.login-form{display:flex;flex-direction:column;gap:15px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld>span{font-size:13px;font-weight:600;color:var(--text-2)}
.fld input,.inp{background:var(--bg-2);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;color:var(--text);font-size:15px;font-family:inherit;transition:.13s var(--ease);width:100%}
.fld input:focus,.inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.login-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text-2)}
.chk{display:flex;align-items:center;gap:7px;cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--brand)}
.login-utc{color:var(--text-3);font-size:12px}
.login-err{background:var(--danger-soft);color:var(--danger);border-radius:var(--r-sm);padding:10px 13px;font-size:13.5px;font-weight:600}
.login-foot{margin-top:20px;text-align:center;color:var(--text-3);font-size:12px;line-height:1.5}
.btn .spinner{margin:0}

/* boot splash */
.boot-splash{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:var(--bg);z-index:60}
.boot-logo{width:64px;height:64px;font-size:26px;border-radius:18px}

/* =================== APP SHELL =================== */
.app{display:flex;flex-direction:column;height:100vh;height:100dvh}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;padding:0 12px 0 14px;
  background:var(--panel);border-bottom:1px solid var(--line);flex:none;z-index:20}
.topbar-start,.topbar-end{display:flex;align-items:center;gap:8px}
.app-logo{width:34px;height:34px;font-size:14px;border-radius:9px}
.cmd-open{display:flex;align-items:center;gap:9px;background:var(--bg-2);border:1px solid var(--line);
  color:var(--text-3);border-radius:10px;padding:8px 12px;cursor:pointer;min-width:270px;font-size:13.5px;transition:.13s}
.cmd-open:hover{border-color:var(--text-3);color:var(--text-2)}
.cmd-open .i{width:16px;height:16px}
.cmd-open span{flex:1;text-align:start}
.cmd-open kbd{margin-inline-start:auto}
.me{position:relative}
.me-btn{display:flex;align-items:center;gap:9px;background:transparent;border:1px solid transparent;border-radius:10px;
  padding:5px 9px 5px 6px;cursor:pointer;color:var(--text)}
.me-btn:hover{background:var(--hover)}
.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff;font-weight:700;font-size:13px;flex:none}
.me-name{font-weight:600;font-size:14px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-menu{position:absolute;top:46px;inset-inline-end:0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-pop);padding:6px;min-width:230px;z-index:40;animation:pop .18s var(--ease)}
.me-head{padding:9px 12px;border-bottom:1px solid var(--line-soft);margin-bottom:5px}
.me-full{font-weight:700}.me-db{color:var(--text-3);font-size:12.5px;margin-top:2px}
.me-item{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;color:var(--text);
  text-align:start;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:14px}
.me-item kbd{margin-inline-start:auto}
.me-item:hover{background:var(--hover)}
.me-item.danger{color:var(--danger)}

.body{display:grid;grid-template-columns:250px minmax(320px,1fr) minmax(360px,1.35fr);flex:1;min-height:0}

/* ---------- sidebar ---------- */
.sidebar{background:var(--bg-2);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;
  padding:14px 10px;gap:16px;overflow-y:auto;min-height:0}
.btn-compose{box-shadow:var(--shadow-1)}
.side-section{display:flex;flex-direction:column;gap:3px}
.side-title{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:var(--text-3);padding:2px 10px 5px}
.views,.folders{display:flex;flex-direction:column;gap:1px}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;color:var(--text-2);
  font-size:14px;font-weight:500;border:none;background:none;text-align:start;width:100%;transition:.1s var(--ease);position:relative}
.nav-item:hover{background:var(--hover);color:var(--text)}
.nav-item.active{background:var(--brand-soft);color:var(--brand-2);font-weight:700}
.nav-item .ni-icon{width:18px;height:18px;flex:none;display:grid;place-items:center;font-size:15px;opacity:.9}
.nav-item .ni-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item .ni-count{font-size:12px;font-weight:700;color:var(--text-3);background:var(--elev);border-radius:20px;padding:1px 8px;min-width:22px;text-align:center}
.nav-item.active .ni-count{background:var(--brand);color:#fff}
.nav-item .ni-count.hot{background:var(--danger);color:#fff}
.nav-item.child{padding-inline-start:26px;font-size:13.5px}
.nav-item.child .ni-icon{width:14px;font-size:12px}
.folders-loading{padding:10px;color:var(--text-3);font-size:13px}
.fold-toggle{position:absolute;inset-inline-start:-2px;width:18px;height:18px;display:grid;place-items:center;
  color:var(--text-3);border-radius:4px;transition:.15s}
.fold-toggle.open{transform:rotate(90deg)}

/* ---------- list pane ---------- */
.list-pane{display:flex;flex-direction:column;min-width:0;background:var(--panel);border-inline-end:1px solid var(--line)}
.list-head{flex:none;border-bottom:1px solid var(--line);padding:12px 14px 0;background:var(--panel);position:sticky;top:0;z-index:5}
.list-head-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.list-title{margin:0;font-size:17px;font-weight:800;letter-spacing:-.2px}
.list-count{color:var(--text-3);font-size:13px;font-weight:600}
.list-head-actions{margin-inline-start:auto;display:flex;gap:2px}
.filterbar{display:flex;flex-direction:column;gap:8px;padding-bottom:11px}
.quickfilters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.quickfilters::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:13px;font-weight:600;
  border:1px solid var(--line);background:var(--bg-2);color:var(--text-2);cursor:pointer;white-space:nowrap;transition:.12s var(--ease)}
.chip:hover{border-color:var(--text-3);color:var(--text)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip .c-count{font-size:11px;opacity:.7;font-weight:700}
.chip.on .c-count{opacity:.9}
.chip.chip-danger.on{background:var(--danger);border-color:var(--danger)}
.chip.chip-warn.on{background:var(--warn);border-color:var(--warn)}
.active-chips{display:flex;gap:6px;flex-wrap:wrap}
.active-chips:empty{display:none}
.fchip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 11px;border-radius:18px;font-size:12.5px;font-weight:600;
  background:var(--brand-soft);color:var(--brand-2);border:1px solid transparent}
.fchip button{background:none;border:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;opacity:.7;border-radius:50%;width:16px;height:16px}
.fchip button:hover{opacity:1;background:#0002}

.bulkbar{display:flex;align-items:center;gap:10px;padding:8px 0 11px;animation:slidedown .18s var(--ease)}
@keyframes slidedown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.bulk-count{font-weight:700;font-size:13.5px}
.bulk-actions{display:flex;gap:6px;flex-wrap:wrap}

.list-scroll{flex:1;overflow-y:auto;min-height:0;outline:none}
.list{display:flex;flex-direction:column}
.list-empty{padding:60px 24px;text-align:center;color:var(--text-3)}
.list-empty h3{color:var(--text-2);margin:12px 0 6px}

/* list row */
.row{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--line-soft);cursor:pointer;position:relative;transition:background .1s}
.row:hover{background:var(--hover)}
.row.active{background:var(--sel)}
.row.active::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--brand)}
.row.selected{background:var(--brand-soft)}
.row.overdue{background:var(--overdue)}
.row.unread .row-subject{font-weight:800}
.row.unread::after{content:"";position:absolute;inset-inline-start:6px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--brand);transform:translateY(-50%)}
.row-check{width:18px;height:18px;border-radius:5px;border:1.6px solid var(--text-3);display:none;place-items:center;cursor:pointer;flex:none}
.selectmode .row-check{display:grid}
.row-check.on{background:var(--brand);border-color:var(--brand);color:#fff}
.row-type{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:15px;flex:none}
.row-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.row-line1{display:flex;align-items:center;gap:8px;min-width:0}
.row-who{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45%}
.row-badge{font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px;flex:none}
.row-subject{font-size:13.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.row-time{font-size:12px;color:var(--text-3);font-weight:600;white-space:nowrap}
.row-time.overdue{color:var(--danger)}
.row-icons{display:flex;gap:5px;align-items:center;color:var(--text-3);font-size:12px}
.row-hover-actions{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);display:none;
  gap:3px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:3px;box-shadow:var(--shadow-1)}
.row:hover .row-hover-actions{display:flex}
.row-hover-actions .icon-btn{width:30px;height:30px;font-size:14px}

/* density: compact */
[data-density="compact"] .row{padding:6px 14px}
[data-density="compact"] .row-subject{display:none}
[data-density="compact"] .row-type{width:24px;height:24px;font-size:13px}
[data-density="compact"] .list-head{padding-top:9px}

/* type colors */
.t-task{background:var(--brand-soft);color:var(--brand-2)}
.t-msg{background:var(--info-soft);color:var(--info)}
.t-mail{background:var(--warn-soft);color:var(--warn)}
.t-plan{background:var(--purple-soft);color:var(--purple)}
.t-meeting{background:var(--ok-soft);color:var(--ok)}
/* status badges */
.b-created{background:var(--info-soft);color:var(--info)}
.b-assigned{background:var(--brand-soft);color:var(--brand-2)}
.b-completed{background:var(--ok-soft);color:var(--ok)}
.b-rejected{background:var(--danger-soft);color:var(--danger)}
.b-clarify{background:var(--warn-soft);color:var(--warn)}
.b-redirected{background:var(--purple-soft);color:var(--purple)}
.b-datemove{background:var(--warn-soft);color:var(--warn)}
.b-query{background:var(--info-soft);color:var(--info)}
.b-answer{background:var(--ok-soft);color:var(--ok)}
.b-neutral{background:var(--elev);color:var(--text-2)}

/* ---------- reading pane ---------- */
.read-pane{display:flex;flex-direction:column;min-width:0;background:var(--bg-2)}
.read-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-3);padding:24px;text-align:center}
.read-empty-art{font-size:52px;opacity:.5}
.read-empty h3{color:var(--text-2);margin:6px 0 2px}
.read{flex:1;display:flex;flex-direction:column;min-height:0;animation:fadein .18s var(--ease)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.read-head{flex:none;padding:16px 20px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.read-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:13px}
.read-toolbar .grow{flex:1}
.read-title{font-size:19px;font-weight:800;letter-spacing:-.3px;margin:0 0 10px;line-height:1.3}
.read-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px}
.rm{display:flex;align-items:center;gap:7px;color:var(--text-2)}
.rm b{color:var(--text);font-weight:600}
.rm .avatar{width:24px;height:24px;font-size:11px}
.read-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.tag{font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--elev);color:var(--text-2)}
.tag.overdue{background:var(--danger-soft);color:var(--danger)}
.tag.target{background:var(--info-soft);color:var(--info)}

.read-actions{display:flex;gap:7px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--line-soft);background:var(--panel-2)}
.action-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;border:1px solid var(--line);
  background:var(--elev);color:var(--text);font-weight:700;font-size:13.5px;cursor:pointer;transition:.12s var(--ease)}
.action-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-1)}
.action-btn .k{font-size:10px;opacity:.6;font-weight:800;border:1px solid var(--line);border-radius:4px;padding:0 4px}
.action-btn.primary{background:var(--ok);border-color:var(--ok);color:#fff}
.action-btn.danger{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.action-btn.danger:hover{background:var(--danger);color:#fff}
.action-btn.reply{background:var(--brand);border-color:var(--brand);color:#fff}

.read-scroll{flex:1;overflow-y:auto;min-height:0;padding:0 0 40px}
.read-section-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--text-3);padding:18px 20px 8px}
.read-body-html{padding:6px 20px 8px;font-size:14.5px;line-height:1.65}
.read-body-html img{max-width:100%;height:auto;border-radius:8px}
.read-body-html table{max-width:100%;border-collapse:collapse}
.read-body-html a{color:var(--brand-2)}

/* history timeline */
.timeline{padding:4px 20px 10px;position:relative}
.tl-item{display:grid;grid-template-columns:auto 1fr;gap:13px;position:relative;padding-bottom:6px}
.tl-item:not(:last-child)::before{content:"";position:absolute;inset-inline-start:15px;top:34px;bottom:-2px;width:2px;background:var(--line)}
.tl-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;flex:none;z-index:1;border:2px solid var(--bg-2)}
.tl-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);margin-bottom:10px;overflow:hidden;transition:.15s}
.tl-card:hover{border-color:var(--line)}
.tl-head{display:flex;align-items:center;gap:9px;padding:10px 13px;cursor:pointer}
.tl-who{font-weight:700;font-size:13.5px}
.tl-action{font-size:11px;font-weight:800;padding:1px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px}
.tl-time{margin-inline-start:auto;font-size:12px;color:var(--text-3);font-weight:600;white-space:nowrap}
.tl-chevron{color:var(--text-3);transition:.18s;font-size:11px}
.tl-card.open .tl-chevron{transform:rotate(90deg)}
.tl-body{padding:0 13px;max-height:0;overflow:hidden;transition:max-height .25s var(--ease),padding .25s var(--ease);font-size:14px;line-height:1.6;color:var(--text-2)}
.tl-card.open .tl-body{max-height:none;padding:2px 13px 14px}
.tl-body img{max-width:100%;border-radius:6px}
.tl-pinned{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn-soft)}
.tl-pin-badge{font-size:11px;color:var(--warn);font-weight:700;display:inline-flex;align-items:center;gap:3px}
.tl-attach{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--brand-2);
  background:var(--brand-soft);padding:5px 10px;border-radius:7px;cursor:pointer;text-decoration:none}

/* ---------- command palette ---------- */
.cmd-overlay{position:fixed;inset:0;background:#0006;backdrop-filter:blur(3px);z-index:80;display:flex;justify-content:center;padding-top:12vh;animation:fadein .12s}
.cmd{width:min(620px,92vw);height:max-content;max-height:70vh;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-pop);overflow:hidden;display:flex;flex-direction:column;animation:pop .18s var(--ease)}
.cmd-input-wrap{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--line)}
.cmd-input-wrap .i{width:19px;height:19px;color:var(--text-3)}
.cmd-input-wrap input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:16.5px;font-family:inherit}
.cmd-results{overflow-y:auto;padding:7px}
.cmd-group{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--text-3);padding:9px 12px 5px}
.cmd-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;cursor:pointer;font-size:14.5px}
.cmd-item .ci-icon{width:22px;text-align:center;font-size:16px;opacity:.85}
.cmd-item .ci-sub{color:var(--text-3);font-size:12.5px;margin-inline-start:auto}
.cmd-item.sel{background:var(--brand-soft)}
.cmd-item:hover{background:var(--hover)}
.cmd-empty{padding:26px;text-align:center;color:var(--text-3)}

/* ---------- drawer ---------- */
.drawer-overlay{position:fixed;inset:0;background:#0007;backdrop-filter:blur(2px);z-index:90;animation:fadein .14s}
.drawer{position:fixed;inset-block:0;inset-inline-end:0;width:min(560px,100vw);background:var(--panel);z-index:91;
  border-inline-start:1px solid var(--line);box-shadow:var(--shadow-pop);display:flex;flex-direction:column;animation:slidein .24s var(--ease)}
@keyframes slidein{from{transform:translateX(-30px);opacity:.6}to{transform:none;opacity:1}}
[dir="rtl"] .drawer{animation:slideinrtl .24s var(--ease)}
@keyframes slideinrtl{from{transform:translateX(30px);opacity:.6}to{transform:none;opacity:1}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line);flex:none}
.drawer-title{font-size:17px;font-weight:800}
.drawer-body{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:15px}
.drawer-foot{flex:none;padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;align-items:center}
.drawer-foot .grow{flex:1}
.form-row{display:flex;flex-direction:column;gap:6px}
.form-row>label{font-size:13px;font-weight:600;color:var(--text-2)}
.form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
textarea.inp{min-height:150px;resize:vertical;line-height:1.6}
select.inp{cursor:pointer}
.attach-zone{border:1.5px dashed var(--line);border-radius:var(--r-sm);padding:14px;text-align:center;color:var(--text-3);font-size:13px;cursor:pointer;transition:.13s}
.attach-zone:hover,.attach-zone.drag{border-color:var(--brand);color:var(--brand-2);background:var(--brand-soft)}
.attach-list{display:flex;flex-direction:column;gap:6px}
.attach-item{display:flex;align-items:center;gap:8px;background:var(--bg-2);border-radius:7px;padding:7px 10px;font-size:13px}
.attach-item button{margin-inline-start:auto;background:none;border:none;color:var(--danger);cursor:pointer;font-size:15px}
.toggle-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill-toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-2);
  background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:5px 11px;cursor:pointer}
.pill-toggle input{accent-color:var(--brand)}

/* ---------- modals ---------- */
.modal-overlay{position:fixed;inset:0;background:#0007;backdrop-filter:blur(3px);z-index:95;display:grid;place-items:center;padding:24px;animation:fadein .14s}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);
  width:min(680px,100%);max-height:85vh;display:flex;flex-direction:column;animation:pop .2s var(--ease)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:17px;font-weight:800}
.keys-grid{padding:18px 20px;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px 30px}
.key-line{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2)}
.key-line .keys{margin-inline-start:auto;display:flex;gap:4px}
.key-group-title{grid-column:1/-1;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);margin-top:8px}
.diag-body{padding:16px 20px;overflow:auto}
.diag-body pre{margin:0;font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--text-2);font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---------- toasts ---------- */
.toasts{position:fixed;inset-block-end:20px;inset-inline-start:50%;transform:translateX(-50%);z-index:100;
  display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:12px;background:var(--elev);border:1px solid var(--line);color:var(--text);
  border-radius:12px;padding:11px 15px;box-shadow:var(--shadow-pop);font-size:14px;font-weight:600;pointer-events:auto;
  min-width:260px;max-width:440px;animation:toastin .22s var(--ease)}
@keyframes toastin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.toast.ok{border-inline-start:4px solid var(--ok)}
.toast.err{border-inline-start:4px solid var(--danger)}
.toast.info{border-inline-start:4px solid var(--brand)}
.toast .t-icon{font-size:17px}
.toast .undo{margin-inline-start:auto;background:var(--brand-soft);color:var(--brand-2);border:none;border-radius:7px;
  padding:5px 12px;font-weight:800;cursor:pointer;font-size:13px}
.toast .undo:hover{background:var(--brand);color:#fff}
.toast-bar{position:absolute;bottom:0;inset-inline-start:0;height:3px;background:var(--brand);border-radius:0 0 12px 12px;animation:tbar linear forwards}
@keyframes tbar{from{width:100%}to{width:0}}

/* skeleton */
.sk{background:linear-gradient(90deg,var(--line-soft),var(--elev),var(--line-soft));background-size:200% 100%;
  animation:shimmer 1.2s infinite;border-radius:6px}
@keyframes shimmer{to{background-position:-200% 0}}
.row-sk{display:flex;gap:10px;padding:12px 14px;align-items:center;border-bottom:1px solid var(--line-soft)}
.row-sk .sk-av{width:30px;height:30px;border-radius:8px;flex:none}
.row-sk .sk-lines{flex:1;display:flex;flex-direction:column;gap:6px}

/* ---------- settings + guide ---------- */
.set-modal,.guide-modal{width:min(560px,100%)}
.set-body,.guide-body{padding:18px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}
.set-group{display:flex;flex-direction:column;gap:9px}
.set-lbl{font-size:13.5px;font-weight:800;color:var(--text)}
.set-desc{margin:0;color:var(--text-3);font-size:12.5px;line-height:1.5}
.seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:3px;flex-wrap:wrap}
.seg button{border:none;background:none;color:var(--text-2);padding:7px 14px;border-radius:7px;cursor:pointer;font-weight:600;font-size:13px;font-family:inherit}
.seg button.on{background:var(--brand);color:#fff}
.sc-list{display:flex;flex-direction:column;gap:4px;max-height:230px;overflow-y:auto;border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:6px}
.sc-row{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:7px;font-size:13.5px}
.sc-row:hover{background:var(--hover)}
.sc-key{min-width:44px;padding:4px 10px;border-radius:6px;border:1px solid var(--line);background:var(--elev);color:var(--text);
  font-weight:800;cursor:pointer;font-family:inherit;font-size:12.5px}
.sc-key:hover{border-color:var(--brand)}
.sc-key.rebind{background:var(--brand);color:#fff;border-color:var(--brand);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.6}}
.guide-item{border-inline-start:3px solid var(--brand);padding:2px 14px;background:var(--bg-2);border-radius:0 var(--r-sm) var(--r-sm) 0}
.guide-item h4{margin:10px 0 4px;font-size:15px}
.guide-item p{margin:0 0 10px;color:var(--text-2);font-size:14px;line-height:1.6}

/* intent chips in composer */
.intent-chips{display:flex;flex-wrap:wrap;gap:7px}
.ichip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:20px;font-size:13.5px;font-weight:700;
  border:1.5px solid var(--line);background:var(--bg-2);color:var(--text-2);cursor:pointer;transition:.12s var(--ease)}
.ichip:hover{border-color:var(--text-3)}
.ichip.on{color:#fff}
.ichip.on[data-i="info"]{background:var(--brand);border-color:var(--brand)}
.ichip.on[data-i="completed"],.ichip.on[data-i="acceptCompletion"]{background:var(--ok);border-color:var(--ok)}
.ichip.on[data-i="needInfo"],.ichip.on[data-i="query"]{background:var(--warn);border-color:var(--warn)}
.ichip.on[data-i="reject"],.ichip.on[data-i="rejectCompletion"]{background:var(--danger);border-color:var(--danger)}
.ichip.on[data-i="forward"],.ichip.on[data-i="delegate"]{background:var(--purple);border-color:var(--purple)}
.reply-tabs{display:flex;gap:6px;margin-bottom:4px}
.reply-tab{flex:1;padding:9px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);color:var(--text-2);
  font-weight:700;cursor:pointer;font-size:13.5px;font-family:inherit}
.reply-tab.on{background:var(--brand-soft);color:var(--brand-2);border-color:var(--brand)}
.infer-hint{font-size:12.5px;color:var(--text-3);background:var(--bg-2);border-radius:7px;padding:8px 11px;display:flex;align-items:center;gap:7px}
.infer-hint b{color:var(--brand-2)}
.datemove-flag{color:var(--warn);font-weight:700}
.att-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;background:var(--brand-soft);
  color:var(--brand-2);font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;text-decoration:none;margin:3px}
.att-chip:hover{border-color:var(--brand)}
.att-row{display:flex;flex-wrap:wrap;gap:4px;padding:6px 20px 14px}

/* responsive */
.only-mobile{display:none}
@media(max-width:1100px){
  .body{grid-template-columns:210px 1fr 0}
  .read-pane{position:fixed;inset:56px 0 0;z-index:30;border-inline-start:1px solid var(--line);display:none}
  .read-pane.show{display:flex}
}
@media(max-width:760px){
  .only-mobile{display:inline-flex}
  .body{grid-template-columns:0 1fr 0}
  .sidebar{position:fixed;inset:56px auto 0 0;z-index:35;width:260px;transform:translateX(-100%);transition:.24s var(--ease);box-shadow:var(--shadow-pop)}
  [dir="rtl"] .sidebar{inset:56px 0 0 auto;transform:translateX(100%)}
  .sidebar.show{transform:none}
  .cmd-open span{display:none}.cmd-open{min-width:auto}
  .me-name{display:none}
  .read-pane{inset:0}
}