.studio{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:#111019;color:var(--ink)}
.studio-bar{min-height:52px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--line);background:var(--surface);overflow:visible}
.studio-brand{display:flex;align-items:center;flex:0 0 auto}.studio-bar strong{font-size:15px}
.studio select,.studio textarea,.sbtn{font:12px var(--mono);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:7px}
.studio select{padding:7px;min-width:130px}.sbtn{padding:7px 10px;cursor:pointer;white-space:nowrap}.sbtn:hover{border-color:var(--grape);text-decoration:none}.sbtn.primary{background:var(--acid);color:var(--acid-ink);border-color:var(--acid);font-weight:700}
.studio-workspace{flex:1;min-height:0;overflow:hidden;display:grid;grid-template-columns:210px minmax(360px,1fr) minmax(360px,1fr)}
.files-pane,.code-pane,.preview-pane{min-width:0;min-height:0;overflow:hidden;border-right:1px solid var(--line);display:flex;flex-direction:column}
.pane-title{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:var(--surface);border-bottom:1px solid var(--line);font:12px var(--mono);color:var(--dim)}
.pane-title button,.preview-tabs button{border:0;background:transparent;color:var(--dim);cursor:pointer}.pane-title button:hover,.preview-tabs button:hover{color:var(--ink)}
#file-tree{display:flex;flex:1;min-height:0;align-items:stretch;flex-direction:column;margin:0;padding:7px;overflow-y:auto;overflow-x:hidden;width:100%}
#file-tree button{display:flex;align-items:center;justify-content:flex-start;gap:7px;width:100%;min-width:0;border:0;background:transparent;text-align:left;color:var(--dim);padding:6px 8px;border-radius:6px;font:12px var(--mono);cursor:pointer}
#file-tree button:hover{background:rgba(var(--grape-rgb),.08);color:var(--ink)}#file-tree button.active{background:rgba(var(--acid-rgb),.13);color:var(--acid)}
#file-tree .file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-dot{width:7px;height:7px;flex:0 0 7px;border-radius:2px;background:var(--muted)}.file-dot.html{background:#e7a1b5}.file-dot.css{background:#8fcbd3}.file-dot.js{background:#d6dba0}.file-dot.py{background:#8fd5a2}.file-dot.mojo{background:#e3b790}.file-dot.json{background:#bca9dc}
#file-tree .file-folder{display:flex;align-items:center;gap:6px;padding:7px 8px 3px;color:#766d83;font:10px var(--mono);letter-spacing:.04em;text-transform:uppercase}.file-folder::before{content:'⌄';color:var(--muted)}
.template-box{flex:0 0 auto;margin-top:auto;padding:10px;border-top:1px solid var(--line);display:grid;gap:7px}.template-box label{font-size:11px;color:var(--dim)}
#source{width:100%;height:100%;resize:none;border:0;border-radius:0;padding:16px;background:var(--code);color:var(--ink);font:13px/1.55 var(--mono);outline:none;tab-size:2;white-space:pre}
.code-pane>.CodeMirror{flex:1;min-height:0;height:auto;background:var(--code);font:13px/1.55 var(--mono)}.CodeMirror-scroll{min-height:0;overflow:auto!important}.CodeMirror-lines{padding:10px 0 40px}.CodeMirror pre{padding:0 12px}.CodeMirror-gutters{border-right:1px solid #2c2738;background:#111019}.CodeMirror-linenumber{padding:0 9px 0 5px;color:#625a70}.CodeMirror-activeline-background{background:rgba(var(--grape-rgb),.07)}.CodeMirror-matchingbracket{color:var(--acid)!important;border-bottom:1px solid var(--acid)}
.statusline{flex:0 0 24px;height:24px;padding:3px 9px;display:flex;justify-content:space-between;color:var(--dim);font:10px var(--mono);background:var(--surface);border-top:1px solid var(--line)}
.preview-tabs{height:38px;display:flex;align-items:end;gap:3px;padding:0 8px;background:var(--surface);border-bottom:1px solid var(--line)}.preview-tabs button{padding:9px 10px 7px;font:12px var(--mono)}.preview-tabs button.active{color:var(--acid);border-bottom:2px solid var(--acid)}
.tab-panel{display:none;flex:1;min-height:0}.tab-panel.active{display:flex;flex-direction:column}#preview{width:100%;height:100%;border:0;background:#fff}
#function-panel{padding:14px;gap:10px;overflow:auto}#function-panel label{display:grid;gap:5px;color:var(--dim);font-size:12px}#function-panel textarea{min-height:100px;padding:10px;resize:vertical}#function-output{flex:1;min-height:130px;margin:0;white-space:pre-wrap;overflow:auto}
.agent-toggle[aria-expanded="true"]{border-color:var(--acid);color:var(--acid)}
.agent-sidebar{position:absolute;z-index:30;inset:0 0 0 auto;width:min(420px,38vw);min-width:340px;display:flex;flex-direction:column;background:#15121c;border-left:1px solid var(--line);box-shadow:-24px 0 70px #0008}
.agent-sidebar[hidden]{display:none}.agent-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:linear-gradient(110deg,rgba(var(--acid-rgb),.08),transparent 48%)}
.agent-head>div{display:grid;gap:2px}.agent-head strong{font-size:15px}.agent-kicker{color:var(--acid);font:9px var(--mono);letter-spacing:.12em}.agent-close{border:0;background:transparent;color:var(--dim);font-size:24px;line-height:1;cursor:pointer}.agent-close:hover{color:var(--ink)}
.agent-thread{flex:1;min-height:0;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:11px}.agent-empty{margin:auto 0;padding:18px;border:1px dashed var(--line);border-radius:10px;color:var(--dim)}.agent-empty strong{color:var(--ink)}.agent-empty p{margin:7px 0 0;font-size:12px;line-height:1.55}
.agent-message{padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);white-space:pre-wrap;font:12px/1.55 var(--mono);overflow-wrap:anywhere}.agent-message.user{align-self:flex-end;max-width:90%;background:rgba(var(--acid-rgb),.1);border-color:rgba(var(--acid-rgb),.28)}.agent-message.reasoning{color:var(--dim);border-style:dashed}.agent-message.tool{padding:7px 10px;color:var(--dim);font-size:10px}.agent-message.error{color:#ffaaa0;border-color:#7a393f}.agent-message.usage{color:var(--acid);font-size:10px}
.agent-compose{flex:0 0 auto;padding:12px;border-top:1px solid var(--line);display:grid;gap:9px;background:#111019}.agent-compose textarea{width:100%;min-height:90px;max-height:220px;padding:10px;resize:vertical}.agent-options{display:grid;grid-template-columns:1fr 100px;gap:8px}.agent-options label{display:grid;gap:4px;color:var(--dim);font:9px var(--mono);text-transform:uppercase;letter-spacing:.07em}.agent-options select{min-width:0;width:100%;padding:6px}.agent-actions{display:flex;gap:7px;flex-wrap:wrap}.agent-meter{display:flex;justify-content:space-between;gap:8px;color:var(--dim);font:10px var(--mono)}.agent-meter a{color:var(--acid)}
#studio-toast{position:fixed;right:20px;bottom:20px;z-index:20;padding:11px 14px;border-radius:9px;background:var(--panel);border:1px solid var(--acid);box-shadow:0 8px 30px #0008;font-size:13px}
@media(max-width:900px){body.full-bleed{height:auto;overflow:auto}.studio{min-height:0}.studio-workspace{flex:none;height:auto;overflow:visible;grid-template-columns:140px minmax(0,1fr);grid-template-rows:minmax(460px,62vh) minmax(520px,72vh)}.preview-pane{grid-column:1/-1}.code-pane>.CodeMirror{height:100%}.agent-sidebar{position:fixed;inset:0 0 0 auto;width:min(420px,100vw);min-width:0;height:100dvh}}
@media(max-width:520px){.studio-workspace{grid-template-columns:126px minmax(0,1fr);grid-template-rows:58vh 68vh}.pane-title{padding:0 8px}.template-box{padding:8px}.template-box select{min-width:0;width:100%}#file-tree{padding:5px}#file-tree button{padding:6px 5px}.CodeMirror pre{padding:0 8px}.studio-bar{padding:8px 12px}}