/* ---------- bundled fonts: Inter for UI, Newsreader for Paper display ----------
   Self-hosted WOFF2 (latin subsets, few weights, ~120KB total) so glyphs
   render identically on every device with zero network font fetches. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/newsreader-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/newsreader-latin-500-normal.woff2") format("woff2")}

/* ---------- design tokens ----------
   The whole UI renders through these tokens. Themes swap token sets via
   [data-theme]; density and font size scale via [data-density]/[data-font].
   "serious" is the default: restrained, near-monochrome, one quiet accent. */
:root{
  --bg:#f2efe7; --bg2:#e9e4d7; --panel:#fbf9f3; --panel2:#efeadd; --line:#d9d1bd;
  --ink:#211c13; --dim:#6f6552; --dim2:#a89e86;
  --acc:#bc4518; --acc2:#476a58; --warn:#a5761b; --bad:#a83a28; --ok:#337a4c;
  --r:8px; --pad:22px; --fs:15px;
  --font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.2,.7,.3,1); --dur:.18s;
}
[data-theme="serious"]{
  --bg:#f2efe7; --bg2:#e9e4d7; --panel:#fbf9f3; --panel2:#efeadd; --line:#d9d1bd;
  --ink:#211c13; --dim:#6f6552; --dim2:#a89e86;
  --acc:#bc4518; --acc2:#476a58; --warn:#a5761b; --bad:#a83a28; --ok:#337a4c;
  --r:8px;
}
[data-theme="ember"]{
  --bg:#100d0c; --bg2:#161110; --panel:#1c1615; --panel2:#241c1a; --line:#322723;
  --ink:#efe7e2; --dim:#a3968d; --dim2:#6b5f58;
  --acc:#e08a5a; --acc2:#c9a15a; --warn:#e0b34b; --bad:#e0756a; --ok:#63bd8a;
}
[data-theme="violet"]{ /* the original Open Muse palette */
  --bg:#0b0d12; --bg2:#10141d; --panel:#141926; --panel2:#1a2132; --line:#232b3f;
  --ink:#e8ecf4; --dim:#8b94a9; --dim2:#5b6478;
  --acc:#7c6cf5; --acc2:#4ec9b0; --warn:#e8b34b; --bad:#e26d6d; --ok:#56c98d;
}
[data-theme="paper"]{
  --bg:#f5f4f1; --bg2:#eceae6; --panel:#ffffff; --panel2:#f0eeea; --line:#dcd8d2;
  --ink:#1c1e22; --dim:#5d6470; --dim2:#8b919c;
  --acc:#4a5578; --acc2:#3f7a6d; --warn:#a37b1e; --bad:#b04438; --ok:#1e8a56;
}
[data-theme="paper"] .brand h1,[data-theme="paper"] .viewhead h2{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em}
[data-density="compact"]{ --pad:14px; --r:10px; }
[data-font="s"]{ --fs:13.5px; }
[data-font="l"]{ --fs:16.5px; }
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:var(--fs)/1.55 var(--font-ui);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:10px 12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#2a3348;border-radius:8px}

