/* Funk's Agent Studio.
   Desktop (1025px and up) is the owner's comp, 2576 x 1438, scaled to fit the
   window: --u is one comp pixel, so sizes below are the numbers read off the
   design. Phones get their own layout with one room on screen at a time. */

@font-face {
  font-family: "Roboto Variable";
  src: url("../art/fonts/roboto-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@property --fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --vx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --vy { syntax: "<percentage>"; inherits: false; initial-value: 50%; }

:root {
  --u: 0.68px;
  --font: "Roboto Variable", Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ink: #1e1b3a;
  --ink-soft: #2a2746;
  --ink-muted: #615d80;
  --muted: #615d80;
  --page: #e3def9;
  --panel: #f9f8fe;
  --row: #f1f0f7;
  --row-hover: #ebe8f7;
  --row-selected: #e6e2f6;
  --line: #dbd7e9;
  --purple: #6c4fc6;
  --purple-deep: #4a2fb5;
  --orange: #ff8a2b;
  --red: #ee403c;
  --green: #18a867;
  --link: #2a7de1;
  --room: #7b61d9;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-panel: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgb(72 52 150 / 0.07), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgb(72 52 150 / 0.1);
  --peek: clamp(240px, 36dvh, 320px);
  --sheet-h: var(--peek);
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 1025px) {
  :root { --u: clamp(0.36px, min(100vw / 2576, 100vh / 1438), 1.15px); }
  @supports (height: 100dvh) {
    :root { --u: clamp(0.36px, min(100vw / 2576, 100dvh / 1438), 1.15px); }
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--page); overflow: hidden; overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: not-allowed; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: none; }
strong { font-weight: 700; }
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--purple-deep); outline-offset: 2px; }
::selection { background: var(--purple); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ================= shell ================= */

.app { position: relative; isolation: isolate; height: 100vh; height: 100dvh; overflow: hidden; }

.panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-radius: calc(22 * var(--u)); background: var(--panel); box-shadow: var(--shadow-panel); }
.panel__title { flex: none; display: flex; align-items: center; height: calc(63 * var(--u)); padding: calc(10 * var(--u)) calc(20 * var(--u)) 0; font-size: calc(32 * var(--u)); font-weight: 700; letter-spacing: -0.005em; }

/* ================= header ================= */

