:root{--bg:#f6f7f9;--surface:#fff;--fg:#14181f;--muted:#5d6675;--border:#dfe3ea;--primary:#0f6b4e;--danger:#b42318;--warning:#9a5b00;--success:#067647;--info:#175cd3;--radius:10px;--mono:ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Inter",Segoe UI,Roboto,sans-serif}
.muted{color:var(--muted)}.small{font-size:12px}.hidden{display:none!important}.spacer{flex:1}
code{font-family:var(--mono);font-size:12px;background:#eef1f5;padding:1px 5px;border-radius:4px}
.shell-bar{display:flex;align-items:center;gap:14px;height:52px;padding:0 18px;background:#0b1f17;color:#e6f2ec;position:sticky;top:0;z-index:5}.shell-bar .brand{font-weight:700;color:#fff;text-decoration:none}.shell-bar .crumb{color:#b9d3c7}
.pill{font-size:11px;text-transform:uppercase;letter-spacing:.6px;padding:3px 8px;border-radius:999px;background:#1e3b2f;color:#c9e9da}
.knows{font-size:12px;color:#b9d3c7}.knows button{font:inherit;background:none;border:0;color:#9fd3b9;text-decoration:underline;cursor:pointer;padding:0}
.canvas{display:grid;grid-template-columns:480px minmax(0,1fr);height:calc(100vh - 52px)}
.chat{display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--surface);min-height:0}
.messages{list-style:none;margin:0;padding:16px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:10px}
.msg{display:flex;flex-direction:column;gap:3px;max-width:100%}.msg .who{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.msg .bubble{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#fafbfc;font-size:13px;line-height:1.5}
.msg.operator{align-items:flex-end}.msg.operator .bubble{background:#0f6b4e;color:#fff;border-color:#0f6b4e;border-bottom-right-radius:4px}
.msg.dex .bubble{border-bottom-left-radius:4px}.msg.dex .bubble p{margin:0 0 6px}.msg.dex .bubble p:last-child{margin:0}.msg.dex .bubble ul{margin:4px 0;padding-left:18px}
.msg.intro .bubble{background:#eaf2ff;border-color:#c7dafc}
.msg .intent{color:var(--muted);font-style:italic}
.msg.model-thinking .bubble{background:#f8f6ff;border-color:#e1d9fb;padding:6px 10px}.thinking summary{cursor:pointer;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#6b5fa3}.thinking pre{white-space:pre-wrap;margin:6px 0 0;font:inherit;font-size:12px;color:#3d3566;max-height:180px;overflow:auto}
.msg.files .bubble{background:#f0faf5;border-color:#bfe5d2}.filelist{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}.filelist span{font-size:12px}
.msg.ok .bubble{background:#e8f6ee;border-color:#9fd3b9}.msg.failed .bubble{background:#fdecea;border-color:#f4c2bd}
.msg.live .bubble{display:flex;align-items:center;gap:8px;color:var(--muted)}.dot{width:8px;height:8px;border-radius:50%;background:var(--primary);animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.25}}
.sys{font-family:var(--mono);font-size:11px;color:var(--muted);padding:0 4px}
.stages{display:flex;flex-wrap:wrap;gap:6px}.stage{font-size:11px;padding:2px 8px;border-radius:999px;background:#e8f6ee;color:var(--success);font-family:var(--mono)}.stage.bad{background:#fdecea;color:var(--danger)}
.viol{font-family:var(--mono);font-size:11px;margin-top:3px}.viol b{text-transform:uppercase;margin-right:6px}.viol.drop b,.viol.cap b{color:var(--danger)}.viol.strip b{color:var(--warning)}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 8px}.chips button{font:inherit;font-size:12px;border:1px solid var(--border);background:#fafbfc;border-radius:999px;padding:3px 10px;cursor:pointer;color:var(--muted)}.chips button:hover{color:var(--fg);border-color:#b9c2cf}
.composer{padding:10px 16px 12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}.composer textarea{font:inherit;padding:10px;border:1px solid var(--border);border-radius:10px;resize:vertical;width:100%}.composer-row{display:flex;align-items:center;gap:10px}.effort{font-size:12px;color:var(--muted)}.effort select{font:inherit;font-size:12px;margin-left:4px}
.usage{font-size:11px;color:var(--muted);font-family:var(--mono)}
.f-btn{appearance:none;border:1px solid var(--border);background:var(--surface);color:var(--fg);border-radius:8px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}.f-btn:disabled{opacity:.5;cursor:not-allowed}.f-btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}.f-btn-sm{padding:4px 10px;font-size:12px}
.panel{display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.tabs{display:flex;gap:2px;padding:8px 12px 0;background:var(--surface);border-bottom:1px solid var(--border)}.tabs button{font:inherit;font-size:13px;border:0;background:none;padding:8px 12px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent}.tabs button.active{color:var(--fg);border-bottom-color:var(--primary);font-weight:600}
.tab{flex:1;min-height:0;display:flex;flex-direction:column}.tab-scroll{flex:1;overflow:auto;padding:16px 20px}
.preview-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface);font-size:13px}
#preview{flex:1;border:0;width:100%;background:#fff}
.preview-empty{margin:auto;max-width:620px;text-align:center;padding:32px}.steps{display:flex;gap:10px;justify-content:center;align-items:center;margin-bottom:16px;font-size:13px}.steps b{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px 12px}.steps span{color:var(--muted)}
.tab-scroll h4{margin:16px 0 6px;font-size:13px;text-transform:capitalize}.chipgrid{display:flex;flex-wrap:wrap;gap:6px}.chip{font:inherit;font-size:12px;font-family:var(--mono);border:1px solid var(--border);background:var(--surface);border-radius:6px;padding:4px 8px;cursor:pointer}.chip:hover{border-color:#b9c2cf}.chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}.chip.html{color:var(--muted)}
.detail{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin:10px 0}.detail h4{margin:0 0 8px;text-transform:none;font-family:var(--mono)}.kv{border-collapse:collapse;width:100%;font-size:12px}.kv td{padding:3px 6px 3px 0;border-bottom:1px dashed var(--border);vertical-align:top}.codelist{display:flex;flex-wrap:wrap;gap:4px}
.op{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--success);border-radius:var(--radius);padding:10px 14px;margin:8px 0;display:flex;flex-direction:column;gap:4px}.op.write{border-left-color:var(--warning)}.op-head{display:flex;align-items:center;gap:8px}.opid{font-size:13px;background:none;padding:0;font-weight:600}
.badge{font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:999px;background:#e8f6ee;color:var(--success)}.badge.write{background:#fff7e6;color:var(--warning)}.badge.perm{background:#eaf2ff;color:var(--info);text-transform:none;letter-spacing:0}
.sample{margin-top:6px}.f-table{width:100%;border-collapse:collapse}.f-table th,.f-table td{text-align:left;padding:4px 8px;border-bottom:1px solid var(--border);font-size:11px;white-space:nowrap}.f-table th{color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-size:10px}
.files h4{margin:0 0 6px;font-family:var(--mono);font-size:12px;text-transform:none}.files pre{margin:0 0 14px;background:#0f1419;color:#d7dee7;padding:12px;border-radius:8px;font-size:12px;overflow:auto;max-height:460px}
pre.prompt{background:#0f1419;color:#d7dee7;padding:14px;border-radius:8px;font-size:11.5px;white-space:pre-wrap;line-height:1.45}
@media (max-width:1000px){.canvas{grid-template-columns:1fr;height:auto}.chat{border-right:0;border-bottom:1px solid var(--border)}#preview{min-height:70vh}}