html,body{height:100%;overflow:hidden}

body{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(circle at 80% 0%,rgba(120,95,255,.20),transparent 35rem),var(--bg);color:var(--ink);height:100dvh;-webkit-font-smoothing:antialiased}

body:before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;opacity:.18;mask-image:linear-gradient(to bottom,#000,transparent 85%)}

body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;background:repeating-conic-gradient(var(--ink) 0 25%,transparent 0 50%) 0 0/2px 2px}

.app-shell{height:100dvh;display:grid;grid-template-columns:260px minmax(0,1fr);min-width:0}
.app-side{height:100dvh;border-right:1px solid var(--line);background:rgba(5,5,16,.78);backdrop-filter:blur(18px);display:flex;flex-direction:column;min-width:0}
.app-brand{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 1rem;gap:.75rem;flex-shrink:0}
.app-sig{width:34px;height:34px;border:1px solid var(--line2);display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;background:var(--panel2);color:var(--ink)}
.app-wordmark{font-family:'JetBrains Mono',monospace;font-size:.76rem;font-weight:700;letter-spacing:.16em;line-height:.95;text-transform:uppercase}
.rail-toggle{margin-left:auto;border:1px solid var(--line2);background:transparent;color:var(--ink2);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:.58rem;padding:.42rem .48rem;min-height:38px;cursor:pointer}
.rail-toggle:hover{background:var(--ink);color:var(--bg)}

