:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#151915;color:#edf2e8}
*{box-sizing:border-box}body{margin:0;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr)}
main{min-height:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,1fr)}
.preview{display:grid;place-items:center;min-width:0}iframe{width:100%;height:100%;border:0}
.chat{display:flex;flex-direction:column;min-height:0;border-left:1px solid #394339;padding:24px}
header{font-size:24px;font-weight:750;display:flex;align-items:center;justify-content:space-between;gap:12px}
#build-state{font-size:12px;font-weight:400;color:#b7c1b1}
#conversation{flex:1;overflow:auto;line-height:1.6;padding:16px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.user{background:#293127;border-radius:10px;padding:12px}.error{color:#ffbcad}
.typing-indicator{display:flex;align-items:center;gap:5px;width:fit-content;margin:12px 0;padding:16px;background:#20271f;border:1px solid #394339;border-radius:12px}
.typing-dot{width:7px;height:7px;border-radius:50%;background:#b7c1b1;animation:typing-pulse 1.2s ease-in-out infinite}
.typing-dot:nth-of-type(3){animation-delay:.15s}.typing-dot:nth-of-type(4){animation-delay:.3s}
@keyframes typing-pulse{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.typing-dot{animation:none}}
#availability{font-size:12px;color:#b7c1b1}form{display:flex;align-items:end;gap:12px}
textarea{width:100%;resize:vertical;max-height:40vh;background:#20271f;border:1px solid #465440;border-radius:10px;padding:12px;color:inherit;font:inherit}
button{background:#d3ef78;color:#192014;border:0;border-radius:8px;padding:12px 18px;font-weight:700;cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.project-toolbar{padding:12px 24px;border-bottom:1px solid #394339;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#rename-project{flex:1;max-width:560px;min-width:0;align-items:center}
.project-actions{display:flex;gap:8px}.secondary{background:#293127;color:#edf2e8;border:1px solid #465440;white-space:nowrap}
input,select{min-width:0;background:#20271f;border:1px solid #465440;border-radius:8px;padding:10px;color:inherit;font:inherit}
#project-name{flex:1;width:100%;font-weight:650}#project-feedback{font-size:12px;color:#b7c1b1;margin:0}
dialog{color:#edf2e8;background:#1b211b;border:1px solid #465440;border-radius:12px;padding:20px;width:min(850px,calc(100vw - 32px));max-height:85dvh;overflow:auto}
dialog::backdrop{background:#000a}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}h2{font-size:20px;margin:0}
.hint{font-size:13px;color:#b7c1b1;line-height:1.6;overflow-wrap:anywhere}#file-list{width:100%;margin:8px 0}
#file-content{white-space:pre;overflow:auto;max-height:50dvh;min-height:180px;background:#111711;border:1px solid #394339;border-radius:8px;padding:16px;font-size:13px;line-height:1.5}
.export-options{display:flex;gap:12px;flex-wrap:wrap}.export-options a{display:block;padding:14px 18px;border:1px solid #465440;border-radius:8px;color:#d3ef78;text-decoration:none}
[hidden]{display:none!important}:focus-visible{outline:2px solid #d3ef78;outline-offset:3px}
@media(max-width:750px){body{height:auto;display:block}main{min-height:100dvh;grid-template-columns:1fr}.preview{height:65dvh;min-height:420px}.chat{height:60dvh;border-left:0;border-top:1px solid #394339;padding:16px}.project-toolbar{padding:12px}#rename-project{flex-basis:100%;max-width:none}.project-actions{margin-left:auto}dialog{padding:16px}}