/* ===========================================================
   Relai UI — design system (navy + orange, Plus Jakarta Sans).
   Shared across every page. Chrome (sidebar + topbar) is rendered
   by relai-ui.js; page content uses these components.
   =========================================================== */
:root{
  --orange:#EA580C; --orange-600:#C2410C; --orange-500:#F97316;
  --orange-300:#FDBA74; --orange-tint:#FFF3EC; --orange-border:#FBD9C4;
  --navy:#0F2440; --navy-700:#1B3559; --ink:#0F172A;
  --slate:#51607A; --slate-400:#94A3B8; --slate-300:#B8C0CE;
  --bg:#F4F6FA; --panel:#FFFFFF; --navy-tint:#EDF1F7;
  --border:#E4E8F0; --border-soft:#EEF1F6;
  --green:#0F9D58; --green-tint:#E7F6EE;
  --amber:#B45309; --amber-tint:#FEF3E2;
  --blue:#2563EB; --blue-tint:#E8EFFE;
  --wa:#25D366; --wa-tint:#E7F9EE;
  --red:#B42318; --red-tint:#FDECEC;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 10px 26px -14px rgba(15,23,42,.22);
  --r:14px; --r-sm:10px;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}

/* Sidebar */
.side{background:var(--navy);color:#fff;padding:20px 16px;display:flex;flex-direction:column;gap:5px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;padding:6px 8px 6px}
.brand .mark{width:32px;height:32px;border-radius:9px;background:var(--orange);display:grid;place-items:center}
.brand small{display:block;font-size:10.5px;font-weight:600;color:#7C8DA8;letter-spacing:.03em}
.tenant{display:flex;align-items:center;gap:9px;margin:12px 4px 6px;padding:9px 10px;background:var(--navy-700);border-radius:10px}
.tenant .lg{width:26px;height:26px;border-radius:7px;background:#fff;color:var(--navy);font-weight:800;font-size:12px;display:grid;place-items:center;flex:0 0 auto}
.tenant b{font-size:12.5px}
.tenant span{font-size:10.5px;color:#8fa0ba;display:block}
.navlbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7C8DA8;padding:14px 10px 6px}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#C6D0E0;font-weight:600;font-size:14px;border:none;background:transparent;width:100%;text-align:left;transition:background .15s,color .15s;text-decoration:none}
.nav-item svg{flex:0 0 auto}
.nav-item:hover{background:var(--navy-700);color:#fff}
.nav-item.active,.nav-item.on{background:var(--orange);color:#fff}
.nav-item .badge{margin-left:auto;background:rgba(255,255,255,.22);font-size:11.5px;font-weight:800;padding:1px 8px;border-radius:999px}
.side-foot{margin-top:auto;display:flex;align-items:center;gap:11px;padding:12px 10px;border-top:1px solid var(--navy-700)}
.side-foot .av{width:34px;height:34px;border-radius:9px;background:var(--orange-tint);color:var(--orange-600);font-weight:800;font-size:13px;display:grid;place-items:center;flex:0 0 auto}
.side-foot b{font-size:13.5px;display:block}
.side-foot span{font-size:11.5px;color:#8fa0ba}
.side-foot .out{margin-left:auto;font-size:11.5px;font-weight:700;color:#8fa0ba;text-decoration:none}
.side-foot .out:hover{color:#fff}

/* Main + topbar */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{min-height:64px;background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:0 28px;position:sticky;top:0;z-index:20}
.tswitch{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:6px 12px}
.tswitch .tl{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--slate-400)}
.tswitch b{font-size:14px;font-weight:700;color:var(--ink)}
.search{flex:1;max-width:340px;display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 13px;color:var(--slate-400);font-size:14px}
.search input{border:none;background:transparent;outline:none;font-family:inherit;font-size:14px;width:100%;color:var(--ink)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--panel);display:grid;place-items:center;color:var(--slate);position:relative;text-decoration:none}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--orange);border:2px solid #fff}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;border-radius:10px;padding:10px 16px;border:1px solid transparent;transition:transform .15s,background .15s,box-shadow .15s;text-decoration:none;background:var(--orange);color:#fff}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-600)}
.btn-ghost{background:var(--panel);color:var(--navy);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--slate-300)}
.btn-navy{background:var(--navy);color:#fff}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:9px}

.content{padding:26px 28px 46px;max-width:1200px;width:100%}
.view{display:none}
.view.show{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{font-size:25px;font-weight:800}
.page-head p{color:var(--slate);font-size:14px;margin-top:5px;max-width:70ch}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-600)}

.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.avatar{width:40px;height:40px;border-radius:11px;background:var(--navy-tint);color:var(--navy);font-weight:800;font-size:14px;display:grid;place-items:center;flex:0 0 auto}
.avatar.o{background:var(--orange-tint);color:var(--orange-600)}
.pill{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.pill.hot{background:var(--orange);color:#fff}
.pill.warm{background:var(--orange-tint);color:var(--orange-600)}
.pill.cool{background:var(--navy-tint);color:var(--navy)}
.pill.green{background:var(--green-tint);color:var(--green)}
.pill.gray{background:#EEF1F6;color:var(--slate)}
.pill.blue{background:var(--blue-tint);color:var(--blue)}
.pill.amber{background:var(--amber-tint);color:var(--amber)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--slate);background:var(--bg);border:1px solid var(--border);padding:5px 10px;border-radius:8px}
.chip svg{flex:0 0 auto}
.stage-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}

.score{display:flex;align-items:center;gap:10px}
.ring{--v:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--orange) calc(var(--v)*1%), #E9EDF4 0);flex:0 0 auto}
.ring i{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13.5px;color:var(--navy)}
.ring.sm{width:38px;height:38px}.ring.sm i{width:29px;height:29px;font-size:12px}
.ring.tier-cool{background:conic-gradient(var(--slate-400) calc(var(--v)*1%), #E9EDF4 0)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:15px 17px;box-shadow:var(--shadow-sm)}
.stat .k{font-size:11.5px;font-weight:700;color:var(--slate);text-transform:uppercase;letter-spacing:.04em}
.stat .v{font-size:27px;font-weight:800;margin-top:7px}
.stat .v small{font-size:13px;font-weight:700;color:var(--slate-400)}
.stat.accent{background:var(--navy);border-color:var(--navy);color:#fff}
.stat.accent .k{color:#9fb0c9}
.stat.accent .v small{color:#9fb0c9}

.sec-title{display:flex;align-items:center;justify-content:space-between;margin:24px 0 12px}
.sec-title h3{font-size:16px;font-weight:800}
.sec-title a,.sec-title .lnk{font-size:13px;font-weight:700;color:var(--orange-600);text-decoration:none;cursor:pointer;background:none;border:none}

/* Today tasks */
.tasklist{display:flex;flex-direction:column}
.task{display:grid;grid-template-columns:46px 1.3fr 2fr auto;gap:16px;align-items:center;padding:15px 20px;border-bottom:1px solid var(--border-soft)}
.task:last-child{border-bottom:none}
.task .who b{font-size:14.5px;display:block}
.task .who span{font-size:12.5px;color:var(--slate-400)}
.task .why{font-size:13.3px;color:var(--slate);line-height:1.45}
.task .why b{color:var(--ink);font-weight:700}
.task .why .purpose{display:block;color:var(--ink);font-weight:650;font-size:13.8px}
.task .why .why-sub{display:block;font-size:12px;color:var(--slate-400);margin-top:3px}
.task .task-act{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}
.engine-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--navy);color:#fff;border-radius:var(--r);padding:14px 18px;margin-bottom:20px}
.engine-bar .lg{font-size:13px;color:#c3cee0}
.engine-bar .lg b{color:#fff}
.engine-bar .spacer{flex:1}
.live{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#fff}
.live .d{width:8px;height:8px;border-radius:50%;background:#34D399;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

/* Queue */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.segs{display:inline-flex;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:3px;flex-wrap:wrap}
.segs button{border:none;background:transparent;font-size:13px;font-weight:700;color:var(--slate);padding:7px 13px;border-radius:8px}
.segs button.on{background:var(--orange);color:#fff}
.qtable{width:100%;border-collapse:collapse}
.qtable th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--slate-400);padding:13px 16px;border-bottom:1px solid var(--border)}
.qtable td{padding:14px 16px;border-bottom:1px solid var(--border-soft);font-size:13.5px;vertical-align:middle}
.qtable tr:last-child td{border-bottom:none}
.qtable tbody tr{cursor:pointer;transition:background .12s}
.qtable tbody tr:hover{background:var(--orange-tint)}
.qtable .who{display:flex;align-items:center;gap:12px}
.qtable .who b{font-size:14px;display:block}
.qtable .who span{font-size:12px;color:var(--slate-400)}
.reqs{display:flex;flex-wrap:wrap;gap:5px}
.req{font-size:11.5px;font-weight:600;background:var(--navy-tint);color:var(--navy);border-radius:6px;padding:3px 7px}
.req.note{background:var(--orange-tint);color:var(--orange-600)}
.scorecell{display:flex;align-items:center;gap:10px}
.scorecell .bd{font-size:11.5px;color:var(--slate-400);line-height:1.35;max-width:210px}
.switch{position:relative;width:38px;height:22px;border-radius:99px;background:var(--slate-300);border:none;flex:0 0 auto;transition:background .15s}
.switch.on{background:var(--orange)}
.switch i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.switch.on i{left:18px}
.chn{display:inline-flex;width:26px;height:26px;border-radius:7px;align-items:center;justify-content:center}
.chn.wa{background:var(--wa-tint);color:#128C4B}
.chn.em{background:var(--blue-tint);color:var(--blue)}

/* Contact 360 */
.c360{display:grid;grid-template-columns:308px 1fr 320px;gap:18px;align-items:start}
.cp{padding:20px}
.cp .top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.cp .top .avatar{width:70px;height:70px;font-size:23px;border-radius:19px}
.cp .top h2{font-size:19px;font-weight:800}
.cp .top p{font-size:12.5px;color:var(--slate)}
.aicomms{display:flex;align-items:center;gap:9px;margin-top:14px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 11px}
.aicomms .t{font-size:12.5px;font-weight:700}
.aicomms .t span{display:block;font-weight:500;color:var(--slate-400);font-size:11px}
.aicomms .switch{margin-left:auto}
.blk{margin-top:16px}
.blk h4{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--slate-400);margin:0 0 9px;display:flex;align-items:center;gap:7px}
.metrow{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:8px 0;border-bottom:1px solid var(--border-soft)}
.metrow:last-child{border-bottom:none}
.metrow span{color:var(--slate)}
.metrow b{font-weight:700;text-align:right}
.tagwrap{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12px;font-weight:600;background:var(--navy-tint);color:var(--navy);border-radius:7px;padding:4px 9px}
.tag.o{background:var(--orange-tint);color:var(--orange-600)}
.tag.red{background:var(--red-tint);color:var(--red)}
.insight{padding:0;overflow:hidden;margin-bottom:16px}
.ih{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--border)}
.ih .ai{width:30px;height:30px;border-radius:8px;background:var(--orange);display:grid;place-items:center;flex:0 0 auto}
.ih h3{font-size:15px;font-weight:800}
.ih .rt{margin-left:auto;display:flex;align-items:center;gap:8px}
.staleflag{font-size:11px;font-weight:700;color:var(--amber);background:var(--amber-tint);padding:3px 9px;border-radius:999px}
.ib{padding:18px 20px}
.brief{font-size:13.8px;line-height:1.6;color:var(--ink)}
.playbook{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--orange-600);background:var(--orange-tint);border:1px solid var(--orange-border);padding:5px 11px;border-radius:999px;margin-bottom:13px}
.coachlist{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.coachlist li{display:flex;gap:11px;font-size:13.8px;line-height:1.5}
.coachlist li .n{width:22px;height:22px;flex:0 0 auto;border-radius:6px;background:var(--navy);color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center;margin-top:1px}
.coachlist li b{font-weight:700}
.picks{display:grid;gap:10px}
.pick{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--border);border-radius:12px;padding:12px 13px}
.pick.enq{border-color:var(--orange-border);background:var(--orange-tint)}
.pick .rank{width:24px;height:24px;border-radius:7px;background:var(--navy);color:#fff;font-weight:800;font-size:12px;display:grid;place-items:center;flex:0 0 auto}
.pick .info{min-width:0;flex:1}
.pick .info .nm{font-size:13.7px;font-weight:700;display:flex;align-items:center;gap:8px}
.pick .info .nm .badge{font-size:10px;font-weight:800;color:var(--orange-600);background:#fff;border:1px solid var(--orange-border);padding:1px 6px;border-radius:999px}
.pick .info .mt{font-size:12px;color:var(--slate);margin-top:2px}
.pick .info .rs{font-size:12.3px;color:var(--slate);margin-top:6px;line-height:1.45}
.pick .pr{font-size:13.5px;font-weight:800;color:var(--navy);white-space:nowrap}
.pick a.info-lnk{text-decoration:none;color:inherit;min-width:0;flex:1}
.compromise{margin-top:11px;font-size:12.3px;color:var(--slate);background:var(--bg);border:1px dashed var(--border);border-radius:10px;padding:10px 12px;line-height:1.45}
.compromise b{color:var(--ink)}
.nextcard{padding:17px;margin-bottom:16px}
.nextcard .lab{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-400)}
.nextcard h3{font-size:16px;margin:7px 0 3px}
.nextcard p{font-size:12.5px;color:var(--slate)}
.feed{padding:18px 20px}
.feed h4{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--slate-400);margin-bottom:8px}
.tl{position:relative;padding-left:24px}
.tl:before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl-item{position:relative;padding:10px 0}
.tl-item .d{position:absolute;left:-21px;top:14px;width:11px;height:11px;border-radius:50%;background:#fff;border:2.5px solid var(--slate-300)}
.tl-item.ai .d{border-color:var(--orange)}
.tl-item.human .d{border-color:var(--blue)}
.tl-item .t{font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px}
.tl-item .src{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:5px}
.src.ai{background:var(--orange-tint);color:var(--orange-600)}
.src.wa{background:var(--wa-tint);color:#128C4B}
.src.crm{background:var(--navy-tint);color:var(--navy)}
.tl-item .m{font-size:12.3px;color:var(--slate);margin-top:2px;line-height:1.45}
.tl-item .ts{font-size:11px;color:var(--slate-400);margin-top:3px}

/* Inbox */
.inbox{display:grid;grid-template-columns:340px 1fr;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--panel);height:calc(100vh - 220px);min-height:520px}
.threads{border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0}
.threads .th-top{padding:13px 15px;border-bottom:1px solid var(--border)}
.threads .th-list{overflow-y:auto}
.thread{display:flex;gap:11px;padding:13px 15px;border-bottom:1px solid var(--border-soft);cursor:pointer}
.thread:hover{background:var(--bg)}
.thread.on{background:var(--orange-tint)}
.thread .avatar{width:38px;height:38px;font-size:13px}
.thread .tmid{min-width:0;flex:1}
.thread .tr1{display:flex;align-items:center;gap:6px}
.thread .tr1 b{font-size:13.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread .tr1 .tm{font-size:11px;color:var(--slate-400)}
.thread .prev{font-size:12.3px;color:var(--slate);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread .cbadge{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:1px 6px;border-radius:5px}
.conv{display:flex;flex-direction:column;min-width:0}
.conv .ch{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--border)}
.conv .ch .avatar{width:38px;height:38px;font-size:13px}
.conv .ch b{font-size:14.5px}
.conv .ch span{font-size:12px;color:var(--slate-400)}
.conv .ch .chact{margin-left:auto;display:flex;gap:8px;align-items:center}
.msgs{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:12px;background:var(--bg)}
.msg{max-width:74%;padding:11px 14px;border-radius:14px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.msg.them{background:#fff;border:1px solid var(--border);align-self:flex-start;border-bottom-left-radius:5px}
.msg.us{background:var(--navy);color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.msg .meta{font-size:10.5px;margin-top:6px;opacity:.8;display:flex;align-items:center;gap:6px}
.msg.us .aitag{background:var(--orange);color:#fff;font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:5px;letter-spacing:.03em}
.handoff{margin:0 18px;background:var(--amber-tint);border:1px solid #F5D9A8;border-radius:10px;padding:10px 13px;font-size:12.3px;color:#8A5200;display:flex;gap:9px;align-items:flex-start}
.composer{border-top:1px solid var(--border);padding:12px 16px;background:#fff}
.composer .draftnote{font-size:11.5px;font-weight:700;color:var(--orange-600);display:flex;align-items:center;gap:7px;margin-bottom:8px;line-height:1.4}
.composer .box{display:flex;gap:10px;align-items:center}
.composer input{flex:1;border:1px solid var(--border);border-radius:10px;padding:11px 13px;font-family:inherit;font-size:13.5px;outline:none}

/* My Email + two-column */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.mailcard{padding:22px}
.mailcard h3{font-size:16px;font-weight:800;display:flex;align-items:center;gap:9px}
.mailcard .sub{font-size:13px;color:var(--slate);margin:7px 0 16px;line-height:1.5}
.connected{display:flex;align-items:center;gap:11px;background:var(--green-tint);border:1px solid #BDE5CD;border-radius:12px;padding:13px}
.connected .avatar{width:38px;height:38px;background:#fff;color:var(--green)}
.connected b{font-size:13.5px;display:block}
.connected span{font-size:12px;color:var(--slate)}
.oauthbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:1px solid var(--border);background:#fff;border-radius:11px;padding:12px;font-weight:700;font-size:14px;color:var(--ink);margin-top:6px}
.presets{display:flex;gap:9px;margin-top:12px}
.preset{flex:1;border:1px solid var(--border);border-radius:10px;padding:11px;text-align:center;font-size:12.5px;font-weight:700;color:var(--slate)}
.style-preview{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px;font-size:13px;color:var(--slate);line-height:1.55;font-style:italic;margin-top:12px}
.conf{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:12.5px;color:var(--slate)}
.conf .bar{flex:1;height:7px;border-radius:99px;background:var(--border);overflow:hidden}
.conf .bar i{display:block;height:100%;background:var(--orange);border-radius:99px}

/* Settings */
.settings{display:grid;grid-template-columns:210px 1fr;gap:20px;align-items:start}
.setnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:88px}
.setnav button{text-align:left;border:none;background:transparent;font-size:13.5px;font-weight:600;color:var(--slate);padding:9px 12px;border-radius:9px}
.setnav button.on{background:var(--orange-tint);color:var(--orange-600)}
.setnav button:hover:not(.on){background:var(--panel)}
.setpanel{padding:24px}
.setpanel h2{font-size:18px;font-weight:800}
.setpanel .desc{font-size:13.5px;color:var(--slate);margin:6px 0 20px;line-height:1.5}
.field{margin-bottom:16px}
.field label{font-size:12.5px;font-weight:700;display:block;margin-bottom:6px}
.field .hint{font-size:11.5px;color:var(--slate-400);font-weight:500}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:13.5px;outline:none;background:#fff}
.field.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.setgroup{display:none}
.setgroup.show{display:block}
.kv{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border-soft)}
.kv:last-child{border-bottom:none}
.kv .kt{flex:1}
.kv .kt b{font-size:13.5px;display:block}
.kv .kt span{font-size:12px;color:var(--slate)}
.health-dot{width:10px;height:10px;border-radius:50%;background:var(--green)}
.cap-bar{height:9px;border-radius:99px;background:var(--border);overflow:hidden;margin-top:8px}
.cap-bar i{display:block;height:100%;background:var(--orange);border-radius:99px}
.roletag{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px}
.roletag.admin{background:var(--navy);color:#fff}
.roletag.user{background:var(--navy-tint);color:var(--navy)}

/* Questions (knowledge base) */
.q-card{padding:16px 18px;margin-bottom:12px}
.q-card .qtext{font-weight:700;font-size:15px;margin-bottom:4px}
.q-card .qmeta{color:var(--slate);font-size:12.5px;margin-bottom:12px}
.q-card .qmeta b{color:var(--ink)}
.q-card textarea{width:100%;min-height:58px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font:inherit;resize:vertical;outline:none}
.q-card .qrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
.q-card select{padding:9px 11px;border:1px solid var(--border);border-radius:10px;font:inherit;background:#fff}
.scopehint{color:var(--slate);font-size:12px}
.q-ans{background:var(--green-tint);border-color:#BDE5CD !important}

/* Auth (login / setup) */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-hero{background:var(--navy);color:#fff;padding:56px 54px;display:flex;flex-direction:column;justify-content:space-between}
.auth-hero .brand{padding:0;color:#fff}
.auth-hero h2{font-size:30px;font-weight:800;line-height:1.2;margin-top:26px;max-width:15ch}
.auth-hero p{color:#aab8ce;font-size:14.5px;line-height:1.6;margin-top:16px;max-width:46ch}
.auth-hero .feats{display:grid;gap:14px;margin-top:30px}
.auth-hero .feat{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:#d6deec}
.auth-hero .feat .ic{width:30px;height:30px;border-radius:9px;background:var(--navy-700);display:grid;place-items:center;flex:0 0 auto}
.auth-hero .foot{font-size:12px;color:#7C8DA8}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px}
.auth-card{width:100%;max-width:380px}
.auth-card h1{font-size:24px;font-weight:800}
.auth-card .lede{color:var(--slate);font-size:14px;margin:8px 0 26px;line-height:1.5}
.auth-card .field label{font-size:12.5px}
.auth-card .btn{width:100%;justify-content:center;padding:12px}
.auth-note{font-size:12.5px;color:var(--slate-400);margin-top:16px;text-align:center}
@media(max-width:860px){.auth-wrap{grid-template-columns:1fr}.auth-hero{display:none}}

/* ── Relai HQ dashboard ── */
.hq-grid{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
.workers{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px}
.worker{display:flex;gap:11px;align-items:flex-start;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:13px 15px;box-shadow:var(--shadow-sm)}
.worker .wdot{width:10px;height:10px;border-radius:50%;margin-top:4px;flex:0 0 auto;background:var(--slate-300)}
.worker.on .wdot{background:var(--green);box-shadow:0 0 0 0 rgba(15,157,88,.5);animation:pulse-g 2.4s infinite}
.worker.throttle .wdot{background:var(--amber)}
@keyframes pulse-g{0%{box-shadow:0 0 0 0 rgba(15,157,88,.5)}70%{box-shadow:0 0 0 6px rgba(15,157,88,0)}100%{box-shadow:0 0 0 0 rgba(15,157,88,0)}}
.worker b{font-size:13.5px;display:block}
.worker .ws{font-size:12px;color:var(--slate);margin-top:2px;line-height:1.4}
.worker .wmeta{font-size:11px;color:var(--slate-400);margin-top:5px}
.live-head{display:flex;align-items:center;gap:9px;padding:15px 18px;border-bottom:1px solid var(--border)}
.live-head h3{font-size:15px;font-weight:800}
.live-feed{max-height:520px;overflow-y:auto}
.ev{display:flex;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border-soft)}
.ev:last-child{border-bottom:none}
.ev.fresh{animation:evin .5s ease;background:var(--orange-tint)}
@keyframes evin{from{background:var(--orange-tint)}to{background:transparent}}
.ev .ei{width:30px;height:30px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;font-size:12px;font-weight:800}
.ev .ei.nurture{background:var(--orange-tint);color:var(--orange-600)}
.ev .ei.reply{background:var(--wa-tint);color:#128C4B}
.ev .ei.handoff{background:var(--amber-tint);color:var(--amber)}
.ev .ei.question_raised{background:var(--navy-tint);color:var(--navy)}
.ev .ei.question_answered{background:var(--green-tint);color:var(--green)}
.ev .ei.engine_run,.ev .ei.insight_generated,.ev .ei.note_added{background:var(--blue-tint);color:var(--blue)}
.ev .etxt{min-width:0;flex:1}
.ev .etxt .et{font-size:13px;font-weight:700}
.ev .etxt .et .who{color:var(--orange-600)}
.ev .etxt .em{font-size:12px;color:var(--slate);margin-top:2px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev .etxt .ets{font-size:10.5px;color:var(--slate-400);margin-top:3px;text-transform:uppercase;letter-spacing:.03em}
.hq-side .card{margin-bottom:16px}
.qbig{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border-soft)}
.qbig:last-child{border-bottom:none}
.qbig .qn{font-size:22px;font-weight:800;width:44px;text-align:center;flex:0 0 auto}
.qbig .ql b{font-size:13.5px;display:block}
.qbig .ql span{font-size:12px;color:var(--slate)}
.qbig a{margin-left:auto}
.trend{display:flex;align-items:flex-end;gap:3px;height:56px;margin-top:6px}
.trend .bar{flex:1;background:var(--orange-tint);border-radius:3px 3px 0 0;min-height:3px;position:relative}
.trend .bar.hot{background:var(--orange)}
.trendrow{display:flex;justify-content:space-between;font-size:11px;color:var(--slate-400);margin-top:5px}

/* ── Feedback widget (👍/👎 + comment → teaches the agents) ── */
.fb{display:inline-flex;align-items:center;gap:3px;position:relative;vertical-align:middle}
.fb-btn{border:none;background:transparent;color:var(--slate-400);width:28px;height:26px;border-radius:8px;display:grid;place-items:center;transition:background .13s,color .13s,transform .13s}
.fb-btn svg{display:block}
.fb-btn:hover{transform:translateY(-1px)}
.fb-btn[data-v="up"]:hover,.fb-btn.sel[data-v="up"]{background:var(--green-tint);color:var(--green)}
.fb-btn[data-v="down"]:hover,.fb-btn.sel[data-v="down"]{background:var(--red-tint);color:var(--red)}
/* On dark bubbles (AI replies), lift the resting colour so the thumbs read clearly. */
.msg.us .fb-btn{color:rgba(255,255,255,.62)}
.msg.us .fb-btn[data-v="up"]:hover,.msg.us .fb-btn.sel[data-v="up"]{background:rgba(255,255,255,.16);color:#7ee2a8}
.msg.us .fb-btn[data-v="down"]:hover,.msg.us .fb-btn.sel[data-v="down"]{background:rgba(255,255,255,.16);color:#ff9b8f}
.fb-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:30;display:flex;gap:6px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:7px;min-width:260px}
.fb-in{flex:1;border:1px solid var(--border);border-radius:8px;padding:7px 9px;font:inherit;font-size:12.5px;outline:none}
.fb-thanks{font-size:12.5px;font-weight:700;color:var(--green);padding:2px 6px;white-space:nowrap}

/* Generic input (pages that use class="input") */
.input{border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:13.5px;outline:none;background:#fff;color:var(--ink)}
.input:focus{border-color:var(--slate-300)}
select.input,.chip select,select.chip{-webkit-appearance:none;appearance:none}

/* Utilities: loading / empty / error */
.state{display:flex;align-items:center;gap:10px;justify-content:center;padding:34px 18px;color:var(--slate);font-size:14px}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--border);border-top-color:var(--orange);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.err{background:var(--red-tint);color:var(--red);border:1px solid #F3C4C0;border-radius:12px;padding:14px 16px;font-size:13.5px}

@media(max-width:1160px){.c360{grid-template-columns:1fr}.settings{grid-template-columns:1fr}.setnav{position:static;flex-direction:row;flex-wrap:wrap}}
@media(max-width:900px){.app{grid-template-columns:1fr}.side{display:none}.stats{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}.inbox{grid-template-columns:1fr}.threads{display:none}}