.dashboard-shell.santa-app{--portal-content-max-width:1680px;container:santa / inline-size;color:var(--ink,#222);font-size:14px}.santa-app>.santa-heading,.santa-app>.santa-workspace{width:100%;max-width:var(--portal-content-max-width);margin-inline:auto}.santa-heading{margin-bottom:28px}.santa-heading h1{font-size:clamp(28px,3.4vw,42px);line-height:1.14;letter-spacing:-1.2px;margin:10px 0 16px}.santa-heading p,.santa-hint{color:var(--muted,#727272);line-height:1.65}.santa-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:2px;margin-top:28px}.santa-workspace{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,3cqi,48px)}.santa-workspace>*{min-width:0}.santa-settings fieldset{border:0;padding:0;min-width:0}.santa-step{font-size:17px;font-weight:650;margin:26px 0 12px}.santa-scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.santa-scene{background:transparent;border:2px solid transparent;border-radius:13px;padding:4px;cursor:pointer;color:inherit}.santa-scene[aria-pressed=true]{border-color:var(--portal-accent,#8b5cf6);background:color-mix(in srgb,var(--portal-accent,#8b5cf6) 12%,var(--surface,#fff));box-shadow:inset 0 0 0 1px var(--portal-accent,#8b5cf6)}.santa-scene img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 28%;border-radius:8px;display:block;margin-bottom:8px}.santa-scene span{display:block;font-size:12px;line-height:1.4;padding:3px}.santa-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.santa-settings label{display:block;font-weight:550;line-height:1.5}.santa-settings label span{font-weight:400;font-size:12px}.santa-settings input:not([type=checkbox]),.santa-settings select,.santa-settings textarea{box-sizing:border-box;width:100%;background:var(--surface,#fff);color:inherit;border:1px solid var(--line,#d5d5d5);border-radius:9px;padding:10px;margin-top:7px;font:inherit}.santa-settings textarea{resize:vertical;line-height:1.65}.santa-message-section{margin-top:24px}.santa-script-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px}#santa-fields .santa-script-actions button{width:auto;min-height:36px;max-width:100%;border-radius:999px;padding:7px 14px;font-size:13px;line-height:1.5;text-align:center;overflow-wrap:anywhere}.santa-message-section textarea{margin-top:0}.santa-settings button:where(:not(.ai-video-generate-button):not(.ai-video-option-choice)),.santa-primary{font:inherit;border-radius:8px;padding:10px 14px;cursor:pointer;border:1px solid var(--line,#ddd);background:var(--surface,#fff);color:inherit;text-decoration:none}.santa-settings .santa-primary,.santa-primary{background:#a62433;color:#fff;border-color:#a62433;display:inline-block;margin:12px 0}.santa-settings button:disabled{opacity:.45;cursor:default}.santa-settings .santa-check{display:flex;align-items:flex-start;gap:10px;margin-top:10px;font-weight:400}.santa-check input{margin-top:4px}.santa-preview{text-align:center}.santa-preview-frame{width:100%;max-width:495px;aspect-ratio:941/1672;border-radius:20px;overflow:hidden;background:#392720;margin:0 auto}.santa-preview img,.santa-preview video{display:block;width:100%;height:100%;object-fit:cover}.santa-app [hidden]{display:none!important}.santa-preview-caption{font-size:13px}.santa-hint{font-size:12px}.santa-confirm{padding:14px 18px;background:#a6243309;border:1px solid #a6243350;border-radius:12px;margin:14px 0}.santa-confirm p{margin:0}.santa-settings audio{width:100%}#santa-status{line-height:1.6;overflow-wrap:anywhere}#santa-status[data-error=true]{color:#c14646}#santa-refresh{margin:0 10px 10px 0}.santa-settings:focus-visible,.santa-settings :focus-visible{outline:3px solid #b95866;outline-offset:3px}

.santa-gift-app .santa-preview-frame{max-width:none;aspect-ratio:5/3}.santa-gift-app .santa-preview img,.santa-gift-app .santa-preview video{object-fit:contain}.santa-upload-preview{display:block;width:100%;max-height:170px;object-fit:contain;margin:10px 0;border-radius:8px}.santa-gift-app .santa-scenes img{height:auto;aspect-ratio:16/9}.santa-gift-app label>span{overflow-wrap:anywhere}#gift-status{line-height:1.6;overflow-wrap:anywhere}#gift-status[data-error=true]{color:#c14646}

.santa-gift-app .santa-scenes{grid-template-columns:repeat(2,minmax(0,1fr))}

.santa-character-card{min-width:0;display:flex;flex-direction:column;gap:8px}.santa-character-card .santa-scene{width:100%;flex:1}.santa-character-card .santa-voice-preview{font-size:12px;padding:8px;min-height:44px}.santa-voice-preview.is-playing{border-color:#a62433;color:#a62433}.santa-voice-preview.is-loading{opacity:.6}

/* Respond to the space beside the sidebar, including its collapsed state. */
@container santa (max-width:820px){
  .santa-workspace{grid-template-columns:minmax(0,1fr);gap:28px}
  .santa-preview{grid-row:1}
  .santa-preview-frame{max-width:300px}
  .santa-gift-app .santa-preview-frame{max-width:600px}
  .santa-heading{margin-bottom:20px}
}
@container santa (max-width:520px){
  .santa-form-row{grid-template-columns:minmax(0,1fr);gap:14px}
  .santa-heading h1{font-size:30px}
  .santa-settings .santa-scene{padding:6px}
  .santa-character-card .santa-voice-preview{padding:8px 4px;overflow-wrap:anywhere}
  .santa-scenes{gap:8px}
}

.santa-message-limits{display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin:8px 0 20px;font-size:12px;color:var(--muted,#727272)}

#santa-generate{width:100%;min-height:52px;margin:20px 0;flex-wrap:wrap}#santa-resolution-label{font:inherit}#santa-status:empty{display:none}

.santa-title-row{display:flex;align-items:center;gap:12px;margin:10px 0 16px}.santa-title-row h1{margin:0;min-width:0}.santa-aspect-options{margin-bottom:16px}.santa-preview-frame[data-aspect="16:9"]{max-width:none;aspect-ratio:16/9}

.santa-title-row{flex-wrap:wrap}.santa-title-row h1{flex:1}.santa-tool-switch{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--control-surface);font-size:13px;flex-shrink:0}.santa-tool-switch a{padding:8px 14px;border-radius:999px;color:var(--muted);text-decoration:none;white-space:nowrap;font-weight:600}.santa-tool-switch a[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}.santa-tool-switch a:hover{color:var(--ink)}.santa-tool-switch a:focus-visible{outline:2px solid var(--portal-accent);outline-offset:2px}@container santa (max-width:650px){.santa-title-row .santa-tool-switch{margin:4px 0 0 auto}}



/* Keep example, progress and output in the same preview geometry. */
.santa-preview-frame{position:relative}
.santa-progress-host{position:absolute;inset:0;z-index:2;border-radius:inherit;overflow:hidden}
.santa-progress-host .santa-generation-progress{position:relative;width:100%;height:100%;min-height:0;aspect-ratio:auto;box-sizing:border-box;padding:24px;gap:28px;border-radius:inherit;background-color:var(--surface)}
.santa-progress-label{position:relative;z-index:1;margin:0;font-size:14px;line-height:1.5;color:var(--muted);text-align:center;overflow-wrap:anywhere}
.santa-preview-frame:has(.santa-progress-host:not([hidden]))>img,.santa-preview-frame:has(.santa-progress-host:not([hidden]))>video{visibility:hidden}
.santa-preview:has(.santa-progress-host:not([hidden]))>[id$="preview-label"],.santa-preview:has(.santa-progress-host:not([hidden]))>[id$="preview-caption"],.santa-preview:has(.santa-progress-host:not([hidden]))>[id$="download"]{display:none}
.santa-generation-progress[data-error=true] .santa-progress-label{color:var(--danger,#c14646)}
.santa-generation-progress[data-error=true] .ai-creation-history-card__loader,.santa-generation-progress[data-error=true]::before,.santa-generation-progress[data-error=true]::after{display:none}

/* Shared Santa input panel. */
.santa-generation-panel{align-self:start;box-sizing:border-box;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--panel-bg);padding:24px}
.santa-generation-panel fieldset{margin:0}
.santa-generation-panel .santa-step{margin:0 0 16px}
.santa-generation-panel .santa-scenes{margin-top:0}
.santa-generation-panel #santa-generate{margin:16px 0 0}
.santa-generation-panel #santa-status{font-size:13px;margin:12px 0}
.santa-tool-switch{max-width:100%;box-sizing:border-box}
.santa-tool-switch a{white-space:normal;text-align:center;overflow-wrap:anywhere}
.santa-title-row h1{overflow-wrap:anywhere}
@container santa (max-width:520px){.santa-generation-panel{padding:16px}.santa-character-card .santa-voice-preview{font-size:11px}.santa-title-row .santa-tool-switch{width:100%}.santa-tool-switch a{flex:1}}

/* Keep Santa character and story labels inside the image without hiding the selected border. */
:is(.santa-settings,.santa-gift-settings) .santa-scene{position:relative;isolation:isolate;overflow:hidden;padding:0;aspect-ratio:var(--santa-card-aspect,1/1);border:0;border-radius:12px;background:transparent;box-shadow:none}
:is(.santa-settings,.santa-gift-settings) .santa-scene img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;margin:0;border-radius:0}
:is(.santa-settings,.santa-gift-settings) .santa-scene>span{position:absolute;inset:auto 0 0;box-sizing:border-box;margin:0;padding:34px 12px 12px;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 48%,rgba(0,0,0,.88) 100%);color:#fff;font-size:13px;font-weight:650;line-height:1.45;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.7);overflow-wrap:anywhere}

:is(.santa-settings,.santa-gift-settings) .santa-scene[aria-pressed="true"]{background:transparent;box-shadow:none}
:is(.santa-settings,.santa-gift-settings) .santa-scene[aria-pressed="true"]::after{content:"";position:absolute;inset:0;z-index:2;border:2px solid var(--portal-accent,#8b5cf6);border-radius:inherit;pointer-events:none}

.santa-gift-settings{--santa-card-aspect:16/9}

.santa-mode-section{display:grid;gap:10px;margin-bottom:24px}.santa-letter-field{margin-top:24px}.santa-letter-label{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-weight:550}.santa-letter-label small{font-size:12px;color:var(--muted);font-weight:400}.santa-letter-model{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}.santa-letter-model .ai-model-option__mark{width:30px;height:30px}.santa-letter-model small{margin-left:auto;color:var(--muted);font-size:12px}.santa-letter-voice{margin:10px 0 0;color:var(--muted);font-size:12px}.santa-preview-frame[data-aspect="9:16"]{max-width:495px;aspect-ratio:9/16}

.santa-letter-field .santa-gift-image-replace{padding:0;border:0;background:transparent;border-radius:0}.santa-letter-field .ai-video-upload-preview-remove{padding:0;border:0}.santa-letter-field .ai-tools-file-picker{border-style:dashed}

.santa-gift-app .santa-preview-frame[data-aspect]>:is(img,video){position:absolute;inset:0;width:100%;height:100%}.santa-gift-app .santa-preview-frame[data-aspect]>img{object-fit:cover}

/* Match the shared image picker in the generation panels. */
.santa-letter-field .ai-tools-file-picker{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--control-surface);gap:16px}.santa-letter-field .ai-tools-file-picker__body{flex:none}

/* Letter and dialogue share a row only when the input panel has room. */
#portal-page-ai-santa-video .santa-generation-panel{container:santa-input / inline-size}
.santa-letter-inputs{min-width:0}.santa-message-column{min-width:0}
[data-santa-mode="letter"] .santa-letter-inputs{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0;margin-top:24px;align-items:stretch;border:1px solid var(--line);border-radius:12px;background:var(--control-surface);overflow:hidden}
[data-santa-mode="letter"] .santa-letter-field,[data-santa-mode="letter"] .santa-message-section{margin-top:0}
[data-santa-mode="letter"] .santa-message-limits{margin-bottom:0}
[data-santa-mode="letter"] .santa-letter-field,[data-santa-mode="letter"] .santa-message-column{display:flex;flex-direction:column;min-width:0;padding:18px}
[data-santa-mode="letter"] .santa-message-column{border-left:1px solid var(--line)}
[data-santa-mode="letter"] .santa-letter-label{margin-bottom:12px}
[data-santa-mode="letter"] .santa-letter-format{display:block;margin-top:10px;font-size:12px;color:var(--muted)}
[data-santa-mode="letter"] .santa-letter-field .santa-gift-upload{flex:1;min-height:204px;border:0;border-radius:8px;background:var(--panel-bg);padding:0}
[data-santa-mode="letter"] .santa-letter-field .santa-gift-upload.has-image{padding:12px}
[data-santa-mode="letter"] .santa-letter-field .ai-tools-file-picker{min-height:204px;border:0;border-radius:8px;background:transparent}
[data-santa-mode="letter"] .santa-letter-field .ai-video-upload-preview-card{border:0;border-radius:6px;background:transparent}
[data-santa-mode="letter"] .santa-message-section{display:flex;flex:1;flex-direction:column}
[data-santa-mode="letter"] .santa-message-section textarea{flex:1;min-height:158px;border:0;border-radius:0;background:transparent;padding:2px 0}
[data-santa-mode="letter"] #santa-fields .santa-script-actions button{background:var(--panel-bg);font-size:12px;min-height:32px;padding:5px 10px}
[data-santa-mode="letter"] .santa-script-actions{gap:6px}
[data-santa-mode="letter"] .santa-message-limits{margin-top:10px;font-size:12px}
.santa-letter-generation .ai-model-picker__button{width:100%}.santa-letter-generation .ai-model-picker__body{grid-column:2}
.santa-letter-generation .ai-model-picker__menu{width:100%;max-height:280px;overflow:auto}
.santa-letter-generation .ai-video-options-popover{min-width:min(350px,calc(100vw - 64px))}
[data-santa-mode="greeting"] .santa-letter-generation{display:block}
@container santa-input (max-width:590px){[data-santa-mode="letter"] .santa-letter-inputs{grid-template-columns:minmax(0,1fr)}[data-santa-mode="letter"] .santa-message-column{border-left:0;border-top:1px solid var(--line)}}

.santa-letter-generation .ai-video-options-popover{left:auto;right:0}.santa-letter-generation .ai-model-picker__menu{min-width:min(350px,calc(100vw - 64px))}

/* Short letter preview leaves room for the localized reference example. Completed videos retain their selected ratio. */
[data-santa-mode="letter"] .santa-preview-frame:has(> #santa-poster:not([hidden])){max-width:none;aspect-ratio:4/3;background:var(--panel-bg)}
[data-santa-mode="letter"] #santa-poster{object-position:50% 28%}
[data-santa-mode="letter"] .santa-preview-frame[data-aspect="9:16"] #santa-poster{object-fit:contain;object-position:center}
[data-santa-mode="letter"] #santa-video{object-fit:contain}
.santa-letter-examples .santa-input-examples-grid{grid-template-columns:minmax(0,1fr)}
.santa-letter-examples .santa-input-example-image img{object-fit:contain}
