/* CosmoMango — "Noir Studio" interface theme.
   A dark, technical studio skin for the app chrome only. Loaded last; every rule is scoped to
   html.has-chat-app and carries two id-weights (:not(#cm-theme):not(#cm-noir)) so it wins over
   the existing #id rules without !important. Artwork is never styled here: nothing inside
   .story-frame (template layers, photos, text layers), no template CSS, no generated images.
   The containers the story frame inherits from are pinned to their original values below.
   Interface chrome (back, Zapisz, Gotowe) lives outside the artwork: a nav bar above the canvas
   and an action bar below it. One radius token (0). Hierarchy is white/ink on graphite: primary
   actions are ink-filled, selections carry a white underline, focus rings are white everywhere.
   Mango appears in two places only: the animated mango loader (every waiting state, the schedule
   included) and thin selection marks inside the chat, studio and editor. The schedule, its dialogs
   (family picker, material editor), the app header, the drawer and the account dialogs carry none.
   Publication status has its own two colours and nothing else uses them: green = the day has
   materials (thin bar, green counters) or is fully published (wide bar, filled counters, tag, stamp
   on the material, filled toggle); red = a past day that still has unpublished material. Errors in
   the schedule are therefore neutral (white rule + alert mark); elsewhere they carry a red rule.
   Graphite surfaces sit one step above black (canvas #17171a).
   Companion: /cosmomango-theme.js (keeps the selected rail chip in view, moves keyboard focus clear
   of a rail's faded edges, fills slider tracks). Generated: the scope prefix is expanded by the theme build. */