.app-nav{padding:.8rem 0;border-bottom:1px solid var(--line)}
.app-nav .nav-sep{display:block;margin:1rem 1rem .7rem;border-top:2px solid var(--line2);height:0}
.app-nav a,.app-nav button{display:flex;align-items:center;gap:.7rem;width:100%;border:0;background:transparent;color:var(--ink2);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.13em;font-size:.68rem;padding:.68rem 1rem;text-align:left;text-decoration:none;cursor:pointer}
.app-nav a:before,.app-nav button:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--line2);box-shadow:none}
.app-nav a:hover,.app-nav button:hover,.app-nav a.active{color:var(--ink);background:rgba(255,255,255,.035)}
.app-nav a.active:before{background:var(--green);box-shadow:0 0 12px var(--green)}
.app-meta{margin-top:auto;padding:1rem;display:grid;gap:.5rem}
.app-pill{border:1px solid var(--line);background:var(--panel2);color:var(--ink2);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:.6rem;padding:.55rem .65rem;text-align:left}
.app-pill .dot{display:inline-block;width:6px;height:6px;margin-right:.45rem;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
button.app-pill{cursor:pointer}
.app-main{min-width:0;display:flex;flex-direction:column;height:100dvh}
.header{height:56px;background:rgba(5,5,16,.82);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.75rem;padding:0 1rem;backdrop-filter:blur(16px);flex-shrink:0}
.header-avatar{width:34px;height:34px;border:1px solid var(--line2);display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:700;background:var(--panel2);color:var(--ink)}
.header-info h1{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;line-height:1;margin:0}
.header-status{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.14em;font-size:.62rem;color:var(--green);display:flex;align-items:center;gap:.35rem;margin-top:.25rem}
.header-status:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:pulse 2s infinite}
.header-actions{margin-left:auto;display:flex;gap:.5rem}
.header-btn{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.13em;background:transparent;border:1px solid var(--line2);color:var(--ink2);font-size:.65rem;padding:.42rem .65rem;min-height:38px;display:inline-flex;align-items:center;cursor:pointer}
.header-btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.messages{flex:1;overflow-y:auto;padding:1rem;scroll-behavior:smooth}
.messages-inner{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:.75rem}
.msg{display:flex;gap:.55rem;max-width:88%;animation:fadeIn .18s ease}
.msg.assistant,.msg.tool{align-self:flex-start}
.msg.user{align-self:flex-end;flex-direction:row-reverse}
.msg-avatar{width:30px;height:30px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:.68rem;background:var(--panel2);color:var(--ink);flex-shrink:0}
.msg.user .msg-avatar{color:var(--green);border-color:rgba(74,222,128,.28)}
.msg.tool .msg-avatar{color:var(--accent);border-color:rgba(167,139,250,.35)}
.bubble{padding:.72rem .9rem;border:1px solid var(--line);background:rgba(5,5,16,.78);line-height:1.55;font-size:.95rem;overflow-wrap:anywhere}
.msg.user .bubble{border-color:rgba(74,222,128,.22);background:rgba(34,197,94,.08)}
.msg.tool .bubble{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--ink2);max-height:180px;overflow:auto}
.bubble p{margin:.25rem 0}
.bubble pre{padding:.8rem;overflow:auto;border:1px solid var(--line);background:rgba(0,0,0,.28)}
.bubble code{font-family:'JetBrains Mono',monospace}
.empty-state{height:55vh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink2);text-align:center}
.empty-state .icon{font-size:2rem;filter:grayscale(1);opacity:.7}
.empty-state h2{font-size:1.6rem;margin:.7rem 0 .35rem}
.empty-state p{margin:0;color:var(--ink3)}
.input-area{border-top:1px solid var(--line);background:rgba(5,5,16,.82);padding:.6rem 1rem .75rem}
.send-mode-toggle{max-width:920px;margin:0 auto .55rem;display:flex;gap:.35rem;align-items:center}
.send-mode-toggle button{border:1px solid var(--line);background:rgba(255,255,255,.025);color:var(--ink3);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.11em;font-size:.56rem;padding:.38rem .5rem;min-height:38px;cursor:pointer}
.send-mode-toggle button.active{border-color:rgba(167,139,250,.65);background:rgba(167,139,250,.14);color:var(--ink)}
.send-mode-toggle button:hover{border-color:rgba(167,139,250,.45);color:var(--ink)}
.input-inner{max-width:920px;margin:0 auto;display:flex;align-items:flex-end;gap:.65rem}
.input-inner textarea{flex:1;resize:none;max-height:170px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);border-radius:0;padding:.82rem 1rem;font:inherit;line-height:1.4;outline:none}
.input-inner textarea:focus{border-color:rgba(167,139,250,.65);box-shadow:0 0 0 1px rgba(167,139,250,.25)}
.send-btn{width:44px;height:44px;min-width:44px;border:1px solid var(--line2);background:var(--ink);color:var(--bg);font-size:1.1rem;cursor:pointer}
.send-btn.stop-mode{background:rgba(248,113,113,.12);color:#fca5a5;border-color:rgba(248,113,113,.55);font-size:.88rem;font-family:'JetBrains Mono',monospace}
.send-btn.stop-mode:hover{background:rgba(248,113,113,.22);color:#fecaca}
.send-btn:disabled{opacity:.45;cursor:not-allowed}
.typing{display:flex;align-items:center;gap:.55rem}
.typing-dots{border:1px solid var(--line);background:rgba(5,5,16,.78);padding:.75rem .9rem}
.typing-dots span{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:var(--ink2);animation:typing 1.2s infinite}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}

.sessions-panel{display:none;min-height:0;flex:1;overflow:hidden;flex-direction:column}
.app-shell[data-rail="sessions"] .app-nav,.app-shell[data-rail="sessions"] .app-meta{display:none}
.app-shell[data-rail="sessions"] .sessions-panel{display:flex}
.session-tools{padding:.75rem;border-bottom:1px solid var(--line);display:grid;gap:.55rem}
.session-filter{width:100%;box-sizing:border-box;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.06em;padding:.55rem .6rem;outline:none}
.source-filters{display:flex;gap:.35rem;flex-wrap:wrap}
.source-chip{border:1px solid var(--line);background:transparent;color:var(--ink2);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:.55rem;padding:.34rem .42rem;min-height:38px;cursor:pointer}
.source-chip.active,.source-chip:hover{border-color:rgba(167,139,250,.55);color:var(--ink);background:rgba(167,139,250,.10)}
.session-new{margin:.55rem .5rem .2rem;width:calc(100% - 1rem);border:1px solid transparent;background:transparent;color:var(--ink2);display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55rem;align-items:center;text-align:left;padding:.62rem .6rem;font:600 .78rem Inter,system-ui,sans-serif;cursor:pointer}
.session-new:hover{border-color:var(--line);background:var(--panel2);color:var(--ink)}
.session-new-plus{width:1.45rem;height:1.45rem;border:1px solid rgba(52,211,153,.38);display:grid;place-items:center;font-family:'JetBrains Mono',monospace;color:var(--green);line-height:1;background:rgba(52,211,153,.08)}
.session-list{overflow:auto;padding:.2rem .5rem .8rem;display:grid;gap:.18rem}
.session-item{width:100%;border:1px solid transparent;background:transparent;color:var(--ink2);text-align:left;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.38rem;row-gap:.18rem;align-items:center;padding:.58rem .55rem;cursor:pointer;position:relative}
.session-item:hover,.session-item.active{border-color:var(--line);background:var(--panel2);color:var(--ink)}
.session-item.active:before{content:"";position:absolute;left:-1px;top:.48rem;bottom:.48rem;width:2px;background:var(--green);box-shadow:0 0 14px rgba(52,211,153,.55)}
.session-item.archived{opacity:.72}
.session-main{min-width:0;display:grid;gap:.24rem}
.session-actions{display:flex;align-items:center;gap:.28rem;opacity:.62;transition:opacity .12s ease}
.session-item:hover .session-actions,.session-item.active .session-actions,.session-item.archived .session-actions{opacity:1}
.session-actions .mini{min-width:3.45rem;min-height:38px;border:1px solid var(--line);background:rgba(255,255,255,.025);color:var(--muted);font-family:'JetBrains Mono',monospace;text-transform:none;letter-spacing:0;font-size:.56rem;padding:0 .34rem;cursor:pointer;line-height:1;display:grid;place-items:center}
.session-actions .mini:hover{color:var(--ink);border-color:rgba(167,139,250,.5);background:rgba(167,139,250,.10)}
.session-actions .mini.archive{color:#fbbf24;border-color:rgba(251,191,36,.28)}
.session-title{font-size:.79rem;line-height:1.25;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:650;letter-spacing:-.01em;display:flex;align-items:center;gap:.34rem;min-width:0}
.session-title-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.session-live-dot,.session-unread-dot{display:none;width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.session-item.streaming .session-live-dot{display:inline-block;background:var(--green);box-shadow:0 0 12px rgba(52,211,153,.75);animation:pulse 1.2s infinite}
.session-item.unread:not(.streaming) .session-unread-dot{display:inline-block;background:var(--accent);box-shadow:0 0 12px rgba(167,139,250,.7)}
.session-item.unread .session-title-text{color:var(--ink);font-weight:750}
.session-meta{display:flex;align-items:center;gap:.4rem;min-width:0;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.09em;font-size:.55rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.session-source{border:1px solid var(--line2);padding:.1rem .25rem;color:var(--green);background:rgba(52,211,153,.045)}
.session-empty{padding:1rem;color:var(--ink3);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:.62rem}
.tool-call{font-family:'JetBrains Mono',monospace;color:var(--ink2)}
.tool-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.35rem}
.tool-name{color:var(--green)}
.tool-actions{display:inline-flex;gap:.35rem;flex-shrink:0}
.tool-actions button{border:1px solid rgba(167,139,250,.28);background:rgba(167,139,250,.08);color:var(--ink2);font:600 .58rem 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.09em;padding:.18rem .35rem;min-height:38px;cursor:pointer}
.tool-actions button:hover{border-color:rgba(167,139,250,.55);color:var(--ink)}
.tool-content{white-space:normal}

.msg-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.32rem;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.11em;font-size:.55rem;color:var(--ink3)}
.msg.user .msg-meta{justify-content:flex-end}
.msg-role{color:var(--ink2)}
.msg-time{color:var(--ink3)}
.header-btn.danger{border-color:rgba(248,113,113,.45);color:#fca5a5}
.header-btn:disabled{opacity:.35;cursor:not-allowed}
.run-pill{color:var(--green)}
.streaming .bubble{border-color:rgba(52,211,153,.45)}
.approval-card{border:1px solid rgba(167,139,250,.42);background:rgba(167,139,250,.08);padding:.75rem;display:grid;gap:.55rem}
.approval-actions{display:flex;gap:.45rem;flex-wrap:wrap}
.approval-actions button{border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:.58rem;padding:.45rem .55rem;min-height:38px;cursor:pointer}
.approval-actions button.deny{border-color:rgba(248,113,113,.45);color:#fca5a5}
.approval-actions button:disabled{opacity:.45;cursor:not-allowed}
.approval-card.resolved{opacity:.72;border-color:var(--line);background:rgba(255,255,255,.035)}
.approval-title{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;color:var(--green)}

.command-palette{position:absolute;left:1rem;right:4.7rem;bottom:calc(100% + .45rem);max-height:310px;overflow:auto;border:1px solid rgba(167,139,250,.45);background:rgba(5,5,16,.96);box-shadow:0 18px 60px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.035) inset;backdrop-filter:blur(18px);display:none;z-index:45}
.command-palette.open{display:block}
.command-row{width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.055);background:transparent;color:var(--ink2);display:grid;grid-template-columns:minmax(7rem,auto) 1fr auto;gap:.75rem;align-items:start;text-align:left;padding:.62rem .72rem;cursor:pointer}
.command-row:last-child{border-bottom:0}
.command-row:hover,.command-row.active{background:rgba(167,139,250,.13);color:var(--ink)}
.command-name{font-family:'JetBrains Mono',monospace;color:var(--green);font-size:.72rem;white-space:nowrap}
.command-desc{font-size:.78rem;line-height:1.35;color:inherit}
.command-hint{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:.55rem;color:var(--ink3);white-space:nowrap}
.command-empty{padding:.75rem;color:var(--ink3);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:.62rem}
.command-help-list{display:grid;gap:.35rem}
.command-help-row{display:grid;grid-template-columns:minmax(8rem,auto) 1fr;gap:.75rem}
.command-help-row code{color:var(--green)}

@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}
to{opacity:1;transform:none}
}

