@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
/* Shared system for the "2036" concepts: readable type, 44px+ targets, one primary action per area. */
:root{--bg:#0a0c10;--s1:#11141a;--s2:#171b22;--s3:#212630;--s4:#2b313d;--line:#252b35;--t:#eef1f5;--t2:#aab2be;--t3:#717a88;
  --acc:#8fc3ff;--on-acc:#06111c;--work:#8fc3ff;--ready:#7fe0a5;--err:#ff8a80;--steer:#ffd58a;--muted:#5b6472;--f:"Inter","Helvetica Neue",Arial,"Liberation Sans",sans-serif}
*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}
body{background:var(--bg);color:var(--t);font:16px/1.5 var(--f);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}input{font:inherit;color:inherit}
i[data-i]{display:inline-grid;font-size:20px;line-height:0;flex:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:var(--s3);border-radius:9px;border:3px solid var(--bg)}

/* controls */
.ib{width:44px;height:44px;border-radius:14px;display:inline-grid;place-items:center;color:var(--t2);transition:background .15s,color .15s}
.ib:hover{background:var(--s3);color:var(--t)}
.btn{height:44px;padding:0 18px;border-radius:14px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;background:var(--s3);transition:background .15s,filter .15s;white-space:nowrap}
.btn:hover{background:var(--s4)}.btn.primary{background:var(--acc);color:var(--on-acc)}.btn.primary:hover{filter:brightness(1.1)}
.btn.ghost{background:none;color:var(--t2)}.btn.ghost:hover{background:var(--s3);color:var(--t)}
.btn.on{background:color-mix(in srgb,var(--ready) 18%,transparent);color:var(--ready)}
.field{height:44px;border-radius:14px;background:var(--s2);display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--t3);border:1px solid transparent}
.field:focus-within{border-color:var(--s4)}.field input{all:unset;flex:1;min-width:0;color:var(--t);font-size:15px}.field input::placeholder{color:var(--t3)}
.field kbd{font:12px ui-monospace,monospace;color:var(--t3);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.seg{display:inline-flex;padding:4px;border-radius:14px;background:var(--s2);gap:2px}
.seg button{height:36px;padding:0 12px;border-radius:10px;display:inline-flex;align-items:center;gap:6px;color:var(--t3);font-size:14px;font-weight:600}
.seg button i{font-size:17px}.seg button:hover{color:var(--t)}.seg button.on{background:var(--s4);color:var(--t)}.seg [data-delivery=steer].on{color:var(--steer)}

/* status */
.st{width:10px;height:10px;border-radius:50%;background:var(--c,var(--muted));flex:none}
.st.working{animation:fpulse 1.6s ease-in-out infinite}@keyframes fpulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 18%,transparent)}}
.stl{font-size:13px;font-weight:600;color:var(--c,var(--t3))}
.empty{color:var(--t3);font-size:15px;padding:20px}

/* conversation */
.m{max-width:62ch;font-size:16px;line-height:1.6}
.m.you{align-self:flex-end;background:var(--s3);padding:12px 16px;border-radius:20px 20px 6px 20px}
.m.x{color:var(--t)}
.m.tool{font-size:13px;color:var(--t3);display:flex;gap:8px;align-items:center;font-family:ui-monospace,monospace}.m.tool i{font-size:15px}

/* composer */
.composer{background:var(--s1);border:1px solid var(--line);border-radius:24px;padding:12px;display:grid;gap:8px;box-shadow:0 24px 60px #0009}
.composer .to{font-size:13px;color:var(--t3);display:flex;gap:8px;align-items:center;padding:2px 8px 0}.composer .to b{color:var(--t2);font-weight:600}
.composer .to [data-k=queue-count]{margin-left:auto}
.composer textarea{all:unset;display:block;font-size:17px;line-height:1.5;padding:6px 8px;min-height:26px;white-space:pre-wrap;color:var(--t);overflow:auto}
.composer textarea::placeholder{color:var(--t3)}
.bar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;row-gap:8px}.grow{flex:1}
.queue{list-style:none;display:grid;gap:6px}.queue:empty{display:none}
.k-q{background:var(--s2);padding:8px 8px 8px 12px!important;border-radius:14px!important;align-items:center!important;font-size:14px;color:var(--t2)}
.k-qk{font:700 11px var(--f)!important;letter-spacing:.04em;padding:4px 8px!important;border-radius:8px!important;margin:0!important}
.k-q button{width:36px;height:36px;display:grid!important;place-items:center;border-radius:10px;font-size:17px;color:var(--t3)!important;padding:0!important}
.k-q button:hover{background:var(--s3);color:var(--t)!important}
[data-k=model]{gap:6px}[data-k=model] b{font-weight:600;font-size:14px}

/* live */
.live-card{display:grid;justify-items:center;gap:14px}
.live-top{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--t2);font-variant-numeric:tabular-nums}
.live-top .st{--c:var(--ready)}.live-top [data-k=state]{color:var(--t);font-weight:600;text-transform:capitalize}
.expr{font-size:13px;color:var(--t3);min-height:20px}
.pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:32px}
.pills span{display:none;font-size:13px;padding:6px 12px;border-radius:99px;background:var(--s2);color:var(--t2)}.pills span.on{display:inline-flex;gap:6px}
.pills span i{font-style:normal;color:var(--acc)}
.live-ctl{display:flex;gap:18px}
.round{display:grid;justify-items:center;gap:6px;font-size:13px;color:var(--t2)}
.round i{width:60px;height:60px;border-radius:50%;background:var(--s3);display:grid;place-items:center;font-size:23px;color:var(--t);transition:background .15s}
.round:hover i{background:var(--s4)}.round.muted i{background:color-mix(in srgb,var(--err) 20%,var(--s3));color:var(--err)}
.round.end i{background:var(--err);color:#1d0705}.round.end:hover i{filter:brightness(1.08)}
.confirm{display:grid;gap:10px;justify-items:center;background:var(--s2);border-radius:18px;padding:14px 16px}.confirm[hidden]{display:none}
.confirm p{font-size:14px;color:var(--t2)}.confirm div{display:flex;gap:8px}
.hist{position:fixed;right:20px;top:84px;width:360px;max-height:62vh;overflow:auto;background:var(--s1);border:1px solid var(--line);border-radius:20px;padding:18px;z-index:60;box-shadow:0 24px 60px #000b}
.hist[hidden]{display:none}.hist h3{font-size:15px;margin-bottom:8px}.hist p{font-size:14px;color:var(--t2);padding:8px 0;border-top:1px solid var(--line)}.hist p b{color:var(--t);margin-right:6px}

/* kit chrome, sized for hands */
.k-incoming{padding:14px 14px 14px 22px!important;border-radius:22px!important;gap:18px!important;font-size:15px!important;background:var(--s2)!important;border-color:var(--s4)!important}
.k-incoming small{font-size:14px;margin-top:2px}
.k-incoming button{height:48px;padding:0 22px!important;border-radius:14px!important;display:inline-flex;align-items:center}
.k-toast{font:600 14px var(--f)!important;padding:12px 20px!important;bottom:28px!important}
.k-menu{min-width:240px!important;padding:8px!important;border-radius:18px!important}.k-menu button{padding:12px 14px!important;font-size:15px!important;border-radius:12px!important}
.k-back{top:auto!important;bottom:14px!important;right:auto!important;left:14px!important;font:600 13px var(--f)!important;padding:9px 14px!important;opacity:.7}.k-back:hover{opacity:1}
.k-credit{left:auto!important;right:14px;bottom:8px!important;opacity:.45}