/* Spire — holographic work surfaces. Spectral edges identify agents;
   solid contrast carries conversations, decisions, and controls. */
:root {
  --bg:#08111c; --bg2:#102030; --surface:#112232; --surface2:#182b3b; --surface3:#243849;
  --line:#b4e5ef1c; --line2:#b4e5ef30; --ink:#eaf3fc; --ink2:#cedce9;
  --mute:#a9bbcb; --dim:#93a8b9; --cyan:#a4f0e5; --violet:#d1b8f4;
  --indigo:#b2c9fc; --mint:#a4dfc7; --warm:#ecd39c; --danger:#f5aba8;
  --r:4px; --font:Outfit,ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box} [hidden]{display:none!important}
html,body{margin:0;height:100%}body{background:var(--bg);color:var(--ink);font:14px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}::selection{background:#85dfe83c}
button:focus-visible,a:focus-visible,summary:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button:disabled{opacity:.5;cursor:wait}
.mono{font-family:var(--mono)}.sub{font-size:12px;color:var(--dim)}.warm{color:var(--warm)}
.atmosphere{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 80% 45%,#1c526a55,transparent 60%),radial-gradient(ellipse at 8% 12%,#57496c38,transparent 55%),linear-gradient(120deg,#07111c,#101e2e)}
.atmosphere:after{content:"";position:absolute;inset:50% 0 0;opacity:.22;background-image:linear-gradient(#95dcf018 1px,transparent 1px),linear-gradient(90deg,#95dcf018 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(transparent,#000);transform:perspective(550px) rotateX(55deg);transform-origin:bottom}
#app{position:relative;height:100dvh;display:grid;grid-template-columns:185px minmax(0,1fr) 270px;grid-template-rows:58px minmax(0,1fr) auto;column-gap:24px;padding:12px 24px 22px;max-width:1920px;margin:auto}
#nav{grid-column:1;grid-row:1/4;display:flex;flex-direction:column;gap:23px;padding:23px 0 0;overflow:auto;scrollbar-width:thin}
#workspace-header{grid-column:2/4;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:15px;min-width:0;padding:0 2px 10px}
.workspace-heading{display:flex;align-items:baseline;gap:18px;min-width:0}#workspace-name{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#workspace-audience{font-size:11px;color:var(--mute)}#connection-state{font-size:11px;color:var(--warm)}
#main{grid-column:2;grid-row:2;min-width:0;border-bottom:0;border-radius:4px 4px 0 0}#dock{grid-column:2;grid-row:3;padding:12px 18px 18px;border:1px solid var(--line2);border-top:0;background:#0b1c2be8;border-radius:0 0 4px 4px;min-width:0}
#app.page-view #main{grid-row:2/4;border-bottom:1px solid var(--line2);border-radius:4px}
#strip{grid-column:3;grid-row:2/4;display:flex;flex-direction:column;gap:15px;overflow:auto;scrollbar-width:thin;padding:3px 3px 10px;min-width:0}
.glass{position:relative;background:linear-gradient(125deg,#9bdfea0c,#0d2233d9 40%,#c7a5f00a);border:1px solid var(--line2);border-radius:var(--r);box-shadow:inset 0 1px 0 #d6baf91a,0 12px 30px #0002;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.surface{position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden;border:1px solid var(--line2);border-radius:var(--r);background:linear-gradient(120deg,#19303be8,#0e1d2ded 50%,#201f32e6)}
.surface:before{content:"";position:absolute;top:0;left:10%;right:8%;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#a4f0e5,#adc6fa,#ddb7e8,transparent);z-index:1}
.brand{display:flex;align-items:center;gap:9px;padding:0 9px}.brand-mark{width:28px;height:35px;stroke:var(--cyan);fill:none;stroke-width:2}.brand-word{font-size:27px;letter-spacing:2px;font-weight:300}.nav-label{font:10px var(--mono);text-transform:uppercase;letter-spacing:.12em;display:flex;align-items:center;justify-content:space-between;padding:0 10px;color:var(--dim)}
.nav-list{display:grid;gap:4px}.nav-item{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;padding:9px 10px;width:100%;border:1px solid transparent;border-radius:4px;background:none;color:var(--mute);font-size:13px}.nav-item:hover,.nav-item.on{background:#b1e7f009;border-color:var(--line);color:var(--ink)}.count{font:10px var(--mono);color:var(--dim)}.count.hot{color:var(--warm)}.ws-row{display:flex;gap:9px;align-items:center;min-width:0}.ws-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ws-badge{width:23px;height:23px;flex:none;border:1px solid var(--line2);display:grid;place-items:center;font-size:10px;border-radius:4px}.icon-btn{width:28px;height:28px;border:1px solid var(--line2);background:transparent;border-radius:3px;display:grid;place-items:center;color:var(--cyan);font-size:16px}.me{margin-top:auto;display:flex;gap:9px;align-items:center;text-align:left;padding:12px 8px;background:none;border:1px solid var(--line);border-radius:4px}.human{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:10px;color:var(--ink);background:#3a455a;border:1px solid #d9def026}
.roster-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font:9px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--mute)}
.agent-card{flex:none;width:100%;text-align:left;padding:18px 16px;display:flex;flex-direction:column;gap:15px;color:var(--ink);transition:border-color .2s;background:linear-gradient(120deg,#8ee0eb0b,#0b1e2bd9 60%,#cea6ee0c)}.agent-card:hover,.agent-card.on{border-color:#bec9ee70}.agent-card.on:before{content:"";position:absolute;top:-1px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,var(--cyan),var(--violet));pointer-events:none}.agent-identity{display:flex;align-items:center;gap:13px;min-width:0}.meta{display:flex;flex-direction:column;gap:4px;min-width:0}.name{font-size:14px;overflow-wrap:anywhere}.role{font-size:10px;color:var(--dim)}.agent-brief{font-size:12px;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.act{font-size:11px;color:var(--mute);overflow-wrap:anywhere}.act.hot{color:var(--warm)}.agent-next{border-top:1px solid var(--line);padding-top:10px;font-size:10px;color:var(--cyan);overflow-wrap:anywhere}.roster-note{font-size:11px;color:var(--dim);margin:0;padding:0 4px}
.orb{--s:50px;width:var(--s);height:var(--s);position:relative;display:inline-grid;place-items:center;flex:none;color:oklch(.84 .08 var(--agent-h));filter:drop-shadow(0 0 5px oklch(.75 .08 var(--agent-h)/.2))}.orb svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.1}.orb:after{content:"";position:absolute;bottom:0;left:0;right:0;height:7px;border:1px solid currentColor;border-radius:50%;opacity:.25}.orb.sm{--s:28px}.orb.xs{--s:19px}.orb.sleep{opacity:.6}.orb.run svg{animation:agent-breathe 3s ease-in-out infinite}.orb.wait:after{color:var(--warm);opacity:.9}.orb.failed{color:var(--danger)}@keyframes agent-breathe{50%{opacity:.55}}
#command{padding:12px 14px;background:linear-gradient(110deg,#8df4e608,#06192799,#caa8f009);border-color:#b0e4eb45}#command form{display:flex;flex-direction:column;gap:7px}.composer-label{font-size:11px;color:var(--cyan);overflow-wrap:anywhere}.composer-label span{color:var(--mute)}#cmd-input{width:100%;border:0;background:none;resize:vertical;min-height:46px;max-height:180px;padding:6px 0;color:var(--ink);line-height:1.65;font-size:14px}#cmd-input::placeholder{color:var(--dim)}.cmd-chips{display:flex;gap:5px}.cmd-chip{border:1px solid var(--line2);background:none;color:var(--mute);font-size:11px;padding:4px 8px;border-radius:3px}.hint{color:var(--dim);font-size:10px;min-width:0;overflow-wrap:anywhere}.send{width:32px;height:32px;flex:none;background:linear-gradient(120deg,var(--cyan),#c9c6f6);color:#162732;border:0;border-radius:3px;font-size:18px}
.next-timer{padding:13px;border:1px solid var(--line2);background:#acdaef08;border-radius:4px}.rail-h{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
#nav-toggle,#agents-toggle,.panel-close{display:none}#panel-shade{position:fixed;inset:0;z-index:8;background:#02091499;backdrop-filter:blur(5px);border:0}
/* ---------- main surface ---------- */
.main-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 18px 24px 14px; border-bottom: 1px solid var(--line);
}
.title { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; margin: 0; }
.desc { color: var(--mute); margin-top: 3px; max-width: 640px; text-wrap: pretty; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line2); color: var(--ink2); font-size: 11.5px; background: oklch(1 0 0 / 0.03);
}
.chip.warm { color: var(--warm); border-color: oklch(0.84 0.13 72 / 0.35); }
.chip.live { color: var(--mint); border-color: oklch(0.83 0.12 166 / 0.35); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tabs { display: flex; gap: 2px; padding: 3px; border-radius: 10px; border: 1px solid var(--line); background: oklch(0 0 0 / 0.18); }
.tab { padding: 5px 12px; border-radius: 7px; color: var(--mute); cursor: pointer; border: 0; background: none; font-size: 12.5px; }
.tab:hover { color: var(--ink); }
.tab.on { background: var(--surface3); color: var(--ink); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.06); }
.scroll { flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: oklch(1 0 0 / 0.12) transparent; }

/* Thread */
.feed { padding: 22px 24px 36px; display: flex; flex-direction: column; gap: 18px; max-width: 880px; }
.msg { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; animation: rise 0.35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.who { font-size: 12px; color: var(--mute); margin-bottom: 3px; display: flex; gap: 8px; align-items: baseline; }
.who b { color: var(--ink); font-weight: 500; }
.body { color: var(--ink2); text-wrap: pretty; white-space: pre-wrap; word-break: break-word; }
.body code, .inline-code { font-family: var(--mono); font-size: 12px; padding: 1px 5px; border-radius: 5px; background: oklch(1 0 0 / 0.06); color: var(--ink); }
.msg.timer .human { background: radial-gradient(circle at 35% 30%, oklch(0.95 0.04 72), var(--warm) 45%, oklch(0.45 0.1 72)); color: oklch(0.25 0.05 72); border: 0; font-size: 12px; }
.timer-tag { font: 11px var(--mono); color: var(--warm); }
.tool {
  margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; background: oklch(0.13 0.014 266);
  overflow: hidden;
}
.tool-h { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; font: 11.5px var(--mono); color: var(--mute); cursor: pointer; }
.tool-h:hover { color: var(--ink2); }
.tool-h .ok { color: var(--mint); }
.tool-h .bad { color: var(--danger); }
.tool-b { padding: 9px 12px; border-top: 1px solid var(--line); font: 12px/1.6 var(--mono); color: var(--ink2); white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }
.approval {
  margin-top: 10px; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
  border: 1px solid oklch(0.84 0.13 72 / 0.38);
  background: linear-gradient(180deg, oklch(0.84 0.13 72 / 0.08), oklch(0.84 0.13 72 / 0.02));
}
.approval.done { border-color: var(--line); background: oklch(1 0 0 / 0.02); }
.approval-t { font: 11px var(--mono); letter-spacing: 0.08em; color: var(--warm); display: flex; align-items: center; gap: 8px; }
.approval.done .approval-t { color: var(--mute); }
.cmd { padding: 9px 12px; border-radius: 8px; background: oklch(0.12 0.012 266); border: 1px solid var(--line); font: 12.5px var(--mono); word-break: break-word; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sys { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 11.5px; }
.sys::before, .sys::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sys.err { color: var(--danger); }
.ghost { opacity: 0.75; }
.caret::after { content: "▍"; color: var(--cyan); animation: blink 1s steps(2) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }

.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line2); background: oklch(1 0 0 / 0.05); color: var(--ink); font-size: 12.5px; font-weight: 500;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.btn:hover { border-color: oklch(0.9 0.04 265 / 0.3); background: oklch(1 0 0 / 0.08); }
.btn.pri { background: linear-gradient(180deg, oklch(0.7 0.15 275), oklch(0.6 0.16 275)); border-color: oklch(0.8 0.12 275 / 0.6); box-shadow: 0 0 24px -6px oklch(0.68 0.16 270 / 0.7); }
.btn.warm { background: var(--warm); color: oklch(0.22 0.04 72); border-color: transparent; }
.btn.danger { color: var(--danger); }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btns { display: flex; gap: 8px; }

/* Empty / hero */
.hero { padding: 48px 40px; display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.hero h2 { font-size: 26px; font-weight: 500; letter-spacing: -0.025em; margin: 0; }
.hero p { color: var(--mute); margin: 0; max-width: 560px; text-wrap: pretty; }
.templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.template { padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: oklch(1 0 0 / 0.025); cursor: pointer; display: flex; gap: 12px; align-items: flex-start; text-align: left; }
.template:hover { border-color: var(--line2); background: oklch(1 0 0 / 0.045); }
.template .t-n { font-weight: 500; }

/* Pages: timers, secrets, compute, members */
.page { padding: 22px 24px 40px; display: flex; flex-direction: column; gap: 18px; }
.table { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tr { display: grid; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.tr:first-child { border-top: 0; }
.tr.head { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); background: oklch(0 0 0 / 0.15); padding: 9px 16px; }
.tr.done { opacity: 0.5; }
.timers-t .tr { grid-template-columns: 100px minmax(0, 1.5fr) minmax(0, 1.1fr) 130px 56px 76px; }
.track-tip.day { opacity: 1; padding: 1px 6px; }
.track-now span { background: var(--bg); padding: 0 3px; }
.secrets-t .tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) 120px 70px; }
.compute-t .tr { grid-template-columns: minmax(0, 1fr) 90px 110px minmax(0, 1fr) 200px; }
.members-t .tr { grid-template-columns: 36px minmax(0, 1fr) 100px 140px; }
.invites-t .tr { grid-template-columns: 36px minmax(0, 1fr) 100px 90px; }
.when { font: 500 15px var(--mono); }
.when.soon { color: var(--cyan); }
.status-on { color: var(--mint); font: 12px var(--mono); }
.status-off { color: var(--danger); font: 12px var(--mono); }
.dayline { position: relative; height: 84px; border: 1px solid var(--line); border-radius: 12px; background: oklch(0 0 0 / 0.16); overflow: hidden; }

/* ---------- modal, forms, toast ---------- */
.scrim { position: fixed; inset: 0; z-index: 20; background: oklch(0.08 0.02 266 / 0.55); backdrop-filter: blur(6px); display: grid; place-items: center; animation: fade 0.2s ease; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(520px, calc(100vw - 32px)); padding: 22px; display: flex; flex-direction: column; gap: 14px; animation: rise 0.25s ease; }
.modal h3 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.field input, .field textarea, .field select {
  border: 1px solid var(--line2); background: oklch(0.12 0.014 266 / 0.8); border-radius: 9px; padding: 9px 11px; outline: 0; color: var(--ink);
}
.field textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: oklch(0.83 0.12 212 / 0.5); box-shadow: 0 0 0 3px oklch(0.83 0.12 212 / 0.12); }
.field .help { font-size: 11.5px; color: var(--dim); }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; border: 1px solid var(--line); background: oklch(0 0 0 / 0.2); }
.seg button { flex: 1; padding: 6px; border: 0; border-radius: 7px; background: none; color: var(--mute); cursor: pointer; font-size: 12.5px; }
.seg button.on { background: var(--surface3); color: var(--ink); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.err-msg { color: var(--danger); font-size: 12.5px; min-height: 0; }
#toast-root { position: fixed; z-index: 30; top: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { padding: 9px 14px; font-size: 12.5px; animation: rise 0.25s ease; }

/* Capacity */
.cap-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 14px;
  background: radial-gradient(600px 200px at 0% 0%, oklch(0.68 0.16 270 / 0.12), transparent 70%), oklch(0 0 0 / 0.14); }
.cap-num { font: 300 46px/1.05 var(--mono); letter-spacing: -0.04em; margin-bottom: 6px; }
.cap-num .u { font-size: 14px; color: var(--mute); margin-left: 8px; letter-spacing: 0; }
.cap-side { display: flex; flex-direction: column; gap: 10px; }
.cap-bar { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; }
.cap-seg { background: linear-gradient(90deg, oklch(0.78 0.13 var(--seg)), oklch(0.62 0.15 var(--seg))); box-shadow: 0 0 14px -2px oklch(0.78 0.13 var(--seg) / 0.6); }
.cap-legend { display: flex; flex-direction: column; gap: 6px; }
.cap-legend .ws-row { gap: 8px; }
.cap-dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.78 0.13 var(--seg)); flex: none; }
.cap-t .tr { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.4fr) 90px 80px 84px; }
.ledger-t .tr { grid-template-columns: 90px minmax(0, 1fr) 90px; }
.cap-paygo { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.range { width: 100%; accent-color: oklch(0.68 0.16 270); }

/* Compute */
.sec-h { display: flex; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 500; margin-top: 6px; }
.sec-h .sub { font-weight: 400; }
.machines { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.machine { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.3fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.machine:first-child { border-top: 0; }
.m-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.m-name { font-weight: 500; }
.m-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: none; }
.m-dot.on { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.lend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lend-chip { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line2); background: none; color: var(--mute); font-size: 12px; cursor: pointer; }
.lend-chip.on { color: var(--ink); border-color: oklch(0.83 0.12 212 / 0.5); background: oklch(0.83 0.12 212 / 0.1); }
.help-box { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px dashed var(--line2); border-radius: 12px; color: var(--mute); font-size: 12.5px; }
.help-box b { color: var(--ink2); font-weight: 500; }
.help-box code { font-family: var(--mono); font-size: 11.5px; padding: 1px 6px; border-radius: 5px; background: oklch(1 0 0 / 0.06); color: var(--ink2); }
.policy-list { display: flex; flex-direction: column; gap: 6px; }
.policy { text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line2); background: oklch(0 0 0 / 0.15); cursor: pointer; }
.policy.on { border-color: oklch(0.68 0.16 270 / 0.7); background: oklch(0.68 0.16 270 / 0.12); }


/* Conversation and control refinements */
#nav .panel-close,#strip .panel-close{display:none}
.orb.blocked{color:var(--warm)}
.agent-heading{display:flex;gap:13px;align-items:center;min-width:0}.agent-heading .orb{--s:36px}.agent-status{font-size:11px;color:var(--mute);margin-top:8px}.agent-status.warm{color:var(--warm)}.agent-head .title{font-size:24px;font-weight:300;letter-spacing:0}.agent-head .desc{font-size:12px}.agent-head .btns{flex-wrap:wrap;justify-content:flex-end}.agent-details p{margin:8px 0 18px;white-space:pre-wrap;overflow-wrap:anywhere}.detail-label{font:10px var(--mono);color:var(--cyan);text-transform:uppercase;letter-spacing:.1em}
.body{white-space:normal;overflow-wrap:anywhere}.body p{margin:0 0 10px;white-space:pre-wrap}.body p:last-child{margin-bottom:0}.body pre{white-space:pre;max-width:100%;overflow:auto;background:#06121e;border:1px solid var(--line);padding:12px;border-radius:3px}.body pre code{padding:0;background:none;white-space:pre;font:12px/1.65 var(--mono)}.body h2,.body h3,.body h4,.body h5,.body h6{font-size:16px;font-weight:500;margin:14px 0 8px}.body ul,.body ol{padding-left:22px;margin:9px 0}.body li{margin:4px 0}.body a{text-decoration:underline}.msg{animation:none}.msg>div{min-width:0}.tool-h{width:100%;border:0;background:transparent;text-align:left}.tool-h>span:first-child{overflow-wrap:anywhere;min-width:0}.tool-h>span:last-child{flex:none}.btn{border-radius:4px}.btn.pri{background:linear-gradient(120deg,var(--cyan),#c6c9f7);color:#172a36;box-shadow:none;border-color:#c6defc60}.approval{border-radius:4px}.approval .row{flex-wrap:wrap}.modal{display:none;max-height:calc(100dvh - 40px);overflow:auto;color:var(--ink);background:#102232;position:fixed;margin:auto;border:1px solid #bbdced55}.modal[open]{display:flex}.modal::backdrop{background:#020914a8;backdrop-filter:blur(7px)}.modal .row,.modal .btns{flex-wrap:wrap}.modal .btns{margin-left:auto}.field select option{color:var(--ink);background:#142536}.modal .field input:focus-visible,.modal .field textarea:focus-visible,.modal .field select:focus-visible{outline:2px solid var(--cyan)}.table{overflow:auto;flex-shrink:0}.tr{min-width:620px}.machine{min-width:600px}.machines{overflow:auto}.page>*{flex-shrink:0}.title,.desc{overflow-wrap:anywhere}.field{min-width:0}.field input,.field textarea,.field select{min-width:0;max-width:100%}.toast{background:#193045;max-width:min(540px,90vw);overflow-wrap:anywhere}
body.signed-out #nav,body.signed-out #strip,body.signed-out #workspace-header,body.signed-out #dock{display:none}body.signed-out #app{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);padding:18px}body.signed-out #main{grid-column:1;grid-row:1;max-width:560px;margin:auto;height:auto;border-bottom:1px solid var(--line2)}.signin{gap:18px}
@media(min-width:1500px){#app{grid-template-columns:210px minmax(0,1fr) 310px;column-gap:30px;padding:18px 34px 28px}.feed{max-width:1000px;padding:28px 32px}.main-head{padding:24px 32px}.agent-card{padding:22px}}
@media(max-width:1150px){#app{grid-template-columns:165px minmax(0,1fr);column-gap:18px;padding:10px 18px 18px}#workspace-header{grid-column:2}#agents-toggle{display:inline-flex}#strip{display:none}body[data-panel=strip] #strip{display:flex;position:fixed;right:16px;top:75px;bottom:16px;width:min(320px,calc(100vw - 32px));z-index:10;padding:16px;background:#0d2032;border:1px solid var(--line2);border-radius:5px}body[data-panel=strip] #strip .panel-close{display:inline-flex}.cap-hero{grid-template-columns:1fr}.main-head{padding:17px 19px}.feed{padding:20px}.hero{padding:30px 24px}}
@media(max-width:760px){#app{grid-template-columns:minmax(0,1fr);grid-template-rows:62px minmax(0,1fr) auto;gap:0;padding:0 10px 10px}#workspace-header,#main,#dock{grid-column:1}#workspace-header{gap:8px;padding:8px 0}#nav{display:none}#nav-toggle{display:inline-flex}.workspace-heading{display:block;flex:1}#workspace-name{display:block;font-size:13px;max-width:42vw}#workspace-audience{font-size:10px}#workspace-header .btn{padding:7px 10px;font-size:11px}#connection-state{position:absolute;top:61px;right:20px;z-index:3;background:#142638;padding:5px 8px;font-size:10px}body[data-panel=nav] #nav{display:flex;position:fixed;left:10px;top:72px;bottom:10px;width:min(300px,calc(100vw - 20px));background:#102233;padding:18px;z-index:10;border:1px solid var(--line2);border-radius:5px}body[data-panel=nav] #nav .panel-close{display:inline-flex}.agent-heading{gap:9px}.agent-head .title{font-size:20px}.agent-head .desc{font-size:11px}.agent-head{gap:9px;padding:15px 13px}.agent-head .btns{gap:5px;flex-direction:column}.agent-status{font-size:10px}.agent-heading .orb{--s:28px}.feed{padding:17px 13px 25px;gap:20px}.msg{grid-template-columns:24px minmax(0,1fr);gap:8px}.msg .orb{--s:24px}.human{width:24px;height:24px}.body{font-size:14px}.who{font-size:11px;flex-wrap:wrap;gap:5px}#dock{padding:9px}#command{padding:10px}.hint{font-size:9px}.composer-label{font-size:10px}#cmd-input{font-size:16px}.page{padding:18px 14px}.page .btns{flex-wrap:wrap}.main-head:not(.agent-head){flex-wrap:wrap}.hero{padding:30px 20px}.hero h2{font-size:25px}.templates{grid-template-columns:1fr}.cap-num{font-size:35px}.cap-paygo{flex-direction:column;align-items:flex-start}.grid2{grid-template-columns:1fr}.modal{padding:18px}.modal .btns{gap:6px}.modal .btn{padding:7px 10px}.modal h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* The Schedule timeline shares these positioning primitives. */
.dayline .track-line { position: absolute; left: 0; right: 0; top: 12px; height: 1px; background: linear-gradient(90deg, transparent, oklch(0.9 0.04 265 / 0.22) 8%, oklch(0.9 0.04 265 / 0.22) 92%, transparent); }
.dayline .track-tick { position: absolute; top: 8px; width: 1px; height: 9px; background: oklch(0.9 0.04 265 / 0.18); }
.dayline .track-lab { position: absolute; top: 24px; font: 9.5px var(--mono); color: var(--dim); transform: translateX(-50%); }
.dayline .track-now { position: absolute; top: 0; width: 1.5px; height: 24px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.dayline .track-now span { position: absolute; top: -2px; left: 6px; font: 9.5px var(--mono); color: var(--cyan); white-space: nowrap; }
.dayline .track-mark { position: absolute; top: 4px; transform: translateX(-50%); cursor: pointer; }
.dayline .track-mark .orb { --s: 15px; font-size: 0; }
.dayline .track-mark:hover .track-tip, .dayline .track-mark.label .track-tip { opacity: 1; }
.dayline .track-tip { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 10.5px var(--mono); color: var(--ink2);
  padding: 2px 7px; border-radius: 6px; background: oklch(0.16 0.02 266 / 0.85); border: 1px solid var(--line); opacity: 0; transition: opacity 0.2s; pointer-events: none; }


.dayline .track-tip.day{opacity:1}

.dayline .track-tip.day{left:0;transform:none;max-width:180px;overflow:hidden;text-overflow:ellipsis}