.header { position: relative; background: linear-gradient(180deg, #b9aff3 0%, #b2a7ef 100%); }
.brand { display: flex; align-items: center; min-width: 0; }
.brand__logo { flex: none; border-radius: 50%; object-fit: cover; transition: transform 0.6s var(--ease-spring); }
.brand:hover .brand__logo { transform: rotate(-12deg) scale(1.06); }
.brand__text { min-width: 0; }
.brand__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__campaign { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.brand__edit { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; letter-spacing: inherit; }
.brand__edit:hover { text-decoration: underline; text-underline-offset: 0.16em; }
.mode-chip { flex: none; font-weight: 700; letter-spacing: 0.04em; border-radius: 999px; background: rgb(255 255 255 / 0.42); color: #3d2f7a; }
.mode-chip.live { background: var(--green); color: #fff; }
.gear { flex: none; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 0.3); color: inherit; transition: background-color 0.2s ease, transform 0.5s var(--ease-out); }
.gear:hover { background: rgb(255 255 255 / 0.5); transform: rotate(40deg); }
.gear svg { width: 56%; height: 56%; }

.control { display: flex; flex-direction: column; min-width: 0; }
.meter__bar { position: relative; overflow: hidden; border-radius: 999px; }
.meter__fill { position: absolute; inset: 0 auto 0 0; transition: width 0.9s var(--ease-out); }
.meter__value { position: relative; display: flex; align-items: center; height: 100%; font-variant-numeric: tabular-nums; white-space: pre; }
.speed__track { position: relative; border-radius: 999px; }
.speed__option { position: relative; z-index: 1; display: grid; place-items: center; border-radius: 999px; line-height: 1; transition: color 0.25s ease, background-color 0.25s ease; }
.cta { position: relative; flex: none; overflow: hidden; font-weight: 700; white-space: nowrap; transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), filter 0.25s ease; }

/* ================= crew ================= */

.crew__scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #cfc8ee transparent; }
.crew__list { display: flex; flex-direction: column; flex: none; gap: calc(2 * var(--u)); }
.crew__list + .crew__list { margin-top: calc(74 * var(--u)); }
.crew__list--swarm { position: relative; }
.crew__list--swarm::before { content: attr(aria-label); position: absolute; left: calc(20 * var(--u)); bottom: calc(100% + 12 * var(--u)); color: var(--ink-muted); font-size: max(10.5px, calc(19 * var(--u))); font-weight: 600; }
.crew__item { display: flex; flex: none; }
.crew-row { position: relative; flex: 1; display: grid; grid-template-columns: calc(72 * var(--u)) minmax(0, 1fr); align-items: center; column-gap: calc(14 * var(--u)); min-height: calc(104 * var(--u)); padding: calc(11 * var(--u)) calc(21 * var(--u)) calc(11 * var(--u)) calc(20 * var(--u)); overflow: hidden; background: var(--row); text-align: left; transition: background-color 0.25s ease; }
.crew-row::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: calc(6 * var(--u)); background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s var(--ease-out); }
.crew-row[data-working]::before, .crew-row:hover::before, .crew-row:focus-visible::before, .crew-row[aria-pressed="true"]::before { transform: scaleX(1); }
.crew-row:hover { background: var(--row-hover); }
.crew-row[aria-pressed="true"] { background: var(--row-selected); }
.crew-row:focus-visible { outline-offset: -3px; }
.crew-row__flash { position: absolute; inset: 0; background: var(--accent); opacity: 0; animation: row-flash 1.6s ease-out; pointer-events: none; }
.crew-row__avatar { position: relative; display: block; width: calc(72 * var(--u)); height: calc(72 * var(--u)); border-radius: 50%; background: var(--accent); object-fit: cover; overflow: hidden; transition: transform 0.4s var(--ease-spring); }
.crew-row__avatar.is-drawn svg, .av.is-drawn svg, .pin__img.is-drawn svg { display: block; width: 100%; height: 100%; }
.crew-row:hover .crew-row__avatar { transform: scale(1.07) rotate(-4deg); }
.crew-row__body { position: relative; display: flex; flex-direction: column; min-width: 0; }
.crew-row__name { font-size: max(11.5px, calc(22 * var(--u))); font-weight: 700; line-height: max(1.2em, calc(26 * var(--u))); }
.crew-row__line { overflow: hidden; color: var(--ink-soft); font-size: max(10.5px, calc(19 * var(--u))); line-height: max(1.2em, calc(24.5 * var(--u))); letter-spacing: 0.01em; text-overflow: ellipsis; white-space: nowrap; }
.crew-row__status:empty { display: none; }
.crew-row[data-pose="error"] .crew-row__status { color: #c3272b; font-weight: 600; }
.crew-row[data-pose="done"] .crew-row__status { color: #13744a; }
.crew-row__meta { display: flex; justify-content: space-between; gap: calc(8 * var(--u)); font-variant-numeric: tabular-nums; }
.crew-row__meta > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crew-row__meta > :last-child { flex: none; }
/* a fourth line (what they are doing right now) fits in the same row height */
.crew-row[data-lines="4"] { padding-block: calc(6 * var(--u)); }
.crew-row[data-lines="4"] .crew-row__line { line-height: max(1.12em, calc(22 * var(--u))); }
.crew-row[data-lines="4"] .crew-row__name { line-height: calc(25 * var(--u)); }

/* ================= approval queue ================= */

.queue .panel__title { height: calc(74 * var(--u)); padding: 0 calc(19 * var(--u)); }
.queue__scroll { flex: 1; min-height: 0; padding: 0 calc(19 * var(--u)) calc(6 * var(--u)) calc(18 * var(--u)); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #cfc8ee transparent; }
.queue__list { display: flex; flex-direction: column; }
.queue__empty { display: grid; justify-items: center; gap: calc(12 * var(--u)); padding: calc(48 * var(--u)) calc(12 * var(--u)); color: var(--ink-muted); font-size: max(11px, calc(19 * var(--u))); line-height: 1.35; text-align: center; }
.queue__empty svg { width: calc(56 * var(--u)); height: calc(56 * var(--u)); min-width: 30px; min-height: 30px; padding: calc(13 * var(--u)); border-radius: 50%; background: #d9f4e7; color: var(--green); }

.post { padding-bottom: calc(19 * var(--u)); }
.post:last-child { padding-bottom: calc(8 * var(--u)); }
.post__card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "media media" "text text" "hint hint" "actions actions"; align-items: center; column-gap: calc(9 * var(--u)); padding: calc(11 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)); border: calc(1.5 * var(--u)) solid #e5e1f1; border-radius: calc(16 * var(--u)); background: #fff; box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgb(72 52 150 / 0.06); transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s ease; }
.post[data-platform="x"] .post__card { grid-template-areas: "icon title" "icon text" ". media" "hint hint" "actions actions"; }
.post__icon { grid-area: icon; align-self: start; width: calc(33 * var(--u)); height: calc(33 * var(--u)); }
.post[data-platform="x"] .post__icon { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.post__icon svg { display: block; width: 100%; height: 100%; }
.post__title { grid-area: title; display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0; font-size: max(11px, calc(20 * var(--u))); font-weight: 600; line-height: calc(26 * var(--u)); }
.post__title > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post__chip { flex: none; margin-left: auto; padding: 0 calc(9 * var(--u)); border-radius: 999px; background: #eceaf4; color: #4d4870; font-size: max(9.5px, calc(15 * var(--u))); font-weight: 600; line-height: calc(24 * var(--u)); white-space: nowrap; }
.post[data-state="published"] .post__chip { background: #d7f5e6; color: #0f6a44; }
.post[data-state="scheduled"] .post__chip, .post[data-state="publishing"] .post__chip, .post[data-state="approved"] .post__chip { background: #dfeaff; color: #2a4fa8; }
.post[data-state="failed"] .post__chip, .post[data-state="canceled"] .post__chip, .post[data-state="rejected"] .post__chip { background: #ffe1e1; color: #b3262a; }
.post[data-state="ready"] .post__chip { background: #fff0cf; color: #7d5200; }
.post__text { grid-area: text; margin-top: calc(9.5 * var(--u)); color: var(--ink-soft); font-size: max(10.5px, calc(19 * var(--u))); line-height: max(1.22em, calc(23 * var(--u))); overflow-wrap: anywhere; }
.post[data-platform="x"] .post__text { margin-top: calc(2 * var(--u)); margin-right: calc(-5 * var(--u)); line-height: max(1.2em, calc(22 * var(--u))); }
.post__text--sound { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(10 * var(--u)); }
.post__note { flex: none; width: calc(27 * var(--u)); height: calc(27 * var(--u)); color: #9a5cf0; }
.post__more { display: block; color: var(--link); text-decoration: underline transparent; text-underline-offset: 0.16em; transition: text-decoration-color 0.2s ease; }
.post__more:hover { color: #1663c4; text-decoration-color: currentColor; }
.post__hint { grid-area: hint; margin-top: calc(8 * var(--u)); color: var(--ink-muted); font-size: max(10px, calc(17 * var(--u))); line-height: 1.3; overflow-wrap: anywhere; }
.post__hint.bad { color: #b3262a; }
.post__media { grid-area: media; position: relative; isolation: isolate; margin-top: calc(10 * var(--u)); overflow: hidden; border-radius: calc(10 * var(--u)); background: #1d2027; }
.post[data-platform="x"] .post__media { margin-top: calc(8 * var(--u)); aspect-ratio: 167 / 87; }
.post[data-platform="instagram"] .post__media { margin-top: calc(11 * var(--u)); aspect-ratio: 215 / 148; background: linear-gradient(135deg, #f9b7d1 0%, #f7a0c2 100%); }
.post[data-platform="tiktok"] .post__media { aspect-ratio: 215 / 233; }
.post__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.post__art { position: absolute; top: 50%; left: 50%; width: auto; height: auto; max-width: 62%; max-height: 82.5%; translate: -50% -50%; border-radius: calc(4 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgb(190 40 110 / 0.28); object-fit: cover; transition: transform 0.6s var(--ease-spring); }
.post__actions { grid-area: actions; display: grid; grid-template-columns: 114fr 90fr; gap: calc(11 * var(--u)); margin-top: calc(19 * var(--u)); }
.post__actions.is-single { grid-template-columns: 1fr; }
.post[data-platform="x"] .post__actions { margin-top: calc(16 * var(--u)); }
.btn { display: grid; place-items: center; height: calc(40 * var(--u)); min-height: 24px; border-radius: calc(10 * var(--u)); font-size: max(11px, calc(20 * var(--u))); font-weight: 600; letter-spacing: 0.005em; white-space: nowrap; text-decoration: none; transition: transform 0.2s var(--ease-out), background-color 0.2s ease, box-shadow 0.2s ease; }
.btn--approve { background: var(--green); color: #fff; }
.btn--approve:disabled { background: #9ad3b6; }
.btn--edit { background: #e5e4ec; color: var(--ink); font-weight: 500; }
.btn--ghost { background: #efeafc; color: #43389a; }
.post__stamp { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: calc(8 * var(--u)); border-radius: inherit; background: rgb(24 168 103 / 0.95); color: #fff; font-size: max(13px, calc(22 * var(--u))); font-weight: 700; opacity: 0; scale: 0.96; pointer-events: none; transition: opacity 0.22s ease, scale 0.35s var(--ease-spring); }
.post__stamp svg { width: calc(44 * var(--u)); height: calc(44 * var(--u)); min-width: 26px; min-height: 26px; }
.post[data-stamped] .post__stamp { opacity: 1; scale: 1; }
/* once a post has left your hands the card shrinks to a receipt */
.post:not([data-state="pending"]) .post__media { display: none; }

@media (hover: hover) {
  .post__card:hover { border-color: #d5cdf0; box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgb(72 52 150 / 0.15); transform: translateY(calc(-3 * var(--u))); }
  .post__card:hover .post__img { transform: scale(1.06); }
  .post__card:hover .post__art { transform: scale(1.05) rotate(-2deg); }
  .btn:hover:not(:disabled) { transform: translateY(calc(-1.5 * var(--u))); }
  .btn--approve:hover:not(:disabled) { background: #12995c; box-shadow: 0 calc(5 * var(--u)) calc(14 * var(--u)) rgb(24 168 103 / 0.38); }
  .btn--edit:hover:not(:disabled) { background: #d8d4e9; }
}
.btn:active:not(:disabled) { transform: translateY(calc(1 * var(--u))) scale(0.98); }

/* ================= timeline ================= */

.timeline__track:focus-visible { outline-offset: -3px; }
.timeline__dot { position: absolute; border-radius: 50%; background: var(--dot); }
.timeline__time, .timeline__text { display: block; color: var(--ink-soft); letter-spacing: 0.01em; }
.timeline__time { font-variant-numeric: tabular-nums; }
.timeline__event.bad .timeline__text { color: #b3262a; }
.timeline__empty { color: var(--ink-muted); font-size: max(11px, calc(19 * var(--u))); }

/* ================= stage: the artwork and everything pinned to it ================= */

.stage { position: relative; min-width: 0; min-height: 0; }
.stage__canvas { position: absolute; inset: 0; container-type: size; outline-offset: -3px; user-select: none; -webkit-user-select: none; }

.scene { --bleed: 1.063; --lift: 0.45cqh; --scene-w: min(100cqw, calc(var(--bleed) * 100cqh * var(--scene-ratio))); position: absolute; left: calc(50% - var(--scene-w) / 2); top: calc(50% - var(--scene-w) / var(--scene-ratio) / 2 - var(--lift)); width: var(--scene-w); aspect-ratio: var(--scene-ratio); container-type: inline-size; pointer-events: none; }
.scene__img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; transition: filter 0.7s ease; }
.scene__layer { position: absolute; inset: 0; }
.scene__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stage__canvas[data-paused] .scene__img, .stage__canvas[data-paused] .sprite, .stage__canvas[data-paused] .pin { filter: saturate(0.45) brightness(1.03); }
.stage__canvas[data-paused] .bubble, .stage__canvas[data-paused] .msg-line { animation-play-state: paused; }

.veil { display: none; }

/* the three painted helpers, and portrait pins for any helpers beyond them */
.sprite { position: absolute; height: auto; transform-origin: var(--ox, 50%) 100%; transition: filter 0.7s ease; }
.sprite.pop, .pin.pop { animation: hop-out 0.62s var(--ease-spring) backwards; }
.pin { position: absolute; left: var(--x); top: var(--y); width: max(34px, 4.3cqw); aspect-ratio: 1; translate: -50% -118%; border: max(2px, 0.2cqw) solid var(--accent); border-radius: 50%; background: #fff; box-shadow: 0 0.5cqw 1cqw rgb(40 26 100 / 0.26); transform-origin: 50% 118%; transition: filter 0.7s ease; }
.pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 24%; aspect-ratio: 1; border: inherit; border-top-color: transparent; border-left-color: transparent; border-bottom-right-radius: 22%; background: #fff; transform: translate(-50%, -62%) rotate(45deg); }
.pin__img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; overflow: hidden; background: var(--accent); }
@keyframes hop-out { from { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) scale(0.2); } 60% { opacity: 1; } }

/* tap targets over each painted person */
.spot { position: absolute; border-radius: 40% 40% 46% 46%; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.spot:focus-visible { outline: none; }
.spot__ring { position: absolute; left: 50%; bottom: -2%; width: 132%; aspect-ratio: 2.1 / 1; translate: -50% 38%; border: max(2px, 0.2cqw) solid var(--accent); border-radius: 50%; box-shadow: 0 0 0 max(1.5px, 0.12cqw) #fff, 0 0 1.1cqw var(--accent); opacity: 0; scale: 0.7; transition: opacity 0.2s ease, scale 0.35s var(--ease-spring); pointer-events: none; }
.spot:hover .spot__ring { opacity: 0.6; scale: 1; }
.spot.selected .spot__ring, .spot:focus-visible .spot__ring { opacity: 1; scale: 1; }

.ping { position: absolute; left: var(--x); top: var(--y); width: 7cqw; aspect-ratio: 2 / 1; translate: -50% -50%; border: max(2px, 0.24cqw) solid var(--accent); border-radius: 50%; box-shadow: 0 0 1.2cqw var(--accent), inset 0 0 0.8cqw rgb(255 255 255 / 0.7); opacity: 0; animation: ping 1.5s cubic-bezier(0.2, 0.7, 0.3, 1) 2; }

.msg-line { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0.1 15; opacity: 0.95; filter: drop-shadow(0 0 2px rgb(255 255 255 / 0.9)); animation: dash 0.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -15.1; } }

/* name tags */
.tag { --b: max(1.25px, 0.13cqw); --tail: 50%; --tag-fill: #fff; --tag-line: var(--room); --tag-ink: var(--ink); position: absolute; left: var(--x); top: var(--y); z-index: 2; display: none; translate: calc(var(--tail) * -1) calc(-100% - 0.42em); transform-origin: var(--tail) calc(100% + 0.42em); padding: 0.22em 0.6em 0.24em; border: var(--b) solid var(--tag-line); border-radius: 0.5em; background: var(--tag-fill); box-shadow: 0 0.15em 0.4em rgb(64 44 130 / 0.14); color: var(--tag-ink); font-size: max(9.5px, 1.2cqw); line-height: 1.2; white-space: nowrap; pointer-events: auto; transition: scale 0.3s var(--ease-spring), rotate 0.3s var(--ease-spring); }
.tag::after { content: ""; position: absolute; left: var(--tail); top: 100%; width: 0.62em; height: 0.62em; border: var(--b) solid var(--tag-line); border-top-color: transparent; border-left-color: transparent; border-bottom-right-radius: 0.14em; background: var(--tag-fill); transform: translate(-50%, -56%) rotate(45deg); }
.tag.is-worn, .tag.hover, .tag.show { display: block; animation: bubble-pop 0.4s var(--ease-spring) backwards; }
.tag.speaking { display: none; }
.tag:hover { z-index: 4; scale: 1.1; rotate: -4deg; }
.tag--peach { --tag-fill: #fbc88d; --tag-line: #f09a4a; }
.tag--coral { --tag-fill: #f26b5f; --tag-line: #e5574c; --tag-ink: #fff; }
.tag--mint { --tag-fill: #c2f0db; --tag-line: #5bcb9e; }
.tag--lilac { --tag-fill: #dcd3fb; --tag-line: #8b6be2; }
.tag--sky { --tag-fill: #cfe6fb; --tag-line: #5ba6ea; }
.tag--rose { --tag-fill: #fbd0e3; --tag-line: #ee6fae; }

/* what someone is doing right now: a small badge by their head */
.badge { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: none; place-items: center; width: max(17px, 1.75cqw); aspect-ratio: 1; translate: -50% -50%; border: max(1.5px, 0.14cqw) solid var(--accent); border-radius: 50%; background: #fff; box-shadow: 0 0.2cqw 0.5cqw rgb(40 26 100 / 0.22); color: var(--accent); }
.badge[data-pose] { display: grid; animation: bubble-pop 0.35s var(--ease-spring) backwards; }
.badge svg { width: 64%; height: 64%; }
.badge[data-pose="done"] { border-color: var(--green); background: var(--green); color: #fff; }
.badge[data-pose="error"] { border-color: #d6332f; background: #d6332f; color: #fff; }
.badge[data-pose="tool"] svg { animation: wrench 1s ease-in-out infinite; }
.badge__dots { display: flex; gap: 12%; width: 62%; }
.badge__dots i { flex: 1; aspect-ratio: 1; border-radius: 50%; background: currentColor; animation: think 1s ease-in-out infinite; }
.badge__dots i:nth-child(2) { animation-delay: 0.16s; }
.badge__dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes think { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-28%); } }
@keyframes wrench { 50% { transform: rotate(-24deg); } }

/* speech bubbles: only ever filled with text that came over the event bus */
.bubble { --b: max(1.5px, 0.16cqw); --tail: 30%; position: absolute; left: var(--x); top: var(--y); z-index: 3; width: max-content; max-width: 15.5em; translate: calc(var(--tail) * -1) calc(-100% - 0.9em - var(--lift, 0px)); transform-origin: var(--tail) calc(100% + 0.9em); padding: 0.38em 0.66em 0.42em; border: var(--b) solid var(--accent); border-radius: 0.74em; background: #fff; box-shadow: 0 0.25em 0.7em rgb(64 44 130 / 0.14); color: var(--ink); font-size: max(11px, 1.3cqw); line-height: 1.24; letter-spacing: 0.005em; overflow-wrap: anywhere; pointer-events: auto; animation: bubble-pop 0.4s var(--ease-spring) backwards; }
.bubble:hover { z-index: 4; }
.bubble__tail { --tip: 0.65em; position: absolute; top: 100%; left: calc(var(--tail) - var(--tip)); width: 1.3em; height: 1.1em; overflow: visible; }
.bubble__tail path { fill: #fff; stroke: var(--accent); stroke-width: 2.45; stroke-linejoin: round; }
.bubble.lifted .bubble__tail { display: none; }

.confetti { position: absolute; left: var(--x); top: var(--y); z-index: 5; }
.confetti i { position: absolute; left: 0; top: 0; width: max(5px, 0.62cqw); height: max(3px, 0.34cqw); border-radius: 1px; background: var(--c); opacity: 0; animation: confetti 1.15s cubic-bezier(0.16, 0.8, 0.3, 1) var(--d) both; }
.door-glow { position: absolute; left: var(--x); top: var(--y); width: 11cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / 0.95), rgb(255 236 170 / 0.55) 45%, transparent 72%); animation: door-glow 1.1s ease-out both; }
@keyframes door-glow { from { opacity: 0; scale: 0.2; } 30% { opacity: 1; } to { opacity: 0; scale: 1.25; } }

.toast { position: absolute; z-index: 6; top: 12px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(92%, 460px); padding: 9px 14px; border-radius: 14px; background: #2a2450; color: #fff; font-size: 14px; line-height: 1.3; box-shadow: 0 6px 22px rgb(40 26 100 / 0.25); text-align: center; }
.toast.bad { background: #c3272b; }
.toast.good { background: #14804f; }

.fab { position: absolute; z-index: 5; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 999px; color: #fff; font-size: 15.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 16px rgb(60 30 120 / 0.25); transition: transform 0.2s var(--ease-out), filter 0.2s ease; }
.fab:hover { filter: brightness(1.05); }
.fab:active { transform: scale(0.96); }
.fab--start { left: 12px; bottom: 12px; background: var(--green); }
.fab--spawn { right: 12px; bottom: 12px; padding-right: 12px; background: linear-gradient(180deg, #ff9338 0%, #ff8324 100%); }
.fab--spawn .plus { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: #f47a16; }
.fab--spawn .plus svg { width: 16px; height: 16px; }

/* ================= motion ================= */

@keyframes bubble-pop { from { opacity: 0; scale: 0.3; } }
@keyframes ping { from { opacity: 0.95; transform: scale(0.25); } to { opacity: 0; transform: scale(1.5); } }
@keyframes confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
@keyframes row-flash { from { opacity: 0.34; } to { opacity: 0; } }
@keyframes event-in { from { opacity: 0; transform: translate3d(calc(-18 * var(--u)), 0, 0); } }
@keyframes dot-pop { from { scale: 0; } }
@keyframes fade { from { opacity: 0; } }

/* ================= desktop: the comp ================= */

@media (min-width: 1025px) {
  .app { display: grid; grid-template-columns: calc(315 * var(--u)) minmax(0, 1fr) calc(278 * var(--u)); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "header header header" "crew stage queue" "timeline timeline timeline"; row-gap: calc(16 * var(--u)); padding: 0 calc(16 * var(--u)) calc(10 * var(--u)); }
  /* the stage sits above the header so the roof peaks poke over its edge, and below the panels */
  .header { grid-area: header; z-index: 1; display: flex; align-items: flex-end; gap: calc(32 * var(--u)); height: calc(147 * var(--u)); margin-inline: calc(-16 * var(--u)); padding: 0 calc(34 * var(--u)) calc(31 * var(--u)) calc(33 * var(--u)); }
  .stage { grid-area: stage; z-index: 2; }
  .crew { grid-area: crew; z-index: 3; }
  .queue { grid-area: queue; z-index: 3; }
  .timeline { grid-area: timeline; z-index: 3; }
  .rooms, .sheet, .room-title, .fab--spawn, .in-label, .cta--stop .sq, .cta--stop .t-short { display: none; }

  .brand { gap: calc(30 * var(--u)); margin-bottom: calc(-9 * var(--u)); }
  .brand__logo { width: calc(110 * var(--u)); height: calc(110 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgb(74 40 180 / 0.3); }
  .brand__title { font-size: calc(53.5 * var(--u)); font-weight: 760; line-height: 1.07; letter-spacing: -0.01em; }
  .brand__campaign { gap: calc(14 * var(--u)); margin-top: calc(4 * var(--u)); color: #231f40; font-size: calc(30 * var(--u)); line-height: 1.2; letter-spacing: 0.012em; }
  .mode-chip { padding: calc(3 * var(--u)) calc(12 * var(--u)); font-size: max(9.5px, calc(17 * var(--u))); }
  .gear { align-self: flex-end; width: calc(54 * var(--u)); height: calc(54 * var(--u)); min-width: 26px; min-height: 26px; margin-bottom: calc(8 * var(--u)); margin-left: calc(-8 * var(--u)); }

  .header__meters { display: flex; align-items: flex-end; gap: calc(30 * var(--u)); margin-left: auto; }
  .header__actions { flex: none; display: flex; align-items: flex-end; gap: calc(32 * var(--u)); }
  .control { gap: calc(12 * var(--u)); }
  .control__label { color: #29244f; font-size: calc(28 * var(--u)); line-height: calc(32 * var(--u)); letter-spacing: 0.01em; }
  .meter { width: calc(325 * var(--u)); }
  .meter__bar { height: calc(54 * var(--u)); background: #fff; box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgb(72 52 150 / 0.12); }
  .meter__fill { --edge: calc(20 * var(--u)); width: calc(var(--pct, 0) * 1% + 16 * var(--u)); background: linear-gradient(90deg, #5fe0a6 0%, #7fe9c0 100%); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--edge)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--edge)), transparent); }
  .meter__bar[data-level="warn"] .meter__fill { background: linear-gradient(90deg, #ffc46b 0%, #ffd791 100%); }
  .meter__bar[data-level="max"] .meter__fill { background: linear-gradient(90deg, #ff8f86 0%, #ffb1aa 100%); }
  .meter__value { padding-inline: calc(20 * var(--u)); font-size: calc(31 * var(--u)); }

  .speed__track { --track-w: calc(246 * var(--u)); --track-pad: calc(7 * var(--u)); --inner: calc(var(--track-w) - 2 * var(--track-pad)); display: grid; grid-template-columns: 69fr 73fr 90fr; width: var(--track-w); height: calc(54 * var(--u)); padding: var(--track-pad); background: #6a50c9; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgb(46 24 130 / 0.22), 0 calc(2 * var(--u)) calc(8 * var(--u)) rgb(72 52 150 / 0.16); }
  .speed__thumb { position: absolute; top: var(--track-pad); bottom: var(--track-pad); left: var(--track-pad); width: calc(var(--inner) * 69 / 232); border-radius: 999px; background: #bdb3f5; box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgb(30 16 90 / 0.25), inset 0 calc(1 * var(--u)) 0 rgb(255 255 255 / 0.35); transition: transform 0.4s var(--ease-out), width 0.4s var(--ease-out); }
  .speed[data-speed="2x"] .speed__thumb { width: calc(var(--inner) * 73 / 232); transform: translateX(calc(var(--inner) * 69 / 232)); }
  .speed[data-speed="skip"] .speed__thumb { width: calc(var(--inner) * 90 / 232); transform: translateX(calc(var(--inner) * 142 / 232)); }
  .speed__option { color: #fff; font-size: calc(30 * var(--u)); }
  .speed__option:hover:not([data-checked]) { background: rgb(255 255 255 / 0.14); }
  .speed__option[data-checked] { color: var(--ink); }
  .speed__option:focus-visible { outline: 2.5px solid #fff; outline-offset: 1px; }

  .cta { height: calc(90 * var(--u)); border-radius: calc(13 * var(--u)); color: #fff; font-size: calc(37 * var(--u)); letter-spacing: 0.004em; }
  .cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 34%, rgb(255 255 255 / 0.38) 50%, transparent 66%); transform: translateX(-120%); transition: transform 0.75s var(--ease-out); pointer-events: none; }
  .cta:hover:not(:disabled) { transform: translateY(calc(-2 * var(--u))); filter: saturate(1.08) brightness(1.04); }
  .cta:hover:not(:disabled)::after { transform: translateX(120%); }
  .cta:active:not(:disabled) { transform: translateY(calc(1 * var(--u))) scale(0.985); }
  .cta:focus-visible { outline-color: var(--ink); }
  .cta--spawn { width: calc(300 * var(--u)); background: linear-gradient(180deg, #ff9338 0%, #ff8324 100%); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgb(255 128 30 / 0.3), inset 0 calc(1.5 * var(--u)) 0 rgb(255 255 255 / 0.28); }
  .cta--stop { width: calc(212 * var(--u)); background: linear-gradient(180deg, #f64e48 0%, #ec3c39 100%); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgb(236 60 57 / 0.28), inset 0 calc(1.5 * var(--u)) 0 rgb(255 255 255 / 0.24); }

  .timeline { display: flex; align-items: stretch; height: calc(106 * var(--u)); overflow: hidden; border-radius: calc(22 * var(--u)); background: var(--panel); box-shadow: var(--shadow-panel); }
  .timeline__title { flex: none; display: flex; align-items: center; width: calc(319 * var(--u)); padding-left: calc(26 * var(--u)); font-size: calc(36 * var(--u)); font-weight: 400; letter-spacing: -0.005em; }
  .timeline__track { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-start, 0px), #000 calc(100% - var(--fade-end, 0px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-start, 0px), #000 calc(100% - var(--fade-end, 0px)), transparent 100%); transition: --fade-start 0.3s ease, --fade-end 0.3s ease; }
  .timeline__track::-webkit-scrollbar { display: none; }
  .timeline__track[data-fade-start] { --fade-start: calc(56 * var(--u)); }
  .timeline__track[data-fade-end] { --fade-end: calc(56 * var(--u)); }
  .timeline__list { display: flex; gap: calc(18 * var(--u)); width: max-content; min-width: 100%; height: 100%; padding-right: calc(12 * var(--u)); }
  .timeline__event { position: relative; flex: 1 0 auto; padding-top: calc(45 * var(--u)); transition: opacity 0.25s ease; }
  .timeline__event.is-new { animation: event-in 0.5s var(--ease-out) backwards; }
  .timeline__event.is-new .timeline__dot { animation: dot-pop 0.45s var(--ease-spring) 0.1s backwards; }
  .timeline__list:has(.timeline__event:hover) .timeline__event:not(:hover) { opacity: 0.55; }
  .timeline__dot { top: calc(16 * var(--u)); left: 0; width: calc(19 * var(--u)); height: calc(19 * var(--u)); transition: scale 0.3s var(--ease-spring), box-shadow 0.3s ease; }
  .timeline__event:hover .timeline__dot { scale: 1.25; box-shadow: 0 0 0 calc(5 * var(--u)) color-mix(in srgb, var(--dot) 24%, transparent); }
  .timeline__event::after { content: ""; position: absolute; top: calc(25 * var(--u)); right: calc(-9 * var(--u)); left: calc(28 * var(--u)); height: max(1px, calc(2 * var(--u))); border-radius: 2px; background: var(--line); }
  .timeline__event:last-child { padding-right: calc(40 * var(--u)); }
  .timeline__event:last-child::after { right: calc(2 * var(--u)); }
  .timeline__event:last-child::before { content: ""; position: absolute; top: calc(20.5 * var(--u)); right: calc(2 * var(--u)); width: calc(11 * var(--u)); height: calc(11 * var(--u)); border: solid #cbc6dd; border-width: max(1px, calc(2 * var(--u))) max(1px, calc(2 * var(--u))) 0 0; transform: rotate(45deg); }
  .timeline__time, .timeline__text { font-size: max(10px, calc(19 * var(--u))); line-height: max(1.2em, calc(24 * var(--u))); white-space: nowrap; }
  .timeline__text { max-width: calc(420 * var(--u)); overflow: hidden; text-overflow: ellipsis; }
  .timeline__empty { display: flex; align-items: center; height: 100%; }

  .fab { height: max(34px, calc(64 * var(--u))); padding: 0 max(14px, calc(26 * var(--u))); font-size: max(13px, calc(24 * var(--u))); }
  .fab--start { left: calc(24 * var(--u)); bottom: calc(18 * var(--u)); }
  .toast { top: calc(18 * var(--u)); }
}

/* ================= phone: one room at a time ================= */

@media (max-width: 1024px) {
  .app { display: flex; flex-direction: column; }
  .app > .panel, .app > .timeline, .cta--spawn, .control__label, .speed__thumb, .cta--stop .t-long, .brand__edit .pre { display: none; }

  .header { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; padding: calc(10px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left)); background: #a188f0; color: #fff; }
  .header__meters, .header__actions { display: contents; }
  .brand { flex: 0 0 100%; gap: 10px; }
  .brand__logo { width: 44px; height: 44px; box-shadow: 0 2px 8px rgb(60 30 150 / 0.3); }
  .brand__text { flex: 1; }
  .brand__title { font-size: 22px; font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; }
  .brand__campaign { gap: 8px; font-size: 14px; line-height: 1.25; }
  .mode-chip { padding: 1px 8px; background: rgb(255 255 255 / 0.26); color: #fff; font-size: 10.5px; }
  .gear { width: 40px; height: 40px; background: rgb(255 255 255 / 0.2); }

  .control { flex: 1 1 0; }
  .control.speed { flex: 1.15 1 0; }
  .meter__bar { height: 38px; background: #c9f2e1; color: #14503a; }
  .meter__fill { width: calc(var(--pct, 0) * 1%); background: #86dcbc; }
  .meter__bar[data-level="warn"] .meter__fill { background: #ffc46b; }
  .meter__bar[data-level="max"] .meter__fill { background: #ff8f8a; }
  .meter__value { justify-content: center; padding-inline: 8px; font-size: clamp(12px, 3.35vw, 14.5px); }
  .meter__value strong { color: #0e3a2a; }
  .in-label { font-weight: 500; }
  .speed__track { display: flex; align-items: center; height: 38px; padding: 3px 3px 3px 11px; background: #ffe2c4; color: #9a4c12; font-size: clamp(12px, 3.35vw, 14.5px); white-space: nowrap; }
  .speed__track .in-label { margin-right: 4px; }
  .speed__option { flex: 1; height: 32px; min-width: 28px; padding: 0 5px; }
  .speed__option[data-checked] { background: var(--orange); color: #fff; font-weight: 700; }
  .cta--stop { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px; border-radius: 999px; background: #ffdadd; color: #c3272b; font-size: clamp(12.5px, 3.5vw, 14.5px); }
  .cta--stop .sq { width: 13px; height: 13px; border-radius: 3px; background: var(--red); }
  .cta--stop:active { transform: scale(0.96); }

  .rooms { flex: none; display: flex; align-items: center; background: #fff; padding: 8px 2px 6px; box-shadow: 0 2px 8px rgb(60 40 130 / 0.1); position: relative; z-index: 2; }
  .rooms__nav { flex: none; display: grid; place-items: center; width: 26px; height: 40px; color: #8f8aa8; }
  .rooms__nav svg { width: 18px; height: 18px; }
  .rooms__nav:disabled { opacity: 0.3; }
  .rooms__dots { flex: 1; min-width: 0; display: flex; justify-content: space-around; align-items: flex-start; }
  .rooms__dots button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 3px 0 1px; color: var(--ink-muted); font-size: 12.5px; line-height: 1.2; }
  .rooms__dots .dot { position: relative; width: 17px; height: 17px; border-radius: 50%; background: var(--c); transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease; }
  .rooms__dots button.on { color: var(--ink); font-weight: 800; }
  .rooms__dots button.on .dot { transform: scale(1.1); box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--c); }
  .rooms__dots .dot.pinged::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; animation: dot-ping 1s ease-out; }
  @keyframes dot-ping { from { opacity: 0.9; transform: scale(0.6); } to { opacity: 0; transform: scale(1.5); } }

  .stage { flex: 1; margin-bottom: calc(var(--peek) - 22px); background: linear-gradient(180deg, color-mix(in srgb, var(--room) 62%, #fff) 0%, color-mix(in srgb, var(--room) 34%, #fff) 100%); transition: background-color 0.4s ease; }
  .stage__canvas { overflow: hidden; touch-action: none; }
  .is-phone .scene { left: 0; top: 0; will-change: transform; }
  .is-phone .scene.gliding { transition: transform 0.42s var(--ease-out); }
  .is-phone .veil { display: block; position: absolute; inset: -30%; --vx: var(--x); --vy: var(--y); background: radial-gradient(ellipse 16.5% 20% at calc(18.75% + var(--vx) * 0.625) calc(18.75% + var(--vy) * 0.625), transparent 64%, color-mix(in srgb, var(--room) 46%, rgb(255 255 255 / 0.92)) 100%); transition: --vx 0.42s var(--ease-out), --vy 0.42s var(--ease-out); pointer-events: none; }
  .room-title { position: absolute; z-index: 4; top: 10px; left: 0; right: 0; color: #fff; font-size: 20px; font-weight: 800; text-align: center; text-shadow: 0 1px 8px rgb(30 20 70 / 0.4); pointer-events: none; }
  .toast { top: 42px; }
  .fab--start { bottom: 34px; }
  .fab--spawn { bottom: 34px; }

  .is-phone .tag { --tag-fill: #fff; --tag-line: var(--room); --tag-ink: var(--ink); font-size: 12.5px; font-weight: 600; }
  .is-phone .tag.is-worn { display: none; }
  .is-phone .tag.here, .is-phone .tag.show { display: block; }
  .is-phone .tag.speaking { display: none; }
  .is-phone .bubble { font-size: 13.5px; max-width: 14.5em; border-width: 2px; }
  .is-phone .msg-line { stroke: #fff; stroke-width: 7; filter: drop-shadow(0 0 2px rgb(40 26 100 / 0.35)); }
  .is-phone .badge { width: 20px; }
  .is-phone .ping { width: 9cqw; }

  /* bottom sheet */
  .sheet { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; height: var(--sheet-h); max-height: calc(100dvh - 64px - env(safe-area-inset-top)); padding-bottom: env(safe-area-inset-bottom); border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -8px 26px rgb(60 40 130 / 0.18); transition: height 0.28s cubic-bezier(0.3, 1, 0.4, 1); }
  .sheet.dragging { transition: none; }
  .grab { flex: none; display: grid; place-items: center; height: 22px; touch-action: none; cursor: grab; }
  .grab span { width: 44px; height: 5px; border-radius: 3px; background: #cfc9e6; }
  .tabs { flex: none; display: flex; border-bottom: 2px solid #efecf8; touch-action: none; }
  .tabs button { position: relative; flex: 1; padding: 6px 4px 11px; color: #77728f; font-size: 16.5px; }
  .tabs button.on { color: #e8700f; font-weight: 800; }
  .tabs button.on::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -2px; height: 3px; border-radius: 2px; background: var(--orange); }
  .sheet-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #f7f5fd; padding: 10px 12px 14px; }
  .sheet-body > * { display: none; }
  .sheet-body > .on { display: block; }
  .sheet-body > .crew__scroll, .sheet-body > .queue__scroll, .sheet-body > .timeline__track { flex: none; padding: 0; overflow: visible; }

  .sheet .crew__list { gap: 6px; }
  .sheet .crew__list + .crew__list { margin-top: 6px; }
  .sheet .crew__list--swarm { margin-top: 38px !important; }
  .sheet .crew__list--swarm::before { left: 6px; bottom: calc(100% + 8px); font-size: 13px; }
  .sheet .crew-row { grid-template-columns: 50px minmax(0, 1fr); column-gap: 12px; min-height: 72px; padding: 9px 14px; border-radius: 14px; background: #fff; }
  .sheet .crew-row::before { width: 5px; transform: none; }
  .sheet .crew-row__avatar { width: 50px; height: 50px; }
  .sheet .crew-row__name { font-size: 15.5px; line-height: 1.2; }
  .sheet .crew-row__line { font-size: 13px; line-height: 1.3; }

  .sheet .post { padding-bottom: 10px; }
  .sheet .post__card { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "media icon title" "media text text" "media hint hint" "media actions actions"; grid-template-rows: auto 1fr auto auto; column-gap: 8px; padding: 12px; border-width: 1px; border-radius: 18px; }
  .sheet .post[data-platform="x"] .post__card { grid-template-areas: "media icon title" "media text text" "media hint hint" "media actions actions"; }
  .sheet .post__icon, .sheet .post[data-platform="x"] .post__icon { width: 26px; height: 26px; align-self: center; }
  .sheet .post__title { font-size: 15.5px; line-height: 1.25; }
  .sheet .post__chip { font-size: 11px; line-height: 20px; padding: 0 8px; }
  .sheet .post__media, .sheet .post[data-platform] .post__media { width: 92px; min-height: 100px; height: 100%; margin: 0 6px 0 0; aspect-ratio: auto; border-radius: 12px; }
  .sheet .post__art { max-width: 74%; max-height: 74%; border-radius: 4px; }
  .sheet .post__text, .sheet .post[data-platform="x"] .post__text { align-self: start; margin: 5px 0 0; font-size: 14.5px; line-height: 1.32; }
  .sheet .post__note { width: 20px; height: 20px; }
  .sheet .post__hint { margin-top: 5px; font-size: 12.5px; }
  .sheet .post[data-state="pending"] .post__hint:not(.bad) { display: none; }
  .sheet .post__actions, .sheet .post[data-platform="x"] .post__actions { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
  .sheet .btn { height: 42px; border-radius: 999px; font-size: 15.5px; }
  .sheet .post__stamp { font-size: 16px; }
  .sheet .queue__empty { padding: 22px 12px; font-size: 14px; }

  .sheet .timeline__list { display: flex; flex-direction: column; padding: 4px 4px 0; }
  .sheet .timeline__event { position: relative; display: grid; grid-template-columns: 4.9em minmax(0, 1fr); column-gap: 10px; padding: 0 0 15px 28px; }
  .sheet .timeline__dot { top: 3px; left: 0; width: 14px; height: 14px; }
  .sheet .timeline__event::after { content: ""; position: absolute; top: 21px; bottom: 1px; left: 6px; width: 2px; border-radius: 2px; background: var(--line); }
  .sheet .timeline__event:last-child { padding-bottom: 0; }
  .sheet .timeline__event:last-child::after { display: none; }
  .sheet .timeline__time, .sheet .timeline__text { font-size: 14px; line-height: 20px; }
  .sheet .timeline__time { color: var(--ink-muted); }
  .sheet .timeline__empty { padding: 18px 8px; font-size: 14px; text-align: center; }
}

/* phone on its side: very little height, so the sheet folds down to its tabs */
@media (max-width: 1024px) and (max-height: 520px) {
  :root { --peek: 62px; }
  .header { flex-wrap: nowrap; gap: 8px; padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
  .brand { flex: 1 1 40%; }
  .brand__logo { width: 36px; height: 36px; }
  .brand__title { font-size: 18px; }
  .brand__campaign { font-size: 12.5px; }
  .control { flex: 0 1 150px; }
  .control.speed { flex: 0 1 190px; }
  .rooms { padding: 3px 2px 2px; }
  .rooms__nav { height: 28px; }
  .rooms__dots button { flex-direction: row; justify-content: center; gap: 8px; }
  .rooms__dots .dot { width: 13px; height: 13px; }
  .room-title { display: none; }
  .fab { height: 38px; font-size: 14px; }
}

@media (max-width: 384px) {
  .brand__title { font-size: 19.5px; }
  .speed__track .in-label { display: none; }
  .speed__track { padding-left: 3px; }
  .rooms__dots button { font-size: 11.5px; }
  .meter__value { padding-inline: 4px; }
}

/* ================= layers: chat, dialogs ================= */

.scrim { position: fixed; inset: 0; z-index: 40; background: rgb(30 27 58 / 0.44); display: grid; place-items: end center; animation: fade 0.15s; }
.modal { width: 100%; max-height: calc(100dvh - env(safe-area-inset-top) - 8px); background: #fff; border-radius: 22px 22px 0 0; display: flex; flex-direction: column; overflow: hidden; padding-bottom: env(safe-area-inset-bottom); }
.modal > header { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid #ece8f8; }
.modal > header h2 { flex: 1; font-size: 18px; font-weight: 800; min-width: 0; }
.modal .x { width: 36px; height: 36px; border-radius: 50%; background: #f1eefb; font-size: 20px; line-height: 1; color: #4a4470; }
.modal .body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 14px 16px 18px; }
.modal > footer { flex: none; display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid #ece8f8; }
.modal > footer button { flex: 1; height: 44px; border-radius: 12px; font-weight: 700; }
.b-primary { background: var(--purple); color: #fff; }
.b-danger { background: #ffe1e1; color: #b3262a; }
.b-plain { background: #efedf6; color: #3c3852; }
.empty { padding: 18px 12px; text-align: center; font-size: 14px; color: var(--ink-muted); line-height: 1.4; }

fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
legend { font-size: 15px; font-weight: 800; padding: 0; margin-bottom: 10px; color: #3d2f7a; }
.field { display: grid; gap: 5px; margin-bottom: 12px; min-width: 0; }
.field > span, .field > label { font-size: 13.5px; font-weight: 600; }
.field small, .hint { font-size: 12.5px; line-height: 1.35; color: var(--ink-muted); }
input[type="text"], input[type="url"], input[type="password"], input[type="number"], input[type="datetime-local"], textarea, select { width: 100%; min-width: 0; border: 1.5px solid #d9d4ec; border-radius: 11px; padding: 10px 12px; font-size: 16px; background: #fff; }
textarea { resize: vertical; min-height: 88px; line-height: 1.35; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--purple); outline-offset: 0; border-color: var(--purple); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row > .field { flex: 1 1 130px; margin-bottom: 12px; }
.mini { height: 38px; padding: 0 14px; border-radius: 10px; font-weight: 700; font-size: 14px; background: #efeafc; color: #43389a; }
.mini.warn { background: #ffe1e1; color: #b3262a; }
.status-line { font-size: 13px; line-height: 1.35; padding: 8px 10px; border-radius: 10px; background: #f4f2fb; color: #4a4470; margin: 2px 0 12px; overflow-wrap: anywhere; }
.status-line.ok { background: #e2f7ec; color: #14694a; }
.status-line.bad { background: #ffe9e9; color: #a32226; }
.switch { display: flex; align-items: center; gap: 10px; font-size: 14.5px; min-height: 40px; }
.switch input { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px; border-radius: 999px; background: #d5d0e6; position: relative; transition: background 0.2s; cursor: pointer; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); transition: transform 0.2s; }
.switch input:checked { background: var(--green); }
.switch input:checked::after { transform: translateX(18px); }
.platform-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #ece8f8; }
.platform-row .cap { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-muted); }
.platform-row .cap input { width: 74px; padding: 7px 9px; }
.count { font-size: 12.5px; color: var(--ink-muted); text-align: right; }
.count.over { color: #b3262a; font-weight: 700; }

.chat { position: fixed; z-index: 30; inset: 0; background: #fff; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); animation: fade 0.15s; }
.chat > header { flex: none; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-bottom: 1px solid #ece8f8; border-top: 5px solid var(--c); }
.chat > header .av { display: block; width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; overflow: hidden; background: var(--c); }
.chat > header .who { flex: 1; min-width: 0; }
.chat > header b { display: block; font-size: 17px; }
.chat > header .sub { font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat .x { width: 38px; height: 38px; border-radius: 50%; background: #f1eefb; font-size: 21px; line-height: 1; color: #4a4470; flex: none; }
.chat .log { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #f7f5fd; -webkit-overflow-scrolling: touch; }
.msg { max-width: 86%; padding: 8px 12px; border-radius: 16px; font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; white-space: pre-wrap; background: #fff; border: 1px solid #ece8f8; align-self: flex-start; }
.msg.me { align-self: flex-end; background: var(--purple); border-color: var(--purple); color: #fff; }
.msg.err { background: #ffe9e9; border-color: #ffc9c9; color: #a32226; }
.msg .to { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-muted); margin-bottom: 2px; }
.msg details { margin-top: 6px; font-size: 13.5px; }
.msg summary { cursor: pointer; font-weight: 700; color: #43389a; }
.msg .work { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: #f4f2fb; white-space: pre-wrap; }
.chat form { flex: none; display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid #ece8f8; }
.chat form textarea { flex: 1; min-height: 44px; max-height: 120px; resize: none; }
.chat form .send { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--purple); color: #fff; font-size: 20px; }
.chat form .send[disabled] { opacity: 0.45; }
.chat form .clip { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #efeafc; color: #43389a; font-size: 20px; }
.chat form .clip.has { background: #d7f5e6; color: #14694a; }

@media (min-width: 1025px) {
  .scrim { place-items: center; }
  .modal { width: min(600px, 94vw); max-height: 90dvh; border-radius: 22px; }
  .chat { inset: auto calc(310 * var(--u)) calc(148 * var(--u)) auto; width: 380px; height: min(540px, calc(100dvh - 200px)); border-radius: 20px; box-shadow: 0 14px 40px rgb(50 30 120 / 0.28); overflow: hidden; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-delay: 0s !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-delay: 0s !important; transition-duration: 0.01ms !important; }
}