/* Agent OS Mobile — Midnight Aubergine */
:root{
  --bg:#140b18; --bg2:#1b0f21; --surface:#22132b; --surface2:#2c1838; --line:#3d2550;
  --text:#f3e9f7; --muted:#b39cc2; --dim:#8a7398;
  --accent:#d08cff; --accent2:#ff9ec7; --accent-ink:#1a0b22;
  --ok:#6ee7b7; --warn:#fbbf24; --err:#f87171; --info:#93c5fd;
  --r:16px; --tab:64px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100dvh}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--accent)}
.hidden{display:none!important}

/* top bar */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:calc(12px + var(--safe-t)) 16px 12px;background:linear-gradient(var(--bg) 70%,transparent)}
.top h1{font-size:20px;margin:0;font-weight:700;letter-spacing:-.01em;flex:1}
.dot{width:10px;height:10px;border-radius:50%;background:var(--dim);flex:none}
.dot.ok{background:var(--ok);box-shadow:0 0 10px var(--ok)} .dot.bad{background:var(--err)} .dot.warn{background:var(--warn)}
.icon-btn{min-width:44px;min-height:44px;border-radius:12px;display:grid;place-items:center;color:var(--muted)}
.icon-btn:active{background:var(--surface)}

main{padding:0 16px calc(var(--tab) + var(--safe-b) + 20px)}
.view{display:none} .view.on{display:block}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px}
.card h2{margin:0 0 10px;font-size:15px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--surface2);border-radius:12px;padding:12px}
.stat b{display:block;font-size:24px;line-height:1.1}
.stat span{font-size:13px;color:var(--muted)}
.row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}
.row .grow{flex:1;min-width:0}
.ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.muted{color:var(--muted)} .small{font-size:13px}
.pill{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--surface2);color:var(--muted);white-space:nowrap}
.pill.running{background:#1e3a5f;color:var(--info)} .pill.done{background:#123b2e;color:var(--ok)}
.pill.review{background:#1e3a5f;color:var(--info)} .pill.blocked{background:#4a1c1c;color:var(--err)} .pill.ready{background:#3b2a52;color:var(--accent)}
.pill.todo,.pill.triage,.pill.scheduled{background:#3a3016;color:var(--warn)}

.btn{min-height:46px;padding:0 18px;border-radius:12px;background:var(--accent);color:var(--accent-ink);font-weight:700}
.btn:active{filter:brightness(.9)} .btn:disabled{opacity:.5}
.btn.ghost{background:var(--surface2);color:var(--text)}
.btn.block{width:100%}
.field{width:100%;min-height:46px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);outline:none}
.field:focus{border-color:var(--accent)}
textarea.field{resize:none}
.empty{text-align:center;color:var(--dim);padding:28px 10px}
.err-box{background:#3a1520;border:1px solid #6b2234;color:#ffc9d3;border-radius:12px;padding:12px;margin-bottom:12px;font-size:14px}

/* chat */
#view-chat.on{display:flex;flex-direction:column;height:calc(100dvh - 76px - var(--tab) - var(--safe-b) - var(--safe-t))}
.msgs{flex:1;overflow-y:auto;padding:4px 0 12px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.msg{max-width:88%;padding:11px 14px;border-radius:18px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.msg.user{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:6px}
.msg.assistant{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg.err{align-self:center;background:#3a1520;color:#ffc9d3;font-size:14px}
.msg pre{background:var(--bg);padding:10px;border-radius:10px;overflow-x:auto;white-space:pre;font-size:13px;margin:8px 0}
.msg code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em}
.msg :not(pre)>code{background:rgba(0,0,0,.25);padding:1px 5px;border-radius:5px}
.typing::after{content:"▍";animation:blink 1s steps(2) infinite;color:var(--accent)}
@keyframes blink{50%{opacity:0}}
.composer{display:flex;gap:8px;align-items:flex-end;padding-top:8px}
.composer textarea{flex:1;max-height:140px}
.composer .btn{min-width:56px;padding:0 14px}

/* board */
.board-cols{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 8px}
.col{flex:0 0 82%;max-width:340px;scroll-snap-align:start;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:12px;min-height:200px}
.col h3{margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:flex;justify-content:space-between}
.tcard{width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px;display:block}
.tcard:active{border-color:var(--accent)}
.tcard .t{font-weight:600}
.tcard .s{font-size:13px;color:var(--muted);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chips{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 12px;padding:0 16px}
.chip{flex:none;min-height:38px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:14px}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}

/* bottom sheet */
.scrim{position:fixed;inset:0;background:rgba(8,3,10,.6);z-index:20;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;background:var(--surface);border-top:1px solid var(--line);border-radius:22px 22px 0 0;padding:10px 18px calc(18px + var(--safe-b));max-height:85dvh;overflow-y:auto;transform:translateY(100%);transition:transform .25s ease}
.sheet.on{transform:none}
.grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 12px}
.sheet h3{margin:0 0 6px;font-size:18px}
.sheet .body{white-space:pre-wrap;color:var(--muted);font-size:14px;margin:10px 0;max-height:30dvh;overflow-y:auto}
.move{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0}
.move button{min-height:44px;border-radius:10px;background:var(--surface2);font-size:14px}
.move button.cur{background:var(--accent);color:var(--accent-ink);font-weight:700}
.stack>*+*{margin-top:10px}

/* tab bar */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;background:rgba(27,15,33,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:var(--safe-b)}
.tabs button{flex:1;height:var(--tab);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--dim);font-size:11px;font-weight:600}
.tabs button svg{width:24px;height:24px}
.tabs button.on{color:var(--accent)}

/* login */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login{width:100%;max-width:380px}
.logo{width:72px;height:72px;margin:0 auto 18px;display:block}
.login h1{text-align:center;margin:0 0 4px}
.login p{text-align:center;color:var(--muted);margin:0 0 24px}

@media (min-width:760px){
  main{max-width:760px;margin:0 auto}
  .col{flex-basis:300px}
}