/* IRA — design tokens and components. Reference: hom.ai (Pocolo, Behance): warm paper background, white cards with big radii,
   charcoal tiles, lime accent, round icon buttons, floating black pill tab bar. Three themes: light · midnight · violet. */
:root{
  --font:"Inter","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --hdr:62px;--side:340px;--r:22px;--r2:16px;
  /* light (default) */
  --bg:#EFF0EA;--bg2:#E7E9E1;--card:#FFFFFF;--card2:#F4F5F0;--text:#1B1C19;--muted:#7B7E75;--line:rgba(27,28,25,.07);--line2:rgba(27,28,25,.12);
  --accent:#C9DB6E;--accent2:#E6EFB5;--accent-ink:#273309;--ink:#202220;--ink-text:#FFFFFF;--me:#202220;--me-text:#FFFFFF;
  --primary:#202220;--primary-text:#FFFFFF;--sel:#202220;--sel-text:#FFFFFF;--sel-muted:rgba(255,255,255,.62);
  --ok:#5CA868;--warn:#DDA23A;--bad:#D65A4F;--info:#6F8FCB;--shadow:0 8px 28px rgba(20,22,18,.07);--shadow2:0 18px 48px rgba(20,22,18,.16);
  --chief:#C9A227;--code:#EEF0E8;--pre:#202220;--pre-text:#E7EADF;--mdq:#F7F8EF;
  color-scheme:light
}
:root[data-theme=midnight]{
  --bg:#0A0F1E;--bg2:#0D1326;--card:#141B30;--card2:#1B2340;--text:#EDF0F7;--muted:#8B95B0;--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.13);
  --accent:#C9DB6E;--accent2:#2B3324;--accent-ink:#1A2306;--ink:#E9ECF4;--ink-text:#0A0F1E;--me:#243463;--me-text:#FFFFFF;
  --primary:#C9DB6E;--primary-text:#1A2306;--sel:#C9DB6E;--sel-text:#131A06;--sel-muted:rgba(19,26,6,.62);
  --ok:#6BC27A;--warn:#E6B04A;--bad:#E8706A;--info:#86A5E6;--shadow:0 8px 28px rgba(0,0,0,.28);--shadow2:0 18px 48px rgba(0,0,0,.5);
  --code:#0F1528;--pre:#060A16;--pre-text:#DCE4F5;--mdq:#1A2240;color-scheme:dark
}
:root[data-theme=violet]{
  --bg:#130E26;--bg2:#17112E;--card:#1F1839;--card2:#28204B;--text:#F2EEFF;--muted:#A094C9;--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.13);
  --accent:#CDB8FF;--accent2:#352A60;--accent-ink:#1E1140;--ink:#F0EAFF;--ink-text:#130E26;--me:#3C2D73;--me-text:#FFFFFF;
  --primary:#CDB8FF;--primary-text:#1E1140;--sel:#CDB8FF;--sel-text:#1E1140;--sel-muted:rgba(30,17,64,.62);
  --ok:#7CCB8A;--warn:#E9B657;--bad:#EE7A74;--info:#9AB0F0;--shadow:0 8px 28px rgba(0,0,0,.3);--shadow2:0 18px 48px rgba(0,0,0,.5);
  --code:#160F2E;--pre:#0B0718;--pre-text:#E6DEFF;--mdq:#241B45;color-scheme:dark
}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}
body{font-family:var(--font);background:var(--bg);color:var(--text);display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font-family:var(--font)}
svg.i{width:18px;height:18px;flex:0 0 auto}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px;border:3px solid transparent;background-clip:padding-box}
/* ---------- header */
header{height:var(--hdr);flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:0 18px;z-index:7}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;white-space:nowrap;font-size:17px;letter-spacing:-.01em}
.brand .logo{width:30px;height:30px;border-radius:10px;background:var(--accent);display:grid;place-items:center;color:var(--accent-ink)}
.brand .logo svg{width:18px;height:18px}
.brand small{font-weight:500;color:var(--muted);font-size:12px;margin-left:2px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);padding:5px 11px;border-radius:999px;font-size:12px;white-space:nowrap;color:var(--text)}
.chip b{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}.chip .ml{display:none}.chip.off{color:var(--muted)}.chip.off b{background:var(--line2)}
.sp{flex:1}.kpi{font-size:12.5px;color:var(--muted);white-space:nowrap}.kpi b{font-family:var(--mono);font-weight:500;color:var(--text)}
.hbtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);background:var(--card);color:var(--text);font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap}
.hbtn:hover{border-color:var(--muted)}.hbtn.primary{background:var(--primary);color:var(--primary-text);border-color:transparent;font-weight:700}.hbtn.primary:hover{filter:brightness(1.06)}
.hbtn.round{width:40px;padding:0;justify-content:center}
.themes{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px}
.themes button{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;background:#EFF0EA;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.themes button[data-t=midnight]{background:#0A0F1E}.themes button[data-t=violet]{background:#1F1839}.themes button.on{border-color:var(--accent)}
/* ---------- layout */
main{flex:1;display:grid;grid-template-columns:var(--side) 1fr;min-height:0;position:relative;gap:0}
.side{display:flex;flex-direction:column;min-height:0;padding:0 8px 0 14px}
.work{display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;padding:0 18px 0 8px}
/* ---------- sidebar */
.seg{display:flex;gap:2px;margin:2px 4px 10px;background:var(--bg2);padding:4px;border-radius:999px}.seg div{flex:1;text-align:center;font-size:13px;font-weight:600;color:var(--muted);padding:8px 0;border-radius:999px;cursor:pointer}.seg div.on{background:var(--card);color:var(--text);box-shadow:var(--shadow)}
.search{margin:0 4px 10px;position:relative}.search input{width:100%;height:42px;border:1px solid transparent;border-radius:999px;padding:0 14px 0 40px;font:13.5px var(--font);outline:0;background:var(--card);color:var(--text)}.search input:focus{border-color:var(--line2)}.search svg{position:absolute;left:14px;top:12px;color:var(--muted)}
.filters{display:flex;gap:6px;padding:0 4px 10px;flex-wrap:wrap}.filters div{font-size:12px;padding:6px 11px;border-radius:999px;background:transparent;border:1px solid var(--line2);color:var(--muted);cursor:pointer;font-weight:600}.filters div.on{background:var(--ink);color:var(--ink-text);border-color:transparent}.filters div .k{font-family:var(--mono);font-weight:500;opacity:.8;margin-left:4px}
.list{overflow:auto;flex:1;padding:2px 4px 16px;display:flex;flex-direction:column;gap:6px}
.row{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:start;padding:12px 12px;border-radius:var(--r2);cursor:pointer;background:var(--card);border:1px solid transparent;transition:transform .12s}
.row:hover{border-color:var(--line2)}.row.sel{background:var(--sel);color:var(--sel-text)}.row.sel .m,.row.sel .r,.row.sel .m .st{color:var(--sel-muted)}.row.sel .m .pj{border-color:var(--sel-muted);color:var(--sel-text)}
.row .av{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;position:relative}
.row .av i{position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;border:2px solid var(--card);background:var(--muted)}.row.sel .av i{border-color:var(--sel)}
.row.running .av i{background:var(--ok);animation:pulse 1.4s infinite}.row.waiting .av i{background:var(--warn)}.row.failed .av i{background:var(--bad)}.row.done .av i{background:var(--ok)}.row.routing .av i,.row.assigned .av i,.row.queue .av i{background:var(--info)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(92,168,104,.5)}70%{box-shadow:0 0 0 6px rgba(92,168,104,0)}}
.row h4{margin:0 0 4px;font-size:13.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row .m{font-size:11.5px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center}.row .m .st{font-weight:600;color:var(--text)}.row.waiting .m .st{color:var(--warn)}.row.failed .m .st{color:var(--bad)}.row.running .m .st{color:var(--ok)}
.row .m .pj{font-family:var(--mono);font-size:10.5px;border:1px solid var(--line2);padding:0 6px;border-radius:999px}
.row .pr{height:4px;background:var(--bg2);border-radius:2px;margin-top:8px;overflow:hidden}.row .pr i{display:block;height:100%;background:var(--accent)}.row.sel .pr{background:rgba(0,0,0,.15)}
.row .r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.row .badge{background:var(--accent);color:var(--accent-ink);font:700 10.5px var(--font);padding:2px 7px;border-radius:999px}
.row .pct{color:var(--ok);font-weight:500}
.sect{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 8px 4px;font-weight:700}
.empty{color:var(--muted);font-size:13px;padding:20px 14px;text-align:center;line-height:1.5}
.proj{background:var(--card);border-radius:var(--r2);padding:12px 14px}.proj h4{margin:0 0 4px;font-size:13px}.proj .m{font-size:11.5px;color:var(--muted);line-height:1.5}.proj code{font-family:var(--mono);font-size:11px;background:var(--code);padding:0 4px;border-radius:4px}
.ev{font-size:12px;padding:8px 10px;border-bottom:1px solid var(--line);display:flex;gap:8px;line-height:1.4}.ev time{font-family:var(--mono);color:var(--muted);flex:0 0 46px}.ev .who{font-weight:600;flex:0 0 auto}
/* ---------- work area: thread */
.welcome{flex:1;display:grid;place-items:center;padding:24px}.welcome .box{max-width:560px;text-align:center}.welcome h2{margin:0 0 10px;font-size:30px;letter-spacing:-.02em;line-height:1.15}.welcome p{color:var(--muted);margin:0 0 22px;line-height:1.55;font-size:14.5px}
.welcome .stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}.welcome .stats div{background:var(--card);border-radius:var(--r2);padding:14px 16px;min-width:118px;text-align:left}.welcome .stats b{display:block;font:600 24px var(--font);letter-spacing:-.02em}.welcome .stats span{font-size:11.5px;color:var(--muted)}
.welcome .stats div.hot{background:var(--accent);color:var(--accent-ink)}.welcome .stats div.hot span{color:var(--accent-ink);opacity:.75}
.thead{padding:10px 8px 14px;display:flex;gap:14px;align-items:flex-start}
.thead .back{display:none}
.thead h1{margin:0 0 8px;font-size:21px;line-height:1.3;font-weight:650;letter-spacing:-.015em}
.tchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tchip{font-family:var(--mono);font-size:11.5px;background:var(--card);color:var(--text);padding:4px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:5px}.tchip.ok{background:var(--ok);color:#fff}.tchip.bad{background:var(--bad);color:#fff}.tchip.warn{background:var(--warn);color:#fff}.tchip.run{background:var(--accent);color:var(--accent-ink)}.tchip.mute{background:transparent;color:var(--muted);padding:4px 2px}
.tacts{display:flex;gap:6px;flex:0 0 auto}
.ibtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--text);display:grid;place-items:center;cursor:pointer}.ibtn:hover{border-color:var(--muted)}.ibtn.danger:hover{color:var(--bad);border-color:var(--bad)}.ibtn[disabled]{opacity:.35;cursor:default}
.thread{flex:1;overflow:auto;padding:6px 8px 160px;display:flex;flex-direction:column;gap:14px;overflow-anchor:none}
.msg{display:grid;grid-template-columns:36px 1fr;gap:12px;max-width:980px}
.msg .av{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12.5px}
.msg .who{font-size:12px;color:var(--muted);margin-bottom:6px;display:flex;gap:8px;align-items:baseline}.msg .who b{color:var(--text);font-weight:650}.msg .who .kind{font-family:var(--mono);font-size:11px;background:var(--card);padding:1px 8px;border-radius:999px}
.msg .body{background:var(--card);border-radius:6px var(--r) var(--r) var(--r);padding:16px 20px;font-size:14.5px;line-height:1.55;min-width:0;overflow-wrap:anywhere;box-shadow:var(--shadow)}
.msg.owner{grid-template-columns:1fr 36px;margin-left:auto;max-width:720px}.msg.owner .av{order:2;background:var(--me);color:var(--me-text)}.msg.owner .who{justify-content:flex-end}
.msg.owner .body{background:var(--me);color:var(--me-text);border-radius:var(--r) 6px var(--r) var(--r);white-space:pre-wrap;box-shadow:none}
.msg.chief .body{background:var(--accent2)}
.msg.question .body{background:var(--accent);color:var(--accent-ink)}.msg.question .body::before{content:"Question for you";display:block;font:700 11px var(--font);letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-bottom:6px}
.msg.failed .body{box-shadow:inset 0 0 0 1.5px var(--bad)}
.msg.note .body{background:transparent;box-shadow:none;padding:4px 0;color:var(--muted);font-size:13px}
.msg .tools{display:flex;gap:12px;margin-top:10px}.msg .tools button,.msg .tools a{font:600 12px var(--font);color:inherit;opacity:.75;background:transparent;border:0;cursor:pointer;padding:0;text-decoration:none}.msg .tools button:hover,.msg .tools a:hover{opacity:1;text-decoration:underline}
.clamp .md{max-height:170px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.live{display:grid;grid-template-columns:36px 1fr;gap:12px;max-width:980px}.live .av{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12.5px}
.live .body{background:var(--card);border:1.5px dashed var(--line2);border-radius:6px var(--r) var(--r) var(--r);padding:14px 20px}
.live .l1{display:flex;gap:10px;align-items:center;font-size:14px}.live .l1 b{font-weight:650}.live .dots i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ok);margin-right:3px;animation:blink 1.2s infinite}.live .dots i:nth-child(2){animation-delay:.2s}.live .dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
.live .now{font-size:13px;color:var(--muted);margin-top:5px;font-family:var(--mono);overflow-wrap:anywhere}
.live .pr{height:8px;background:var(--bg2);border-radius:4px;margin-top:12px;overflow:hidden}.live .pr i{display:block;height:100%;background:var(--accent);transition:width .6s}
.live .meta{display:flex;gap:12px;font-size:11.5px;color:var(--muted);margin-top:8px;font-family:var(--mono);flex-wrap:wrap}
.journal{max-width:980px;margin-top:4px}.journal summary{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;font-weight:700;padding:6px 0}
.journal .rlog{background:var(--card);border-radius:var(--r2);padding:8px 14px;margin-top:6px}.journal .rlog div{display:flex;gap:10px;font-size:12px;padding:5px 0;border-bottom:1px solid var(--line)}.journal .rlog div:last-child{border:0}.journal time{font-family:var(--mono);color:var(--muted);flex:0 0 44px}.journal .who{font-weight:600;flex:0 0 70px}
/* markdown */
.md>:first-child{margin-top:0}.md>:last-child{margin-bottom:0}
.md h1,.md h2,.md h3,.md h4{margin:16px 0 6px;line-height:1.3;letter-spacing:-.01em}.md h1{font-size:19px}.md h2{font-size:17px}.md h3{font-size:15.5px}.md h4{font-size:14.5px}.md p{margin:8px 0}.md ul,.md ol{margin:6px 0 10px;padding-left:22px}.md li{margin:3px 0}
.md a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent);word-break:break-all}.md code{font-family:var(--mono);font-size:12.5px;background:var(--code);padding:1px 6px;border-radius:6px;word-break:break-all}
.md pre{background:var(--pre);color:var(--pre-text);padding:12px 14px;border-radius:12px;overflow:auto;font-size:12.5px}.md pre code{background:none;color:inherit;padding:0}
.md table{overflow-wrap:normal;border-collapse:separate;border-spacing:0;margin:10px 0;width:100%;font-size:13.5px;display:block;overflow:auto}.md th,.md td{border-bottom:1px solid var(--line2);padding:7px 10px;text-align:left;vertical-align:top}.md th{font-weight:600;color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.md blockquote{margin:10px 0;padding:8px 14px;border-left:4px solid var(--accent);background:var(--mdq);border-radius:0 10px 10px 0}.md img{max-width:100%;border-radius:12px;margin:8px 0;display:block}.md hr{border:0;border-top:1px solid var(--line2);margin:14px 0}
.msg.owner .md code{background:rgba(255,255,255,.15)}
/* composer */
.composer{position:absolute;left:8px;right:18px;bottom:16px;pointer-events:none}
.cbox{max-width:980px;background:var(--card);border-radius:24px;box-shadow:var(--shadow2);pointer-events:auto;border:1px solid var(--line)}
.cbox textarea{display:block;width:100%;min-height:54px;max-height:40vh;border:0;outline:0;background:transparent;padding:16px 18px 4px;font:14.5px/1.5 var(--font);color:var(--text);resize:none;border-radius:24px 24px 0 0}
.cbox textarea::placeholder{color:var(--muted)}
.cbar{display:flex;align-items:center;gap:10px;padding:4px 10px 10px 18px}.cbar .hint{font-size:12px;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cbar .hint.bad{color:var(--bad)}.cbar .hint.ok{color:var(--ok)}
.mic{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 11px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--text);font:600 13px var(--font);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;transition:all .15s;white-space:nowrap}
.mic:hover{border-color:var(--muted)}.mic.rec{background:var(--bad);border-color:var(--bad);color:#fff;box-shadow:0 0 0 5px rgba(214,90,79,.2)}.mic.rec svg{animation:ntpulse 1s ease-in-out infinite}
@keyframes ntpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.send{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;border:0;background:var(--primary);color:var(--primary-text);font:700 13.5px var(--font);cursor:pointer;white-space:nowrap}.send:hover{filter:brightness(1.06)}.send:disabled{opacity:.55;cursor:default}
.livemic{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--bad);padding:6px 18px 0}.livemic[hidden]{display:none}.livemic i{width:8px;height:8px;border-radius:50%;background:var(--bad);animation:ntblink 1s infinite}@keyframes ntblink{50%{opacity:.25}}
/* ---------- the conversation: one feed across all threads */
.day{align-self:center;font:500 11px var(--mono);color:var(--muted);background:var(--bg2);padding:4px 12px;border-radius:999px;margin:4px 0}
.msg .who .tag{font:500 11px var(--mono);background:var(--card);color:var(--muted);padding:1px 8px;border-radius:999px;border:0;cursor:pointer}.msg .who .tag:hover{color:var(--text)}
.clampL .md{max-height:520px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
.thread.chat .more{align-self:center;font:600 12px var(--font);color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer}
.thread.chat .files{margin:-4px 0 4px 48px}
.lw{cursor:pointer;margin-bottom:10px}.live .ltag{font:500 11px var(--mono);color:var(--muted)}
.chatempty{margin:auto;max-width:520px;text-align:center;padding:24px}.chatempty h2{margin:0 0 10px;font-size:28px;letter-spacing:-.02em}.chatempty p{margin:0;color:var(--muted);line-height:1.55;font-size:14.5px}
.creply{display:flex;align-items:center;gap:6px;margin:10px 10px 0;padding:5px 5px 5px 12px;background:var(--bg2);color:var(--text);border-radius:999px;font-size:12.5px;width:fit-content;max-width:calc(100% - 20px)}.creply[hidden]{display:none}
.creply span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.creply button{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:0;background:var(--card);color:var(--text);font-size:15px;line-height:1;cursor:pointer}
/* ---------- the office: corner preview that expands */
#stage{position:fixed;right:18px;bottom:112px;width:400px;height:236px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow2);background:#8fb7d4;z-index:6;transition:width .25s,height .25s,right .25s,bottom .25s,border-radius .25s}
#stage canvas{display:block;width:100%!important;height:100%!important}
body.pip #stage canvas{pointer-events:none}body.pip #stage{cursor:pointer}
.pipbar{position:absolute;left:0;right:0;top:0;padding:10px 12px;display:flex;align-items:center;gap:8px;color:#fff;font-size:12.5px;background:linear-gradient(rgba(10,20,18,.7),transparent);cursor:pointer}
.pipbar b{font-weight:700}.pipbar .sp{flex:1}.pipbar .ib{width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px)}.pipbar .ib:hover{background:rgba(255,255,255,.35)}
.pipcap{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;color:#fff;font-size:11.5px;background:linear-gradient(transparent,rgba(10,20,18,.75));pointer-events:none;font-family:var(--mono)}
.sbar{position:absolute;left:0;right:0;top:0;display:none;align-items:center;gap:10px;padding:12px 16px;color:#fff;background:linear-gradient(rgba(10,20,18,.75),transparent);z-index:2}
.sbar .hud{display:flex;gap:8px}.sbar .hud span{background:rgba(20,30,28,.8);font-family:var(--mono);font-size:12px;padding:7px 11px;border-radius:999px;backdrop-filter:blur(6px)}
.sbar .hbtn{background:rgba(20,30,28,.8);color:#fff;border-color:transparent;backdrop-filter:blur(6px)}
.timebox{display:flex;align-items:center;gap:8px;font-size:12px;font-family:var(--mono);background:rgba(20,30,28,.8);padding:0 12px;height:40px;border-radius:999px}.timebox input{width:130px;accent-color:var(--accent)}
.hint{position:absolute;left:16px;bottom:16px;background:rgba(20,30,28,.7);color:#fff;font-size:11px;padding:6px 10px;border-radius:999px;display:none}
#card{position:absolute;right:16px;top:66px;width:280px;background:var(--card);color:var(--text);border-radius:var(--r2);padding:16px;box-shadow:var(--shadow2);display:none;z-index:3}
#card h3{margin:0 0 2px;font-size:15px}#card .r{font-size:12px;color:var(--muted);margin-bottom:10px}
#card .kv{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:12px}#card .kv b{font-weight:600;color:var(--muted)}
#card .x{position:absolute;right:10px;top:8px;border:0;background:none;font-size:18px;cursor:pointer;color:var(--muted)}#card .btn{margin-top:12px;width:100%;background:var(--primary);color:var(--primary-text);border:0;border-radius:999px;padding:10px 13px;font-weight:700;cursor:pointer}
#load{position:absolute;inset:0;display:grid;place-items:center;background:#1a2a28;color:#fff;z-index:9;transition:opacity .5s}
#load .bar{width:160px;height:5px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden;margin-top:10px}#load .bar i{display:block;height:100%;width:0;background:var(--accent)}
#ambientExit{display:none;position:absolute;right:16px;bottom:16px;z-index:3}
body.officefull #stage{right:0;bottom:0;width:100%;height:calc(100% - var(--hdr));border-radius:0;box-shadow:none;z-index:6}
body.officefull .pipbar,body.officefull .pipcap{display:none}body.officefull .sbar{display:flex}body.officefull .hint{display:block}
body.ambient header,body.ambient .sbar,body.ambient .hint,body.ambient #card,body.ambient .tabbar{display:none!important}body.ambient #stage{height:100%!important}body.ambient #ambientExit{display:block!important}
/* ---------- modal + new task dialog */
.modal{position:fixed;inset:0;background:rgba(10,12,10,.55);display:none;align-items:center;justify-content:center;z-index:20;padding:16px;backdrop-filter:blur(4px)}.modal.on{display:flex}
.box{background:var(--card);color:var(--text);border-radius:var(--r);padding:20px;width:min(520px,100%);box-shadow:var(--shadow2)}
.box h3{margin:0 0 10px;font-size:16px}
#login .box{text-align:center;padding:28px}#login .logo{width:48px;height:48px;border-radius:14px;background:var(--accent);display:grid;place-items:center;color:var(--accent-ink);margin:0 auto 12px}#login .logo svg{width:26px;height:26px}
#login input{font:24px var(--mono);letter-spacing:.3em;text-align:center;width:200px;border:1px solid var(--line2);border-radius:14px;padding:10px 12px;background:var(--card2);color:var(--text);outline:0}#login input:focus{border-color:var(--accent)}#login .err{color:var(--bad);font-size:12px;min-height:16px;margin-top:6px}
#login .btn{background:var(--primary);color:var(--primary-text);border:0;border-radius:999px;padding:11px 22px;font-weight:700;cursor:pointer}
.box.nt{width:min(620px,100%);padding:0;border-radius:28px;overflow:hidden}
.nt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:24px 26px 4px}
.nt-head h3{margin:0;font-size:22px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}.nt-head h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
.nt-head p{margin:6px 0 0;font-size:13px;color:var(--muted)}
.nt-x{width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;flex:0 0 auto}.nt-x:hover{color:var(--text);border-color:var(--muted)}.nt-x svg{width:18px;height:18px}
.nt-body{padding:14px 26px 0;display:flex;flex-direction:column;gap:16px}
.nt-field label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 7px 4px}
.nt-ta{border:1.5px solid var(--line2);border-radius:18px;background:var(--card2);transition:border-color .15s}.nt-ta:focus-within{border-color:var(--text)}
.nt-ta textarea{display:block;width:100%;min-height:128px;max-height:40vh;border:0;outline:0;background:transparent;padding:14px 16px 6px;font:15px/1.5 var(--font);color:var(--text);resize:vertical;border-radius:18px 18px 0 0}
.nt-ta textarea::placeholder{color:var(--muted)}
.nt-tabar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 10px 10px 16px}
.nt-count{font:12px var(--mono);color:var(--muted)}
.nt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nt-sel{position:relative}.nt-sel select{appearance:none;-webkit-appearance:none;width:100%;height:46px;border:1.5px solid var(--line2);border-radius:999px;padding:0 42px 0 16px;font:500 14px var(--font);color:var(--text);background:var(--card2);cursor:pointer;outline:0}
.nt-sel select:focus{border-color:var(--text)}
.nt-sel::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.nt-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 26px 22px;margin-top:20px;border-top:1px solid var(--line)}
.nt-hint{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.4;color:var(--muted);max-width:290px}.nt-hint svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px}.nt-hint.ok{color:var(--ok)}.nt-hint.bad{color:var(--bad)}
.nt-actions{display:flex;gap:10px;flex:0 0 auto}
.nt-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;font:700 14px var(--font);cursor:pointer;border:1.5px solid transparent;transition:all .15s;white-space:nowrap}
.nt-btn svg{width:17px;height:17px}
.nt-btn.ghost{background:transparent;border-color:var(--line2);color:var(--text)}.nt-btn.ghost:hover{border-color:var(--muted)}
.nt-btn.primary{background:var(--primary);color:var(--primary-text)}.nt-btn.primary:hover{filter:brightness(1.06)}.nt-btn.primary:disabled{opacity:.6;cursor:default}
/* ---------- the office caption: live pill + who is working right now (both sizes) */
.pipcap{display:flex;align-items:flex-end;gap:10px}
.pipcap .lv{display:inline-flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}.pipcap .lv i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(201,219,110,.25);animation:blink 1.6s infinite}
.crew{display:flex;gap:6px;margin-left:auto;min-width:0;pointer-events:none}
.ct{display:inline-flex;align-items:center;gap:7px;background:rgba(20,30,28,.62);backdrop-filter:blur(8px);border-radius:999px;padding:3px 10px 3px 3px;font:500 11px var(--font);color:#fff;max-width:180px;min-width:0}
.ct b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 10.5px var(--font);flex:0 0 auto}
.ct span{display:flex;flex-direction:column;min-width:0;line-height:1.2}.ct small{font:10px var(--mono);opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct.more{padding:3px 10px;font-family:var(--mono)}
.ct.quiet{padding:4px 11px;font-family:var(--mono);font-weight:400;opacity:.9}
/* ---------- phone */
.tabbar,.fab,.fsearch{display:none}
@media (max-width:900px){
 :root{--hdr:56px;--card-h:188px}
 header{padding:0 14px;gap:6px}.kpi,#officeBtn,#newtask,.brand small{display:none}
 .brand{font-size:18px}.brand .logo{width:34px;height:34px;border-radius:11px}.brand .logo svg{width:20px;height:20px}
 #machines{display:flex;gap:4px;margin-left:6px}.chip.m{padding:0;width:22px;height:22px;border-radius:50%;background:var(--card);border:1px solid var(--line);font:700 10px var(--font);justify-content:center;text-transform:uppercase;letter-spacing:0;overflow:hidden;color:var(--text)}.chip.m b{position:absolute;width:0;height:0;display:none}.chip.m .mn{display:none}.chip.m .ml{display:inline}.chip.m{position:relative}.chip.m::after{content:"";position:absolute;right:1px;bottom:1px;width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 1.5px var(--bg)}.chip.m.off{color:var(--muted)}.chip.m.off::after{background:var(--line2)}
 .themes{margin-left:auto}
 main{display:block}
 .side,.work{position:absolute;inset:0;display:none;padding:0 12px}
 body[data-view=tasks] .side{display:flex;padding-top:calc(var(--card-h) + 16px)}
 body[data-view=thread] .work,body[data-view=chat] .work{display:flex}
 body[data-view=chat] .fab{display:none}.thread.chat .files{margin-left:38px}#chatBtn{display:none}
 /* tasks page: the office card is fixed on top, the list scrolls under it */
 .seg{display:none}
 .search{display:none;margin:0 0 10px}.side.qopen .search{display:block}
 .filters{flex-wrap:nowrap;overflow:auto;scrollbar-width:none;padding:0 0 10px;margin:0 -12px;padding-left:12px;padding-right:12px;align-items:center;gap:6px}.filters::-webkit-scrollbar{display:none}
 .filters div{flex:0 0 auto;padding:8px 13px;font-size:12.5px;background:var(--card);border-color:transparent}.filters div.on{background:var(--ink);color:var(--ink-text)}
 .fsearch{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:0;background:var(--card);color:var(--text);margin-left:auto;cursor:pointer}.side.qopen .fsearch{background:var(--ink);color:var(--ink-text)}
 .list{padding:0 0 110px;gap:8px}.sect{padding:10px 6px 6px}
 .row{padding:13px 13px;border-radius:20px}.row h4{font-size:14px}
 .thead{padding:8px 0 10px;gap:10px;align-items:center;flex-wrap:wrap}.thead .back{display:grid}.thead>div{flex:1 1 calc(100% - 54px)}.thead h1{font-size:16px;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tacts{flex:1 1 100%;justify-content:flex-start;padding-left:50px}.tacts .ibtn{width:36px;height:36px}
 body[data-view=thread] .fab,body.officefull .fab,body.officefull .hint{display:none}
 .thread{padding:6px 0 290px}.composer{left:0;right:0;bottom:0;padding:26px 12px 92px;background:linear-gradient(transparent,var(--bg) 26px)}.msg{grid-template-columns:30px 1fr;gap:8px}.msg .av{width:30px;height:30px;font-size:11px}.msg.owner{grid-template-columns:1fr 30px}.msg .body{padding:13px 15px;font-size:14px}
 .cbox textarea{font-size:16px}.cbar .hint{display:none}
 /* the office card */
 #stage{right:12px;left:12px;bottom:auto;top:calc(var(--hdr) + 2px);width:auto;height:var(--card-h);border-radius:var(--r);z-index:5;display:none}
 body[data-view=tasks] #stage{display:block}
 body.officefull #stage{display:block;left:0;right:0;top:var(--hdr);height:calc(100% - var(--hdr));border-radius:0}
 .pipbar{padding:10px 10px 10px 12px;font-size:12px;background:linear-gradient(rgba(10,20,18,.55),transparent 80%)}
 .pipbar b{display:inline-flex;align-items:center;gap:6px;background:rgba(20,30,28,.62);backdrop-filter:blur(8px);border-radius:999px;padding:5px 10px 5px 8px}.pipbar b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(201,219,110,.25);animation:blink 1.6s infinite}
 .pipbar #pipstat{background:rgba(20,30,28,.62);backdrop-filter:blur(8px);border-radius:999px;padding:5px 10px;font-family:var(--mono);font-size:11.5px}.pipbar #pipstat:empty{display:none}
 .pipbar .ib{width:34px;height:34px;background:rgba(20,30,28,.62);backdrop-filter:blur(8px)}
 .pipcap{display:flex;padding:10px 10px 10px;background:linear-gradient(transparent,rgba(10,20,18,.55))}.pipcap .lv{display:none}.crew{margin-left:0;width:100%}
 .ct{max-width:62%}.ct:first-child{flex:1 1 auto;max-width:100%}
 /* floating controls */
 .fab{display:grid;place-items:center;position:fixed;right:16px;bottom:96px;width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:0;box-shadow:var(--shadow2);z-index:6}
 .tabbar{display:flex;position:fixed;left:50%;transform:translateX(-50%);bottom:max(14px,env(safe-area-inset-bottom));height:64px;background:var(--ink);border-radius:999px;padding:0 8px;z-index:8;box-shadow:var(--shadow2);gap:0;align-items:center}
 .tabbar div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 10.5px var(--font);letter-spacing:.01em;color:var(--ink-text);opacity:.6;cursor:pointer;width:min(66px,calc((100vw - 40px)/5));height:56px;border-radius:999px;-webkit-tap-highlight-color:transparent}
 .tabbar div i{width:40px;height:28px;border-radius:999px;display:grid;place-items:center;transition:background .18s,color .18s}
 .tabbar div.on{opacity:1}.tabbar div.on i{background:var(--accent);color:var(--accent-ink)}
 .tabbar svg{width:21px;height:21px}
 body.officefull .tabbar{display:flex}body.officefull .sbar{padding:10px 12px}body.officefull .timebox{display:none}
 #taskModal{align-items:flex-end;padding:0}.box.nt{width:100%;border-radius:28px 28px 0 0;max-height:94dvh;overflow:auto;padding-bottom:env(safe-area-inset-bottom)}.nt-grid{grid-template-columns:1fr}.nt-foot{flex-direction:column;align-items:stretch}.nt-hint{max-width:none}.nt-actions{display:grid;grid-template-columns:1fr 2fr}.nt-btn{justify-content:center;height:48px}.nt-ta textarea{min-height:112px;font-size:16px}
}
@media (max-width:900px) and (max-height:700px){:root{--card-h:150px}}
@media (max-width:1180px) and (min-width:901px){:root{--side:290px}#stage{width:320px;height:190px}}
@media (min-width:901px){body.pip .thread{padding-bottom:380px}}  /* the last messages scroll above the office preview */

/* in-app dialog (confirm / notice) */
.box.dlg{width:min(440px,100%);padding:26px 26px 22px;border-radius:28px;text-align:left}
.dlg-ico{width:46px;height:46px;border-radius:14px;background:var(--accent2);color:var(--accent-ink);display:grid;place-items:center;margin-bottom:14px}.dlg-ico svg{width:22px;height:22px}
.box.dlg.danger .dlg-ico{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.box.dlg h3{margin:0 0 6px;font-size:20px;letter-spacing:-.02em;line-height:1.2}.box.dlg p{margin:0;color:var(--muted);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.dlg-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}.dlg-actions .nt-btn{min-width:110px;justify-content:center}
.nt-btn.danger{background:var(--bad);color:#fff}.nt-btn.danger:hover{filter:brightness(1.06)}
#dlg{z-index:40}
@media (max-width:900px){#dlg{align-items:flex-end;padding:0}.box.dlg{width:100%;border-radius:28px 28px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom))}.dlg-actions{flex-direction:column-reverse}.dlg-actions .nt-btn{width:100%;height:48px}}

/* files attached to a task (the agent's deliverables) */
.files{max-width:980px;margin:6px 0 10px}.files .fh{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:6px 0}
.files .fl{display:flex;flex-wrap:wrap;gap:8px}
.files .file{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:7px 12px 7px 7px;text-decoration:none;color:inherit;box-shadow:var(--shadow);max-width:100%}
.files .file:hover{border-color:var(--accent)}
.files .fi{font:700 10px var(--mono);letter-spacing:.04em;color:#fff;background:#4a6b8a;border-radius:8px;padding:7px 0;width:40px;text-align:center;flex:0 0 40px}
.files .fi.pdf{background:#c0392b}.files .fi.xlsx,.files .fi.xls,.files .fi.csv{background:#1e7d4a}.files .fi.docx,.files .fi.doc{background:#2b5fa8}
.files .fi.png,.files .fi.jpg,.files .fi.jpeg,.files .fi.webp,.files .fi.gif,.files .fi.svg{background:#8a6fb5}.files .fi.pptx{background:#c75b12}.files .fi.md,.files .fi.txt,.files .fi.json{background:#5e6b73}
.files .fn{font-size:13.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}.files .fs{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.files .thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.files .thumbs img{height:150px;max-width:100%;border-radius:10px;border:1px solid var(--line);object-fit:cover;background:var(--card)}
.row .nf{font-weight:700}
.md a.fref{text-decoration-style:dotted}
@media (max-width:900px){.files .fn{max-width:190px}.files .thumbs img{height:110px}}