/* V4: a shared control set reflows between desktop and mobile, without duplicate inputs. */
.home-hero{max-width:1100px;padding:16px 0 18px;text-align:center}
.home-hero h1{font-size:32px;line-height:1.35;letter-spacing:-.7px;margin:0 0 30px}
.home-hero::before{content:"";position:absolute;inset:0 -20px -48px;z-index:-1;pointer-events:none;background:url('../../assets/home-hero/background-v1.webp') center calc(50% - 16px) / cover no-repeat;opacity:.72;mask-image:linear-gradient(to bottom,transparent 58px,#000 100px,#000 86%,transparent 100%),linear-gradient(to right,transparent,#000 18%,#000 82%,transparent);mask-composite:intersect;filter:none}
.home-hero::after{display:none}
.creation-composer{--cmp-radius:4px;--cmp-bg:#202020;--cmp-line:rgba(255,255,255,.12);--cmp-muted:#aaa;text-align:left;min-width:0}
.creation-composer svg,.cmp-popover svg{width:20px;height:20px;flex:none;vertical-align:middle}
.creation-composer button,.cmp-popover button{font:inherit;touch-action:manipulation}
.creation-composer button{border:0;cursor:pointer}
.cmp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cmp-modes{display:flex;align-items:center;gap:12px;min-width:0}
.cmp-modes button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:9px 14px;background:transparent;color:#aaa;border-radius:5px;position:relative;white-space:nowrap}
.cmp-modes button[aria-pressed=true]{color:#fff}
.cmp-modes button[aria-pressed=true]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:#eee;border-radius:2px}
.cmp-modes button:hover{background:#ffffff08;color:white}
.cmp-surface{display:grid;grid-template-columns:minmax(0,1fr) max-content max-content;grid-template-areas:"refs refs refs" "context context context" "writing writing writing" "parameters model generate";gap:0 12px;padding:18px;background:var(--cmp-bg);border:1px solid var(--cmp-line);border-radius:var(--cmp-radius);box-shadow:0 8px 24px #0002;min-width:0}
.cmp-context{grid-area:context;min-width:0}
.cmp-context:empty{display:none}
.cmp-tag{display:inline-flex;align-items:center;gap:8px;background:#313131;border-radius:5px;padding:5px 8px;font-size:12px;max-width:100%;margin:0 6px 8px 0;overflow-wrap:anywhere}
.cmp-tag button{display:grid;place-items:center;flex:none;background:none;padding:3px}.cmp-tag svg{width:15px;height:15px}
.cmp-writing{display:contents}
.creation-composer textarea{grid-area:writing;display:block;box-sizing:border-box;width:100%;min-width:0;min-height:132px;max-height:250px;resize:vertical;padding:0 0 20px;border:0;background:transparent;color:#eee;font:16px/1.65 Inter,-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;border-radius:4px;outline:none;margin:0 0 10px}
.creation-composer textarea::placeholder{color:#a6a6ae;opacity:1}
.cmp-parameters{grid-area:parameters;display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.cmp-control,.cmp-fixed{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 12px;background:#ffffff04;border:1px solid #ffffff0a!important;border-radius:7px;color:#ddd;white-space:nowrap;font-size:13px!important}
.cmp-control:hover{background:#ffffff0d;color:#fff}
.cmp-control>svg:last-child:not(:first-child){width:15px;height:15px}
.cmp-control.cmp-icon,.cmp-icon{width:44px;height:44px;min-width:44px;padding:10px;display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:7px;color:#ddd;background:#ffffff05}
.cmp-fixed{border-color:transparent!important;background:transparent;color:#ccc}
.cmp-model{grid-area:model;width:max-content;max-width:100%;min-width:0;height:44px;padding:6px 10px;justify-content:flex-start;gap:9px}
.cmp-model-name{overflow:hidden;text-overflow:ellipsis;min-width:0;white-space:nowrap;max-width:none}
.cmp-model>svg:last-child{margin-left:auto}
.cmp-model-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;background:#333;border:1px solid #ffffff19;border-radius:5px;font-size:17px;font-weight:600;color:#fff}
.cmp-model-mark svg{width:18px;height:18px}
.creation-composer .cmp-generate{grid-area:generate;display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:44px;padding:10px 18px;border-radius:7px;background:#f6f6f6;color:#111;font-size:14px;font-weight:600;white-space:nowrap;align-self:end;cursor:pointer}
.creation-composer .cmp-generate:hover:not(:disabled){background:#ddd}
.creation-composer .cmp-generate:disabled{background:#36383c;color:#9399a2;cursor:not-allowed}
.cmp-cost{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;white-space:nowrap}
.cmp-cost svg{width:12px;height:12px}
/* Center the visible label and credit group; reserve space on the button itself. */
.cmp-cost>span{display:inline-block;flex:none;font-variant-numeric:tabular-nums}
.cmp-references{grid-area:refs;display:none;align-items:center;min-width:0;gap:8px;padding:0 0 12px;max-width:100%}
.cmp-references.has-files{display:flex}
.cmp-reference-list{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:0;scrollbar-width:thin;scrollbar-color:#666 transparent;overscroll-behavior-x:contain}
.cmp-reference-list:empty{display:none}
.cmp-reference{position:relative;width:44px;height:44px;flex:0 0 44px}
.cmp-preview{display:block;padding:0;width:44px;height:44px;border-radius:6px;background:#161616;overflow:hidden}
.cmp-preview img{width:100%;height:100%;object-fit:cover;display:block}
.cmp-reference.incompatible{outline:1px solid #dfa064;border-radius:6px}
.cmp-remove{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:30px;height:30px;padding:6px!important;border-radius:5px;background:#222b!important;color:#fff;border:0!important;opacity:0;pointer-events:none;cursor:pointer}
.cmp-remove svg{width:18px;height:18px}
.cmp-reference:hover .cmp-remove,.cmp-reference:focus-within .cmp-remove{opacity:1;pointer-events:auto}
.cmp-reference:hover .cmp-preview,.cmp-reference:focus-within .cmp-preview{filter:brightness(.65)}
.cmp-remove:focus-visible{outline:2px solid #ddd;outline-offset:-2px}

.cmp-foot{display:flex;justify-content:flex-end;padding-top:5px;min-height:38px}
.cmp-visibility{background:none;padding:6px 3px;min-height:32px;font-size:12px!important;color:#aaa;border:0!important}
.cmp-visibility svg{width:17px;height:17px}
.cmp-warning,.cmp-retained{color:#e4b88c;font-size:12px;line-height:1.5;margin:4px 0 0}
.cmp-retained{color:#aaa}
.cmp-dragging .cmp-surface{border-color:#aaa;background:#282828}
#creation-app .cmp-mobile-settings{display:none}
#creation-app .creation-composer :focus-visible,.cmp-popover :focus-visible{outline:2px solid #bdbdbd;outline-offset:2px}
#creation-app .creation-composer textarea:focus,#creation-app .creation-composer textarea:focus-visible{outline:none;box-shadow:none}
.creation-composer:focus-within{outline:none;box-shadow:none}
.create-dock{position:relative;max-width:1100px;background:none;padding-top:12px}
.create-dock .creation-composer textarea{min-height:100px}
.reference-full{object-fit:contain!important;max-height:60dvh!important;background:#161616}
.reference-filename{overflow-wrap:anywhere}
.hc-dialog{background:#202020;border-color:#444;border-radius:12px}

/* Custom choice popovers on desktop, modal sheets on mobile. Never in form flow. */
.cmp-popover{position:fixed;margin:0;width:368px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border:1px solid #484848;border-radius:12px;padding:0;color:#eee;background:#252525;box-shadow:0 18px 70px #0008;overflow:hidden}
.cmp-popover[open]{display:flex;flex-direction:column}
.cmp-popover::backdrop{background:#0002}
.cmp-panel-body{padding:20px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;min-height:0}
.cmp-popover fieldset{margin:0 0 22px;padding:0;border:0;min-width:0}
.cmp-popover fieldset:last-child{margin-bottom:0}
.cmp-popover legend{font-size:13px;font-weight:500;margin-bottom:10px;padding:0;color:#ddd}
.cmp-choices{display:flex;flex-wrap:wrap;gap:8px}
.cmp-choices button{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 13px;border:1px solid #494949;border-radius:7px;background:#ffffff02;color:#bcbcbc;font-size:13px;flex:1 0 auto;cursor:pointer}
.cmp-choices button:hover{background:#ffffff09;color:white}
.cmp-choices button[aria-pressed=true]{border-color:#ddd;color:#fff;background:#ffffff07}
.cmp-choices button>svg:last-child{width:15px;height:15px}
.cmp-ratios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cmp-ratios button{flex-direction:column;gap:8px;padding:18px 8px 10px;min-height:84px}
.cmp-ratios button>svg{position:absolute;right:6px;top:6px;background:#eee;color:#222;border-radius:50%;padding:2px}
.cmp-ratio-shape{display:block;border:1.5px solid currentColor;border-radius:2px;aspect-ratio:var(--ratio);width:30px;max-height:30px}
.cmp-ratio-shape[style*="9/16"],.cmp-ratio-shape[style*="2/3"]{width:auto;height:30px}
.cmp-fixed-detail{display:flex;align-items:center;gap:16px;font-size:18px}.cmp-fixed-detail small{font-size:12px;color:#aaa}
.cmp-switch-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:0;padding:0 0 22px;color:#ddd;min-height:44px;font-size:13px!important}
.cmp-switch{width:36px;height:22px;border-radius:20px;background:#505050;position:relative;flex:none}
.cmp-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff}
.cmp-switch-row[aria-checked=true] .cmp-switch{background:#8e8e8e}.cmp-switch-row[aria-checked=true] .cmp-switch::after{left:17px}
.cmp-menu-row{display:flex;align-items:center;gap:12px;min-height:48px;width:100%;padding:10px 8px;border:0;border-radius:6px;text-align:left;background:none;color:#eee;font-size:14px;cursor:pointer}
.cmp-menu-row:hover{background:#ffffff09}.cmp-menu-row>svg:last-child:not(:first-child){margin-left:auto;width:15px}
.cmp-help{font-size:12px;color:#aaa;line-height:1.6;margin:12px 8px 0}
.cmp-model-options{display:grid;gap:8px}.cmp-model-options>button{display:flex;align-items:center;text-align:left;gap:12px;border:1px solid #454545;padding:12px;background:none;border-radius:8px;color:#ddd;min-height:76px;width:100%;cursor:pointer}
.cmp-model-options>button[aria-pressed=true]{border-color:#ddd;background:#ffffff06}
.cmp-model-options>button>span:nth-child(2){flex:1;min-width:0}
.cmp-model-options strong{display:block;font-size:14px;font-weight:500;overflow-wrap:anywhere}
.cmp-model-options small{display:block;margin-top:5px;font-size:11px;color:#aaa;line-height:1.5}
.cmp-model-options svg{width:17px;height:17px}
.cmp-popover>footer{display:none;flex:none}
.cmp-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cmp-library button{min-width:0;padding:0;background:none;color:#ccc;border:0;text-align:left;cursor:pointer}
.cmp-library img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px}.cmp-library span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;margin-top:6px}
.cmp-empty{text-align:center;color:#aaa;padding:12px 0}.cmp-empty p{font-size:14px}
.cmp-presets{display:grid;gap:8px}.cmp-presets button{min-height:48px;text-align:left;background:#303030;border:1px solid #444;border-radius:6px;padding:12px;color:#ddd;line-height:1.5;cursor:pointer}
@media(max-width:767px){
 .home-hero{padding:14px 0 10px;text-align:left}
 .home-hero h1{font-size:25px;letter-spacing:-.5px;margin-bottom:24px;line-height:1.4}
 .home-hero::before{inset:0 0 -35px;background-size:cover;mask-image:linear-gradient(to bottom,transparent 48px,#000 90px,#000 85%,transparent 100%),linear-gradient(to right,transparent,#000 22%,#000 78%,transparent);mask-composite:intersect}
 .cmp-top{gap:12px;margin-bottom:18px}
 .cmp-modes{gap:4px;flex:1}
 .cmp-modes button{padding:9px;gap:7px;min-width:44px;min-height:44px;flex:0 0 auto}
 .cmp-modes button span{display:none}.cmp-modes button[aria-pressed=true] span{display:inline}
 .cmp-modes button[aria-pressed=true]{background:#ffffff07;border:1px solid #373737}.cmp-modes button[aria-pressed=true]::after{display:none}
 #creation-app .cmp-mobile-settings{display:flex;flex-direction:column;gap:2px;min-width:44px;padding:2px 4px;background:none;border:0!important;font-size:10px!important}
 .cmp-mobile-settings svg{width:20px;height:20px}
 .cmp-surface{grid-template-columns:minmax(160px,180px) minmax(0,1fr);grid-template-areas:"model refs" "context context" "writing writing";gap:0 8px;background:none;border:0;border-radius:0;padding:0;box-shadow:none}
 .cmp-model{min-width:0;max-width:none;width:100%;padding:6px 8px;gap:6px;background:#202020;border:1px solid #393939!important;font-size:12px!important}
 .cmp-model-mark{width:24px;height:24px;font-size:15px}
 .cmp-model-name{text-align:left;white-space:normal;line-height:15px;max-height:30px;overflow-wrap:anywhere}
 .cmp-model>svg:last-child{width:12px;height:12px}
 .cmp-references{display:none}.cmp-references.has-files{display:flex;margin:0;padding:0;gap:6px;align-self:start;min-height:44px}
 .cmp-reference-list{gap:6px;max-width:100%;padding:0;flex:0 1 auto}
 
 .cmp-context:not(:empty){margin-top:12px}
 .cmp-writing{grid-area:writing;display:flex;flex-direction:column;min-width:0;margin-top:16px;padding:16px;background:var(--cmp-bg);border:1px solid var(--cmp-line);border-radius:var(--cmp-radius);min-height:214px}
 .creation-composer textarea,.create-dock .creation-composer textarea{min-height:128px;max-height:260px;padding:0 0 12px;margin:0 0 14px;font-size:16px;line-height:1.65;resize:vertical}
 .creation-composer .cmp-generate{align-self:flex-end;min-height:44px;padding:10px 14px;gap:14px;max-width:100%}
 .cmp-parameters{display:none}
 .cmp-foot{padding-top:5px;min-height:38px}
 .cmp-visibility{min-height:36px;padding:6px 2px}
 .cmp-dragging .cmp-surface{background:none}.cmp-dragging .cmp-writing{border-color:#aaa}
 .cmp-popover{inset:auto 0 0!important;width:100%;max-width:none;max-height:88dvh;margin:0;border-radius:18px 18px 0 0;border-bottom:0;padding-top:12px}
 .cmp-popover::before{content:"";position:absolute;top:7px;left:calc(50% - 18px);width:36px;height:4px;border-radius:4px;background:#626262}
 .cmp-popover::backdrop{background:#0009}
 
 .cmp-panel-body{padding:12px 20px 20px}
 .cmp-popover>footer{display:block;padding:10px 20px max(16px,env(safe-area-inset-bottom));border-top:0}
 .cmp-popover>footer button{width:100%;min-height:44px;border:0;border-radius:7px;background:#f5f5f5;color:#111;font-size:14px;font-weight:600;cursor:pointer}
}
@media(max-width:359px){
 .cmp-top{gap:4px}.cmp-modes{gap:0}.cmp-modes button{padding:8px;min-width:44px;gap:5px}
 .cmp-surface{grid-template-columns:1fr;grid-template-areas:"model" "refs" "context" "writing"}
 .cmp-model{max-width:none}.cmp-references{margin-top:10px}.cmp-writing{margin-top:12px}
 .cmp-reference-list{flex:0 1 auto}.cmp-choices{gap:6px}.cmp-panel-body{padding:10px 16px 16px}
}
@media(prefers-reduced-motion:reduce){.creation-composer *,.cmp-popover *{animation:none;transition:none}}

/* Compact creation parameters; privacy belongs to its own outside-corner menu. */
.cmp-parameters{gap:4px}
.cmp-parameters .cmp-control,.cmp-parameters .cmp-fixed{min-height:32px;padding:6px 8px;gap:5px;border:0!important;border-radius:4px;background:#ffffff09;font-size:12px!important}
.cmp-parameters .cmp-control:hover,.cmp-parameters .cmp-control[aria-expanded=true]{background:#ffffff14}
.cmp-parameters .cmp-control>svg,.cmp-parameters .cmp-fixed>svg{width:16px;height:16px}
.cmp-parameters .cmp-control>svg:last-child:not(:first-child){width:12px;height:12px}
.cmp-parameters .cmp-icon{width:32px;min-width:32px;height:32px}
/* Reserve value space so changing ratio or duration never moves nearby controls. */
#cmp-ratio>span,#cmp-detail>span{flex:none;text-align:center;font-variant-numeric:tabular-nums}
#cmp-ratio>span{width:4ch}
#cmp-detail>span{width:4ch}
.cmp-panel-privacy{width:264px}
.cmp-panel-privacy .cmp-panel-body{padding:8px 16px}
.cmp-panel-privacy .cmp-switch-row{min-height:48px;padding:10px 0}

@media(max-width:767px){.cmp-panel-privacy{width:100%}}

/* Keep scrolling and keyboard access; the prototype shows no scrollbar chrome. */
html,body,body *{scrollbar-width:none!important}
html::-webkit-scrollbar,body::-webkit-scrollbar,body *::-webkit-scrollbar{display:none;width:0;height:0}

.cmp-surface,.cmp-writing{position:relative}

/* Official select surface and screenshot-matched visibility settings. */
.cmp-popover{background:#343434;border-color:#ffffff14;border-radius:8px;box-shadow:0 4px 12px -4px #0003,0 12px 32px -8px #0004}
.cmp-choices button{border-radius:4px;background:transparent;border-color:#ffffff14;color:#fffc}
.cmp-choices button:hover{background:#ffffff0f;color:#fff}
.cmp-choices button[aria-pressed=true]{background:#ffffff1f;border-color:#ffffff4d;color:#fff}
.cmp-panel-privacy{width:320px;background:#202020;border-color:#ffffff14}
.cmp-panel-privacy .cmp-panel-body{padding:10px 14px}
.cmp-panel-privacy .cmp-switch-row{min-height:44px;padding:0;gap:10px;font-size:13px!important;font-weight:500;color:#d6d6d6;cursor:pointer}
.cmp-privacy-label,.cmp-privacy-end{display:flex;align-items:center;gap:6px}
.cmp-privacy-end{gap:10px}
.cmp-info{display:inline-grid;place-items:center;width:13px;height:13px;border:1px solid #ccc;border-radius:50%;font-size:10px;line-height:1;color:#ccc}
.cmp-crown{width:13px;height:13px;object-fit:contain}
.cmp-panel-privacy .cmp-switch{width:28px;height:16px;background:#494a50}
.cmp-panel-privacy .cmp-switch::after{width:12px;height:12px;top:2px;left:2px}
.cmp-panel-privacy .cmp-switch-row[aria-checked=true] .cmp-switch{background:#30d158}
.cmp-panel-privacy .cmp-switch-row[aria-checked=true] .cmp-switch::after{left:14px}
@media(max-width:767px){.cmp-popover{border-radius:8px 8px 0 0}.cmp-panel-privacy{width:100%}}

@media(max-width:767px){.cmp-panel-privacy .cmp-switch-row{min-height:44px}}

/* Duration follows the original site's inline radio selection. */
.cmp-duration-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;font-size:13px;color:#ddd}
.cmp-durations{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:16px}
.cmp-durations label{display:flex;align-items:center;gap:8px;min-height:32px;cursor:pointer;color:#fff}
.cmp-durations input{appearance:none;margin:0;width:16px;height:16px;border:2px solid #aaa;border-radius:50%;background:transparent;display:grid;place-content:center;cursor:pointer}
.cmp-durations input:checked{border-color:#fff}
.cmp-durations input:checked::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.cmp-durations input:focus-visible{outline:2px solid #bbb;outline-offset:3px}

/* Expanded video settings retain the existing compact parameter surface. */
.cmp-resolution{gap:8px;padding:0;background:none}
.cmp-resolution button{min-height:32px;padding:6px 12px}

.cmp-native-audio[aria-checked=true] .cmp-switch{background:#30d158}
:is(.cmp-panel-settings,.cmp-panel-basic) .cmp-ratios{grid-template-columns:repeat(4,minmax(0,1fr))}
.cmp-ratio-auto{display:grid;place-items:center;width:25px;height:25px;border:1.5px solid currentColor;border-radius:50%;font-size:17px}
.cmp-ratio-shape[style*="3/4"]{width:auto;height:30px}
.cmp-ratio-shape[style*="21/9"]{height:auto;width:30px}

.cmp-range-heading{width:100%;display:flex;align-items:center;justify-content:space-between}
.cmp-range-heading output{font-variant-numeric:tabular-nums;color:#fff}
.cmp-range-control{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #ffffff14;border-radius:4px;background:#ffffff05;color:#aaa;font-size:12px}
.cmp-range-control input{appearance:none;flex:1;min-width:0;height:24px;margin:0;background:transparent;cursor:pointer}
.cmp-range-control input::-webkit-slider-runnable-track{height:4px;background:#646464;border-radius:4px}
.cmp-range-control input::-webkit-slider-thumb{appearance:none;width:16px;height:16px;margin-top:-6px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #ffffff0f}
.cmp-range-control input::-moz-range-track{height:4px;background:#646464;border-radius:4px}
.cmp-range-control input::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff}
.cmp-seed{display:flex;align-items:center;min-height:44px;border-radius:4px;background:#ffffff08;border:1px solid #ffffff14}
.cmp-seed button{display:grid;place-items:center;flex:0 0 44px;height:44px;padding:10px;background:transparent;color:#bbb;border:0;cursor:pointer}
.cmp-seed button:first-child{border-right:1px solid #ffffff0d}
.cmp-seed button[aria-pressed=true],.cmp-seed button:hover{color:#fff;background:#ffffff0a}
.cmp-seed input{width:100%;min-width:0;background:transparent;border:0;padding:8px 12px;color:#eee;font-size:14px;line-height:1.5;font-family:inherit;font-variant-numeric:tabular-nums}

/* Compact parameter choices and the reference model menu. */
.cmp-choices button:is([data-cmp-setting=quality],[data-cmp-setting=detail],[data-cmp-setting=background],[data-cmp-setting=reasoning],[data-cmp-setting=outputFormat],[data-music-setting=format]){min-height:32px;height:32px;padding:6px 12px}
:is(.cmp-panel-settings,.cmp-panel-basic) .cmp-ratios button{min-height:70px;padding:10px 8px 8px;gap:6px}
.cmp-model-mark img{display:block;width:100%;height:100%;object-fit:contain}
.cmp-panel-models{width:400px}
.cmp-panel-models .cmp-panel-body{padding:10px}
.cmp-model-options{gap:4px}
.cmp-model-options>button{align-items:flex-start;gap:12px;min-height:84px;padding:14px 12px;border:0;border-radius:10px}
.cmp-model-options>button:hover{background:#ffffff0a}
.cmp-model-options>button[aria-pressed=true]{background:#ffffff18}
.cmp-model-options .cmp-model-mark{width:26px;height:26px;border:0;background:transparent;flex:none}
.cmp-model-copy strong{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:#fff;font-size:16px;line-height:26px}
.cmp-model-copy em{font-size:10px;font-style:normal;line-height:18px;padding:0 4px;background:#b026f4;border-radius:2px}
.cmp-model-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.cmp-model-badges>span{display:inline-flex;align-items:center;min-height:22px;padding:1px 6px;border:1px solid #ffffff14;border-radius:4px;font-size:12px;color:#bbb}
.cmp-model-badges svg{width:14px;height:14px}
.cmp-model-credit{display:flex;align-items:center;gap:6px;flex:none;color:#bbb;font-size:13px;line-height:26px}
.cmp-model-credit .cmp-credit-icon{width:14px;height:14px}
@media(max-width:767px){.cmp-panel-models{width:100%}}

.cmp-parameters .cmp-summary{gap:8px;padding:6px 10px;flex:none}
.cmp-summary-value{display:inline-block;width:4.5ch;text-align:center;font-variant-numeric:tabular-nums}
.cmp-summary i{display:block;width:1px;height:12px;background:#ffffff24;flex:none}
.cmp-mobile-actions{display:none}
@media(max-width:767px){.cmp-mobile-actions{display:flex;align-items:center;gap:6px}}

/* Align the compact model and parameter backgrounds. */
.cmp-model{height:36px;min-height:36px;padding-block:4px;align-self:center}
.cmp-model .cmp-model-mark{width:24px;height:24px;font-size:15px}
.cmp-parameters .cmp-control{height:36px;min-height:36px;padding-block:8px}
.cmp-parameters .cmp-icon{width:36px;min-width:36px;height:36px;padding:8px}

/* Match toolbar heights and tighten model rows. */
.creation-composer .cmp-generate{height:36px;min-height:36px;padding:6px 14px;align-self:center}
.cmp-model-options>button{min-height:68px;padding:8px 12px}
.cmp-model-badges{margin-top:4px}

.cmp-panel-add{width:580px}
.cmp-add-tabs{display:flex;gap:24px;position:sticky;top:-20px;z-index:1;background:#343434;border-bottom:1px solid #ffffff14;margin:-4px 0 16px;padding-top:4px}
.cmp-add-tabs button{padding:10px 2px;background:none;border:0;border-bottom:2px solid transparent;color:#aaa;cursor:pointer}
.cmp-add-tabs button[aria-selected=true]{color:#fff;border-bottom-color:#eee}
.cmp-add-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px}
.cmp-add-grid button{min-width:0;padding:0;background:none;border:0;color:#ddd;cursor:pointer;text-align:left}
.cmp-add-grid .cmp-upload-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:1;background:#ffffff08;border:1px dashed #ffffff30;border-radius:5px}
.cmp-upload-tile svg{width:26px;height:26px}
.cmp-pick-tile img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px}
.cmp-add-grid button:hover{color:#fff}
.cmp-pick-tile:hover img{filter:brightness(1.1)}
.cmp-pick-tile span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;margin-top:7px}
@media(max-width:767px){.cmp-panel-add{width:100%}.cmp-add-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cmp-add-tabs{top:-12px}.cmp-mobile-actions{gap:2px}}

/* Add-panel tabs start at their sticky position; scrolling never changes the inset. */
.cmp-panel-add .cmp-panel-body{padding-top:0}
.cmp-panel-add .cmp-add-tabs{top:0;margin-top:0}

/* Asset source, time and favorite filters share the existing compact palette. */
.cmp-asset-toolbar{display:flex;flex-direction:column;gap:14px;margin-bottom:16px}
.cmp-asset-sources{display:flex;align-self:flex-start;gap:3px;padding:3px;border:1px solid #ffffff20;border-radius:9px}
.cmp-asset-sources button{border:0;border-radius:6px;background:transparent;color:#bbb;padding:6px 18px;cursor:pointer}
.cmp-asset-sources button[aria-pressed=true]{background:#5b5b5b;color:#fff}
.cmp-asset-filters{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#ccc}
.cmp-asset-filters label{display:flex;align-items:center;gap:7px;cursor:pointer}
.cmp-asset-filters input{accent-color:#ddd;width:15px;height:15px}
.cmp-asset-filters button{background:none;border:0;color:inherit;padding:6px;cursor:pointer}
.cmp-asset-card{position:relative;min-width:0}
.cmp-asset-card .cmp-pick-tile{width:100%}
.cmp-asset-empty{text-align:center;color:#aaa;font-size:13px;padding:24px 0}

/* One fixed filter row; keep each asset's full frame visible. */
.cmp-add-header{position:sticky;top:0;z-index:3;background:#343434;padding-bottom:14px}
.cmp-panel-add .cmp-add-tabs{position:static;margin-bottom:12px}
.cmp-asset-toolbar{flex-direction:row;align-items:center;gap:12px;margin:0;white-space:nowrap}
.cmp-asset-sources{flex:none}
.cmp-asset-sources button{padding:6px 10px;font-size:13px}
.cmp-asset-filters{flex:1;gap:12px}
.cmp-asset-type{position:relative;flex:none;font-size:13px}
.cmp-asset-type>button{display:flex;align-items:center;gap:6px;padding:8px;border:1px solid #ffffff28;border-radius:6px;background:#444;color:#eee}
.cmp-asset-type svg{width:14px;height:14px}
.cmp-type-options{position:absolute;top:calc(100% + 5px);left:0;min-width:80px;padding:5px;border:1px solid #555;background:#393939;border-radius:7px;box-shadow:0 5px 16px #0005}
.cmp-type-options button{display:block;width:100%;border:0;background:none;color:#ccc;padding:9px;border-radius:4px;text-align:center;cursor:pointer}
.cmp-type-options button[aria-selected=true],.cmp-type-options button:hover{background:#555;color:#fff}
.cmp-asset-card .cmp-pick-tile img,.cmp-asset-card .cmp-pick-tile video{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#484848;border-radius:5px}
.cmp-pick-tile .cmp-audio-preview{display:grid;place-items:center;aspect-ratio:1;margin:0;background:#484848;border-radius:5px}
.cmp-audio-preview svg{width:42px;height:42px;color:#bbb}
.cmp-reference video{width:100%;height:100%;object-fit:contain}
.cmp-reference .cmp-audio-preview{display:grid;place-items:center;width:44px;height:44px;background:#444}
.hc-dialog video.reference-full{width:100%;max-height:55vh;object-fit:contain}
@media(max-width:767px){.cmp-asset-toolbar{gap:6px}.cmp-asset-sources{gap:0;padding:2px}.cmp-asset-sources button{padding:6px;font-size:12px}.cmp-asset-filters{gap:4px;font-size:12px}.cmp-asset-filters label{gap:3px}.cmp-asset-filters button{padding:4px 0}.cmp-asset-type>button{padding:6px;gap:3px;font-size:12px}}

.cmp-style-options{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:6px}
.cmp-style-options button{flex:0 0 42%;padding:8px;border:1px solid transparent;border-radius:5px;background:#3d3d3d;color:#bbb;cursor:pointer;text-align:left}
.cmp-style-options button[aria-checked=true]{background:#484848;border-color:#666;color:#fff}
.cmp-style-art{display:block;width:100%;aspect-ratio:1;background-size:278.76% 180%;background-image:url('./assets/style-reference.webp')}
.cmp-style-default{background-position:6.05% 39.42%}
.cmp-style-ghibli{background-position:71.27% 39.42%}
.cmp-style-cyber{background-image:url('./assets/explore/9822057.webp');background-size:cover;background-position:center}
.cmp-style-caption{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 2px 4px;font-size:13px}
.cmp-style-caption i{width:16px;height:16px;border:2px solid #aaa;border-radius:50%;flex:none;display:grid;place-items:center}
[aria-checked=true] .cmp-style-caption i{border-color:#fff}
[aria-checked=true] .cmp-style-caption i:after{content:'';width:6px;height:6px;background:#fff;border-radius:50%}

.cmp-negative-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;background:none;color:#eee;padding:8px 0;font-size:13px;cursor:pointer;text-align:left}
.cmp-negative-trigger>span:last-child{display:flex;align-items:center;gap:5px;color:#aaa;font-size:12px;white-space:nowrap}
.cmp-negative-trigger svg{width:14px;height:14px;transform:rotate(-90deg)}
:is(.cmp-negative-editor,.cmp-prompt-dialog){width:min(540px,calc(100vw - 32px));padding:24px;background:#343434;color:#eee;border:1px solid #555;border-radius:8px;max-height:calc(100dvh - 32px)}
:is(.cmp-negative-editor,.cmp-prompt-dialog)::backdrop{background:#0008}
:is(.cmp-negative-editor,.cmp-prompt-dialog) h2{font-size:17px;margin:0 0 18px;font-weight:600}
:is(.cmp-negative-editor,.cmp-prompt-dialog) textarea{box-sizing:border-box;width:100%;min-height:180px;max-height:50dvh;resize:vertical;background:#292929;border:1px solid #666;border-radius:5px;padding:14px;color:#eee;font-size:14px;font-family:inherit;line-height:1.7}
:is(.cmp-negative-editor,.cmp-prompt-dialog) textarea::placeholder{color:#aaa}
.cmp-prompt-dialog textarea:focus,.cmp-negative-editor textarea:focus,:is(.cmp-negative-editor,.cmp-prompt-dialog) textarea:focus-visible{outline:none;border:1px solid #aaa;box-shadow:none}
.cmp-editor-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.cmp-editor-actions button{padding:9px 24px;border-radius:5px;border:0;background:#484848;color:#ddd;cursor:pointer;font:inherit}
.cmp-editor-actions [data-save]{background:#eee;color:#222}
#composer-error-toast{position:fixed;inset:84px auto auto 50%;transform:translateX(-50%);margin:0;width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;padding:12px 18px;border:1px solid #666;border-radius:6px;background:#3c3333;color:#fff;font-size:14px;box-shadow:0 6px 24px #0004;pointer-events:none}

/* Home: the same form becomes a compact dock after its reserved slot leaves view. */
.cmp-dock-only{display:none}
.home-hero:has(.cmp-home-docked){z-index:20}
.home-page #creation-app{padding-bottom:88px}
.cmp-home-docked .creation-composer{position:fixed;left:var(--dock-left);width:var(--dock-width);bottom:calc(16px + env(safe-area-inset-bottom,0px) + var(--dock-keyboard,0px));z-index:20;max-height:var(--dock-max-height,calc(100dvh - 88px));overflow:auto;background:#202020;border:1px solid #444;border-radius:4px;padding:12px;box-shadow:0 8px 32px #0007;box-sizing:border-box}
.cmp-home-docked .cmp-top{padding-right:0;margin-bottom:8px}
.cmp-home-docked .cmp-surface{border:0;box-shadow:none;padding:10px 6px 0;background:transparent}
.cmp-home-docked .cmp-foot{padding-right:6px}
.cmp-home-compact .creation-composer{padding:10px 12px;overflow:visible}
.cmp-home-compact .cmp-top,.cmp-home-compact .cmp-parameters,.cmp-home-compact .cmp-foot,.cmp-home-compact .cmp-warning,.cmp-home-compact .cmp-retained,.cmp-home-compact textarea{display:none}
.cmp-home-compact .cmp-surface{display:flex;align-items:center;gap:10px;padding:0;min-height:38px}
.cmp-home-compact .cmp-dock-only{display:flex}
.cmp-home-compact .cmp-dock-mode{order:0;flex:none;gap:4px;padding:6px 8px;min-height:36px;border:0!important;background:transparent}
.cmp-home-compact .cmp-references{order:1;padding:0;margin:0;min-height:0;flex:none;max-width:72px}
.cmp-home-compact .cmp-reference-list{gap:4px;overflow:visible}
.cmp-home-compact .cmp-reference,.cmp-home-compact .cmp-preview{width:32px;height:32px;flex-basis:32px;border-radius:3px}
.cmp-home-compact .cmp-preview img,.cmp-home-compact .cmp-preview video{object-fit:contain}
.cmp-home-compact .cmp-reference .cmp-audio-preview{width:32px;height:32px}
.cmp-home-compact .cmp-context{order:2;max-width:110px;flex:0 1 auto;margin:0}
.cmp-home-compact .cmp-tag{display:flex;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;margin:0;padding:5px;max-width:110px}
.cmp-home-compact .cmp-tag button{display:none}
.cmp-home-compact .cmp-dock-prompt{order:3;display:block;flex:1;min-width:0;background:none;padding:8px 0;color:#aaa;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:22px}
.cmp-home-compact .cmp-dock-prompt:hover{color:#eee}
.cmp-home-compact .cmp-writing{display:contents}
.cmp-home-compact .cmp-model{order:4;margin:0;min-width:0;max-width:192px;width:auto;background:transparent;border:0!important;gap:6px;padding:4px 6px}
.cmp-home-compact .cmp-model .cmp-model-mark{display:none}
.cmp-home-compact .cmp-model-name{max-width:150px;white-space:nowrap}
.cmp-home-compact .creation-composer .cmp-generate{order:5;margin:0;flex:none;gap:10px;padding:6px 12px}
.cmp-panel-modes{width:152px}
.cmp-panel-modes .cmp-panel-body{padding:6px}
.cmp-mode-options [aria-pressed=true]{background:#ffffff12}
@media(max-width:767px){
 .cmp-home-docked .creation-composer{bottom:calc(12px + env(safe-area-inset-bottom,0px) + var(--dock-keyboard,0px));padding:10px}
 .cmp-home-docked .cmp-top{gap:4px;padding-right:0}
 .cmp-home-docked .cmp-modes{gap:0}
 .cmp-home-docked .cmp-modes button{padding:6px;gap:4px}
 .cmp-home-docked .cmp-surface{padding:0}
 .cmp-home-docked .cmp-writing{min-height:0;padding:12px;margin-top:10px;background:#262626}
 .cmp-home-docked textarea{min-height:80px;max-height:160px}
 .cmp-home-compact .creation-composer{padding:8px}
 .cmp-home-compact .cmp-surface{gap:6px;min-height:40px}
 .cmp-home-compact .cmp-dock-mode{padding:6px 2px;font-size:12px!important;gap:2px}
 .cmp-home-compact .cmp-model{display:none}
 .cmp-home-compact .cmp-writing{display:contents}
 .cmp-home-compact .cmp-dock-prompt{font-size:13px}
 .cmp-home-compact .creation-composer .cmp-generate{padding:6px 8px;gap:6px}
 .cmp-home-compact .cmp-context{max-width:52px}
 .cmp-home-compact .cmp-tag{max-width:52px}
 .cmp-home-compact .cmp-reference,.cmp-home-compact .cmp-preview{width:24px;height:28px;flex-basis:24px}
 .cmp-home-compact .cmp-references{max-width:52px}
 .cmp-home-compact .cmp-reference .cmp-audio-preview{width:24px;height:28px}
 .cmp-panel-modes{width:100%}
}
@media(max-width:767px){
 .cmp-home-docked:not(.cmp-home-compact) .cmp-generate{align-self:flex-end}
 /* Selected context gets its own small row, preserving room to read the prompt. */
 .cmp-home-compact .cmp-surface:has(.has-files,.cmp-tag){display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;grid-template-areas:"refs context context" "mode prompt generate";row-gap:6px}
 .cmp-home-compact .cmp-dock-mode{grid-area:mode}
 .cmp-home-compact .cmp-dock-prompt{grid-area:prompt;width:100%}
 .cmp-home-compact .cmp-context{max-width:100%;justify-self:start}
 .cmp-home-compact .cmp-tag{max-width:180px}
}
@media(min-width:768px) and (max-width:1100px){
 .cmp-home-compact .cmp-surface:has(.has-files,.cmp-tag){display:grid;grid-template-columns:max-content minmax(0,1fr) max-content max-content;grid-template-areas:"refs context context context" "mode prompt model generate";row-gap:6px;column-gap:8px}
 .cmp-home-compact .cmp-dock-mode{grid-area:mode}
 .cmp-home-compact .cmp-dock-prompt{grid-area:prompt;width:100%}
 .cmp-home-compact .cmp-context{max-width:100%;justify-self:start}
 .cmp-home-compact .cmp-tag{max-width:220px}
 .cmp-home-compact .cmp-model{max-width:140px}
}
@media(max-width:359px){
 .cmp-home-docked:not(.cmp-home-compact) .cmp-top{display:grid;grid-template-columns:1fr;padding-right:0}
 .cmp-home-docked:not(.cmp-home-compact) .cmp-modes{padding-right:0}
 .cmp-home-docked:not(.cmp-home-compact) .cmp-mobile-actions{justify-self:end}
}
body:has(.cmp-home-docked) #notice{bottom:calc(var(--home-dock-height,60px) + 32px + env(safe-area-inset-bottom,0px))}

/* A short, interruptible entrance keeps the dock from suddenly appearing. */
.cmp-home-docked .creation-composer{opacity:0;transform:translateY(12px);transition:opacity 160ms cubic-bezier(.23,1,.32,1),transform 160ms cubic-bezier(.23,1,.32,1);pointer-events:none}
.cmp-home-docked.cmp-dock-visible .creation-composer{opacity:1;transform:translateY(0);transition-duration:220ms;pointer-events:auto}
@media(prefers-reduced-motion:reduce){
 .cmp-home-docked .creation-composer,.cmp-home-docked.cmp-dock-visible .creation-composer{transform:none;transition:none}
}
.cmp-home-docked.cmp-dock-starting .creation-composer{transition:none}

/* Visibility stays outside the painted input frame, including expanded docks. */
.cmp-frame{display:contents}
.cmp-home-docked:not(.cmp-home-compact) .creation-composer{padding:0;border:0;background:transparent;box-shadow:none;overflow:visible}
.cmp-home-docked:not(.cmp-home-compact) .cmp-frame{display:block;position:relative;padding:12px;border:1px solid #444;border-radius:4px;background:#202020;box-shadow:0 8px 32px #0007;max-height:var(--dock-max-height,calc(100dvh - 88px));overflow:auto}
.cmp-home-docked:not(.cmp-home-compact) .cmp-foot{padding:0;margin-left:auto;flex:none}
.cmp-home-docked:not(.cmp-home-compact) .cmp-visibility{padding:6px 8px;background:transparent;color:#ddd;border-radius:4px}
@media(max-width:767px){
 .cmp-home-docked:not(.cmp-home-compact) .cmp-frame{padding:10px}
}

/* Reserve the animated word's width so deleting never moves the headline. */
.home-hero h1.home-title{font-size:36px;line-height:1.5;font-weight:600;letter-spacing:.2px;margin-bottom:28px}
.home-title-word{display:inline-block;width:2.55em;height:1.5em;margin-left:.15em;text-align:left;white-space:nowrap;vertical-align:top}
#home-typed-word{background:linear-gradient(110deg,#f1e8ff 5%,#c5a0ff 52%,#a2c5ff 100%);background-clip:text;-webkit-background-clip:text;color:transparent}
.home-title-caret{display:inline-block;width:2px;height:.9em;margin-left:5px;background:#c9b5ec;vertical-align:-.06em;animation:home-title-blink 1s steps(1,end) infinite}
@keyframes home-title-blink{0%,48%{opacity:1}49%,100%{opacity:0}}
@media(max-width:767px){.home-hero h1.home-title{font-size:clamp(20px,5.8vw,30px);letter-spacing:0;margin-bottom:24px}.home-title-caret{margin-left:3px}}
@media(prefers-reduced-motion:reduce){.home-title-caret{animation:none;opacity:.7}}

/* A thin outer frame identifies the active input without changing its size. */
@media(min-width:768px){
 :not(.cmp-home-docked)>.creation-composer .cmp-surface:has(textarea:focus){border-color:#ffffff60}
}
@media(max-width:767px){
 :not(.cmp-home-docked)>.creation-composer .cmp-writing:has(textarea:focus){border-color:#ffffff60}
}
.cmp-home-docked:not(.cmp-home-compact) .cmp-frame:has(textarea:focus),
.cmp-home-docked.cmp-home-compact .creation-composer:focus-within{border-color:#ffffff60}

/* The add browser shares the composer's width and stays at half viewport height. */
.cmp-panel-add .cmp-panel-body{flex:1;width:100%;box-sizing:border-box}
.cmp-panel-add .cmp-add-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.cmp-panel-add button:focus-visible{outline:2px solid #bca0f4;outline-offset:-2px}
@media(max-width:767px){
 .cmp-panel-add .cmp-add-tabs{gap:20px}
 .cmp-panel-add .cmp-add-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cmp-panel-add .cmp-asset-toolbar{flex-wrap:wrap;gap:4px 8px}
 .cmp-panel-add .cmp-asset-filters{flex-basis:100%}
}

/* Selected effect follows the desktop parameter controls; mobile keeps its context row. */
.cmp-parameters>.cmp-context{display:flex;align-items:center;min-width:0;max-width:240px}
.cmp-parameters>.cmp-context:empty{display:none}
.cmp-parameters .cmp-tag{margin:0;min-height:36px;box-sizing:border-box;line-height:1.4}

/* Prompt tools share the writing area; saved presets share the existing add panel. */
.cmp-prompt-editor{grid-area:writing;position:relative;min-width:0}
.cmp-prompt-editor textarea{padding-bottom:44px;margin-bottom:10px}
.cmp-prompt-actions{position:absolute;right:0;bottom:16px;display:flex;gap:4px;background:#202020}
.cmp-prompt-actions[hidden]{display:none}
.cmp-prompt-actions button{display:grid;place-items:center;width:32px;height:32px;padding:6px;background:transparent;color:#aaa;border-radius:4px}
.cmp-prompt-actions button:hover{background:#ffffff10;color:#fff}
.cmp-foot{gap:10px;align-items:center}
.cmp-ai-trigger{background:none;color:#ddd;padding:4px 8px;min-height:32px}
.cmp-ai-trigger span{font-size:19px;font-weight:750;font-style:italic}
.cmp-ai-trigger:hover{color:#fff;background:#ffffff0a;border-radius:4px}
.cmp-home-compact .cmp-prompt-editor{display:none}
.cmp-preset-switch{width:max-content}
.cmp-preset-group{margin:0 0 22px}
.cmp-preset-group h3{font-size:13px;font-weight:600;color:#bbb;margin:0 0 10px}
.cmp-preset-group>div{display:flex;flex-wrap:wrap;gap:8px}
.cmp-preset-group button{background:#404040;color:#eee;border:1px solid #555;border-radius:5px;padding:8px 12px;font-size:13px;line-height:18px}
.cmp-preset-group button:hover,.cmp-saved-preset:hover{background:#4d4d4d;border-color:#888}
.cmp-saved-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.cmp-saved-preset{min-width:0;text-align:left;padding:14px;background:#3e3e3e;color:#ddd;border:1px solid #555;border-radius:5px}
.cmp-saved-preset strong{display:block;margin-bottom:8px;overflow-wrap:anywhere}
.cmp-saved-preset span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.6;overflow-wrap:anywhere;color:#bbb}
.cmp-preset-empty{grid-column:1/-1;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#aaa}
.cmp-preset-empty button,.cmp-preset-new{border:0;background:none;color:#eee;padding:10px;font:inherit;cursor:pointer}
.cmp-preset-new{margin-top:12px}
.cmp-prompt-dialog{box-sizing:border-box;overflow:auto}
:is(.cmp-negative-editor,.cmp-prompt-dialog) header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
:is(.cmp-negative-editor,.cmp-prompt-dialog) header h2{margin:0}
:is(.cmp-negative-editor,.cmp-prompt-dialog) header button{display:grid;place-items:center;flex:none;width:32px;height:32px;background:none;border:0;border-radius:5px;color:#aaa;padding:5px;cursor:pointer}
:is(.cmp-negative-editor,.cmp-prompt-dialog) header button:hover{background:#484848;color:#fff}
:is(.cmp-negative-editor,.cmp-prompt-dialog) svg{width:20px;height:20px}
.cmp-prompt-dialog label{display:block;margin:14px 0 8px;color:#ccc;font-size:14px}
.cmp-prompt-dialog input{box-sizing:border-box;width:100%;border:1px solid #666;background:#292929;border-radius:5px;color:#eee;padding:10px 14px;font-size:14px;font-family:inherit;line-height:1.7}
.cmp-prompt-dialog input::placeholder{color:#aaa}
.cmp-dialog-writing{position:relative}
.cmp-dialog-writing textarea{padding-bottom:34px}
.cmp-dialog-writing output{position:absolute;right:12px;bottom:12px;font-size:12px;color:#aaa;pointer-events:none}
.cmp-prompt-dialog footer [data-confirm],.cmp-prompt-dialog footer [data-apply]{background:#eee;color:#222}
.cmp-prompt-dialog footer button:disabled{background:#484848;color:#888;cursor:not-allowed}
:is(.cmp-negative-editor,.cmp-prompt-dialog) :focus-visible{outline:2px solid #bbb;outline-offset:2px}
.cmp-dialog-error{color:#ffb9b9;font-size:13px}
@media(max-width:767px){
 .cmp-prompt-editor textarea,.create-dock .cmp-prompt-editor textarea{padding-bottom:44px;margin-bottom:12px}
 .cmp-prompt-actions{bottom:16px;background:#202020}
 .cmp-home-docked .cmp-prompt-actions{background:#262626}
 .cmp-preset-group button{padding:7px 9px;font-size:12px}
 .cmp-prompt-dialog footer{gap:6px}
 .cmp-prompt-dialog footer button{padding:9px 12px}
}
.cmp-prompt-dialog input:focus-visible,.cmp-prompt-dialog textarea:focus-visible{outline:none;border-color:#aaa;box-shadow:none}

@media(max-width:767px){
 .cmp-home-docked:not(.cmp-home-compact) .cmp-top{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:4px 8px}
 .cmp-home-docked:not(.cmp-home-compact) .cmp-modes{grid-row:1;grid-column:1;padding-right:0}
 .cmp-home-docked:not(.cmp-home-compact) .cmp-foot{grid-row:1;grid-column:2;gap:4px}
 .cmp-home-docked:not(.cmp-home-compact) .cmp-mobile-actions{grid-row:2;grid-column:1/-1;justify-self:end}
}

/* Parameter names share one typographic rule, regardless of control markup. */
.cmp-popover legend,
.cmp-popover #cmp-duration-label,
.cmp-popover .cmp-negative-trigger,
.cmp-popover .cmp-native-audio,
.cmp-popover .cmp-privacy-label{font-family:inherit;font-size:13px!important;font-weight:500;line-height:1.5;color:#ddd}

/* In-frame header: equal insets and aligned controls on both sides. */
.cmp-home-docked:not(.cmp-home-compact) .cmp-top{align-items:center;margin-bottom:8px}
.cmp-home-docked:not(.cmp-home-compact) .cmp-modes button,
.cmp-home-docked:not(.cmp-home-compact) .cmp-foot>button{box-sizing:border-box;height:36px;min-height:36px;padding:8px;display:flex;align-items:center;justify-content:center}
.cmp-home-docked:not(.cmp-home-compact) .cmp-foot{height:36px;min-height:36px;padding:0}
@media(max-width:767px){.cmp-home-docked:not(.cmp-home-compact) .cmp-modes button{min-width:36px}}

/* Keep the original Home slot painted while the editor floats. */
.cmp-home-origin{position:absolute;pointer-events:none}
.cmp-home-origin #home-origin-cmp-detail>span,.cmp-home-origin #home-origin-cmp-ratio>span{flex:none;text-align:center;font-variant-numeric:tabular-nums;width:4ch}

/* Switch by actual composer width, before the desktop parameter row wraps. */
.cmp-layout-probe{position:fixed;left:-10000px;top:0;width:1100px;visibility:hidden;pointer-events:none}
.cmp-layout-probe .cmp-parameters{flex-wrap:nowrap}
.cmp-narrow .cmp-top{gap:8px;margin-bottom:10px}
.cmp-narrow .cmp-modes{gap:4px;flex:1;min-width:0}
.cmp-narrow .cmp-modes button{padding:8px;gap:5px;min-width:36px;min-height:36px}
.cmp-narrow .cmp-modes button span{display:none}
.cmp-narrow .cmp-modes button[aria-pressed=true] span{display:inline}
.cmp-narrow .cmp-modes button[aria-pressed=true]{background:#ffffff07;border:1px solid #373737}
.cmp-narrow .cmp-modes button[aria-pressed=true]::after{display:none}
.cmp-narrow .cmp-mobile-actions{display:flex;align-items:center;gap:4px;flex:none}
#creation-app .cmp-narrow .cmp-mobile-settings{display:flex;flex-direction:column;gap:2px;min-width:36px;padding:2px 4px;background:none;border:0!important;font-size:10px!important}
.cmp-narrow:not(.cmp-home-compact) .cmp-surface{display:grid;grid-template-columns:minmax(0,1fr) max-content;grid-template-areas:"refs refs" "context context" "writing writing" "model generate";gap:0 12px;padding:12px;background:var(--cmp-bg);border:1px solid var(--cmp-line);border-radius:4px;box-shadow:none}
.cmp-narrow:not(.cmp-home-compact) .cmp-writing{display:contents}
.cmp-narrow:not(.cmp-home-compact) .cmp-prompt-editor{grid-area:writing;min-width:0;padding-bottom:40px}
.cmp-narrow:not(.cmp-home-compact) .cmp-prompt-editor textarea{min-height:100px;max-height:210px;margin:0 0 8px;padding:0;line-height:1.65}
.cmp-narrow:not(.cmp-home-compact) .cmp-model{grid-area:model;grid-column:1;justify-self:start;align-self:center;min-width:0;width:max-content;max-width:100%;height:40px;min-height:40px;margin:0;padding:6px 8px;background:#ffffff04;border:1px solid #ffffff14!important;font-size:12px!important;gap:6px}
.cmp-narrow:not(.cmp-home-compact) .cmp-model-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-height:none;line-height:18px}
.cmp-narrow:not(.cmp-home-compact) .cmp-model>svg:last-child{width:12px;height:12px;flex:none}
.cmp-narrow:not(.cmp-home-compact) .cmp-model-mark{width:24px;height:24px;flex:none}
.cmp-narrow:not(.cmp-home-compact) .cmp-generate{grid-area:generate;justify-self:end;align-self:center;min-height:40px;height:40px;margin:0;padding:8px 12px;gap:8px}
.cmp-narrow .cmp-parameters{display:none}
.cmp-narrow:not(.cmp-home-compact) .cmp-references.has-files{display:flex;margin:0 0 10px;padding:0;min-height:0}
.cmp-narrow:not(.cmp-home-compact) .cmp-context:not(:empty){margin:0 0 10px}
.cmp-narrow:not(.cmp-home-compact) .cmp-tag{margin-bottom:0}
.cmp-narrow.cmp-home-docked:not(.cmp-home-compact) .cmp-surface{border:0;padding:8px 0 0;background:transparent}
.cmp-narrow.cmp-home-docked:not(.cmp-home-compact) .cmp-top{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:4px 8px}
.cmp-narrow.cmp-home-docked:not(.cmp-home-compact) .cmp-modes{grid-row:1;grid-column:1;padding-right:0}
.cmp-narrow.cmp-home-docked:not(.cmp-home-compact) .cmp-foot{grid-row:1;grid-column:2;gap:4px}
.cmp-narrow.cmp-home-docked:not(.cmp-home-compact) .cmp-mobile-actions{grid-row:2;grid-column:1/-1;justify-self:end}
.cmp-narrow .cmp-prompt-actions{background:var(--cmp-bg)}
.cmp-narrow:not(.cmp-home-docked) .cmp-surface:has(textarea:focus){border-color:#ffffff60}
.cmp-narrow.cmp-home-compact .cmp-model{display:none}
.cmp-narrow.cmp-home-compact .cmp-surface:has(.has-files,.cmp-tag){grid-template-columns:max-content minmax(0,1fr) max-content;grid-template-areas:"refs context context" "mode prompt generate"}

.cmp-narrow:not(.cmp-home-compact) .cmp-prompt-actions{bottom:8px}

/* Music settings share the existing settings popover, typography and controls. */
.cmp-music-value-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;color:#ddd;font-size:13px;font-weight:500}
.cmp-music-value-row details{position:relative;min-width:116px}
.cmp-music-value-row summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 12px;background:#ffffff08;border:1px solid #ffffff14;border-radius:4px;cursor:pointer;list-style:none}
.cmp-music-value-row summary::-webkit-details-marker{display:none}.cmp-music-value-row summary svg{width:14px;height:14px}
.cmp-music-value-options{position:absolute;top:calc(100% + 4px);right:0;min-width:100%;padding:4px;background:#393939;border:1px solid #555;border-radius:4px;z-index:5;box-shadow:0 5px 16px #0005}
.cmp-music-value-options button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px;border-radius:3px;background:#ffffff14;color:#eee;font-size:13px}.cmp-music-value-options svg{width:14px;height:14px}

.creation-composer .cmp-generate{box-sizing:border-box;width:112px;min-width:112px;flex-shrink:0;padding-inline:10px;gap:10px}
.cmp-home-compact .creation-composer .cmp-generate,
.cmp-narrow:not(.cmp-home-compact) .cmp-generate{width:100px;min-width:100px;padding-inline:6px;gap:6px}
.cmp-panel-settings .cmp-panel-body:has(>.cmp-switch-row:only-child){padding-block:12px}
.cmp-panel-settings .cmp-panel-body>.cmp-switch-row:only-child{padding-block:0;min-height:44px}

.cmp-music-logo{display:block;width:26px;height:26px;overflow:hidden;flex:none}
.cmp-model-mark .cmp-music-logo img{width:117px;max-width:none;height:26px;object-fit:fill;display:block}
.cmp-lyrics-trigger{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 10px;border:1px dashed #666!important;border-radius:5px;background:transparent;color:#aaa;white-space:nowrap;font-size:12px!important}
.cmp-lyrics-trigger svg{width:16px;height:16px}.cmp-lyrics-trigger small{font-size:10px;color:#999}
.cmp-lyrics-trigger.is-filled{border-style:solid!important;border-color:#777!important;background:#ffffff12;color:#eee}.cmp-lyrics-trigger.is-filled small{color:#ddd}
.cmp-narrow .cmp-lyrics-trigger{padding:4px 7px;gap:4px;min-height:34px}.cmp-narrow .cmp-lyrics-trigger small{display:none}
.cmp-narrow .cmp-lyrics-trigger.is-filled small{display:inline}
/* Keep the AI row reserved when a music model has no AI action. */

.cmp-music-examples{margin-top:12px}
.cmp-home-docked .cmp-music-examples,.cmp-home-compact .cmp-music-examples{display:none}

.cmp-title-trigger .cmp-required{margin-left:3px;color:#ddd}
.cmp-narrow:not(.cmp-home-docked) .cmp-top:has([id^="cmp-music-"]){flex-wrap:wrap}
.cmp-narrow:not(.cmp-home-docked) .cmp-top:has([id^="cmp-music-"]) .cmp-mobile-actions{flex-basis:100%;justify-content:flex-end}

/* Mobile dock actions sit above the bordered input, outside its type row. */
@media(max-width:767px){
 .cmp-home-docked:not(.cmp-home-compact) .creation-composer{background:transparent;border:0;padding:0;box-shadow:none}
 .cmp-home-docked:not(.cmp-home-compact) .cmp-frame{background:var(--cmp-bg);border:1px solid #444;border-radius:4px;padding:12px;box-shadow:0 8px 32px #0007}
 .cmp-home-docked:not(.cmp-home-compact) .creation-composer>.cmp-foot{margin:0 0 6px;padding:0;justify-content:flex-end;height:36px;min-height:36px}
 .cmp-home-docked:not(.cmp-home-compact) .cmp-foot>button{background:#202020e8;border-radius:4px}
}

/* With AI/privacy outside, keep type tabs and parameters on one mobile row. */
@media(max-width:767px){
 .cmp-narrow:not(.cmp-home-compact) .cmp-top,
 .cmp-narrow.cmp-home-docked:not(.cmp-home-compact) .cmp-top{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
 .cmp-narrow:not(.cmp-home-compact) .cmp-top .cmp-modes{flex:0 0 auto}
 .cmp-narrow:not(.cmp-home-compact) .cmp-top .cmp-mobile-actions{flex:1 1 auto;flex-basis:auto;min-width:0;justify-content:flex-end;overflow-x:auto;scrollbar-width:none}
 .cmp-narrow:not(.cmp-home-compact) .cmp-top .cmp-mobile-actions>*{flex-shrink:0}
 .cmp-narrow:not(.cmp-home-compact) .cmp-top:has([id^="cmp-music-"]) .cmp-mobile-actions{justify-content:safe flex-end}
 .cmp-mobile-actions::-webkit-scrollbar{display:none}
}