/* A first idea becomes the same prompt used by the live design preview. */
.studio-body { position:relative; }
.studio-body[data-intro=composing] .agent-panel { position:relative; z-index:8; overflow:visible; }
.studio-body[data-intro] .message-owner { position:relative; }
.studio-body .message-owner.prompt-flying { position:fixed; z-index:12; margin:0; max-width:none; transform:none; }
.studio-body:is([data-intro=typing],[data-intro=submitted]) .design-stamp { visibility:hidden; }
.intro-heading, .prompt-submit, .studio-body .message-owner .prompt-placeholder { display:none; }
.restaurant-site[data-view=blank] { background:#fafbf7; }

/* Keep the owner's direction legible after it settles into the builder. */
.demo-focus-dialog .message-owner,
.message-owner { border:1px solid #cbd4bf; background:#f3f6ed; border-radius:9px; font-size:13px; font-weight:600; line-height:1.6; color:#35412e; }
.demo-focus-dialog .message-owner { padding:12px; font-size:13px; }
.message-owner .message-author { color:#697857; }
.studio-body[data-intro=""] .message-owner:not(.prompt-flying) { transform:scale(calc(1 + var(--prompt-pulse,0) * .05)); transform-origin:center; background:color-mix(in srgb,#f3f6ed,#dbe7bd calc(var(--prompt-pulse,0) * 100%)); border-color:color-mix(in srgb,#cbd4bf,#758f43 calc(var(--prompt-pulse,0) * 100%)); box-shadow:0 0 0 calc(var(--prompt-pulse,0) * 4px) #d4dfa65c; }

/* The opening card sits over the empty canvas without removing the preview. */
.studio-body:is([data-intro=typing],[data-intro=submitted]) .preview-workspace { grid-column:2; opacity:.5; pointer-events:none; }
.studio-body:is([data-intro=typing],[data-intro=submitted]) .agent-panel { position:absolute; z-index:8; left:50%; top:50%; transform:translate(-50%,-50%); width:min(570px,calc(100% - 56px)); max-height:calc(100% - 36px); display:flex; flex-direction:column; align-items:stretch; padding:26px; border:1px solid #d1d9c7; border-radius:16px; background:#fffefb; box-shadow:0 18px 65px #2b3a251b,0 2px 8px #2b3a2508; overflow:auto; }
.studio-body:is([data-intro=typing],[data-intro=submitted]) .intro-heading { display:block; margin-bottom:21px; }
.intro-heading>p { color:#718161; font-size:8px; font-weight:700; letter-spacing:1.9px; margin-bottom:11px; }
.intro-heading>h2 { font:400 34px/1.06 Georgia,serif; letter-spacing:-1px; max-width:440px; color:#303b28; }
.studio-body:is([data-intro=typing],[data-intro=submitted]) .agent-heading { padding-bottom:12px; flex-direction:row; gap:9px; }
.studio-body:is([data-intro=typing],[data-intro=submitted]) .agent-heading strong { font-size:12px; }
.studio-body:is([data-intro=typing],[data-intro=submitted]) .agent-heading div>span { display:none; }
.studio-body:is([data-intro=typing],[data-intro=submitted]) .agent-symbol { width:26px; height:26px; }
.studio-body:is([data-intro=typing],[data-intro=submitted]) .agent-symbol svg { width:20px; height:20px; }
.studio-body:is([data-intro=typing],[data-intro=submitted]) .conversation { min-height:0; }
.studio-body:is([data-intro=typing],[data-intro=submitted]) .message-owner { margin:0; min-height:0; padding:19px; border:1px solid #b8c4a9; border-radius:10px; background:#f6f8f1; font-size:18px; font-weight:400; line-height:1.55; box-shadow:0 0 0 3px #eef2e7; }
.studio-body:is([data-intro=typing],[data-intro=submitted]) .message-author { display:none; }
.studio-body:is([data-intro=typing],[data-intro=submitted]) #owner-prompt { min-height:84px; max-width:none; display:block; -webkit-line-clamp:unset; overflow:visible; }
.studio-body:is([data-intro=typing],[data-intro=submitted]) .message-owner[data-empty=true] #owner-prompt { display:none; }
.studio-body:is([data-intro=typing],[data-intro=submitted]) .message-owner[data-empty=true] .prompt-placeholder { display:block; color:#a0a994; min-height:84px; }
.studio-body[data-intro=typing] .message-owner[data-empty=false] #owner-prompt::after { content:''; display:inline-block; height:1em; border-left:1.5px solid #72865b; vertical-align:-.12em; margin-left:3px; }
.studio-body:is([data-intro=typing],[data-intro=submitted]) .prompt-submit { display:flex; align-items:center; justify-content:center; gap:13px; min-height:39px; margin:18px 0 0 auto; padding:10px 14px; border:1px solid #35412e; border-radius:5px; background:#35412e; color:#fffdf3; font-size:11px; font-weight:600; }
.prompt-submit svg { width:15px; height:15px; }
.studio-body[data-intro=submitted] .prompt-submit { background:#526743; border-color:#526743; box-shadow:0 0 0 3px #dfe8d4; transform:translateY(1px); }
.studio-body:is([data-intro=typing],[data-intro=submitted],[data-intro=composing]) .message-agent,
.studio-body:is([data-intro=typing],[data-intro=submitted],[data-intro=composing]) .directions,
.studio-body:is([data-intro=typing],[data-intro=submitted],[data-intro=composing]) .agent-bottom { display:none; }

/* Timeline-driven values freeze with playback and remain deterministic on scrub. */
.studio-body[data-intro=composing] .editorial-header,
.studio-body[data-intro=composing] .editorial-dateline { opacity:var(--compose-header,0); transform:translateY(calc(8px * (1 - var(--compose-header,0)))); }
.studio-body[data-intro=composing] .editorial-lead { opacity:var(--compose-headline,0); transform:translateY(calc(12px * (1 - var(--compose-headline,0)))); }
.studio-body[data-intro=composing] .editorial-photo { opacity:var(--compose-photo,0); transform:translateY(calc(12px * (1 - var(--compose-photo,0)))); }
.studio-body[data-intro=composing] .editorial-note { opacity:var(--compose-note,0); transform:translateY(calc(12px * (1 - var(--compose-note,0)))); }

@media(max-width:800px) and (min-width:621px) {
  .demo-focus-dialog .message-owner, .message-owner { font-size:12px; }
}

@media(max-width:620px) {
  .demo-focus-dialog .agent-panel { flex-basis:84px; height:84px; }
  .demo-focus-dialog .message-owner { padding:3px 6px; border:1px solid #d4ddc8; border-radius:6px; background:#f3f6ed; font-size:12px; line-height:1.3; }
  .demo-focus-dialog .message-owner p { -webkit-line-clamp:4; }
  .studio-body[data-intro=""] .message-owner:not(.prompt-flying) { transform:scale(calc(1 + var(--prompt-pulse,0) * .065)); }
  .demo-focus-dialog .mobile-direction { width:96px; }
  .studio-body:is([data-intro=typing],[data-intro=submitted]) .agent-panel { width:calc(100% - 26px); max-height:calc(100% - 24px); height:auto; flex-basis:auto; padding:19px; gap:0; border-radius:13px; overflow:auto; }
  .studio-body:is([data-intro=typing],[data-intro=submitted]) .intro-heading { margin-bottom:18px; }
  .intro-heading>p { font-size:7px; letter-spacing:1.6px; margin-bottom:9px; }
  .intro-heading>h2 { font-size:29px; line-height:1.08; letter-spacing:-.7px; }
  .studio-body:is([data-intro=typing],[data-intro=submitted]) .agent-heading { align-items:center; justify-content:flex-start; padding:0 0 11px; }
  .studio-body:is([data-intro=typing],[data-intro=submitted]) .message-owner { padding:14px; font-size:16px; line-height:1.55; }
  .studio-body:is([data-intro=typing],[data-intro=submitted]) #owner-prompt,
  .studio-body:is([data-intro=typing],[data-intro=submitted]) .message-owner[data-empty=true] .prompt-placeholder { min-height:102px; }
  .studio-body:is([data-intro=typing],[data-intro=submitted]) .prompt-submit { font-size:11px; min-height:38px; padding:9px 12px; margin-top:15px; }
  .studio-body[data-intro=composing] .agent-panel { grid-template-columns:24px minmax(0,1fr) 96px; }
}

@media(max-height:480px) and (min-width:621px) {
  .studio-body:is([data-intro=typing],[data-intro=submitted]) .agent-panel { padding:16px; width:min(560px,calc(100% - 50px)); max-height:calc(100% - 16px); }
  .studio-body:is([data-intro=typing],[data-intro=submitted]) .intro-heading { margin-bottom:10px; }
  .intro-heading>h2 { font-size:25px; }
  .studio-body:is([data-intro=typing],[data-intro=submitted]) .message-owner { padding:12px; font-size:14px; }
  .studio-body:is([data-intro=typing],[data-intro=submitted]) #owner-prompt,
  .studio-body:is([data-intro=typing],[data-intro=submitted]) .message-owner[data-empty=true] .prompt-placeholder { min-height:44px; }
  .studio-body:is([data-intro=typing],[data-intro=submitted]) .prompt-submit { margin-top:10px; min-height:32px; padding:7px 12px; }
}

@media(prefers-reduced-motion:reduce) {
  .studio-body { --prompt-pulse:0!important; }
  .studio-body *, .studio-body *::after { transition:none!important; animation:none!important; }
  .studio-body[data-intro=composing] :is(.editorial-header,.editorial-dateline,.editorial-lead,.editorial-photo,.editorial-note) { opacity:1; transform:none; }
}