/* Live chat variant: the same conversation, canvas and editor controls. */
.brand-chat--creation-studio .brand-chat__dialog {
  --chat-panel-height: min(960px, calc(var(--chat-viewport-height, var(--chat-viewport-fallback)) - 32px));
  width: min(1080px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  left: max(16px, calc((100vw - 1080px) / 2));
  transform: none;
}
.brand-chat--creation-studio .brand-chat__creative-results { min-width: 0; }
.brand-chat--creation-studio .brand-chat__creative-composer { flex: 0 0 auto; }
.brand-chat--creation-studio .brand-chat__creative-composer #story-offer-picker { margin: 0 0 6px; }
.brand-chat--creation-studio #story-offer-picker h3 { display: none; }
.chat-studio-workbench { position: fixed; left: -100000px; top: 0; width: 360px; pointer-events: none; }
.chat-studio-workbench .result-column { width: 360px; min-width: 360px; }
.chat-studio-canvas-host .result-column { width: min(100%, 360px); margin: 0 auto; }
.chat-studio-workbench .result-column > :is(.studio-preview-heading, #brand-story-copy, .result-caption, #save-day-story),
.chat-studio-canvas-host .result-column > :is(.studio-preview-heading, #brand-story-copy, .result-caption, #save-day-story) { display: none !important; }
.chat-studio-workbench .story-frame, .chat-studio-canvas-host .story-frame { border: 0; border-radius: 0; }
/* Keep the canvas tools compact without changing the artwork or editor coordinates. */
.chat-studio-canvas-host .story-frame > :is(.canvas-add-text, .canvas-cta-toggle, .canvas-undo, .canvas-brand-style, .canvas-done) {
  scale: .8;
  transform-origin: top right;
}
.chat-studio-canvas-host .canvas-background-control {
  scale: .8;
  transform-origin: bottom left;
}
html.has-chat-studio #story-composer { display: none !important; }
html.has-chat-studio.is-text-editing .brand-chat--creation-studio .story-frame {
  position: relative; inset: auto; width: 100%; height: auto; max-width: 100%;
}
html.is-chat-text-editing { touch-action: pan-y; }
html.is-chat-text-editing .chat-studio-canvas-host .story-frame,
html.is-chat-text-editing .chat-studio-canvas-host .story-frame * { touch-action: pan-y !important; }
.brand-chat--creation-studio .has-text-editor .text-style-panel {
  position: absolute; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain;
}
.brand-chat--creation-studio .text-style-panel[hidden] { display: none !important; }
html.is-chat-editor-viewport-locked .brand-chat--app .brand-chat__history {
  overflow: hidden; overscroll-behavior: none;
}
.brand-chat--creation-studio .canvas-done--chat {
  position: absolute; z-index: 40; top: 14px; right: 14px; min-height: 42px; padding: 10px 12px;
  border: 1px solid #ddd; border-radius: 999px; background: #fff; color: #252525;
  scale: .8; transform-origin: top right; text-shadow: none;
}
.has-text-editor > .chat-app__header .chat-app__new,
.has-text-editor > .brand-chat__header .brand-chat__close { visibility: hidden; }
.brand-chat--creation-studio .text-style-panel { z-index: 30; background: #ffffffef; border: 1px solid #dedede; border-radius: 14px; }
.brand-chat--creation-studio .text-style-panel button { color: #262626; }
.brand-chat--creation-studio .font-strip button,
.brand-chat--creation-studio .text-size-controls button { background: #f3eff6; border-color: #ddd3e4; }
.brand-chat--creation-studio .editor-tools { background: #f3eff6; }
.brand-chat--creation-studio .text-edit-input { width: 100%; box-shadow: none; border-color: #d8cfe0; }
.brand-chat--creation-studio .text-style-panel button.is-active { background: #ece5f1; }
.brand-chat--creation-studio .font-strip button { position: relative; padding-left: 28px; }
.brand-chat--creation-studio .font-strip button::before {
  content: "✓"; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  font: 700 13px/1 system-ui, sans-serif; opacity: 0;
}
.brand-chat--creation-studio .text-style-panel .font-strip button.is-active {
  background: #6d35cf; color: #fff; border-color: #5023a4;
  box-shadow: inset 0 0 0 1px #5023a4;
}
.brand-chat--creation-studio .font-strip button.is-active::before { opacity: 1; }
@media (max-width: 600px) {
  .brand-chat--creation-studio .brand-chat__dialog {
    --chat-panel-height: calc(var(--chat-viewport-height, var(--chat-viewport-fallback)) - 16px);
    left: 8px; width: calc(100vw - 16px); max-width: calc(100vw - 16px); border-radius: 22px;
  }
  .brand-chat--creation-studio .brand-chat__conversation { padding: 0 14px 12px; }
  .brand-chat--creation-studio .brand-chat__history { padding-right: 0; }
}

.chat-studio, .chat-studio-composer { min-width: 0; color: #322d38; font: inherit; text-align: left; }
.chat-studio *, .chat-studio *::before, .chat-studio *::after, .chat-studio-composer *, .chat-studio-composer *::before, .chat-studio-composer *::after { box-sizing: border-box; }
.chat-studio-composer--editing:not(.chat-studio-composer--waiting),
.chat-studio-composer--editing > .chat-studio__composer,
.chat-studio[hidden], .chat-studio-composer[hidden], .chat-studio [hidden], .chat-studio-composer [hidden] { display: none !important; }
.chat-studio { margin: 18px 0 6px; }
.chat-studio__conversation-section { min-width: 0; margin: 12px 0 0; padding: 2px 5px 3px; }
.chat-studio__conversation-before { margin: 0 0 12px; }
.chat-studio__conversation-messages, .chat-studio__conversation-messages-before { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chat-studio__message { max-width: 100%; color: #403c44; font-size: 14px; line-height: 1.5; }
.chat-studio__message--user { align-self: flex-end; max-width: 90%; padding: 7px 11px; border-radius: 13px; background: #f3f1f5; }
.chat-studio__message-content { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-studio__conversation .chat-studio__copy-proposal { margin-top: 10px; margin-bottom: 0; }
.chat-studio__surface { min-width: 0; }
.chat-studio__industry { margin: 0 0 8px; min-width: 0; }
.chat-studio__industry-question { margin: 0 0 10px; font-size: 15px; line-height: 1.4; }
.chat-studio__industry-options { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; display: flex; gap: 7px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 1px 7px; scrollbar-width: none; }
.chat-studio .chat-studio__industry-chip, .chat-studio .chat-studio__industry-option { width: auto; min-height: 0; flex: 0 0 auto; padding: 7px 11px; border: 1px solid #e3e3e3; border-radius: 999px; background: #fff; color: #444; font: inherit; font-size: 12px; line-height: 1.3; white-space: nowrap; box-shadow: none; cursor: pointer; }
.chat-studio .chat-studio__industry-chip { padding: 3px 0; border: 0; color: #777; text-decoration: underline; text-underline-offset: 3px; }
.chat-studio .chat-studio__industry-option[aria-pressed='true'] { background: #222; border-color: #222; color: #fff; }
.chat-studio[data-industry='known'] { --chat-industry-space: 32px; }
.chat-studio__source { width: min(48%, 240px); aspect-ratio: 1; margin: 0 0 12px; overflow: hidden; border: 1px solid #eee9f1; border-radius: 14px; background: #faf8fc; }
.chat-studio__source-image, .chat-studio__product-image { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.chat-studio .chat-studio__upload-square { display: grid; place-items: center; width: min(48%, 220px, var(--chat-creation-space, 220px)); aspect-ratio: 1; min-height: 0; padding: 0; margin: 0 0 12px; border: 1px dashed #cbb8d8; border-radius: 14px; background: #faf8fc; color: #9673ad; box-shadow: none; cursor: pointer; }
.chat-studio__upload-square > svg { display: block; width: 36px; height: 36px; }
.chat-studio__results { display: grid; grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); gap: 20px; align-items: start; min-width: 0; }
.chat-studio[data-has-result='false'] .chat-studio__results { grid-template-columns: minmax(0, 1fr); }
.chat-studio[data-copy-pending='true'] .chat-studio__results { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.chat-studio__product-frame--pending { width: min(100%, max(96px, calc(var(--chat-gallery-space, 500px) - 100px))); margin-inline: auto; background: transparent !important; }
.chat-studio__copy-recovery { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 4px 0; }
.chat-studio__copy-recovery > p { margin: 0; color: #777; font-size: 12px; line-height: 1.5; }
.chat-studio__product-frame { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #faf9fb; }
.chat-studio__proposals { min-width: 0; }
.chat-studio__copy-notice { margin: 0 0 8px; color: #777; font-size: 12px; line-height: 18px; text-align: center; }
.chat-studio__carousel { position: relative; display: flex; gap: 13px; width: 100%; padding: 3px 3px 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: 3px; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chat-studio__carousel::-webkit-scrollbar { display: none; }
.chat-studio__carousel::after { content: ''; flex: 0 0 calc(100% - min(89%, 250px) - 13px); }
.chat-studio .chat-studio__card { display: block; flex: 0 0 min(89%, 250px); min-width: 0; padding: 0; overflow: hidden; border: 0; border-radius: 11px; background: #fff; color: #555; aspect-ratio: 9 / 16; scroll-snap-align: start; cursor: pointer; box-shadow: none; }
.chat-studio__card[data-format='post'] { aspect-ratio: 4 / 5; }
.chat-studio__preview { display: block; width: 100%; height: 100%; object-fit: contain; }
.chat-studio__neutral-preview { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 9px; width: 100%; height: 100%; padding: 14% 9%; background: linear-gradient(155deg, #eeeeec, #d8d8d5); color: #858580; }
.chat-studio__neutral-preview > svg { width: 28%; height: auto; margin-bottom: auto; margin-top: 45%; }
.chat-studio__neutral-line { display: block; height: 8px; width: 80%; border-radius: 4px; background: #ffffffa6; }
.chat-studio__neutral-line + .chat-studio__neutral-line { width: 55%; }
.chat-studio__neutral-preview > span { margin-top: 9px; color: #5b5b57; font: 500 11px/1.4 system-ui, sans-serif; }
.chat-studio__carousel-footer { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 1px; }
.chat-studio__dots { display: flex; gap: 2px; align-items: center; }
.chat-studio .chat-studio__dot { position: relative; display: block; width: 17px; height: 25px; min-height: 0; padding: 0; border: 0; border-radius: 5px; background: transparent; box-shadow: none; cursor: pointer; }
.chat-studio__dot::after { position: absolute; top: 10px; left: 6px; width: 5px; height: 5px; border-radius: 4px; background: #dedede; content: ''; }
.chat-studio__dot[aria-pressed='true']::after { left: 3px; width: 11px; background: #555; }
.chat-studio .chat-studio__icon-button, .chat-studio-composer .chat-studio__icon-button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 39px; height: 39px; min-height: 0; padding: 8px; border: 1px solid #e8e1ed; border-radius: 10px; background: #fff; color: #807288; cursor: pointer; box-shadow: none; }
.chat-studio__icon-button > svg, .chat-studio__button > svg, .chat-studio__format > svg { display: block; flex: 0 0 auto; width: 22px; height: 22px; }
.chat-studio__carousel-footer .chat-studio__icon-button { width: 29px; height: 29px; padding: 7px; border-radius: 50%; border-color: #e8e8e8; color: #777; }
.chat-studio__carousel-footer .chat-studio__icon-button > svg { width: 14px; height: 14px; }
.chat-studio-composer { flex: 0 0 auto; padding-top: 10px; }
.chat-studio__composer { margin: 0; padding: 11px 13px 12px; border: 1px solid #e1d9e7; border-radius: 17px; background: #fff; box-shadow: 0 2px 12px #34213e04; }
.chat-studio__composer:focus-within { border-color: #bca9c9; }
.chat-studio__tools { display: flex; gap: 9px; align-items: center; }
.chat-studio__formats { display: flex; gap: 5px; margin-right: auto; }
.chat-studio-composer .chat-studio__format { display: grid; place-items: center; width: 47px; height: 43px; min-height: 0; padding: 9px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #aa9fb1; box-shadow: none; cursor: pointer; }
.chat-studio__format > svg { width: 25px; height: 25px; }
.chat-studio-composer .chat-studio__format[aria-pressed='true'] { border-color: #dfd3e8; background: #f3edf8; color: #724b89; }
.chat-studio-composer .chat-studio__textarea { display: block; width: 100%; min-height: 64px; max-height: 150px; margin: 6px 0; padding: 7px 3px; border: 0; border-radius: 0; background: transparent; color: #403348; font: inherit; font-size: 15px; line-height: 1.5; box-shadow: none; resize: vertical; outline: 0; }
.chat-studio__textarea::placeholder { color: #afa5b6; }
.chat-studio__composer-footer { display: flex; justify-content: flex-end; align-items: center; }
.chat-studio .chat-studio__button, .chat-studio-composer .chat-studio__button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; min-height: 39px; padding: 9px 15px; border: 1px solid #ded4e6; border-radius: 10px; background: #fff; color: #695275; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; text-transform: none; letter-spacing: normal; cursor: pointer; box-shadow: none; }
.chat-studio__button > svg { width: 17px; height: 17px; }
.chat-studio .chat-studio__button--primary, .chat-studio-composer .chat-studio__button--primary { border-color: #382b41; background: #382b41; color: #fff; }
.chat-studio__editor { min-width: 0; }
.chat-studio__editor-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.chat-studio__editor-mount { position: relative; min-width: 0; min-height: 220px; }
.chat-studio__editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 0 5px; }
.chat-studio__calendar { position: fixed; inset: 0; width: min(380px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 22px 18px 18px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #eee; border-radius: 22px; background: #fff; color: #202020; box-shadow: 0 15px 80px #0002; font: inherit; }
.chat-studio__calendar::backdrop { background: #0004; }
.chat-studio__calendar-title { margin: 0 0 20px; font-size: 21px; line-height: 1.3; font-weight: 600; }
.chat-studio__calendar-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.chat-studio__calendar-month { font-size: 16px; font-weight: 500; text-transform: capitalize; }
.chat-studio__calendar-weekdays, .chat-studio__calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.chat-studio__calendar-weekdays { margin-bottom: 7px; color: #777; font-size: 12px; text-align: center; }
.chat-studio .chat-studio__calendar-day { position: relative; display: grid; place-items: center; width: 100%; min-width: 0; min-height: 42px; padding: 5px 2px 10px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #252525; font: inherit; font-size: 14px; line-height: 1.2; box-shadow: none; cursor: pointer; }
.chat-studio .chat-studio__calendar-day[aria-current='date'] { border-color: #bbb; }
.chat-studio .chat-studio__calendar-day[aria-pressed='true'] { border-color: #222; background: #222; color: #fff; }
.chat-studio__calendar-dot { display: inline-block; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #169b55; }
.chat-studio__calendar-day .chat-studio__calendar-dot { position: absolute; bottom: 4px; left: calc(50% - 3px); }
.chat-studio__calendar-day[aria-pressed='true'] .chat-studio__calendar-dot { background: #6ae89d; }
.chat-studio__calendar-legend { display: flex; align-items: center; gap: 7px; margin: 16px 0; color: #737373; font-size: 12px; }
.chat-studio__calendar-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; }
.chat-studio__calendar-status, .chat-studio__calendar-error { margin: 12px 0; font-size: 12px; line-height: 1.5; }
.chat-studio__calendar-error { color: #a12639; }
.chat-studio__video { display: grid; gap: 16px; width: min(100%, 640px); min-width: 0; margin: 0 auto; padding: 16px 0 24px; color: #29232e; }
.chat-studio__video-heading { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.25; }
.chat-studio__video-note { margin: -8px 0 0; color: #6b616f; font-size: 13px; line-height: 1.5; }
.chat-studio__video-fields { display: grid; gap: 10px; min-width: 0; }
.chat-studio__video-fields[hidden], .chat-studio__reel-turn[hidden], .chat-studio__reel-options[hidden], .chat-studio__reel-answer[hidden] { display: none; }
.chat-studio .chat-studio__video-square { position: relative; display: grid; place-items: center; width: 112px; height: 140px; min-width: 0; min-height: 0; padding: 0; overflow: hidden; border: 1px dashed #bdadca; border-radius: 12px; background: #f7f4f9; color: #785f8a; box-shadow: none; cursor: pointer; }
.chat-studio__video-square > svg { width: 30px; height: 30px; }
.chat-studio__video-square--filled > svg { display: none; }
.chat-studio__video-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.chat-studio__video-source-info { display: grid; gap: 12px; min-width: 0; justify-items: start; }
.chat-studio__video-source-name { margin: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.chat-studio__video-options { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.chat-studio__video-durations { display: flex; gap: 6px; }
.chat-studio__video-durations [aria-pressed='true'] { border-color: #46324f; background: #eee6f3; color: #302036; }
.chat-studio__video-audio-label { display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.4; cursor: pointer; }
.chat-studio__video-audio { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: #654276; }
.chat-studio__video-plan-label { display: grid; gap: 9px; min-width: 0; font-size: 13px; line-height: 1.4; }
.chat-studio .chat-studio__video-plan { display: block; box-sizing: border-box; width: 100%; min-height: 186px; max-height: 420px; resize: vertical; margin: 0; padding: 12px; border: 1px solid #c8bbd1; border-radius: 10px; background: #fff; color: #29232e; font: inherit; font-size: 16px; line-height: 1.55; }
.chat-studio__video-plan:focus-visible { outline: 2px solid #78538d; outline-offset: 2px; }
.chat-studio__video-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-studio__video-actions .chat-studio__button { min-height: 44px; }
.chat-studio__video-price { margin: -6px 0 0; font-size: 12px; line-height: 1.5; color: #6b616f; }
.chat-studio__video-status, .chat-studio__video-error { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.chat-studio__video-error { color: #973144; }
.chat-studio__video-result { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.chat-studio__video-player { display: block; width: min(100%, 340px); max-height: 65vh; border-radius: 12px; background: #151218; }
.chat-studio__video button:disabled, .chat-studio__video textarea:disabled { opacity: .55; cursor: default; }
.chat-studio__error { margin: 12px 0 2px; padding: 10px 12px; border: 1px solid #ead8dc; border-radius: 9px; background: #fcf6f7; color: #995f70; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.chat-studio__phase { margin: 10px 0 3px; color: #8b7898; font-size: 12px; line-height: 1.5; }
.chat-studio__change-prompt { margin: 0 0 4px; color: #767676; font-size: 12px; line-height: 18px; text-align: center; }
.chat-studio__copy-proposal { margin: 0 0 8px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; }
.chat-studio__copy-proposal-message { margin: 0 0 6px; }
.chat-studio__copy-proposal-text { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-studio__copy-proposal-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-studio__phase.mango-loading, .chat-studio__calendar-status.mango-loading { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.chat-studio__phase.mango-loading::before, .chat-studio__calendar-status.mango-loading::before { margin-right: 0; flex-shrink: 0; }
.chat-studio__sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Keep existing previews scrollable while another is built; disable actions only. */
.chat-studio__carousel { touch-action: pan-x pan-y; }
.chat-studio button:disabled, .chat-studio-composer button:disabled { opacity: .42; cursor: default; }
.chat-studio button:focus-visible, .chat-studio input:focus-visible, .chat-studio-composer button:focus-visible { outline: 3px solid #af96c2; outline-offset: 3px; }
@media (hover: hover) {
  .chat-studio .chat-studio__card:not(:disabled):hover { box-shadow: 0 0 0 1px #bbb; }
  .chat-studio .chat-studio__icon-button:not(:disabled):hover, .chat-studio-composer .chat-studio__icon-button:not(:disabled):hover { background: #f5f0f9; }
  .chat-studio__carousel-footer .chat-studio__icon-button:not(:disabled):hover { background: #f5f5f5; }
  .chat-studio .chat-studio__button:not(:disabled):hover, .chat-studio-composer .chat-studio__button:not(:disabled):hover { filter: brightness(.96); }
}
@media (max-width: 600px) {
  .chat-studio { margin-top: 14px; }
  .chat-studio__results { gap: 12px; }
  .chat-studio__carousel { gap: 10px; padding-inline: 2px; }
  .chat-studio .chat-studio__card { flex-basis: 92%; border-radius: 9px; }
  .chat-studio__carousel::after { flex-basis: calc(8% - 10px); }
  .chat-studio__product-frame { border-radius: 9px; }
  .chat-studio__carousel-footer { gap: 7px; }
  .chat-studio__dots { gap: 0; }
  .chat-studio .chat-studio__dot { width: 15px; }
  .chat-studio__composer { padding: 9px 10px 10px; border-radius: 15px; }
  .chat-studio__tools { gap: 7px; }
  .chat-studio-composer .chat-studio__format { width: 43px; height: 41px; padding: 8px; }
  .chat-studio-composer .chat-studio__textarea { min-height: 62px; font-size: 16px; }
  .chat-studio .chat-studio__button, .chat-studio-composer .chat-studio__button { font-size: 11px; padding-inline: 13px; }
  .chat-studio__video { gap: 14px; padding-top: 8px; }
  .chat-studio .chat-studio__video-square { width: 88px; height: 112px; }
  .chat-studio__editor-actions > .chat-studio__button { padding-inline: 10px; }
  .chat-studio__editor-actions > .chat-studio__button > svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .chat-studio__carousel { scroll-behavior: auto; } }

/* The selected proposal fits the measured conversation viewport and snaps centrally. */
.brand-chat--app .chat-studio { position: relative; }
.brand-chat--app .chat-studio__notice {
  position: absolute; z-index: 35; bottom: 60px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 20px); margin: 0; padding: 8px 12px;
  border: 1px solid #d8e7dc; border-radius: 12px; background: #f6fff8; color: #285536;
  font-size: 12px; line-height: 1.4; text-align: center; pointer-events: none;
}
.brand-chat--app .brand-chat__history:has(.chat-studio[data-editing='true']) { padding-block: 0; overflow: hidden; }
.brand-chat--app .brand-chat__history:has(.chat-studio[data-editing='true']) > :not(.brand-chat__creative-results) { visibility: hidden; }
.brand-chat--app .chat-studio[data-editing='true'] { margin-block: 0; }
.brand-chat--app .brand-chat__dialog:has(.chat-studio[data-editing='true']) > .chat-app__header { display: none; }
.brand-chat--app .chat-studio__editor {
  --chat-editor-inset-top: max(4px, env(safe-area-inset-top));
  --chat-editor-inset-bottom: max(4px, env(safe-area-inset-bottom));
  --chat-editor-canvas-height: calc(var(--chat-editor-view-height, 100dvh) - var(--chat-editor-inset-top) - var(--chat-editor-inset-bottom));
  position: fixed; z-index: 20; top: var(--chat-editor-view-top, 0px);
  left: var(--chat-editor-view-left, 0px); width: var(--chat-editor-view-width, 100%);
  display: block; height: var(--chat-editor-view-height, 100dvh);
  padding-inline: max(4px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-right));
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none;
  background: #fff;
}
html.is-chat-editor-viewport-locked .brand-chat--app .chat-studio__editor { overflow-y: hidden; }
/* Waiting and failure messages must remain above the enlarged canvas. */
.brand-chat--app .chat-studio-composer--editing.chat-studio-composer--waiting,
.brand-chat--app .chat-studio[data-editing='true'] > .chat-studio__error {
  position: fixed; z-index: 25; bottom: max(8px, env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); width: max-content; max-width: calc(100% - 16px);
  margin: 0; padding: 8px 12px; border: 1px solid #e7e7e7; border-radius: 12px;
  background: #fff;
}
.brand-chat--app .chat-studio-composer--editing.chat-studio-composer--waiting > .chat-studio__phase { margin: 0; }
.brand-chat--app .chat-studio[data-editing='true'] > .chat-studio__error {
  bottom: max(64px, calc(env(safe-area-inset-bottom) + 56px)); pointer-events: none;
}
.brand-chat--app .chat-studio__editor-top {
  position: sticky; z-index: 8; top: var(--chat-editor-inset-top); left: 0;
  height: 0; width: 32px; margin: 0; padding: 0; pointer-events: none;
  align-items: start;
}
.brand-chat--app .chat-studio__editor-top > button { width: 32px; height: 32px; padding: 6px; pointer-events: auto; }
.brand-chat--app .chat-studio-canvas-host .canvas-background-control {
  --chat-palette-dot-size: clamp(18px, calc(var(--chat-editor-canvas-height, 500px) * .059375 - 7px), 22px);
  top: auto; right: auto; bottom: 1px; left: 2px;
  flex-direction: row; scale: none; gap: 4px; padding: 1px 2px;
  border-color: #e2e2e2; background: #fffffff2; box-shadow: none;
}
.brand-chat--app .chat-studio-canvas-host .canvas-background-control input { width: var(--chat-palette-dot-size); height: var(--chat-palette-dot-size); }
.brand-chat--app .chat-studio-canvas-host .canvas-background-control input::-webkit-color-swatch-wrapper { padding: 0; }
.brand-chat--app .chat-studio-canvas-host .canvas-background-control input::-webkit-color-swatch { border: 1px solid #0002; border-radius: 50%; }
.brand-chat--app .chat-studio-canvas-host .canvas-background-control input::-moz-color-swatch { border: 1px solid #0002; border-radius: 50%; }
.brand-chat--app .chat-studio-canvas-host .brand-color-field small { display: none; }
.brand-chat--app .chat-studio__editor-mount {
  display: grid; justify-items: center; align-items: start; min-height: 0; padding-top: var(--chat-editor-inset-top);
  --chat-editor-ratio: .5625;
}
.brand-chat--app .chat-studio__editor[data-format='post'] .chat-studio__editor-mount { --chat-editor-ratio: .8; }
.brand-chat--app .chat-studio-canvas-host .result-column {
  width: min(100%, calc(var(--chat-editor-canvas-height, 500px) * var(--chat-editor-ratio)));
}
.brand-chat--app .chat-studio-canvas-host .story-frame { box-shadow: none; }
.brand-chat--app .chat-studio__editor-actions { padding: 6px 0 max(6px, env(safe-area-inset-bottom)); }
.brand-chat--app :is(.chat-studio__proposals, .chat-studio__carousel, .chat-studio__carousel-footer) { background: #fff; }
.brand-chat--app .chat-studio__card:focus-visible { outline-color: #555; }
.brand-chat--app .brand-chat__history:has(.chat-studio[data-gallery='true']) { padding-block: 4px; }
.brand-chat--app .chat-studio[data-gallery='true'] { margin-block: 0; min-height: var(--chat-content-space, 0px); }
.brand-chat--app .chat-studio__results { grid-template-columns: minmax(0, 1fr); gap: 0; }
.brand-chat--app .chat-studio__proposals:has(.chat-studio__copy-notice:not([hidden])) { --chat-copy-notice-space: 44px; }
.brand-chat--app .chat-studio__proposals:has(.chat-studio__reveal-next) { --chat-carousel-controls-space: 58px; }
.brand-chat--app .chat-studio__carousel {
  --chat-gallery-gap: 12px;
  --chat-template-width: min(88%, calc(max(64px, var(--chat-gallery-space, 500px) - var(--chat-carousel-controls-space, 42px) - var(--chat-industry-space, 0px) - var(--chat-copy-notice-space, 0px)) * .5625));
  gap: var(--chat-gallery-gap); padding: 3px 0 8px; scroll-padding-inline: 0;
}
.brand-chat--app .chat-studio__carousel[data-format='post'] {
  --chat-template-width: min(88%, calc(max(64px, var(--chat-gallery-space, 500px) - var(--chat-carousel-controls-space, 42px) - var(--chat-industry-space, 0px) - var(--chat-copy-notice-space, 0px)) * .8));
}
.brand-chat--app .chat-studio__card {
  position: relative; flex: 0 0 auto; width: var(--chat-template-width); height: auto;
  align-self: flex-start; scroll-snap-align: center;
}
/* Size the card from its own width, not the image's percentage height. This
   avoids a cyclic flex/ratio measurement when mobile browser chrome resizes. */
.brand-chat--app .chat-studio__preview { position: absolute; inset: 0; }
.brand-chat--app .chat-studio__neutral-preview { position: absolute; inset: 0; }
.brand-chat--app .chat-studio__card[aria-current='true'] { box-shadow: 0 0 0 1px #dedede; }
.brand-chat--app .chat-studio__carousel::before,
.brand-chat--app .chat-studio__carousel::after { content: ''; flex: 0 0 calc((100% - var(--chat-template-width)) / 2 - var(--chat-gallery-gap)); }

.brand-chat--app .chat-studio__composer--compact { padding: 10px 12px; border-radius: 22px; }
.chat-studio__composer { position:relative; }
.chat-studio__recognition {
  position: static; display: flex; flex: 0 1 auto; align-items: center; min-width: 0; margin: 0;
  color: #777; font-size: 11px; line-height: 1.4;
}
.chat-studio__recognition-text { display: block; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-studio__recognition-actions {
  position: absolute; z-index: 10; left:12px; right:auto; bottom:calc(100% + 8px);
  display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 8px 14px;
  box-sizing:border-box; width:min(300px, calc(100% - 24px)); padding:12px;
  border:1px solid #ded7e6; border-radius:6px; background:#fff; box-shadow:0 4px 18px #0000000a;
}
.chat-studio__recognition-hint { grid-column: 1 / -1; margin: 0; }
.chat-studio-composer .chat-studio__recognition-button {
  min-height: 0; width: auto; padding: 2px 0; border: 0; border-radius: 0;
  background: transparent; color: #555; font: inherit; line-height: inherit;
  text-decoration: underline; text-underline-offset: 3px; box-shadow: none; cursor: pointer;
}
.chat-studio__recognition > .chat-studio__recognition-button { min-width: 0; max-width: 100%; text-decoration: none; }
.chat-studio__recognition-button > svg { display: block; width: 15px; height: 15px; }
.chat-studio-composer .chat-studio__recognition-button:disabled { opacity: .45; cursor: default; }
.chat-studio__composer--compact .chat-studio__input-row { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 6px; }
.chat-studio__attachments { flex: 0 0 auto; min-width: 0; }
.chat-studio__attachments:has(> [hidden]):not(:has(> :not([hidden]))) { display: none; }
.chat-studio-composer .chat-studio__upload-square { display: grid; place-items: center; position: relative; width: 56px; height: 56px; min-height: 0; padding: 0; margin: 0; overflow: hidden; border: 1px dashed #d8d8d8; border-radius: 11px; background: #fafafa; color: #777; box-shadow: none; cursor: pointer; }
.chat-studio-composer .chat-studio__upload-square > svg { width: 24px; height: 24px; }
.chat-studio-composer .chat-studio__upload-square > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.chat-studio-composer .chat-studio__upload-square--filled > svg { display: none; }
.chat-studio__composer--compact .chat-studio__textarea { flex: 1 1 0; min-width: 0; width: 0; height: 42px; min-height: 42px; max-height: 88px; margin: 0; padding: 9px 0; resize: none; font-size: 16px; line-height: 24px; }
.chat-studio__composer--compact .chat-studio__tools { gap: 6px; }
.chat-studio__composer--compact .chat-studio__composer-footer { margin-left: auto; }
.chat-studio__composer--compact .chat-studio__composer-footer > button { width: 36px; height: 36px; min-height: 36px; padding: 9px; border-radius: 50%; }
.chat-studio__composer--compact .chat-studio__composer-footer > button > span { display: none; }
.chat-studio__composer--compact .chat-studio__composer-footer > button > svg { width: 18px; height: 18px; transform: rotate(-90deg); }
.chat-studio__composer--compact .chat-studio__format { width: 38px; height: 36px; padding: 6px; }
.chat-studio__composer--compact .chat-studio__format > svg { width: 24px; height: 24px; }
.chat-studio__composer--compact .chat-studio__tools > .chat-studio__icon-button { width: 34px; height: 34px; padding: 7px; }

/* The caret identifies the active chat field; keep button focus indicators. */
.chat-studio-composer .chat-studio__textarea:focus,
.chat-studio-composer .chat-studio__textarea:focus-visible { outline: none; box-shadow: none; }

.chat-studio__industry-empty { margin: 14px 0; color: #666; font-size: 15px; line-height: 1.5; }

/* Next reveals one new template; opened cards keep their own edits. */
.chat-studio__carousel-footer .chat-studio__icon-button { width: 44px; height: 44px; }
.chat-studio__carousel-footer .chat-studio__reveal-next { width: auto; max-width: 176px; min-height: 44px; height: auto; padding: 9px 12px; gap: 7px; border-radius: 24px; color: #37333b; }
.chat-studio__next-label { font: 500 12px/1.2 system-ui, sans-serif; text-align: left; }
.chat-studio__carousel-footer .chat-studio__dots { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; }
.chat-studio__carousel-footer .chat-studio__reveal-next > svg { order: 2; }

/* Save is a separate UI overlay, never a child of the exported story frame. */
html.has-chat-app #brand-chat-dialog .chat-studio .chat-studio__preview-save {
  position: fixed; z-index: 45; display: flex; width: max-content; max-width: calc(100vw - 32px);
  height: auto; margin: 0; padding: 0; gap: 0; visibility: hidden; pointer-events: none;
}
html.has-chat-app #brand-chat-dialog .chat-studio .chat-studio__preview-save[data-preview-save-ready="true"] { visibility: visible; }
html.has-chat-app #brand-chat-dialog .chat-studio__preview-save > .chat-studio__button {
  min-height: 40px; padding: 9px 12px; border-radius: 5px; font-size: 12px;
  background: #783fc3; border-color: #783fc3; color: #fff; pointer-events: auto;
  box-shadow: 0 2px 12px #22133324;
}
html.has-chat-app #brand-chat-dialog .chat-studio__preview-save > .chat-studio__button.is-saved { background: #247f4d; border-color: #247f4d; }
html.has-chat-app #brand-chat-dialog .chat-studio__preview-save > .chat-studio__button.mango-loading > svg { display: none; }
html.has-chat-app #brand-chat-dialog .chat-studio__preview-save > .chat-studio__button.mango-loading::before { width: 23px; height: 23px; margin: 0; }
html.has-chat-app .chat-studio__video-player { max-height: min(60dvh, 560px); }

.chat-studio__video-preview { position:relative;max-width:100%; }

/* A preview and its own save action travel together in the native scroll rail. */
.chat-studio__gallery-item { flex: 0 0 min(89%, 250px); min-width: 0; align-self: flex-start; scroll-snap-align: start; }
.chat-studio .chat-studio__gallery-item > .chat-studio__card { width: 100%; flex: none; position: relative; }
.chat-studio .chat-studio__choose-template {
  display: flex; width: 100%; min-height: 40px; margin: 7px 0 0; padding: 9px 8px;
  border-radius: 5px; border-color: #783fc3; background: #783fc3; color: #fff;
  font-size: 12px; line-height: 1.25; white-space: normal;
}
.chat-studio .chat-studio__choose-template.is-saved,
.chat-studio .chat-studio__choose-template.is-saved:disabled { background: #247f4d; border-color: #247f4d; color: #fff; opacity: 1; }
.chat-studio .chat-studio__choose-template.mango-loading::before { width: 22px; height: 22px; margin: 0; }
.brand-chat--app .chat-studio__proposals { --chat-carousel-controls-space: 58px; --chat-gallery-save-space: 52px; }
.brand-chat--app .chat-studio__carousel {
  --chat-template-width: min(88%, calc(max(64px, var(--chat-gallery-space, 500px) - var(--chat-carousel-controls-space, 58px) - var(--chat-gallery-save-space, 52px) - var(--chat-industry-space, 0px) - var(--chat-copy-notice-space, 0px)) * .5625));
  overflow-anchor: none;
}
.brand-chat--app .chat-studio__carousel[data-format='post'] {
  --chat-template-width: min(88%, calc(max(64px, var(--chat-gallery-space, 500px) - var(--chat-carousel-controls-space, 58px) - var(--chat-gallery-save-space, 52px) - var(--chat-industry-space, 0px) - var(--chat-copy-notice-space, 0px)) * .8));
}
.brand-chat--app .chat-studio__gallery-item { flex: 0 0 auto; width: var(--chat-template-width); scroll-snap-align: center; }
.brand-chat--app .chat-studio__gallery-item[aria-current='true'] > .chat-studio__card { box-shadow: 0 0 0 1px #dedede; }
.chat-studio__carousel, .chat-studio__gallery-item, .chat-studio__gallery-item * { touch-action: pan-x pan-y !important; }
body.is-text-editing:has(.chat-studio[data-gallery='true']) { touch-action: pan-x pan-y !important; }

/* Carousel posts: slide switcher below the canvas and a badge on the card. */
.chat-studio__slides { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 0 2px; }
.chat-studio__slides[hidden] { display: none; }
.chat-studio__slide-list { display: flex; gap: 6px; }
.chat-studio__slides .chat-studio__icon-button { width: 44px; height: 44px; }
.chat-studio__slide { min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid #d8d8dd; border-radius: 999px; background: #fff; color: #1d1d1f; font: 700 15px/1 system-ui, -apple-system, sans-serif; cursor: pointer; }
.chat-studio__slide.is-active { border-color: #1d1d1f; background: #1d1d1f; color: #fff; }
.chat-studio__slide:focus-visible { outline: 2px solid #1d1d1f; outline-offset: 2px; }
.chat-studio__slide:disabled:not(.is-active) { opacity: .55; }
.brand-chat--app .chat-studio__editor[data-slides='true'] {
  --chat-editor-canvas-height: calc(var(--chat-editor-view-height, 100dvh) - var(--chat-editor-inset-top) - var(--chat-editor-inset-bottom) - 56px);
}
.chat-studio__carousel-badge { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 5px 9px; border-radius: 999px; background: rgba(17, 17, 17, .78); color: #fff; font: 600 12px/1.2 system-ui, -apple-system, sans-serif; pointer-events: none; }
/* Rolka: the interview and its summary (the noir theme refines these). */
.chat-studio__interview { display: grid; gap: 10px; margin-top: 16px; }
.chat-studio__interview[hidden], .chat-studio__interview-summary[hidden], .chat-studio__interview-own[hidden], .chat-studio__direction-group[hidden] { display: none; }
.chat-studio__interview-question { margin: 0; font-weight: 700; font-size: 17px; }
.chat-studio__interview-own { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.chat-studio__interview-input { min-width: 0; min-height: 44px; padding: 0 12px; font: inherit; }
.chat-studio__interview-nav { display: flex; justify-content: space-between; gap: 8px; }
.chat-studio__interview-answers { display: grid; }
.chat-studio__interview-answer { display: grid; grid-template-columns: minmax(92px, auto) minmax(0, 1fr); gap: 10px; width: 100%; min-height: 44px; padding: 10px 0; border: 0; border-bottom: 1px solid #e4dce9; background: transparent; text-align: left; font: inherit; }
.chat-studio__interview-own > .chat-studio__interview-own-label { grid-column: 1 / -1; }

/* Scheduled material: close autosaves; the gallery is an explicit alternative. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor[data-format] {
  --cm-editor-chrome: calc(env(safe-area-inset-top, 0px) + 45px + 4px + 8px + max(8px, env(safe-area-inset-bottom, 0px)));
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor-top > [data-studio-action="browse-scheduled-templates"] {
  flex: 0 0 auto; width: auto; max-width: 55%; margin-left: auto; padding: 0 12px;
  order: 2; gap: 6px; border-right: 0; border-left: 1px solid var(--cm-line);
  font-size: 12px; white-space: nowrap;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor-top > [data-studio-action="browse-scheduled-templates"] > svg { width: 16px; height: 16px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor-top::after { order: 1; }

/* "Otwórz czat" (the canvas tools, app.js) opens the composer right below the material, inside the editor. */
.chat-studio__editor-composer { width: min(100%, 560px); margin: 12px auto 0; padding: 0 8px max(16px, env(safe-area-inset-bottom)); }
.chat-studio__editor > .chat-studio__conversation { width: min(100%, 560px); margin: 12px auto 0; padding-inline: 8px; }
/* With the chat open the editor scrolls: the canvas tools pass under its top bar, not over it. */
.chat-studio__editor:has(> .chat-studio__editor-composer:not([hidden])) > .chat-studio__editor-top,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor:has(> .chat-studio__editor-composer:not([hidden])) > .chat-studio__editor-top { z-index: 30; }

/* "czat" under "tłumacz" in the canvas tools (app.js installVisualLayout): opens the chat under the material. */
.story-frame > .canvas-editor-chat > span { display: grid; place-items: center; line-height: 0; }
.story-frame > .canvas-editor-chat > span > svg { display: block; width: 20px; height: 20px; }
.story-frame > .canvas-editor-chat.is-active::after { content: none; }
.story-frame > .canvas-editor-chat[hidden] { display: none !important; }