:root{--bg: #0f1115;--surface: #171a21;--surface-2: #1f232c;--border: #2a2f3a;--text: #e7e9ee;--text-dim: #9aa1b0;--primary: #6c8dff;--primary-text: #0b0d12;--error: #ff6b6b;--accent: #52d29a;--radius: 12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}code{background:var(--surface-2);border-radius:4px;padding:1px 5px;font-size:.92em}.app{display:flex;flex-direction:column;height:100vh;max-width:1180px;margin:0 auto;padding:0 20px}.app__header{padding:20px 0 12px;border-bottom:1px solid var(--border)}.app__header h1{font-size:20px;margin:0 0 6px}.app__subtitle{margin:0;color:var(--text-dim);font-size:13px;max-width:760px;line-height:1.5}.banner{padding:10px 14px;border-radius:var(--radius);margin:12px 0;font-size:13px}.banner--error{background:#ff6b6b1f;color:var(--error);border:1px solid rgba(255,107,107,.35)}.panes{flex:1;display:flex;gap:16px;padding:16px 0;min-height:0}.pane{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.pane__header{padding:12px 16px;border-bottom:1px solid var(--border)}.pane__header h2{margin:0 0 2px;font-size:14px}.pane__subtitle{margin:0;color:var(--text-dim);font-size:12px}.pane__latency{margin:6px 0 0;font-size:11.5px;color:var(--accent);font-weight:600}.pane__messages{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}.bubble{max-width:92%;padding:10px 14px;border-radius:var(--radius);font-size:16px;line-height:1.5;white-space:pre-wrap}.bubble--user{align-self:flex-end;background:var(--primary);color:var(--primary-text)}.bubble--agent{align-self:flex-start;background:var(--surface-2);border:1px solid var(--border)}.bubble--status{align-self:flex-start;color:var(--text-dim);font-style:italic;font-size:12.5px;padding:4px 14px}.bubble--delegation{align-self:flex-start;background:#f59e0b1a;border:1px solid rgba(245,158,11,.35);color:#b45309;font-size:12.5px}.bubble--activity{align-self:flex-start;background:#6c8dff1a;border:1px solid rgba(108,141,255,.35);color:var(--primary);font-size:12.5px}.bubble__detail{margin:6px 0 0;padding:6px 8px;max-height:140px;overflow-y:auto;background:var(--surface-2);border-radius:6px;font-size:11.5px;color:var(--text-dim);white-space:pre-wrap}.bubble--error{align-self:flex-start;display:flex;align-items:flex-start;gap:8px;background:#fff7ed;border:1px solid #fcd34d;color:#92400e}.bubble__warn{flex-shrink:0;line-height:1.4}.cursor{display:inline-block;width:2px;height:14px;margin-left:2px;vertical-align:-2px;background:var(--accent);animation:blink 1s step-start infinite}@keyframes blink{50%{opacity:0}}.composer{display:flex;gap:8px;padding:14px 0 20px;border-top:1px solid var(--border)}.composer input{flex:1;background:var(--surface);border:1px solid color-mix(in srgb,var(--text) 40%,transparent);color:var(--text);padding:14px;min-height:5rem;border-radius:var(--radius);font-size:16px}.composer input:focus{outline:none;border-color:var(--text)}.composer button{border:none;border-radius:var(--radius);padding:10px 16px;font-size:14px;cursor:pointer;background:var(--primary);color:var(--primary-text);font-weight:600}.composer button:disabled{opacity:.4;cursor:not-allowed}