@font-face { font-family: "CM Mono"; src: url("/assets/fonts/ibmplexmono/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CM Mono"; src: url("/assets/fonts/ibmplexmono/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }

:root {
  --cm-bg: #17171a;           /* graphite canvas, one step above black */
  --cm-bg-deep: #17171a;      /* editor stage, desktop rail: canvas level, never below it */
  --cm-well: #1b1b1f;         /* behind thumbnails and media: one step into the card */
  --cm-s0: #1b1b1f;           /* open day */
  --cm-s1: #1f1f23;
  --cm-s2: #26262b;
  --cm-s3: #2f2f35;
  --cm-line: #2c2c31;
  --cm-line-2: #3a3a41;
  --cm-line-3: #55555d;
  --cm-ctl: #74747d;          /* input/composer outlines: >= 3:1 on every surface */
  --cm-ink: #f2f1ed;
  --cm-ink-2: #bebdb6;
  --cm-ink-3: #9e9d97;        /* >= 4.5:1 up to --cm-s3 */
  --cm-mango: #ff9a2e;
  --cm-mango-hi: #ffb35c;
  --cm-on-mango: #141210;
  /* Publication status. *-fill carries white text (>= 4.5:1); the bright tone is for bars and text on graphite. */
  --cm-ok: #34d27a;           /* 147deg, 8.3:1 on s1 */
  --cm-ok-fill: #15803d;
  --cm-ok-line: #2a7a4c;
  --cm-danger: #ff4d4d;       /* a true red (0deg), 5.0:1 on s1, 4.6:1 on s2; far from mango */
  --cm-danger-fill: #c9303f;
  --cm-danger-line: #9a3434;
  --cm-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M2.2 6.4l2.4 2.4 5.2-5.6'/%3E%3C/svg%3E");
  --cm-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 1.5v6M6 9v1.8'/%3E%3C/svg%3E");
  /* Menu row icons (KONTO), drawn like the menu's own line icons (24 px grid, round ends). */
  --cm-ic-plans: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 20h16M7 16v-3M11 16V8M15 16v-5M19 16V5'/%3E%3C/svg%3E");
  --cm-ic-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 2.8h9v18.4h-9zM11 18h2'/%3E%3C/svg%3E");
  --cm-ic-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.4 2.3 3.5 5.2 3.5 8.5s-1.1 6.2-3.5 8.5c-2.4-2.3-3.5-5.2-3.5-8.5s1.1-6.2 3.5-8.5'/%3E%3C/svg%3E");
  --cm-ic-exit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4H5v16h8.5M10 12h10M16.5 8.5 20 12l-3.5 3.5'/%3E%3C/svg%3E");
  --cm-scrim: rgb(8 8 10 / .8);
  --cm-radius: 0;             /* one radius for the whole interface */
  --cm-micro: 10px;           /* floor for mono micro-labels (11px on desktop) */
  --cm-gutter: 14px;          /* app-shell side padding on phones */
  --stat-w: 48px;             /* width of one Relacje/Posty/Rolki counter cell */
  --row-pad-r: 10px;          /* right padding inside a day row */
  --cm-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cm-mono: "CM Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --cm-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ─── 0. Base ─────────────────────────────────────────────────────────────── */
html.has-chat-app:not(#cm-theme):not(#cm-noir) {
  color-scheme: dark;
  background: var(--cm-bg);
  --studio-chat-bg: var(--cm-bg);
  --studio-purple: #36363c;
  --studio-green: var(--cm-ok-fill);
  --studio-green-border: var(--cm-line-2);
  accent-color: var(--cm-ink);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) body,
html.has-chat-app[data-chat-app-view="schedule"]:not(#cm-theme):not(#cm-noir) body { background: var(--cm-bg); color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .app-shell { background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) ::selection { background: rgb(242 241 237 / .26); color: var(--cm-ink); }

/* Artwork protection: the story frame inherits exactly what it inherited before the theme. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-workbench,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .result-column {
  color: rgb(36 36 33);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px; font-weight: 400; font-style: normal; line-height: normal; letter-spacing: normal; word-spacing: 0;
  text-transform: none; text-align: start; font-feature-settings: normal; font-variant-numeric: normal;
  -webkit-font-smoothing: auto; text-rendering: auto; font-optical-sizing: auto; color-scheme: light;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .result-column { color: rgb(50 45 56); text-align: left; }

/* Startup and blocked-account screens. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #app-startup, html[data-app-boot] #app-startup {
  background: var(--cm-bg); color: var(--cm-ink-2);
  font: 500 11px/1.5 var(--cm-mono); letter-spacing: .12em; text-transform: uppercase;
}
html[data-app-boot] #app-startup { background: #17171a; color: #bebdb6; font: 500 11px/1.5 "CM Mono", ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
html[data-app-boot] #app-startup button { border-radius: var(--cm-radius); background: #f2f1ed; color: #17171a; font: 600 13px/1.2 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; min-height: 44px; }
html[data-app-boot] #app-startup img { width: 64px; height: 64px; }
/* Blocked account: the same graphite page, a left-aligned message and two square actions. It can mount
   before html.has-chat-app is set, so it is scoped to the blocked state itself. */
html[data-account-blocked]:not(#cm-theme):not(#cm-noir) .account-gate, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-gate {
  align-items: stretch; justify-content: center; gap: 0; padding: max(32px, env(safe-area-inset-top)) max(24px, calc((100% - 440px) / 2)) max(32px, env(safe-area-inset-bottom));
  background: #17171a; color: #f2f1ed; text-align: left; font: 400 15px/1.55 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[data-account-blocked]:not(#cm-theme):not(#cm-noir) .account-gate h1, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-gate h1 { margin: 0 0 16px; color: #f2f1ed; font: 600 28px/1.1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.03em; text-wrap: balance; }
html[data-account-blocked]:not(#cm-theme):not(#cm-noir) .account-gate h1::before, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-gate h1::before {
  content: "Konto"; content: "Konto" / ""; display: block; margin: 0 0 14px; color: #9e9d97;
  font: 500 10px/1 "CM Mono", ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase;
}
html[lang="en"][data-account-blocked]:not(#cm-theme):not(#cm-noir) .account-gate h1::before, html.has-chat-app[lang="en"]:not(#cm-theme):not(#cm-noir) .account-gate h1::before { content: "Account"; content: "Account" / ""; }
html[data-account-blocked]:not(#cm-theme):not(#cm-noir) .account-gate p, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-gate p { max-width: none; margin: 0 0 10px; color: #bebdb6; }
html[data-account-blocked]:not(#cm-theme):not(#cm-noir) .account-gate a, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-gate a {
  display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 14px 0 0; padding: 12px 16px; box-sizing: border-box;
  border: 1px solid #f2f1ed; border-radius: 0; background: #f2f1ed; color: #17171a; font: 600 14px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; text-decoration: none;
}
html[data-account-blocked]:not(#cm-theme):not(#cm-noir) .account-gate a + a, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-gate a + a { margin-top: 8px; border-color: #55555d; background: transparent; color: #f2f1ed; }
html[data-account-blocked]:not(#cm-theme):not(#cm-noir) .account-gate a:focus-visible, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-gate a:focus-visible { outline: 2px solid #f2f1ed; outline-offset: 2px; }

/* Development sandbox banner (sandbox only): one quiet line, the download link pinned right. */
html .sandbox-banner {
  position: relative; z-index: 2; box-sizing: border-box; height: 36px; margin: 0; padding: 0 196px 0 30px;
  overflow: hidden; border-bottom: 1px solid #3a3a41; background: #1f1f23; color: #bebdb6;
  font: 500 var(--cm-micro)/35px "CM Mono", ui-monospace, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; text-align: left;
  white-space: nowrap; text-overflow: ellipsis;
}
html .sandbox-banner::before { content: ""; position: absolute; left: 16px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: #ff9a2e; }
html .sandbox-banner a {
  position: absolute; top: 0; right: 0; display: flex; align-items: center; height: 35px; padding: 0 16px 0 14px;
  border-left: 1px solid #3a3a41; background: #1f1f23; color: #ff9a2e; text-underline-offset: 3px;
}
html .sandbox-banner a:focus-visible { outline: 2px solid #ff9a2e; outline-offset: -2px; }

/* ─── 1. App header ───────────────────────────────────────────────────────── */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__page-header { background: var(--cm-bg); border-bottom: 1px solid var(--cm-line); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__header {
  min-height: 58px; padding: 7px 14px; gap: 12px; grid-template-columns: 44px minmax(0, 1fr) 44px;
  background: var(--cm-bg); color: var(--cm-ink); font-family: var(--cm-font);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .chat-app__header:not(.is-scheduled) { border-bottom: 1px solid var(--cm-line); background: var(--cm-bg); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__header :is(.chat-app__menu, .chat-app__new),
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .chat-app__dismiss {
  width: 44px; height: 44px; min-height: 44px; padding: 11px;
  border: 1px solid var(--cm-line-2); border-radius: var(--cm-radius); background: transparent; color: var(--cm-ink);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__header svg, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer svg, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__style-actions svg { stroke-width: 1.6; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__header :is(.chat-app__menu, .chat-app__new) svg { width: 20px; height: 20px; flex-basis: 20px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__wordmark { display: grid; justify-items: center; gap: 3px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__title {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  color: var(--cm-ink); font: 600 16px/1.2 var(--cm-font); letter-spacing: -.015em;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__title::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; background: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__context {
  max-width: 100%; margin: 0; color: var(--cm-ink-3);
  font: 500 var(--cm-micro)/1.3 var(--cm-mono); letter-spacing: .1em; text-transform: uppercase;
}
@media (hover: hover) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__header :is(.chat-app__menu, .chat-app__new):not(:disabled):hover,
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .chat-app__dismiss:hover { border-color: var(--cm-line-3); background: var(--cm-s1); }
}

/* ─── 2. Schedule (structure, order and texts untouched — styling only) ───── */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule { color: var(--cm-ink); font-family: var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule, html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading { --day-muted: var(--cm-ink-3); --day-line: var(--cm-line-2); --day-card: var(--cm-s1); --day-ink: var(--cm-ink); --num-w: 64px; }
/* Hero: left-aligned, one mono eyebrow, tight but not glued tracking. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .social-plan-header { margin: 32px 0 30px; padding: 0; text-align: left; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .social-plan-header .lab-plan-title {
  margin: 0; max-width: 18ch; color: var(--cm-ink); text-align: left;
  font: 600 clamp(30px, 8vw, 40px)/1.02 var(--cm-font); letter-spacing: -.03em; text-wrap: balance;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .social-plan-header .lab-plan-title::before {
  content: "Kalendarz publikacji"; content: "Kalendarz publikacji" / ""; display: block; margin: 0 0 14px; color: var(--cm-ink-3);
  font: 500 var(--cm-micro)/1 var(--cm-mono); letter-spacing: .1em; text-transform: uppercase;
}
html.has-chat-app[lang="en"]:not(#cm-theme):not(#cm-noir) .social-plan-header .lab-plan-title::before { content: "Publishing calendar"; content: "Publishing calendar" / ""; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .social-plan-platforms { justify-content: flex-start; gap: 0; margin: 22px 0 0; color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .social-plan-platforms > span { width: 46px; height: 40px; border: 1px solid var(--cm-line-2); border-radius: 0; background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .social-plan-platforms > span + span { margin-left: -1px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .social-plan-platforms svg { width: 19px; height: 19px; stroke-width: 1.5; }

/* Legend = column headers sitting exactly over the three counter cells. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-legend {
  display: grid; grid-template-columns: repeat(2, calc(var(--stat-w) - 1px)) var(--stat-w); justify-content: end; align-items: end; gap: 0;
  margin: 0 calc(var(--row-pad-r) + 1px) 8px 0; padding: 0; color: var(--cm-ink-3);
  font: 500 var(--cm-micro)/1 var(--cm-mono); letter-spacing: .02em; text-transform: uppercase;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-legend > * { display: block; justify-self: center; gap: 0; text-align: center; white-space: nowrap; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-legend .day-stat-icon { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-list { row-gap: 8px; gap: 8px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-month { color: var(--cm-ink-3); }

/* Day row. Colour in the schedule means publication and nothing else (no mango here):
   no materials = no colour, whatever the date · materials saved = light green (3 px bar, green counters)
   · everything published = strong green (wide bar, green date, filled counters, tag)
   · a past day with unpublished materials = red (wide bar, red date, tag).
   Today is marked neutrally: a lighter row and a white DZISIAJ.
   --edge: the row's hairline · --frame: the open card's frame · --bar-w/--bar: the status bar on the left edge.
   The same variables sit on the day card (.day-item), so an open card, its in-flow header and its pinned
   header draw one frame and one bar. .day-has-materials and data-day-state come from day-schedule.js. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.day-heading[data-state], .day-schedule .day-item) { --edge: var(--cm-line-2); --frame: var(--cm-line-3); --bar-w: 0px; --bar: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.day-heading[data-state], .day-schedule .day-item).day-has-materials { --bar-w: 3px; --bar: var(--cm-ok); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.day-heading[data-state="published"], .day-schedule .day-item[data-day-state="published"]).day-has-materials { --edge: var(--cm-ok-line); --frame: var(--cm-ok-line); --bar-w: 6px; --bar: var(--cm-ok); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.day-heading[data-state="overdue"], .day-schedule .day-item[data-day-state="overdue"]).day-has-materials { --edge: var(--cm-danger-line); --frame: var(--cm-danger-line); --bar-w: 6px; --bar: var(--cm-danger); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] {
  min-height: 78px; gap: 8px; padding: 0 var(--row-pad-r) 0 0;
  border: 1px solid var(--edge); border-radius: 0; background: var(--cm-s1); color: var(--cm-ink);
  box-shadow: inset var(--bar-w) 0 0 var(--bar); font-family: var(--cm-font);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state]:is([data-state="ready"], [data-state="published"], [data-state="overdue"]) { background: var(--cm-s1); color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state].day-is-today { background: var(--cm-s2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state].day-is-today:not(.day-is-pinned):not([data-state="published"]):not([aria-expanded="true"]) { border-color: var(--cm-line-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading .day-summary { position: relative; gap: 12px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading .day-label { position: static; gap: 5px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-number {
  width: var(--num-w); flex: 0 0 var(--num-w); min-width: 0; height: auto; padding: 0; align-self: stretch;
  border: 0; border-right: 1px solid var(--cm-line-2); border-radius: 0; background: transparent; color: var(--cm-ink);
  font: 500 30px/1 var(--cm-font); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state]:has(.day-today-kicker:not([hidden])) .day-number { padding-bottom: 14px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-date { color: var(--cm-ink); font: 600 16px/1.15 var(--cm-font); letter-spacing: -.012em; text-transform: capitalize; white-space: nowrap; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading .day-full-date { color: var(--cm-ink-3); font: 400 11px/1.2 var(--cm-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-today-kicker {
  position: absolute; left: 5px; right: auto; bottom: 10px; width: calc(var(--num-w) - 9px); margin: 0; padding: 0;
  transform: none; border-radius: 0; background: none; box-shadow: none; text-align: center; white-space: nowrap;
  color: var(--cm-ink-3); font: 500 var(--cm-micro)/1 var(--cm-mono); letter-spacing: 0; text-transform: uppercase;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state].day-is-today .day-today-kicker { color: var(--cm-ink); font-weight: 700; }
/* EN "YESTERDAY"/"TOMORROW" fill the column at 10 px; one step smaller keeps clear of the bar and the rule. */
html.has-chat-app[lang="en"]:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-today-kicker { font-size: 9px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-stats { gap: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-stat {
  width: var(--stat-w); min-width: var(--stat-w); height: 44px; padding: 0; gap: 5px; justify-content: center;
  border: 1px solid var(--cm-line-2); border-radius: 0; background: transparent; color: var(--cm-ink-3);
  font: 500 13px/1 var(--cm-mono); font-variant-numeric: tabular-nums;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-stat + .day-stat { margin-left: -1px; }
/* Counters with materials: light green (outlined: green figure, green underline); all published: filled
   green; a past unpublished day: the red underline. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-stat[data-empty="false"] {
  position: relative; z-index: 1; border-color: var(--cm-line-3); background: var(--cm-s3); color: var(--cm-ok);
  box-shadow: inset 0 -2px 0 var(--cm-ok);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state][data-state="published"] .day-stat[data-empty="false"] { border-color: #0d5a2a; background: var(--cm-ok-fill); color: #fff; box-shadow: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state][data-state="overdue"] .day-stat[data-empty="false"] { color: var(--cm-ink); box-shadow: inset 0 -2px 0 var(--cm-danger); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading :is(.day-stat-value, .day-count) { color: inherit; font: inherit; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-stat-icon { width: 14px; height: 16px; flex: 0 0 14px; }
/* A reel CosmoMango is still making for this day (seen even with the day collapsed): the reel counter
   carries the CosmoMango loader in a breathing mango frame, and a note under the date says so. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-stat[data-working="true"] {
  position: relative; z-index: 2; border-color: var(--cm-mango); background: rgb(255 154 46 / .12); color: var(--cm-ink);
  box-shadow: inset 0 -2px 0 var(--cm-mango); animation: cm-day-working 2s ease-in-out infinite;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-stat[data-working="true"] .day-stat-value { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-stat[data-working="true"]::before {
  content: ""; width: 20px; height: 20px; flex: 0 0 20px;
  background: var(--mango-loader-image, url("/assets/brand/cosmomango-loader.svg")) center / contain no-repeat;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading .day-working { color: var(--cm-mango); font: 600 10px/1.2 var(--cm-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading .day-working[hidden] { display: none; }
@keyframes cm-day-working {
  0%, 100% { box-shadow: inset 0 -2px 0 var(--cm-mango), 0 0 0 0 rgb(255 154 46 / 0); }
  50% { box-shadow: inset 0 -2px 0 var(--cm-mango), 0 0 14px 0 rgb(255 154 46 / .45); }
}
@media (prefers-reduced-motion: reduce) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-stat[data-working="true"] { animation: none; } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state][data-state="published"] .day-number { color: var(--cm-ok); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state][data-state="overdue"].day-has-materials .day-number { color: var(--cm-danger); }
/* Tag in the top-right corner (text from data-publication-label, icon drawn in CSS). A past day with nothing
   in it has no tag and no colour at all. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state][data-state="published"]::after,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state][data-state="overdue"]::after {
  top: -1px; right: -1px; transform: none; padding: 3px 9px 3px 22px; border: 0; border-radius: 0;
  background: var(--cm-ok-fill) var(--cm-icon-check) no-repeat 8px 50% / 10px 10px; color: #fff; box-shadow: none;
  font: 700 var(--cm-micro)/1 var(--cm-mono); letter-spacing: .1em; text-transform: uppercase;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state][data-state="overdue"]::after { background-color: var(--cm-danger-fill); background-image: var(--cm-icon-alert); color: #fff; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state][data-state="overdue"]:not(.day-has-materials)::after { content: none; }
/* The counters of a tagged row sit 3 px lower, clear of the tag above them. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state]:is([data-state="published"], [data-state="overdue"]).day-has-materials .day-stats { margin-top: 6px; }

/* Open day: ONE lifted card that stands apart from the days around it. The header and its body share one
   raised surface; a light frame (the neutral "open" mark; green/red when the day is published/overdue) closes
   the whole day, the status bar runs down its left edge, a shadow lifts it off the list and clear air sits above
   and below it, so every material and description inside can only be read as this day's. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.day-heading[data-state][aria-expanded="true"], .day-schedule .day-item.day-is-expanded) { --frame: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.day-heading[data-state="published"][aria-expanded="true"], .day-schedule .day-item.day-is-expanded[data-day-state="published"]).day-has-materials { --frame: var(--cm-ok); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.day-heading[data-state="overdue"][aria-expanded="true"], .day-schedule .day-item.day-is-expanded[data-day-state="overdue"]).day-has-materials { --frame: var(--cm-danger); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-item.day-is-expanded {
  position: relative; z-index: 1; margin: 14px 0 22px; border-radius: 0; background: var(--cm-s2);
  box-shadow: inset 0 0 0 1px var(--frame), inset calc(var(--bar-w) + 1px) 0 0 var(--bar), 0 16px 40px rgb(0 0 0 / .55);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-item.day-is-expanded:first-child { margin-top: 4px; }
/* The header/body divider is drawn by the body and starts after the bar, so the bar never breaks. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state][aria-expanded="true"]:not(.day-is-pinned) { border-radius: 0; border-color: var(--frame); border-bottom-width: 0; background: var(--cm-s2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-item.day-is-expanded > .day-body {
  padding: 16px 12px 18px;
  background: linear-gradient(var(--cm-line-2), var(--cm-line-2)) no-repeat calc(var(--bar-w) + 1px) 0 / 100% 1px;
}
/* With materials the strip, its toolbar and the description come first; the create actions follow as their own
   group, 20 px lower, under a mono label, so "what this day has" and "add to this day" never run together. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-materials > .day-downloads:first-child ~ .day-actions { margin-top: 20px; }
/* No label over the create actions: the space alone separates "what this day has" from "add to it". */

/* Pinned day: the header of the open card, fixed at the top while the card scrolls under it. Its side
   gutters are page background (borders), so its frame lines and status bar sit exactly over the card's. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state].day-is-pinned {
  z-index: 95; left: calc(var(--day-header-left, 0px) - var(--cm-gutter)); width: calc(var(--day-header-width, 100%) + 2 * var(--cm-gutter));
  padding: env(safe-area-inset-top, 0px) calc(var(--row-pad-r) + 1px) 0 1px;
  border: 0 solid var(--cm-bg); border-inline-width: var(--cm-gutter); border-radius: 0;
  background: var(--cm-s2) padding-box;
  box-shadow: inset 1px 0 0 var(--frame), inset calc(var(--bar-w) + 1px) 0 0 var(--bar), inset -1px 0 0 var(--frame), inset 0 -1px 0 var(--cm-line-2);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state].day-is-pinned::after { top: env(safe-area-inset-top, 0px); right: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state].day-is-pinned:focus-visible { outline-offset: calc(-2px - var(--cm-gutter)); }
/* While a day is pinned the app sets --day-header-height (0px otherwise): the page header slides out
   of view under the pinned bar. No html:has() here: that selector re-styled the whole document every
   time anything was added to <body> (the carousel export does it per slide), making saves ~60% slower. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__page-header { translate: 0 calc(-1 * min(var(--day-header-height, 0px) * 100, 240px)); }

@media (hover: hover) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state]:not(.day-is-pinned):not([aria-expanded="true"]):hover { background: var(--cm-s2); }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-stat:hover { color: var(--cm-ink); }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state]:is([data-state="ready"], [data-state="unavailable"]) .day-stat[data-empty="false"]:hover { color: var(--cm-ok); }
}
/* Create: one compact joined bar, 44 px tall, the kind's icon beside its words (words only on the narrowest phones). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions { gap: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-action,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-action:not(:disabled):hover {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; width: auto; min-width: 0; min-height: 44px; height: auto; margin: 0; padding: 0 4px;
  border: 1px solid var(--cm-line-2); border-radius: 0; background: transparent; color: var(--cm-ink-2); box-shadow: none;
  font: 500 12px/1.2 var(--cm-font); letter-spacing: -.01em; text-align: center; white-space: nowrap;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-action + .day-action { margin-left: -1px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-action::before { width: 16px; height: 16px; flex: 0 0 16px; opacity: .9; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-action[data-kind="story"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='3.75' y='3.75' width='16.5' height='16.5' stroke-dasharray='3 2.5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='3.75' y='3.75' width='16.5' height='16.5' stroke-dasharray='3 2.5'/%3E%3C/svg%3E");
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-action[aria-pressed="true"],
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-action[aria-pressed="true"]:not(:disabled):hover {
  position: relative; z-index: 1; border-color: var(--cm-line-3); background: var(--cm-s3); color: var(--cm-ink);
  box-shadow: inset 0 -2px 0 var(--cm-ink);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-action:disabled { background: transparent; color: var(--cm-ink-3); border-color: var(--cm-line); opacity: 1; }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-action:not(:disabled):not([aria-pressed="true"]):hover { color: var(--cm-ink); border-color: var(--cm-line-3); } }
/* Upload a material made elsewhere: one full-width row joined under the three create actions (upload arrow + words). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-upload,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-upload:not(:disabled):hover {
  grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; width: auto; min-width: 0; min-height: 44px; margin: -1px 0 0; padding: 0 12px;
  border: 1px solid var(--cm-line-2); border-radius: 0; background: transparent; color: var(--cm-ink); box-shadow: none;
  font: 500 12.5px/1.2 var(--cm-font); letter-spacing: -.01em; text-align: center; white-space: nowrap;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-upload::before {
  content: ""; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='m7 8 5-5 5 5'/%3E%3Cpath d='M4 14v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='m7 8 5-5 5 5'/%3E%3Cpath d='M4 14v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-upload:disabled { color: var(--cm-ink-3); border-color: var(--cm-line); opacity: 1; }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-upload:not(:disabled):hover { border-color: var(--cm-line-3); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-upload.mango-loading::before {
  width: 20px; height: 20px; flex-basis: 20px; -webkit-mask: none; mask: none;
  background: var(--mango-loader-image, url("/assets/brand/cosmomango-loader.svg")) center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-upload.mango-loading::before { background-image: var(--mango-static-image, url("/assets/brand/cosmomango-logo.svg")); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-action-note, html.has-chat-app:not(#cm-theme):not(#cm-noir) .publication-hint { color: var(--cm-ink-3); font-size: 12px; }
/* Errors in the schedule are neutral (red means "past, unpublished" here): white rule, alert mark, ink text. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-error:not([hidden]):not(:empty) {
  margin: 0 0 14px; padding: 11px 12px 11px 36px; border: 1px solid var(--cm-line-3); color: var(--cm-ink); font: 400 13px/1.5 var(--cm-font);
  background: var(--cm-icon-alert) no-repeat 14px 14px / 11px 11px, linear-gradient(var(--cm-line-3), var(--cm-line-3)) no-repeat 10px 11px / 19px 17px, var(--cm-s1);
  box-shadow: inset 2px 0 0 var(--cm-ink);
}

/* Materials of the open day, like clips in CapCut: no frames, the media carries the structure.
   1 · a STRIP of tiles, one height, each in its own format (story/reel 9:16, post 4:5, carousel = a small stack
       of prints). Status sits ON the tile as small marks: green tick (published), lines mark (has a description),
       a red base line (past day, not published), ▶ (reel). A tap selects a tile: a white outline 2 px out.
   2 · ONE toolbar for the selected material under the strip: a mono line naming it, then small line icons
       (22 px) over short labels (12 px) — Pobierz · Opublikowane · Opis / Link CTA · Edytuj · Usuń. No fills,
       no frames; each tool is a 44 × 52 px target around a small mark.
   3 · the description SHEET under the toolbar: headed by the same material's thumbnail and "OPIS — POST 2",
       the text, then Zapisz (the one filled action) and small icon tools.
   Hierarchy is size, air and grey level: white = selected / active, ink-2 = tools, ink-3 = labels. Green and red
   keep meaning publication only; mango appears only as the loader. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-materials .day-downloads {
  --tile-h: 296px; gap: 8px; align-items: flex-end; margin: 0 -4px; padding: 4px 4px 6px; scroll-padding-inline: 4px;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-item.day-is-expanded > .day-body .day-materials .day-downloads {
  --rail-in: calc(15px - var(--bar-w));
  margin-inline: calc(-1 * var(--rail-in)) -15px; padding-inline: var(--rail-in) 15px; scroll-padding-inline: var(--rail-in) 15px;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-materials .day-downloads > .day-material-card {
  position: relative; flex: 0 0 auto; width: calc(var(--tile-h) * 9 / 16); height: var(--tile-h); margin: 0; padding: 0;
  container-type: normal; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-materials .day-downloads > .day-material-card[data-material="post"] { width: calc(var(--tile-h) * 4 / 5); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-materials .day-downloads > .day-material-card[data-carousel] { --stack: 11px; width: calc((var(--tile-h) - 2 * var(--stack)) * 4 / 5 + 2 * var(--stack)); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads > .day-material-card > .day-material-preview {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; overflow: visible; border-radius: 0; background: var(--cm-well);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads > .day-material-card .day-material-thumbnail {
  display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; border-radius: 0; background: var(--cm-well); cursor: pointer;
}
/* Selected: a white outline 2 px out from the tile (CapCut's selected clip). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads > .day-material-card.is-selected > .day-material-preview { outline: 2px solid var(--cm-ink); outline-offset: 2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads > .day-material-card:not(.is-selected) .day-material-thumbnail { opacity: .8; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads > .day-material-card.is-new > .day-material-preview { outline: 2px solid var(--cm-ink); outline-offset: 2px; }
/* Keyboard focus on a tile: a white ring with a black halo INSIDE the tile, readable on any artwork. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-thumbnail:focus-visible { outline: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-preview:has(> .day-material-thumbnail:focus-visible)::after {
  content: ""; position: absolute; z-index: 4; inset: 4px; border: 2px solid var(--cm-ink); box-shadow: 0 0 0 2px rgb(0 0 0 / .7), inset 0 0 0 2px rgb(0 0 0 / .7); pointer-events: none;
}
/* Status marks on the tile. Published: a green tick square (top left) and a green base line; the time is named
   in the toolbar line. The text of the badge stays for screen readers. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card .day-material-preview .material-published-badge {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card .day-material-preview .material-published-badge[hidden] { display: none; }
/* Publication is a rubber stamp across the tile: green OPUBLIKOWANO with the time, or (a past day, not published)
   a red NIE OPUBLIKOWANO, tilted like a hand stamp, double-ruled, on a dark veil so it reads on any artwork. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card .day-material-stamp {
  position: absolute; z-index: 3; top: 50%; left: 50%; translate: -50% -50%; rotate: -12deg;
  display: grid; justify-items: center; gap: 2px; box-sizing: border-box; max-width: 96%; padding: 3px 5px 3px;
  border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 2px; border-radius: 2px;
  background: rgb(12 12 14 / .62); color: var(--cm-ok); box-shadow: 0 2px 10px rgb(0 0 0 / .45);
  font: 800 7.5px/1.05 var(--cm-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card .day-material-stamp[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card .day-material-stamp > [hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card .day-material-stamp-bottom { font-size: 9px; font-weight: 700; letter-spacing: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card .day-material-stamp[data-state="overdue"] { rotate: -14deg; color: #ff5a4f; border-width: 3px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card .day-material-stamp[data-state="overdue"] .day-material-stamp-top { font-size: 10px; letter-spacing: .3em; margin-right: -.3em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card.is-published:not(.is-selected) .day-material-thumbnail { opacity: .72; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads > .day-material-card[data-carousel] .day-material-stamp { top: calc(50% + var(--stack)); left: calc(50% - var(--stack)); }
/* Has a description: a small lines mark (top right) on a dark plate, so it reads on any artwork. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card.has-caption > .day-material-preview::before {
  content: ""; position: absolute; z-index: 3; top: 5px; right: 5px; width: 18px; height: 18px; pointer-events: none;
  background: rgb(23 23 26 / .86) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f1ed' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M5 7h14M5 12h14M5 17h9'/%3E%3C/svg%3E") no-repeat 50% 50% / 12px 12px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22);
}
/* The old overdue flag, family label and "KARUZELA · 3" chip are gone from tiles: the toolbar line names them. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-item[data-day-state="overdue"] .day-downloads .day-material-card:not(.is-published) > .day-material-preview::after { content: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card .day-material-carousel,
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card .day-material-family { display: none; }
/* Reel: ▶ in the tile's lower left (a 44 × 44 target, a 26 px plate); it plays the reel under the toolbar. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card .day-material-play {
  position: absolute; z-index: 3; top: auto; right: auto; bottom: 0; left: 0; transform: none; display: grid; place-items: end start;
  width: 44px; height: 44px; min-height: 44px; padding: 0 0 5px 5px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--cm-ink); font-size: 0;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card .day-material-play::before {
  content: ""; display: block; width: 26px; height: 26px; margin: 0;
  background: rgb(23 23 26 / .86) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='%23f2f1ed'/%3E%3C/svg%3E") no-repeat 55% 50% / 14px 14px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); -webkit-mask: none; mask: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card .day-material-play[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card .day-material-play:focus-visible { outline: 2px solid var(--cm-ink); outline-offset: -2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card .day-material-play.mango-loading::before {
  background: rgb(23 23 26 / .9) var(--mango-loader-image, url("/assets/brand/cosmomango-loader.svg")) no-repeat 50% 50% / 20px 20px;
}
/* Carousel: a small stack of three prints inside the tile. The front print is slide 1 (cut from the saved strip),
   smaller than the tile, so slides 2 and 3 show behind it, one step up and right each; nothing leaves the tile. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads > .day-material-card[data-carousel] > .day-material-preview { padding: calc(2 * var(--stack)) calc(2 * var(--stack)) 0 0; background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads > .day-material-card[data-carousel] .day-material-thumbnail {
  position: relative; z-index: 1; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 0 50%; box-shadow: 0 2px 8px rgb(0 0 0 / .55);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-carousel-print {
  position: absolute; z-index: 0; top: calc(2 * var(--stack)); right: calc(2 * var(--stack)); bottom: 0; left: 0; aspect-ratio: auto; display: block; box-sizing: border-box;
  border: 1px solid rgb(0 0 0 / .45); background: var(--carousel-image, none) no-repeat 50% 0 / 300% 100%, var(--cm-s3);
  box-shadow: 0 1px 5px rgb(0 0 0 / .5); transform-origin: 30% 100%; pointer-events: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-carousel-print--2 { translate: var(--stack) calc(-1 * var(--stack)); rotate: 0deg; filter: brightness(.8); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-carousel-print--3 { translate: calc(2 * var(--stack)) calc(-2 * var(--stack)); rotate: 0deg; background-position: 100% 0, 0 0; filter: brightness(.62); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card:not([data-carousel]) .day-carousel-print { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads > .day-material-card[data-carousel].is-selected > .day-material-preview { outline-offset: 2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads > .day-material-card[data-carousel] .day-material-preview .material-published-badge { top: 15px; left: 5px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads > .day-material-card[data-carousel].has-caption > .day-material-preview::before { top: calc(2 * var(--stack) + 5px); right: calc(2 * var(--stack) + 5px); }
/* Waiting on a tile: the mango alone (its words stay for screen readers). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-thumbnail-progress:not([hidden]) {
  position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; padding: 0; border-radius: 0; background: rgb(23 23 26 / .6);
  color: transparent; font-size: 0; line-height: 0; overflow: hidden;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-thumbnail-progress.mango-loading::before { width: 26px; height: 26px; margin: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-progress:not([hidden]) {
  position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px;
  background: rgb(23 23 26 / .82); color: var(--cm-ink-2); font: 500 9px/1.3 var(--cm-mono); letter-spacing: .06em; text-transform: uppercase; text-align: center;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-progress.mango-loading::before { width: 30px; height: 30px; margin: 0; }

/* 2 · The toolbar of the selected material. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-toolbar { margin: 10px 0 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-context {
  margin: 0 0 2px; padding: 0; overflow: hidden; color: var(--cm-ink-3); white-space: nowrap; text-overflow: ellipsis;
  font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .08em; text-transform: uppercase;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions[role="toolbar"] {
  display: flex; flex-direction: row; justify-content: space-between; gap: 0; margin: 0 -8px; padding: 0; border: 0; background: none; box-shadow: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > button,
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > button:not(:disabled):hover {
  position: relative; display: flex; flex: 0 1 auto; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px;
  width: auto; min-width: 44px; min-height: 54px; height: auto; margin: 0; padding: 7px 8px 6px; overflow: visible;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--cm-ink-2);
  font: 500 12px/1.15 var(--cm-font); letter-spacing: -.005em; text-align: center; white-space: nowrap; text-transform: none; text-wrap: nowrap;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > button::before {
  content: ""; flex: none; width: 22px; height: 22px; margin: 0; border: 0; opacity: 1; background: currentColor;
  -webkit-mask: var(--tool-icon) center / contain no-repeat; mask: var(--tool-icon) center / contain no-repeat;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > button + button { border: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > button:focus-visible { z-index: 2; outline: 2px solid var(--cm-ink); outline-offset: -2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > button:disabled { opacity: .4; }
/* "Opublikowane": an empty square → a filled green tick; the label turns green too. A past day's unpublished
   material shows the square in red (the one thing missing). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > .day-publish[aria-pressed="true"] { color: var(--cm-ok); background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > .day-publish[aria-pressed="true"]::before {
  -webkit-mask: none; mask: none; background: var(--cm-ok-fill) var(--cm-icon-check) no-repeat 50% 50% / 12px 12px; box-shadow: inset 0 0 0 1px var(--cm-ok);
  width: 18px; height: 18px; margin: 2px;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-item[data-day-state="overdue"] .day-material-tools .day-material-actions > .day-publish:not([aria-pressed="true"])::before { background: var(--cm-danger); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > .day-publish:not([aria-pressed="true"]) { box-shadow: none; }
/* "Opis": white while its sheet is open (a short white bar under the label, like a selected tab). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > .day-caption[aria-expanded="true"] { color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > .day-caption[aria-expanded="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 18px; height: 2px; margin-left: -9px; background: var(--cm-ink);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > .day-cta-link.is-confirmed { color: var(--cm-ink); background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > .day-cta-link.is-confirmed::before { background: var(--cm-mango); }
@media (hover: hover) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > button:not(:disabled):hover { color: var(--cm-ink); }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > .day-publish[aria-pressed="true"]:not(:disabled):hover { color: var(--cm-ok); }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads > .day-material-card:not(.is-selected):hover .day-material-thumbnail { opacity: 1; }
}
/* Waiting on a tool: the mango replaces its icon, the label stays. "Opis" shows it only while its sheet is closed
   (an open sheet has its own loader line: one mango at a time). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > button.mango-loading::before,
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > .day-caption:is([data-state="writing"], [data-state="translating"]):not([aria-expanded="true"])::before {
  -webkit-mask: none; mask: none; box-shadow: none; width: 22px; height: 22px; margin: 0;
  background: var(--mango-loader-image, url("/assets/brand/cosmomango-loader.svg")) center / contain no-repeat;
}
/* "Link CTA" answer: under the toolbar, the copied address (mono) or how to add the website. Neutral colours. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-cta-note { margin: 6px 0 0; padding: 8px 10px; border: 0; border-left: 2px solid var(--cm-ink); background: var(--cm-s1); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-cta-note[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-cta-note-text { margin: 0; color: var(--cm-ink-2); font: 400 12px/1.45 var(--cm-font); overflow-wrap: anywhere; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-cta-note:not(.is-missing):not(.is-error) .day-cta-note-text { color: var(--cm-ink); font: 400 11px/1.45 var(--cm-mono); letter-spacing: .01em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-cta-open {
  display: flex; align-items: center; justify-content: center; width: auto; min-height: 44px; margin: 6px 0 0; padding: 6px 14px;
  border: 1px solid var(--cm-line-3); border-radius: 0; background: transparent; color: var(--cm-ink); font: 600 12px/1.2 var(--cm-font);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-cta-open[hidden] { display: none; }
/* A reel plays on the stage under its toolbar. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-stage { display: flex; align-items: flex-end; gap: 12px; margin: 8px 0 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-stage[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-stage .day-material-player { display: block; width: min(56%, 220px); height: auto; aspect-ratio: 9 / 16; border-radius: 0; background: var(--cm-well); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-stage .day-material-stop {
  position: static; min-height: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--cm-line-3); border-radius: 0; background: transparent; color: var(--cm-ink);
  font: 500 var(--cm-micro)/1.3 var(--cm-mono); letter-spacing: .08em; text-transform: uppercase;
}

/* 3 · The description sheet of the selected material, under its toolbar. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-panel {
  position: relative; margin: 8px 0 0; padding: 0; border: 0; border-top: 1px solid var(--cm-line-2); border-radius: 0;
  background: transparent; color: var(--cm-ink); box-shadow: none; scroll-margin: calc(var(--day-header-height, 0px) + 12px) 0 16px;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-panel[hidden] { display: none; }
/* No head (thumbnail, "Opis — post 1"): the text starts right under the toolbar; × closes the tools row. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-panel { padding-top: 12px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools .day-caption-close { flex: 0 0 44px; width: 44px; margin-left: auto; color: var(--cm-ink-2); font: 300 24px/1 var(--cm-font); }
/* After a hand edit "Zapisz" saves and folds the sheet, so it stands in for × (one row, no wrap). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools .day-caption-save:not([hidden]) ~ .day-caption-close { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-close > span { display: block; transform: translateY(-1px); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-status { margin: 0 0 8px; color: var(--cm-ink-3); font: 400 12px/1.5 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-status[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-status.mango-loading {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 8px; color: var(--cm-ink-2);
  font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .06em; text-transform: uppercase;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-status.mango-loading::before { flex: none; width: 32px; height: 32px; margin: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-status.is-error {
  padding: 10px 12px 10px 36px; border: 1px solid var(--cm-line-3); color: var(--cm-ink); font: 400 13px/1.5 var(--cm-font);
  background: var(--cm-icon-alert) no-repeat 14px 13px / 11px 11px, linear-gradient(var(--cm-line-3), var(--cm-line-3)) no-repeat 10px 10px / 19px 17px, var(--cm-s2);
  box-shadow: inset 2px 0 0 var(--cm-ink);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-text {
  display: block; box-sizing: border-box; width: 100%; min-height: 168px; margin: 0; padding: 12px;
  border: 1px solid var(--cm-line-3); border-radius: 0; background: var(--cm-bg); color: var(--cm-ink); box-shadow: none;
  font: 400 16px/1.55 var(--cm-font); resize: vertical;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-text[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-text::placeholder { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-text:disabled { opacity: .6; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-text:focus, html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-text:focus-visible { border-color: var(--cm-ink); outline: 0; }
/* Tools: small icon tools with a word under the icon · Zapisz (ink, the one filled action) at the end, only after a hand edit. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 8px -8px 0 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 44px; min-height: 54px; margin: 0; padding: 7px 8px 6px;
  border: 0; border-radius: 0; background: transparent; color: var(--cm-ink-2); box-shadow: none;
  font: 500 12px/1.15 var(--cm-font); letter-spacing: -.005em; white-space: nowrap; text-decoration: none; text-transform: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools button[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools button:not(.day-caption-save):not(.day-caption-translate):not(.day-caption-close)::before {
  content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--tool-icon) center / contain no-repeat; mask: var(--tool-icon) center / contain no-repeat;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools .day-caption-copy { --tool-icon: var(--cm-ic-copy); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools .day-caption-copy.is-confirmed { --tool-icon: var(--cm-ic-check); color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools .day-caption-regenerate { --tool-icon: var(--cm-ic-regenerate); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools .day-caption-undo { --tool-icon: var(--cm-ic-undo); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools .day-caption-translate { gap: 5px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-translate-icon { display: grid; place-items: center; height: 20px; color: currentColor; font: 500 13px/1 var(--cm-mono); letter-spacing: -.02em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools .day-caption-save {
  flex-direction: row; min-width: 88px; min-height: 44px; margin: 0 8px 0 auto; padding: 0 18px;
  background: var(--cm-ink); color: var(--cm-bg); font: 600 13px/1 var(--cm-font);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools .day-caption-translate[aria-expanded="true"] { color: var(--cm-ink); background: transparent; box-shadow: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools .day-caption-translate[aria-expanded="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 18px; height: 2px; margin-left: -9px; background: var(--cm-ink);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools .day-caption-undo { grid-column: auto; justify-content: center; padding-inline: 8px; border: 0; color: var(--cm-ink-2); text-decoration: none; font: 500 12px/1.15 var(--cm-font); letter-spacing: -.005em; text-transform: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools button:disabled { opacity: .4; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools .day-caption-save:disabled { background: var(--cm-s3); color: var(--cm-ink-3); opacity: 1; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools button:focus-visible { z-index: 2; outline: 2px solid var(--cm-ink); outline-offset: -2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools .day-caption-save:focus-visible { outline-offset: 2px; }
@media (hover: hover) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools button:not(:disabled):not(.day-caption-save):hover { color: var(--cm-ink); background: transparent; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools .day-caption-save:not(:disabled):hover { background: #fff; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-close:hover { color: var(--cm-ink); background: transparent; }
}
/* Its language list sits in the sheet (static), on the canvas level, and scrolls under a fade. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .translate-menu.day-caption-menu {
  position: static; width: auto; max-width: none; max-height: 312px; margin: 8px 0 0; padding: 10px 10px 0;
  border: 1px solid var(--cm-line-2); border-radius: 0; background: var(--cm-bg); color: var(--cm-ink); box-shadow: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-menu .translate-menu__title { margin: 2px 2px 10px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-menu .translate-menu__list {
  padding-bottom: 28px; -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
}
@media (min-width: 520px) { html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-menu .translate-menu__list button:nth-child(2n) { margin-left: 0; } html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-menu .translate-menu__list button:not(:nth-child(3n + 1)) { margin-left: -1px; } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-menu button:focus-visible { outline-color: var(--cm-ink); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > button.mango-loading::before,
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > .day-caption:is([data-state="writing"], [data-state="translating"]):not([aria-expanded="true"])::before { background-image: var(--mango-static-image, url("/assets/brand/cosmomango-logo.svg")); }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-downloads .day-material-card .day-material-play.mango-loading::before { background-image: var(--mango-static-image, url("/assets/brand/cosmomango-logo.svg")); }
}

/* Loading inside the schedule: the mango loader is the only warm colour here, and it replaces the control's
   own glyph instead of sitting next to it, so nothing is pushed out or clipped. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-loading, html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-loading { color: var(--cm-ink-2); font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .08em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-loading.mango-loading { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 14px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-loading.mango-loading::before { flex: none; width: 30px; height: 30px; margin: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-action.mango-loading::before {
  width: 20px; height: 20px; flex-basis: 20px; opacity: 1; -webkit-mask: none; mask: none;
  background: var(--mango-loader-image, url("/assets/brand/cosmomango-loader.svg")) center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-action.mango-loading::before { background-image: var(--mango-static-image, url("/assets/brand/cosmomango-logo.svg")); }
}

/* Legacy / rarer schedule parts */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-next { border: 1px dashed var(--cm-line-3); border-radius: 0; background: transparent; color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-close { border: 1px solid var(--cm-line-2); border-radius: 0; background: transparent; color: var(--cm-ink-2); font-family: var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-history-toggle { color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .08em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-warning { border: 1px solid var(--cm-line-3); border-radius: 0; background: var(--cm-s1); color: var(--cm-ink); box-shadow: inset 2px 0 0 var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-story-preview { border: 1px solid var(--cm-line-2); border-radius: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-story-preview.is-published { border-color: var(--cm-ok-line); box-shadow: inset 0 3px 0 var(--cm-ok); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-story-preview-image, html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-story-preview-video { border-radius: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-preview-publish { border: 1px solid var(--cm-ink); border-radius: var(--cm-radius); background: var(--cm-ink); color: var(--cm-bg); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-preview-publish.day-confirm-published { border-color: var(--cm-line-3); background: transparent; color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-preview-publish[aria-pressed="true"],
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-story-preview.is-published .day-preview-publish.day-confirm-published { border-color: var(--cm-ok-fill); background: var(--cm-ok-fill); color: #fff; }

/* ─── 3. Navigation drawer ────────────────────────────────────────────────── */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer {
  padding: max(24px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
  border: 0; border-right: 1px solid var(--cm-line-2); border-radius: 0;
  background: var(--cm-bg); color: var(--cm-ink); box-shadow: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer::backdrop { background: var(--cm-scrim); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer #brand-picker { position: relative; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer #brand-picker::before,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .chat-app__nav::before,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .chat-app__drawer-footer::before {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  color: var(--cm-ink-3); font: 500 var(--cm-micro)/1 var(--cm-mono); letter-spacing: .14em; text-transform: uppercase;
}
/* The MARKI label row also carries the close button (44 × 44), so nothing crowds the list. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer #brand-picker::before { content: "Marki"; content: "Marki" / ""; min-height: 44px; margin: 0 0 8px; padding-right: 52px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .chat-app__nav::before { content: "Studio"; content: "Studio" / ""; margin-bottom: 6px; padding-left: 10px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .chat-app__drawer-footer::before { content: "Konto"; content: "Konto" / ""; }
html.has-chat-app[lang="en"]:not(#cm-theme):not(#cm-noir) .chat-app__drawer #brand-picker::before { content: "Brands"; content: "Brands" / ""; }
html.has-chat-app[lang="en"]:not(#cm-theme):not(#cm-noir) .chat-app__drawer .chat-app__drawer-footer::before { content: "Account"; content: "Account" / ""; }
/* One list, no frames: section labels (MARKI · STUDIO · KONTO) and air separate the parts; every row is the same
   48 px icon + words; the page you are on is white with a short white bar. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer-top { display: block; margin-bottom: 26px; padding-bottom: 0; border-bottom: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .chat-app__drawer-top .chat-app__dismiss {
  position: absolute; top: 0; right: -10px; width: 44px; height: 44px; min-height: 44px; padding: 11px;
  border: 0; border-radius: var(--cm-radius); background: transparent; color: var(--cm-ink-2);
}
/* Brands: one horizontal, swipeable rail (the drawer sits beside the schedule on desktop, so it carries no mango).
   Each brand is a plain tile: mono index, name (up to two lines, never clipped mid-word), × with its own 44 px
   cell. The active tile has the white outline of a selected clip and a white index; cosmomango-theme.js scrolls
   it into view. "+ Dodaj" closes the row as a small icon tool. The rail bleeds to the drawer's edges, snaps
   softly and fades on the cut edge like the other rails (overflow and touch-action stay the app's). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands {
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 8px; counter-reset: cm-brand;
  margin: 0 -14px; padding: 4px 40px 4px 14px; scroll-padding-inline: 36px 44px; scroll-snap-type: x proximity;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands .brand-picker__object {
  position: relative; display: flex; flex: 0 0 auto; align-items: stretch; width: auto; max-width: min(236px, calc(100vw - 130px)); min-height: 48px; box-sizing: border-box;
  border: 0; border-radius: 0; background: var(--cm-s1); counter-increment: cm-brand; scroll-snap-align: start;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands .brand-picker__object::before {
  content: counter(cm-brand, decimal-leading-zero); content: counter(cm-brand, decimal-leading-zero) / "";
  flex: none; align-self: center; padding: 0 0 0 10px; color: var(--cm-ink-3); font: 500 var(--cm-micro)/1 var(--cm-mono); letter-spacing: .04em;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands .brand-picker__chip {
  flex: 1 1 auto; min-width: 0; max-width: 168px; min-height: 48px; max-height: none; padding: 7px 10px 7px 8px; overflow: hidden;
  border: 0; border-radius: 0; background: transparent; color: var(--cm-ink-2); box-shadow: none;
  font: 500 13.5px/1.25 var(--cm-font); letter-spacing: -.005em; text-align: left; white-space: normal; text-overflow: clip; text-wrap: balance; overflow-wrap: anywhere;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands .brand-picker__object:has(.is-selected) {
  z-index: 1; background: var(--cm-s2); outline: 2px solid var(--cm-ink); outline-offset: 2px; box-shadow: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands .brand-picker__object:has(.is-selected)::before { color: var(--cm-ink); font-weight: 700; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands .brand-picker__object .brand-picker__chip.is-selected { box-shadow: none; background: transparent; color: var(--cm-ink); font-weight: 600; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands .brand-picker__remove {
  display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: auto; min-height: 48px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--cm-ink-3); font: 300 18px/1 var(--cm-font);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands .brand-picker__object:has(.is-selected) .brand-picker__remove { color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands .brand-picker__chip--add {
  flex: 0 0 auto; width: auto; min-width: 0; min-height: 48px; margin: 0; padding: 0 10px; border: 0; border-radius: 0;
  background: transparent; color: var(--cm-ink-2); font: 500 13px/1.25 var(--cm-font); text-align: center; white-space: nowrap; scroll-snap-align: end;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands .brand-picker__chip--add::after { content: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands :is(.brand-picker__chip, .brand-picker__remove):focus-visible { outline: 2px solid var(--cm-ink); outline-offset: -3px; }
/* Keyboard focus scrolls a card clear of the faded edges (a brand name keeps its × in view too). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands .brand-picker__chip { scroll-margin-inline: 40px 88px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands :is(.brand-picker__remove, .brand-picker__chip--add) { scroll-margin-inline: 40px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.brand-chat__industry-choices, .studio-industry-rail, .brand-chat--creation-studio .font-strip, .brand-chat .brand-style-panel__font-options) > * { scroll-margin-inline: 40px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .editor-tools button { scroll-margin-inline: 28px; }
@media (hover: hover) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands .brand-picker__object:not(:has(.is-selected)):hover { border-color: var(--cm-line-3); background: var(--cm-s2); }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands .brand-picker__object:hover .brand-picker__chip { color: var(--cm-ink); }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands .brand-picker__remove:hover { color: var(--cm-ink); }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands .brand-picker__chip--add:hover { border-color: var(--cm-ink-3); color: var(--cm-ink); }
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__nav { gap: 0; margin: 0 -10px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__nav-item {
  position: relative; gap: 14px; min-height: 48px; padding: 12px 10px; border: 0; border-radius: 0; background: transparent;
  color: var(--cm-ink-2); font: 500 15px/1.35 var(--cm-font); letter-spacing: -.01em;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .chat-app__nav-item svg { width: 20px; height: 20px; flex-basis: 20px; color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__nav-item[aria-current='page'] { background: transparent; color: var(--cm-ink); box-shadow: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__nav-item[aria-current='page']::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .chat-app__nav-item[aria-current='page'] svg { color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__products-brand { color: var(--cm-ink-3); font: 400 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .06em; text-transform: uppercase; }
/* The products of a brand hang under their row, indented to its words; no rule beside them. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__products-panel { margin: -4px 0 8px 34px; padding: 0; border-left: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__offers { gap: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__offers .brand-picker__chip { position: relative; min-height: 44px; padding: 10px 10px; border: 0; border-radius: 0; background: transparent; color: var(--cm-ink-2); font: 400 14px/1.35 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__chip.is-selected { background: transparent; color: var(--cm-ink); box-shadow: inset 2px 0 0 var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__offers .brand-picker__chip--add { margin-top: 0; border: 0; color: var(--cm-ink-3); font-size: 13px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__offers .brand-picker__remove { border: 0; background: transparent; color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__empty, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__notice { color: var(--cm-ink-3); }
/* A failed brand/product removal (role=status under the rail): the shared error line, not grey-brown text. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__note:not([hidden]):not(:empty) {
  margin: 10px 0 0; padding: 10px 12px; border-left: 2px solid var(--cm-danger); background: rgb(255 77 77 / .06); color: var(--cm-ink); font: 400 12.5px/1.45 var(--cm-font);
}
/* KONTO: the same rows as STUDIO, each with its line icon: Plany i limity · Aplikacja na telefon · Język · Wyloguj. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer-footer { display: flex; flex-direction: column; margin-top: auto; padding-top: 28px; border-top: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer-footer::before { order: -2; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer-footer > :is(.account-plans-entry, .cm-pwa-entry, .account-logout, .language-switcher) { margin-left: -10px; margin-right: -10px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer-footer .account-plans-entry { order: -1; width: auto; margin-bottom: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer-footer .cm-pwa-entry,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-pwa-entry {
  display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 12px 10px; border: 0; border-radius: 0;
  background: transparent; color: var(--cm-ink-2); font: 500 15px/1.35 var(--cm-font); letter-spacing: -.01em; text-align: left;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer-footer .cm-pwa-entry { width: auto; margin-bottom: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer-footer :is(.account-plans-entry, .cm-pwa-entry, .account-logout)::before {
  content: ""; flex: 0 0 20px; width: 20px; height: 20px; background: var(--cm-ink-3);
  -webkit-mask: var(--row-icon) center / contain no-repeat; mask: var(--row-icon) center / contain no-repeat;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer-footer .account-plans-entry { --row-icon: var(--cm-ic-plans); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer-footer .cm-pwa-entry { --row-icon: var(--cm-ic-phone); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer-footer .account-logout { --row-icon: var(--cm-ic-exit); order: 2; }
@media (hover: hover) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__nav-item:hover { background: var(--cm-s1); color: var(--cm-ink); }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-pwa-entry:hover { background: var(--cm-s1); color: var(--cm-ink); }
}

/* Language: one row of the list (a globe, then the two languages as words; the chosen one white with a short
   white bar under it, like the selected "Opis" tool). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .language-switcher { gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font: 500 14px/1 var(--cm-font); letter-spacing: -.005em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .language-switcher button { position: relative; min-height: 44px; padding: 10px 10px; border: 0; border-radius: 0; background: transparent; color: var(--cm-ink-3); text-transform: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .language-switcher button[aria-pressed=true] { background: transparent; color: var(--cm-ink); box-shadow: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .language-switcher button[aria-pressed=true]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 2px; background: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .language-switcher { display: flex; align-items: center; min-height: 48px; margin-top: 0; margin-bottom: 0; padding-left: 10px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .language-switcher::before {
  content: ""; flex: 0 0 20px; width: 20px; height: 20px; margin-right: 4px; background: var(--cm-ink-3);
  -webkit-mask: var(--cm-ic-globe) center / contain no-repeat; mask: var(--cm-ic-globe) center / contain no-repeat;
}
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .language-switcher button:not([aria-pressed=true]):hover { color: var(--cm-ink); background: transparent; } }

/* ─── 4. Chat surfaces (brain, onboarding, creation) ───────────────────────── */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog, html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-chat.brand-chat__dialog { background: var(--cm-bg); color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__dialog::backdrop { background: var(--cm-bg); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat { --chat-ink: var(--cm-ink); --chat-muted: var(--cm-ink-3); --chat-line: var(--cm-line); --chat-mango: var(--cm-mango); color: var(--cm-ink); font-family: var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__speaker, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__speaker {
  color: var(--cm-ink-3);
  font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .12em; text-transform: uppercase;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__message:not(.brand-chat__message--user) > .brand-chat__speaker::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 7px 0 0; vertical-align: 1px; background: var(--cm-mango); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__message-text, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__memory-text, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__local-text { color: var(--cm-ink); }
/* Clarity (as in the schedule): hierarchy by position and size, not boxes. The customer's answers carry no
   frame or fill: they sit on the right under a mono "TY", in white. CosmoMango's earlier questions step back
   to small grey text; the question being answered now is the one large line on the screen. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__message--user, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__message--user {
  max-width: 86%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__message--user > .brand-chat__speaker { margin-bottom: 4px; }
/* The onboarding answers are short: they align to the right edge, their correction under them. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__local-message.brand-chat__message--user { text-align: right; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__local-message.brand-chat__message--user .brand-chat__swatches { justify-content: flex-end; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__local-message.brand-chat__message--user .brand-chat__button--quiet.brand-chat__edit { margin: 2px -8px -10px auto; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__local-message.brand-chat__message--user:has(> .brand-chat__edit:not([hidden])) { display: flex; flex-direction: column; align-items: flex-end; }
/* The step being answered spans the width, so its filled answer can sit at the end of its row. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__introduction > .brand-chat__local-message.is-current { justify-self: stretch; width: 100%; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__local-reply:not([hidden]) { margin-top: 28px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__message--user :is(.brand-chat__local-text, .brand-chat__message-text) { color: var(--cm-ink); font-size: 15px; line-height: 1.55; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.brand-chat__introduction, .brand-chat__name-transcript) > .brand-chat__local-message:not(.brand-chat__message--user):not(.is-current) > .brand-chat__local-text {
  color: var(--cm-ink-3); font: 400 14px/1.5 var(--cm-font); letter-spacing: 0;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.brand-chat__local-message.is-current, .brand-chat__industry .brand-chat__local-message, .brand-chat__source) > .brand-chat__local-text {
  color: var(--cm-ink); font: 600 21px/1.28 var(--cm-font); letter-spacing: -.022em; text-wrap: pretty;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__introduction, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__messages { gap: 28px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__intro, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__muted, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__space-note, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__local-note, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__footnote, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__connection { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__label { color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .12em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat :is(.brand-chat__input, .brand-chat__select, .brand-chat__textarea),
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog :is(input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select):not(.brand-chat__composer *):not(.chat-studio__composer *):not(.story-frame *) {
  border: 1px solid var(--cm-ctl); border-radius: 0; background-color: var(--cm-s1); color: var(--cm-ink); box-shadow: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog :is(input, textarea)::placeholder { color: var(--cm-ink-3); opacity: 1; }
/* Text fields show focus by a white frame (the field is already the target); buttons keep their ring. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog :is(input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select):not(.story-frame *):focus-visible { border-color: var(--cm-ink); outline: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog select { appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--cm-ink-2) 50%), linear-gradient(135deg, var(--cm-ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__button {
  min-height: 44px; padding: 10px 16px; border: 1px solid var(--cm-ink); border-radius: var(--cm-radius);
  background: var(--cm-ink); color: var(--cm-bg); font: 600 13px/1.3 var(--cm-font); letter-spacing: -.005em;
}
/* One filled action per step (ink). Every other action is quiet: a word (or a small icon and a word) with
   no frame and no fill, still a 44 px target. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__button--quiet { border-color: transparent; background: transparent; color: var(--cm-ink-2); font-weight: 500; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__button:disabled { border-color: var(--cm-line-2); background: var(--cm-s2); color: var(--cm-ink-3); opacity: 1; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__button--quiet:disabled { border-color: transparent; background: transparent; opacity: .45; }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__button--quiet:not(:disabled):hover { color: var(--cm-ink); } }
/* Suggested answers: plain tiles; a chosen one gets the white outline, like a selected clip. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat :is(.brand-chat__choice, .brand-chat__selected-choice) { min-height: 44px; padding: 10px 14px; border: 0; border-radius: 0; background: var(--cm-s1); color: var(--cm-ink-2); font: 500 13px/1.35 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__composer .brand-chat__selected-choice { min-height: 32px; padding: 6px 10px; font-size: 12px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__selected { color: var(--cm-ink-3); font: 400 var(--cm-micro)/1.5 var(--cm-mono); letter-spacing: .02em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__choice[aria-pressed="true"], html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__selected-choice { background: var(--cm-ink); color: var(--cm-bg); outline: 2px solid var(--cm-ink); outline-offset: 2px; box-shadow: none; }
/* A tapped answer pulses (a quick press and a ring that fades out), so a tap is always seen. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__choice { transition: background-color .15s ease, color .15s ease; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__choice:active { scale: .96; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__choice.is-pulsing { animation: cm-choice-pulse .5s ease-out; }
@keyframes cm-choice-pulse {
  0% { scale: .94; box-shadow: 0 0 0 0 rgb(242 241 237 / .55); }
  60% { scale: 1.02; box-shadow: 0 0 0 10px rgb(242 241 237 / 0); }
  100% { scale: 1; box-shadow: 0 0 0 0 rgb(242 241 237 / 0); }
}
@media (prefers-reduced-motion: reduce) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__choice.is-pulsing { animation: none; background: var(--cm-s3); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__choices { gap: 8px; padding: 4px; }
/* A proposed direction is a decision: "Tak, ten kierunek" is the filled action, "Chcę doprecyzować" a quiet word. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__choices[data-kind="direction"] { align-items: center; gap: 4px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__choices[data-kind="direction"] > .brand-chat__choice:first-child { padding: 0 18px; background: var(--cm-ink); color: var(--cm-bg); font-weight: 600; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__choices[data-kind="direction"] > .brand-chat__choice + .brand-chat__choice { padding: 0 10px; background: transparent; color: var(--cm-ink-2); }
@media (hover: hover) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__choice:not(:disabled):not([aria-pressed="true"]):hover { background: var(--cm-s2); color: var(--cm-ink); }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__choices[data-kind="direction"] > .brand-chat__choice:first-child:not(:disabled):hover { background: #fff; color: var(--cm-bg); }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__choices[data-kind="direction"] > .brand-chat__choice + .brand-chat__choice:not(:disabled):hover { background: transparent; }
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__composer, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__composer {
  border: 1px solid var(--cm-ctl); border-radius: 0; background: var(--cm-s1); box-shadow: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__composer:focus-within { border-color: var(--cm-ink-2); box-shadow: none; }
/* The composer's frame is its focus mark; the field inside carries no second ring. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__composer .brand-chat__textarea:focus-visible { outline: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__error:not([hidden]) { flex-shrink: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__composer .brand-chat__textarea { border: 0; background: transparent; color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__composer .brand-chat__button[type="submit"] { min-height: 44px; padding: 10px 18px; border-color: var(--cm-ink); background: var(--cm-ink); color: var(--cm-bg); }
/* "Wyślij" is filled only once there is something to send. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__composer .brand-chat__button[type="submit"]:disabled { border-color: transparent; background: transparent; color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__counter { color: var(--cm-ink-3); font: 400 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .04em; }
/* The character count is noise until it matters: it shows once the message or the history is over its limit
   (screen readers still get it). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__composer .brand-chat__counter:not(.is-over-limit) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__composer .brand-chat__actions--send { justify-content: flex-end; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__composer .brand-chat__actions--send:has(> .brand-chat__counter.is-over-limit) { justify-content: space-between; }
/* One error style outside the schedule: a red rule on the left, ink text (same as the dialogs). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__error { border: 0; border-left: 2px solid var(--cm-danger); border-radius: 0; background: rgb(255 77 77 / .06); color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__error p { color: var(--cm-ink); font-size: 13px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__memory, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__settings { border-top-color: var(--cm-line); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__memory-text { border-radius: 0; background: var(--cm-s1); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__memory-summary { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-offer-proposal { border: 1px solid var(--cm-line-2); border-radius: 0; background: var(--cm-s1); }
/* The proposal to approve: its text field is the frame; no panel around it. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat[data-view="chat"] .brand-chat__proposal { padding: 0; border: 0; border-radius: 0; background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-offer-core { border-top-color: var(--cm-line-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__source-prompt { background: var(--cm-s1); font-family: var(--cm-mono); }
/* "Jak chcesz opowiedzieć mi o tych produktach?": a plain list, like the menu. Each row is a mono number, the
   words and an arrow on a 52 px target; no frames, no fills. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__source { padding-bottom: 22px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__source-choices { gap: 0; margin: 0 -10px; counter-reset: cm-source; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__source-choices .brand-chat__button {
  position: relative; justify-content: flex-start; gap: 14px; min-height: 52px; padding: 12px 44px 12px 10px; counter-increment: cm-source;
  border: 0; border-radius: 0; background: transparent; color: var(--cm-ink); font: 500 15px/1.35 var(--cm-font); text-align: left;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__source-choices .brand-chat__button::before {
  content: counter(cm-source, decimal-leading-zero); content: counter(cm-source, decimal-leading-zero) / ""; flex: none; width: 18px;
  color: var(--cm-ink-3); font: 500 var(--cm-micro)/1 var(--cm-mono); letter-spacing: .06em;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__source-choices .brand-chat__button::after { content: "→"; content: "→" / ""; position: absolute; right: 12px; top: 50%; translate: 0 -50%; color: var(--cm-ink-3); font: 400 14px/1 var(--cm-mono); }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__source-choices .brand-chat__button:not(:disabled):hover { background: var(--cm-s1); color: var(--cm-ink); } }

/* Corrections inside the customer's answers ("Zmień kolory / czcionki / branżę"): a small pencil and the words
   in grey, no frame (the step rail at the top offers the same way back). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__message--user .brand-chat__button--quiet.brand-chat__edit {
  gap: 7px; min-height: 44px; margin: 2px 0 -10px -8px; padding: 0 8px; border: 0; border-radius: 0;
  background: transparent; color: var(--cm-ink-2); font: 500 12.5px/1.2 var(--cm-font); letter-spacing: -.005em; text-decoration: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__button--quiet.brand-chat__edit::before {
  width: 16px; height: 16px; opacity: 1; -webkit-mask: var(--cm-ic-edit) center / contain no-repeat; mask: var(--cm-ic-edit) center / contain no-repeat;
}
/* The way back is a compact mono "← WRÓĆ" with no frame (44 px tall, its full name in its label). A step's
   buttons share ONE row: the way back, the quiet "Zostaw … szablonu", then the filled answer at the end. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__button--quiet.brand-chat__back {
  flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 0; background: transparent; color: var(--cm-ink-2); text-decoration: none;
  font: 500 var(--cm-micro)/1.2 var(--cm-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__style .brand-chat__actions { flex-wrap: nowrap; align-items: center; gap: 2px; margin: 18px -8px 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__style .brand-chat__actions > .brand-chat__button--quiet:not(.brand-chat__back) {
  flex: 0 1 auto; min-width: 0; min-height: 44px; padding: 4px 8px; font: 500 12.5px/1.2 var(--cm-font); white-space: normal; text-wrap: balance; text-align: left;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__style .brand-chat__actions > .brand-chat__button:not(.brand-chat__button--quiet) {
  flex: 0 0 auto; margin: 0 8px 0 auto; padding: 0 16px; font: 600 13px/1.2 var(--cm-font); white-space: nowrap;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__industry .brand-chat__back { display: inline-flex; margin: 10px 0 0 -8px; }
@media (hover: hover) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__message--user .brand-chat__button--quiet.brand-chat__edit:not(:disabled):hover,
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__button--quiet.brand-chat__back:not(:disabled):hover { background: transparent; color: var(--cm-ink); }
}
/* The chosen colours read as three equal chips in one row: the colour, its name, its code. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__swatches { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; justify-content: start; margin-top: 10px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__local-message.brand-chat__message--user .brand-chat__swatches { justify-content: end; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__swatch { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; color: var(--cm-ink-2); text-align: left; font: 400 11px/1.3 var(--cm-mono); letter-spacing: .02em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__swatch i { display: block; width: 100%; height: 34px; margin-bottom: 4px; border: 1px solid rgb(255 255 255 / .16); border-radius: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__swatch-name { color: var(--cm-ink-3); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__swatch-code { color: var(--cm-ink-2); white-space: nowrap; }
/* Typing: a square mango block caret (the reply is being written). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.brand-chat__message-text, .brand-chat__local-text).is-typing::after { width: 7px; border-radius: 0; background: var(--cm-mango); }
/* Mango reading the brand (the brand-learning loader): the lit disc alone on the canvas, no stage around it. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__mango-reader:not([hidden]) { width: fit-content; margin: 18px auto 10px; padding: 0; border: 0; background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__mango-canvas { width: 132px; height: 116px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__connection.mango-loading { color: var(--cm-ink-2); font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .06em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__connection.mango-loading::before { width: 28px; height: 28px; }

/* The new brand's step rail: five short bars, each named in mono under it. Done = white bar, now = white bar
   and white name, still to come = dark bar. A finished colour, font or industry step is a 44 px button back. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__steps:not([hidden]) {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; flex: 0 0 auto;
  width: 100%; margin: 0; padding: 10px 0 0; list-style: none; counter-reset: none;
}
/* A new brand's setup reads as one column (the rail, the questions, the answers, the composer), centred on
   wide screens instead of spreading questions and answers 1000 px apart. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-onboarding-step]:not([data-onboarding-step=""]) .brand-chat__conversation { width: min(100%, 700px); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__step { position: relative; display: flex; min-width: 0; min-height: 36px; margin: 0; padding: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--cm-line-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__step:is([data-state="done"], [data-state="current"])::before { background: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__step-name,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__step .brand-chat__step-edit {
  display: block; min-width: 0; padding: 8px 0 0; overflow: hidden; color: var(--cm-ink-3); text-align: left; white-space: nowrap; text-overflow: ellipsis;
  font: 500 var(--cm-micro)/1.2 var(--cm-mono); letter-spacing: .08em; text-transform: uppercase;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__step[data-state="done"] .brand-chat__step-name { color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__step[data-state="current"] .brand-chat__step-name { color: var(--cm-ink); font-weight: 700; }
/* The way back to a finished step: the whole cell (and the air under the bar) is the target. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__step .brand-chat__step-edit {
  display: flex; flex: 1 1 auto; justify-content: flex-start; align-items: flex-start; min-height: 44px; margin: 0 0 -8px; padding: 8px 0 0;
  border: 0; border-radius: 0; background: transparent; color: var(--cm-ink-2); box-shadow: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__step .brand-chat__step-edit:focus-visible { outline-offset: -2px; }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__step .brand-chat__step-edit:not(:disabled):hover { color: var(--cm-ink); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-entry="name"] .brand-chat__steps { position: relative; z-index: 1; }

/* Industry question: native horizontal rail (overflow/touch untouched). Plain tiles; the chosen one has the
   white outline. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__industry-choices .brand-chat__button { min-height: 44px; padding: 11px 16px; border: 0; border-radius: 0; background: var(--cm-s1); color: var(--cm-ink-2); font: 500 13px/1.2 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__industry-choices .brand-chat__button[aria-pressed="true"] { background: var(--cm-s2); color: var(--cm-ink); outline: 2px solid var(--cm-ink); outline-offset: 2px; box-shadow: none; }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__industry-choices .brand-chat__button:not(:disabled):not([aria-pressed="true"]):hover { background: var(--cm-s2); color: var(--cm-ink); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__industry { margin-top: 8px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__industry-choices { gap: 8px; padding-block: 4px 12px; padding-inline-start: 4px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__industry > .brand-chat__button--quiet:not(.brand-chat__back) { margin: 10px 0 0 -8px; padding: 0 8px; font: 500 12.5px/1.2 var(--cm-font); }
/* Horizontal rails: overflow/touch/snap untouched; the cut edge fades and the last chip can scroll clear of the fade. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.brand-chat__industry-choices, .studio-industry-rail:not(.is-static), .brand-chat--creation-studio .font-strip) {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  scroll-padding-inline: 16px; padding-inline-end: 40px;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
@property --cm-fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --cm-fade-r { syntax: "<length>"; inherits: false; initial-value: 40px; }
@keyframes cm-rail-fade { 0% { --cm-fade-l: 0px; } 6%, 100% { --cm-fade-l: 32px; } }
@supports (animation-timeline: scroll()) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.brand-chat__industry-choices, .studio-industry-rail:not(.is-static), .brand-chat--creation-studio .font-strip, .chat-app__drawer .brand-picker__brands, .brand-chat .brand-style-panel__font-options) {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--cm-fade-l), #000 calc(100% - var(--cm-fade-r)), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--cm-fade-l), #000 calc(100% - var(--cm-fade-r)), transparent);
    animation: cm-rail-fade linear both; animation-timeline: scroll(self inline);
  }
}

/* Onboarding: brand name entry */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-entry='name'] .brand-chat__new-brand > .brand-chat__local-text { font: 600 30px/1.1 var(--cm-font); letter-spacing: -.035em; text-wrap: balance; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-entry='name'] .brand-chat__new-brand .brand-chat__input { min-height: 64px; padding: 18px 74px 18px 18px; border: 1px solid var(--cm-ctl); border-radius: 0; background: var(--cm-s1); box-shadow: none; font-size: 18px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-entry='name'] .brand-chat__new-brand .brand-chat__input:focus-visible { border-color: var(--cm-ink); outline: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-entry='name'] .brand-chat__new-brand > button[type='submit'] { width: 48px; min-height: 48px; padding: 0; border-radius: var(--cm-radius); font-size: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-entry='name'] .brand-chat__new-brand > button[type='submit']::after { font: 400 24px/1 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-entry='name'] .brand-chat__new-brand > button[type='submit']:disabled { border-color: var(--cm-line-2); background: var(--cm-s3); color: var(--cm-ink-3); }
/* "← Wróć do poprzedniej marki": a quiet mono way back in the top-left corner, not a framed button over the question. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-entry='name'] .brand-chat__history > .brand-chat__button--quiet {
  position: absolute; top: 6px; left: -8px; align-self: flex-start; width: auto; min-height: 44px; margin: 0; padding: 0 8px; border: 0; border-radius: 0; background: transparent;
  color: var(--cm-ink-2); font: 500 var(--cm-micro)/1.2 var(--cm-mono); letter-spacing: .08em; text-transform: uppercase;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-entry='name'] .brand-chat__history > .brand-chat__button--quiet::before { content: "←"; content: "←" / ""; margin-right: 8px; letter-spacing: 0; }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-entry='name'] .brand-chat__history > .brand-chat__button--quiet:hover { background: transparent; color: var(--cm-ink); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-entry='name'] .brand-chat__new-brand > .brand-chat__muted { color: var(--cm-ink-3); font: 400 var(--cm-micro)/1.5 var(--cm-mono); letter-spacing: .04em; }

/* Onboarding: a new brand from its website (the address, then the brand read from it) */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-entry='name'] .brand-chat__website > .brand-chat__local-text { font: 600 30px/1.1 var(--cm-font); letter-spacing: -.035em; text-wrap: balance; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__website .brand-chat__input { min-height: 64px; padding: 18px; font-size: 18px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__website-row > button[type='submit'] { min-height: 64px; padding: 0 22px; border: 0; border-radius: var(--cm-radius); background: var(--cm-mango); color: var(--cm-on-mango); font: 600 15px/1.2 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__website-row > button[type='submit']:disabled { background: var(--cm-s3); color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__website-error { padding: 10px 12px; border-left: 2px solid var(--cm-danger); background: var(--cm-s1); color: var(--cm-ink); font-size: 14px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__website .brand-chat__muted { color: var(--cm-ink-3); font: 400 var(--cm-micro)/1.5 var(--cm-mono); letter-spacing: .04em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__no-website { min-height: 44px; padding: 0; color: var(--cm-ink-2); font: 500 var(--cm-micro)/1.2 var(--cm-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__no-website:hover { background: transparent; color: var(--cm-ink); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__identity { gap: 16px; padding: 20px; border: 1px solid var(--cm-line-2); background: var(--cm-s1); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__identity-title { color: var(--cm-ink); font: 600 24px/1.15 var(--cm-font); letter-spacing: -.03em; text-wrap: balance; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__identity-logo-box { justify-self: start; padding: 10px 14px; background: #fff; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__identity-row dt { color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .12em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__identity-row dd { color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__identity .brand-chat__swatches { margin-top: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__identity-name { min-height: 48px; font-size: 18px; font-weight: 600; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__identity-heading-sample { color: var(--cm-ink); font-size: 24px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__identity-body-sample { color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__identity-font-source { color: var(--cm-ink-3); font: 400 var(--cm-micro)/1.5 var(--cm-mono); letter-spacing: .04em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__identity-industry { color: var(--cm-ink); font-size: 15px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__identity-actions .brand-chat__button:not(.brand-chat__button--quiet) { background: var(--cm-mango); border-color: var(--cm-mango); color: var(--cm-on-mango); font-weight: 600; }

/* Brand brain (knowledge) */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__content-language { width: min(100%, 620px); margin: 0 auto 30px; padding-bottom: 0; border-bottom: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-knowledge='true'] .brand-chat__composer { width: min(100%, 620px); margin-inline: auto; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__content-language .brand-chat__muted { margin-top: 10px; font-size: 12px; line-height: 1.55; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-knowledge='true'][data-knowledge-empty='true'] .brand-chat__history { justify-content: flex-start; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__knowledge-welcome { width: min(100%, 620px); margin: 0 auto 24px; container-type: inline-size; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__knowledge-question {
  margin: 4px 0 22px; color: var(--cm-ink); font: 600 27px/1.1 var(--cm-font); letter-spacing: -.03em; text-align: left; text-wrap: balance;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__knowledge-question::before {
  content: "Profil marki"; content: "Profil marki" / ""; display: block; margin-bottom: 12px; color: var(--cm-ink-3);
  font: 500 var(--cm-micro)/1 var(--cm-mono); letter-spacing: .14em; text-transform: uppercase;
}
html.has-chat-app[lang="en"]:not(#cm-theme):not(#cm-noir) .brand-chat__knowledge-question::before { content: "Brand profile"; content: "Brand profile" / ""; }
/* Colours and fonts: two rows of one list (like the menu): icon, name, what is set now, an arrow. No cards. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-knowledge='true'] .chat-app__style-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; justify-content: stretch; align-items: stretch; margin: 0 -10px; }
/* Each row is a visible control on a raised surface (the owner: rows must not melt into the page), joined as one list. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-knowledge='true'] .chat-app__style-actions > button {
  display: grid; grid-template-columns: 20px auto minmax(0, 1fr) 14px; align-items: center; justify-items: start; column-gap: 14px;
  max-width: none; min-height: 56px; height: auto; margin: -1px 0 0; padding: 6px 14px; border: 1px solid var(--cm-line-2); border-radius: 0;
  background: var(--cm-s1); color: var(--cm-ink); font: 500 15px/1.3 var(--cm-font); letter-spacing: -.01em; text-align: left;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-knowledge='true'] .chat-app__style-actions > button:first-child { margin-top: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-knowledge='true'] .chat-app__style-actions > button[aria-expanded="true"] { background: var(--cm-s2); border-color: var(--cm-line-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-knowledge='true'] .chat-app__style-actions > button:active { background: var(--cm-s2); }
/* The website field opens under its row: an address input, Zapisz (filled) and Anuluj, a one-line note. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__website { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: -1px 0 0; padding: 14px; border: 1px solid var(--cm-line-3); background: var(--cm-s2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__website[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__website-input {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--cm-line-3); border-radius: 0;
  background: var(--cm-bg); color: var(--cm-ink); font: 400 16px/1.3 var(--cm-font); outline: 0;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__website-input:focus { border-color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__website-actions { display: flex; gap: 8px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__website-save, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__website-cancel { min-height: 44px; padding: 0 18px; border-radius: 0; font: 600 14px/1 var(--cm-font); cursor: pointer; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__website-save { border: 1px solid var(--cm-ink); background: var(--cm-ink); color: var(--cm-bg); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__website-cancel { border: 1px solid var(--cm-line-3); background: transparent; color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__website-save.mango-loading { color: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__website-note { margin: 0; color: var(--cm-ink-3); font: 400 12.5px/1.45 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__website-note.is-error { color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-knowledge='true'] .chat-app__style-actions > button::after { content: "→"; content: "→" / ""; grid-column: 4; color: var(--cm-ink-3); font: 400 14px/1 var(--cm-mono); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-knowledge='true'] .chat-app__style-actions > button > span:not(.chat-app__style-preview) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-knowledge='true'] .chat-app__style-actions svg { width: 20px; height: 20px; flex-basis: 20px; color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-knowledge='true'] .chat-app__style-preview {
  grid-column: 3; justify-self: end; justify-content: flex-end; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap;
  color: var(--cm-ink-3); font: 400 12px/1.35 var(--cm-font); letter-spacing: 0;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__style-empty { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-knowledge='true'] .chat-app__style-empty { display: block; font-size: 0; line-height: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-knowledge='true'] .chat-app__style-empty::before {
  content: "Nieustawione"; content: "Nieustawione" / ""; display: block; color: var(--cm-ink-3);
  font: 500 var(--cm-micro)/1.2 var(--cm-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
html.has-chat-app[lang="en"]:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-knowledge='true'] .chat-app__style-empty::before { content: "Not set"; content: "Not set" / ""; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__style-font { color: var(--cm-ink-2); font-size: 13px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__style-separator { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__style-swatch { border-radius: 0; border-color: rgb(255 255 255 / .2); width: 16px; height: 16px; }
@media (hover: hover) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-knowledge='true'] .chat-app__style-actions > button:hover { position: relative; z-index: 1; background: var(--cm-s2); border-color: var(--cm-line-3); }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-knowledge='true'] .chat-app__style-actions > button:hover .chat-app__style-empty::before { color: var(--cm-ink); }
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__knowledge-families { margin-top: 30px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__heading {
  display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--cm-ink-3);
  font: 500 var(--cm-micro)/1 var(--cm-mono); letter-spacing: .14em; text-transform: uppercase;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__list { gap: 0; margin: 0 -10px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__button {
  min-height: 48px; padding: 12px 14px; border: 1px solid var(--cm-line-2); border-radius: 0;
  background: transparent; color: var(--cm-ink); font: 500 14px/1.4 var(--cm-font);
}
/* Product families: rows of the same list (name and an arrow); "+ Dodaj rodzinę produktów" is a quiet row. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__list .brand-family__choice, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__knowledge-families .brand-family__add {
  min-height: 56px; margin-top: -1px; padding: 12px 14px; border: 1px solid var(--cm-line-2); background: var(--cm-s1); font: 500 15px/1.35 var(--cm-font);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__knowledge-families .brand-family__add { border-style: dashed; background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__choice::after { content: "→"; color: var(--cm-ink-3); font: 400 14px/1 var(--cm-mono); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__knowledge-families .brand-family__add { justify-content: flex-start; gap: 14px; width: calc(100% + 20px); margin: 0 -10px; color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__add::before { width: 20px; color: var(--cm-ink-2); font-weight: 300; text-align: center; }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.brand-family__list .brand-family__choice, .brand-chat__knowledge-families .brand-family__add):not(:disabled):hover { background: var(--cm-s2); border-color: var(--cm-line-3); color: var(--cm-ink); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__button--primary { border-color: var(--cm-ink); background: var(--cm-ink); color: var(--cm-bg); }
/* Every way back in the chat surfaces is the same outlined mono label (name entry, brain family, onboarding steps). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__back { width: auto; min-height: 44px; padding: 0 14px; border: 1px solid var(--cm-line-3); background: transparent; color: var(--cm-ink); font: 500 11px/1.2 var(--cm-mono); letter-spacing: .08em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__back::before { margin-right: 8px; letter-spacing: 0; }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__back:hover { border-color: var(--cm-ink-3); background: var(--cm-s3); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__eyebrow { color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .14em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__name { color: var(--cm-ink); font: 600 28px/1.1 var(--cm-font); letter-spacing: -.035em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__strategy { color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .brand-family__editor, html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .brand-family__industry-select { border: 1px solid var(--cm-ctl); border-radius: 0; background: var(--cm-s1); color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__counter, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__status, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__empty, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__industry-summary, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__industry { color: var(--cm-ink-3); }
/* Ready: the brand's name as the headline, its industry as a mono line, ONE filled "Zacznij tworzyć" and the
   quiet way to add more. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__ready-summary { margin-top: 24px; padding: 0; border-top: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__ready-identity { color: var(--cm-ink); font: 600 22px/1.2 var(--cm-font); letter-spacing: -.025em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__ready-industry { margin: 8px 0 18px; color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .1em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__ready-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__ready-actions button, html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .brand-chat__ready-actions button:first-child {
  min-height: 48px; padding: 0 22px; border: 1px solid var(--cm-ink); border-radius: var(--cm-radius); background: var(--cm-ink); color: var(--cm-bg); font: 600 14px/1.2 var(--cm-font);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__ready-actions button:last-child { flex: 0 1 auto; min-width: 0; min-height: 44px; margin: 0; padding: 0 8px; border-color: transparent; background: transparent; color: var(--cm-ink-2); font: 500 13px/1.3 var(--cm-font); text-align: left; }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__ready-actions button:last-child:not(:disabled):hover { color: var(--cm-ink); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__style-actions button { border-color: var(--cm-line-2); }

/* ─── 5. Creation studio ──────────────────────────────────────────────────── */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-composer { color: var(--cm-ink); font-family: var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__header.is-scheduled { padding: 10px 14px 12px; background: var(--cm-bg); border-bottom: 1px solid var(--cm-line); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-chat .brand-chat__messages { background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-day-bar { --num-w: 64px; min-height: 70px; border: 1px solid var(--cm-line-2); border-radius: 0; background: var(--cm-s1); box-shadow: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-day-bar:has(.scheduled-today:not([hidden])) { border-color: var(--cm-line-3); background: var(--cm-s2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-day-date { color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-day-number {
  width: var(--num-w); flex: 0 0 var(--num-w); border-right: 1px solid var(--cm-line-2); border-radius: 0; background: transparent; color: var(--cm-ink);
  font: 500 30px/1 var(--cm-font); letter-spacing: -.04em; font-variant-numeric: tabular-nums; padding-bottom: 12px;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-day-number:not(:has(.scheduled-today:not([hidden]))) { padding-bottom: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-today {
  left: 0; right: 0; bottom: 9px; padding: 0; transform: none; border-radius: 0; background: none; color: var(--cm-ink); text-align: center;
  font: 700 var(--cm-micro)/1 var(--cm-mono); letter-spacing: .06em; text-transform: uppercase;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-day-words { padding: 8px 12px; gap: 5px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-day-words strong { font: 600 16px/1.15 var(--cm-font); letter-spacing: -.012em; text-transform: capitalize; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-day-words small { color: var(--cm-ink-3); font: 400 11px/1.2 var(--cm-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-formats { gap: 0; padding: 0 var(--row-pad-r) 0 6px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-format {
  width: var(--stat-w); min-width: var(--stat-w); height: 44px; padding: 0; gap: 5px; justify-content: center; border: 1px solid var(--cm-line-2); border-radius: 0;
  background: transparent; color: var(--cm-ink-3);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-format + .scheduled-format { margin-left: -1px; }
/* Selected type = ink outline; the green figure and underline mean "has materials" (same as the calendar). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-format[aria-pressed="true"] { position: relative; z-index: 2; border-color: var(--cm-ink); background: var(--cm-s3); color: var(--cm-ink); box-shadow: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-format[data-empty="false"] { position: relative; z-index: 1; color: var(--cm-ok); box-shadow: inset 0 -2px 0 var(--cm-ok); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-format[aria-pressed="true"][data-empty="false"] { z-index: 2; color: var(--cm-ok); box-shadow: inset 0 -2px 0 var(--cm-ok); }
/* The day's reel still being made: the same mango frame and CosmoMango loader as on the schedule. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-format[data-working="true"] {
  position: relative; z-index: 3; border-color: var(--cm-mango); background: rgb(255 154 46 / .12); color: var(--cm-ink);
  box-shadow: inset 0 -2px 0 var(--cm-mango); animation: cm-day-working 2s ease-in-out infinite;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-format[data-working="true"] .scheduled-format-count { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-format[data-working="true"]::before {
  content: ""; width: 20px; height: 20px; flex: 0 0 20px;
  background: var(--mango-loader-image, url("/assets/brand/cosmomango-loader.svg")) center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-format[data-working="true"] { animation: none; } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-format svg { width: 16px; height: 18px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-format-count { font: 500 13px/1 var(--cm-mono); font-variant-numeric: tabular-nums; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-switch-status { color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.5 var(--cm-mono); letter-spacing: .06em; }

/* Start: how to add */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-start { max-width: 560px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-start-heading { margin: 0 auto 26px; max-width: 15ch; color: var(--cm-ink); font: 600 28px/1.08 var(--cm-font); letter-spacing: -.036em; text-wrap: balance; }
/* The three ways to add are small tools like the schedule's: a line icon over a word, no cells, no numbers.
   The industry and product choices are plain tiles; the chosen one has the white outline of a selected clip. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-start-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 380px; margin: 0 auto; counter-reset: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-start-button {
  position: relative; min-height: 108px; padding: 14px 6px 12px; gap: 12px;
  border: 0; border-radius: 0; background: transparent; color: var(--cm-ink-2); box-shadow: none;
  font: 500 13.5px/1.2 var(--cm-font);
}
/* The three ways to add are the screen's main choice: large line icons (the owner asked for bigger ones). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-start-button svg { width: 44px; height: 44px; stroke-width: 1.2; color: var(--cm-ink); }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-start-button:not(:disabled):hover { z-index: 1; background: var(--cm-s1); color: var(--cm-ink); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-products-caption { margin: 22px 0 8px; color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .12em; text-transform: uppercase; }
/* Industry and product family choices are secondary: small tiles (the tap area still reaches 44 px). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-industry-choice {
  position: relative; min-height: 32px; padding: 6px 10px; border: 0; border-radius: 0;
  background: var(--cm-s1); color: var(--cm-ink-2); font: 500 12px/1.2 var(--cm-font);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-industry-choice::after { content: ""; position: absolute; inset: -6px 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-industry-rail .studio-industry-choice, html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-industry-rail.is-tap-choice .studio-industry-choice { min-height: 32px; padding: 6px 10px; font-size: 12px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-industry-choice[aria-pressed="true"] { background: var(--cm-s2); color: var(--cm-ink); outline: 2px solid var(--cm-ink); outline-offset: 2px; box-shadow: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-industry-rail { gap: 8px; padding-block: 6px; padding-inline-start: 4px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-industry-rail.is-static { padding-inline: 4px; }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-industry-choice:not(:disabled):not([aria-pressed="true"]):hover { background: var(--cm-s2); color: var(--cm-ink); } }

/* Messages inside the studio conversation */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__message { color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__message--user { border: 1px solid var(--cm-line-2); border-radius: 0; background: var(--cm-s2); }
/* CosmoMango is writing: three dots that rise in turn; then its reply types itself out with the mango caret. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__typing { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 10px 2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cm-ink-2); animation: cm-typing-dot 1.2s ease-in-out infinite; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__typing-dot:nth-child(2) { animation-delay: .15s; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes cm-typing-dot { 0%, 60%, 100% { translate: 0 0; opacity: .35; } 30% { translate: 0 -5px; opacity: 1; } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__message-content.is-typing::after {
  content: ""; display: inline-block; width: 7px; height: 1em; margin-left: 3px; background: var(--cm-mango); vertical-align: -.12em;
  animation: cm-caret 900ms steps(1, end) infinite;
}
@keyframes cm-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__typing-dot, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__message-content.is-typing::after { animation: none; } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__industry-question { color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__industry-option { border-color: var(--cm-line-2); border-radius: 0; background: transparent; color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__industry-option[aria-pressed='true'] { border-color: var(--cm-line-3); background: var(--cm-s3); color: var(--cm-ink); box-shadow: inset 0 -2px 0 var(--cm-mango); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__industry-chip { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__proposals:has(.chat-studio__copy-notice:not([hidden])) { --chat-copy-notice-space: 68px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__copy-notice { max-width: 34ch; margin: 20px auto 10px; color: var(--cm-ink-3); font: 400 13px/1.5 var(--cm-font); text-align: center; text-wrap: balance; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__change-prompt { margin: 2px 0 8px; color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .12em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__phase { color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.5 var(--cm-mono); letter-spacing: .08em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__error { border: 0; border-left: 2px solid var(--cm-danger); border-radius: 0; background: rgb(255 77 77 / .06); color: var(--cm-ink); font-size: 13px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__copy-recovery > p { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__notice { border: 1px solid var(--cm-line-3); border-left: 2px solid var(--cm-ink); border-radius: 0; background: rgb(27 27 31 / .94); color: var(--cm-ink); box-shadow: none; font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .06em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__source, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__product-frame { border-color: var(--cm-line-2); border-radius: 0; background: var(--cm-s1); }
/* While CosmoMango makes something the working area shows a scan: a beam of light crosses the whole area and a giant
   outlined "Cosmo / Mango" fills with mango behind it, so the name is seen at every wait (in a reel of the app too).
   Each task has its own scan (data-variant):
     down     (6.5a) the photo — top to bottom, the squares behind the beam light up in mango;
     up       (6.5b) the storyboard — over the drawing frames, from the bottom up, scene after scene;
     pendulum (6.5c) the texts — down and up without end over a field of cubes that light up;
     label    (6.5d) choosing the layout — the beam carries a "CosmoMango" tag, the squares it passed turn into
              an orange grid and a few stay marked, like found details;
     meet     (6.5e) the film — two beams, from the top and the bottom, meet in a flash; the scenes play under glass cubes.
   One timing per variant drives the beam, the lit tiles, the light band and the fill, so they stay together.
   When the first template is ready it develops into view (blur to sharp). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__stage {
  position: relative; display: block; width: min(58%, 236px); aspect-ratio: 9 / 16; margin: 14px auto 10px; overflow: hidden; isolation: isolate;
  border-radius: 0; background: #17171a; box-shadow: 0 0 0 1px var(--cm-line-2);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__stage[data-format="post"] { width: min(76%, 300px); aspect-ratio: 4 / 5; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__stage[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__stage > * { position: absolute; pointer-events: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan {
  --cm-scan-time: 3.4s; --cm-scan-ease: cubic-bezier(.65, 0, .35, 1); --cm-scan-cycle: 5.6s; --cm-scan-glide: cubic-bezier(.42, 0, .58, 1);
  --cm-scan-cubes: 27.713px 48px;
  --cm-scan-lit: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2227.713%22%20height%3D%2248%22%20viewBox%3D%220%200%2027.713%2048%22%3E%3Cpolygon%20points%3D%2213.86%2C0.00%2027.71%2C8.00%2013.86%2C16.00%200.00%2C8.00%22%20fill%3D%22%23ffc06a%22/%3E%3Cpolygon%20points%3D%220.00%2C8.00%2013.86%2C16.00%2013.86%2C32.00%200.00%2C24.00%22%20fill%3D%22%23f28a2a%22/%3E%3Cpolygon%20points%3D%2213.86%2C16.00%2027.71%2C8.00%2027.71%2C24.00%2013.86%2C32.00%22%20fill%3D%22%23c4520f%22/%3E%3Cpolygon%20points%3D%220.00%2C24.00%2013.86%2C32.00%200.00%2C40.00%20-13.86%2C32.00%22%20fill%3D%22%23ffc06a%22/%3E%3Cpolygon%20points%3D%22-13.86%2C32.00%200.00%2C40.00%200.00%2C56.00%20-13.86%2C48.00%22%20fill%3D%22%23f28a2a%22/%3E%3Cpolygon%20points%3D%220.00%2C40.00%2013.86%2C32.00%2013.86%2C48.00%200.00%2C56.00%22%20fill%3D%22%23c4520f%22/%3E%3Cpolygon%20points%3D%2227.71%2C24.00%2041.57%2C32.00%2027.71%2C40.00%2013.86%2C32.00%22%20fill%3D%22%23ffc06a%22/%3E%3Cpolygon%20points%3D%2213.86%2C32.00%2027.71%2C40.00%2027.71%2C56.00%2013.86%2C48.00%22%20fill%3D%22%23f28a2a%22/%3E%3Cpolygon%20points%3D%2227.71%2C40.00%2041.57%2C32.00%2041.57%2C48.00%2027.71%2C56.00%22%20fill%3D%22%23c4520f%22/%3E%3Cpolygon%20points%3D%220.00%2C-24.00%2013.86%2C-16.00%200.00%2C-8.00%20-13.86%2C-16.00%22%20fill%3D%22%23ffc06a%22/%3E%3Cpolygon%20points%3D%22-13.86%2C-16.00%200.00%2C-8.00%200.00%2C8.00%20-13.86%2C0.00%22%20fill%3D%22%23f28a2a%22/%3E%3Cpolygon%20points%3D%220.00%2C-8.00%2013.86%2C-16.00%2013.86%2C0.00%200.00%2C8.00%22%20fill%3D%22%23c4520f%22/%3E%3Cpolygon%20points%3D%2227.71%2C-24.00%2041.57%2C-16.00%2027.71%2C-8.00%2013.86%2C-16.00%22%20fill%3D%22%23ffc06a%22/%3E%3Cpolygon%20points%3D%2213.86%2C-16.00%2027.71%2C-8.00%2027.71%2C8.00%2013.86%2C0.00%22%20fill%3D%22%23f28a2a%22/%3E%3Cpolygon%20points%3D%2227.71%2C-8.00%2041.57%2C-16.00%2041.57%2C0.00%2027.71%2C8.00%22%20fill%3D%22%23c4520f%22/%3E%3C/svg%3E");
  position: absolute; inset: 0; z-index: 1; display: block; overflow: hidden; pointer-events: none; container-type: inline-size; background: #17171a;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan > *, html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__lit > *, html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__marks > * { position: absolute; display: block; pointer-events: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__base { inset: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__lit { inset: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__tiles { inset: 0; opacity: .3; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__marks { inset: 0; display: none; }
/* The tiles right at the beam shine brighter: the mask is twice the area's height with its light at the middle. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__band { inset: 0; opacity: .8; -webkit-mask: linear-gradient(180deg, rgb(0 0 0 / 0) 43%, #000 50%, rgb(0 0 0 / 0) 57%) 0 100% / 100% 200% no-repeat; mask: linear-gradient(180deg, rgb(0 0 0 / 0) 43%, #000 50%, rgb(0 0 0 / 0) 57%) 0 100% / 100% 200% no-repeat; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__shade {
  inset: 0;
  background: linear-gradient(180deg, rgb(23 23 26 / .88), rgb(23 23 26 / 0) 18%), linear-gradient(0deg, rgb(23 23 26 / .9), rgb(23 23 26 / .55) 14%, rgb(23 23 26 / 0) 28%),
    radial-gradient(80% 20% at 50% 50%, rgb(23 23 26 / .7), rgb(23 23 26 / 0));
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__stack {
  position: absolute; left: 6.7%; top: 50%; display: flex; flex-direction: column; gap: .054em; transform: translateY(-50%);
  font: 800 64px/.92 Inter, ui-sans-serif, system-ui, sans-serif; font-size: 27cqw; letter-spacing: -.06em; white-space: nowrap;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__word { display: block; color: transparent; -webkit-text-stroke: 1.5px #3a3a41; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__stack--fill .cm-scan__word {
  -webkit-text-stroke: 0; background: linear-gradient(0deg, #f26b1d 0%, #ff9a2e 45%, #ffc85a 100%); -webkit-background-clip: text; background-clip: text;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__fill { inset: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.cm-scan__beam, .cm-scan__beam2) {
  left: 0; right: 0; top: 0; height: 3px; margin-top: -1.5px; background: #fff1d6;
  box-shadow: 0 0 12px 4px rgb(255 200 90 / .9), 0 0 46px 14px rgb(255 154 46 / .45);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.cm-scan__beam2, .cm-scan__flash, .cm-scan__tag) { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__tag {
  position: absolute; right: 6.7%; bottom: 8px; padding: 4px 7px; background: #ff9a2e; color: #141210;
  font: 700 10px/1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.01em; white-space: nowrap;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__flash { left: 0; right: 0; top: 50%; height: 2px; background: #fff1d6; box-shadow: 0 0 30px 12px rgb(255 200 90 / .7); opacity: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__label { left: 6.7%; right: 6.7%; top: 7%; margin: 0; overflow: hidden; color: #9e9d97; font: 500 10px/1.2 var(--cm-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__label:empty { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__mark { left: 6.7%; bottom: 5.5%; width: 13%; aspect-ratio: 1; background: var(--mango-loader-image, url("/assets/brand/cosmomango-loader.svg")) center / contain no-repeat; }
/* 6.5c pendulum — the texts. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="pendulum"] > .cm-scan__base { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2227.713%22%20height%3D%2248%22%20viewBox%3D%220%200%2027.713%2048%22%3E%3Cpolygon%20points%3D%2213.86%2C0.00%2027.71%2C8.00%2013.86%2C16.00%200.00%2C8.00%22%20fill%3D%22%23232329%22/%3E%3Cpolygon%20points%3D%220.00%2C8.00%2013.86%2C16.00%2013.86%2C32.00%200.00%2C24.00%22%20fill%3D%22%231b1b20%22/%3E%3Cpolygon%20points%3D%2213.86%2C16.00%2027.71%2C8.00%2027.71%2C24.00%2013.86%2C32.00%22%20fill%3D%22%23131316%22/%3E%3Cpolygon%20points%3D%220.00%2C24.00%2013.86%2C32.00%200.00%2C40.00%20-13.86%2C32.00%22%20fill%3D%22%23232329%22/%3E%3Cpolygon%20points%3D%22-13.86%2C32.00%200.00%2C40.00%200.00%2C56.00%20-13.86%2C48.00%22%20fill%3D%22%231b1b20%22/%3E%3Cpolygon%20points%3D%220.00%2C40.00%2013.86%2C32.00%2013.86%2C48.00%200.00%2C56.00%22%20fill%3D%22%23131316%22/%3E%3Cpolygon%20points%3D%2227.71%2C24.00%2041.57%2C32.00%2027.71%2C40.00%2013.86%2C32.00%22%20fill%3D%22%23232329%22/%3E%3Cpolygon%20points%3D%2213.86%2C32.00%2027.71%2C40.00%2027.71%2C56.00%2013.86%2C48.00%22%20fill%3D%22%231b1b20%22/%3E%3Cpolygon%20points%3D%2227.71%2C40.00%2041.57%2C32.00%2041.57%2C48.00%2027.71%2C56.00%22%20fill%3D%22%23131316%22/%3E%3Cpolygon%20points%3D%220.00%2C-24.00%2013.86%2C-16.00%200.00%2C-8.00%20-13.86%2C-16.00%22%20fill%3D%22%23232329%22/%3E%3Cpolygon%20points%3D%22-13.86%2C-16.00%200.00%2C-8.00%200.00%2C8.00%20-13.86%2C0.00%22%20fill%3D%22%231b1b20%22/%3E%3Cpolygon%20points%3D%220.00%2C-8.00%2013.86%2C-16.00%2013.86%2C0.00%200.00%2C8.00%22%20fill%3D%22%23131316%22/%3E%3Cpolygon%20points%3D%2227.71%2C-24.00%2041.57%2C-16.00%2027.71%2C-8.00%2013.86%2C-16.00%22%20fill%3D%22%23232329%22/%3E%3Cpolygon%20points%3D%2213.86%2C-16.00%2027.71%2C-8.00%2027.71%2C8.00%2013.86%2C0.00%22%20fill%3D%22%231b1b20%22/%3E%3Cpolygon%20points%3D%2227.71%2C-8.00%2041.57%2C-16.00%2041.57%2C0.00%2027.71%2C8.00%22%20fill%3D%22%23131316%22/%3E%3C/svg%3E") 0 0 / var(--cm-scan-cubes); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="pendulum"] .cm-scan__tiles, html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="pendulum"] > .cm-scan__band { background: var(--cm-scan-lit) 0 0 / var(--cm-scan-cubes); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="pendulum"] > :is(.cm-scan__lit, .cm-scan__fill) { animation: cm-scan-clip var(--cm-scan-time) var(--cm-scan-ease) infinite alternate; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="pendulum"] > .cm-scan__band { animation: cm-scan-band var(--cm-scan-time) var(--cm-scan-ease) infinite alternate; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="pendulum"] > .cm-scan__beam { animation: cm-scan-beam var(--cm-scan-time) var(--cm-scan-ease) infinite alternate; }
/* 6.5a down — the photo; 6.5d label — choosing the layout. One way, a short hold, then it starts again. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan:is([data-variant="down"], [data-variant="label"]) > :is(.cm-scan__lit, .cm-scan__fill) { animation: cm-scan-down-clip var(--cm-scan-cycle) var(--cm-scan-glide) infinite, cm-scan-fade var(--cm-scan-cycle) linear infinite; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan:is([data-variant="down"], [data-variant="label"]) > .cm-scan__band { animation: cm-scan-down-band var(--cm-scan-cycle) var(--cm-scan-glide) infinite, cm-scan-band-fade var(--cm-scan-cycle) linear infinite; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan:is([data-variant="down"], [data-variant="label"]) > .cm-scan__beam { animation: cm-scan-down-beam var(--cm-scan-cycle) var(--cm-scan-glide) infinite, cm-scan-beam-fade var(--cm-scan-cycle) linear infinite; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="down"] > .cm-scan__base { background: linear-gradient(90deg, #17171a 2px, rgb(0 0 0 / 0) 2px) 0 0 / 26px 26px, linear-gradient(180deg, #17171a 2px, rgb(0 0 0 / 0) 2px) 0 0 / 26px 26px, #1d1d22; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="down"] .cm-scan__tiles { background: linear-gradient(90deg, #17171a 2px, rgb(0 0 0 / 0) 2px) 0 0 / 26px 26px, linear-gradient(180deg, #17171a 2px, rgb(0 0 0 / 0) 2px) 0 0 / 26px 26px, radial-gradient(120% 70% at 50% 45%, #ffb35c, #f26b1d 60%, #b8460c); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="down"] > .cm-scan__band { opacity: .55; background: linear-gradient(90deg, #17171a 2px, rgb(0 0 0 / 0) 2px) 0 0 / 26px 26px, linear-gradient(180deg, #17171a 2px, rgb(0 0 0 / 0) 2px) 0 0 / 26px 26px, #ffb35c; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="label"] > .cm-scan__base { background: repeating-linear-gradient(0deg, rgb(242 241 237 / .045) 0 1px, rgb(0 0 0 / 0) 1px 5px), linear-gradient(90deg, #17171a 2px, rgb(0 0 0 / 0) 2px) 0 0 / 26px 26px, linear-gradient(180deg, #17171a 2px, rgb(0 0 0 / 0) 2px) 0 0 / 26px 26px, #1c1c21; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="label"] .cm-scan__tiles { opacity: 1; background: linear-gradient(90deg, rgb(255 154 46 / .42) 1px, rgb(0 0 0 / 0) 1px) 0 0 / 26px 26px, linear-gradient(180deg, rgb(255 154 46 / .42) 1px, rgb(0 0 0 / 0) 1px) 0 0 / 26px 26px, linear-gradient(90deg, #17171a 2px, rgb(0 0 0 / 0) 2px) 0 0 / 26px 26px, linear-gradient(180deg, #17171a 2px, rgb(0 0 0 / 0) 2px) 0 0 / 26px 26px, #211b17; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="label"] > .cm-scan__band { --cm-scan-band: .4; opacity: .4; background: linear-gradient(90deg, #17171a 2px, rgb(0 0 0 / 0) 2px) 0 0 / 26px 26px, linear-gradient(180deg, #17171a 2px, rgb(0 0 0 / 0) 2px) 0 0 / 26px 26px, #ff9a2e; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="label"] .cm-scan__marks { display: block; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="label"] .cm-scan__tag { display: block; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__marks > span { width: 24px; height: 24px; background: rgb(255 154 46 / .16); box-shadow: inset 0 0 0 1.5px #ff9a2e; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__marks > span:nth-child(1) { left: 28px; top: 106px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__marks > span:nth-child(2) { left: 158px; top: 80px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__marks > span:nth-child(3) { left: 80px; top: 54px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__marks > span:nth-child(4) { left: 184px; top: 288px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__marks > span:nth-child(5) { left: 54px; top: 314px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan__marks > span:nth-child(6) { left: 132px; top: 340px; }
/* 6.5e meet — the film: its scenes play under glass cubes; two beams meet in the middle. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="meet"] { background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="meet"] > .cm-scan__base { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2227.713%22%20height%3D%2248%22%20viewBox%3D%220%200%2027.713%2048%22%3E%3Cpolygon%20points%3D%2213.86%2C0.00%2027.71%2C8.00%2013.86%2C16.00%200.00%2C8.00%22%20fill%3D%22rgba%28255%2C255%2C255%2C.10%29%22%20stroke%3D%22rgba%2823%2C23%2C26%2C.6%29%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%220.00%2C8.00%2013.86%2C16.00%2013.86%2C32.00%200.00%2C24.00%22%20fill%3D%22rgba%280%2C0%2C0%2C.24%29%22%20stroke%3D%22rgba%2823%2C23%2C26%2C.6%29%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%2213.86%2C16.00%2027.71%2C8.00%2027.71%2C24.00%2013.86%2C32.00%22%20fill%3D%22rgba%280%2C0%2C0%2C.44%29%22%20stroke%3D%22rgba%2823%2C23%2C26%2C.6%29%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%220.00%2C24.00%2013.86%2C32.00%200.00%2C40.00%20-13.86%2C32.00%22%20fill%3D%22rgba%28255%2C255%2C255%2C.10%29%22%20stroke%3D%22rgba%2823%2C23%2C26%2C.6%29%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%22-13.86%2C32.00%200.00%2C40.00%200.00%2C56.00%20-13.86%2C48.00%22%20fill%3D%22rgba%280%2C0%2C0%2C.24%29%22%20stroke%3D%22rgba%2823%2C23%2C26%2C.6%29%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%220.00%2C40.00%2013.86%2C32.00%2013.86%2C48.00%200.00%2C56.00%22%20fill%3D%22rgba%280%2C0%2C0%2C.44%29%22%20stroke%3D%22rgba%2823%2C23%2C26%2C.6%29%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%2227.71%2C24.00%2041.57%2C32.00%2027.71%2C40.00%2013.86%2C32.00%22%20fill%3D%22rgba%28255%2C255%2C255%2C.10%29%22%20stroke%3D%22rgba%2823%2C23%2C26%2C.6%29%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%2213.86%2C32.00%2027.71%2C40.00%2027.71%2C56.00%2013.86%2C48.00%22%20fill%3D%22rgba%280%2C0%2C0%2C.24%29%22%20stroke%3D%22rgba%2823%2C23%2C26%2C.6%29%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%2227.71%2C40.00%2041.57%2C32.00%2041.57%2C48.00%2027.71%2C56.00%22%20fill%3D%22rgba%280%2C0%2C0%2C.44%29%22%20stroke%3D%22rgba%2823%2C23%2C26%2C.6%29%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%220.00%2C-24.00%2013.86%2C-16.00%200.00%2C-8.00%20-13.86%2C-16.00%22%20fill%3D%22rgba%28255%2C255%2C255%2C.10%29%22%20stroke%3D%22rgba%2823%2C23%2C26%2C.6%29%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%22-13.86%2C-16.00%200.00%2C-8.00%200.00%2C8.00%20-13.86%2C0.00%22%20fill%3D%22rgba%280%2C0%2C0%2C.24%29%22%20stroke%3D%22rgba%2823%2C23%2C26%2C.6%29%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%220.00%2C-8.00%2013.86%2C-16.00%2013.86%2C0.00%200.00%2C8.00%22%20fill%3D%22rgba%280%2C0%2C0%2C.44%29%22%20stroke%3D%22rgba%2823%2C23%2C26%2C.6%29%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%2227.71%2C-24.00%2041.57%2C-16.00%2027.71%2C-8.00%2013.86%2C-16.00%22%20fill%3D%22rgba%28255%2C255%2C255%2C.10%29%22%20stroke%3D%22rgba%2823%2C23%2C26%2C.6%29%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%2213.86%2C-16.00%2027.71%2C-8.00%2027.71%2C8.00%2013.86%2C0.00%22%20fill%3D%22rgba%280%2C0%2C0%2C.24%29%22%20stroke%3D%22rgba%2823%2C23%2C26%2C.6%29%22%20stroke-width%3D%221%22/%3E%3Cpolygon%20points%3D%2227.71%2C-8.00%2041.57%2C-16.00%2041.57%2C0.00%2027.71%2C8.00%22%20fill%3D%22rgba%280%2C0%2C0%2C.44%29%22%20stroke%3D%22rgba%2823%2C23%2C26%2C.6%29%22%20stroke-width%3D%221%22/%3E%3C/svg%3E") 0 0 / var(--cm-scan-cubes), rgb(23 23 26 / .42); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="meet"] .cm-scan__tiles { opacity: .2; background: var(--cm-scan-lit) 0 0 / var(--cm-scan-cubes); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="meet"] > .cm-scan__band { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="meet"] > :is(.cm-scan__lit, .cm-scan__fill) { animation: cm-scan-meet-clip var(--cm-scan-cycle) var(--cm-scan-glide) infinite, cm-scan-fade var(--cm-scan-cycle) linear infinite; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="meet"] > .cm-scan__beam { animation: cm-scan-meet-down var(--cm-scan-cycle) var(--cm-scan-glide) infinite, cm-scan-meet-fade var(--cm-scan-cycle) linear infinite; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="meet"] > .cm-scan__beam2 { display: block; animation: cm-scan-meet-up var(--cm-scan-cycle) var(--cm-scan-glide) infinite, cm-scan-meet-fade var(--cm-scan-cycle) linear infinite; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="meet"] > .cm-scan__flash { display: block; animation: cm-scan-flash var(--cm-scan-cycle) linear infinite; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="meet"] > .cm-scan__stack .cm-scan__word { -webkit-text-stroke-color: rgb(242 241 237 / .34); }
/* 6.5b up — the storyboard: every frame being drawn (or fixed) carries its own rising scan. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__storyboard-area { position: relative; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="up"] > :is(.cm-scan__base, .cm-scan__lit, .cm-scan__band, .cm-scan__mark) { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="up"] > .cm-scan__shade { background: radial-gradient(85% 26% at 50% 50%, rgb(23 23 26 / .62), rgb(23 23 26 / 0)); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="up"] > .cm-scan__stack .cm-scan__word { -webkit-text-stroke-color: rgb(242 241 237 / .4); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="up"] > .cm-scan__fill { animation: cm-scan-up-clip var(--cm-scan-cycle) var(--cm-scan-glide) infinite, cm-scan-fade var(--cm-scan-cycle) linear infinite; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="up"] > .cm-scan__beam { animation: cm-scan-up-beam var(--cm-scan-cycle) var(--cm-scan-glide) infinite, cm-scan-beam-fade var(--cm-scan-cycle) linear infinite; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan[data-variant="up"] > .cm-scan__label { top: 50%; left: 50%; right: auto; margin-top: calc(26cqw + 10px); padding: 6px 10px 7px; transform: translateX(-50%); background: rgb(15 15 17 / .82); color: var(--cm-ink); }
@keyframes cm-scan-clip { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cm-scan-beam { from { top: 0; } to { top: 100%; } }
@keyframes cm-scan-band { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes cm-scan-down-clip { 0% { clip-path: inset(0 0 100% 0); } 70%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes cm-scan-down-beam { 0% { top: 0; } 70%, 100% { top: 100%; } }
@keyframes cm-scan-down-band { 0% { -webkit-mask-position: 0 100%; mask-position: 0 100%; } 70%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes cm-scan-up-clip { 0% { clip-path: inset(100% 0 0 0); } 70%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes cm-scan-up-beam { 0% { top: 100%; } 70%, 100% { top: 0; } }
@keyframes cm-scan-meet-clip {
  0% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0, 0 100%, 100% 100%, 100% 100%, 0 100%); }
  62%, 100% { clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%, 0 50%, 100% 50%, 100% 100%, 0 100%); }
}
@keyframes cm-scan-meet-down { 0% { top: 0; } 62%, 100% { top: 50%; } }
@keyframes cm-scan-meet-up { 0% { top: 100%; } 62%, 100% { top: 50%; } }
@keyframes cm-scan-meet-fade { 0% { opacity: 0; } 3%, 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes cm-scan-flash { 0%, 60% { opacity: 0; transform: scaleX(.2); } 63% { opacity: 1; transform: scaleX(1); } 76%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes cm-scan-fade { 0%, 84% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes cm-scan-beam-fade { 0% { opacity: 0; } 3%, 66% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes cm-scan-band-fade { 0% { opacity: 0; } 3%, 66% { opacity: var(--cm-scan-band, .55); } 72%, 100% { opacity: 0; } }
/* The button that started the work says "Generuję…" with the CosmoMango loader. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__composer--compact .chat-studio__composer-footer > button[data-generating="true"] {
  width: auto; padding: 0 14px; gap: 8px; border-color: var(--cm-mango); background: var(--cm-s3); color: var(--cm-ink); opacity: 1;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__composer--compact .chat-studio__composer-footer > button[data-generating="true"] > span { display: inline; font: 600 12px/1 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__composer--compact .chat-studio__composer-footer > button[data-generating="true"] > svg { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio :is(.chat-studio__button, .chat-studio__button--primary)[data-generating="true"]:disabled { border-color: var(--cm-mango); color: var(--cm-ink); opacity: 1; }
/* The stage takes the place of the pending photo frame while it is shown. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-creating="true"] .chat-studio__product-frame { display: none; }
@keyframes cm-stage-develop {
  0% { filter: blur(22px) saturate(.35) brightness(.55); transform: scale(1.16); }
  100% { filter: blur(6px) saturate(.95) brightness(.82); transform: scale(1.05); }
}
@keyframes cm-stage-glow {
  0%, 100% { box-shadow: 0 0 0 1px var(--cm-line-2), 0 0 26px -8px rgb(255 170 60 / .35), 0 0 44px -14px rgb(150 92 255 / .25); }
  50% { box-shadow: 0 0 0 1px rgb(255 190 110 / .35), 0 0 34px -6px rgb(255 170 60 / .5), 0 0 60px -12px rgb(150 92 255 / .42); }
}
/* The first finished template develops out of the blur. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-reveal="true"] .chat-studio__card .chat-studio__preview { animation: cm-stage-reveal 1.15s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes cm-stage-reveal {
  0% { filter: blur(18px) saturate(.5) brightness(.7); opacity: .35; transform: scale(1.04); }
  60% { filter: blur(3px) saturate(.9) brightness(.95); opacity: 1; }
  100% { filter: none; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* Still: the cubes lit and the name filled, no beam. */
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan > * { animation: none; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan > :is(.cm-scan__lit, .cm-scan__fill) { clip-path: none; opacity: 1; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-scan > :is(.cm-scan__beam, .cm-scan__beam2, .cm-scan__band, .cm-scan__flash) { display: none; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-reveal="true"] .chat-studio__card .chat-studio__preview { animation: none; }
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__upload-square { border: 1px dashed var(--cm-line-3); border-radius: 0; background: var(--cm-s1); color: var(--cm-ink-2); }

/* Template gallery (horizontal rail: overflow, touch-action, snap untouched) */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app :is(.chat-studio__proposals, .chat-studio__carousel, .chat-studio__carousel-footer),
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog :is(.chat-studio__proposals, .chat-studio__carousel, .chat-studio__carousel-footer) { background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__card { border-radius: 0; background: var(--cm-s1); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__card[aria-current='true'],
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__gallery-item[aria-current='true'] > .chat-studio__card { box-shadow: 0 0 0 1px var(--cm-line-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__neutral-preview { background: linear-gradient(160deg, #2a2a2f, #1b1b1f); color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__neutral-line { border-radius: 0; background: rgb(255 255 255 / .12); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__neutral-preview > span { color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .08em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__carousel-badge {
  top: 6px; left: 6px; max-width: calc(100% - 12px); overflow: hidden; padding: 5px 7px 4px 8px; border-radius: 0; background: rgb(27 27 31 / .88);
  box-shadow: inset 2px 0 0 var(--cm-mango); color: var(--cm-ink); font: 500 var(--cm-micro)/1.2 var(--cm-mono); letter-spacing: 0; text-transform: uppercase;
  white-space: nowrap; text-overflow: ellipsis;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__carousel-footer { gap: 10px; margin-top: 4px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__icon-button, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-composer .chat-studio__icon-button {
  border: 1px solid var(--cm-line-2); border-radius: var(--cm-radius); background: transparent; color: var(--cm-ink-2); box-shadow: none;
}
/* Under the gallery "Wybieram ten" is the one filled action; the arrows and "Pokaż kolejny szablon" are quiet. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__carousel-footer .chat-studio__icon-button { width: 44px; height: 44px; padding: 13px; border: 0; border-radius: var(--cm-radius); background: transparent; color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__carousel-footer .chat-studio__reveal-next {
  width: auto; max-width: 220px; min-height: 44px; padding: 8px 8px 8px 12px; gap: 8px; border: 0; border-radius: var(--cm-radius); background: transparent; color: var(--cm-ink-2);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__next-label { font: 500 12.5px/1.25 var(--cm-font); }
/* Dots jump between templates (the 44 px arrows beside them do the same): 28 × 44 cells, a short bar each. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__dot { width: 28px; height: 44px; border-radius: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__dot::after { top: 21px; left: 8px; width: 12px; height: 2px; border-radius: 0; background: var(--cm-line-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__dot[aria-pressed='true']::after { left: 5px; width: 18px; background: var(--cm-ink); }
@media (hover: hover) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__icon-button:not(:disabled):hover, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-composer .chat-studio__icon-button:not(:disabled):hover,
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__carousel-footer .chat-studio__icon-button:not(:disabled):hover { background: transparent; color: var(--cm-ink); }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__card:not(:disabled):hover { box-shadow: 0 0 0 1px var(--cm-line-3); }
}

/* Buttons in the studio */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__button, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-composer .chat-studio__button {
  min-height: 44px; padding: 10px 14px; border: 1px solid var(--cm-line-3); border-radius: var(--cm-radius);
  background: transparent; color: var(--cm-ink); font: 600 12.5px/1.2 var(--cm-font); box-shadow: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__button--primary, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-composer .chat-studio__button--primary,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__button--primary, html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-chat .chat-studio__button--primary {
  border-color: var(--cm-ink); background: var(--cm-ink); color: var(--cm-bg);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__button--primary:disabled, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-composer .chat-studio__button--primary:disabled,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-chat .chat-studio__button--primary:disabled { border-color: var(--cm-line-2); background: var(--cm-s3); color: var(--cm-ink-3); opacity: 1; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__button:disabled, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-composer .chat-studio__button:disabled { opacity: 1; border-color: var(--cm-line-2); color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__button--primary:disabled, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-composer .chat-studio__button--primary:disabled,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-chat .chat-studio .chat-studio__button--primary:disabled { border: 1px dashed var(--cm-line-3); background: transparent; color: var(--cm-ink-3); opacity: 1; }
/* Saved: a quiet status, not a second accent colour. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__button.is-saved,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__choose-template.is-saved,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__choose-template.is-saved:disabled {
  border-color: var(--cm-line-2); background: transparent; color: var(--cm-ink-2); box-shadow: inset 0 2px 0 var(--cm-mango); opacity: 1;
  font: 500 11px/1.2 var(--cm-mono); letter-spacing: .06em; text-transform: uppercase;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio :is(.chat-studio__button, .chat-studio__choose-template).is-saved:not(.mango-loading)::before {
  content: ""; display: inline-block; flex: none; width: 4px; height: 8px; margin: -3px 10px 0 1px; border: solid var(--cm-mango); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__choose-template.is-saved > svg { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio button:disabled, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-composer button:disabled { opacity: .45; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__choose-template {
  min-height: 44px; margin-top: 8px; border: 1px solid var(--cm-ink); border-radius: var(--cm-radius);
  background: var(--cm-ink); color: var(--cm-bg); font: 600 13px/1.2 var(--cm-font); letter-spacing: -.005em;
}

/* Composer */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__composer, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__composer, html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .chat-studio__composer,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__composer--compact {
  padding: 10px 10px 10px 12px; border: 1px solid var(--cm-ctl); border-radius: 0; background: var(--cm-s1); box-shadow: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__composer:focus-within { border-color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-composer .chat-studio__textarea, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__textarea { color: var(--cm-ink); background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__textarea::placeholder, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__textarea::placeholder { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-composer .chat-studio__upload-square,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app :is(.chat-studio__upload-square, .chat-studio__person) { border: 1px dashed var(--cm-line-3); border-radius: 0; background: var(--cm-s2); color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__composer--compact .chat-studio__composer-footer > button { width: 44px; height: 44px; min-height: 44px; padding: 12px; border-radius: var(--cm-radius); border-color: var(--cm-ink); background: var(--cm-ink); color: var(--cm-bg); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__composer--compact .chat-studio__composer-footer > button:disabled { border-color: var(--cm-line-2); background: var(--cm-s3); color: var(--cm-ink-3); opacity: 1; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__composer--compact .chat-studio__tools > .chat-studio__icon-button { width: 44px; height: 44px; padding: 11px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-composer .chat-studio__format, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__format { border-radius: var(--cm-radius); color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-composer .chat-studio__format[aria-pressed='true'], html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__format[aria-pressed='true'] { border-color: var(--cm-line-3); background: var(--cm-s3); color: var(--cm-ink); box-shadow: inset 0 -2px 0 var(--cm-mango); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__recognition { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-composer .chat-studio__recognition-button { color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__recognition-actions { border: 1px solid var(--cm-line-3); border-radius: 0; background: var(--cm-s2); box-shadow: 0 12px 32px rgb(0 0 0 / .5); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__photo-bank-count { border-color: var(--cm-s1); border-radius: 0; background: var(--cm-ink); color: var(--cm-bg); font-family: var(--cm-mono); }

/* Calendar picker dialog (save to a day) */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__calendar { border: 1px solid var(--cm-line-3); border-top: 2px solid var(--cm-ink); border-radius: 0; background: var(--cm-s1); color: var(--cm-ink); box-shadow: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__calendar-header .chat-studio__icon-button { width: 44px; height: 44px; min-height: 44px; padding: 12px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__calendar-month { font: 600 16px/1.2 var(--cm-font); letter-spacing: -.01em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__calendar-grid { gap: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__calendar-day { min-height: 44px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__calendar-status { color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__calendar-status.mango-loading { min-height: 44px; gap: 10px; font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .06em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__calendar-status.mango-loading::before { width: 30px; height: 30px; }
/* 320 px class: the month grid takes the full width so seven days keep 44 px cells. */
@media (max-width: 360px) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__calendar { width: 100vw; max-width: 100vw; padding-inline: 6px; border-inline: 0; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__calendar > :not(.chat-studio__calendar-weekdays):not(.chat-studio__calendar-grid) { margin-inline: 8px; }
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__calendar::backdrop { background: var(--cm-scrim); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__calendar-title { font: 600 21px/1.15 var(--cm-font); letter-spacing: -.025em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__calendar-weekdays { color: var(--cm-ink-3); font: 500 var(--cm-micro)/1 var(--cm-mono); letter-spacing: .1em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__calendar-day { border-radius: 0; color: var(--cm-ink); font: 500 14px/1.2 var(--cm-mono); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__calendar-day[aria-current='date'] { border-color: var(--cm-line-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__calendar-day[aria-pressed='true'] { border-color: var(--cm-ink); background: var(--cm-ink); color: var(--cm-bg); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__calendar-dot { border-radius: 0; background: var(--cm-ok); } /* has saved materials: the same green as the calendar counters */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__calendar-day[aria-pressed='true'] .chat-studio__calendar-dot { background: var(--cm-bg); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__calendar-legend { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__calendar-error { color: var(--cm-danger); }

/* Video (reel) creation */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__video, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video { color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__video-note, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__video-price { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__video-plan, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-plan { border: 1px solid var(--cm-ctl); border-radius: 0; background: var(--cm-s1); color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-plan-label { color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.5 var(--cm-mono); letter-spacing: .1em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-plan { margin-top: 8px; font: 400 15px/1.6 var(--cm-font); letter-spacing: 0; text-transform: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] button[aria-pressed="true"],
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] button[aria-pressed="true"]:disabled { position: relative; z-index: 1; border-color: var(--cm-line-3); background: var(--cm-s3); color: var(--cm-ink); box-shadow: inset 0 -2px 0 var(--cm-mango); opacity: 1; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__button { border-radius: var(--cm-radius); min-height: 44px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-actions > .chat-studio__button { width: 100%; max-width: none; margin: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-actions > [data-studio-action="own-material"] { grid-column: 1 / -1; }
@media (max-width: 480px) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-actions > .chat-studio__button > svg { display: none; } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-actions > .chat-studio__button { padding-inline: 10px; white-space: nowrap; }
/* "Zrób rolkę" is the one filled action on its own row; "Rozpisz" and "Narysuj ponownie" share the row above. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-actions > [data-studio-action="video-generate"],
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-actions > [data-studio-action="video-plan"]:has(+ [hidden]) { grid-column: 1 / -1; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-actions > [hidden] { display: none; }
/* Rolka ze scenek: direction — who stars (ready cast or own photo), where, and the style. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__direction-label { margin: 16px 0 8px; color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.3 var(--cm-mono); letter-spacing: .12em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__direction-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; margin: 0; padding: 0 12px; border: 1px solid var(--cm-line-2); border-radius: 0;
  background: transparent; color: var(--cm-ink-2); font: 500 13px/1 var(--cm-font); letter-spacing: -.005em; white-space: nowrap;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__chip:disabled:not([aria-pressed="true"]) { opacity: .5; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__chip-photo { width: 24px; height: 24px; margin-left: -6px; object-fit: cover; box-shadow: 0 0 0 1px var(--cm-line-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__chip-photo[hidden] { display: none; }
/* Rolka: the owner's own words under a question of the reel chat (besides the ready answers and "AI picks"). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__interview-own[hidden], html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__direction-group[hidden] { display: none; }
/* The reel is made in a conversation, like the brand brain: the rail of five steps, then turns — CosmoMango's
   question (the one being answered is the large line; earlier ones step back to small grey text), the ready answers
   under it once it is typed, and the owner's answer on the right with "Zmień". */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video { gap: 0; padding-top: 4px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-steps:not([hidden]) { margin: 0 0 6px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-notice:not([hidden]) { margin: 18px 0 0; padding: 10px 12px; border-left: 2px solid var(--cm-line-3); background: var(--cm-s1); color: var(--cm-ink-2); font: 400 13px/1.5 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-turn { display: grid; gap: 14px; margin-top: 28px; scroll-margin-top: 108px; }
/* A question brought to the top clears the sticky day bar of a planned day. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-turn[hidden], html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-options[hidden], html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-answer[hidden], html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-person[hidden], html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-bank[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-ask { justify-self: stretch; width: 100%; max-width: 100%; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-ask:not(.is-current) > .brand-chat__local-text { color: var(--cm-ink-3); font: 400 14px/1.5 var(--cm-font); letter-spacing: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-ask.is-current > .brand-chat__local-text { color: var(--cm-ink); font: 600 21px/1.28 var(--cm-font); letter-spacing: -.022em; text-wrap: pretty; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-options { display: grid; gap: 12px; min-width: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-options .chat-studio__direction-chips { gap: 8px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__reel-options .chat-studio__chip { width: auto; height: auto; min-width: 0; min-height: 44px; padding: 0 14px; background: var(--cm-s1); border-color: var(--cm-s1); color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__reel-options .chat-studio__chip > svg { width: 18px; height: 18px; flex: 0 0 18px; }
/* Like the brand brain, nothing is answered for the owner: an answer turns white only once the owner taps it. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__reel-options .chat-studio__chip[aria-pressed="true"],
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__reel-options .chat-studio__chip[aria-pressed="true"]:disabled { border-color: var(--cm-ink); background: var(--cm-ink); color: var(--cm-bg); box-shadow: none; outline: none; opacity: 1; }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__reel-options .chat-studio__chip:not(:disabled):not([aria-pressed="true"]):hover { background: var(--cm-s2); color: var(--cm-ink); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__reel-options .chat-studio__chip:active { scale: .96; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-options > .chat-studio__direction-group > .chat-studio__direction-label { margin: 4px 0 8px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-options > .chat-studio__interview-own { margin-top: 2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-options > .chat-studio__video-actions > :only-child { grid-column: 1 / -1; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__reel-next { justify-self: start; min-width: 120px; border-color: var(--cm-ink); background: var(--cm-ink); color: var(--cm-bg); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-person { display: grid; gap: 10px; padding: 12px 0 0; border-top: 1px solid var(--cm-line-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-bank { display: grid; gap: 10px; min-width: 0; }
/* The working field — the photos (the product's and the person's side by side, the two across the phone), the
   answers so far (a tap brings the question back) and "Rozpisz scenki". No frame: the photos use the whole width.
   After the planning it is a short summary. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-field { display: grid; gap: 10px; margin-top: 20px; padding: 0; border: 0; background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-field[hidden], html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-field [hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__reel-photos > .chat-studio__reel-photo {
  position: relative; display: block; width: 100%; height: auto; min-width: 0; min-height: 0; aspect-ratio: 4 / 5; margin: 0; padding: 0; overflow: hidden;
  border: 0; border-radius: 0; background: var(--cm-well); cursor: pointer;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-photo-image { display: block; width: 100%; height: 100%; object-fit: cover; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-photo:focus-visible { outline: 2px solid var(--cm-ink); outline-offset: 2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-field[data-mode="summary"] .chat-studio__reel-photos { grid-template-columns: repeat(2, 64px); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-answers { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__reel-answers > .chat-studio__reel-answer {
  display: inline-flex; align-items: baseline; max-width: 100%; min-height: 36px; margin: 0; padding: 9px 11px; border: 1px solid var(--cm-line-3); border-radius: 0;
  background: var(--cm-bg); color: var(--cm-ink); font: 500 13px/1.25 var(--cm-font); text-align: left; cursor: pointer;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-answer-text { min-width: 0; overflow-wrap: anywhere; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-answer-topic { margin-right: 2px; color: var(--cm-ink-3); font: 500 10px/1 var(--cm-mono); letter-spacing: .1em; text-transform: uppercase; }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__reel-answers > .chat-studio__reel-answer:not(:disabled):hover { border-color: var(--cm-ink); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-field > .chat-studio__interview-own { grid-template-columns: minmax(0, 1fr) 44px; margin: 0; }
/* The own words are the last answer of the question asked, right under its suggestions. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__direction-group > .chat-studio__interview-own { grid-template-columns: minmax(0, 1fr) 44px; margin: 10px 0 0; }
/* "Wygeneruj scenariusz": the one suggestion that writes — marked in mango; while it writes, a short loader. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__stage.chat-studio__script-working { aspect-ratio: auto; height: 132px; max-height: none; margin: 10px 0 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__reel-send { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 1px solid var(--cm-ink); border-radius: 0; background: var(--cm-ink); color: var(--cm-bg); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__reel-send > svg { width: 20px; height: 20px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-field > .chat-studio__video-actions > :only-child { grid-column: 1 / -1; }
/* While CosmoMango plans the scenes, the loader with its name holds the place of the storyboard. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__stage.chat-studio__reel-planning { width: 100%; aspect-ratio: 4 / 5; max-height: 62dvh; margin: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__stage.chat-studio__reel-planning[hidden] { display: none; }
/* Scenki 2.0: the person and the place of the reel (two panels), shown for approval before the scenes are drawn. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__stage.chat-studio__reel-looking { aspect-ratio: 16 / 9; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-look { margin: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-look[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-look-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--cm-well); box-shadow: 0 0 0 1px var(--cm-line-2); }
/* "Popraw scenkę": a frame is tapped (it gets a white frame), its words are rewritten, only it is drawn again. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene { position: relative; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__scene > .chat-studio__scene-pick { position: absolute; inset: 0; z-index: 7; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-pick[hidden] { display: none; }
/* A tap on a frame shows its scene line under the scenes (the lines are not printed under every frame). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__scene > .chat-studio__scene-show { position: absolute; inset: 0; z-index: 6; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-show[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-show:focus-visible { outline: 2px solid var(--cm-ink); outline-offset: 2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene[data-open="true"] .chat-studio__scene-frame { box-shadow: 0 0 0 2px var(--cm-mango); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-detail { margin: 14px 0 0; padding: 12px 14px; background: var(--cm-s1); border-left: 2px solid var(--cm-mango); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-detail[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-detail-head { margin: 0 0 6px; color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.3 var(--cm-mono); letter-spacing: .1em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-detail-text { margin: 0; color: var(--cm-ink); font: 400 14px/1.5 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-pick:focus-visible { outline: 2px solid var(--cm-ink); outline-offset: 2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__storyboard[data-picking="true"] .chat-studio__scene-frame { box-shadow: 0 0 0 1px var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene[data-selected="true"] .chat-studio__scene-frame { box-shadow: 0 0 0 2px var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-frame > .cm-scan { z-index: 6; }
/* While drawing, the product photo keeps developing out of the blur under each frame's own scan. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene[data-state="drawing"] .chat-studio__scene-frame > .cm-scan { background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-editor { display: grid; gap: 10px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-editor[hidden] { display: none; }
/* "Rozpisz od nowa": the person's look and the script, each in its own field. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__replan > .chat-studio__direction-label { margin: 4px 0 -4px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio :is(.chat-studio__scene-input, .chat-studio__interview-input) { scroll-margin: 96px 0 24px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .chat-studio .chat-studio__replan > [hidden], html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__replan > [hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .chat-studio .chat-studio__replan-story, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__replan-story { min-height: 168px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .chat-studio .chat-studio__scene-input, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio .chat-studio__scene-input {
  display: block; box-sizing: border-box; width: 100%; min-height: 96px; margin: 0; padding: 12px; resize: vertical; font: 400 16px/1.5 var(--cm-font);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-turn[data-turn="board"] .chat-studio__storyboard, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-turn[data-turn="film"] .chat-studio__filming, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-turn[data-turn="result"] .chat-studio__video-result { margin: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__interview-own { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-top: 2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__interview-own > .chat-studio__interview-own-label { grid-column: 1 / -1; margin: 6px 0 2px; }
/* The own-words field grows with the text: 16 px (no zoom on iPhone), comfortable lines, the whole answer readable. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__interview-input { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 12px; border: 1px solid var(--cm-ctl); border-radius: 0; background: var(--cm-bg); color: var(--cm-ink); font: 400 16px/1.45 var(--cm-font); resize: none; overflow-y: auto; scroll-margin: 96px 0 24px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__interview-own { align-items: end; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__interview-input::placeholder { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__interview-hint { grid-column: 1 / -1; margin: 4px 0 0; font: 400 13px/1.4 var(--cm-font); color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__interview-hint[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__interview-count { grid-column: 1 / -1; margin: 2px 0 0; font: 400 12px/1.3 var(--cm-mono); letter-spacing: .02em; color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__interview-count[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__interview-count[data-over="true"] { color: var(--cm-danger); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__interview-input:focus-visible { outline: 2px solid var(--cm-ink); outline-offset: 1px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__interview-own[data-chosen="true"] .chat-studio__interview-input { border-color: var(--cm-mango); box-shadow: inset 0 -2px 0 var(--cm-mango); }
/* Rolka ze scenek: the storyboard. Each scene is a 9:16 frame with its time and role on the picture
   (like a creator's storyboard sheet) and what happens under it; while CosmoMango draws, the frames show
   the same creating stage as the photo studio. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__storyboard { margin: 18px 0 8px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__storyboard[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__storyboard-head { display: grid; gap: 4px; margin: 0 0 10px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__storyboard-title { margin: 0; color: var(--cm-ink); font: 600 11px/1.3 var(--cm-mono); letter-spacing: .1em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__storyboard-hint { margin: 0; color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.3 var(--cm-mono); letter-spacing: .1em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__storyboard[data-stale="true"] .chat-studio__storyboard-hint { color: var(--cm-mango); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__storyboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 6px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__storyboard[data-count="4"] .chat-studio__storyboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene { min-width: 0; margin: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-frame {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 80% at 50% 110%, #2a1c12, var(--cm-s1) 60%); box-shadow: 0 0 0 1px var(--cm-line-2);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene[data-state="waiting"] .chat-studio__scene-frame { background: var(--cm-s1); box-shadow: inset 0 0 0 1px var(--cm-line-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: var(--cm-well) no-repeat 0 0 / 300% auto; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-image[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene[data-state="drawn"] .chat-studio__scene-image { animation: cm-stage-reveal 1.15s cubic-bezier(.2, .7, .2, 1) both; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__storyboard[data-stale="true"] .chat-studio__scene-image { opacity: .5; filter: grayscale(.5); animation: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-frame > .chat-studio__scene-develop { position: absolute; display: none; pointer-events: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene[data-state="drawing"] .chat-studio__scene-frame > .chat-studio__scene-develop { display: block; }
/* Drawing: the product photo develops out of a deep blur in every frame, under the scan with the name. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-develop {
  inset: 0; background: no-repeat 50% 50% / cover; transform-origin: 50% 50%;
  animation: cm-stage-develop 3.6s ease-in-out infinite alternate;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene[data-state="drawing"] .chat-studio__scene-frame { animation: cm-stage-glow 3.2s ease-in-out infinite; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene:nth-child(2) .chat-studio__scene-frame > * { animation-delay: -.4s; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene:nth-child(3) .chat-studio__scene-frame > * { animation-delay: -.8s; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene:nth-child(4) .chat-studio__scene-frame > * { animation-delay: -1.2s; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene:nth-child(5) .chat-studio__scene-frame > * { animation-delay: -1.6s; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene:nth-child(6) .chat-studio__scene-frame > * { animation-delay: -2s; }
/* Each frame's own scan rises at its own moment, so the six read as six scenes being drawn, not one sweep. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene:nth-child(2) .chat-studio__scene-frame > .cm-scan > * { animation-delay: -.93s; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene:nth-child(3) .chat-studio__scene-frame > .cm-scan > * { animation-delay: -1.87s; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene:nth-child(4) .chat-studio__scene-frame > .cm-scan > * { animation-delay: -2.8s; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene:nth-child(5) .chat-studio__scene-frame > .cm-scan > * { animation-delay: -3.73s; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene:nth-child(6) .chat-studio__scene-frame > .cm-scan > * { animation-delay: -4.67s; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-time {
  position: absolute; z-index: 5; top: 5px; left: 5px; padding: 3px 5px 4px; background: rgb(15 15 17 / .84); color: var(--cm-ink);
  font: 500 9px/1.25 var(--cm-mono); letter-spacing: .06em; text-transform: uppercase;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-role { display: block; color: var(--cm-mango); font-style: normal; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-number {
  position: absolute; z-index: 5; top: 5px; right: 5px; display: grid; place-items: center; width: 18px; height: 18px;
  background: var(--cm-ink); color: var(--cm-on-mango); font: 600 10px/1 var(--cm-font);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-text[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-text {
  display: -webkit-box; margin: 7px 0 0; overflow: hidden; color: var(--cm-ink-2); font: 400 11.5px/1.35 var(--cm-font);
  -webkit-line-clamp: 4; -webkit-box-orient: vertical;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__storyboard[data-count="4"] .chat-studio__scene-text { font-size: 12.5px; }
/* The raw scene lines stay one tap away. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] details.chat-studio__video-plan-label { display: block; margin: 4px 0 14px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] details.chat-studio__video-plan-label[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-plan-summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; color: var(--cm-ink-2);
  font: 500 var(--cm-micro)/1.3 var(--cm-mono); letter-spacing: .1em; text-transform: uppercase;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-plan-summary::-webkit-details-marker { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-plan-summary::before { content: "+"; width: 12px; color: var(--cm-ink); font: 400 16px/1 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] details[open] > .chat-studio__video-plan-summary::before { content: "−"; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] details.chat-studio__video-plan-label .chat-studio__video-plan { font-size: 13px; line-height: 1.5; min-height: 220px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] details.chat-studio__video-plan-label .chat-studio__video-note { margin: 8px 0 0; font: 400 12px/1.5 var(--cm-font); letter-spacing: 0; text-transform: none; }
/* Filming: while Kling or Gemini makes the film, the scenes play on a stage one after another. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__filming { margin: 16px 0 6px; text-align: center; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__filming[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__filming-stage { width: min(56%, 220px); margin: 0 auto 12px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__filming-shots { inset: 0; z-index: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__filming-shot {
  position: absolute; inset: 0; background: var(--cm-well) no-repeat 50% 50% / cover; opacity: 0;
  transition: opacity .9s ease; transform-origin: 50% 60%;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__filming-shot[data-active="true"] { opacity: 1; animation: cm-filming-push 2.4s ease-out both; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__filming-rec {
  z-index: 5; top: 9px; left: 9px; display: flex; align-items: center; gap: 6px; padding: 3px 7px 4px; background: rgb(15 15 17 / .8);
  color: var(--cm-ink); font: 600 9px/1 var(--cm-mono); letter-spacing: .14em;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__filming-rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; animation: cm-filming-rec 1.2s ease-in-out infinite; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__filming-rec::after { content: "REC"; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__filming-title { margin: 0 0 4px; color: var(--cm-ink); font: 600 12px/1.35 var(--cm-mono); letter-spacing: .08em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__filming-note { margin: 0; color: var(--cm-ink-3); font: 400 12.5px/1.45 var(--cm-font); }
@keyframes cm-filming-push { 0% { transform: scale(1.12); filter: blur(6px) brightness(.8); } 45% { filter: none; } 100% { transform: scale(1.02); filter: none; } }
@keyframes cm-filming-rec { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* The film engine: Kling 3.0 Omni or Gemini Omni Flash. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__engine-group { margin-top: 2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__engine-group[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__engine-note { margin: 8px 0 0; color: var(--cm-ink-3); font: 400 12px/1.45 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__engine-note:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-frame, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-frame > *, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene[data-state="drawn"] .chat-studio__scene-image { animation: none; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__scene-develop { filter: blur(10px) saturate(.7) brightness(.7); }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__filming-shot, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__filming-rec::before { animation: none; transition: none; }
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-bank-photo { position: relative; border: 1px solid var(--cm-line-2); border-radius: 0; background: var(--cm-s1); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-bank-photo:focus:not(:focus-visible) { border-color: var(--cm-line-2); outline: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-bank-photo:focus-visible { border-color: var(--cm-ink); outline: 2px solid var(--cm-ink); outline-offset: 2px; }
/* The Bank photo the reel is made from: a mango frame and tick; the others step back. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-bank-photo img { transition: opacity .2s ease; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-bank-strip[data-chosen="true"] .studio-bank-photo:not([aria-pressed="true"]) img { opacity: .42; }
/* "+ Z telefonu": the first tile of the strip adds a product photo straight from the phone. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-bank-add {
  display: grid; place-content: center; justify-items: center; gap: 8px; border-style: dashed; border-color: var(--cm-line-3); color: var(--cm-ink-2);
  font: 500 var(--cm-micro)/1.25 var(--cm-mono); letter-spacing: .08em; text-transform: uppercase; text-align: center;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-bank-add svg { width: 22px; height: 22px; }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-bank-add:not(:disabled):hover { border-color: var(--cm-mango); color: var(--cm-ink); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-bank-empty { display: grid; gap: 10px; margin: 2px 0 6px; padding: 14px; border: 1px solid var(--cm-line-2); background: var(--cm-s1); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-bank-empty__text { margin: 0; color: var(--cm-ink-2); font: 400 13px/1.5 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-bank-empty .chat-studio__button { width: 100%; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-bank-empty[hidden], html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-bank-strip[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-bank-photo[aria-pressed="true"], html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-bank-photo[aria-pressed="true"]:focus:not(:focus-visible) { border-color: var(--cm-mango); outline: 2px solid var(--cm-mango); outline-offset: -3px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-bank-photo[aria-pressed="true"]::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
  background: var(--cm-mango) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8' fill='none' stroke='%23141414' stroke-width='2.8' stroke-linecap='square'/%3E%3C/svg%3E") center / 15px no-repeat;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__video-player { border-radius: 0; background: var(--cm-well); }
/* The finished reel: only the film — bright, filling its 9:16 frame with slightly rounded corners, playing by
   itself. Its only marks are sound and full screen; a tap in the middle shows play or pause. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__reel-turn[data-turn="result"] .chat-studio__video-result { justify-items: stretch; gap: 12px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-preview { position: relative; width: min(100%, calc(66dvh * 9 / 16)); max-width: 100%; aspect-ratio: 9 / 16; margin: 0 auto; overflow: hidden; isolation: isolate; border-radius: 14px; background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-preview > .chat-studio__video-player { display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border-radius: 0; background: transparent; object-fit: cover; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-preview > .chat-studio__player-toggle {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: #fff; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__player-glyph { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgb(0 0 0 / .36); opacity: 0; transform: scale(.86); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__player-glyph > svg { width: 28px; height: 28px; fill: currentColor; stroke-width: 2.6; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__video-preview:is([data-glyph="shown"], [data-glyph="flash"]) .chat-studio__player-glyph { opacity: 1; transform: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-preview > .chat-studio__player-button {
  position: absolute; z-index: 3; bottom: 10px; display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: rgb(0 0 0 / .42); color: #fff; box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-preview > .chat-studio__player-sound { left: 10px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-preview > .chat-studio__player-full { right: 10px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__video-preview > .chat-studio__player-button > svg { width: 20px; height: 20px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-preview > :is(.chat-studio__player-button, .chat-studio__player-toggle, .chat-studio__video-player)[hidden] { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-preview:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; background: #000; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__video-preview:fullscreen > .chat-studio__video-player { object-fit: contain; }
/* Zapisz and Pobierz side by side under the reel. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__reel-turn[data-turn="result"] .chat-studio__save-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio[data-video="true"] .chat-studio__reel-turn[data-turn="result"] .chat-studio__save-actions > [data-studio-action="video-refresh"] { grid-column: 1 / -1; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__video-error:not([hidden]):not(:empty) { padding: 12px 14px; border-left: 2px solid var(--cm-danger); background: rgb(255 77 77 / .06); color: var(--cm-ink); font-size: 13px; }

/* ─── 6. Editor chrome (the canvas itself is untouched) ───────────────────── */
/* Layout: a 44 px nav bar above the canvas, the canvas, the 1-2-3 switcher, a 48 px save bar.
   Nothing of the interface sits on the artwork except the small canvas tools. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor {
  --cm-editor-chrome: calc(env(safe-area-inset-top, 0px) + 45px + 4px + 8px + 48px + max(8px, env(safe-area-inset-bottom, 0px)));
  --chat-editor-canvas-height: calc(var(--chat-editor-view-height, 100dvh) - var(--cm-editor-chrome));
  background: var(--cm-bg-deep);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor[data-slides='true'] { --chat-editor-canvas-height: calc(var(--chat-editor-view-height, 100dvh) - var(--cm-editor-chrome) - 56px); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor-mount { padding-top: 4px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor-top {
  position: sticky; z-index: 8; top: 0; left: 0; display: flex; align-items: center; justify-content: flex-start; gap: 14px; box-sizing: content-box; width: auto; height: 44px;
  margin: 0 calc(-1 * max(4px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(4px, env(safe-area-inset-left, 0px)));
  padding: env(safe-area-inset-top, 0px) 16px 0 max(0px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--cm-line); background: var(--cm-bg-deep); pointer-events: auto;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor-top > button {
  flex: 0 0 44px; width: 44px; height: 44px; padding: 11px; border: 0; border-right: 1px solid var(--cm-line); border-radius: 0;
  background: transparent; color: var(--cm-ink); box-shadow: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor-top::after {
  content: "Relacja · 9:16"; content: "Relacja · 9:16" / ""; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--cm-ink-3); font: 500 var(--cm-micro)/1 var(--cm-mono); letter-spacing: .08em; text-transform: uppercase;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor[data-format="post"] .chat-studio__editor-top::after { content: "Post · 4:5"; content: "Post · 4:5" / ""; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor[data-slides="true"] .chat-studio__editor-top::after { content: "Karuzela"; content: "Karuzela" / ""; }
html.has-chat-app[lang="en"]:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor .chat-studio__editor-top::after { content: "Story · 9:16"; content: "Story · 9:16" / ""; }
html.has-chat-app[lang="en"]:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor[data-format="post"] .chat-studio__editor-top::after { content: "Post · 4:5"; content: "Post · 4:5" / ""; }
html.has-chat-app[lang="en"]:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor[data-slides="true"] .chat-studio__editor-top::after { content: "Carousel"; content: "Carousel" / ""; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor[data-slides="true"]:has(.chat-studio__slide:nth-child(3):last-child):has(.chat-studio__slide:nth-child(1).is-active) .chat-studio__editor-top::after { content: "Slajd 1/3 · Karuzela"; content: "Slajd 1/3 · Karuzela" / ""; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor[data-slides="true"]:has(.chat-studio__slide:nth-child(3):last-child):has(.chat-studio__slide:nth-child(2).is-active) .chat-studio__editor-top::after { content: "Slajd 2/3 · Karuzela"; content: "Slajd 2/3 · Karuzela" / ""; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor[data-slides="true"]:has(.chat-studio__slide:nth-child(3):last-child):has(.chat-studio__slide:nth-child(3).is-active) .chat-studio__editor-top::after { content: "Slajd 3/3 · Karuzela"; content: "Slajd 3/3 · Karuzela" / ""; }
html.has-chat-app[lang="en"]:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor[data-slides="true"]:has(.chat-studio__slide:nth-child(3):last-child):has(.chat-studio__slide:nth-child(1).is-active) .chat-studio__editor-top::after { content: "Slide 1/3 · Carousel"; content: "Slide 1/3 · Carousel" / ""; }
html.has-chat-app[lang="en"]:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor[data-slides="true"]:has(.chat-studio__slide:nth-child(3):last-child):has(.chat-studio__slide:nth-child(2).is-active) .chat-studio__editor-top::after { content: "Slide 2/3 · Carousel"; content: "Slide 2/3 · Carousel" / ""; }
html.has-chat-app[lang="en"]:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor[data-slides="true"]:has(.chat-studio__slide:nth-child(3):last-child):has(.chat-studio__slide:nth-child(3).is-active) .chat-studio__editor-top::after { content: "Slide 3/3 · Carousel"; content: "Slide 3/3 · Carousel" / ""; }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio__editor-top > button:hover { background: var(--cm-s1); } }

/* Canvas tools: one family of flat tiles, right edges on one line (scaled .8 by the studio → 45 px). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > :is(.canvas-add-text, .canvas-cta-toggle, .canvas-undo, .canvas-brand-style) {
  right: 12px; box-sizing: border-box; width: 56px; min-width: 56px; height: 56px; min-height: 56px; padding: 0; opacity: 1;
  border: 1px solid rgb(255 255 255 / .18); border-radius: 0; background: rgb(27 27 31 / .9); color: var(--cm-ink);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > :is(.canvas-add-text, .canvas-cta-toggle, .canvas-undo, .canvas-brand-style):disabled { opacity: 1; color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > :is(.canvas-add-text, .canvas-cta-toggle, .canvas-undo, .canvas-brand-style):disabled > * { color: inherit; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > .canvas-add-text { font: 600 19px/1 var(--cm-font); letter-spacing: -.02em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > .canvas-undo { display: grid; place-items: center; padding: 16px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > .canvas-undo svg { width: 22px; height: 22px; stroke-width: 2; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > .canvas-cta-toggle { display: grid; place-items: center; align-content: center; gap: 6px; padding: 6px 0 7px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > .canvas-cta-toggle > span { width: 20px; height: 20px; border: 1.5px solid var(--cm-ink-2); border-radius: 0; font-size: 14px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > .canvas-cta-toggle.is-active > span { border-color: var(--cm-mango); background: var(--cm-mango); color: var(--cm-on-mango); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > :is(.canvas-cta-toggle, .canvas-brand-style) > small {
  display: block; max-width: 100%; color: inherit; font: 500 9.5px/1 var(--cm-mono); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; opacity: .72;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > .canvas-brand-style { display: grid; place-items: center; align-content: center; gap: 5px; padding: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > .canvas-brand-style > span { align-self: auto; color: inherit; font: 600 10px/1 var(--cm-font); letter-spacing: -.01em; white-space: nowrap; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > .canvas-brand-style.is-active,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > .canvas-brand-style[aria-pressed="true"] { border-color: var(--cm-mango); background: rgb(27 27 31 / .94); box-shadow: inset 0 -2px 0 var(--cm-mango); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .story-frame > .canvas-photo-colors.is-active { border: 1px solid var(--cm-mango) !important; background: rgb(27 27 31 / .94) !important; color: var(--cm-ink) !important; box-shadow: inset 0 -2px 0 var(--cm-mango) !important; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .story-frame > .canvas-photo-colors.is-active::after { top: -4px; right: -4px; width: 14px; height: 14px; border: 0; border-radius: 0; background: var(--cm-mango); color: var(--cm-on-mango); font: 700 10px/1 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > .canvas-visual-layout > span { color: var(--cm-mango); font: 600 16px/1 var(--cm-font); letter-spacing: -.02em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > .canvas-visual-layout > small { opacity: .8; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .story-frame > .canvas-done {
  min-width: 56px; min-height: 56px; padding: 0 12px; border: 1px solid rgb(255 255 255 / .18); border-radius: 0;
  background: rgb(27 27 31 / .9); color: var(--cm-ink); box-shadow: none; text-shadow: none; font: 600 15px/1 var(--cm-font);
}
/* While a text is edited, "Gotowe" sits in the editor's nav bar (right), not on the artwork. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .canvas-done--chat {
  top: env(safe-area-inset-top, 0px) !important; /* the editor writes an inline top for the old on-canvas spot */
  right: 0; min-width: 56px; height: 56px; min-height: 56px; padding: 0 18px; border: 0; border-left: 1px solid var(--cm-line);
  border-radius: 0; background: var(--cm-ink); color: var(--cm-bg); box-shadow: inset 0 -2px 0 var(--cm-mango); text-shadow: none; font: 600 16px/1 var(--cm-font);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .canvas-trash { border-radius: var(--cm-radius); background: rgb(27 27 31 / .9); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .canvas-trash.is-over { border-color: #fff; background: #c9303f; box-shadow: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .canvas-background-control, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio-canvas-host .canvas-background-control { border-radius: var(--cm-radius); border-color: rgb(255 255 255 / .2); background: rgb(27 27 31 / .85); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio-canvas-host .canvas-background-control input::-webkit-color-swatch { border-radius: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .chat-studio-canvas-host .canvas-background-control input::-moz-color-swatch { border-radius: 0; }

/* Translate menu (A文) */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .translate-menu {
  padding: 10px; border: 1px solid var(--cm-line-3); border-radius: var(--cm-radius); background: var(--cm-s1); color: var(--cm-ink);
  box-shadow: inset 0 2px 0 var(--cm-mango);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .translate-menu__title { margin: 2px 2px 10px; color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.3 var(--cm-mono); letter-spacing: .14em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .translate-menu__list { gap: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .translate-menu button { min-height: 44px; margin: 0 0 -1px; padding: 8px 10px; border: 1px solid var(--cm-line-2); border-radius: 0; background: transparent; color: var(--cm-ink); font: 500 13px/1.2 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .translate-menu__list button:nth-child(2n) { margin-left: -1px; }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .translate-menu button:not(:disabled):hover { position: relative; z-index: 1; border-color: var(--cm-line-3); background: var(--cm-s2); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .translate-menu .translate-menu__review { margin-top: 10px; border-color: var(--cm-line-3); background: transparent; color: var(--cm-ink); text-align: center; }

/* Save: a full-width 48 px action bar under the canvas (and under the video), never on the artwork.
   The overlay script keeps writing left/top; a static box ignores them. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .chat-studio .chat-studio__preview-save,
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .chat-studio .chat-studio__preview-save[data-preview-save-ready] {
  position: static; z-index: auto; display: flex; width: auto; max-width: none; height: auto; margin: 8px 0 0; padding: 0;
  visibility: visible; pointer-events: auto;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .chat-studio .chat-studio__editor .chat-studio__preview-save { padding: 0 0 max(8px, env(safe-area-inset-bottom, 0px)); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .chat-studio__preview-save > .chat-studio__button {
  flex: 1 1 auto; min-height: 48px; height: 48px; padding: 0 16px; gap: 10px; border: 1px solid var(--cm-ink); border-radius: 0;
  background: var(--cm-ink); color: var(--cm-bg); box-shadow: inset 0 2px 0 var(--cm-mango); font: 600 14px/1 var(--cm-font); letter-spacing: -.005em;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .chat-studio__preview-save > .chat-studio__button > svg { width: 18px; height: 18px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .chat-studio__preview-save > .chat-studio__button:disabled { border-color: var(--cm-line-2); background: var(--cm-s2); color: var(--cm-ink-3); box-shadow: none; opacity: 1; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .chat-studio__preview-save > .chat-studio__button.is-saved {
  border-color: var(--cm-line-2); background: transparent; color: var(--cm-ink-2); box-shadow: inset 0 2px 0 var(--cm-mango);
  font: 500 12px/1 var(--cm-mono); letter-spacing: .06em; text-transform: uppercase;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .chat-studio__preview-save > .chat-studio__button.is-saved > svg { display: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .chat-studio__preview-save > .chat-studio__button.is-saved:not(.mango-loading)::before {
  content: ""; display: inline-block; flex: none; width: 4px; height: 8px; margin: -3px 2px 0 1px; border: solid var(--cm-mango); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .chat-studio__preview-save > .chat-studio__button:not(:disabled):not(.is-saved):hover { background: #fff; } }

/* Carousel slide switcher: 1 · 2 · 3 below the canvas */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__slides { gap: 0; padding: 10px 0 2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__slide-list { gap: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__slides .chat-studio__icon-button { width: 44px; height: 44px; padding: 13px; border: 1px solid var(--cm-line-2); border-radius: 0; background: transparent; color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__slides .chat-studio__icon-button:disabled { opacity: 1; color: var(--cm-line-3); border-color: var(--cm-line); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__slides > .chat-studio__icon-button:first-child { margin-right: 8px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__slides > .chat-studio__icon-button:last-child { margin-left: 8px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__slide {
  min-width: 48px; height: 44px; padding: 0 14px; border: 1px solid var(--cm-line-2); border-radius: 0;
  background: transparent; color: var(--cm-ink-3); font: 500 14px/1 var(--cm-mono); font-variant-numeric: tabular-nums;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__slide + .chat-studio__slide { margin-left: -1px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__slide.is-active { position: relative; z-index: 1; border-color: var(--cm-line-3); background: var(--cm-s3); color: var(--cm-ink); box-shadow: inset 0 -2px 0 var(--cm-mango); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__slide:focus-visible { outline: 2px solid var(--cm-ink); outline-offset: 2px; }

/* Text editing panel: opaque, one grid of 44 px cells, sizes in a labelled segment. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .text-style-panel {
  left: 4px; right: 4px; padding: 0; border: 1px solid var(--cm-line-3); border-radius: 0; background: var(--cm-s1); color: var(--cm-ink);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .text-style-panel button { color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .text-style-panel .text-edit-input,
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .text-style-panel .text-edit-input:focus,
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .text-style-panel .text-edit-input:focus-visible {
  box-sizing: border-box; width: calc(100% - 16px); max-width: none; margin: 8px; padding: 8px 10px;
  border: 1px solid var(--cm-mango); border-radius: 0; outline: 0; background: var(--cm-bg); color: var(--cm-ink); box-shadow: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .font-strip { gap: 0; padding: 0 0 8px 8px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .font-strip button {
  min-height: 44px; margin: 0; border: 1px solid var(--cm-line-2); border-radius: 0; background: var(--cm-s2); color: var(--cm-ink);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .font-strip button + button { margin-left: -1px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .text-style-panel .font-strip button:is(.is-active, [aria-pressed="true"]) {
  position: relative; z-index: 1; border-color: var(--cm-line-3); background: var(--cm-s3); color: var(--cm-ink); box-shadow: inset 0 -2px 0 var(--cm-mango);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .text-size-controls { display: flex; justify-content: flex-start; align-items: center; gap: 0; padding: 0 8px 8px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .text-size-controls::before {
  content: "Rozmiar"; content: "Rozmiar" / ""; margin-right: 12px; color: var(--cm-ink-3);
  font: 500 var(--cm-micro)/1 var(--cm-mono); letter-spacing: .1em; text-transform: uppercase;
}
html.has-chat-app[lang="en"]:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .text-size-controls::before { content: "Size"; content: "Size" / ""; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .text-size-controls button {
  min-width: 44px; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--cm-line-2); border-radius: 0;
  background: transparent; color: var(--cm-ink); font: 600 14px/1 var(--cm-font);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .text-size-controls button + button { margin-left: -1px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .text-size-controls button:disabled { opacity: 1; color: var(--cm-ink-3); }
/* The tool row is a rail of 44 × 44 cells: where nine cells do not fit (390 px and below) it scrolls sideways and
   fades on the cut edge only while there is more to reach (scroll-driven; static browsers get no fade). */
@property --cm-tool-fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --cm-tool-fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes cm-tool-fade { 0% { --cm-tool-fade-l: 0px; --cm-tool-fade-r: 28px; } 8%, 92% { --cm-tool-fade-l: 28px; --cm-tool-fade-r: 28px; } 100% { --cm-tool-fade-l: 28px; --cm-tool-fade-r: 0px; } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .editor-tools {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(44px, 1fr); gap: 0; padding: 0; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; scrollbar-width: none; border-top: 1px solid var(--cm-line-2); border-radius: 0;
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .editor-tools::-webkit-scrollbar { display: none; }
@supports (animation-timeline: scroll()) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .editor-tools {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--cm-tool-fade-l), #000 calc(100% - var(--cm-tool-fade-r)), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--cm-tool-fade-l), #000 calc(100% - var(--cm-tool-fade-r)), transparent);
    animation: cm-tool-fade linear both; animation-timeline: scroll(self inline);
  }
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .editor-tools button {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0; overflow: hidden; border: 0; border-radius: 0;
  background: transparent; color: var(--cm-ink); box-shadow: none; font: 600 15px/1 var(--cm-font); letter-spacing: -.04em; white-space: nowrap;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .editor-tools button + button { box-shadow: inset 1px 0 0 var(--cm-line-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .editor-tools button em { font: italic 600 18px/1 Georgia, serif; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .editor-tools button svg { width: 20px; height: 20px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .editor-tools [data-tool="shadow"] { font-size: 17px; font-weight: 400; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .editor-tools [data-tool="background"] { font-size: 17px; font-weight: 400; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .editor-tools [data-tool="outline"] { font-size: 12px; letter-spacing: -.02em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .editor-tools [data-tool="glow"] { font-size: 14px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .editor-tools [data-tool="spacing"] { font-size: 14px; letter-spacing: -.02em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .editor-tools button::after,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .editor-tools button:is(.is-active, [aria-pressed="true"])::after { content: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .editor-tools button:is(.is-active, [aria-pressed="true"]),
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .text-style-panel:has(.color-strip:not([hidden])) .editor-tools [data-tool="color"] {
  background: var(--cm-s3); color: var(--cm-ink); box-shadow: inset 0 -2px 0 var(--cm-mango), inset 1px 0 0 var(--cm-line-2);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .editor-tools .rainbow-tool::before {
  width: 20px; height: 20px; margin: 0; border: 1px solid rgb(255 255 255 / .6); border-radius: 0;
  background: conic-gradient(#ff5a4e 0 25%, #ffd24a 0 50%, #4bc6ff 0 75%, #f2f1ed 0);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .text-style-panel .text-color-target select, html.has-chat-app:not(#cm-theme):not(#cm-noir) .text-style-panel #text-custom-color { border-color: var(--cm-ctl); border-radius: var(--cm-radius); background: var(--cm-s1); color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .text-style-panel button:focus-visible { outline: 2px solid var(--cm-ink); outline-offset: -2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--creation-studio .text-style-panel .color-strip button { border-radius: 0; }
/* Onboarding / brain colour step: three square swatches (label above, HEX under), no well around them; a hairline
   keeps a dark colour apart from the dark page. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel { margin: 18px 0 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__fields--colors { gap: 12px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__color-row { flex-direction: column; align-items: flex-start; gap: 6px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__color {
  flex: 0 0 auto; width: 52px; height: 52px; padding: 0; border: 1px solid rgb(255 255 255 / .16); border-radius: 0; background: transparent; box-shadow: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__color::-webkit-color-swatch-wrapper { padding: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__color::-webkit-color-swatch { border: 0; border-radius: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__color::-moz-color-swatch { border: 0; border-radius: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__group { border-radius: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__label { color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .1em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__hex { font: 400 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .02em; }
/* Font step: two horizontal strips of real previews, like the other Noir rails (plain tiles, 8 px apart, the cut
   edge fades, soft snap). The chosen tile has the white outline of a selected clip and a ✓. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__font-options {
  gap: 8px; padding: 4px 40px 6px 4px; scroll-padding-inline: 4px 40px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__font-options::-webkit-scrollbar { display: none; }
/* Previews at half their former size (heading 28 → 14 px, card 96 → 48 px tall); body text keeps a legible 12 px.
   Every card stays a 44 px tap target. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__font-card,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__font-card.is-selected {
  min-width: 84px; max-width: min(200px, calc(100% - 24px)); min-height: 48px; padding: 7px 24px 7px 11px; border: 0; border-radius: 0; background: var(--cm-s1); color: var(--cm-ink-2);
}
/* A preview never runs past the visible strip (320 px): long samples wrap instead of being cut by the edge. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__font-card .brand-style-panel__font-sample { font-size: 14px; line-height: 1.25; white-space: normal; text-wrap: balance; overflow-wrap: normal; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__font-card--body,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__font-card--body.is-selected { max-width: min(250px, calc(100% - 24px)); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__font-card--body .brand-style-panel__font-sample { font-size: 12px; line-height: 1.35; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__font-card.is-selected { position: relative; z-index: 1; background: var(--cm-s2); color: var(--cm-ink); outline: 2px solid var(--cm-ink); outline-offset: 2px; box-shadow: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__font-card.is-selected::after { top: 6px; right: 7px; color: var(--cm-ink); font: 500 10px/1 var(--cm-mono); }
/* Keyboard focus is a ring INSIDE the tile, so it never hides the selection outline. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__font-card:focus-within { outline: 0; box-shadow: inset 0 0 0 2px var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__font-card.is-selected:focus-within { outline: 2px solid var(--cm-ink); outline-offset: 2px; box-shadow: inset 0 0 0 2px var(--cm-bg), inset 0 0 0 4px var(--cm-ink); }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__font-card:not(.is-selected):hover { background: var(--cm-s2); color: var(--cm-ink); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__label, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-style-panel__hex { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .visual-layout-bar { color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .visual-layout-bar button { border-color: var(--cm-line-3); border-radius: var(--cm-radius); background: transparent; color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .visual-layout-status { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .visual-layout-assessment { border-color: var(--cm-line-2); border-radius: 0; background: var(--cm-s1); color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .media-playback-feedback { border-radius: var(--cm-radius); background: rgb(27 27 31 / .9); color: var(--cm-ink); }

/* ─── 7. Dialogs: photo bank, plans, family picker, material editor, PWA ─── */
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.photo-bank, .account-plans, .schedule-family-picker, .scheduled-material-editor, .cm-pwa-dialog, .brand-owner-dialog) {
  border: 1px solid var(--cm-line-3); border-top: 2px solid var(--cm-ink); border-radius: var(--cm-radius); background: var(--cm-s1); color: var(--cm-ink);
  box-shadow: none; font-family: var(--cm-font);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) body .scheduled-material-editor { border-radius: var(--cm-radius); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.photo-bank, .account-plans, .schedule-family-picker, .scheduled-material-editor, .cm-pwa-dialog, .brand-owner-dialog)::backdrop { background: var(--cm-scrim); backdrop-filter: none; -webkit-backdrop-filter: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.photo-bank, .account-plans, .scheduled-material-editor, .cm-pwa-dialog) h2,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .schedule-family-picker h2, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-owner-dialog h2 { color: var(--cm-ink); font: 600 24px/1.12 var(--cm-font); letter-spacing: -.03em; }
/* Eyebrows: where the dialog lives in the app. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.photo-bank__heading, .account-plans__top) h2::before {
  display: block; margin: 0 0 10px; color: var(--cm-ink-3); font: 500 var(--cm-micro)/1 var(--cm-mono); letter-spacing: .12em; text-transform: uppercase;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__heading h2::before { content: "Studio / Bank"; content: "Studio / Bank" / ""; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__top h2::before { content: "Konto / Plan"; content: "Konto / Plan" / ""; }
html.has-chat-app[lang="en"]:not(#cm-theme):not(#cm-noir) .account-plans__top h2::before { content: "Account / Plan"; content: "Account / Plan" / ""; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.photo-bank__button, .account-plans__close, .account-plans__retry, .account-plans__refresh, .cm-pwa-secondary, .schedule-family-picker button, .brand-owner-dialog button) {
  min-height: 44px; border: 1px solid var(--cm-line-3); border-radius: var(--cm-radius); background: transparent; color: var(--cm-ink); font-family: var(--cm-font); font-weight: 600 !important; box-shadow: none;
}
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.photo-bank__button, .account-plans__refresh):not(:disabled):hover { background: var(--cm-s2); } }
/* Close = a 44 × 44 X in the corner; it no longer competes with the title. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.photo-bank__close, .account-plans__close) {
  position: relative; flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0;
  border: 1px solid var(--cm-line-2); background: transparent; color: var(--cm-ink); font-size: 0 !important; line-height: 0;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.photo-bank__close, .account-plans__close)::before {
  content: ""; position: absolute; inset: 11px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.photo-bank__close, .account-plans__close):hover { border-color: var(--cm-line-3); background: var(--cm-s2); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__header, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__top { align-items: flex-start; }
/* Primary action filled, secondary ghost. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.photo-bank__button--primary, .cm-pwa-action), html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-owner-dialog button:not(#brand-owner-close),
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__error + .photo-bank__button, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans .account-plans__retry { border-color: var(--cm-ink); background: var(--cm-ink); color: var(--cm-bg); }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.photo-bank__button--primary, .photo-bank__error + .photo-bank__button, .account-plans__retry):not(:disabled):hover { background: #fff; } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__toolbar .photo-bank__button, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__refresh { min-height: 44px; padding: 0 14px; font-size: 13px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__brand, html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__status, html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__date, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__intro, html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-pwa-note, html.has-chat-app:not(#cm-theme):not(#cm-noir) .schedule-family-picker__context { color: var(--cm-ink-3); }
/* One error style for every dialog. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__error:not(:empty), html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__status:not(:empty):has(~ .account-plans__retry:not([hidden])) {
  margin: 16px 0 12px; padding: 12px 14px; border: 0; border-left: 2px solid var(--cm-danger); border-radius: 0;
  background: rgb(255 77 77 / .06); color: var(--cm-ink); font: 400 13px/1.5 var(--cm-font);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__image-error { color: var(--cm-danger); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__card { padding: 6px; border: 1px solid var(--cm-line-2); border-radius: 0; background: var(--cm-bg); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__thumbnail, html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__full-image, html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__video-stage { border-radius: 0; background: var(--cm-well); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__caption { color: var(--cm-ink); font-weight: 600; }
/* A bank card: the photo, its date and one "Użyj"; the × to delete it sits on the photo's corner (as on schedule
   materials): a 26 px graphite square, the whole 44 × 44 corner is the target. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__card .photo-bank__date { margin: 8px 2px 8px; font: 400 var(--cm-micro)/1.3 var(--cm-mono); letter-spacing: .04em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__delete { top: 6px; right: 6px; border-radius: 0; color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__delete-icon { border: 1px solid rgb(255 255 255 / .22); border-radius: var(--cm-radius); background: rgb(27 27 31 / .86); color: var(--cm-ink); font: 300 18px/1 var(--cm-font); }
@media (hover: hover) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__delete:not(:disabled):hover .photo-bank__delete-icon { border-color: var(--cm-danger); color: var(--cm-danger); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__delete:focus-visible { outline: 2px solid var(--cm-ink); outline-offset: -2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__play-icon, html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__play { border-radius: var(--cm-radius); background: rgb(27 27 31 / .86); color: var(--cm-ink); box-shadow: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__video-badge { border-radius: 0; background: rgb(27 27 31 / .86); color: var(--cm-ink); font: 500 var(--cm-micro)/1.3 var(--cm-mono); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__pending-card { border: 1px solid var(--cm-line-3); border-radius: 0; background: var(--cm-s2); box-shadow: inset 2px 0 0 var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .schedule-family-picker button { background: var(--cm-s2); color: var(--cm-ink); text-align: left; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .schedule-family-picker .schedule-family-picker__cancel { border-color: transparent; background: transparent; color: var(--cm-ink-3); text-align: center; }

/* Material editor: the whole content scrolls, the footer stays; Cancel and Save share it. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor { padding: 24px 24px 0; overflow-y: auto; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor :is(button, input:not([type=range]):not([type=color])) { border-radius: 0; font-family: var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor input { accent-color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor label { color: var(--cm-ink-2); font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .12em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor__controls { padding-bottom: 20px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor__footer {
  position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin: 12px -24px 0; padding: 12px 24px max(12px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cm-line-2); background: var(--cm-s1);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor__footer > button { width: 100%; min-height: 48px; margin: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor__footer .scheduled-material-editor__save-overlay,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor__footer .scheduled-material-editor__save-overlay[data-preview-save-ready] {
  position: static; z-index: auto; display: block; width: auto; visibility: visible; pointer-events: auto;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor .scheduled-material-editor__save {
  width: 100%; min-height: 48px; margin: 0; padding: 10px 16px; border: 1px solid var(--cm-ink); border-radius: 0;
  background: var(--cm-ink); color: var(--cm-bg); box-shadow: none; font: 600 14px/1.2 var(--cm-font);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor .scheduled-material-editor__save:disabled { opacity: 1; border-color: var(--cm-line-2); background: var(--cm-s3); color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor__hint { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor__error { color: var(--cm-danger); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor__error:not(:empty) { padding: 12px 14px; border-left: 2px solid var(--cm-danger); background: rgb(255 77 77 / .06); color: var(--cm-ink); font-size: 13px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor :is(input:not([type=range]):not([type=color]):not([type=checkbox]), textarea, select) { min-height: 44px; border: 1px solid var(--cm-ctl); border-radius: 0; background: var(--cm-bg); color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor :is(input:not([type=range]):not([type=color]):not([type=checkbox]), textarea, select):focus-visible { border-color: var(--cm-ink); outline: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor button:not(.scheduled-material-editor__save) { border: 1px solid var(--cm-line-3); background: transparent; color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor p, html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor [class*="__hint"] { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor__stage { border-radius: 0; background: var(--cm-well); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor input[type=color] { height: 44px; padding: 4px; border: 1px solid var(--cm-ctl); border-radius: 0; background: var(--cm-bg); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor input[type=color]::-webkit-color-swatch { border: 0; border-radius: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor input[type=color]::-moz-color-swatch { border: 0; border-radius: 0; }
/* Sliders: a 2 px track (filled white to the value) under a 4 × 20 white bar; the whole 44 px row stays the target.
   The material editor opens from the schedule, so it carries no mango. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor input[type=range] {
  --p: 0%; -webkit-appearance: none; appearance: none; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer;
  background: linear-gradient(90deg, var(--cm-ink) 0 var(--p), var(--cm-line-3) 0) center / 100% 2px no-repeat;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor input[type=range]::-webkit-slider-runnable-track { height: 44px; border: 0; background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor input[type=range]::-moz-range-track { height: 2px; border: 0; background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 4px; height: 20px; margin-top: 12px; border: 0; border-radius: 0; background: var(--cm-ink); box-shadow: 0 0 0 2px var(--cm-s1);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor input[type=range]::-moz-range-thumb { width: 4px; height: 20px; border: 0; border-radius: 0; background: var(--cm-ink); box-shadow: 0 0 0 2px var(--cm-s1); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-material-editor input[type=range]:focus-visible { outline: 2px solid var(--cm-ink); outline-offset: 2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-pwa-logo { border-radius: var(--cm-radius); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-pwa-close { border-radius: var(--cm-radius); background: transparent; color: var(--cm-ink); border: 1px solid var(--cm-line-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-pwa-status { border-radius: 0; background: var(--cm-bg); border: 1px solid var(--cm-line-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-owner-dialog input { border: 1px solid var(--cm-ctl); border-radius: 0; background: var(--cm-bg); color: var(--cm-ink); }

/* Plans and limits */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__eyebrow { color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .14em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__summary, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__card, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__shared { border: 1px solid var(--cm-line-2); border-radius: 0; background: var(--cm-bg); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__card.is-featured { border: 1px solid var(--cm-line-3); box-shadow: inset 0 2px 0 var(--cm-ink); padding: 24px 20px 20px; }
/* Credits: a flat horizontal meter (available · in progress · used) with a mono scale, number on the left. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__balance { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 24px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__donut {
  display: flex; flex-direction: column; align-items: stretch; width: 100%; height: auto; margin: 0; padding: 0;
  border-radius: 0; background: none;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__donut::before {
  content: ""; order: 2; display: block; height: 10px; margin: 14px 0 0;
  background: linear-gradient(90deg, var(--cm-ink) 0 var(--credits-remaining), var(--cm-ink-3) var(--credits-remaining) var(--credits-pending-end), var(--cm-s3) var(--credits-pending-end) 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .04);
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__donut.is-unavailable::before { background: var(--cm-s3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__donut-center {
  order: 1; display: flex; flex-flow: row wrap; align-items: baseline; justify-content: flex-start; gap: 0 10px;
  width: auto; height: auto; padding: 0; border-radius: 0; background: none; color: var(--cm-ink-3); font-size: 13px;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__donut-center > span:first-child { flex: 0 0 100%; margin: 0 0 8px; font: 500 var(--cm-micro)/1 var(--cm-mono); letter-spacing: .12em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__donut-center strong {
  max-width: none; color: var(--cm-ink); font: 600 44px/1 var(--cm-font); letter-spacing: -.035em; text-align: left; font-variant-numeric: tabular-nums;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__donut.is-unlimited .account-plans__donut-center strong { font-size: 44px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__scale {
  order: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; padding-top: 6px;
  background: linear-gradient(var(--cm-line-3), var(--cm-line-3)) 0 0 / 1px 5px no-repeat, linear-gradient(var(--cm-line-3), var(--cm-line-3)) 50% 0 / 1px 5px no-repeat, linear-gradient(var(--cm-line-3), var(--cm-line-3)) 100% 0 / 1px 5px no-repeat;
  color: var(--cm-ink-3); font: 500 var(--cm-micro)/1 var(--cm-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__scale > span:nth-child(2) { text-align: center; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__scale > span:last-child { text-align: right; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__price strong { color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__balance-details h4 { font: 600 17px/1.2 var(--cm-font); letter-spacing: -.015em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__credit-stat dt, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__balance-total, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__purpose, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__price span, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__pending-note, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__cost-audit, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__tariff > p { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__credit-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; margin: 18px 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__credit-stat dt { display: flex; align-items: center; gap: 6px; white-space: nowrap; font: 500 var(--cm-micro)/1 var(--cm-mono); letter-spacing: .02em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__credit-stat dt::before { flex: 0 0 8px; width: 8px; height: 8px; margin: 0; border-radius: 0; background: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__credit-stat.is-used dt::before { box-sizing: border-box; background: var(--cm-s3); border: 1px solid var(--cm-line-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__credit-stat.is-pending dt::before { background: var(--cm-ink-3); }
html.has-chat-app:not([lang="en"]):not(#cm-theme):not(#cm-noir) .account-plans__credit-stat.is-used dt { font-size: 0; }
html.has-chat-app:not([lang="en"]):not(#cm-theme):not(#cm-noir) .account-plans__credit-stat.is-used dt::after { content: "Użyte"; content: "Użyte" / ""; font-size: var(--cm-micro); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__credit-stat dd { margin: 6px 0 0; color: var(--cm-ink); font: 600 28px/1 var(--cm-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__renewal, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__cost-audit summary { color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans p.account-plans__account-note { border-top-color: var(--cm-line); color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__tariff-list > div, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__comparison th, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__comparison td { border-bottom-color: var(--cm-line-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__tariff-list dd { color: var(--cm-ink); font: 500 13px/1.4 var(--cm-mono); font-variant-numeric: tabular-nums; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__tariff p.account-plans__free-note { border-left: 2px solid var(--cm-ink); background: var(--cm-s2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__comparison thead th { color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .1em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__comparison tr > :nth-child(3) { background: var(--cm-s2); box-shadow: inset 0 2px 0 var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__comparison tbody tr > :nth-child(3) { box-shadow: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__shared li::marker { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans button:focus-visible { outline: 2px solid var(--cm-ink); outline-offset: 2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans { font-family: var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__card li::before { color: var(--cm-ink); font-weight: 400; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__card li.is-unavailable::before { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__plan-note, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__explanation { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__action { border: 1px solid var(--cm-line-3); border-radius: var(--cm-radius); background: var(--cm-s2); color: var(--cm-ink-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__card.is-featured .account-plans__action { border-color: var(--cm-ink); background: var(--cm-ink); color: var(--cm-bg); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__billing-note { border-radius: 0; background: var(--cm-s2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__cost-services section { border-color: var(--cm-line-2); border-radius: 0; background: var(--cm-bg); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__cost-entry { border-top-color: var(--cm-line-2); }
/* Owner: real API money instead of credits (account-plans.js renderSpend). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend { display: grid; gap: 20px; min-width: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-head h4 { margin: 6px 0 12px; color: var(--cm-ink); font: 600 17px/1.2 var(--cm-font); letter-spacing: -.015em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-total strong { color: var(--cm-ink); font: 600 44px/1 var(--cm-font); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-total span { color: var(--cm-mango); font: 500 18px/1.2 var(--cm-font); font-variant-numeric: tabular-nums; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-since { margin: 10px 0 0; color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.6 var(--cm-mono); letter-spacing: .02em; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--cm-line-2); background: var(--cm-line-2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-periods > div { min-width: 0; padding: 12px; background: var(--cm-s1); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-periods dt { color: var(--cm-ink-3); font: 500 var(--cm-micro)/1 var(--cm-mono); letter-spacing: .1em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-periods dd { margin: 8px 0 0; color: var(--cm-ink); font: 600 20px/1.1 var(--cm-font); letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-periods dd.account-plans__spend-pln { margin-top: 4px; color: var(--cm-ink-3); font: 500 12px/1.2 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-certainty { display: grid; gap: 7px; margin: 0; padding: 0; color: var(--cm-ink-2); font-size: 13px; line-height: 1.45; list-style: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-certainty li { display: flex; gap: 9px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-certainty li::before { content: ""; flex: 0 0 8px; height: 8px; margin-top: 5px; background: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-certainty li.is-estimated::before { background: var(--cm-mango); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-certainty li.is-partial::before { background: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-certainty li.is-unknown::before { box-sizing: border-box; border: 1px solid var(--cm-line-3); background: transparent; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-table { width: 100%; border-collapse: collapse; font-size: 13px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-table caption { margin-bottom: 8px; color: var(--cm-ink); font: 600 15px/1.3 var(--cm-font); text-align: left; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-table th, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-table td { padding: 9px 0 9px 10px; border-bottom: 1px solid var(--cm-line-2); color: var(--cm-ink-2); text-align: right; vertical-align: top; font-variant-numeric: tabular-nums; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-table thead th { color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .1em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-table th[scope="row"], html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-table thead th:first-child { padding-left: 0; text-align: left; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-table th[scope="row"] span { display: block; color: var(--cm-ink); font-weight: 500; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-table th[scope="row"] small { display: block; margin-top: 3px; color: var(--cm-ink-3); font: 500 11px/1.3 var(--cm-mono); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-table td:nth-child(3) { color: var(--cm-ink); font-weight: 600; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-days h5 { margin: 0 0 8px; color: var(--cm-ink); font: 600 15px/1.3 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-days ol, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-actions ol { margin: 0; padding: 0; list-style: none; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-days li { display: grid; grid-template-columns: minmax(88px, auto) minmax(40px, 1fr) auto auto; align-items: center; gap: 10px; padding: 5px 0; font-size: 12px; font-variant-numeric: tabular-nums; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-bar { height: 8px; background: linear-gradient(var(--cm-mango), var(--cm-mango)) 0 0 / var(--spend-share, 2%) 100% no-repeat, var(--cm-s2); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-day, html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-count { color: var(--cm-ink-3); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-amount { color: var(--cm-ink); font-weight: 600; text-align: right; white-space: nowrap; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-count { min-width: 3.5em; text-align: right; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-actions summary { color: var(--cm-ink-2); font-size: 13px; font-weight: 600; cursor: pointer; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-actions ol { margin-top: 8px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-actions li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--cm-line-2); font-size: 12px; font-variant-numeric: tabular-nums; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-what { min-width: 0; color: var(--cm-ink-2); overflow-wrap: anywhere; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-note { margin: 0; color: var(--cm-ink-3); font-size: 12px; line-height: 1.55; }
@media (max-width: 520px) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-total strong { font-size: 36px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-periods { grid-template-columns: minmax(0, 1fr); }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-periods > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding: 10px 12px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-periods dd { margin: 0; font-size: 17px; text-align: right; white-space: nowrap; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-periods dd.account-plans__spend-pln { grid-column: 2; margin: 0; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; padding: 11px 0; border-bottom: 1px solid var(--cm-line-2); }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-table th[scope="row"] { grid-column: 1 / -1; padding: 0 0 4px; border: 0; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-table td { padding: 0; border: 0; text-align: left; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--cm-ink-3); font: 500 var(--cm-micro)/1.3 var(--cm-mono); letter-spacing: .08em; text-transform: uppercase; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-days li { grid-template-columns: minmax(78px, auto) minmax(32px, 1fr) auto; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-count { display: none; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-actions li { grid-template-columns: minmax(0, 1fr) auto; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__spend-actions .account-plans__spend-day { grid-column: 1 / -1; }
}
@media (max-width: 700px) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans { border-radius: var(--cm-radius); } }

/* ─── 7b. Loading: the mango everywhere ───────────────────────────────────── */
/* Every waiting state shows the animated mango (.mango-loading::before from lab-theme.css; its static logo under
   reduced motion). On graphite it is one fixed size per context and never shares a line with a second glyph:
   status lines get one mono line (30 px mango), buttons swap their icon for a 20 px mango, overlays centre it. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.chat-studio__phase, .chat-studio__copy-progress, .chat-studio__video-status, .studio-bank-status, .photo-bank__status, .brand-family__status, .brand-copy-status, .account-plans__status, .brand-offer-chat__status, .chat-app__notice, .scheduled-switch-status).mango-loading:not([hidden]) {
  display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--cm-ink-2);
  font: 500 var(--cm-micro)/1.45 var(--cm-mono); letter-spacing: .06em; text-transform: uppercase; text-align: left;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.chat-studio__phase, .chat-studio__copy-progress, .chat-studio__video-status, .studio-bank-status, .photo-bank__status, .brand-family__status, .brand-copy-status, .account-plans__status, .brand-offer-chat__status, .chat-app__notice, .scheduled-switch-status).mango-loading::before {
  flex: none; width: 30px; height: 30px; margin: 0;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio__copy-progress.mango-loading { justify-content: center; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__notice.mango-loading { margin: 10px 0 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .account-plans__status.mango-loading { margin: 16px 0; }
/* Buttons: the label stays, a 20 px mango sits before it (narrow bank-card buttons show the mango alone). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.photo-bank__button, .account-plans__refresh, .account-plans__retry, .brand-chat__button, .brand-family__button, .chat-studio__button:not(.chat-studio__choose-template), .day-close).mango-loading {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.photo-bank__button, .account-plans__refresh, .account-plans__retry, .brand-chat__button, .brand-family__button, .chat-studio__button:not(.chat-studio__choose-template), .day-close).mango-loading::before {
  flex: none; width: 20px; height: 20px; margin: 0;
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__card .photo-bank__button.mango-loading { font-size: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank__card .photo-bank__button.mango-loading::before { width: 22px; height: 22px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) #brand-chat-dialog .chat-studio__preview-save > .chat-studio__button.mango-loading::before { width: 24px; height: 24px; }
/* Video playback waiting (studio, photo bank): a dark square plate over the frame, mango + mono line. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .media-playback-feedback { border: 1px solid rgb(255 255 255 / .18); border-radius: 0; background: rgb(27 27 31 / .9); color: var(--cm-ink); font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .06em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .media-playback-feedback.mango-loading::before { width: 30px; height: 30px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .media-playback-feedback.is-error { color: var(--cm-ink); box-shadow: inset 2px 0 0 var(--cm-danger); }
/* Editor: while A文 (translate / check) or the photo colours work, the tile itself shows the mango instead of a
   dimmed label, and the status line under the canvas carries it too. These tiles are chrome, not artwork. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > :is(.canvas-visual-layout, .canvas-photo-colors)[aria-busy="true"] { opacity: 1; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > :is(.canvas-visual-layout, .canvas-photo-colors)[aria-busy="true"] > span { visibility: hidden; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > :is(.canvas-visual-layout, .canvas-photo-colors)[aria-busy="true"]::before {
  content: ""; position: absolute; top: 7px; left: 50%; width: 24px; height: 24px; translate: -50% 0;
  background: var(--mango-loader-image, url("/assets/brand/cosmomango-loader.svg")) center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > :is(.canvas-visual-layout, .canvas-photo-colors)[aria-busy="true"]::before { background-image: var(--mango-static-image, url("/assets/brand/cosmomango-logo.svg")); }
}
html.has-chat-app:not(#cm-theme):not(#cm-noir) .visual-layout-bar:has(> button:not([hidden])) .visual-layout-status::before {
  content: ""; display: inline-block; width: 26px; height: 26px; margin: -4px 10px -4px 0; vertical-align: middle;
  background: var(--mango-loader-image, url("/assets/brand/cosmomango-loader.svg")) center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) { html.has-chat-app:not(#cm-theme):not(#cm-noir) .visual-layout-bar:has(> button:not([hidden])) .visual-layout-status::before { background-image: var(--mango-static-image, url("/assets/brand/cosmomango-logo.svg")); } }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .visual-layout-bar { gap: 8px; padding: 10px 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .visual-layout-bar button { min-height: 44px; border-radius: 0; font: 600 13px/1.2 var(--cm-font); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .visual-layout-status { color: var(--cm-ink-2); font: 400 13px/1.5 var(--cm-font); }
/* The schedule family picker ("Dla których produktów tworzymy?") opens from a day: mono context line, the way
   back as the shared mono label. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .schedule-family-picker__context { font: 500 var(--cm-micro)/1.4 var(--cm-mono); letter-spacing: .1em; text-transform: uppercase; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .schedule-family-picker .schedule-family-picker__cancel { min-height: 44px; color: var(--cm-ink-2); font: 500 11px/1.2 var(--cm-mono) !important; letter-spacing: .08em; text-transform: uppercase; }

/* ─── 8. Tap feedback, focus, motion ──────────────────────────────────────── */
html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-interaction-feedback { border-color: rgb(242 241 237 / .4) !important; background: rgb(242 241 237 / .08) !important; }
/* Focus: one white ring everywhere (>= 12:1 on every graphite surface); mango only on the canvas tools, which sit on the artwork. */
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(button, a, input, select, textarea, summary, [tabindex]):not(.story-frame *):focus-visible { outline: 2px solid var(--cm-ink); outline-offset: 2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat :is(button, input, select, textarea, summary):focus-visible,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio :is(button, input):focus-visible, html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-composer button:focus-visible,
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.chat-app__header, .chat-app__drawer, .chat-app__style-actions) :is(button, a):focus-visible,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule button:focus-visible, html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading.day-is-pinned:focus-visible,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-family__button:focus-visible, html.has-chat-app:not(#cm-theme):not(#cm-noir) .language-switcher button:focus-visible,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .translate-menu button:focus-visible, html.has-chat-app:not(#cm-theme):not(#cm-noir) .photo-bank button:focus-visible,
html.has-chat-app:not(#cm-theme):not(#cm-noir) .schedule-family-picker button:focus-visible, html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-pwa-entry:focus-visible, html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-pwa-dialog button:focus-visible { outline: 2px solid var(--cm-ink); outline-offset: 2px; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state]:focus-visible { outline: 2px solid var(--cm-ink); outline-offset: -2px; }
/* The schedule carries no mango at all: its focus ring is white (>= 12:1 on every graphite surface). */
html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule :is(button, a, [tabindex]):focus-visible, html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading.day-is-pinned:focus-visible { outline-color: var(--cm-ink); }
html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.day-stat, .day-action, .chat-studio__slide, .studio-start-button, .scheduled-format, .translate-menu button, .language-switcher button, .brand-family__button, .chat-app__style-actions > button, .studio-industry-choice):focus-visible { position: relative; z-index: 3; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .story-frame > :is(.canvas-add-text, .canvas-cta-toggle, .canvas-undo, .canvas-brand-style):focus-visible { outline: 2px solid var(--cm-mango); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.day-action, .day-download, .day-publish, .chat-studio__button, .brand-chat__button, .studio-start-button, .studio-industry-choice, .chat-studio__slide, .brand-family__button, .chat-app__nav-item, .language-switcher button, .chat-studio__choose-template) {
    transition: opacity 160ms var(--cm-ease), scale 120ms var(--cm-ease);
  }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) :is(.day-action, .day-download, .day-publish, .chat-studio__button, .brand-chat__button, .studio-start-button, .chat-studio__slide, .brand-family__button, .chat-studio__choose-template):not(:disabled):active { scale: .985; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-item.day-is-expanded > .day-body { animation: cm-rise 200ms var(--cm-ease) both; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer[open] { animation: cm-drawer-in 220ms var(--cm-ease) both; }
  html.has-chat-app.has-desktop-navigation:not(#cm-theme):not(#cm-noir) .chat-app__drawer[open] { animation: none; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .cm-interaction-feedback { animation: cm-tap 220ms var(--cm-ease) both !important; }
}
@keyframes cm-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes cm-drawer-in { from { opacity: .4; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes cm-tap { from { opacity: 1; } to { opacity: 0; } }

/* ─── 9. Narrow phones ────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .app-shell { padding: 10px var(--cm-gutter) 32px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__header { padding: 7px 12px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app .brand-chat__conversation { padding: 0 16px max(12px, env(safe-area-inset-bottom)); }
}
@media (max-width: 370px) {
  :root { --cm-gutter: 12px; --stat-w: 44px; --row-pad-r: 6px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading .day-summary { gap: 9px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] { gap: 4px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-number { font-size: 28px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-date { font-size: 14px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading .day-full-date { font-size: 10px; letter-spacing: 0; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-stat { gap: 4px; font-size: 12px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-stat-icon { width: 12px; flex-basis: 12px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-legend { font-size: 9px; letter-spacing: .01em; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-action { font-size: 12px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-materials .day-downloads { --tile-h: 272px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > button { padding-inline: 5px; font-size: 11.5px; letter-spacing: -.01em; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools button { padding-inline: 6px; font-size: 11.5px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-tools .day-caption-save { min-width: 76px; padding: 0 14px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-day-number { font-size: 28px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-day-words { padding-inline: 10px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .scheduled-day-words strong { font-size: 14.5px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .studio-start-heading, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__knowledge-question { font-size: 24px; }
  /* The step rail keeps air between its five names; a step's row keeps the filled answer on one line and lets the
     quiet "Zostaw … szablonu" take two. */
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat__step-name, html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__step .brand-chat__step-edit { letter-spacing: .03em; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__style .brand-chat__actions > .brand-chat__button:not(.brand-chat__button--quiet) { padding: 0 12px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__style .brand-chat__actions > .brand-chat__button--quiet:not(.brand-chat__back) { padding-inline: 6px; font-size: 12px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat .brand-chat__button--quiet.brand-chat__back { padding: 0 6px; }
  html .sandbox-banner { padding-right: 186px; }
}
/* 320 px class: legend labels, long weekday names and the create tabs keep clear air. */
@media (max-width: 340px) {
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading .day-label { min-width: 0; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-date { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; letter-spacing: -.02em; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-action { padding-inline: 4px; font-size: 11.5px; letter-spacing: -.01em; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule .day-actions .day-action::before { display: none; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions > button { padding-inline: 3px; font-size: 10.5px; letter-spacing: -.015em; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions[role="toolbar"] { margin-inline: -5px; }
}

/* ─── 10. Desktop ─────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  :root { --cm-micro: 11px; --stat-w: 56px; --row-pad-r: 14px; --cm-gutter: 24px; }
  html.has-chat-app.has-desktop-navigation:not(#cm-theme):not(#cm-noir) .chat-app__drawer {
    border-right: 1px solid var(--cm-line-2); background: var(--cm-bg-deep); box-shadow: none;
  }
  html.has-chat-app.has-desktop-navigation:not(#cm-theme):not(#cm-noir) .chat-app__nav-item { gap: 14px; min-height: 44px; padding: 11px 10px; border-radius: 0; font-size: 14px; }
  html.has-chat-app.has-desktop-navigation:not(#cm-theme):not(#cm-noir) .chat-app__nav-item[aria-current='page'] { background: transparent; color: var(--cm-ink); box-shadow: none; }
  html.has-chat-app.has-desktop-navigation:not(#cm-theme):not(#cm-noir) :is(.chat-app__drawer-footer .cm-pwa-entry, .chat-app__drawer .language-switcher) { min-height: 44px; font-size: 14px; }
  html.has-chat-app.has-desktop-navigation:not(#cm-theme):not(#cm-noir) .chat-app__header:not(.is-scheduled) { grid-template-columns: minmax(0, 1fr) 44px; }
  html.has-chat-app.has-desktop-navigation:not(#cm-theme):not(#cm-noir) .chat-app__wordmark { padding-left: 44px; }
  html .sandbox-banner { padding-right: 216px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .app-shell { padding-top: 8px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .social-plan-header { margin: 48px 0 44px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-schedule, html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading { --num-w: 84px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] { min-height: 88px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-number { font-size: 36px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state]:has(.day-today-kicker:not([hidden])) .day-number { padding-bottom: 16px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-today-kicker { bottom: 12px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading .day-summary { gap: 16px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading .day-label { gap: 7px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-date { font-size: 18px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading .day-full-date { font-size: 12px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-stat { height: 48px; gap: 7px; font-size: 14px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state] .day-stat-icon { width: 15px; height: 17px; flex-basis: 15px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-legend { margin-bottom: 10px; letter-spacing: .04em; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .day-heading[data-state]:is([data-state="published"], [data-state="overdue"])::after { padding: 4px 10px 4px 25px; background-position: 9px 50%; background-size: 11px 11px; font-size: 12px; }
  /* Desktop: taller tiles; the toolbar keeps its small tools together at the left instead of spreading them. */
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-materials .day-downloads { --tile-h: 432px; gap: 12px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-material-tools .day-material-actions[role="toolbar"] { justify-content: flex-start; gap: 10px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) #day-schedule .day-caption-panel { max-width: 640px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .brand-chat--app[data-knowledge='true'] .brand-chat__history { scrollbar-gutter: stable both-edges; padding-inline: 5px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer #brand-picker::before { margin-bottom: 10px; }
  /* The sidebar is 280 px: a brand card stays narrower than the space between the rail's two fades. */
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__drawer .brand-picker__brands .brand-picker__object { max-width: 196px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__header { padding: 8px 24px; }
  html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-app__page-header { background-image: radial-gradient(rgb(255 255 255 / .06) 1px, transparent 1.2px); background-size: 12px 12px; background-position: 6px 6px; }
}

html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > #adaptive-layout-run > span { font-size: 10px; letter-spacing: 0; }
html.has-chat-app:not(#cm-theme):not(#cm-noir) .chat-studio-canvas-host .story-frame > #adaptive-layout-run > small { font-size: 9px; }