/* Chat-style create page */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.composer-page{max-width:760px;margin:0 auto;min-height:calc(100vh - 165px);display:flex;flex-direction:column;justify-content:center;padding-bottom:7vh}
.composer-greeting{text-align:center;font-size:31px;letter-spacing:-1.1px;margin-bottom:28px}
/* Create pages drop the header; soft light drifts slowly behind them */
.create-backdrop{position:fixed;inset:0 0 0 var(--sidebar);overflow:hidden;z-index:-1;pointer-events:none}
.create-backdrop i{position:absolute;width:64vmax;height:64vmax;border-radius:50%;will-change:transform}
.create-backdrop i:nth-child(1){left:-12vmax;top:-30vmax;background:radial-gradient(closest-side,#8b7fe22e,transparent);animation:create-drift-a 34s ease-in-out infinite alternate}
.create-backdrop i:nth-child(2){right:-26vmax;top:4vmax;background:radial-gradient(closest-side,#5fa7b521,transparent);animation:create-drift-b 41s ease-in-out infinite alternate}
.create-backdrop i:nth-child(3){left:10vmax;bottom:-40vmax;background:radial-gradient(closest-side,#d4ac881c,transparent);animation:create-drift-c 47s ease-in-out infinite alternate}
@keyframes create-drift-a{to{transform:translate(18vmax,14vmax) scale(1.14)}}
@keyframes create-drift-b{to{transform:translate(-16vmax,12vmax) scale(.86)}}
@keyframes create-drift-c{to{transform:translate(12vmax,-16vmax) scale(1.1)}}
@media(prefers-reduced-motion:reduce){.create-backdrop i{animation:none}}
.composer{position:relative;background:#1a1923;border:1px solid #ffffff17;border-radius:24px;padding:12px 12px 10px;box-shadow:0 14px 50px #0006;transition:border-color .15s}
.composer:focus-within{border-color:#b9b0f44d}
.composer.is-dragging{border-style:dashed;border-color:var(--accent);background:#1e1c2a}
.composer textarea{display:block;background:none;border:0;border-radius:0;padding:8px 10px 6px;font-size:16px;line-height:1.55;resize:none;min-height:48px;max-height:220px;outline:none;color:#ecebf2}
.composer-attachments{display:flex;flex-wrap:wrap;gap:6px;padding:2px 2px 8px}
.composer-attachments:empty{display:none}
.composer-attachment{display:inline-flex;align-items:center;gap:9px;max-width:270px;padding:7px 7px 7px 10px;border-radius:12px;background:#ffffff08;border:1px solid #ffffff12;color:#bdb8d6}
.composer-attachment>span{min-width:0}
.composer-attachment b,.composer-attachment small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.composer-attachment b{font-size:12px;font-weight:550;color:#e2dff0}
.composer-attachment small{font-size:10px;color:#8a86a2}
.composer-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 9px;border-radius:999px;background:#afa8dc14;border:1px solid #9189c72e;color:#c9c4e6;font-size:11.5px}
.composer-attachment button,.composer-tag button{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#8c87ad;flex-shrink:0}
.composer-attachment button:hover,.composer-tag button:hover{background:#ffffff12;color:#ecebf2}
.composer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.composer-tools{display:flex;align-items:center;gap:4px;min-width:0}
.composer-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.composer-icon{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;color:#b5b1c8;flex-shrink:0;transition:background .15s,color .15s}
.composer-icon:hover,.composer-icon[aria-expanded=true]{background:#ffffff0f;color:#f0eef8}
.composer-icon.small{width:28px;height:28px}
.composer-chip{height:36px;padding:0 11px 0 8px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#d2cee4;border:1px solid #ffffff14;white-space:nowrap;flex-shrink:0;transition:background .15s,border-color .15s}
.composer-chip:hover,.composer-chip[aria-expanded=true]{background:#ffffff0b;border-color:#ffffff24}
.composer-chip>.app-icon:last-child{color:#7f7a9a;margin-left:-2px}
.chip-count{display:inline-flex;align-items:center;gap:2px;color:#9f9ab9;font-size:11.5px}
.composer-avatar.director-portrait,.composer-avatar.actor-portrait{width:22px;height:22px;border-radius:50%;overflow:hidden;position:relative;flex:none}
.composer-send{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;background:var(--accent);color:#1f1d2c;transition:background .15s,transform .15s}
.composer-send:not(:disabled):hover{background:#cbc4fb}
.composer-send:disabled{background:#ffffff14;color:#6f6b89;opacity:1}
#composer-mic.is-listening{background:#e7b49e26;color:#f2bea6;animation:composer-listen 1.4s ease-in-out infinite}
@keyframes composer-listen{50%{box-shadow:0 0 0 7px #e7b49e14}}
.composer-pop{position:relative}
.composer-popover{position:absolute;top:calc(100% + 8px);left:0;z-index:40;width:max-content;min-width:250px;max-width:min(350px,calc(100vw - 32px));background:#1f1d2a;border:1px solid #ffffff1c;border-radius:14px;padding:6px;box-shadow:0 20px 60px #000b}
.composer-popover.opens-up{top:auto;bottom:calc(100% + 8px)}
.composer-popover.aligns-right{left:auto;right:0}
.composer-popover button:not(.composer-icon):not(.team-change){display:flex;width:100%;align-items:center;gap:11px;text-align:left;padding:9px 10px;border-radius:9px;color:#dcd9e8}
.composer-popover button:not(:disabled):hover,.composer-popover button:focus-visible{background:#ffffff0b}
.composer-popover button:focus-visible{outline-offset:-2px}
.composer-popover button>span{flex:1;min-width:0}
.composer-popover b{display:block;font-size:13px;font-weight:550}
.composer-popover small{display:block;font-size:11px;color:#8f8aa9;margin-top:2px;line-height:1.45}
.composer-popover button>.app-icon:first-child{color:#aba6c4}
.composer-popover button>.app-icon:last-child:not(:first-child){color:var(--accent)}
.composer-popover [aria-disabled=true]{opacity:.55;cursor:default}
.composer-popover [aria-disabled=true]:hover{background:none}
.composer-pop-label{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#7f7a9a;padding:9px 10px 4px;margin:0}
.composer-pop-label span{letter-spacing:0;text-transform:none;color:#66617f}
.composer-popover [role=separator]{height:1px;background:#ffffff12;margin:5px 4px}
.composer-pop-foot{font-size:10.5px;color:#7f7a9a;padding:8px 10px 4px;margin:4px 0 0;border-top:1px solid #ffffff10}
.team-row{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 10px}
.team-row>span{flex:1;min-width:0}
.team-row .composer-avatar{width:30px;height:30px}
.team-change{font-size:11.5px;color:var(--accent);padding:6px 9px;border-radius:7px}
.team-change:hover{background:#b9b0f414}
.length-pop{padding:14px 14px 10px;width:320px;max-width:100%}
.length-pop .length-heading{margin-bottom:20px}
.length-pop p{font-size:11px;color:#a49eb9;margin:12px 0 0;line-height:1.6}
.length-pop a{color:#c7bafa;text-decoration:underline}
.length-pop.length-included .length-heading output{color:#8dd6b1}
.length-pop.length-included .length-track input::-webkit-slider-thumb{border-color:#8dd6b1}
.composer-locked{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;font-size:12px;color:#d9c9a7;margin:0}
.composer-locked a{color:#c7bafa;text-decoration:underline}
.length-pop .composer-locked{justify-content:flex-start;margin-bottom:10px}
.length-pop .text-link{text-decoration:none}
.composer-cost{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:12px;min-height:30px}
.composer-cost-button{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:#a9a5bf;padding:6px 11px;border-radius:9px;transition:background .15s,color .15s}
.composer-cost-button b{color:#e6e3f3;font-weight:600}
.composer-cost-button>.app-icon:first-child{color:var(--accent)}
.composer-cost-button>.app-icon:last-child{color:#77728f}
.composer-cost-button:hover{background:#ffffff08;color:#d6d2e8}
.composer-warning{font-size:11.5px;color:#e7b49e;margin:0;text-align:center;line-height:1.5}
.composer-warning a{text-decoration:underline}
.composer-note{font-size:11.5px;color:#8f8aa9;text-align:center;min-height:18px;margin:4px 0 0}
.composer-error{text-align:center}
.composer-error a{color:#c7bafa;text-decoration:underline}
/* Composer dialogs */
.picker-intro{font-size:12px;line-height:1.6;margin:-4px 0 16px}
.picker-list{display:grid;gap:2px;margin-top:12px;max-height:48vh;overflow:auto;scrollbar-color:#3a3748 transparent}
.picker-row{display:flex;align-items:center;gap:2px;border-radius:10px}
.picker-row>button{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:8px 10px;text-align:left;border-radius:10px}
.picker-row>button:not(:disabled):hover{background:#ffffff0a}
.picker-row.is-selected>button{background:#b9b0f414;opacity:1}
.picker-row>button>span{flex:1;min-width:0}
.picker-row b{display:block;font-size:13px;font-weight:550}
.picker-row small{display:block;font-size:11px;color:var(--muted)}
.picker-row em{font-style:normal;font-size:11px;color:#a69ed7;white-space:nowrap}
.picker-row .composer-avatar{width:36px;height:36px}
.picker-profile{display:grid;place-items:center;width:34px;height:34px;color:#8f8aa9;border-radius:8px;flex-shrink:0}
.picker-profile:hover{background:#ffffff0a;color:#ecebf2}
.actor-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:12px}
.actor-pick{display:flex;align-items:center;border:1px solid #ffffff12;border-radius:11px}
.actor-pick>[data-actor]{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:8px;text-align:left;border-radius:10px}
.actor-pick>[data-actor]:hover{background:#ffffff07}
.actor-pick .picker-reel{width:30px;height:30px;margin-right:4px}
.actor-pick .actor-portrait{width:40px;height:40px;border-radius:50%;flex:none}
.actor-pick [data-actor]>span{flex:1;min-width:0}
.actor-pick b{display:block;font-size:12.5px;font-weight:550}
.actor-pick small{display:block;font-size:10.5px;color:var(--muted);line-height:1.4}
.actor-pick [data-actor] i{color:#8f8aa9}
.actor-pick.is-selected{border-color:#b9b0f466;background:#b9b0f40f}
.actor-pick.is-selected [data-actor] i{color:var(--accent)}
#actor-picker-roles:not(:empty){margin-top:16px}
.actor-role-edit{display:flex;gap:12px;padding:14px 0 4px;border-top:1px solid var(--line)}
.actor-role-edit .composer-avatar{width:36px;height:36px}
.actor-role-edit>div{flex:1;min-width:0}
.actor-role-edit label{display:block;font-size:11.5px;font-weight:500;margin:0 0 6px}
.actor-role-edit label span{color:var(--muted);font-size:10px;font-weight:400;margin-left:4px}
.actor-role-edit input,.actor-role-edit textarea{padding:10px 12px;font-size:13px;margin-bottom:10px}
.tag-editor{margin-top:18px}
.tag-editor label{display:block;font-size:12px;font-weight:500;margin-bottom:8px}
.tag-editor .selected-tags:empty{display:none}
.tag-editor input{padding:10px 12px;font-size:13px}
.tag-editor-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:20px}
.tag-editor-suggestions .pill{font-size:11px}
.tag-editor-suggestions .pill b{color:#7f7a9a;font-weight:500}
.tag-editor-suggestions .muted{font-size:11px}
.tag-editor+.button,.picker-list~.button,#actor-picker-done{margin-top:20px}
.cost-breakdown{margin:4px 0 14px}
.cost-breakdown section{padding:12px 0;border-bottom:1px solid var(--line)}
.cost-breakdown h3{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#8f8aa9;margin:0 0 6px;font-weight:600}
.cost-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:5px 0;font-size:13px}
.cost-row small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.cost-row b{font-weight:600;white-space:nowrap}
.cost-totals{border-bottom:0!important}
.cost-totals .cost-row:first-child b{color:var(--accent)}
/* Settings: create page layout */
.layout-choice{border:0;margin:0;padding:22px 0;border-top:1px solid var(--line);min-width:0}
.layout-choice legend{padding:0;float:left;width:100%;margin-bottom:14px}
.layout-choice legend b{display:block;font-size:12px;font-weight:500}
.layout-choice legend small{display:block;font-size:10px;color:#787395;margin-top:7px}
.layout-options{clear:both;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.layout-options label{display:flex;gap:11px;align-items:flex-start;padding:14px;border:1px solid #ffffff14;border-radius:10px;cursor:pointer}
.layout-options label:has(input:checked){border-color:#b9b0f466;background:#b9b0f40d}
.layout-options input{margin:2px 0 0}
.layout-options b{display:block;font-size:12px;font-weight:550}
.layout-options small{display:block;font-size:10.5px;color:#8a86a2;margin-top:5px;line-height:1.5}
@media(max-width:650px){
 .composer-page{min-height:calc(100vh - 150px);padding-bottom:4vh}
 .composer-greeting{font-size:25px;margin-bottom:20px}
 .composer{border-radius:20px;padding:10px 8px 8px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:4px}
 .composer-attachments{grid-row:1;grid-column:1/-1}
 .composer textarea{grid-row:2;grid-column:1;padding-left:8px}
 .composer-toolbar{display:contents}
 .composer-actions{grid-row:2;grid-column:2;align-self:end;padding-bottom:4px}
 .composer-tools{grid-row:3;grid-column:1/-1;margin-top:6px;overflow-x:auto;scrollbar-width:none}
 .composer-chip>.app-icon:last-child{display:none}
 .composer-tools::-webkit-scrollbar{display:none}
 .composer-chip{padding:0 9px 0 7px;font-size:12px}
 .composer-popover,.composer-popover.opens-up{position:fixed;inset:auto 12px 12px;width:auto;max-width:none;max-height:72vh;overflow:auto;z-index:120;border-radius:18px;padding:8px}
 .length-pop{width:auto}
 .layout-options{grid-template-columns:1fr}
}