@keyframes pulse{50%{opacity:.4}
}

@keyframes typing{0%,60%,100%{opacity:.35;transform:translateY(0)}
30%{opacity:1;transform:translateY(-3px)}
}

@media (max-width:700px){html,body{height:100dvh;overflow:hidden;-webkit-text-size-adjust:100%}
.app-shell{display:block;height:100dvh}
.app-side{position:sticky;top:0;z-index:30;width:100%;height:auto;max-height:48dvh;border-right:0;border-bottom:1px solid var(--line);background:rgba(5,5,16,.94)}
.app-brand{height:48px;padding:0 .7rem}
.app-sig{width:28px;height:28px;font-size:.66rem}
.app-wordmark{font-size:.62rem;letter-spacing:.11em}
.app-nav{display:flex;gap:.35rem;overflow-x:auto;padding:.5rem .6rem;border-bottom:0;scrollbar-width:none}
.app-nav::-webkit-scrollbar{display:none}
.app-nav a,.app-nav button{flex:0 0 auto;width:auto;border:1px solid var(--line);background:var(--panel2);padding:.48rem .55rem;min-height:34px;font-size:.56rem}
.app-nav a:before,.app-nav button:before{display:none}
.app-nav .nav-sep{flex:0 0 2px;width:2px;height:28px;margin:.1rem .35rem;border-top:0;border-left:2px solid var(--line2)}
.sessions-panel{max-height:calc(48dvh - 48px)}
.session-tools{padding:.55rem}
.source-filters{max-height:64px;overflow:auto}
.app-meta{display:none}
.app-main{height:calc(100dvh - 101px)}
.app-shell[data-rail="sessions"] .app-main{height:52dvh}
.header{height:auto;min-height:56px;padding:.55rem .7rem;gap:.55rem;padding-top:calc(.55rem + env(safe-area-inset-top))}
.header-avatar{width:30px;height:30px}
.header-info h1{font-size:.72rem}
.header-status{font-size:.58rem}
.header-actions{display:flex;gap:.35rem;max-width:48vw;overflow-x:auto;scrollbar-width:none}
.header-actions::-webkit-scrollbar{display:none}
.header-btn{white-space:nowrap;font-size:.58rem;padding:.42rem .5rem;min-height:38px;min-width:38px;justify-content:center}
.messages{min-height:0}
.messages-inner{padding:.8rem .68rem 1rem;gap:.72rem}
.msg{gap:.52rem;max-width:95%}
.msg-avatar{width:28px;height:28px;min-width:28px;font-size:.68rem}
.bubble{max-width:calc(100vw - 72px);padding:.72rem .78rem;font-size:.94rem;line-height:1.55}
.bubble pre{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.bubble code{white-space:pre-wrap;word-break:break-word}
.empty-state{padding:2.5rem .8rem}
.empty-state h2{font-size:1.4rem}
.empty-state p{font-size:.92rem}
.input-area{padding:.55rem .65rem calc(.55rem + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.input-inner{gap:.5rem}
.input-inner textarea{font-size:16px;max-height:35dvh;padding:.72rem .85rem}
.send-btn{width:42px;height:42px;min-width:42px}
}


.run-strip{border-bottom:1px solid var(--line);background:rgba(5,5,16,.72);display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;padding:.45rem 1rem;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:.56rem;color:var(--ink3);flex-shrink:0}
.state-chip{border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--ink2);padding:.32rem .45rem;display:inline-flex;gap:.28rem;align-items:center}
.state-chip strong{color:var(--ink);font-weight:700}
.state-chip.good strong{color:var(--green)}
.state-chip.warn strong{color:#fbbf24}
.state-chip.bad strong{color:#fca5a5}
.run-activity{border-bottom:1px solid var(--line);background:rgba(5,5,16,.56);max-height:0;overflow:hidden;transition:max-height .18s ease;flex-shrink:0}
.run-activity.open{max-height:180px;overflow:auto}
.run-row{display:grid;grid-template-columns:5.2rem 1fr auto;gap:.65rem;padding:.42rem 1rem;border-bottom:1px solid rgba(255,255,255,.045);font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--ink2)}
.run-row:last-child{border-bottom:0}
.run-row .kind{color:var(--green);text-transform:uppercase;letter-spacing:.1em}
.run-row .detail{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-row .when{color:var(--ink3)}
.compaction-notice{align-self:center;border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.08);color:#fde68a;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.11em;font-size:.62rem;padding:.48rem .7rem;max-width:88%;text-align:center}

