:root{--bg:#080a0d;--panel:#11161c;--panel-2:#171f27;--line:#2c3943;--line-strong:#465969;--text:#f7efe2;--muted:#aeb9bd;--gold:#e6ba62;--red:#b85050;--teal:#52c3b0;--ink:#090d11;--shadow:0 24px 60px #00000052}*{box-sizing:border-box}html,body{min-height:100%}body{background:linear-gradient(90deg, #e9b95f14 1px, transparent 1px), linear-gradient(0deg, #4fb7a70d 1px, transparent 1px), radial-gradient(circle at 50% -20%, #52c3b02e, transparent 34rem), var(--bg);color:var(--text);background-size:44px 44px,44px 44px,auto,auto;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}.app-shell{grid-template-columns:minmax(280px,330px) minmax(0,1fr);min-height:100vh;display:grid}.side-panel{border-right:1px solid var(--line);background:#15120eeb;flex-direction:column;gap:18px;padding:22px;display:flex}.brand-block,.topbar,.section-title,.toggle-row,.side-actions,.status-pill,.composer{align-items:center;display:flex}.brand-block{gap:12px;min-height:58px}.brand-mark,.gate-mark,.message-avatar,.composer-mode{border:1px solid var(--line-strong);color:var(--gold);background:#141b22;place-items:center;display:grid}.brand-mark{border-radius:8px;width:48px;height:48px;position:relative}.brand-mark svg:last-child{color:var(--teal);position:absolute;bottom:8px;right:8px}.eyebrow{color:var(--muted);letter-spacing:0;text-transform:uppercase;margin:0 0 2px;font-size:.74rem}h1,h2{letter-spacing:0;margin:0}h1{font-size:clamp(1.2rem,3vw,1.42rem)}h2{font-size:clamp(1.1rem,2.6vw,1.55rem)}.control-group{border:1px solid var(--line);background:#1d1913b8;border-radius:8px;gap:12px;padding:14px;display:grid}.section-title{color:var(--gold);gap:8px;font-weight:700}.segment{grid-template-columns:1fr 1fr;gap:8px;display:grid}.segment button,.side-actions button,.composer button,.gate-field button,.action-row button,.artifact-actions button,.artifact-actions a{border:1px solid var(--line-strong);min-height:42px;color:var(--text);background:#141b22;border-radius:8px;justify-content:center;align-items:center;gap:8px;font-weight:800;text-decoration:none;display:inline-flex}.segment button.active{border-color:var(--gold);color:#ffe5ad;background:#243142}label{color:var(--muted);gap:7px;font-size:.82rem;font-weight:700;display:grid}input,textarea,select{border:1px solid var(--line);width:100%;color:var(--text);background:#0a0f14;border-radius:8px;outline:none;padding:10px 11px}textarea{resize:vertical}input:focus,textarea:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 3px #e9b95f29}input[type=range]{accent-color:var(--gold);padding:0}.range-value{color:var(--teal);justify-self:end;margin-top:-22px}.toggle-row{border:1px solid var(--line);width:100%;min-height:42px;color:var(--text);background:#0a0f14;border-radius:8px;justify-content:space-between;padding:0 11px}.toggle-row.on{border-color:var(--teal);color:#d7fff8}.toggle-row strong{color:var(--gold)}.side-actions{gap:10px;margin-top:auto}.side-actions button{flex:1}.chat-shell{grid-template-rows:auto auto minmax(0,1fr) auto;min-height:100vh;padding:22px;display:grid}.topbar{border-bottom:1px solid var(--line);grid-row:1;justify-content:space-between;gap:14px;padding:0 0 18px}.status-pill{border:1px solid var(--line-strong);min-height:36px;color:var(--gold);background:#15120edb;border-radius:999px;gap:7px;padding:0 13px;font-weight:800}.message-list{flex-direction:column;grid-row:3;gap:16px;padding:24px 0;display:flex;overflow-y:auto}.message{grid-template-columns:34px minmax(0,760px);gap:11px;display:grid}.message.user{justify-content:end}.message-avatar{border-radius:8px;width:34px;height:34px}.message-body{border:1px solid var(--line);box-shadow:var(--shadow);background:#15120ed1;border-radius:8px;padding:13px 42px 13px 14px;position:relative}.message.user .message-body{background:#243142e0;border-color:#e9b95f6b}.message-body p{color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;line-height:1.55}.copy-button{border:1px solid var(--line);width:28px;height:28px;color:var(--muted);background:#0a0f14;border-radius:6px;place-items:center;display:grid;position:absolute;top:8px;right:8px}.image-response{gap:10px;display:grid}.image-response a{border-radius:8px;display:block;overflow:hidden}.image-response img{aspect-ratio:1;object-fit:cover;border:1px solid var(--line-strong);background:var(--ink);border-radius:8px;width:min(100%,560px);display:block}.loading-line{width:fit-content;color:var(--muted);align-items:center;gap:8px;display:inline-flex}.loading-line svg,.composer button:disabled svg{animation:1s linear infinite spin}.composer{border:1px solid var(--line-strong);background:#15120ef0;border-radius:8px;grid-row:4;gap:10px;padding:10px}.composer-mode{border-radius:8px;flex:0 0 42px;width:42px;height:42px}.composer textarea{resize:none;background:0 0;border:0;min-height:46px;max-height:180px;padding:12px 4px}.composer textarea:focus{box-shadow:none}.composer button{background:var(--gold);color:#141006;min-width:118px}.channel-note{color:var(--muted);margin:0;font-size:.82rem;line-height:1.55}.permission-row{flex-wrap:wrap;gap:7px;display:flex}.permission-row span,.artifact-card span{border:1px solid var(--line);color:#c9fff6;background:#52c3b014;border-radius:999px;align-items:center;min-height:24px;padding:0 9px;font-size:.74rem;font-weight:800;display:inline-flex}.notice{border:1px solid var(--line-strong);border-radius:8px;grid-row:2;margin-top:14px;padding:10px 12px;font-weight:800}.notice.ok{color:#d6fff8;background:#52c3b01a;border-color:#52c3b09e}.notice.error{color:#ffc7bd;background:#b8505021;border-color:#b85050b8}.workspace-shell{grid-row:3;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:18px;min-height:0;padding:24px 0 0;display:grid;overflow:hidden}.html-workspace{grid-template-columns:minmax(320px,460px) minmax(0,1fr)}.tool-panel,.artifact-card,.empty-state{border:1px solid var(--line);box-shadow:var(--shadow);background:#11161cdb;border-radius:8px}.tool-panel{align-self:start;gap:14px;padding:15px;display:grid}.html-editor{align-self:stretch}.code-input{min-height:320px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;line-height:1.5}.hint-line,.empty-state{color:var(--muted);margin:0;line-height:1.5}.action-row,.artifact-actions{flex-wrap:wrap;gap:10px;display:flex}.action-row button{flex:1}.artifact-list{flex-direction:column;gap:12px;min-height:0;padding-right:4px;display:flex;overflow-y:auto}.artifact-card{grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;display:grid}.artifact-icon{border:1px solid var(--line-strong);width:42px;height:42px;color:var(--gold);background:#0a0f14;border-radius:8px;place-items:center;display:grid}.artifact-card h3{letter-spacing:0;overflow-wrap:anywhere;margin:0 0 4px;font-size:1rem}.artifact-card p{color:var(--muted);margin:0 0 8px;font-size:.82rem;line-height:1.45}.artifact-actions{justify-content:flex-end}.artifact-actions button,.artifact-actions a{min-height:36px;padding:0 11px}.empty-state{padding:16px}.gate-shell{place-items:center;min-height:100vh;padding:22px;display:grid}.gate-panel{border:1px solid var(--line-strong);width:min(100%,430px);box-shadow:var(--shadow);background:#15120ef0;border-radius:8px;gap:16px;padding:24px;display:grid}.gate-mark{border-radius:8px;width:46px;height:46px}.gate-field{grid-template-columns:minmax(0,1fr) auto;gap:10px;display:grid}.gate-error{color:#ffb5a8;margin:0}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:880px){.app-shell{grid-template-columns:1fr}.side-panel{border-right:0;border-bottom:1px solid var(--line)}.chat-shell{min-height:70vh}.workspace-shell,.html-workspace{grid-template-columns:1fr;overflow:visible}.artifact-list{padding-right:0;overflow:visible}}@media (max-width:560px){.side-panel,.chat-shell{padding:14px}.topbar,.composer,.gate-field{align-items:stretch}.composer,.gate-field{grid-template-columns:1fr;display:grid}.composer-mode{display:none}.composer button,.gate-field button{width:100%}.message{grid-template-columns:30px minmax(0,1fr)}.artifact-card{grid-template-columns:36px minmax(0,1fr)}.artifact-actions{grid-column:1/-1;justify-content:stretch}.artifact-actions button,.artifact-actions a{flex:1}}
