:root{--font:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;--nav-h:76px;--top-h:60px;
 --bg:#24160d;--panel:#3a2515;--panel2:#4b3220;--line:#80582f;--line2:#a67a45;--text:#fdf0de;--muted:#d1b08a;--accent:#f4ad42;--accent-text:#2a1a0e;--danger:#e5503f;--ok:#7fcf4a;
 --floorA:#d09250;--floorB:#c28444;--wall:#ecd8b6;--wall2:#d6bd93;--wood:#8a5a30;--wood2:#6b4322;--shade:rgba(40,16,0,0);--glow:rgba(255,230,160,.22);--desk:#a8703a;--desk2:#7c4f26;--rug:#b79b78}
[data-theme=slate]{--bg:#0a1220;--panel:#111e36;--panel2:#182a4a;--line:#2c4b82;--line2:#4573c4;--text:#e8f0ff;--muted:#8fa8d2;--accent:#56a8ff;--accent-text:#04132b;
 --floorA:#6a4d36;--floorB:#5e4430;--wall:#27365a;--wall2:#1d2a47;--wood:#5a3d27;--wood2:#3f2a1a;--shade:rgba(5,10,40,.42);--glow:rgba(255,200,110,.0);--desk:#7a5232;--desk2:#573820;--rug:#4a5877}
[data-theme=paper]{--bg:#f1e9d7;--panel:#fffaf0;--panel2:#f6eddb;--line:#d6c6a0;--line2:#b79d62;--text:#3b3023;--muted:#8d7c5f;--accent:#d9802a;--accent-text:#fff;--danger:#d24433;--ok:#4f9a2a;
 --floorA:#ead9b2;--wall:#f8f0dc;--wall2:#e9dcbc;--wood:#c79a63;--wood2:#a87b45;--shade:rgba(255,250,235,.12);--glow:rgba(255,255,255,.0);--desk:#d2a46c;--desk2:#b3834c;--rug:#d7c7a3}
[data-theme=paper]{--floorB:#e1cfa4}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
#app{position:relative;max-width:430px;height:100dvh;margin:0 auto;display:flex;flex-direction:column;background:var(--bg)}
#top{height:var(--top-h);flex:none;display:flex;gap:8px;padding:10px 12px 8px;align-items:stretch}
.pill{flex:1;background:var(--panel);border:2px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;padding:0 8px;white-space:nowrap}
.pill.wide{flex:1.5}.pill small{font-size:12px;line-height:1.25;text-align:left;font-weight:600}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px}.dot.g{background:var(--ok)}.dot.r{background:var(--danger)}
#main{flex:1;min-height:0;position:relative}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden}
.screen[hidden]{display:none}
#nav{flex:none;height:var(--nav-h);display:flex;gap:8px;padding:8px 12px 14px;background:var(--bg)}
#nav button{flex:1;position:relative;background:var(--panel);border:2px solid var(--line);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:13px;font-weight:700;color:var(--muted)}
#nav button svg{width:24px;height:24px;fill:currentColor}
#nav button.on{color:var(--accent);border-color:var(--accent);background:var(--panel2)}
#nav-badge{position:absolute;top:5px;right:12px;min-width:17px;height:17px;border-radius:9px;background:var(--danger);color:#fff;font-size:11px;font-style:normal;display:flex;align-items:center;justify-content:center;padding:0 4px}
#nav-badge:empty{display:none}
/* office scene */
#s-office{overflow:hidden}
.scene{position:absolute;inset:0 8px;border:3px solid var(--wood2);border-radius:10px;overflow:hidden;background:
 repeating-linear-gradient(90deg,transparent 0 46px,rgba(0,0,0,.10) 46px 47px),
 repeating-linear-gradient(0deg,var(--floorA) 0 22px,var(--floorB) 22px 44px);touch-action:manipulation}
.scene::after{content:"";position:absolute;inset:0;background:var(--shade);pointer-events:none;z-index:50}
.scene::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 25%,var(--glow),transparent 60%);pointer-events:none;z-index:49}
.wall{position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(var(--wall),var(--wall2));border-bottom:6px solid var(--wood2);pointer-events:none}
.obj{position:absolute;pointer-events:none}
.board{pointer-events:auto;cursor:pointer;left:25%;top:2.5%;width:44%;height:16%;background:#a06a35;border:4px solid var(--wood2);border-radius:5px;display:flex;flex-direction:column;align-items:center;padding-top:4px}
.board b{font-size:10px;letter-spacing:.5px;background:#e6c58c;color:#4a2c10;padding:1px 8px;border-radius:3px;border:2px solid var(--wood2);margin-top:-12px}
.board .notes{display:flex;gap:6px;margin-top:6px}.board .notes i{width:18px;height:24px;background:#fbf6e8;border-radius:2px;position:relative;box-shadow:0 1px 0 rgba(0,0,0,.3)}
.board .notes i::before{content:"";position:absolute;left:6px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--c)}
.board .notes i::after{content:"";position:absolute;left:3px;top:8px;width:12px;height:8px;background:repeating-linear-gradient(#bbb 0 1px,transparent 1px 3px)}
.window{left:9%;top:3%;width:11%;height:13%;background:linear-gradient(#9fd6f5,#d8f0ff);border:4px solid var(--wood2);border-radius:3px}
.shelf{left:1%;top:3%;width:8%;height:17%;background:#8a5a30;border:3px solid var(--wood2);border-radius:3px;background-image:repeating-linear-gradient(#8a5a30 0 8px,#3a2a60 8px 14px)}
.cooler{pointer-events:auto;cursor:pointer;left:73%;top:3.5%;width:8%;height:15%}
.cooler i{position:absolute;left:12%;right:12%;top:0;height:50%;background:linear-gradient(90deg,#8cc8f5,#4a9be0);border-radius:8px 8px 3px 3px;border:2px solid #2e6aa8}
.cooler u{position:absolute;left:5%;right:5%;top:48%;bottom:0;background:#f1f3f7;border:2px solid #9aa4b4;border-radius:3px}
.map{left:84%;top:3%;width:15%;height:12%;background:linear-gradient(135deg,#5fa7d6,#3b8fc0);border:4px solid var(--wood);border-radius:3px}
.map::after{content:"";position:absolute;left:25%;top:25%;width:50%;height:50%;background:#5fa24a;border-radius:40% 55% 45% 60%}
.table{left:72%;top:14.5%;width:20%;height:5%;background:var(--desk);border:2px solid var(--desk2);border-radius:3px}
.expand{left:71%;top:28%;width:26%;height:19%;border:2px dashed var(--line2);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:10px;line-height:1.35;color:var(--text);background:rgba(0,0,0,.12);font-weight:700;letter-spacing:.4px}
.expand span{font-weight:500;opacity:.85;letter-spacing:0}
.office-room{left:0;top:25%;width:46%;height:21%;background:rgba(60,30,10,.35);border:3px solid var(--wood2);border-left:none;border-radius:0 8px 8px 0;box-shadow:inset 0 0 20px rgba(0,0,0,.25)}
.office-room .lbl{position:absolute;left:8px;top:-12px;background:var(--panel);border:2px solid var(--wood2);border-radius:6px;font-size:10px;font-weight:700;padding:2px 8px;color:var(--text)}
.desk{background:var(--desk);border:3px solid var(--desk2);border-radius:5px;box-shadow:0 5px 0 var(--desk2),0 8px 8px rgba(0,0,0,.2)}
.rug{background:var(--rug);border:2px solid rgba(0,0,0,.18);border-radius:6px;opacity:.75}
.laptop{background:#c9ccd6;border:2px solid #555;border-radius:2px}
.door{left:37%;top:92%;width:26%;height:8%;background:#e9dfc6;border:3px solid var(--wood2)}
.door i{position:absolute;inset:5px 14%;background:#2f4b8f;border-radius:3px}
.couch{left:1.5%;top:88%;width:15%;height:9%;background:#2f4b8f;border:3px solid #1c2f5e;border-radius:6px}
.agent{position:absolute;z-index:10;width:54px;transform:translate(-50%,-86%);transition:left 2.2s ease-in-out,top 2.2s ease-in-out;background:none;border:0;padding:0;cursor:pointer}
.agent .egg,.scott .egg{width:100%;display:block;filter:drop-shadow(0 1px 0 rgba(0,0,0,.2))}
.agent.flip .egg{transform:scaleX(-1)}
.agent.bob .egg{animation:bob .6s ease-in-out infinite}
.tag{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:1px;font-size:10px;font-weight:700;background:rgba(30,16,8,.78);color:#fff;border-radius:6px;padding:0 6px;white-space:nowrap;line-height:15px}
.agent.sel .egg{filter:drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 2px var(--accent))}
.scott{position:absolute;z-index:11;width:38px;transform:translate(-50%,-90%);transition-property:left,top;transition-timing-function:linear;pointer-events:none}
.scott.walk .egg{animation:bob .38s ease-in-out infinite}.scott.flip .egg{transform:scaleX(-1)}
.scott .tag{background:rgba(20,80,40,.85)}
.bubble{position:absolute;z-index:20;background:#fff;color:#3a2a20;border:2px solid #3a2a20;border-radius:10px;font-size:11px;font-weight:700;padding:3px 8px;transform:translate(-50%,-100%);pointer-events:none;white-space:nowrap}
@keyframes bob{50%{transform:translateY(-3px)}}
.agent.flip.bob .egg{animation:bobf .6s ease-in-out infinite}@keyframes bobf{0%,100%{transform:scaleX(-1)}50%{transform:scaleX(-1) translateY(-3px)}}
.scott.flip.walk .egg{animation:bobf .38s ease-in-out infinite}
.hint{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);z-index:30;background:rgba(30,16,8,.7);color:#fff;font-size:11px;padding:3px 10px;border-radius:10px;pointer-events:none;white-space:nowrap}
/* popovers & sheets */
#overlay{position:absolute;inset:0;pointer-events:none;z-index:100}
#overlay>*{pointer-events:auto}
.scrim{position:absolute;inset:0;background:rgba(10,5,0,.45)}
.sheet{position:absolute;left:10px;right:10px;bottom:calc(var(--nav-h) + 8px);background:var(--panel);border:2px solid var(--line2);border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.45);animation:up .18s ease-out}
@keyframes up{from{transform:translateY(20px);opacity:0}}
.card-head{display:flex;gap:14px;align-items:center}
.avatar{width:72px;height:72px;border-radius:14px;border:2px solid var(--line);overflow:hidden;flex:none;display:flex;align-items:flex-end;justify-content:center}
.avatar .egg{width:100%}.avatar.sm{width:44px;height:44px;border-radius:11px}.avatar.lg{width:120px;height:120px;border-radius:24px}
.h-name{font-size:20px;font-weight:800}.h-sub{font-size:13px;color:var(--muted);margin-top:2px}
.bar{height:10px;border-radius:6px;background:rgba(0,0,0,.28);overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;background:var(--accent);border-radius:6px}
.row{display:flex;align-items:center;gap:10px}
.btns{display:flex;gap:8px;margin-top:14px}
.btn{flex:1;min-height:44px;border-radius:12px;border:2px solid var(--line);background:var(--panel2);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn svg{width:18px;height:18px;fill:currentColor}
.full{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.bar-top{flex:none;display:flex;align-items:center;gap:10px;padding:14px 14px 10px;border-bottom:2px solid var(--line)}
.back{width:42px;height:42px;border-radius:12px;border:2px solid var(--line);background:var(--panel);font-size:20px;font-weight:700}
.grow{flex:1;min-width:0}
/* pages */
.page{padding:6px 14px 24px}
.page h1{font-size:30px;margin:6px 2px 4px;font-weight:800;letter-spacing:-.3px}
.page .sub{color:var(--muted);margin:0 2px 14px;font-size:15px}
.seg{display:flex;background:var(--panel);border:2px solid var(--line);border-radius:13px;padding:3px;gap:3px;margin-bottom:14px}
.seg button{flex:1;border:0;background:none;padding:10px 6px;border-radius:10px;font-weight:700;font-size:14px;color:var(--muted)}
.seg button.on{background:var(--accent);color:var(--accent-text)}
.panel{background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:14px;margin-bottom:14px}
.q .meta{display:flex;justify-content:space-between;align-items:baseline}.q .who{font-weight:800;font-size:16px;color:var(--accent)}.q .t{font-size:12px;color:var(--muted)}
.q .proj{font-size:13px;color:var(--muted);margin-top:1px}.q .text{font-size:19px;font-weight:700;margin:8px 0 10px}
.q .opts{display:flex;gap:8px}.q .opts button{flex:1;min-height:46px;border-radius:12px;border:2px solid var(--line);background:var(--panel2);font-weight:700;font-size:14px;line-height:1.15;padding:4px 6px}
.q .opts button b{display:block;font-size:11px;color:var(--accent)}
.q .opts button:first-child{border-color:var(--accent)}
.q.done{opacity:.8}.q .ans{color:var(--ok);font-weight:700;font-size:15px;margin-top:6px}
.q input{flex:1;min-height:44px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--text);padding:0 12px;font:inherit;font-size:16px}
.list-row{display:flex;gap:12px;align-items:center;padding:12px;background:var(--panel);border:2px solid var(--line);border-radius:16px;margin-bottom:10px;width:100%;text-align:left}
.list-row .l1{font-weight:800;font-size:16px}.list-row .l2{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread{background:var(--danger);color:#fff;border-radius:10px;font-size:12px;min-width:20px;text-align:center;padding:1px 6px;font-weight:700}
/* chat thread */
.msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:80%;padding:10px 14px;border-radius:18px;font-size:16px;line-height:1.35}
.msg.a{align-self:flex-start;background:var(--panel2);border:2px solid var(--line);border-bottom-left-radius:6px}
.msg.u{align-self:flex-end;background:var(--accent);color:var(--accent-text);border-bottom-right-radius:6px;font-weight:600}
.msg.typing{color:var(--muted);letter-spacing:3px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:8px 14px 4px;flex:none;scrollbar-width:none}
.chips button{flex:none;border:2px solid var(--line2);background:var(--panel);border-radius:18px;padding:8px 14px;font-weight:700;font-size:14px}
.composer{display:flex;gap:8px;padding:8px 14px 18px;flex:none}
.composer input{flex:1;min-height:46px;border-radius:23px;border:2px solid var(--line);background:var(--panel);color:var(--text);padding:0 16px;font:inherit;font-size:16px}
.composer button{width:46px;height:46px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-text);font-weight:800;font-size:20px}
/* call */
.call{align-items:center;text-align:center;padding:60px 24px 40px;background:radial-gradient(circle at 50% 30%,var(--panel2),var(--bg) 70%)}
.call .ring{position:relative;margin:22px 0 30px}
.call .ring::before,.call .ring::after{content:"";position:absolute;inset:-14px;border-radius:32px;border:2px solid var(--accent);opacity:.5;animation:pulse 2s infinite}
.call .ring::after{animation-delay:1s}@keyframes pulse{to{transform:scale(1.25);opacity:0}}
.call.muted .ring::before,.call.muted .ring::after{animation:none;opacity:.15}
.caps{margin-top:26px;width:100%;min-height:130px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end}
.cap{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:9px 12px;font-size:15px;text-align:left}
.cap b{color:var(--accent);margin-right:4px}.cap.old{opacity:.5}
.call-btns{margin-top:auto;display:flex;gap:30px;align-items:center}
.round{width:68px;height:68px;border-radius:50%;border:2px solid var(--line);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;font-weight:700;gap:2px}
.round svg{width:26px;height:26px;fill:currentColor}.round.on{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.round.hang{background:var(--danger);border-color:var(--danger);color:#fff;width:76px;height:76px}
/* jobs */
.chipbar{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
.chipbar button{flex:1 0 auto;min-height:40px;padding:0 10px;border-radius:12px;border:2px solid var(--line);background:var(--panel);font-weight:700;font-size:14px}
.chipbar button.on{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.grp{background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:10px 10px 4px;margin-bottom:14px}
.grp>h3{margin:2px 4px 10px;display:flex;justify-content:space-between;font-size:18px}.grp>h3 small{color:var(--muted);font-weight:600;font-size:14px}
.job{display:flex;gap:10px;align-items:center;background:var(--panel2);border:2px solid var(--line);border-radius:14px;padding:10px;margin-bottom:10px;position:relative;user-select:none}
.job.drag{opacity:.9;border-color:var(--accent);box-shadow:0 8px 20px rgba(0,0,0,.45);z-index:5}
.grip{touch-action:none;width:28px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:20px;letter-spacing:-3px;flex:none;cursor:grab;line-height:.5}
.job .body{flex:1;min-width:0;cursor:pointer;background:none;border:0;text-align:left;padding:0;color:inherit}
.job .pj{font-weight:800;font-size:16px}.job .tt{color:var(--muted);font-size:14px;margin:1px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job .pc{font-size:12px;color:var(--muted);font-weight:700;width:36px;text-align:right}
.job .chev{color:var(--muted);font-size:20px}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.col{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:8px 6px;min-height:200px}
.col>h3{margin:2px 4px 8px;font-size:14px;display:flex;justify-content:space-between}.col>h3 small{color:var(--muted)}
.col .job{flex-direction:column;align-items:stretch;gap:6px;padding:8px}
.col .job .top{display:flex;align-items:center;gap:4px}.col .job .grip{width:20px;height:26px;font-size:15px}
.col .job .pj{font-size:13px}.col .job .tt{font-size:12px;white-space:normal;margin:0 0 4px}
.col .avatar.sm{width:28px;height:28px;border-radius:8px}
.dz{min-height:40px}
.act{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.me-row{display:flex;gap:10px;margin-bottom:14px}
.theme{flex:1;border:2px solid var(--line);border-radius:14px;padding:8px;background:var(--panel);font-weight:700;font-size:13px}
.theme.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.theme i{display:block;height:46px;border-radius:8px;margin-bottom:6px;border:1px solid rgba(0,0,0,.25)}
.stats{display:flex;gap:8px;margin:14px 0}.stat{flex:1;background:var(--panel2);border:2px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center}
.stat b{display:block;font-size:19px}.stat span{font-size:12px;color:var(--muted)}
.rec{padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}.rec:last-child{border:0}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.team button{background:none;border:0;font-size:12px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:5px}
.team .avatar{width:100%;height:auto;aspect-ratio:1}