:root{color-scheme:dark;--bg:#0c111b;--panel:#131c2a;--line:#29354a;--text:#e4ebf6;--muted:#96a7c1;--accent:#63e6bd;font:14px/1.5 system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text)}
button,input,textarea{font:inherit;color:inherit}
button{border:1px solid var(--line);background:#1a2638;border-radius:7px;padding:7px 11px;cursor:pointer}
button:hover{border-color:var(--accent)}
button:disabled{opacity:.45;cursor:default}
button[aria-pressed=true],button[aria-selected=true]{border-color:var(--accent);color:var(--accent);background:#19342f}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
header{height:64px;display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line)}
.brand{font-size:24px;letter-spacing:-1px;font-weight:750;text-decoration:none;color:var(--text)}
.brand span{color:var(--accent)}
.badge{font-size:10px;letter-spacing:1px;color:var(--muted);margin-right:auto}
main{display:grid;grid-template-columns:215px minmax(0,1fr) 270px;height:calc(100dvh - 64px)}
aside{padding:18px;overflow:auto;background:var(--panel)}
.left{border-right:1px solid var(--line)}
.right{border-left:1px solid var(--line)}
h1{font-size:19px;margin:0}
h2{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin:24px 0 12px;color:var(--muted)}
.muted{color:var(--muted);font-size:12px}
#scenes,#layers{display:grid;gap:7px;margin-bottom:12px}
#layers button{text-align:left}
#history{padding-left:18px;font-size:11px;color:var(--muted)}
.center{min-width:0;display:flex;flex-direction:column;overflow:hidden}
.toolbar{display:flex;gap:6px;align-items:center;padding:10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.spacer{flex:1}
#canvas{position:relative;flex:1;min-height:320px;overflow:hidden;background-image:radial-gradient(#2b3950 1px,transparent 1px);background-size:22px 22px;touch-action:none}
#canvas[data-mode=pan]{cursor:grab}
#canvas[data-mode=connect]{cursor:crosshair}
#world{position:absolute;transform-origin:0 0;width:1600px;height:1100px}
#connections{position:absolute;width:1600px;height:1100px;pointer-events:none}
#connections path{fill:none;stroke:#63e6bd;stroke-width:2}
.card{position:absolute;width:245px;min-height:140px;background:#172336;border:1px solid #394a65;border-radius:12px;padding:16px;box-shadow:0 15px 40px #0003;cursor:move;user-select:none}
.card.selected{outline:2px solid var(--accent);outline-offset:3px}
.card h3{font-size:15px;margin:0 0 8px}
.card p{color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.card .kind{color:var(--accent);font-size:10px;letter-spacing:1px;text-transform:uppercase}
.card.visual{width:580px}
.delta-visual{width:100%;display:block}
.graft{opacity:.12}
.validation{opacity:0}
.support{opacity:1}
.leaf{fill:#a89bff}
.delta-visual[data-phase="1"] .validation{opacity:1;animation:pulse 1.2s infinite}
.delta-visual[data-phase="2"] .graft,.delta-visual[data-phase="3"] .graft,.delta-visual[data-phase="4"] .graft{opacity:1}
.delta-visual[data-phase="2"] .leaf,.delta-visual[data-phase="3"] .leaf,.delta-visual[data-phase="4"] .leaf{fill:#63e6bd}
.delta-visual[data-phase="3"] .support,.delta-visual[data-phase="4"] .support{opacity:0;transform:translate(495px,70px) scale(0)}
.delta-visual[data-phase="4"] .locus{stroke-width:7}
.support,.graft,.leaf,.locus{transition:all .6s ease}
@keyframes pulse{50%{stroke-width:8;opacity:.4}
}
footer{display:flex;align-items:center;gap:8px;padding:9px;border-top:1px solid var(--line);font-size:11px}
#status{flex:1;color:var(--muted)}
label{display:block;margin:12px 0 5px;font-size:12px}
input,textarea{width:100%;padding:9px;background:#0e1725;border:1px solid var(--line);border-radius:7px}
textarea{resize:vertical}
fieldset{border:0;padding:0;margin:15px 0}
legend{font-size:12px;margin-bottom:8px}
#targets{display:flex;gap:6px;flex-wrap:wrap}
#targets button{font-size:11px}
.primary{background:var(--accent);color:#10221e;width:100%;font-weight:650}
#delete-card{margin-top:8px}
#timeline{padding:12px 18px;background:var(--panel)}
#timeline input{width:60%;vertical-align:middle}
dialog{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(420px,100%);background:var(--panel);color:var(--text);border:1px solid var(--line);padding:24px}
dialog::backdrop{background:#0008}
dialog button{margin:7px 0}
.close{float:right}
hr{border:0;border-top:1px solid var(--line);margin-top:25px}
[hidden]{display:none!important}
@media(max-width:1100px){main{grid-template-columns:170px minmax(0,1fr) 220px}
aside{padding:12px}
.badge{display:none}
.brand{margin-right:auto}
}
@media(max-width:760px){html,body{max-width:100%;overflow-x:hidden}header{padding:8px;gap:6px;height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto auto;width:100%}header .brand{min-width:0}header .badge{display:none}header button{font-size:11px}header #open-export{grid-column:1/-1;width:100%}main{height:auto;display:flex;flex-direction:column;max-width:100%}.center{order:0;height:70dvh;min-height:440px;max-width:100%}.left{order:1;border-top:1px solid var(--line)}.right{order:2;border-top:1px solid var(--line)}#scenes,#layers{display:flex;flex-wrap:wrap}#history{max-height:100px;overflow:auto}.toolbar{max-width:100%;overflow-x:auto;flex-wrap:nowrap}.toolbar .spacer{display:none}.toolbar button{font-size:11px;flex:0 0 auto}.card.visual{left:16px!important;width:calc(100vw - 32px);max-width:580px}.card.visual .delta-visual{height:auto}footer{flex-wrap:wrap;max-width:100%}#timeline{max-width:100%;overflow-x:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
.validation{stroke-width:5}
}

.generated-media{display:block;width:100%;max-height:420px;object-fit:contain;margin-top:12px;border-radius:10px;background:#08101b;border:1px solid var(--line)}

/* Chat-first creative-director shell. Existing canvas/operator rules above stay
   intact so Advanced mode remains the same capable workspace. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.eyebrow{font-size:10px;line-height:1.2;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);font-weight:700}
main.chat-first-layout{height:calc(100dvh - 64px);display:grid;grid-template-columns:minmax(360px,.9fr) minmax(0,1.45fr);grid-template-rows:minmax(0,1fr) auto;background:radial-gradient(circle at 15% 10%,#193129 0,transparent 30%),var(--bg)}
.chat-panel{min-width:0;overflow:auto;padding:clamp(20px,4vw,52px);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:18px}
.chat-intro{max-width:680px}
.chat-intro h1{font-size:clamp(30px,4vw,54px);line-height:1.02;letter-spacing:-2px;margin:10px 0 14px}
.chat-intro p{color:var(--muted);font-size:16px;max-width:560px;margin:0}
.quick-chips{display:flex;flex-wrap:wrap;gap:8px}
.quick-chips button{border-radius:999px;background:#101b29}
.chat-history{display:grid;gap:12px}
.chat-message{max-width:88%;padding:12px 15px;border:1px solid var(--line);border-radius:14px;background:#111b29}
.chat-message.user{justify-self:end;background:#19342f;border-color:#2e6659}
.chat-message span{display:block;color:var(--accent);font-size:10px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.chat-message p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.build-plan{padding:16px;border:1px solid #36506c;border-radius:16px;background:linear-gradient(145deg,#152337,#111925);box-shadow:0 20px 55px #0003}
.build-plan h2,.canvas-title h2{font-size:18px;text-transform:none;letter-spacing:0;color:var(--text);margin:5px 0}
.build-plan>p{color:var(--muted);margin:6px 0 14px}
.plan-scenes{display:grid;gap:9px}
.plan-scene{padding:12px;border:1px solid var(--line);border-radius:11px;background:#0d1724}
.plan-scene h3{font-size:14px;margin:0 0 3px}.plan-scene p{color:var(--muted);font-size:12px;margin:0 0 8px}
.plan-outputs{display:flex;flex-wrap:wrap;gap:6px}.plan-output{font-size:11px;border-radius:999px;padding:4px 8px;background:#1d3040;color:#c6f8e9}
.plan-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.plan-actions .primary{width:auto}
.chat-composer{position:sticky;bottom:0;margin-top:auto;padding:10px;border:1px solid #36506c;border-radius:16px;background:#101a28;box-shadow:0 -12px 30px #0c111bcc}
.chat-composer textarea{border:0;background:transparent;min-height:74px;resize:none}.chat-composer textarea:focus{outline:0}
.chat-composer>div{display:flex;align-items:center;justify-content:space-between;gap:12px}.chat-composer .primary{width:auto;min-width:92px}.chat-composer span{color:var(--muted);font-size:11px}
.canvas-shell{min-width:0;overflow:hidden;display:flex;flex-direction:column;padding:18px;background:#0a1019}
.canvas-title{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 4px 12px}.canvas-title>span{font-size:12px;color:var(--muted)}
.canvas-shell .center{flex:1;border:1px solid var(--line);border-radius:15px;background:var(--panel);min-height:0}
.canvas-shell #canvas{min-height:300px}.canvas-shell .card{transform:scale(.88);transform-origin:top left}
.advanced-workspace{grid-column:1/-1;border-top:1px solid var(--line);background:var(--panel);max-height:54dvh;overflow:auto}
.advanced-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(280px,1.3fr);max-width:1100px;margin:auto}
.advanced-grid aside{border:0}.advanced-grid .left{border-right:1px solid var(--line)}
body.advanced-open main.chat-first-layout{grid-template-rows:minmax(420px,1fr) auto}

@media(max-width:900px){main.chat-first-layout{height:auto;display:flex;flex-direction:column}.chat-panel{order:0;min-height:calc(100dvh - 58px);border-right:0;border-bottom:1px solid var(--line);padding:24px 16px}.canvas-shell{order:1;height:58dvh;min-height:430px;padding:10px}.advanced-workspace{order:2;max-height:none}.advanced-grid{grid-template-columns:1fr}.advanced-grid .left{border-right:0;border-bottom:1px solid var(--line)}.chat-intro h1{font-size:38px}.chat-message{max-width:94%}}
@media(max-width:560px){.plan-actions{display:grid;grid-template-columns:1fr}.plan-actions .primary{width:100%}.canvas-title{align-items:flex-start}.canvas-title>span{max-width:42%;text-align:right}.advanced-grid aside{padding:16px}.quick-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.quick-chips button{flex:0 0 auto}}

/* Preview is the default; editing tools live in the hidden Advanced section. */
header .badge{display:inline;font-size:11px;letter-spacing:.3px;margin-right:auto}
header .brand{margin-right:0}
.advanced-tools{position:sticky;top:0;z-index:1;background:var(--panel)}
body:not(.advanced-open) #canvas{background-image:none;touch-action:pan-y}
body:not(.advanced-open) .card{cursor:default;user-select:text}
@media(max-width:760px){header{grid-template-columns:minmax(0,1fr) auto auto}header .brand{grid-column:1;grid-row:1}header .badge{grid-column:1;grid-row:2;font-size:10px}header #advanced-toggle{grid-column:2;grid-row:1/3}header #open-export{grid-column:3;grid-row:1/3;width:auto}header .brand{font-size:22px}}

/* Phone containment: chat is the primary interaction, never wider than viewport. */
@media(max-width:560px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  header{width:100%;max-width:100%;grid-template-columns:minmax(0,1fr) auto;padding:10px 12px}
  header .brand,header .badge{min-width:0;max-width:100%}
  header #advanced-toggle{grid-column:2;grid-row:1/3}
  header #open-export{grid-column:1/-1;grid-row:3;width:100%;margin-top:4px}
  main.chat-first-layout,.chat-panel,.chat-intro,.chat-history,.build-plan,.chat-composer,.canvas-shell{width:100%;max-width:100%;min-width:0}
  .chat-panel{padding:22px 16px;overflow-x:hidden}
  .chat-intro h1{font-size:clamp(34px,11vw,42px);line-height:1.02;letter-spacing:-1.6px;overflow-wrap:anywhere}
  .chat-intro p,.chat-message p,.build-plan p{overflow-wrap:anywhere}
  .quick-chips{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .quick-chips::-webkit-scrollbar{display:none}
  .chat-message{max-width:100%}
  .chat-composer{left:0;right:0;width:100%;max-width:100%}
  .chat-composer>div{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto}
  .chat-composer .primary{min-width:88px}
  .canvas-shell{overflow:hidden}
}