/* ---------- layout ---------- */
#app{display:grid;grid-template-columns:280px 1fr 360px;grid-template-rows:100vh;height:100vh}
aside.rail{background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
aside.dock{background:var(--bg2);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
main{display:flex;flex-direction:column;min-width:0;min-height:0;background:radial-gradient(1200px 500px at 60% -10%,#151a2b 0%,var(--bg) 55%)}
.brand{padding:18px 18px 14px;border-bottom:1px solid var(--line)}
.brand h1{font-size:19px;letter-spacing:.2px;display:flex;align-items:center;gap:9px}
.brand h1 .dot{width:11px;height:11px;border-radius:50%;background:conic-gradient(var(--acc),var(--acc2),var(--acc));box-shadow:0 0 14px #7c6cf588}
.brand p{color:var(--dim);font-size:12px;margin-top:3px}
.rail nav{padding:10px;display:flex;flex-direction:column;gap:2px}
.navbtn{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;color:var(--dim);font-size:14px;text-align:left;width:100%}
.navbtn:hover{background:var(--panel);color:var(--ink)}
.navbtn.on{background:var(--panel2);color:var(--ink)}
.navbtn svg{width:16px;height:16px;flex:none}
.rail .spacer{flex:1}
.vmchip{margin:12px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.vmchip .t{font-size:12px;color:var(--dim);display:flex;justify-content:space-between;align-items:center}
.vmchip .st{font-size:13px;margin-top:5px;display:flex;align-items:center;gap:7px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--dim)}
.pill.ok{color:var(--ok);border-color:#2c4d3d}.pill.warn{color:var(--warn);border-color:#4d4229}.pill.bad{color:var(--bad);border-color:#4d2c2c}
.pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------- views ---------- */
.view{display:none;flex-direction:column;min-height:0;flex:1}
.view.on{display:flex}
.viewhead{padding:16px var(--pad) 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.viewhead h2{font-size:16px}
.viewhead .sub{color:var(--dim);font-size:12.5px}
.viewbody{flex:1;overflow-y:auto;padding:18px var(--pad);min-height:0}

/* ---------- chat ---------- */
#chatlog{flex:1;overflow-y:auto;padding:var(--pad);display:flex;flex-direction:column;gap:14px;min-height:0}
.msg{max-width:72%;padding:11px 14px;border-radius:16px;white-space:pre-wrap;word-break:break-word}
.msg.user{align-self:flex-end;background:var(--acc);color:#fff;border-bottom-right-radius:5px}
.msg.muse{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg.sys{align-self:center;background:none;border:1px dashed var(--line);color:var(--dim);font-size:12.5px;max-width:88%;text-align:center}
.msg .meta{font-size:11px;color:var(--dim2);margin-top:6px}
.msg.muse .body p{margin:.35em 0}
.card{align-self:stretch;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;max-width:88%}
.card h4{font-size:13.5px;display:flex;align-items:center;gap:8px}
.card .small{font-size:12px;color:var(--dim);margin-top:4px}
.card .row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.btn{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:7px 13px;font-size:13px}
.btn:hover{border-color:var(--acc)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.okb{border-color:#2c4d3d;color:var(--ok)}
.btn.badb{border-color:#4d2c2c;color:var(--bad)}
.btn:disabled{opacity:.45;cursor:default}
#composer{border-top:1px solid var(--line);padding:14px var(--pad);display:flex;gap:10px;align-items:flex-end}
#composer textarea{flex:1;resize:none;min-height:46px;max-height:160px}
#micbtn{min-width:46px;min-height:46px;align-self:stretch}
#micbtn.listening{color:#fff;background:var(--acc,#bc4518);animation:micpulse 1.6s ease-in-out infinite}
@keyframes micpulse{0%,100%{opacity:1}50%{opacity:.65}}
#sendbtn{background:var(--acc);border-radius:6px;padding:11px 16px;color:#fff;font-weight:600}
#sendbtn:disabled{opacity:.4}
.typing{display:inline-flex;gap:4px;padding:4px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--dim);animation:b 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes b{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* ---------- goals ---------- */
.goalgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.goal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px;display:flex;flex-direction:column;gap:9px}
.goal h3{font-size:14.5px}
.goal .steps{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.step{display:flex;gap:9px;align-items:flex-start;font-size:13px;padding:7px 9px;border-radius:9px;background:var(--bg2);border:1px solid var(--line)}
.step .ic{width:17px;text-align:center;flex:none;margin-top:1px}
.step.done{opacity:.62}.step.done .st-t{text-decoration:line-through}
.step[data-reopen]{cursor:pointer}
.step[data-reopen]:hover{border-color:var(--acc)}
.step .tag{margin-left:auto;font-size:10px;color:var(--dim2);border:1px solid var(--line);border-radius:99px;padding:1px 7px;flex:none}
.progbar{height:6px;border-radius:99px;background:var(--bg);overflow:hidden}
.progbar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:99px}

/* ---------- memory ---------- */
.memitem{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:9px}
.memitem .txt{flex:1;font-size:13.5px}
.memchip{display:inline-block;font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;padding:1px 6px;border-radius:6px;border:1px solid var(--line);color:var(--dim2);margin-right:7px;vertical-align:1px}
.memitem .when{font-size:11px;color:var(--dim2);margin-top:3px}
.iconbtn{color:var(--dim);padding:4px;border-radius:8px}
.iconbtn:hover{color:var(--bad);background:var(--panel2)}

/* ---------- audit ---------- */
#auditlog{display:flex;flex-direction:column;gap:0}
.auline{display:flex;gap:12px;padding:9px 4px;border-bottom:1px solid #1a2132;font-size:13px}
.auline .t{color:var(--dim2);font-size:11.5px;white-space:nowrap;padding-top:2px;font-family:ui-monospace,monospace}
.auline .k{flex:none;font-size:10px;border:1px solid var(--line);border-radius:99px;padding:2px 8px;color:var(--dim);height:fit-content}

/* ---------- connectors ---------- */
.conn{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-bottom:11px}
.conn .glyph{width:38px;height:38px;border-radius:11px;background:var(--panel2);display:grid;place-items:center;font-size:18px;flex:none}
.conn .inf{flex:1}.conn .inf b{font-size:14px}.conn .inf p{font-size:12px;color:var(--dim)}
.seg{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{padding:6px 11px;font-size:12px;color:var(--dim);border-left:1px solid var(--line)}
.seg button:first-child{border-left:none}
.seg button.on{background:var(--acc);color:#fff}

/* ---------- dock ---------- */
.dock header{padding:15px 16px 11px;border-bottom:1px solid var(--line)}
.dock header h3{font-size:13.5px;display:flex;align-items:center;gap:8px}
.dock section{padding:13px 16px;border-bottom:1px solid var(--line);overflow-y:auto}
.dock .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--dim2);margin-bottom:8px}
.kv{display:grid;grid-template-columns:106px 1fr;font-size:12.5px;padding:3.5px 0;color:var(--dim);align-items:baseline;gap:8px}
.kv span{white-space:nowrap}
.kv b{color:var(--ink);font-weight:500;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.kv b.muted{color:var(--dim2);font-weight:400}
.kv b.hot{color:var(--warn)}
#st-dot,#st-dot2{width:9px;height:9px;border-radius:50%;background:var(--dim2);display:inline-block;flex:none;transition:background .3s}
body.agent-busy #st-dot,body.agent-busy #st-dot2{background:var(--acc2);animation:st-pulse 1.5s var(--ease) infinite}
@keyframes st-pulse{50%{opacity:.3}}
.dock header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.docktoggle{font-size:16px;color:var(--dim2);padding:1px 7px;border-radius:7px;line-height:1.2}
.docktoggle:hover{color:var(--ink);background:var(--panel2)}
.dock .live{background:color-mix(in srgb,var(--acc2) 7%,transparent)}
.livestep{font-size:12.5px;font-weight:500;line-height:1.45}
.livetool{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:12px;color:var(--dim)}
.livetool #st-toolname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spin{width:10px;height:10px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--acc2);animation:st-spin .8s linear infinite;flex:none}
@keyframes st-spin{to{transform:rotate(360deg)}}
#st-team{margin-top:10px;flex-direction:column;gap:6px}
#st-team:not([hidden]){display:flex}
.teamrow{display:flex;align-items:center;gap:7px;font-size:11.5px;line-height:1.3}
.teamrow .tic{width:14px;display:flex;justify-content:center;flex:none;color:var(--dim2)}
.teamrow .tic.done{color:var(--ok)}
.teamrow .tic.failed{color:var(--bad)}
.teamrow .tic.running{color:var(--acc2)}
.teamrow .tic.waiting{color:var(--dim2)}
.teamrow .trole{font-weight:600;flex:none;color:var(--ink)}
.teamrow .ttask{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
i.spin{display:inline-block}
.dock-mini{display:none;flex:1;flex-direction:column;align-items:center;padding-top:14px;gap:12px}
.minibadge{min-width:20px;height:20px;border-radius:10px;background:var(--warn);color:#0c0d10;font-size:11.5px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 5px}
body.dock-collapsed #app{grid-template-columns:280px 1fr 58px}
body.dock-collapsed .dock>section{display:none}
body.dock-collapsed .dock header{border-bottom:none;justify-content:center;padding:13px 0}
body.dock-collapsed .dock header h3{display:none}
body.dock-collapsed .dock-mini{display:flex}
@media (max-width:1180px){body.dock-collapsed #app{grid-template-columns:240px 1fr}}
.queue-item{font-size:12.5px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:7px;background:var(--panel)}
.queue-item .w{color:var(--dim2);font-size:11px;margin-top:2px}

/* ---------- modal ---------- */
#modalwrap{position:fixed;inset:0;background:#060810cc;display:none;place-items:center;z-index:50;backdrop-filter:blur(4px)}
#modalwrap.on{display:grid}
.modal{width:min(560px,92vw);max-height:86vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px}
.modal h3{font-size:16px;margin-bottom:6px}
.modal .sub{color:var(--dim);font-size:13px;margin-bottom:14px}
.field{margin-bottom:13px}.field label{display:block;font-size:12px;color:var(--dim);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%}
.modal .row{display:flex;gap:9px;justify-content:flex-end;margin-top:16px}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line);padding:10px 16px;border-radius:12px;font-size:13px;z-index:80;display:none}
.toast.on{display:block}

.empty{color:var(--dim2);font-size:13px;text-align:center;padding:34px 10px;border:1px dashed var(--line);border-radius:var(--r)}
.suggest{display:flex;gap:10px;align-items:flex-start;background:linear-gradient(135deg,#1a2132,#141926);border:1px solid #2b3450;border-radius:var(--r);padding:13px 15px;max-width:88%;align-self:flex-start}
.suggest .s-t{font-size:13.5px;flex:1}
@media (max-width:1180px){#app{grid-template-columns:240px 1fr}aside.dock{display:none}}
@media (max-width:820px){
#app{grid-template-columns:1fr}
aside.rail{display:none}
aside.rail.open{display:flex;position:fixed;left:0;top:0;bottom:0;width:min(300px,84vw);z-index:60;box-shadow:0 0 60px #000c}
#railbackdrop{position:fixed;inset:0;background:#060810aa;z-index:55;display:block}
#menubtn{display:flex!important;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px;top:calc(10px + env(safe-area-inset-top));background:transparent;border:none}
/* mobile chrome: one calm row, no stacked bars */
#mstrip{padding:5px var(--pad) 5px 64px;font-size:12px}
#modebar{flex-wrap:nowrap;gap:8px}
.modenote{display:none}
#exportchatbtn{padding:8px 12px;font-size:12px;min-height:36px;flex:none}
.msg{max-width:88%}
/* fixed hamburger must never cover the mode bar or a view title */
#modebar{padding-left:64px}
.viewhead{padding-left:64px}
.mhcard{border:1px solid var(--line);border-radius:12px;padding:12px;margin:0 0 10px;background:var(--card,#fff)}
.mhcard.on{border-color:var(--acc)}
.mhtitle{font-weight:600;font-size:14px}
.mhmeta{font-size:12px;color:var(--dim);margin-top:2px}
.mhstate{font-size:12px;margin-top:6px}
.mhrow{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.mhfit.good{color:#2e7d32}.mhfit.warn{color:#a3620b}.mhfit.bad{color:#b3331e}
.btn.sm{padding:6px 12px;font-size:12.5px;min-height:36px}
/* gen-39: permission cards stack at phone width - switch full-width row below */
.conn{flex-wrap:wrap}
.conn .seg{width:100%;margin-top:2px}
.conn .seg button{flex:1;padding:8px 6px;min-height:44px}
/* composer: stay above the keyboard, no iOS focus-zoom, safe-area aware */
#composer{padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));gap:8px}
#composer textarea{font-size:16px;min-height:48px}
#sendbtn{min-height:48px;padding:12px 18px}
/* touch targets */
.modebtn{padding:10px 16px;font-size:13px}
.btn{min-height:40px}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--acc);flex:none}
.trow input[type=text],.trow input:not([type]){min-width:140px}
.toolgrid{grid-template-columns:1fr}
.goalgrid{grid-template-columns:1fr}
.toolcard{max-width:100%}}
#railbackdrop{display:none}
#menubtn{display:none;position:fixed;top:12px;left:12px;z-index:40;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}

/* mode bar */
#modebar{display:flex;align-items:center;gap:10px;padding:8px var(--pad);border-bottom:1px solid var(--line);flex-wrap:wrap}
.modeswitch{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.modebtn{padding:6px 14px;font-size:12.5px;color:var(--dim)}
.modebtn.on{background:var(--panel2);color:var(--ink)}
.modenote{font-size:11.5px;color:var(--dim2)}
#modebar .coderonly{display:none}
#modebar.coder .coderonly{display:inline-block}
#modebar.coder{border-bottom-color:#3d3560}

/* code blocks + diffs */
.codeblock{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0;overflow:auto;font-size:12.5px;line-height:1.5;position:relative}
.codeblock[data-lang]::before{content:attr(data-lang);position:absolute;top:4px;right:10px;font-size:10px;color:var(--dim2);text-transform:uppercase}
.codeblock .dl{display:block;white-space:pre-wrap;word-break:break-word}
.codeblock .dl.add{color:var(--ok);background:#16b36414}
.codeblock .dl.del{color:var(--bad);background:#f0443814}
.codeblock .dl.hunk{color:var(--acc2)}

/* evolve */
.evobox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.evobox textarea{resize:vertical;min-height:52px}
.evo{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px;display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.evo h3{font-size:14.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.evo .why{color:var(--dim);font-size:13px}
.evo .chg{border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:12.5px}
.evo .chg b{color:var(--acc2)}
.evo .chg pre{margin-top:6px;max-height:180px;overflow:auto;background:var(--bg);border-radius:8px;padding:8px;font-size:11.5px;white-space:pre-wrap;word-break:break-word}
.evo .gates{display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.evo .gates .g{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.evo .row{display:flex;gap:8px;flex-wrap:wrap}
.evo .meta{font-size:11px;color:var(--dim2)}

/* tasks + reminders */
.taskbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin-bottom:16px;display:flex;flex-direction:column;gap:10px}
.trow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.trow input[type=text],.trow input:not([type]){flex:1;min-width:180px}
.task{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.task:last-child{border-bottom:none}
.task .txt{flex:1}
.task.done .txt{color:var(--dim2);text-decoration:line-through}
.rem{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13px;color:var(--dim)}
.rem .txt{flex:1;color:var(--ink)}

/* tools view */
.toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:8px}
.tool{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.tool h4{font-size:13.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tool .small{font-size:12px;color:var(--dim)}
.tsec{border-top:1px solid var(--line);padding:14px 0;display:flex;flex-direction:column;gap:9px}
.tsec h3{font-size:14px}
.tsec .small{font-size:12.5px;color:var(--dim)}
.skill{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.skill .txt{flex:1}
.skill .txt b{display:block;font-size:13.5px}
.skill .txt span{color:var(--dim);font-size:12px}
.agrow{padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.agrow .aghead{display:flex;align-items:center;gap:9px}
.agrow .aghead b{flex:1;min-width:0;font-size:13.5px}
.agrow .agbtns{display:flex;gap:6px;flex:none}
.agrow .agdesc{display:block;margin-top:3px;color:var(--dim);font-size:12px;line-height:1.45}
.mcp{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap}
.mcp .txt{flex:1;min-width:160px}
.mcp .txt b{display:block}
.mcp .txt span{color:var(--dim);font-size:12px}
.checkrow{cursor:pointer}

/* tool cards in chat */
.toolcard{align-self:stretch;max-width:88%;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acc2);border-radius:10px;padding:9px 13px;font-size:12.5px;color:var(--dim)}
.toolcard b{color:var(--acc2);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.toolcard .res{margin-top:4px;white-space:pre-wrap;word-break:break-word;color:var(--ink);font-size:13px}

/* studio */
.app{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:10px;flex-wrap:wrap}
.app .txt{flex:1;min-width:160px}
.app .txt b{display:block;font-size:14px}
.app .txt span{color:var(--dim);font-size:12px}
.studioframe{width:100%;height:56vh;border:1px solid var(--line);border-radius:12px;background:#fff}

/* presence */
#presence{width:11px;height:11px;border-radius:50%;background:var(--dim);transition:background .4s, box-shadow .4s}
#presence.idle{background:var(--ok);box-shadow:0 0 10px #16b36466}
#presence.thinking{background:var(--acc);box-shadow:0 0 12px #7c6cf5aa;animation:pulse 1.1s infinite}
#presence.working{background:var(--warn);box-shadow:0 0 12px #e5a13c88;animation:pulse .6s infinite}
@keyframes pulse{50%{opacity:.55}}

/* motion + micro-interactions (token-driven) */
.btn,.navbtn,.modebtn{transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:active{transform:translateY(1px)}
.view.on{animation:viewin var(--dur) var(--ease)}
@keyframes viewin{from{opacity:.4}}
.msg{animation:msgin var(--dur) var(--ease)}
@keyframes msgin{from{opacity:0;transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} }

/* theme swatches + compat list in settings */
.themerow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.swatch{width:34px;height:34px;border-radius:10px;border:2px solid var(--line);cursor:pointer;flex:none}
.swatch.on{border-color:var(--ink)}
.compat{display:flex;flex-direction:column;gap:5px;font-size:12.5px}
.compat .rowc{display:flex;gap:8px;align-items:center}

/* mobile corrections - must come last: the base rules above would otherwise
   re-override these (same specificity, later wins) */
@media (max-width:820px){
#modebar{padding-left:64px}
.modebtn{padding:10px 16px;font-size:13px}
.trow input[type=text],.trow input:not([type]){min-width:140px}}
@media (max-width:820px){#newagentname,#newagentprompt,#newautotext{flex-basis:100%}}

.suggest .s-b{display:flex;gap:8px;flex:none;align-self:center}

/* worklog + resolved approval cards + pinned memory */
.wlbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin-bottom:16px}
.wlbox .lbl{margin:0 0 8px}
.wlnow{font-size:13px;color:var(--dim);padding-bottom:10px;margin-bottom:6px;border-bottom:1px dashed var(--line)}
.card.resolved{opacity:.75;border-style:dashed}
.card.resolved h4{color:var(--dim)}
.memchip.pinned{background:#3d3560;color:#cdc4ff}
.iconbtn.on{color:var(--acc);border-color:var(--acc)}

/* mobile status strip - mirrors the dock's working state exactly when the
   dock is hidden (<=1180px). Dismissible; preference lives in settings. */
#mstrip{display:none}
@media (max-width:1180px){
#mstrip{display:flex;align-items:center;gap:8px;padding:7px var(--pad);border-bottom:1px solid var(--line);background:var(--bg2);font-size:12.5px;color:var(--dim);flex:none}
#mstrip[hidden]{display:none}
#mstrip .ms-dot{width:9px;height:9px;border-radius:50%;background:var(--dim2);flex:none;transition:background .3s}
body.agent-busy #mstrip .ms-dot{background:var(--acc2);animation:st-pulse 1.5s var(--ease) infinite}
#mstrip .ms-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mstrip .ms-badge{background:var(--acc);color:#fff;border-radius:99px;padding:1px 8px;font-size:11px;font-weight:600;flex:none}
#mstrip .ms-x{background:none;border:none;color:var(--dim);font-size:17px;line-height:1;padding:6px 8px;cursor:pointer;min-height:32px}
#mstrip .ms-x:hover{color:var(--text)}}
@media (max-width:820px){#mstrip{padding-left:64px}}


.goalmeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.steernote{font-size:11.5px;color:var(--dim);border-left:2px solid var(--acc2);padding-left:7px;min-width:0}.goal.archived{opacity:.82}.step .drag{color:var(--dim2);cursor:grab;user-select:none}.step.dragging{opacity:.35}.stepmoves{display:flex;gap:1px;margin-left:auto}.stepmoves+.tag{margin-left:2px}.stepmoves .iconbtn{font-size:11px;padding:0 3px}.duestrip{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:10px 12px;margin-bottom:13px;border:1px solid #4d4229;background:#241f14;border-radius:12px;font-size:12px}.duechip{padding:3px 8px;border:1px solid #4d4229;border-radius:99px;color:var(--warn)}.duechip.late{color:var(--bad);border-color:#4d2c2c}

/* ---------- Atelier: the default art direction ----------
   Warm paper, ink, one vermilion accent. Squared hairline construction,
   serif display type, margin-note chat. A deliberate break from the dark
   rounded dashboard template. Scoped to the serious (default) theme. */
[data-theme="serious"] ::-webkit-scrollbar-thumb{background:var(--line)}
[data-theme="serious"] ::selection{background:#bc45182e}
[data-theme="serious"] main{background:var(--bg)}
[data-theme="serious"] aside.rail{background:var(--bg2)}
[data-theme="serious"] aside.dock{background:var(--bg)}
[data-theme="serious"] .brand h1{font-family:var(--font-display);font-weight:500;font-size:23px;letter-spacing:-.01em}
[data-theme="serious"] .brand h1 .dot{width:10px;height:10px;border-radius:0;background:var(--acc);box-shadow:none;transform:rotate(45deg)}
[data-theme="serious"] .navbtn{border-radius:4px}
[data-theme="serious"] .navbtn:hover{background:var(--panel2)}
[data-theme="serious"] .navbtn.on{background:transparent;color:var(--ink);box-shadow:inset 2px 0 0 var(--acc);font-weight:500}
[data-theme="serious"] .vmchip{background:transparent;border-radius:4px}
[data-theme="serious"] .pill{border-radius:3px;text-transform:uppercase;letter-spacing:.05em;font-size:10px}
[data-theme="serious"] .viewhead h2{font-family:var(--font-display);font-weight:500;font-size:22px;letter-spacing:-.01em}
[data-theme="serious"] .btn{background:var(--panel);border-radius:4px}
[data-theme="serious"] .btn:hover{border-color:var(--ink)}
[data-theme="serious"] .btn.pri{background:var(--acc);border-color:var(--acc);color:#faf7f0}
[data-theme="serious"] #sendbtn{border-radius:4px;color:#faf7f0}
[data-theme="serious"] input,[data-theme="serious"] select,[data-theme="serious"] textarea{background:var(--panel);border-radius:4px}
[data-theme="serious"] input:focus,[data-theme="serious"] select:focus,[data-theme="serious"] textarea:focus{border-color:var(--acc)}
[data-theme="serious"] .modebtn.on{background:var(--ink);color:var(--bg)}
[data-theme="serious"] .seg button.on{background:var(--ink);color:var(--bg)}
[data-theme="serious"] .msg{border-radius:4px}
[data-theme="serious"] .msg.user{background:var(--ink);color:#f5f1e8;border-bottom-right-radius:4px}
[data-theme="serious"] .msg.muse{background:transparent;border:none;border-left:2px solid var(--line);border-radius:0;padding-left:15px}
[data-theme="serious"] .msg.sys{border:1px dashed var(--line);border-radius:4px}
[data-theme="serious"] .goal h3,[data-theme="serious"] .evo h3{font-family:var(--font-display);font-weight:500;font-size:17px}
[data-theme="serious"] .step{background:var(--bg2);border-radius:4px}
[data-theme="serious"] .progbar{background:var(--bg2);border-radius:2px;height:5px}
[data-theme="serious"] .progbar i{background:var(--acc);border-radius:2px}
[data-theme="serious"] .step .tag{border-radius:3px}
[data-theme="serious"] .memchip{border-radius:3px}
[data-theme="serious"] .auline{border-bottom-color:var(--line)}
[data-theme="serious"] .auline .k{border-radius:3px}
[data-theme="serious"] .suggest{background:var(--panel2);border-color:var(--line)}
[data-theme="serious"] .modal{border-radius:8px}
[data-theme="serious"] .toast{border-radius:4px}
[data-theme="serious"] .conn .glyph{border-radius:4px;background:var(--bg2)}
[data-theme="serious"] #modebar.coder{border-bottom-color:var(--acc)}
[data-theme="serious"] .dock .live{background:color-mix(in srgb,var(--acc) 6%,transparent)}
[data-theme="serious"] body.agent-busy #st-dot,[data-theme="serious"] body.agent-busy #st-dot2{background:var(--acc)}
[data-theme="serious"] .spin{border-top-color:var(--acc)}
[data-theme="serious"] .teamrow .tic.running{color:var(--acc)}
[data-theme="serious"] input[type=checkbox]{accent-color:var(--acc)}
[data-theme="serious"] .codeblock{background:var(--bg2)}
[data-theme="serious"] .toolcard{border-left-color:var(--acc)}
[data-theme="serious"] .toolcard b{color:var(--acc)}
[data-theme="serious"] #presence{box-shadow:none!important}
[data-theme="serious"] #presence.idle{background:var(--ok)}
[data-theme="serious"] #presence.thinking{background:var(--acc)}
[data-theme="serious"] #presence.working{background:var(--warn)}
[data-theme="serious"] .evo .chg b{color:var(--acc2)}
[data-theme="serious"] .codeblock .dl.hunk{color:var(--acc2)}
[data-theme="serious"] .swatch{border-radius:4px}


/* MiniMax Code patterns, rebuilt for the local-first Coder workspace */
.coderbench{margin:10px 20px 0;border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 92%,var(--accent) 8%);border-radius:10px;padding:10px 12px;color:var(--ink)}
#modebar.coder+.coderbench{display:block!important}
.cb-main{display:flex;align-items:stretch;gap:7px;flex-wrap:wrap}.cb-main button{font:inherit;color:inherit;background:var(--paper);border:1px solid var(--line);border-radius:7px;min-height:42px;padding:6px 11px;cursor:pointer;text-align:left}.cb-main button:hover{border-color:var(--accent)}
.cb-plan{display:grid!important;grid-template-columns:10px auto;column-gap:8px;min-width:205px}.cb-plan .cb-led{grid-row:1/3;width:8px;height:8px;border-radius:99px;background:var(--dim2);margin-top:5px}.cb-plan b,.cb-session b{font-size:12px}.cb-plan small{grid-column:2;font-size:10px;color:var(--dim)}.cb-plan.on{border-color:var(--accent);background:color-mix(in srgb,var(--paper) 86%,var(--accent) 14%)}.cb-plan.on .cb-led{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.cb-session{display:flex!important;flex-direction:column;min-width:130px}.cb-session span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}.cb-action{font-size:11px!important}.cb-context{display:grid;grid-template-columns:auto minmax(90px,1fr) auto auto;gap:8px;align-items:center;margin-top:9px;font-size:10px;color:var(--dim)}.cb-track{height:4px;background:var(--line);border-radius:9px;overflow:hidden}.cb-track i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}.cb-context b{color:var(--ink);font-size:10px}.cb-resume{border-top:1px solid var(--line);margin-top:9px;padding-top:8px;font-size:10px;line-height:1.45;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cb-bench{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px;font-size:10.5px;color:var(--dim)}.cb-bench b{color:var(--ink)}.cb-bench .btn{font-size:10px!important;padding:2px 8px!important}
.msg.checkpoint{border-left:3px solid var(--accent);background:color-mix(in srgb,var(--paper) 90%,var(--accent) 10%)}
@media(max-width:700px){.coderbench{margin:8px 10px 0;padding:9px}.cb-plan{min-width:170px;flex:1}.cb-session{min-width:105px}.cb-action{flex:1;text-align:center!important}.cb-context{grid-template-columns:auto 1fr auto}.cb-resume{white-space:normal;max-height:44px}.coderbench+.chatlog{} }

/* habits */
.habit{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.habit .txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.habit .txt b{font-size:13.5px}
.habit .txt span{font-size:12px;color:var(--dim)}
.habstreak{color:var(--acc)}
.habdots{display:flex;gap:4px;flex-shrink:0}
.habdots i{width:9px;height:9px;border-radius:2px;background:var(--line)}
.habdots i.on{background:var(--acc)}
/* markdown headings/rules inside chat and merge messages */
.mdh{font-weight:650;line-height:1.3;margin:10px 0 3px;color:var(--ink)}
.mdh1{font-size:1.22em}.mdh2{font-size:1.14em}.mdh3{font-size:1.06em}.mdh4{font-size:1em}
.mdhr{border:0;border-top:1px solid var(--line,rgba(0,0,0,.12));margin:10px 0}
.mdtable{border-collapse:collapse;margin:8px 0;font-size:.93em}
.mdtable th,.mdtable td{border:1px solid var(--line);padding:4px 9px;text-align:left}
.mdtable th{background:var(--bg2);font-weight:600}
.mdlist{margin:4px 0 4px 20px}
.mdlist li{margin:2px 0}
.mdq{border-left:3px solid var(--line);margin:6px 0;padding:2px 0 2px 10px;color:var(--dim)}
.msg .meta{position:relative}
.msgcopy{border:0;background:none;color:var(--dim2);font:inherit;font-size:10px;cursor:pointer;opacity:.55;padding:0 2px}
.msgcopy:hover{opacity:1;text-decoration:underline}
.msgretry{border:0;background:none;color:var(--dim2);font:inherit;font-size:10px;cursor:pointer;opacity:.55;padding:0 2px}
.msgretry:hover{opacity:1;text-decoration:underline}
.msg .body a{color:var(--acc,#b3541e)}
#stopbtn{background:var(--bad,#c0392b);color:#fff}

/* final mobile chrome overrides - must come after every base rule so the
   single-row modebar and borderless hamburger actually win on <=820px */
@media (max-width:820px){
#menubtn{background:transparent;border:none}
#modebar{flex-wrap:wrap}
.permswitch{order:99}
.permswitch .modebtn{flex:1;padding-left:8px;padding-right:8px}
}

/* ---------- tactile layer: physical-feeling controls in the calm shell ---------- */
.btn,.navbtn,.modebtn,.iconbtn,#sendbtn,#stopbtn,.swatch,.cb-main button{
  transition:transform .12s var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.btn:active,.navbtn:active,.modebtn:active,.iconbtn:active,#sendbtn:active,#stopbtn:active,.swatch:active,.cb-main button:active{transform:scale(.95)}
@keyframes msgin{from{opacity:0;transform:translateY(9px) scale(.985)}}
.msg{animation:msgin .38s cubic-bezier(.3,1.35,.45,1)}
.goal,.suggest,.memchip{
  transition:transform .28s cubic-bezier(.3,1.3,.4,1),border-color var(--dur) var(--ease),box-shadow .28s var(--ease)}
.goal:hover,.suggest:hover{border-color:var(--ink);box-shadow:0 3px 14px rgba(30,25,18,.08)}
.goal.tilt,.suggest.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-2px)}
@media (prefers-reduced-motion:reduce){.goal,.suggest,.memchip{transition:none}.msg{animation:none}}

/* welcome quick actions - touchable chips, quiet row */
.wactions{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 4px;align-self:flex-start}
.wchip{background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-size:12.5px;color:var(--ink);cursor:pointer;transition:transform .12s var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.wchip:hover{border-color:var(--ink)}
.wchip:active{transform:scale(.94)}

/* welcome chips align with the muse message text column (2px bar + 15px pad) */
[data-theme="serious"] .wactions{margin-left:17px}

/* chips arrive staggered, like objects set down one by one */
.wchip{animation:chipin .42s cubic-bezier(.3,1.35,.45,1) backwards}
.wchip:nth-child(2){animation-delay:.09s}
.wchip:nth-child(3){animation-delay:.18s}
@keyframes chipin{from{opacity:0;transform:translateY(8px) scale(.92)}}

/* Send leans toward the pointer (values set from JS); spring settle on leave */
#sendbtn{transition:transform .18s cubic-bezier(.3,1.4,.4,1),background var(--dur) var(--ease)}
#sendbtn:active{transform:scale(.93)}

/* goal overflow menu: quiet cards, actions tucked away until asked for */
.gmenu{position:relative;display:inline-flex}
.gmenu-pop{position:absolute;bottom:calc(100% + 8px);right:0;display:none;flex-direction:column;gap:1px;min-width:158px;padding:5px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(28,22,14,.16);z-index:60}
.gmenu-pop.open{display:flex;animation:msgin .3s cubic-bezier(.3,1.35,.45,1)}
.gmenu-pop .btn{width:100%;text-align:left;justify-content:flex-start;border:none;background:transparent;border-radius:8px;padding:9px 10px}
.gmenu-pop .btn:hover{background:var(--panel2)}
.gmenu-pop .badb{color:var(--bad)}

/* model tester: honest per-model results */
#modeltest{display:flex;flex-direction:column;gap:3px;margin-top:2px}
.mtrow{display:flex;align-items:center;gap:8px;font-size:12px;padding:5px 8px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.mtst{width:14px;text-align:center;flex:none}
.mtst.ok{color:var(--ok)}.mtst.bad{color:var(--bad)}
.mtid{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
.mtms{color:var(--dim);font-size:11px;text-align:right;flex:none}
.mtusebtn{padding:2px 10px!important;font-size:11px!important}

/* shadcn-pattern chrome pass (native, no imports): visible keyboard focus,
   44px touch targets on coarse pointers, toast slide-in, select anatomy */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 35%,transparent)}
.btn:focus-visible,.navbtn:focus-visible,.modebtn:focus-visible,.iconbtn:focus-visible,#sendbtn:focus-visible,#stopbtn:focus-visible,.wchip:focus-visible,.swatch:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (pointer:coarse){
  .btn{min-height:44px;padding:10px 15px}
  .navbtn{min-height:44px;padding:12px 11px}
  .iconbtn{min-width:44px;min-height:44px}
  #sendbtn,#stopbtn{min-height:44px}
  select,input[type="text"],input[type="password"]{min-height:44px}
  .wchip{min-height:44px;display:inline-flex;align-items:center}
  .swatch{min-width:44px;min-height:44px}
}
html[data-theme] select{padding-right:28px;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px;background-repeat:no-repeat;-webkit-appearance:none;appearance:none}
@keyframes toastin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.toast.on{animation:toastin .18s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media (pointer:coarse){
  #setmodel{min-width:0}
  #modelfilter{width:88px!important}
}

/* built-in engine panel */
.ebar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:4px}
.ebar>div{height:100%;background:var(--acc);transition:width .3s var(--ease)}

/* ---------- conversation search ---------- */
#chatsearchbar{display:flex;gap:6px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel2)}
#chatsearchbar[hidden]{display:none}
#chatsearch{flex:1;min-width:0;padding:7px 10px;font-size:13px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink)}
#chatsearch:focus{outline:2px solid var(--acc);outline-offset:-1px}
#chatsearchcount{color:var(--dim);font-size:11.5px;white-space:nowrap;min-width:34px;text-align:center}
.iconbtn{padding:6px 7px;line-height:0}
.msg.hit{outline:1.5px solid var(--acc);outline:1.5px solid color-mix(in srgb, var(--acc) 55%, transparent);outline-offset:-1.5px}
.msg.hit.cur{outline:2.5px solid var(--acc);outline-offset:-2.5px;box-shadow:0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent)}

/* ---------- reply variants (retry branches) ---------- */
.msgbranch{border:0;background:none;color:var(--dim2);font:inherit;font-size:12px;cursor:pointer;opacity:.7;padding:0 2px}
.msgbranch:hover{opacity:1;color:var(--acc)}
.branchno{font-size:10px;color:var(--dim2);margin:0 1px}

/* ---------- conversations (chat list) ---------- */
.chatlistwrap{padding:10px 10px 4px;border-top:1px solid var(--line)}
.chatlisthead{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim2);padding:0 4px 6px}
#newconvobtn{border:1px solid var(--line);background:none;color:var(--dim);font:inherit;font-size:11.5px;border-radius:7px;padding:2px 8px;cursor:pointer}
#newconvobtn:hover{color:var(--acc);border-color:var(--acc)}
#chatlist{display:flex;flex-direction:column;gap:2px;max-height:180px;overflow-y:auto}
.convo{display:flex;align-items:center;gap:4px;border-radius:8px;padding:1px 2px}
.convo.on{background:color-mix(in srgb, var(--acc) 10%, transparent)}
.convo-name{flex:1;min-width:0;text-align:left;border:0;background:none;color:var(--dim);font:inherit;font-size:12.5px;padding:5px 6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:6px}
.convo.on .convo-name{color:var(--ink);font-weight:600}
.convo-name:hover{color:var(--acc)}
.convo-n{font-size:10px;color:var(--dim2);flex:none}
.convo-pin,.convo-rn,.convo-x{border:0;background:none;color:var(--dim2);font:inherit;font-size:11px;cursor:pointer;opacity:0;padding:2px 3px;flex:none}
.convo:hover .convo-pin,.convo.on .convo-pin,.convo-pin.on{opacity:.75}
.convo-pin.on{opacity:1;color:var(--acc)}
.convo-draft{font-size:10px;color:var(--dim2);border:1px solid var(--line);border-radius:99px;padding:0 6px;margin-left:4px}
.convo:hover .convo-rn,.convo:hover .convo-x,.convo.on .convo-rn,.convo.on .convo-x{opacity:.75}
.convo-rn:hover,.convo-x:hover{opacity:1;color:var(--acc)}
.convo-x.armed{opacity:1;color:#b3331e;font-size:10.5px}
.convo-edit{flex:1;min-width:0;font:inherit;font-size:12.5px;padding:4px 6px;border:1px solid var(--acc);border-radius:6px;background:var(--panel);color:var(--ink)}
@media (hover:none){.convo-rn,.convo-x{opacity:.6}}
#chatsearchbar{flex-wrap:wrap}
#chatsearchother{width:100%;display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 4px}
#chatsearchother[hidden]{display:none}
.searchother{border:1px solid var(--line);background:var(--panel);color:var(--dim);font:inherit;font-size:11.5px;border-radius:999px;padding:3px 10px;cursor:pointer}
.searchother:hover{border-color:var(--acc);color:var(--acc)}
.searchother b{color:var(--acc)}

/* ---------- checkpoints ---------- */
.cprow{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px dashed var(--line)}
.cprow:last-child{border-bottom:0}
.cpinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cpinfo b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpacts{display:flex;gap:6px;flex:none}
.cpacts .btn{font-size:11.5px;padding:4px 10px}
#cpnewname{flex:1}
@media (max-width:520px){.cprow{flex-direction:column;align-items:stretch;gap:7px}.cpacts{justify-content:flex-end}}

/* update bar - calm, in-language, sits above the toast */
#updatebar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:90;display:flex;flex-wrap:wrap;gap:9px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:0 6px 24px rgba(33,28,19,.14);font-size:13px;color:var(--ink);max-width:min(92vw,420px)}
#updatebar[hidden]{display:none}
#updatebar span{flex:1 1 100%;margin-bottom:2px}
#updatebar .btn{padding:6px 12px;flex:1}

.mhsearchrow{display:flex;gap:8px;align-items:center}
.mhsearchrow input{flex:1;min-width:0}
.actrow{display:flex;align-items:center;gap:7px;width:100%;margin:4px 0 2px;padding:6px 9px;font:inherit;font-size:11.5px;color:var(--dim);text-align:left;background:var(--bg2);border:1px solid var(--line);border-radius:9px;cursor:pointer}
.actrow:hover{border-color:var(--acc);color:var(--txt)}
.actrow .ar-ic{flex:none;width:12px}

/* attachments (move 6) */
#atchips{display:flex;flex-wrap:wrap;gap:6px;padding:6px 10px 0}
.atchip{display:inline-flex;align-items:center;gap:6px;background:var(--panel2,#1c1c22);border:1px solid var(--line,#2a2a33);border-radius:8px;padding:3px 6px;font-size:12px;max-width:100%}
.atchip-img{width:28px;height:28px;object-fit:cover;border-radius:5px}
.atchip-name,.atchip-file{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.atchip-file::before{content:"\1F4C4 "}
.atchip-x{background:none;border:none;color:var(--dim2,#888);cursor:pointer;font-size:14px;padding:0 2px}
.atchip-x:hover{color:var(--bad,#e06c6c)}
.msgatts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.msgatt-img{max-width:220px;max-height:220px;border-radius:8px;display:block}
.msgatt-file{font-size:12px;background:var(--panel2,#1c1c22);border:1px solid var(--line,#2a2a33);border-radius:6px;padding:2px 8px}
#attachbtn{flex:none}

/* gen-37: goals viewhead action row + ghost buttons */
.viewhead .viewactions{flex-basis:100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.btn.ghost{background:transparent;color:var(--dim);font-size:12px;padding:5px 10px;min-height:36px}
.btn.ghost:hover{color:var(--ink)}
@media (max-width:820px){
.habit{flex-wrap:wrap;row-gap:8px}
.habit .txt{order:1;flex:1 1 auto}
.habit [data-habdel]{order:2;flex:none;margin-left:auto;min-width:36px;min-height:36px}
.habit .habdots{order:3;align-self:center}
.habit [data-habcheck]{order:4;flex:1 1 auto;min-height:44px}
}
/* Automations: separate task, timing and controls on phone. Reminders unchanged. */
@media(max-width:820px){
 #autolist .rem{display:grid;grid-template-columns:20px 1fr 1fr;gap:8px;padding:14px 0;border-bottom:1px solid var(--line)}
 #autolist .rem>.txt{grid-column:2/4;line-height:1.5;overflow-wrap:anywhere}
 #autolist .rem>span:nth-child(3){grid-column:2/4;font-size:12px;color:var(--dim)}
 #autolist .rem>[data-autotoggle]{grid-column:2;min-height:44px}
 #autolist .rem>[data-autodel]{grid-column:3;min-height:44px}
}

/* Workforce review: scan identity first; scope and prompt details on demand. */
.rosterintro{font-size:14px;line-height:1.5;color:var(--dim);margin:0}
.rosterscope{font-size:13px;line-height:1.6;color:var(--dim);padding-bottom:8px}
.rosterscope summary,.agdetails summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;color:var(--ink)}
.rosterscope p{margin:5px 0 0}
.agrow{padding:16px 0;font-size:14px}
.agrow .aghead{align-items:flex-start;gap:12px}
.agidentity{flex:1;min-width:0;overflow-wrap:anywhere}
.agrow .agidentity b{font-size:15px;display:block;line-height:1.4}
.agkind{display:block;font-size:12px;color:var(--dim);margin-top:4px}
.agrow .agtools{min-height:44px;min-width:94px;flex:none;font-size:13px;padding:8px 12px}
.agtools[aria-pressed="true"]{border-color:var(--acc);color:var(--acc)}
.agdetails{margin-top:7px;font-size:13px}
.agrow .agdesc{font-size:13px;line-height:1.65;margin:2px 0 8px;overflow-wrap:anywhere}
.agmanage{display:flex;justify-content:flex-end}
.agrow .agremove{min-height:44px;background:transparent;border-color:transparent;color:var(--dim);font-size:12px;padding:8px 10px}
.agrow .agremove:hover{color:var(--bad);border-color:var(--line)}

#view-workforce .trow > .small,#autolist > .small{color:var(--ink)!important;line-height:1.6}

#view-workforce .viewbody > .small{color:var(--ink)!important;line-height:1.6}