/* ============================== The system ==============================
   One temperature. The brand is a warm ember orange, and for two generations it
   sat on COOL grays — which is why it always looked like a sticker on someone
   else's page. Every neutral here is warm now: paper, oat, stone, hairline. The
   orange stops being an accent bolted on and becomes the hot end of the one
   scale everything else sits on.

   One rule carries the identity: WARMTH IS ATTENTION. At rest, things are warm
   neutral. Selected, active, focused — ember: tint surface, ember-ink text, an
   ember focus ring. Nav, tabs, chips, rows, inputs all speak it, so "where am I"
   and "what is chosen" have one answer everywhere. */
:root {
  --bg: #fbfaf8;            /* paper — the content canvas */
  --sidebar: #f4f1ec;       /* oat — the shell around it */
  --panel: #ffffff;         /* card */
  --ink: #21201c;           /* warm near-black */
  --muted: #78716a;         /* stone */
  --line: #e9e5de;          /* warm hairline */
  --hover: #f1ede6;         /* rest-state hover */
  --bg2: #f1ede6;
  --orange: #f6821f;        /* ember — the brand, untouched */
  --orange-ink: #a85b06;    /* ember for TEXT: deep enough to read on tint */
  --tint: #fbf1e4;          /* ember wash — the selected surface */
  --ok: #17804a;
  --warn: #a16207;
  --bad: #c03d33;
  --radius: 12px;
  --r-s: 8px; --r-m: 12px; --r-l: 16px;
  --shadow-1: 0 1px 2px rgba(50, 40, 20, .05);
  --shadow-pop: 0 12px 40px rgba(50, 40, 20, .14);
  --focus: 0 0 0 3px rgba(246, 130, 31, .22);
}
* { box-sizing: border-box; }
/* `hidden` must always win over the display:grid on .login/.shell below. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Motion is one voice: short, eased, and absent for those who asked. */
button, .tab, .chip, .side-link, input, select, textarea, .cx-file, .list-item, a {
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
/* Focus is the ember ring, everywhere, and only for the keyboard. */
:focus-visible { outline: none; box-shadow: var(--focus); }
::selection { background: var(--tint); }
/* Scrollbars in the page's own material. */
* { scrollbar-width: thin; scrollbar-color: #d8d2c8 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d8d2c8; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
.muted { color: var(--muted); }
.err { color: var(--bad); font-size: 13px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -0.01em; }
/* The mark is a real icon now, not a letter tile: the same file the browser tab,
   the app icon and Google's consent screen show. */
/* No border-radius: the mark carries its own corner radius now, and clipping a
   rounded shape a second time shaves the corners off it. */
.logo { width: 30px; height: 30px; display: block; flex: none; }
.side-mark { width: 22px; height: 22px; display: block; flex: none; }
/* Three voices, and only three. FILLED is the one thing this screen wants you to
   do — ember, and one per view by convention. QUIET (.ghost) is every secondary
   action: text on nothing, a wash on hover, no box. The boxes were the clutter —
   a row of outlined pills reads as five equal shouts, a row of quiet words reads
   as a toolbar. DANGER is quiet too, in red; destruction earns color, not size. */
button {
  font: inherit; cursor: pointer; border: 1px solid var(--orange); background: var(--orange);
  color: #fff; padding: 7px 13px; border-radius: var(--r-s); font-weight: 600;
}
button:hover { background: #e87411; border-color: #e87411; }
button:active { background: #d96a0d; border-color: #d96a0d; }
button.ghost { background: transparent; color: var(--ink); border-color: transparent; font-weight: 500; }
button.ghost:hover, button.ghost:active { background: var(--hover); border-color: transparent; color: var(--ink); }
button.link { background: none; border: none; color: var(--orange-ink); padding: 0; font-weight: 500; }
button.link:hover, button.link:active { background: none; border: none; color: var(--ink); }
button.danger { background: transparent; color: var(--bad); border-color: transparent; }
button.danger:hover, button.danger:active { background: #fdf3f0; border-color: transparent; color: var(--bad); }
button:disabled { opacity: 0.5; cursor: default; pointer-events: none; }
/* Where a quiet button stands alone on the page's bg with nothing to hover
   against, `.outline` restores a hairline. Opt-in, not the default. */
button.outline { border-color: var(--line); background: var(--panel); }
button.outline:hover { background: var(--hover); border-color: var(--line); }
input, select, textarea {
  font: inherit; width: 100%; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: #a89f93; }
textarea { min-height: 72px; resize: vertical; }
label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.field { margin: 0 0 12px; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px; width: 340px; display: grid; gap: 12px;
}

/* Shell */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side {
  background: var(--panel); border-right: 1px solid var(--line); padding: 20px 16px;
  display: flex; flex-direction: column; gap: 18px;
}
.side nav { display: grid; gap: 2px; }
.side nav button {
  background: none; border: none; color: var(--ink); text-align: left; padding: 9px 11px;
  border-radius: 8px; font-weight: 500;
}
.side nav button:hover { background: var(--bg); }
.side nav button.active { background: var(--tint); color: var(--orange-ink); font-weight: 600; }
.side-foot { margin-top: auto; display: grid; gap: 6px; font-size: 13px; }
.main { padding: 26px 30px; overflow-x: auto; }

.head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 18px; gap: 16px; }
.head h1 { font-size: 22px; margin: 0; letter-spacing: -0.01em; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } .shell { grid-template-columns: 1fr; } .side { flex-direction: row; flex-wrap: wrap; align-items: center; } .side nav { grid-auto-flow: column; } .side-foot { margin: 0; } }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.card + .card { margin-top: 14px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack > .card { margin-top: 0; }
.stack .grid2 .card { height: 100%; display: flex; flex-direction: column; }
.card h3 { margin: 0 0 10px; font-size: 15px; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.row:first-of-type { border-top: none; }
.row .t { font-weight: 600; }
.row .s { font-size: 12.5px; color: var(--muted); }

.pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pill.ok { background: #e8f4ec; color: var(--ok); }
.pill.warn { background: #faf0dd; color: var(--warn); }
.pill.draft { background: var(--bg2); color: var(--muted); }

.list-item { padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; }
.list-item + .list-item { margin-top: 8px; }
.list-item.sel { border-color: var(--orange); background: var(--tint); }

.empty { color: var(--muted); font-size: 14px; padding: 18px 0; text-align: center; }
.inline { display: flex; gap: 8px; align-items: center; }
.right { text-align: right; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.flags { display: grid; gap: 6px; }
.flag { background: #faf0dd; border: 1px solid #eeddc0; color: var(--warn); padding: 8px 10px; border-radius: 8px; font-size: 13px; }

/* Project-centric shell */
.small { font-size: 12.5px; padding: 4px 10px; }
.side-section { display: grid; gap: 6px; }
.side-head { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pdot { width: 7px; height: 7px; border-radius: 50%; background: #cdc5b9; flex: none; }
.proj-opt.sel .pdot, .proj-cur .pdot { background: var(--orange); }
.side-link { background: none; border: none; color: var(--ink); text-align: left; padding: 8px 10px; border-radius: 8px; font-weight: 500; width: 100%; }
.side-link:hover { background: var(--bg); }
.side-link.active { background: var(--tint); color: var(--orange-ink); font-weight: 600; }

.ws-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; }
.ws-head h1 { font-size: 22px; margin: 0; letter-spacing: -0.01em; }
.ws-head .s { color: var(--muted); font-size: 13px; }
.tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); padding: 8px 12px; border-radius: 0; font-weight: 600; text-transform: capitalize; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--orange-ink); border-bottom-color: var(--orange); }
.metrics { display: flex; gap: 22px; }
.metrics .k { font-size: 22px; font-weight: 700; }
.metrics .s { color: var(--muted); font-size: 12px; }
/* Chips: ONE spec. Rounded-rect, not a pill — a row of full-round capsules
   reads as a caterpillar; 7px keeps them soft without the balloon. One fixed
   height and one gap, so every chip row on every screen lines up the same. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--panel); border: 1px solid var(--line); color: var(--muted); padding: 0 10px; height: 28px; display: inline-flex; align-items: center; border-radius: 7px; font-size: 12.5px; font-weight: 500; line-height: 1; }
.chip.on { background: var(--tint); border-color: var(--orange); color: var(--orange-ink); font-weight: 600; }
/* Google-Ads-style stats table */
.tablewrap { overflow-x: auto; padding: 0; }
table.stats { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.stats th, table.stats td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
table.stats thead th { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--bg); position: sticky; top: 0; }
table.stats th.num, table.stats td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.stats td.name { font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
table.stats td.muted { color: var(--muted); }
table.stats th.chk, table.stats td.chk { width: 34px; text-align: center; padding-right: 0; }
table.stats td.rowmenu { width: 40px; text-align: center; padding: 4px; }
table.stats tbody tr:hover { background: var(--bg); }
table.stats tbody tr.sel { background: var(--tint); }
table.stats td.empty { text-align: center; color: var(--muted); padding: 22px; }
/* Consistent height so selecting rows never shifts the table down. */
.bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; min-height: 44px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 13px; }
.bulkbar.hint { color: var(--muted); background: var(--bg); }
#bulkslot:empty { display: none; }
.bulkbar .sel-count { font-weight: 700; margin-right: 4px; }
@media (max-width: 640px) { table.stats td.name { max-width: 140px; } }

.chatlog { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.bubble { padding: 8px 12px; border-radius: 12px; max-width: 80%; white-space: pre-wrap; font-size: 14px; }
.bubble.user { align-self: flex-end; background: var(--tint); border: 1px solid #f7dcbf; }
.bubble.agent { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); }
/* list rows (GoLogin-style) */
.list { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: 10px; padding: 11px 6px; border-top: 1px solid var(--line); }
.list-row:first-child { border-top: none; }
.list-row .lead { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; background: none; border: none; text-align: left; cursor: pointer; color: var(--ink); padding: 0; }
.list-row button.lead:hover .row-title { color: var(--orange-ink); }
.grow { min-width: 0; }
.row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.acct-av { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; }
.acct-av.sm { width: 34px; height: 34px; font-size: 14px; border-radius: 9px; }
.meta { display: flex; gap: 6px; align-items: center; flex: none; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--bg); color: var(--muted); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.badge.cur { background: #eef3ff; color: #3557b7; }
.badge.mgr { background: #faf0dd; color: var(--warn); }

/* context menu */
.menu-wrap { position: relative; flex: none; }
.menu-btn { background: none; border: 1px solid transparent; color: var(--muted); font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 8px; }
.menu-btn:hover { background: var(--bg); color: var(--ink); }
.menu { position: fixed; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(20, 24, 28, 0.18); min-width: 176px; padding: 5px; z-index: 200; }
.menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--ink); padding: 8px 10px; border-radius: 7px; font-weight: 500; font-size: 14px; }
.menu button:hover { background: var(--bg); }
.menu button.danger { color: var(--bad); }

/* modal */
.modal-back { position: fixed; inset: 0; background: rgba(36, 30, 20, 0.38); display: grid; place-items: center; z-index: 100; padding: 20px; backdrop-filter: blur(2px); }
.modal { background: var(--panel); border-radius: var(--r-l); padding: 22px; max-width: 440px; width: 100%; box-shadow: var(--shadow-pop); }
.detail { display: grid; gap: 2px; }
.drow { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); }
.drow:first-child { border-top: none; }
.dk { color: var(--muted); font-size: 13.5px; }
.dv { font-weight: 600; text-align: right; word-break: break-word; }

/* mobile */
@media (max-width: 640px) {
  .shell { grid-template-columns: 1fr; }
  .side { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 14px; border-right: none; border-bottom: 1px solid var(--line); }
  .side-section { display: block; }
  .side-head { margin-bottom: 4px; }
  .side nav, .side-section:last-of-type { display: flex; gap: 6px; flex-wrap: wrap; }
  .side-foot { margin-top: 4px; flex-direction: row; align-items: center; gap: 12px; }
  .main { padding: 18px 14px; overflow-x: hidden; }
  .meta-hide { display: none; }
  .card { padding: 14px; }
  .grid2 { grid-template-columns: 1fr; }
  .ws-head h1 { font-size: 19px; }
  .inline { flex-wrap: wrap; }
  input, select, textarea { width: 100%; }
  .drow { flex-direction: column; gap: 2px; }
  .dv { text-align: left; }
  .modal { padding: 18px; border-radius: 14px; }
  .menu { min-width: 150px; }
}

/* Auto-audit panel (Copilot tab) */
.score { display: inline-flex; align-items: baseline; gap: 1px; min-width: 58px; justify-content: center; font-size: 22px; font-weight: 800; padding: 8px 10px; border-radius: 12px; }
.score.good { background: #e8f4ec; color: var(--ok); }
.score.warn { background: #faf0dd; color: var(--warn); }
.score.bad { background: #fdecec; color: #c0392b; }
.findings { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.finding { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.finding .t { font-size: 13.5px; font-weight: 600; }
.finding .s { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.sev { flex: 0 0 auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 7px; border-radius: 999px; margin-top: 2px; }
.sev.critical { background: #fdecec; color: #c0392b; }
.sev.warning { background: #faf0dd; color: var(--warn); }
.sev.info { background: var(--bg2); color: var(--muted); }

/* Hands-free voice toggle active state */
#chatHands.on { background: var(--tint); border-color: var(--orange); color: var(--orange-ink); }

/* Best-practice rule presets */

/* Breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; margin-bottom: 6px; }
.crumbs .clink { color: var(--muted); cursor: pointer; }
.crumbs .clink:hover { color: var(--orange-ink); text-decoration: underline; }
.crumbs .ccur { color: var(--ink); font-weight: 600; }
.crumbs .csep { color: var(--line); }

/* Creative studio recent grid */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 6px; align-items: start; }

/* Creative studio: platform segmented switch + favorite star */
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; }
.seg-btn { background: none; border: none; padding: 6px 14px; border-radius: 7px; font-weight: 600; color: var(--muted); }
.seg-btn.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.seg-btn[disabled] { opacity: .55; cursor: not-allowed; }
.vcard { padding: 12px; }

/* Free stock media grid */
.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.stock-cell { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); }
.stock-cell img { width: 100%; height: 110px; object-fit: cover; display: block; }
.stock-cell .stock-save { position: absolute; right: 6px; bottom: 6px; opacity: 0; transition: opacity .12s; }
.stock-cell:hover .stock-save { opacity: 1; }
.stock-badge { position: absolute; left: 6px; top: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 999px; }

/* composer background photo selection */
.stock-cell.sel { outline: 3px solid var(--orange); outline-offset: -3px; }

/* Google sign-in button + divider on the login card */
.gbtn { width: 100%; background: #fff; color: #1d1f20; border: 1px solid var(--line); font-weight: 600; }
.gbtn:hover { background: var(--bg); }
.login-divider { display: flex; align-items: center; text-align: center; color: var(--muted); font-size: 12px; margin: 2px 0; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.login-divider span { padding: 0 10px; }

/* Reusable command / chat shell (Cursor-style) */
.cmdshell { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.cmd-log { height: 46vh; min-height: 300px; max-height: 620px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.cmd-log:empty::before { content: 'Describe what you want. e.g. "bold dark banner, headline Clean your phone, orange CTA".'; color: var(--muted); font-size: 13px; }
.cmd-msg { font-size: 13.5px; line-height: 1.45; }
.cmd-msg.user { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); display: flex; gap: 8px; }
.cmd-msg.bot { color: var(--muted); white-space: pre-wrap; }
.cmd-msg { position: relative; }
/* The picture the copilot just made, in the conversation. Capped rather than
   full width: a square render at the chat's full measure pushes everything that
   follows off the screen, and this is a thing to glance at and approve. */
.cmd-img { display: block; margin: 8px 0 2px; width: fit-content; max-width: min(320px, 100%); border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line); line-height: 0; }
.cmd-img img { display: block; width: 100%; height: auto; }
.cmd-img.icon { max-width: 96px; border-radius: 22%; }
/* A vertical ad video: tall, so it is capped by height rather than width. */
.cmd-vid { max-width: min(240px, 60%); }
.cmd-vid video { display: block; width: 100%; height: auto; background: #000; }
.cmd-img:hover { border-color: #eab989; }
.cmd-prompt { color: var(--orange); font-weight: 700; }
.cmd-artifact { border-top: 1px dashed var(--line); padding-top: 10px; }
.cmd-input { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding: 8px 10px; background: var(--bg); }
.cmd-input .cmd-in { flex: 1; border: none; background: none; resize: none; font: inherit; padding: 4px 0; outline: none; max-height: 120px; }
.cmd-input .cmd-send { padding: 6px 14px; }

/* command shell: session header */

/* HTML5 studio: compact toolbar + taller chat + saved-banner thumbnails */
.cmdshell.tall .cmd-log { height: 54vh; max-height: 700px; }

/* Collapsible shell: a one-line teaser bar; the log + composer unfold on click. */
.cmd-cap { display: none; width: 100%; align-items: center; gap: 10px; padding: 11px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; }
.cmd-cap:hover { border-color: var(--orange); color: var(--ink); }
.cmd-cap svg { width: 17px; height: 17px; flex: none; }
.cmd-cap .cap-t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdshell.collapsible .cmd-cap { display: flex; }
.cmdshell.collapsible:not(.mini) .cap-chev { transform: rotate(180deg); }
.cmdshell.collapsible:not(.mini) .cmd-cap { margin-bottom: 10px; }
.cmdshell.collapsible.mini .cmd-log, .cmdshell.collapsible.mini .cmd-input { display: none !important; }

/* Campaigns daily board */
.board-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.board-filters .field { min-width: 140px; max-width: 240px; }
/* Why the newest row is the date it is. Sits above the table, because that is
   where the question gets asked. */
.bd-fresh {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px 0 0; padding: 9px 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  font-size: 12.5px; line-height: 1.45; color: var(--muted);
}
.bd-fresh svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.bd-fresh b { color: var(--ink); font-weight: 600; }
/* The weekday under a date: a second line, quieter, never competing with it. */
.bd-dow { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 1px; text-transform: capitalize; }
.kpi-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 12px; }
.kpi { flex: 1; min-width: 110px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.kpi-v { font-size: 18px; font-weight: 700; }
.kpi-l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.board-wrap { overflow-x: auto; }
table.stats.board th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.stats.board td.bd-date { position: sticky; left: 0; background: var(--panel); font-weight: 600; white-space: nowrap; }
table.stats.board thead th:first-child { position: sticky; left: 0; z-index: 1; }
table.stats.board tfoot td { font-weight: 700; border-top: 2px solid var(--line); }


/* saved-creatives grid: cards align to the row top (no stacking margin) */
.lib-grid .list-item + .list-item { margin-top: 0; }

/* slideshow multi-image list */
.ss-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ss-item { display: flex; flex-direction: column; gap: 4px; width: 120px; }
.ss-item img { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.ss-item input { font-size: 11px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; }
.ss-item [data-rm] { align-self: flex-end; font-size: 11px; }

/* collapsible "More tools" in the studio */
details.more { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 0 16px; }
details.more > summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--muted); list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: '▸ '; }
details.more[open] > summary::before { content: '▾ '; }
details.more[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 14px; }
details.more .card { border: none; border-radius: 0; padding: 0 0 14px; }
details.more .card + .card { border-top: 1px solid var(--line); padding-top: 14px; }

/* keep chat (command-shell) media previews compact so they fit in the chat */
.cmd-artifact video, .cmd-artifact > img { max-height: 280px; max-width: 100%; width: auto; border-radius: 8px; }
.cmd-artifact .sp-video { display: flex; flex-direction: column; align-items: flex-start; }

/* accordions expand downward cleanly (no scroll-anchor jump) */
.main, .stack { overflow-anchor: none; }

/* ============== The chat-centric shell, on the system above ============== */

/* Sidebar */
.shell { grid-template-columns: 262px 1fr; }
.side { background: var(--sidebar); border-right: 1px solid var(--line); padding: 12px 10px; gap: 10px; }
.side .brand { padding: 6px 8px 2px; }
.side-section { gap: 3px; }
.side-head { padding: 10px 8px 2px; }
.side-link, .side nav button { border-radius: 10px; padding: 9px 10px; font-size: 14px; font-weight: 500; }
.side-link:hover, .side nav button:hover { background: var(--hover); }
/* Where you are is warm. The gray active pill said "somewhere"; the ember one
   says "here", in the same voice as every other selected thing on the page. */
.side-link.active, .side nav button.active { background: var(--tint); color: var(--orange-ink); font-weight: 600; }

button.small { border-radius: 7px; padding: 4px 10px; font-size: 12.5px; }

/* Inputs — the focus ring is the brand's, not the browser's gray */
input, select, textarea { border-radius: 10px; border-color: var(--line); }
input:focus, select:focus, textarea:focus { outline: none; border-color: #eebd8a; box-shadow: var(--focus); }

/* Cards — a hairline and one quiet shadow carry the depth */
.card { border-radius: var(--r-l); border-color: var(--line); box-shadow: var(--shadow-1); }

/* Tabs — segmented pill; the active one answers in ember */
.tabbar { border-bottom: none; gap: 4px; background: var(--sidebar); padding: 4px; border-radius: 12px; display: inline-flex; max-width: 100%; }
.tab { border-radius: 9px; padding: 6px 14px; text-transform: none; font-weight: 500; }
.tab:hover { color: var(--ink); background: var(--hover); }
/* Navigation answers in a quiet voice: the active tab is the raised white pill,
   not an ember word. The warmth stays for SELECTIONS (chips, rows, nav rail);
   where-am-I in a tab strip only needs relief, not color. */
.tab.active { background: var(--panel); color: var(--ink); border-bottom: none; box-shadow: var(--shadow-1); }

/* Roomier main + lighter headings */
.main { padding: 22px 26px 64px; }
.ws-head h1, .head h1 { font-size: 24px; font-weight: 600; }

/* ===== ChatGPT-style chat composer (command shell) — tick 2 ===== */
.cmdshell { border: none; background: transparent; overflow: visible; }
.cmd-log { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.cmd-log:empty { border-style: dashed; }
.cmd-input {
  border: 1px solid var(--line); border-radius: 26px; background: var(--panel);
  padding: 6px 6px 6px 18px; margin-top: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.cmd-input:focus-within { border-color: #eebd8a; box-shadow: 0 3px 16px rgba(50, 40, 20, .09); }
.cmd-input .cmd-prompt { display: none; }
.cmd-input .cmd-in { padding: 9px 0; max-height: 160px; }
.cmd-input .cmd-send {
  flex: none; width: 38px; height: 38px; padding: 0; border-radius: 999px;
  display: grid; place-items: center; font-size: 0;
}
.cmd-input .cmd-send::before { content: '↑'; font-size: 19px; font-weight: 800; line-height: 1; }
.cmd-input .cmd-send:disabled { opacity: .35; }

/* Chat empty-state greeting (tick 3) */
.cmd-chip { background: #fff; border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 500; }
.cmd-chip:hover { background: var(--hover); }

/* sidebar icons (tick 4) */
.side-link { display: flex; align-items: center; gap: 10px; }
.side-link svg { width: 17px; height: 17px; opacity: .72; flex: none; }
.side-link.active svg { opacity: 1; }

/* Login + final polish (tick 5) */
.login { background: var(--bg); }
.login-card { border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 44px rgba(0,0,0,.06); padding: 32px; width: 360px; }
.login-card .brand { justify-content: center; font-size: 17px; }
.login-card .muted { text-align: center; margin: -2px 0 6px; }
.login-card input, .login-card > button, .login-divider + input { border-radius: 12px; }
.gbtn { border-radius: 12px; padding: 11px; }
.card h3 { font-weight: 600; }
.ws-head .s, .head .s { color: var(--muted); }

/* Connectors gallery + login title */
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.conn-card { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.conn-card.off { opacity: .6; }
.conn-head { display: flex; align-items: center; gap: 10px; }
.conn-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 18px; border: 1px solid rgba(0,0,0,.08); }
.conn-name { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.conn-desc { font-size: 13px; color: var(--muted); flex: 1; }
.conn-foot { margin-top: 4px; }
.login-title { font-size: 22px; font-weight: 600; margin: 2px 0 0; text-align: center; letter-spacing: -.01em; }

/* Section landing: example starter cards for different businesses (tick 2) */

/* Sidebar chat history grouped by project (tick 3) */
.side { overflow: hidden; }
.chat-history { flex: 1 1 auto; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-item { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; color: var(--ink); text-align: left; padding: 7px 10px; border-radius: 9px; font-weight: 500; font-size: 13.5px; }
.chat-item:hover { background: var(--hover); }
.chat-item.sel { background: var(--hover); }
.chat-ico { flex: none; font-size: 13px; opacity: .85; }
.chat-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Composer: project dropdown + attach (tick 4) */
.cmd-input { flex-direction: column; align-items: stretch; padding: 10px 14px; }
.cmd-tools { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cmd-tools .cmd-proj { width: auto; max-width: 190px; border-radius: 999px; padding: 6px 12px; font-size: 13px; background: var(--sidebar); border-color: var(--line); }
.cmd-tools .cmd-attach { background: none; border: 1px solid var(--line); color: var(--muted); width: 34px; height: 34px; padding: 0; border-radius: 999px; font-size: 15px; display: grid; place-items: center; }
.cmd-tools .cmd-attach:hover { background: var(--hover); }
.cmd-tools .cmd-send { margin-left: auto; }
.cmd-attach-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cmd-att { display: inline-flex; align-items: center; gap: 6px; background: var(--sidebar); border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px 4px 10px; font-size: 12px; }
.cmd-att button { background: none; border: none; color: var(--muted); padding: 0; font-size: 12px; cursor: pointer; }

/* Text chat variants (tick 5) */
.tx-var { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 8px; background: #fff; }
.tx-var .t { font-weight: 600; }

/* Chat-centric section (Images model, tick 1) */
.studio-center { max-width: 760px; margin: 6px auto 0; }
.saved-wrap { max-width: 1120px; margin: 30px auto 0; }
.saved-h { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.cmd-tools .cmd-fmt { width: auto; max-width: 200px; border-radius: 999px; padding: 6px 12px; font-size: 13px; background: var(--sidebar); border-color: var(--line); }

/* Simplified composer: single-line auto-grow input + mic (tick 4 refinements) */
.cmd-input .cmd-in { min-height: 0; height: auto; resize: none; overflow-y: hidden; line-height: 1.45; padding: 8px 0; }
.cmd-tools .cmd-mic { background: none; border: 1px solid var(--line); color: var(--muted); width: 34px; height: 34px; padding: 0; border-radius: 999px; font-size: 14px; display: grid; place-items: center; }
.cmd-tools .cmd-mic:hover { background: var(--hover); }

/* Top-tier composer controls: clean SVG icons, one row, vertically centered */
.cmd-tools { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.cmd-input .cmd-attach, .cmd-input .cmd-mic { width: 36px; height: 36px; border: none; background: none; color: var(--muted); border-radius: 10px; display: grid; place-items: center; padding: 0; }
.cmd-input .cmd-attach:hover, .cmd-input .cmd-mic:hover { background: var(--hover); color: var(--ink); }
.cmd-input .cmd-attach svg, .cmd-input .cmd-mic svg { width: 18px; height: 18px; display: block; }
.cmd-tools .cmd-proj, .cmd-tools .cmd-fmt { height: 36px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 0 12px; font-size: 13px; color: var(--ink); max-width: 180px; }
.cmd-tools .cmd-proj:hover, .cmd-tools .cmd-fmt:hover { background: var(--hover); }
.cmd-input .cmd-send { margin-left: auto; width: 36px; height: 36px; padding: 0; border-radius: 999px; font-size: 0; display: grid; place-items: center; background: var(--orange); border: 1px solid var(--orange); }
.cmd-input .cmd-send::before { content: none; }
.cmd-input .cmd-send svg { width: 18px; height: 18px; color: #fff; display: block; }
.cmd-input .cmd-send:disabled { opacity: .4; }

/* Single-row composer with + menu (mic left of send) */
.cmd-input { position: relative; flex-direction: column; padding: 6px; }
.cmd-row { display: flex; align-items: center; gap: 4px; }
.cmd-row .cmd-in { flex: 1; min-height: 24px; height: auto; padding: 9px 8px; line-height: 1.4; }
.cmd-plus { flex: none; width: 36px; height: 36px; border: none; background: none; color: var(--muted); font-size: 22px; font-weight: 400; line-height: 0; border-radius: 999px; display: grid; place-items: center; padding: 0 0 3px; }
.cmd-plus:hover { background: var(--hover); color: var(--ink); }
.cmd-row .cmd-mic, .cmd-row .cmd-send { flex: none; }
/* Listening. Until now the button looked identical whether or not it was
   recording, which is the one thing a microphone has to tell you. */
.cmd-mic.on { color: var(--orange); border-color: var(--orange); background: var(--tint); }
.cmd-mic.on svg { animation: mic-pulse 1.4s ease-in-out infinite; }
@keyframes mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cmd-mic.on svg { animation: none; } }
/* The pause-then-send countdown, and where a speech error is said out loud. */
.cmd-countdown { margin: 6px 2px 0; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.cmd-countdown .link { font-size: 12.5px; }
.cmd-plus-menu { position: absolute; bottom: calc(100% + 10px); left: 4px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 34px rgba(0,0,0,.14); padding: 8px; min-width: 252px; z-index: 60; display: flex; flex-direction: column; gap: 2px; }
.cmd-photo { display: flex; align-items: center; gap: 12px; text-align: left; background: none; border: none; color: var(--ink); padding: 10px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.cmd-photo svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.cmd-photo:hover { background: var(--hover); }
.pm-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; }
.pm-field span { font-size: 13px; color: var(--muted); }
.pm-field select { width: auto; max-width: 150px; border-radius: 9px; padding: 6px 8px; font-size: 13px; }

/* ===== Sidebar: fixed header + scroll middle + fixed footer (own scroll) ===== */
.shell { height: 100vh; }
.main { overflow-y: auto; height: 100vh; }
.side { display: flex; flex-direction: column; height: 100vh; overflow: hidden; padding: 0; gap: 0; }
.side-header { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 8px 14px; }
.side-header .brand { font-size: 15px; }
/* The brand slot is the Copilot entry now - the most-used door gets the
   biggest handle, ChatGPT-style. */
.side-copilot { display: flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink); padding: 6px 8px; border-radius: 10px; cursor: pointer; min-width: 0; }
.side-copilot svg { width: 18px; height: 18px; color: var(--orange); flex: none; }
.side-copilot:hover { background: var(--hover); }
.side-copilot.active { background: var(--hover); }
/* A long chat title must never widen the sidebar: the scroller clips X and
   every row is pinned to the column width, so ellipsis - not overflow - is
   what absorbs the length. Without this the folder's hover actions drift past
   the visible edge (inner width measured 577px vs 261 visible). */
.side-scroll { overflow-x: hidden; }
.proj-chats { min-width: 0; max-width: 100%; }
.chat-item { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }

/* The fold under long chat lists. */
.chats-more { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.chats-more:hover { background: var(--hover); color: var(--ink); }
.side-header-actions { display: flex; gap: 2px; }
.side-icon { width: 32px; height: 32px; border: none; background: none; color: var(--muted); border-radius: 8px; display: grid; place-items: center; padding: 0; }
.side-icon:hover { background: var(--hover); color: var(--ink); }
.side-icon svg { width: 18px; height: 18px; }
.side-search { flex: none; padding: 0 10px 8px; }
.side-search input { border-radius: 999px; padding: 8px 12px; font-size: 13px; }
.side-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.chat-history { flex: none; overflow: visible; }
.side-footer { flex: none; border-top: 1px solid var(--line); padding: 8px; }
.user-btn { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; padding: 8px; border-radius: 12px; text-align: left; }
.user-btn:hover { background: var(--hover); }
.user-av { width: 30px; height: 30px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.user-meta { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.user-name { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-tier { font-size: 12px; color: var(--muted); }
/* collapse */
.shell.collapsed { grid-template-columns: 0 1fr; }
.shell.collapsed .side { display: none; }

/* Centered platform switch + section title + composer chips */
.studio-top { display: flex; justify-content: center; padding: 12px 0 4px; }
.studio-title { text-align: center; font-size: 26px; font-weight: 600; letter-spacing: -.01em; margin: 26px 0 16px; }
.cmd-below { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 4px 2px; }
.cmd-below:empty { display: none; }
.cmd-chip-b { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 500; }
.cmd-chip-b:hover { background: var(--hover); color: var(--ink); }
.cmd-chip-b svg { width: 15px; height: 15px; }

/* Fix collapsed sidebar: single column, main full-width */
.shell.collapsed { grid-template-columns: 1fr; }

/* Uniform square saved-creative cards (My images / videos / banners) */
/* ===== Uniform creative card (Library + all section grids) ===== */
.lib-grid { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 18px; align-items: start; }
.cc { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; height: 246px; transition: box-shadow .16s ease, transform .16s ease; }
.cc:hover { box-shadow: 0 8px 24px rgba(20, 23, 28, .08); transform: translateY(-2px); }
.cc-media { position: relative; height: 152px; flex: none; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.cc-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.cc-thumb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #fff; }
.cc-textprev { padding: 16px 16px; margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; height: 100%; width: 100%; }
.cc-empty { color: var(--muted); font-size: 12px; }
.cc-play { position: absolute; inset: 0; margin: auto; width: 42px; height: 42px; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; border-radius: 50%; font-size: 15px; pointer-events: none; }
.cc-star { position: absolute; top: 9px; right: 9px; width: 28px; height: 28px; border: none; background: rgba(255,255,255,.92); color: #b9942f; border-radius: 50%; display: grid; place-items: center; font-size: 14px; padding: 0; opacity: 0; transition: opacity .12s ease; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cc:hover .cc-star, .cc-star.on { opacity: 1; }
.cc-star.on { color: var(--orange); }
.cc-title { padding: 11px 13px 0; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.34; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: calc(1.34em * 2 + 11px); cursor: pointer; }
.cc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 42px; padding: 0 8px 0 13px; }
.cc-kind { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A creative code is an identifier, so it renders verbatim. Uppercasing it loses
   the kind prefix (i vs I) and flattens the project's CamelCase, turning
   GreenSport into GREENSPORT, which no longer matches the campaign name or the
   filename it has to be matched against. */
.cc-kind.code, .pv-kind.code { text-transform: none; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.cc-acts { display: flex; gap: 1px; flex: none; }
.cc-ic { width: 28px; height: 28px; border: none; background: none; color: var(--muted); border-radius: 8px; display: grid; place-items: center; font-size: 13px; padding: 0; }
.cc-ic:hover { background: var(--hover); color: var(--ink); }
.cc-ic svg { width: 15px; height: 15px; }
.cc-ic[data-delcr]:hover { color: var(--bad); }

/* ===== Full-screen chat instance (/c/<id>) — ChatGPT-style ===== */
.main.chat-mode { padding: 0; overflow: hidden; height: 100vh; display: flex; flex-direction: column; }
.chatview { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Nearly the full width of the pane, as asked. The 768px cap made sense for a
   text-only chat and starved the thing this chat actually produces: a grid of
   image variants got two cramped columns in a third of the screen. Prose stays
   readable because the message bubbles carry their own width caps. */
.cmdshell.chat-full { flex: 1 1 auto; min-height: 0; width: 100%; max-width: min(1520px, 96%); margin: 0 auto; padding: 0 clamp(16px, 3vw, 48px); display: flex; flex-direction: column; }
/* Bot text should not run 1500px wide even when the shell does. */
.cmdshell.chat-full .cmd-msg.bot { max-width: 860px; }
.cmdshell.chat-full .cmd-msg.user > span:last-child { max-width: 560px; }
/* The input row reads better slightly narrower than the artifact area. */
.cmdshell.chat-full .cmd-input { max-width: 980px; width: 100%; margin: 0 auto 18px; }
.cmdshell.chat-full .cmd-log { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; border: none; background: transparent; padding: 28px 8px 16px; }
.cmdshell.chat-full .cmd-log:empty { border: none; }


/* Owner message = light bubble on the right; AI message = plain, full width */
.cmd-msg.user { justify-content: flex-end; font-family: inherit; }
.cmd-msg.user .cmd-prompt { display: none; }
.cmd-msg.user > span:last-child { background: var(--sidebar, #f4f4f5); color: var(--ink); border-radius: 18px; padding: 11px 16px; max-width: 78%; font-size: 16px; line-height: 1.55; letter-spacing: 0.005em; white-space: pre-wrap; }
.cmd-msg.bot { color: var(--ink); font-size: 15px; line-height: 1.6; max-width: 100%; }

/* ===== Chats in the sidebar ===== */
.pchev { width: 15px; height: 15px; flex: none; color: var(--muted); transition: transform .15s ease; }
.pname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A count sits on its own row as a flex child. It used to be absolutely
   positioned against a folder row that no longer exists, which stacked every
   count in the middle of the project menu. */
.proj-count { flex: none; font-size: 11px; color: var(--muted); font-weight: 600; }
.proj-chats { display: flex; flex-direction: column; gap: 1px; }
.chat-item.nested { font-size: 13px; padding: 6px 9px; }
.chat-item .chat-title, .chat-title { min-width: 0; }

/* ===== Collapsed sidebar rail: a slim strip of icons, never nothing ===== */
.side-rail { display: none; }
.shell.collapsed { grid-template-columns: 60px 1fr; }
.shell.collapsed .side { display: none; }
.shell.collapsed .side-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100vh; padding: 10px 0; border-right: 1px solid var(--line); background: var(--panel); }
.rail-btn { width: 40px; height: 40px; border: none; background: none; color: var(--muted); border-radius: 10px; display: grid; place-items: center; padding: 0; cursor: pointer; }
.rail-btn:hover { background: var(--hover); color: var(--ink); }
.rail-btn svg { width: 20px; height: 20px; }
.rail-spacer { flex: 1 1 auto; }
.rail-av { width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: #fff; border: none; font-weight: 700; font-size: 13px; display: grid; place-items: center; cursor: pointer; margin-bottom: 4px; padding: 0; line-height: 1; }

/* ===== Copilot (manage) section ===== */
.copilot-hint { max-width: 640px; margin: 14px auto 0; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* ===== Copilot roadmap: a plan that spends money =====
   Two things are true about a roadmap and neither used to be visible: the steps
   run in ORDER, and only SOME of them touch the live account. The rail says
   both. One continuous line down the left, hairline while the plan is still a
   draft, ember on the stretch where it starts changing the account — so the
   part that costs money is visible before a word is read. State lives on the
   node, nowhere else, which is why the row itself never changes color: a plan
   with a failed step in it should still read as one calm object you can review.

   The old card was a checklist of emoji with the account's refusal ellipsized
   into a gray line. The error is the one moment this card exists for; it gets a
   block, a sentence in the interface's voice, and the account's own words one
   click away. */
/* Wide where there is room and full-width where there is not. A plan is a table
   of decisions, so the account name, the target and the before/after want to sit
   on one line; 560px folded most diffs onto two. The widget rule below still
   wins for the 400px dock. */
.roadmap { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel); padding: 0 18px 14px; margin: 8px 0; align-self: stretch; width: 100%; max-width: 760px; box-shadow: var(--shadow-1); }
/* The same card in the 400px widget. It used to keep its 560px ambition and get
   clipped to 96%, which is what "отображается узко" was: a plan squeezed into a
   column too narrow to read, with its longest result cut off mid-sentence. */
.tst-widget .roadmap { width: 100%; padding: 0 12px 12px; }
.rm-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 13px 0 11px; border-bottom: 1px solid var(--line); margin-bottom: 3px; }
.rm-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.rm-live { font-size: 11.5px; font-weight: 600; color: var(--orange-ink); background: var(--tint); border-radius: 999px; padding: 2px 9px; }
.rm-h { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: 14px; margin-bottom: 10px; }
.rm-steps { display: flex; flex-direction: column; }
.rm-step { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; }
/* The rail. Trimmed at the ends so the plan starts and stops at a node instead
   of bleeding into the header and the buttons. */
/* The negative margin is what makes the line CONTINUOUS: the row keeps its 9px
   of breathing room, and the rail reaches past it into the neighbouring rows so
   the plan reads as one run instead of five dashes. */
.rm-rail { position: relative; flex: none; width: 18px; align-self: stretch; margin: -9px 0; }
.rm-rail::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.rm-step:first-child .rm-rail::before { top: 22px; }
.rm-step:last-child .rm-rail::before { bottom: calc(100% - 22px); }
.rm-step.live .rm-rail::before { background: #f0cba4; }
.rm-node { position: absolute; left: 2px; top: 15px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); display: grid; place-items: center; font-size: 9px; font-weight: 700; line-height: 1; color: transparent; }
.rm-step.live .rm-node { border-color: #eab989; }
/* Now, and unmistakably now: the only solid ember on the rail. */
.rm-step.running .rm-node { border-color: var(--orange); background: var(--orange); animation: rm-pulse 1.4s ease-in-out infinite; }
/* Done is confirmation, not celebration. A saturated green dot per finished
   step out-shouted the one button the card wants you to press. */
.rm-step.done .rm-node { border-color: #bfdccb; background: #e8f3ec; color: var(--ok); }
.rm-step.failed .rm-node { border-color: var(--bad); background: var(--bad); color: #fff; }
.rm-step.skipped .rm-node { border-style: dotted; border-color: #d8d2c8; }
@keyframes rm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 130, 31, .32); } 50% { box-shadow: 0 0 0 5px rgba(246, 130, 31, 0); } }
.rm-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rm-line { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.rm-ico { flex: none; font-size: 13px; }
.rm-title { font-size: 14px; line-height: 1.35; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-step.done .rm-title, .rm-step.skipped .rm-title { color: var(--muted); }
/* The diff is numbers next to numbers; they line up. */
.rm-diff { display: block; font-size: 12px; line-height: 1.45; color: var(--muted); font-variant-numeric: tabular-nums; }
.rm-diff b { color: var(--ink); font-weight: 600; }
/* A result is usually four words and occasionally a paragraph: an audit comes
   back with a score, a diagnosis and the one thing to do next. On one nowrap
   line that paragraph was an ellipsis, so the most useful sentence the copilot
   ever writes was the one you could not read. It wraps. */
.rm-result { font-size: 12px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
/* One block shape for everything that stops a step: what is missing, what is
   blocked, what failed. It wraps — a refusal you cannot finish reading is a
   dead end, which is exactly the complaint this replaces. */
.rm-note { display: block; font-size: 12px; line-height: 1.45; color: var(--muted); border-left: 2px solid var(--line); padding: 1px 0 1px 9px; }
.rm-note.need, .rm-note.blocked { border-left-color: #e0b978; color: var(--warn); }
/* The node is red and the rule beside it is red; the sentence does not need to
   be. Red text is for the fact that something failed, and that fact has already
   been made twice — a third time only makes the sentence harder to read, and
   the sentence is the part that tells you what to do. */
.rm-note.fail { border-left-color: var(--bad); color: var(--ink); }
.rm-raw { background: none; border: none; padding: 0; margin-left: 7px; color: var(--muted); font-size: 11.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.rm-raw:hover, .rm-raw:active { background: none; border: none; color: var(--ink); }
.rm-rawtext { display: block; margin-top: 6px; font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); background: var(--bg2); border-radius: var(--r-s); padding: 7px 9px; white-space: pre-wrap; word-break: break-word; max-height: 150px; overflow: auto; }
.rm-thumb { flex: none; align-self: center; width: 40px; height: 40px; border-radius: var(--r-s); object-fit: cover; border: 1px solid var(--line); }
.rm-one { flex: none; align-self: center; background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: var(--r-s); padding: 3px 10px; font-size: 12px; font-weight: 600; }
.rm-one:hover, .rm-one:active { background: var(--tint); border-color: #eab989; color: var(--orange-ink); }
.rm-btns { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 11px; padding-top: 12px; border-top: 1px solid var(--line); }
/* The title can ellipsize; the step it names cannot go missing. Below the
   widget's width there is no room for a per-step button beside a wrapped
   sentence, so it drops under the body instead of squeezing it. */
@media (max-width: 460px) { .rm-step { flex-wrap: wrap; } .rm-one { margin-left: 28px; } }
.tst-head-btns { display: flex; align-items: center; gap: 2px; }
.tst-widget-head .icon-btn { width: 28px; height: 28px; border: none; background: transparent; color: var(--muted); font-size: 14px; border-radius: var(--r-s); }
.tst-widget-head .icon-btn:hover { background: var(--hover); color: var(--ink); border: none; }
.rm-cancel { background: transparent; border-color: transparent; color: var(--muted); font-weight: 500; }
.rm-cancel:hover, .rm-cancel:active { background: var(--hover); border-color: transparent; color: var(--ink); }
.rm-dl { font-size: 12px; color: var(--orange-ink); text-decoration: none; font-weight: 600; }
.rm-dl:hover { text-decoration: underline; }

/* ===== Library: content-type tabs + unified grid ===== */
.ws-head { align-items: flex-start; }
.lib-proj { width: auto; max-width: 200px; border-radius: 999px; padding: 7px 12px; font-size: 13px; }
.lib-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 18px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.lib-tab { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 600; }
.lib-tab:hover { background: var(--hover); color: var(--ink); }
.lib-tab.active { background: var(--tint); border-color: var(--orange); color: var(--orange-ink); }
.lib-count { font-size: 11px; font-weight: 700; background: var(--hover); color: var(--muted); border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center; }
.lib-tab.active .lib-count { background: #fff; color: var(--orange-ink); }

/* ===== Unified creative preview modal ===== */
.modal.modal-lg { max-width: 640px; }
.pv-stage { border-radius: 12px; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 14px; }
/* Only the Library creative modal wants a fixed-height stage; inline
   previews (SERP, UAC, PMax mocks) must GROW with the card, never clip it. */
.pv-stage.pv-fixed { height: 380px; overflow: hidden; }
.pv-fit { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; display: block; }
.pv-frame { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pv-text { max-width: 460px; padding: 8px 20px; text-align: center; }
.pv-text .pv-h { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 12px; }
.pv-text .pv-p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.pv-text .pv-cta { display: inline-block; margin-top: 16px; background: var(--orange); color: #fff; border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 600; }
.pv-empty { color: var(--muted); font-size: 13px; }
.pv-bar { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 4px; }
.pv-kind { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.pv-acts { display: flex; gap: 2px; }
.pv-acts .cc-ic.on { color: var(--orange); }
.pv-projlabel { font-size: 12px; color: var(--muted); margin: 12px 0 6px; }

/* ===== Reports: table artifact, card, preview ===== */
.rep-artifact { width: 100%; max-width: 100%; margin: 4px 0; }
.rep-h { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 8px; text-transform: capitalize; }
.rep-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 10px; max-height: 340px; }
.rep-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rep-table th, .rep-table td { padding: 7px 11px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.rep-table thead th { background: var(--bg); color: var(--muted); font-weight: 700; position: sticky; top: 0; z-index: 1; }
.rep-table td.num, .rep-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.rep-table tbody tr:last-child td { border-bottom: none; }
.rep-table .rep-total td { font-weight: 700; background: var(--tint); position: sticky; bottom: 0; border-top: 1px solid var(--line); }
.rep-artifact .rm-dl { display: inline-block; margin-top: 8px; }
.cc-report { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 12px; width: 100%; }
.cc-rep-ico { font-size: 30px; line-height: 1; }
.cc-rep-meta { font-size: 12.5px; color: var(--ink); font-weight: 600; text-transform: capitalize; }
.cc-rep-tot { font-size: 11px; color: var(--muted); }
.pv-report { align-self: stretch; flex: 1; width: 100%; height: 100%; overflow: auto; }
.pv-report .rep-wrap { border: none; max-height: none; }

/* Chat placeholders never wrap to a second line (one line, ellipsis if long). */
.cmd-in::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Automations ===== */
/* The app's only true state toggle. .chip.on stays a multi-select filter (project
   chips in the creative preview, account chips here), so reusing it for "enabled"
   would give two identical-looking vocabularies that mean different things. */
.switch { position: relative; width: 34px; height: 20px; flex: none; padding: 0; border: 1px solid var(--line); background: #e9ecef; border-radius: 999px; transition: background .14s ease, border-color .14s ease; }
.switch .switch-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.22); transition: transform .14s ease; }
.switch.on { background: var(--orange); border-color: var(--orange); }
.switch.on .switch-knob { transform: translateX(14px); }
.switch:disabled { opacity: .5; }

.auto-starters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 620px; margin: 16px auto 0; }
.auto-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.auto-head .saved-h { margin: 0; }

.cc-auto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; padding: 12px; width: 100%; }
.cc-auto-ico { font-size: 28px; line-height: 1; }
.cc-auto-kind { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.cc-auto-sched { font-size: 11px; color: var(--muted); }
.cc-auto-meta { display: flex; align-items: center; gap: 6px; padding: 4px 13px 0; font-size: 11px; color: var(--muted); cursor: pointer; min-height: 20px; overflow: hidden; }
.cc-auto-acct { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-auto-when { white-space: nowrap; }
.cc.off { opacity: .62; }
.cc.off:hover { opacity: 1; }

/* The proposed-automation confirm card, built on .roadmap. */
.autocard { max-width: 560px; }
.ac-name { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.ac-warn { background: #faf0dd; border: 1px solid #eeddc0; color: var(--warn); padding: 9px 11px; border-radius: 9px; font-size: 12.5px; margin-bottom: 12px; }
.ac-safe { background: #e8f4ec; border: 1px solid #cde5d6; color: var(--ok); padding: 9px 11px; border-radius: 9px; font-size: 12.5px; margin-bottom: 12px; }
.ac-lbl { font-size: 12px; color: var(--muted); margin: 14px 0 6px; }
.ac-runs { max-height: 260px; overflow: auto; }

/* ===== Data section ===== */
/* A toast rather than alert() for "copied": alert steals focus, which is exactly
   wrong for feedback on an action the user is in the middle of. */
#toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px); background: #2a2620; box-shadow: var(--shadow-pop); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 60; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { background: var(--warn); }

.snip { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 12px; background: #fff; }
.snip-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.snip-code { margin: 0; padding: 10px 12px; background: var(--bg); border-radius: 8px; font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.snip .s { margin-top: 8px; }

/* The secret is shown exactly once, so it gets its own weight on the page. */
.key-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; word-break: break-all; user-select: all; }

/* ---- creative tests ---- */
/* The picker reuses the Library card in a select mode, so it inherits every
   thumbnail behaviour instead of growing a second component that would drift. */
.cc-pick { cursor: pointer; position: relative; }
.cc-pick .cc-media { position: relative; }
.cc-check {
  position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 6px;
  background: var(--panel); border: 1.5px solid var(--line); display: flex; align-items: center;
  justify-content: center; font-size: 14px; line-height: 1; color: #fff;
}
.cc-pick.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.cc-pick.sel .cc-check { background: var(--accent); border-color: var(--accent); }
.cc-blocked { opacity: .55; cursor: not-allowed; }
.cc-blockmsg { font-size: 11px; line-height: 1.3; padding: 0 8px 8px; color: var(--bad); }

/* Share of impressions by placement. This bar is the headline output: reaching
   YouTube at all is Google's own verdict on a creative, and it is rare. */
.pl-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); margin: 6px 0 10px; }
.pl-seg { display: block; height: 100%; }
.pl-youtube, .pl-youtube_watch, .pl-youtube_search { background: #e0524a; }
.pl-content { background: #4a7fe0; }
.pl-search { background: #3fa46a; }
.pl-search_partners { background: #7fbf9a; }
.pl-mixed, .pl-unknown { background: #9aa0a6; }
tr.pl-note td { padding-top: 0; border-top: 0; opacity: .75; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--tint); }

/* ---- image variants ---- */
/* Previews are for SCANNING, not admiring: cards cap at 380px instead of
   stretching to fill, so two variants sit as a comparable pair and a wide screen
   shows more of the conversation rather than one enormous banner. Click-throughs
   (PNG, the saved creative) carry the full size. */
/* ASO filmstrip: slides scroll horizontally in store order. A FIXED preview
   height with auto width keeps every slide the same visual size while the
   aspect stays honest per store (App Store 1290x2796 vs Play 1080x1920, and
   event 16:9 next to 9:16). */
.ss-strip { display: flex; gap: 12px; overflow-x: auto; padding: 8px 2px; align-items: flex-start; }
.ss-slide { flex: 0 0 auto; margin: 0; max-width: 320px; }
.ss-slide img { height: 300px; width: auto; max-width: 320px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); display: block; }
.ss-slide figcaption { margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.ss-edit { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; max-width: 230px; }
.ss-edit { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--panel); }
.ss-edit-f { display: flex; flex-direction: column; gap: 3px; }
.ss-edit input { width: 100%; font-size: 12px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: inherit; }
.ssp-h { margin: 10px 0 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.ssp-concepts { display: flex; gap: 10px; flex-wrap: wrap; }
.ssp-concept { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; }
.ssp-concept img { height: 380px; width: auto; border-radius: 8px; display: block; }
.ssp-concept > .s { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.ssp-concept.sel { border-color: var(--orange); background: var(--tint); }
.ssp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ssp-card { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; background: var(--panel); }
.ssp-card.sel { border-color: var(--orange); background: var(--tint); }
.ssp-title { margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ssp-editrow { display: flex; flex-direction: column; gap: 3px; margin-bottom: 7px; }
.ssp-editrow input { width: 100%; font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: inherit; font-weight: 600; }
.ssp-editrow input.ssp-sub { font-weight: 400; font-size: 11.5px; }
.ssp-list { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; }
.ssp-tpl { color: var(--muted); font-size: 11px; margin-right: 4px; }
.ss-slide-acts { display: flex; gap: 2px; margin-top: 4px; }
.ss-act { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 4px; background: none; border: 0; border-radius: 8px; color: var(--muted); font: inherit; font-size: 10px; font-weight: 600; cursor: pointer; text-decoration: none; min-width: 0; }
.ss-act svg { width: 15px; height: 15px; }
.ss-act:hover { background: var(--bg); color: var(--orange-ink); }
.ss-act:disabled { opacity: .45; cursor: wait; }
.ss-act span { white-space: nowrap; }
.ss-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ss-actions label { display: flex; align-items: center; gap: 6px; }
.ss-actions select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: inherit; }
.ssp-hint { margin: -2px 0 6px; }
.ssp-results-h { margin-top: 6px; font-weight: 600; }
.ssp-search input { max-width: 320px; flex: 0 1 320px; }
.ssp-strip .iv-alt { width: 64px; height: 64px; }
.ssp-slots { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ssp-slot { position: relative; width: 72px; height: 96px; border: 1.5px dashed var(--line); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--bg); overflow: hidden; }
.ssp-slot img { width: 100%; height: 100%; object-fit: cover; }
.ssp-slot.act { border-color: var(--orange); border-style: solid; box-shadow: 0 0 0 2px var(--tint); }
.ssp-slot-n { position: absolute; top: 3px; left: 5px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); z-index: 2; }
.ssp-slot:not(:has(img)) .ssp-slot-n { color: var(--muted); text-shadow: none; }
.ssp-slot-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.ss-prompt { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .65; font-size: 10.5px; margin-top: 1px; }
.ssp-subline { display: block; color: var(--muted); font-size: 11px; line-height: 1.35; margin: 1px 0 4px; }
.ssp-list li { margin-bottom: 2px; }
.ssp-strip .iv-alt.on { border-color: var(--orange); }
.aso-field { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; background: var(--panel); }
.aso-field.over { border-color: #c4302b55; }
.aso-field-h { display: flex; align-items: center; gap: 10px; }
.aso-field-h b { flex: none; }
.aso-field-h .s { flex: 1; }
.aso-field-v { margin-top: 6px; white-space: pre-wrap; font-size: 13px; line-height: 1.45; }
.aso-kit { display: flex; flex-direction: column; gap: 14px; }
.aso-kit-row { display: flex; gap: 14px; flex-wrap: wrap; }
.aso-icon-grid { display: flex; gap: 14px; flex-wrap: wrap; }
.aso-icon-cell { display: flex; flex-direction: column; gap: 5px; }
.aso-icon-acts { display: flex; gap: 10px; justify-content: center; }
.aso-icon-img { width: 148px; height: 148px; border-radius: 28px; border: 1px solid var(--line); display: block; }

/* auto-fit + center: empty tracks collapse, so one card sits centred, two sit
   as a centred pair, and a batch wraps into centred rows. start-aligned with
   auto-fill it read as "stuck to the left with holes". */
.iv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 380px)); gap: 16px; margin-top: 8px; justify-content: center; }
.iv-img { max-height: 380px; object-fit: contain; }
.iv-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--panel); min-width: 0; }
.iv-img { width: 100%; height: auto; display: block; border-radius: 8px; background: var(--line); }
.iv-name { font-size: 12px; opacity: .7; margin-top: 8px; }
.iv-lbl { margin-top: 8px; }
/* The strip scrolls inside itself; the card must never widen the chat column. */
.iv-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-top: 4px; }
.iv-alt { flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; background: none; cursor: pointer; }
.iv-alt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-alt:hover { border-color: var(--accent); }
.iv-alt:disabled { opacity: .5; cursor: wait; }
.iv-notes { margin-bottom: 8px; opacity: .8; }
.asset-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.asset-card > a { display: block; aspect-ratio: 1 / 1; background: var(--bg); }
.asset-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-meta { padding: 10px 12px; }
.asset-meta .t { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.danger-link { color: #c4302b; }
/* Equal-weight icon actions under the preview: one visual system instead of a
   mixed bag of ghost buttons and links. The sublabel line is always present so
   the row height never depends on which action carries a price. */
.iv-actions { display: flex; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 4px; }
.iv-act { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 5px; background: none; border: 0; border-radius: 10px; color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; text-decoration: none; min-width: 0; }
.iv-act svg { width: 18px; height: 18px; margin-bottom: 1px; }
.iv-act .iv-sub { font-size: 10px; font-weight: 500; color: var(--muted); opacity: .65; min-height: 12px; line-height: 12px; white-space: nowrap; }
.iv-act:hover { background: var(--bg); color: var(--orange-ink); }
.iv-act:hover .iv-sub { color: var(--orange-ink); }
.iv-act:disabled { opacity: .45; cursor: wait; }
.iv-msg { min-height: 20px; margin-top: 4px; line-height: 20px; }
.iv-src { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 4px; }
.iv-src .chip { padding: 3px 10px; font-size: 12px; cursor: pointer; }
.iv-src .chip:disabled { opacity: .45; cursor: not-allowed; }
.iv-search { display: flex; gap: 6px; margin: 4px 0 6px; }
.iv-search input { flex: 1; min-width: 0; font-size: 12px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: inherit; }

/* ---- brand + templates ---- */
.brand-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.brand-sw { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.brand-sw input[type=color] { width: 54px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: none; }
.brand-hex { width: 84px; font-size: 12px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: inherit; }
.pa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pa-item { position: relative; min-width: 0; }
.pa-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.adv-card > summary { cursor: pointer; font-weight: 600; }
.tpl-row { align-items: center; }
.tpl-edit textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.45; }
/* Every declared size, side by side. Wide output scrolls in its own box so the
   modal never scrolls sideways. */
.tpl-prev { display: flex; gap: 12px; overflow-x: auto; margin-top: 10px; padding-bottom: 6px; }
.tpl-fig { flex: 0 0 auto; margin: 0; max-width: 240px; }
.tpl-fig img { max-width: 240px; height: auto; border: 1px solid var(--line); border-radius: 8px; display: block; }

/* Token allowance: a bar, because "600 of 6000" is a ratio and a ratio reads
   faster as a length than as two numbers. */
.tk-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 6px 0 8px; }
.tk-bar.thin { height: 6px; margin: 0; min-width: 80px; }
.tk-fill { height: 100%; background: var(--orange); border-radius: 999px; transition: width .25s ease; }
.tk-fill.hot { background: var(--warn); }
/* The account line goes amber once the allowance is mostly gone, so running low is
   visible on every screen without a banner anyone has to dismiss. */
.user-tier.tier-low { color: var(--warn); font-weight: 600; }
table.stats td.neg { color: var(--warn); }
table.stats td.pos { color: #157347; }

/* A chip that is holding an override looks different from one on auto: the whole
   point of the template and language chips is that a set value is not the default. */
.cmd-chip-b.on { border-color: var(--orange); color: var(--orange-ink); font-weight: 600; }

/* Variations: a contact sheet, not a gallery. Twenty thumbnails exist to be
   compared and shortlisted, so they are small and the grid does the scrolling. */
.iv-more { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.iv-batch { margin-top: 10px; }
.iv-batch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.iv-batch-item { margin: 0; }
.iv-batch-item img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 8px; }
.iv-batch-item figcaption { margin: 4px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Manual composer: form on the left, the result on the right, because the whole
   point is seeing what the words do to the layout while typing them. */
.studio-alt { text-align: center; margin-top: 10px; }
.mc-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 340px); gap: 18px; align-items: start; }
.mc-form { min-width: 0; }
.mc-prev { min-width: 0; display: flex; align-items: flex-start; justify-content: center; }
.mc-prev img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; }
.mc-stock { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin-top: 8px; max-height: 200px; overflow-y: auto; }
.mc-pic { padding: 0; border: 2px solid transparent; border-radius: 7px; background: none; cursor: pointer; overflow: hidden; line-height: 0; }
.mc-pic.on { border-color: var(--orange); }
.mc-pic img { width: 100%; height: 62px; object-fit: cover; display: block; }
@media (max-width: 760px) { .mc-grid { grid-template-columns: 1fr; } }

/* Wider than modal-lg, and scrollable: the manual composer is a form beside a
   preview, and at 440px the two columns collapsed onto each other so the preview
   sat on top of the buttons. */
.modal.modal-xl { max-width: 940px; max-height: 88vh; overflow-y: auto; }

/* Context layers: a row per layer with its own forget control, because forgetting
   chat inferences and forgetting uploaded product facts are different acts. */
.cx-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.cx-layer { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }

/* The workbench: blocks on the left, the assembly they produce on the right.
   Side by side because editing one without seeing the other is guesswork. */
.sys-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 16px; align-items: start; }
.sys-pre { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; max-height: 320px; overflow-y: auto; margin: 8px 0 0; }
.card.sticky { position: sticky; top: 12px; }
@media (max-width: 1100px) { .sys-grid { grid-template-columns: 1fr; } .card.sticky { position: static; } }

/* Grouped activity: repeats fold into one row with a count; the timestamps are a
   click away rather than forty rows deep. */
.act-group { border-bottom: 1px solid var(--line); padding: 8px 0; }
.act-group summary { cursor: pointer; list-style: none; display: flex; }
.act-group summary::-webkit-details-marker { display: none; }
.act-group[open] summary { opacity: .85; }
.act-times { padding: 6px 0 2px 12px; border-left: 2px solid var(--line); margin: 6px 0 0 4px; }

/* ===== Creative CRM ===== */
.crm-table td { vertical-align: middle; }
.crm-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: inline-block; }
.crm-thumb-k { display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--muted); font-weight: 700; font-size: 14px; }
.crm-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.crm-queued { background: #eef2ff; color: #4451c8; }
.crm-uploading, .crm-created { background: #f1f5f9; color: #475569; }
.crm-moderation { background: #fef3c7; color: #92400e; }
.crm-rejected { background: #fee2e2; color: #b91c1c; }
.crm-approved { background: #e0f2fe; color: #0369a1; }
.crm-testing { background: #dcfce7; color: #15803d; }
.crm-finished { background: #e5e7eb; color: #374151; }
.crm-result { background: #fce7f3; color: #9d174d; }
/* Ended by a rule, and still running but already judged by one. Amber rather than
   red: neither is an error, both are something to look at. */
.crm-cut { background: #ffedd5; color: #9a3412; }
.crm-flagged { background: #fff7ed; color: #b45f0a; }
.crm-expand td { background: var(--bg); }
.crm-feed { padding: 6px 4px; }
.crm-ev { padding: 3px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.crm-ev:last-child { border-bottom: 0; }

/* CRM empty state: show the pipeline itself, so an empty table still teaches
   what will happen here. */
.crm-empty { text-align: center; padding: 26px 16px 22px; }
.crm-empty-ladder { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 14px 0 16px; }
.crm-empty-ladder .crm-chip { opacity: .9; }
.crm-empty-arrow { color: var(--muted); font-size: 12px; }
.crm-empty-how { max-width: 560px; margin: 0 auto; text-align: left; font-size: 13px; color: var(--muted); line-height: 1.6; }

/* Provenance footnote under copilot replies */
.ctx-src { margin-top: 6px; opacity: .8; }
.ctx-src-chip { display: inline-block; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; font-size: 11px; cursor: help; }

/* ---------- scene-centric video editor ---------- */
.va-ed { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.va-left { flex: 1 1 320px; min-width: 260px; }
.va-panel { flex: 1 1 300px; min-width: 250px; }
.va-prevbox { display: flex; justify-content: center; background: #eef0f4; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.va-cvwrap { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(15, 18, 28, .18); background: #000; flex: none; }
.va-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; border: 0; background: rgba(6,8,16,.72); color: #fff; font-size: 20px; cursor: pointer; }
.va-play:hover { background: rgba(6,8,16,.88); }
.va-scrub { position: relative; display: flex; gap: 3px; height: 10px; margin: 8px 0 8px; cursor: pointer; }
.va-scrub .seg { background: var(--line); border-radius: 3px; min-width: 6px; transition: background .15s; }
.va-scrub .seg.cur { background: var(--orange); }
.va-ph { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--orange); pointer-events: none; border-radius: 1px; }
.va-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; }
.va-tile { flex: none; width: 78px; border: 2px solid transparent; border-radius: 10px; padding: 3px; cursor: pointer; background: none; text-align: center; }
.va-tile:hover { border-color: var(--line); }
.va-tile.sel { border-color: var(--orange); }
.va-tile img, .va-tile video, .va-tile .ph { width: 68px; height: 68px; object-fit: cover; border-radius: 7px; display: block; margin: 0 auto; }
.va-tile .ph { display: flex; align-items: center; justify-content: center; background: var(--bg2, #1a1d29); color: #889; font-size: 10px; }
.va-tile .s { font-size: 10px; line-height: 1.3; }
.va-tile.va-add .ph { font-size: 26px; color: var(--orange); background: transparent; border: 1.5px dashed var(--line); }
.va-tile.drag { opacity: .4; }
.va-tile.over { border-color: var(--orange); border-style: dashed; }
.va-tile { width: 96px; }
.va-tile img, .va-tile video, .va-tile .ph { width: 86px; height: 86px; }
.va-panel { min-height: 388px; }
.va-scene-acts { display: flex; gap: 5px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; margin-bottom: 4px; }
.va-scene-acts .ghost.small { flex: none; padding: 4px 9px; font-size: 11.5px; white-space: nowrap; }
/* add-scene preset picker */
.va-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.va-preset { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; cursor: pointer; transition: border-color .12s, background .12s; color: var(--ink, #14161c); font: inherit; }
.va-preset:hover { border-color: var(--orange); background: rgba(246, 130, 31, .07); }
.va-preset-ico { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 17px; font-weight: 800; background: var(--bg2, #1a1d29); color: #aab; border: 1px solid var(--line); }
.va-preset-ico.photo, .va-preset-ico.broll { color: var(--orange); }
.va-preset-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.va-preset-body b { font-size: 13px; color: var(--ink, #14161c); }
.va-preset-body span:last-child { font-size: 11.5px; color: var(--ink, #14161c); opacity: .65; line-height: 1.35; }
/* captions popover (HIG: settings grouped, bar keeps actions) */
.va-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 32px rgba(10, 12, 20, .14); padding: 10px 12px; min-width: 260px; }
.va-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; }
.va-pop-row > span:first-child { font-size: 12px; color: var(--ink, #14161c); opacity: .7; }
.va-seg { display: inline-flex; gap: 2px; background: var(--bg2); border-radius: 8px; padding: 2px; }
.va-seg button { border: 0; background: transparent; color: var(--ink, #14161c); font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px; cursor: pointer; }
.va-seg button.on { background: #fff; box-shadow: 0 1px 3px rgba(10, 12, 20, .18); }
.va-seg.swatches button { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(10, 12, 20, .15); font-size: 10px; line-height: 1; color: #14161c; }
.va-seg.swatches button.on { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(246, 130, 31, .25); }
.va-bar .va-voice { max-width: 190px; }
.va-bar .va-fps { max-width: 92px; }
/* consistent control metrics across the video editor */
.va-panel input, .va-panel textarea, .va-panel select {
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  color: var(--ink, #14161c); font: inherit; font-size: 13px; padding: 6px 10px;
}
.va-panel input, .va-panel select { height: 34px; }
.va-panel textarea { line-height: 1.4; min-height: 56px; }
.va-line { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 10px; min-height: 34px; margin: 2px 0; font-size: 12.5px; }
.va-line > span:first-child { opacity: .65; }
.va-line select { width: auto; min-width: 170px; max-width: 240px; justify-self: start; }
.va-line > span:last-child { justify-self: start; }
.va-stepper { display: inline-flex; align-items: center; gap: 8px; }
.va-stepper .ghost.small, .va-scene-acts .ghost.small {
  height: 28px; padding: 0 10px; display: inline-flex; align-items: center; font-size: 11.5px;
}
.va-bar > button, .va-bar > select { height: 32px; display: inline-flex; align-items: center; box-sizing: border-box; }
.va-bar > button { padding: 0 12px; }
.va-bar > select { padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink, #14161c); font: inherit; font-size: 12.5px; }
.va-tile.va-add { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.va-panel .inline .primary.small { height: 28px; display: inline-flex; align-items: center; padding: 0 12px; font-size: 11.5px; }

.va-iclab svg { width: 13px; height: 13px; margin-right: 5px; flex: none; }
.va-scene-acts { align-items: center; margin-top: 8px; }

/* tiles are <button>s: the global button rule paints white text - override */
.va-tile { color: var(--ink, #14161c); }
.va-tile .s { color: var(--ink, #14161c); opacity: .75; }
.va-tile .s:last-child { opacity: .55; }
.va-topbtns { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; z-index: 5; }
.va-ic { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink, #14161c); cursor: pointer; padding: 0; }
.va-ic svg { width: 13px; height: 13px; }
.va-ic:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); }
.va-ic:disabled { opacity: .35; cursor: default; }
.ads-h { font-weight: 700; margin: 16px 0 4px; padding-top: 10px; border-top: 2px solid var(--line); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.ads-line { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-top: 1px solid var(--line); }
.ads-line:hover { background: rgba(10, 12, 20, .03); }
.ads-text { flex: 1; min-width: 0; font-size: 13.5px; }
.ads-meta { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.ads-warn { color: #b45309; cursor: help; }
.ads-in { flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; font: inherit; font-size: 13.5px; padding: 4px 8px; color: var(--ink, #14161c); }
.ads-in:hover { border-color: var(--line); }
.ads-in:focus { border-color: var(--orange); background: #fff; outline: none; }
.ads-line .va-ic { opacity: 0; transition: opacity .12s; }
.ads-line:hover .va-ic, .ads-line:focus-within .va-ic { opacity: 1; }
/* Google-style ad preview */
.serp { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 6px 0 4px; background: #fff; }
.serp-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.serp-badge { font-weight: 700; font-size: 11px; color: #14161c; }
.serp-url { font-size: 12px; color: #202124; opacity: .8; }
.serp-h { color: #1a0dab; font-size: 17px; line-height: 1.3; cursor: default; }
.serp-d { font-size: 13px; color: #4d5156; margin-top: 2px; line-height: 1.45; }
.serp-sl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 10px; }
.serp-sl a { color: #1a0dab; font-size: 14px; }
.serp-sl .s { color: #4d5156; }
/* asset tables */
.ads-tbl { display: grid; gap: 4px 10px; align-items: start; margin-top: 4px; }
.ads-tbl.sl { grid-template-columns: minmax(140px, .8fr) 1fr 1fr; }
.ads-tbl.pr { grid-template-columns: minmax(140px, .8fr) 1fr; }
.ads-th { font-size: 11px; font-weight: 700; opacity: .55; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; }
.ads-cell { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding: 2px 0; }
.ads-cell .ads-in { padding: 4px 8px; }
.ads-cell .ads-count { flex: none; font-size: 10.5px; }

/* ---------- placement preview frames ---------- */
.pv-modal .modal, #modalBack .pv-wide { max-width: 720px; }
.frame-phone { width: 300px; margin: 0 auto; background: #111318; border-radius: 34px; padding: 10px 8px 14px; box-shadow: 0 18px 50px rgba(10,12,20,.35); }
.frame-phone .fp-notch { width: 88px; height: 18px; background: #000; border-radius: 10px; margin: 0 auto 6px; }
.frame-phone .fp-screen { border-radius: 22px; overflow: hidden; background: #000; position: relative; }
.frame-phone .fp-home { width: 90px; height: 4px; background: #444; border-radius: 2px; margin: 10px auto 0; }
.frame-web { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.frame-web .fw-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--bg); }
.frame-web .fw-dot { width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.frame-web .fw-url { font-size: 11.5px; opacity: .6; }
.frame-web .fw-body { display: flex; gap: 16px; padding: 14px; }
.frame-web .fw-main { flex: 1; min-width: 0; }
.frame-web .fw-side { flex: none; }
.fw-line { height: 9px; border-radius: 5px; background: #e8e9ee; margin: 8px 0; }
.fw-line.w60 { width: 60%; } .fw-line.w80 { width: 80%; } .fw-line.w40 { width: 40%; } .fw-line.h16 { height: 16px; width: 70%; background: #dcdee6; }
.fw-slot { border: 1px dashed #d5d7e0; border-radius: 8px; overflow: hidden; position: relative; }
.fw-slot img, .fw-slot iframe { display: block; border: 0; }
.fw-ad-tag { position: absolute; top: 4px; right: 4px; background: rgba(255,255,255,.85); font-size: 9px; padding: 1px 5px; border-radius: 4px; color: #555; }
.frame-feed { max-width: 380px; margin: 0 auto; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.frame-feed .ff-top { display: flex; align-items: center; gap: 9px; padding: 10px 12px; }
.frame-feed .ff-ava { width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.frame-feed .ff-media img { width: 100%; display: block; }
.frame-feed .ff-actions { display: flex; gap: 16px; padding: 10px 12px; font-size: 16px; opacity: .8; }
.frame-feed .ff-cta { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: #f4f5f8; font-size: 13px; font-weight: 600; }
.frame-store { background: #fff; padding: 12px 12px 4px; }
.fs-status { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; padding: 2px 6px 8px; color: #111; }
.fs-head { display: flex; gap: 12px; align-items: flex-start; }
.fs-icon { width: 64px; height: 64px; border-radius: 15px; color: #fff; font-size: 28px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.fs-icon img { width: 100%; height: 100%; object-fit: cover; }
.fs-name { font-size: 16px; font-weight: 700; color: #111; }
.fs-sub { font-size: 11.5px; opacity: .6; }
.fs-get { margin-top: 6px; display: inline-block; background: #0a84ff; color: #fff; font-size: 12.5px; font-weight: 700; padding: 5px 18px; border-radius: 14px; }
.fs-meta { display: flex; gap: 18px; padding: 12px 4px; font-size: 11px; opacity: .7; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.fs-shots { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; }
.fs-shots img { height: 300px; border-radius: 10px; flex: none; }
/* SERP v2 */
.serp { font-family: arial, sans-serif; }
.serp-fav { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.serp-site { font-size: 13px; color: #202124; line-height: 1.15; }
.serp-site .s2 { font-size: 11.5px; color: #4d5156; }
.serp-h { font-size: 19px; }
.serp-h:hover { text-decoration: underline; cursor: pointer; }
.serp-promo { margin-top: 6px; font-size: 12.5px; color: #202124; background: #f8f9fa; border: 1px solid #e8eaed; border-radius: 8px; padding: 5px 9px; display: inline-block; }
.serp.mobile { max-width: 400px; }
.serp.mobile .serp-sl { grid-template-columns: 1fr; }
.serp-used { font-size: 11px; opacity: .55; margin: 4px 0 2px; }
/* video phone overlay */
.va-phoneov { position: absolute; inset: 0; pointer-events: none; }
.va-phoneov .ov-icons { position: absolute; right: 8px; bottom: 64px; display: flex; flex-direction: column; gap: 14px; font-size: 20px; text-align: center; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.va-phoneov .ov-ch { position: absolute; left: 10px; bottom: 12px; right: 60px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); font-size: 12px; }
.va-phoneov .ov-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.25); }
.va-phoneov .ov-bar i { display: block; height: 100%; width: 34%; background: #f00; }

/* preview polish: one stage, one rhythm */
.pv-stage { display: flex; justify-content: center; padding: 18px; background: #eef0f4; border-radius: 12px; }
.pv-stage > * { box-shadow: 0 10px 34px rgba(15, 18, 28, .12); }
.serp-tools { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.serp { border: 0; border-radius: 14px; padding: 16px 20px; max-width: 600px; width: 100%; margin: 0; background: #fff; }
.serp.mobile { max-width: 400px; }
.serp-top { margin-bottom: 8px; }
.serp-sp { font-weight: 700; font-size: 11px; color: #202124; margin: 2px 0; }
.serp-h { margin-top: 2px; }
.serp-d { margin-top: 4px; }
.serp-promo { margin-top: 8px; }
.serp-sl { margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0f1f4; }
.serp-sl a { line-height: 1.3; }
.serp-sl .s { margin-top: 1px; line-height: 1.35; }
.serp-used { text-align: center; margin-top: 6px; }
.frame-feed { box-shadow: none; border: 0; }
.pv-stage .frame-feed { box-shadow: 0 10px 34px rgba(15, 18, 28, .12); }
.frame-feed .ff-top { padding: 12px 14px 10px; }
.frame-feed .ff-cta { border-top: 1px solid #eceef2; }
.frame-feed .ff-actions { border-top: 1px solid #f2f3f6; padding: 10px 14px 12px; }
/* a flex stage shrink-wraps the card to the slot: pin the page width so
   the skeleton column actually shows */
.frame-web { width: 640px; max-width: 100%; }
.frame-web .fw-body { padding: 16px; gap: 18px; }
.fw-slot { margin: 12px auto; }
.frame-web .fw-side .fw-slot { margin: 0; }
.frame-store { border-radius: 0; }
.fs-head { padding: 2px 4px; }
.fs-meta { justify-content: space-between; padding: 12px 6px; }
.fs-shots { padding: 0 4px 12px; }

/* mobile SERP must never clip: the stage grows with the card, never scrolls it */
.pv-stage { overflow: visible; align-items: flex-start; flex-wrap: wrap; }
.pv-stage.pv-fixed { overflow: hidden; align-items: center; }
.serp { min-width: 0; overflow-wrap: break-word; }
.serp.mobile { width: 100%; }
.serp-tools { flex-wrap: wrap; }

/* UAC install ad + Performance Max native display mocks */
.uad-tag { font-size: 11px; color: #5f6368; margin-bottom: 8px; }
.uad-tag b { color: #202124; font-size: 11px; }
.serp.uad { max-width: 400px; }
.uad-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.uad-icon { width: 48px; height: 48px; border-radius: 12px; color: #fff; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; flex: none; }
.uad-app { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; font-size: 14.5px; color: #202124; }
.uad-app .s2 { font-size: 12px; color: #5f6368; margin-top: 2px; }
.uad-cta { display: inline-block; margin-top: 12px; background: #01875f; color: #fff; border-radius: 999px; padding: 7px 22px; font-size: 13px; font-weight: 600; }
.serp.disp { max-width: 360px; padding: 0 0 16px; overflow: hidden; }
.serp.disp .uad-tag, .serp.disp .disp-h, .serp.disp .serp-d, .serp.disp .uad-cta { margin-left: 16px; margin-right: 16px; }
.disp-img { height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: rgba(255, 255, 255, .92); margin-bottom: 12px; }
.disp-img span { font-size: 34px; font-weight: 800; }
.disp-img em { font-size: 10.5px; font-style: normal; opacity: .7; letter-spacing: .06em; text-transform: uppercase; }
.disp-h { font-size: 16px; font-weight: 600; color: #202124; line-height: 1.35; }
.serp.disp .serp-d { margin-top: 4px; }
.serp.disp .uad-cta { background: #1a73e8; }

/* Warning tooltip: instant, dark, floats above everything */
.warn-tip { position: fixed; z-index: 300; max-width: 320px; background: #2a2620; color: #fff; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 8px 26px rgba(40, 32, 16, .3); pointer-events: none; }
.warn-tip div + div { margin-top: 3px; }

/* Google-flavored placement chrome: GDN native card, Shorts, AdChoices */
.frame-native { width: 360px; margin: 0 auto; background: #fff; border-radius: 14px; overflow: hidden; font-family: arial, sans-serif; }
.fn-media { position: relative; }
.fn-media img { max-width: 100%; }
.fn-adch, .fw-adch { position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #5f6368; font-size: 10px; line-height: 16px; text-align: center; font-style: normal; }
.fn-body { padding: 12px 16px 16px; }
.fn-body .uad-tag { margin-bottom: 6px; }
.fn-h { font-size: 16px; font-weight: 700; color: #202124; line-height: 1.3; margin-bottom: 12px; }
.frame-shorts { position: relative; aspect-ratio: 9 / 16; background: #000; }
.frame-shorts .ov-icons { position: absolute; right: 8px; bottom: 96px; display: flex; flex-direction: column; gap: 14px; font-size: 20px; text-align: center; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.sh-bot { position: absolute; left: 10px; right: 54px; bottom: 12px; color: #fff; font-size: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.sh-badge { background: rgba(255, 255, 255, .22); border-radius: 4px; padding: 1px 6px; font-size: 10.5px; font-weight: 600; }
.sh-cta { display: block; background: #1a73e8; color: #fff; border-radius: 8px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; text-shadow: none; }
/* video overlay: Shorts CTA + YouTube in-stream ad chrome */
.va-phoneov .ov-cta { position: absolute; left: 10px; right: 60px; bottom: 46px; background: #1a73e8; color: #fff; border-radius: 8px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; text-align: center; }
.va-phoneov .ov-ch { bottom: 84px; }
.va-phoneov .ov-adtag { position: absolute; left: 10px; bottom: 14px; color: #fff; font-size: 11.5px; background: rgba(0, 0, 0, .55); border-radius: 4px; padding: 2px 7px; }
.va-phoneov .ov-skip { position: absolute; right: 0; bottom: 34px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .5); border-right: 0; }
.va-phoneov .ov-bar.yt i { background: #fc0; }

/* Library launch console: selection, stage badges, the bulk bar */
.cc-selbox { position: absolute; top: 8px; left: 8px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .9); background: rgba(15, 18, 28, .22); backdrop-filter: blur(2px); color: #fff; font-size: 10px; font-weight: 600; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s ease, background .12s ease; }
.cc:hover .cc-selbox, .cc-selbox.on, tr:hover .cc-selbox { opacity: 1; }
.cc-selbox.on { background: var(--orange); border-color: rgba(255, 255, 255, .95); }
.cc.sel { outline: 1.5px solid var(--orange); outline-offset: -1.5px; border-radius: 12px; }
.cc-stage { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: 5px; padding: 1px 6px; flex: none; }
.cc-stage.testing { background: #e8f0fe; color: #1a56c9; }
.cc-stage.finished { background: #e6f4ea; color: #137333; }
.lib-queued { margin: 0 0 10px; }
.lib-bulk { position: sticky; bottom: 12px; display: flex; align-items: center; gap: 10px; background: #1d2330; color: #fff; border-radius: 12px; padding: 10px 16px; margin-top: 14px; box-shadow: 0 10px 30px rgba(15, 18, 28, .35); width: fit-content; }
.lib-bulk .link { color: #cfd4e0; }

/* Library v2: filter row, off-state icons */
.lib-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.lib-filters input { width: 240px; border-radius: 999px; padding: 7px 14px; font-size: 13px; }
.cc-ic.off { opacity: .35; cursor: not-allowed; }
.asset-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.asset-open img, .asset-open video { display: block; width: 100%; }
.pv-lines { margin: 10px 0 4px; }
.pv-lines pre { white-space: pre-wrap; font-size: 12px; line-height: 1.5; max-height: 240px; overflow: auto; background: var(--bg); border-radius: 8px; padding: 10px 12px; margin-top: 6px; }
.pv-ytrow { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
.pv-ytrow input { flex: 1; min-width: 0; }
.pv-ytrow button { flex: none; white-space: nowrap; }
.nm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.nm-chips .chip { font-family: ui-monospace, monospace; font-size: 11.5px; }
.nm-ex { margin-top: 6px; font-family: ui-monospace, monospace; color: var(--muted); }

/* Library table view + code-first cards */
.cc-title.code { font-family: ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0; }
.lib-table { width: 100%; }
.lib-table td { vertical-align: middle; }
.lib-table .lt-sel { width: 26px; position: relative; }
.lib-table .lt-sel .cc-selbox { position: static; border-color: var(--line); background: #fff; color: var(--orange-ink); }
.lib-table .lt-sel .cc-selbox.on { background: var(--orange); color: #fff; border-color: var(--orange); }
.lib-table .lt-thumb { width: 52px; cursor: pointer; }
.lib-table .lt-thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; display: block; }
.lib-table .lt-k { display: inline-block; width: 44px; height: 44px; border-radius: 8px; background: var(--bg); color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; display: flex; align-items: center; justify-content: center; }
.lib-table .lt-code { cursor: pointer; }
.lib-table .lt-code .mono { font-size: 12px; }
.lib-table .lt-title { opacity: .65; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-table .lt-acts { white-space: nowrap; text-align: right; }
.lib-table tr.sel td { background: var(--tint); }
.cc-star-t { font-size: 14px; }
.cc-star-t.on { color: #eab308; }
.lib-table .lt-acts .cc-ic { display: inline-flex; vertical-align: middle; }
.lib-table td { padding-top: 8px; padding-bottom: 8px; }

/* Creative tests: chat widget + lifecycle board */
/* The floating agent, in chatbot clothes. The launcher is the brand's ember —
   the one warm thing in the corner of a data screen — and the panel is a real
   chat frame: header, scrolling conversation, composer pinned at the foot.
   While the project still has setup gaps, this IS the onboarding, wherever
   you are standing. */
.tst-fab { position: fixed; right: 26px; bottom: 26px; z-index: 90; background: linear-gradient(160deg, #ff9a3c, var(--orange) 55%, #e06a10); color: #fff; border: none; border-radius: 999px; padding: 13px 20px; font-size: 13.5px; font-weight: 700; box-shadow: 0 10px 28px rgba(246, 130, 31, .45); }
.tst-fab:hover { background: linear-gradient(160deg, #ffa54f, #f98b2e 55%, #e87411); box-shadow: 0 12px 32px rgba(246, 130, 31, .55); }
.tst-widget { position: fixed; right: 26px; bottom: 26px; z-index: 95; width: 400px; max-width: calc(100vw - 40px); height: min(600px, calc(100vh - 60px)); display: flex; flex-direction: column; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: 0; box-shadow: var(--shadow-pop); }
.tst-widget-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--sidebar); flex: none; }
.tst-widget-head b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tst-widget-head b::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(246, 130, 31, .2); }
.tst-widget > .s { padding: 10px 16px 0; flex: none; }
.tst-widget .auto-starters { padding: 8px 16px 0; flex: none; }
.tst-widget .cmdshell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: none; background: transparent; overflow: visible; }
.tst-widget .cmd-log { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; border: none; background: transparent; padding: 12px 16px; }
.tst-widget .cmd-input { flex: none; margin: 10px 12px 12px; }
.tst-widget .ob-opts { margin: 0 12px 6px; max-width: none; }
.kb-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
/* Equal columns. A fixed 240px made the board a train of different-looking cars
   depending on what was open; flex shares the width evenly and the whole flow
   fits the screen. The floor stops cards collapsing on a laptop. */
.kb-col { flex: 1 1 0; min-width: 185px; background: var(--sidebar); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-height: 120px; }
.kb-col.over { border-color: var(--orange); background: var(--tint); }
.kb-col.kb-collapsed { flex: 0 0 110px; min-width: 0; min-height: 0; }
.kb-col.kb-collapsed .kb-head { flex-wrap: wrap; margin-bottom: 0; }
.kb-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 13px; }
.kb-head .link { margin-left: auto; }
.kb-list { display: flex; flex-direction: column; gap: 8px; }
.kb-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; cursor: grab; }
.kb-card.dragging { opacity: .5; }
.kb-card.kb-idea { background: #fffbeb; border-color: #f5e6b8; }
/* The preview is a reminder of which creative this is, not the creative itself —
   the card's job is the task around it. A shorter strip keeps five cards on
   screen where three fit before. */
.kb-media img { width: 100%; height: 64px; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 6px; }
.kb-row { display: flex; align-items: flex-start; gap: 4px; }
.kb-code { font-size: 11.5px; font-weight: 600; word-break: break-all; flex: 1; }
.kb-code.mono { font-family: ui-monospace, monospace; font-weight: 500; }
.kb-menu { flex: none; border: 0; background: none; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 2px; cursor: pointer; }
.kb-sub { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kb-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; min-height: 16px; }
.kb-hypo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-none { opacity: .5; text-align: center; padding: 12px 0; }
.cc-stage.scale { background: #e6f4ea; color: #137333; }
.cc-stage.stopped { background: #eceff3; color: #5f6368; }
.kb-card img { -webkit-user-drag: none; user-select: none; }
.kb-stats { margin-top: 5px; font-variant-numeric: tabular-nums; }
.cc-longname, .lt-long, .kb-long { font-family: ui-monospace, monospace; font-size: 10px; opacity: .55; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-long, .kb-long { padding: 0; }

/* Imagine: idea pitches + idea cards. Compact enough to compare four bets
   side by side; the ASCII sketch is what makes a pitch judgeable at a glance. */
.idea-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 760px) { .idea-set { grid-template-columns: 1fr; } }
.idea-card { border: 1px solid rgba(196, 168, 96, .28); background: #fffdf6; border-radius: 14px; padding: 14px; box-shadow: 0 1px 2px rgba(24, 22, 12, .04); }
.idea-card.saved { opacity: .7; }
.idea-top { display: flex; align-items: flex-start; gap: 8px; }
.idea-title { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.28; flex: 1; }
.idea-save { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(196, 168, 96, .45); background: #fff; color: #a05a12; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s ease, transform .12s ease; }
.idea-save svg { width: 13px; height: 13px; display: block; }
.idea-save.on { color: #137333; border-color: rgba(19, 115, 51, .35); background: #f2fbf5; }
.idea-save:hover { background: #fff6df; transform: scale(1.05); }
.idea-save.on { background: #e6f4ea; border-color: #b7e0c3; color: #137333; }
.idea-hypo { color: #8a6a2a; font-weight: 500; font-size: 12.5px; margin-top: 5px; line-height: 1.45; }
.idea-mock { margin: 8px 0 0; padding: 8px 10px; background: #fff; border: 1px solid #f0e3bd; border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; line-height: 1.35; color: #3f3a2c; white-space: pre; overflow-x: auto; }
.idea-mock.big { font-size: 12px; line-height: 1.4; margin-bottom: 10px; }
.idea-more { margin-top: 8px; }
.idea-more { border-top: 1px solid rgba(196, 168, 96, .22); padding-top: 8px; }
.idea-more summary { cursor: pointer; color: #8a8069; font-size: 12px; list-style: none; }
.idea-more summary::-webkit-details-marker { display: none; }
.idea-more summary::before { content: '›'; display: inline-block; margin-right: 6px; transition: transform .15s ease; }
.idea-more[open] summary::before { transform: rotate(90deg); }
.idea-brief { white-space: pre-wrap; margin-top: 6px; line-height: 1.5; }
.idea-kinds { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.idea-kinds .ik { border: 1px solid #e5cf9a; background: #fff; color: #8a6a2a; border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 600; cursor: pointer; }
.idea-kinds .ik.on { background: var(--orange); border-color: var(--orange); color: #fff; }
.idea-kinds .ik:disabled { opacity: .8; cursor: default; }
.idea-brief-full { white-space: pre-wrap; font-size: 13px; line-height: 1.55; background: #fffbeb; border: 1px solid #f0e3bd; border-radius: 10px; padding: 12px 14px; max-height: 45vh; overflow: auto; }
.cc-ideaprev { background: #fffbeb; }
.cc.cc-idea .cc-media { background: #fffbeb; }
.kb-kinds { font-family: ui-monospace, monospace; opacity: .7; }

/* Board: lineage, test context, quick actions; test icon inline */
.kb-flow { opacity: .55; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.kb-focus { display: flex; align-items: center; gap: 8px; background: var(--tint); border: 1px solid var(--orange); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
.kb-made { border: 0; background: var(--tint); color: var(--orange-ink); border-radius: 6px; padding: 1px 7px; font-size: 10.5px; font-weight: 700; cursor: pointer; }
.kb-test { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--muted); padding: 5px 0 0; font-size: 11px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-test:hover { color: var(--ink); }
/* Who and by when. The two chips are quiet until they matter: an unassigned face
   is a dashed invitation, an overdue date is the one red thing on the board. */
.kb-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; }
.kb-ass { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 2px 4px 2px 2px; border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 500; max-width: 62%; }
.kb-ass:hover { background: var(--hover); color: var(--ink); }
.kb-ava { width: 20px; height: 20px; border-radius: 50%; background: var(--tint); color: var(--orange-ink); display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; }
.kb-ass.empty .kb-ava { background: transparent; border: 1.5px dashed #cdc5b9; color: var(--muted); }
.kb-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-due { background: none; border: none; padding: 3px 7px; border-radius: 7px; color: var(--muted); font-size: 12px; font-weight: 500; }
.kb-due:hover { background: var(--hover); color: var(--ink); }
.kb-due-add { opacity: .55; }
.kb-due.soon { background: #faf0dd; color: var(--warn); }
.kb-due.late { background: #fdecec; color: var(--bad); font-weight: 600; }
.kb-add { background: none; border: none; color: var(--muted); font-size: 16px; line-height: 1; padding: 1px 7px; border-radius: 6px; font-weight: 500; }
.kb-add:hover { background: var(--hover); color: var(--ink); }
.kb-acts { display: flex; gap: 6px; margin-top: 8px; }
.kb-act { flex: 1; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 7px; padding: 5px 8px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.kb-act:hover { background: var(--hover); }
.kb-act.go { border-color: #137333; color: #137333; }
.cc-kind-ico, .chip-ico, .ac-ico { display: inline-flex; vertical-align: -2px; margin-right: 4px; }
.cc-kind-ico svg, .chip-ico svg, .ac-ico svg { width: 12px; height: 12px; }
.kb-meta { flex-wrap: wrap; row-gap: 4px; }
.kb-meta .kb-hypo { flex: 1 1 100%; }

/* The wireframe we draw ourselves from the model's layout */
.idea-wire { display: flex; gap: 4px; margin: 2px 0 0; }
.idea-wire.multi .iw-screen { min-width: 0; }
.iw-frame { flex: 1 1 0; min-width: 0; }
.iw-screen { display: flex; flex-direction: column; gap: 4px; justify-content: center; background: #fff; border: 1px solid rgba(196, 168, 96, .3); border-radius: 10px; padding: 8px; overflow: hidden; max-height: 200px; box-shadow: 0 1px 2px rgba(24, 22, 12, .05); }
.idea-wire:not(.multi) .iw-screen { max-width: 170px; margin: 0 auto; }
.idea-wire.multi { align-items: flex-end; }
.idea-wire.big:not(.multi) .iw-screen { max-width: 260px; }
.iw-visual { flex: 1 1 auto; min-height: 34px; display: flex; align-items: center; justify-content: center; text-align: center; background: repeating-linear-gradient(45deg, #f3f4f7, #f3f4f7 6px, #eceef3 6px, #eceef3 12px); border-radius: 6px; color: #7b8190; font-size: 8.5px; line-height: 1.25; padding: 4px; }
.iw-visual.iw-logo { flex: 0 0 auto; min-height: 18px; font-size: 8px; }
.iw-h { font-size: 10.5px; font-weight: 800; line-height: 1.2; color: #14161c; }
.iw-sub { font-size: 8.5px; line-height: 1.3; color: #4d5156; }
.iw-stat { font-size: 9px; font-weight: 700; color: var(--orange-ink); background: var(--tint); border-radius: 5px; padding: 2px 5px; align-self: flex-start; }
.iw-cap { font-size: 8px; color: #7b8190; font-style: italic; }
/* The CTA reads as a button, not a banner: it sits at its own width with a
   light fill, the way a real ad button does. */
.iw-cta { align-self: center; max-width: 90%; text-align: center; background: var(--orange); color: #fff; border-radius: 999px; padding: 3px 12px; font-size: 8.5px; font-weight: 600; letter-spacing: .01em; box-shadow: 0 1px 4px rgba(246, 130, 31, .3); line-height: 1.25; }
.iw-t { text-align: center; font-size: 8.5px; color: #a29883; margin-top: 3px; font-variant-numeric: tabular-nums; }
.iw-role { text-align: center; font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #b0a68e; margin-bottom: 3px; }
.idea-wire.big .iw-role { font-size: 9.5px; margin-bottom: 5px; }
.idea-wire.big .iw-t { font-size: 10px; }
.idea-wire.big .iw-h { font-size: 14px; }
.idea-wire.big .iw-sub { font-size: 11px; }
.idea-wire.big .iw-cta { font-size: 11px; padding: 5px 16px; }
.idea-wire.big .iw-visual { font-size: 10.5px; min-height: 60px; }
.idea-wire.big .iw-screen { max-height: 340px; }
/* The ticket */
.idea-ticket { display: grid; grid-template-columns: 66px 1fr; gap: 5px 10px; margin-top: 8px; font-size: 12px; line-height: 1.45; }
.it-k { color: #a29883; font-weight: 500; font-size: 11px; letter-spacing: 0; text-transform: none; padding-top: 1px; }
.it-v { color: var(--ink); min-width: 0; overflow-wrap: break-word; }
.idea-refh { margin: 12px 0 6px; color: #a29883; }
.idea-refs { display: flex; gap: 5px; }
.idea-refs img { width: 33%; height: 46px; object-fit: cover; border-radius: 6px; display: block; }

/* One idea, every surface: the format segment, the text-ad mock, big refs */
/* A segmented control, not a row of chips: one track, the selection is a
   raised slab inside it. */
.idea-surf { display: flex; gap: 2px; margin: 12px 0 10px; padding: 2px; background: rgba(120, 100, 50, .08); border-radius: 9px; }
.idea-surf .isf { flex: 1; border: 0; background: none; color: #6f6448; border-radius: 7px; padding: 4px 6px; font-size: 11px; font-weight: 500; cursor: pointer; position: relative; transition: background .14s ease, color .14s ease; }
.idea-surf .isf:hover { color: #3f3a2c; }
.idea-surf .isf.rec::after { content: ''; position: absolute; top: 4px; right: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--orange); opacity: .75; }
.idea-surf .isf.on { background: #fff; color: #14161c; font-weight: 600; box-shadow: 0 1px 3px rgba(24, 22, 12, .12); }
.idea-surf.big { padding: 3px; border-radius: 11px; }
.idea-surf.big .isf { font-size: 12.5px; padding: 6px 10px; border-radius: 9px; }
/* The text ad rides the real SERP mock, just dialled down to card scale -
   a transform would have left its full-size box in the layout. */
.idea-serp .serp { padding: 9px 11px; border-radius: 10px; }
.idea-serp .serp-fav { width: 18px; height: 18px; font-size: 9px; }
.idea-serp .serp-site { font-size: 10px; }
.idea-serp .serp-site .s2 { font-size: 9px; }
.idea-serp .serp-sp { font-size: 9px; }
.idea-serp .serp-h { font-size: 12.5px; line-height: 1.3; }
.idea-serp .serp-d { font-size: 10px; line-height: 1.4; }
.modal .idea-serp .serp { padding: 14px 16px; }
.modal .idea-serp .serp-h { font-size: 17px; }
.modal .idea-serp .serp-d { font-size: 12.5px; }
.modal .idea-serp .serp-fav { width: 24px; height: 24px; font-size: 11px; }
.idea-none { opacity: .5; padding: 14px 0; text-align: center; }
.it-role { font-size: 12px; font-weight: 600; color: var(--orange-ink); margin-top: 12px; }
.idea-refs { display: flex; gap: 8px; }
.idea-ref { flex: 1; border: 0; padding: 0; background: none; border-radius: 10px; overflow: hidden; cursor: zoom-in; box-shadow: 0 1px 2px rgba(24, 22, 12, .08); }
.idea-ref img { width: 100%; height: 64px; object-fit: cover; display: block; transition: transform .15s ease; }
.idea-ref:hover img { transform: scale(1.06); }
.modal .idea-ref img { height: 96px; }

/* One stage for every format: switching tabs must not move the page */
.idea-stage { min-height: 232px; display: flex; align-items: center; justify-content: center; }
.idea-stage.big { min-height: 330px; }
.idea-stage > * { width: 100%; }
.idea-wire { overflow-x: auto; padding-bottom: 2px; }
/* Beats share the width instead of overflowing: five screens still fit. */
/* A storyboard is bound by the stage HEIGHT, not by the cell width: the
   screens keep 9:16, so their width follows from the height and the strip
   never makes the card taller than a static does. */
.idea-wire.multi .iw-frame { flex: 0 0 auto; min-width: 0; }
.idea-wire.multi .iw-screen { max-height: none; max-width: none; width: auto; height: 168px; }
.idea-wire.multi.n4 .iw-screen { height: 150px; }
.idea-wire.multi.n5 .iw-screen { height: 132px; }
.idea-wire.multi { justify-content: center; }
.idea-wire.big.multi .iw-screen { height: 250px; }
.idea-wire.big.multi.n4 .iw-screen { height: 232px; }
.idea-wire.big.multi.n5 .iw-screen { height: 218px; }
.idea-wire.multi .iw-screen { padding: 5px; gap: 3px; }
.idea-wire.multi .iw-h { font-size: 8.5px; }
.idea-wire.multi .iw-sub, .idea-wire.multi .iw-visual { font-size: 7.5px; }
.idea-wire.big.multi .iw-h { font-size: 11px; }
.idea-wire.big.multi .iw-sub, .idea-wire.big.multi .iw-visual { font-size: 9.5px; }
.idea-ref img { aspect-ratio: 4 / 5; height: auto; }

.idea-wire.multi .iw-cta { font-size: 7.5px; padding: 3px 8px; max-width: 100%; }
.idea-wire.big.multi .iw-cta { font-size: 9.5px; padding: 4px 10px; }

/* html5: the picture is the banner, the copy sits on it */
.iw-screen.bleed { position: relative; padding: 0; justify-content: flex-end; }
.iw-screen.bleed .iw-visual { position: absolute; inset: 0; border-radius: 0; }
.iw-screen.bleed .iw-h, .iw-screen.bleed .iw-sub, .iw-screen.bleed .iw-stat, .iw-screen.bleed .iw-cta, .iw-screen.bleed .iw-cap { position: relative; z-index: 1; margin: 0 8px; }
.iw-screen.bleed .iw-h { color: #14161c; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.iw-screen.bleed .iw-cta { margin-bottom: 8px; }
.iw-screen.bleed::after { content: ''; position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(to top, rgba(255,255,255,.92), rgba(255,255,255,0)); }
.iw-screen.bleed > *:not(.iw-visual) { position: relative; z-index: 1; }
/* board: equal columns, a sketch on the idea card, the idea slot everywhere */
.kb-col { flex: 1 1 0; min-width: 210px; }
.kb-col.kb-collapsed { flex: 0 0 132px; }
.kb-sketch .idea-wire { margin: 0; }
.kb-sketch .iw-screen { max-width: 78px; max-height: 104px; border-radius: 7px; }
.kb-sketch .iw-role, .kb-sketch .iw-t { display: none; }
.kb-none-made { opacity: .5; font-size: 10.5px; }
.from-idea { display: inline-flex; align-items: center; gap: 4px; border: 0; background: rgba(255, 200, 60, .16); color: #8a6a2a; border-radius: 999px; padding: 1px 8px 1px 6px; font-size: 10px; font-weight: 600; font-family: ui-monospace, monospace; cursor: pointer; margin-top: 4px; }
.from-idea:hover { background: rgba(255, 200, 60, .3); }
.from-idea svg { width: 10px; height: 10px; }
.cc-idea { padding: 0 8px; }
.lt-code .from-idea { margin-top: 3px; }
/* every modal scrolls: a long ticket was unreadable below the fold */
.modal { max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; }

/* A draft is a creative that only exists as a brief - it should read that way:
   a dashed edge, a quiet state pill, and one clear next action. */
.kb-card.kb-draft { border: 1px dashed rgba(120, 128, 150, .45); background: #fcfcfd; box-shadow: none; }
.kb-card.kb-draft:hover { border-color: rgba(120, 128, 150, .7); }
.kb-card.kb-draft .kb-media { opacity: .92; }
.kb-badge { flex: none; font-size: 9.5px; font-weight: 500; color: #6b7280; background: rgba(120, 128, 150, .12); border-radius: 999px; padding: 1px 8px; align-self: flex-start; letter-spacing: 0; }
.kb-draftacts { gap: 4px; }
.kb-draftacts .kb-act.go { border-color: rgba(19, 115, 51, .3); background: #f4fbf6; }
.kb-draftacts .kb-act.go:hover { background: #eaf7ef; }
.kb-act.kb-more { flex: 0 0 34px; font-size: 14px; line-height: 1; padding: 4px 0; color: var(--muted); }
.cc.cc-draft { border-style: dashed; }
.cc-kind.draft { color: #7b8190; }
.pv-draftbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px dashed rgba(120, 128, 150, .4); border-radius: 12px; padding: 14px 16px; margin-top: 14px; background: #fcfcfd; }
.pv-draftbar b { font-size: 13.5px; }

/* One header for the daily screens (Board, Campaigns) */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sec-title h2 { margin: 0 0 2px; font-size: 22px; font-weight: 600; letter-spacing: -.015em; }
.sec-title .s { max-width: 62ch; line-height: 1.45; }
.sec-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sec-controls .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sec-controls .lib-proj { height: 32px; }
.sec-controls .ghost.small { height: 32px; }
/* One control height across every section header, so a row of chips and a row of
   buttons sit on the same baseline instead of one being three pixels taller. */
.sec-controls .chip { height: 30px; padding: 0 12px; }
.sec-controls .chip[disabled] { opacity: .5; cursor: default; }
.sec-controls .chip.on { background: var(--bg2); border-color: var(--line); color: var(--ink); font-weight: 600; }
@media (max-width: 720px) { .sec-head { align-items: flex-start; } .sec-controls { width: 100%; } }

/* The explanation lives behind an info button, not under the title */
.sec-title { display: flex; align-items: center; gap: 7px; }
.sec-title h2 { margin: 0; }
.sec-info { width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--muted); padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: help; transition: background .12s ease, color .12s ease; }
.sec-info:hover { background: var(--hover); color: var(--ink); }
.sec-info svg { width: 16px; height: 16px; }
.err-fix { margin-left: 6px; white-space: nowrap; }
.act-by { font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--muted); }
.conn-note { border-color: var(--orange); background: var(--tint); margin-bottom: 14px; }

/* The roadmap's own rules all live in one block up in the Copilot section. They
   used to be scattered across three places in this file, each one silently
   overriding the last because CSS reads top to bottom. */

/* The morning brief: a counter in the header and a panel over the board.
   It floats on purpose. A card above the work pushes the work down every day
   for the sake of a line you read once, so this one overlays and the board
   stays the first thing on the screen. */
/* Zero height, but it is still a flex child of .stack, so it was contributing one
   extra 14px gap — which is why the board's tabs sat 14px lower than the same
   tabs on Campaigns. It only exists to anchor the notifications popover, so it
   gives that gap back. */
.brief-anchor { position: relative; height: 0; margin-top: -14px; }
.brief-btn.has-todo { border-color: var(--orange); color: var(--orange-ink); background: var(--tint); }
.brief-count { display: inline-flex; min-width: 17px; height: 17px; padding: 0 4px; margin-left: 4px; border-radius: 999px;
  background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; align-items: center; justify-content: center; }
.brief-pop { position: absolute; z-index: 40; right: 0; top: 6px; width: min(440px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .14); }
.brief-grp + .brief-grp { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.brief-h { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.brief-pop ul { margin: 0; padding: 0; list-style: none; }
.brief-pop li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--muted); padding: 4px 0; }
.brief-pop li + li { border-top: 1px dashed var(--line); }
.brief-pop li > span { flex: 1; min-width: 0; }
.brief-x { flex: none; border: 0; background: none; color: var(--muted); font-size: 15px; line-height: 1;
  padding: 0 2px; cursor: pointer; opacity: .45; transition: opacity .12s ease, color .12s ease; }
.brief-x:hover { opacity: 1; color: var(--ink); }
.brief-foot { margin-top: 8px; text-align: right; }
@media (max-width: 720px) { .brief-pop { right: auto; left: 0; } }

/* Bell: an icon button with a count on it, the shape everyone already knows */
.icon-btn { position: relative; width: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn svg { width: 17px; height: 17px; }
.brief-btn.has-todo { border-color: var(--orange); color: var(--orange-ink); background: var(--tint); }
.icon-btn .brief-count { position: absolute; top: -5px; right: -5px; margin: 0; }
.brief-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }

/* Board tabs */
.tab-count { margin-left: 6px; font-size: 11px; color: var(--muted); font-weight: 600; }
.tab.active .tab-count { color: inherit; }

/* Backlog: ideas waiting to become work */
.bl-list { display: flex; flex-direction: column; gap: 8px; }
.bl-row { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); cursor: pointer; }
.bl-row:hover { border-color: var(--orange); }
.bl-main { min-width: 0; }
.bl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bl-code { font-size: 11.5px; color: var(--muted); }
.bl-age { margin-top: 2px; }
.bl-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.bl-acts { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.lt-stage { font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }

/* Summary */
.sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.sum-grid .card, .sum-card { margin-top: 0; }
@media (max-width: 720px) { .bl-row { flex-direction: column; } .bl-side { align-items: flex-start; } }

/* The project switcher: you are IN a project, this is how you leave for another */
.proj-switch { position: relative; padding-bottom: 4px; }
.proj-cur { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.proj-cur:hover { background: var(--hover); }
.proj-cur.open { border-color: var(--orange); }
.proj-cur .pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.proj-cur .pchev { width: 15px; height: 15px; flex: none; color: var(--muted); transform: rotate(90deg); transition: transform .12s ease; }
.proj-cur.open .pchev { transform: rotate(-90deg); }
.proj-menu { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 2px); max-height: 60vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 14px 36px rgba(15, 23, 42, .16); }
.proj-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font-size: 13px; cursor: pointer; text-align: left; }
.proj-opt:hover { background: var(--hover); }
.proj-opt.sel { background: var(--tint); color: var(--orange-ink); font-weight: 600; }
.proj-opt .pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-menu-foot { display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
/* Two short actions on one line, at every width. A footer that sometimes wraps
   is a footer with two layouts, and nobody designed the second one. */
.proj-menu-foot .link { white-space: nowrap; flex: none; }
/* The composer's project is shown, not chosen: one switcher, in the sidebar */
.cmd-chip-b.static { cursor: default; opacity: .85; }
.cmd-chip-b.static:hover { background: inherit; }

/* Chat folders in the sidebar: a shelf inside a project */
.fld { margin-bottom: 1px; }
.fld-row { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 13.5px; font-weight: 500; }
.fld-row:hover { background: var(--hover); }
.fld.open > .fld-row .pchev { transform: rotate(90deg); }
.fld-ctx { color: var(--orange); font-size: 10px; flex: none; }
.fld-ico { width: 22px; height: 22px; border: 0; background: none; color: var(--muted); border-radius: 6px; padding: 0; flex: none; opacity: 0; }
.fld-row:hover .fld-ico { opacity: 1; }
.fld-ico:hover { background: var(--bg); color: var(--ink); }
.fld .proj-chats { padding-left: 12px; margin-left: 6px; border-left: 1px solid var(--line); }
.fld-add { float: right; font-weight: 500; }
.proj-chats.drop, .fld.drop > .fld-row { background: var(--tint); outline: 1px dashed var(--orange); }
.chat-item.dragging { opacity: .5; }
.login-legal { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.login-legal a { color: var(--muted); text-decoration: none; }
.login-legal a:hover { color: var(--ink); }

/* ---------- the editable automation card ---------- */
/* Every field on this card used to be a server-rendered string. Dictation is
   right about ninety percent of the time, so the fix has to be a tap. */
.ac-name-in {
  width: 100%; font-size: 15px; font-weight: 600; border: 1px solid transparent;
  background: transparent; padding: 4px 6px; margin: 2px 0 8px; border-radius: 7px;
}
.ac-name-in:hover { border-color: var(--line); }
.ac-name-in:focus { border-color: var(--orange); background: #fff; outline: none; }
.ac-assume { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 9px; padding: 8px 10px; font-size: 12.5px; margin: 8px 0; }
.ac-when, .ac-then { font-size: 13.5px; margin: 10px 0 6px; }
.ac-then { color: var(--muted); }
.ac-edit { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin: 4px 0 10px; }
.ac-edit label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted); }
.ac-edit label.wide { flex: 1 1 190px; }
.ac-edit select, .ac-edit input { height: 30px; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: #fff; }
.ac-edit input[type="number"] { width: 84px; }
.ac-unit { align-self: center; font-size: 12px; color: var(--muted); }
/* What it would do today. The dry run existed only after creating the thing and
   pressing Run now, and its result was never rendered anywhere. */
.ac-dry { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; background: var(--bg); font-size: 12.5px; }
.ac-dry.loading { color: var(--muted); }
.ac-dry.fires { border-color: var(--orange); background: #fff8f1; }
.ac-dry-h { font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.ac-dry-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 3px 0; align-items: baseline; }
.ac-dry-c { font-weight: 500; }
.ac-dry-why { color: var(--muted); font-size: 11.5px; }
.ac-dry-d { margin-left: auto; }

/* ==================== Overview ====================
   The orchestrator's own screen. It reuses the board's table, KPI strip and
   freshness line wholesale; what is new here is the widget grid, the day cards
   and one vocabulary for "this changed" that all three tabs share. */

/* A change against the period before. Colour carries the VERDICT, not the sign:
   a CPA that fell is green even though the number is negative, which is decided
   by the caller (deltaHtml) and only rendered here. */
.ov-d { font-size: 11.5px; font-weight: 600; padding: 1px 5px; border-radius: 999px; white-space: nowrap; }
.ov-d.up { color: var(--ok); background: rgba(10,138,69,.10); }
.ov-d.down { color: var(--bad); background: rgba(192,38,38,.09); }
.ov-d.flat { color: var(--muted); background: rgba(0,0,0,.05); }
.ov-pos { color: var(--ok); }
.ov-neg { color: var(--bad); }

/* Where the revenue number comes from. Never decoration: this line is the
   difference between a ROAS that means money and one that means nothing. */
.ov-basis { font-size: 12.5px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; margin: 10px 0 2px; }
.ov-basis.warn { background: #fff8f1; border-color: #fed7aa; color: #9a3412; }
.ov-cover { color: var(--muted); margin-top: 6px; }

.ov-name { font-weight: 500; }
.ov-sub { margin-top: 2px; }

/* Highlights: one list style for the dashboard widget, the monitoring header and
   every day card, so a warning looks the same wherever you meet it. */
.ov-hls { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ov-hl { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.ov-hl-dot { font-size: 9px; line-height: 20px; flex: none; }
.ov-hl.bad { border-color: #f3c9c9; background: #fff6f6; }
.ov-hl.bad .ov-hl-dot { color: var(--bad); }
.ov-hl.warn { border-color: #fed7aa; background: #fff8f1; }
.ov-hl.warn .ov-hl-dot { color: var(--warn); }
.ov-hl.good { border-color: #c6e9d5; background: #f4fbf7; }
.ov-hl.good .ov-hl-dot { color: var(--ok); }
.ov-hl.info .ov-hl-dot { color: var(--muted); }

/* ---- monitoring: a day is a card, and the newest one is open ---- */
.ov-days { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ov-day { padding: 0; overflow: hidden; }
/* A whole card that happens to be clickable. The base button rule paints white on
   orange, so a bare <button> here rendered white text on a white card — every
   number invisible, and only the coloured delta chips showing through. */
.ov-day-head { display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: none; color: var(--ink); font-weight: 400; text-align: left; padding: 12px 16px; border-radius: 0; }
.ov-day-head .s { color: var(--muted); }
.ov-day-head:hover { background: rgba(0,0,0,.02); }
.ov-day-date { display: flex; flex-direction: column; min-width: 120px; }
.ov-day-kpi { display: flex; flex-wrap: wrap; gap: 16px; flex: 1; font-size: 13.5px; align-items: baseline; }
.ov-day-kpi > span { display: inline-flex; gap: 4px; align-items: baseline; }
.ov-day-flags { display: flex; gap: 5px; }
.ov-flag { min-width: 20px; text-align: center; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 1px 6px; }
.ov-flag.bad { color: #fff; background: var(--bad); }
.ov-flag.warn { color: #fff; background: var(--warn); }
.ov-day-body { display: none; padding: 0 16px 14px; }
.ov-day.open .ov-day-body { display: block; }
.ov-day.open .ov-day-head { border-bottom: 1px solid var(--line); }

/* ---- the widget grid ---- */
.ov-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 900px) { .ov-grid { grid-template-columns: 1fr; } .ov-grid .ov-w { grid-column: span 1 !important; } }
.ov-w { padding: 14px 16px; }
.ov-w-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ov-w-head h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ov-w-tools { display: flex; align-items: center; gap: 6px; }
.ov-w-size button { min-width: 24px; }
.ov-w-dim { height: 26px; font-size: 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.ov-w-body .kpi-strip { margin: 0; }
/* Edit mode says so with a handle and a dashed outline; outside it the grid is
   just a screen and nothing invites a drag it will not honour. */
.ov-grid.editing .ov-w { cursor: grab; border-style: dashed; }
.ov-grid.editing .ov-w.drag { opacity: .5; }
.ov-grid.editing .ov-w.over { border-color: var(--orange); box-shadow: 0 0 0 2px var(--tint); }
.ov-add .ov-cat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ov-add .ov-cat button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.ov-add .ov-cat .s { color: var(--muted); font-weight: 400; }

.ov-trend { display: flex; flex-direction: column; gap: 8px; }
.ov-spark { width: 100%; display: block; border-bottom: 1px solid var(--line); }
.ov-trend > div { min-width: 0; }
.ov-fresh { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.ov-trend-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 2px; }

/* Folding sidebar sections. The head is a <button>, so it needs the base button
   rule undone or it paints white on orange — the same trap the day cards fell
   into. */
.side-head[data-sectoggle] {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; background: none; border: none; color: var(--muted);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 8px;
  /* A heading with a highlight is a different object from a heading without one.
     The old rule padded 10px above and 2px below — invisible while the head was
     bare text, and plainly lopsided once hover and focus started drawing a box
     around it. So: symmetric padding puts the label in the middle of its own
     highlight, and the air BETWEEN groups moves out to a margin, where spacing
     between things belongs. A fixed line-height keeps the box the same height
     whatever the font resolves to. */
  padding: 7px 8px;
  margin: 6px 0 0;
  line-height: 16px;
}
/* The first group sits right under the project switcher, which brings its own
   air; another six pixels there reads as a gap, not as grouping. */
.side-scroll > .side-section:nth-of-type(2) .side-head[data-sectoggle] { margin-top: 0; }
.side-head[data-sectoggle]:hover { color: var(--ink); background: var(--hover); }
.side-head[data-sectoggle]:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.side-chev { width: 14px; height: 14px; flex: none; opacity: .55; transition: transform .15s ease; }
@media (prefers-reduced-motion: reduce) { .side-chev { transition: none; } }
.side-section.open .side-chev { transform: rotate(180deg); }
.side-section .side-links { display: none; grid-gap: 3px; gap: 3px; }
.side-section.open .side-links { display: grid; }
/* The chat list is the one section that grows: it takes the leftover height and
   scrolls inside itself, but only while it is open — folded, it must not hold on
   to half the sidebar. */
.chat-history { flex: 0 0 auto; overflow: hidden; }
/* ...but never squeezed to nothing. With MANAGE and CREATE both expanded there
   is no leftover height left to take, and "takes the leftover" resolved to 69
   pixels: a scroller two rows tall, which reads as the chat list having
   disappeared. Below this floor the sidebar itself scrolls instead. */
.chat-history.open {
  flex: 1 1 auto; overflow-y: auto; min-height: min(190px, 26vh);
  /* Pinned to the bottom of the sidebar. The nav above it is five links plus
     five more, which on a laptop leaves the chat list below the fold: the
     section was there, scrolled to, and read as missing. Sticky keeps it on
     screen and lets the navigation scroll behind it. */
  position: sticky; bottom: 0; z-index: 2; background: var(--sidebar);
}
.chat-history .side-links { min-height: 0; }
/* The head stays put while its list scrolls under it, which means it needs an
   opaque background — and that background was winning against :hover on equal
   specificity, so this one head silently stopped highlighting. The hover state is
   restated here rather than fought with !important. */
.chat-history .side-head[data-sectoggle] { position: sticky; top: 0; z-index: 1; background: var(--sidebar); }
.chat-history .side-head[data-sectoggle]:hover { background: var(--hover); }

/* ==================== Context: documents ==================== */
/* One column, one job. The folder used to sit in a 260px gutter beside an editor
   for a document nobody had chosen yet; now the list IS the screen, and opening a
   file replaces it. Both halves get the width they were always short of. */
.cx-wrap { display: block; }
.cx-list { padding: 14px 16px; }
.cx-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
/* One vertical list. Columns were a way of using the width that cost the thing
   the width was for: a folder you read top to bottom. The width goes into the
   ROW instead — name, what it is for, and its state, on one line. */
.cx-list .cx-tree ul { display: flex; flex-direction: column; gap: 1px; }
/* The meta line is scoped per-context elsewhere in this file and never reached
   inside a button, so it inherited the row's ink and shouted louder than the file
   name it belongs to. */
.cx-file .s { font-size: 12px; color: var(--muted); }
.cx-folder-grp ul, .cx-list .cx-tree > ul { padding-left: 0; border-left: 0; margin-left: 0; }
.cx-folder-grp > .cx-folder { padding-left: 10px; }
.cx-file.sel .s { color: inherit; opacity: .8; }
.cx-file.blank .s { font-style: italic; }
.cx-intake { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cx-intake #cxUrl { width: 220px; }
.cx-example { margin-top: 10px; padding: 9px 12px; border: 1px dashed var(--line); border-radius: 9px; }
.cx-example i { color: var(--ink); }
.cx-attrs-label { width: 78px; flex: none; }
.cx-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* A file manager row, and its header. Four columns on one track so the header
   and every row line up without either knowing the other's widths. */
.cx-cols, .cx-file {
  display: grid;
  grid-template-columns: minmax(150px, 260px) minmax(0, 1fr) 74px 96px;
  gap: 4px 14px; align-items: baseline; width: 100%; text-align: left;
  padding: 7px 10px;
}
.cx-find { width: 190px; padding: 5px 10px; font-size: 13px; border-radius: 8px; }
/* Focus has to be visible: the arrows move it, and a list you can walk without
   seeing where you are is a list you cannot walk. */
/* The query matched the document's text, not its name. Said quietly, because the
   alternative is a row that looks like a bad search result. */
.cx-file.inside .cx-file-says::after { content: ' · found inside'; color: var(--orange-ink); font-style: italic; }
.cx-file:focus-visible { outline: none; background: var(--hover); box-shadow: inset 0 0 0 2px var(--orange); }
.cx-cols { padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.cx-col { background: none; border: 0; padding: 0; text-align: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 4px; }
.cx-col:hover { color: var(--ink); }
.cx-col.on { color: var(--ink); }
.cx-col:nth-child(3), .cx-col:nth-child(4) { justify-content: flex-end; }
.cx-arrow { font-size: 10px; }
.cx-file { background: none; border: none; color: var(--ink); border-radius: 9px; font-weight: 400; }
.cx-when, .cx-size { text-align: right; white-space: nowrap; }
/* Below the header's width the columns stop helping and start truncating. */
@media (max-width: 760px) {
  .cx-cols { display: none; }
  .cx-file { grid-template-columns: 1fr; gap: 1px; }
  .cx-when, .cx-size { text-align: left; }
}
.cx-file:hover { background: var(--hover); }
.cx-file.sel { background: var(--tint); color: var(--orange-ink); }
.cx-file-name { font-weight: 500; font-size: 13.5px; }
.cx-starters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.cx-editor { padding: 14px 16px; min-height: 380px; }
.cx-ed-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cx-mode button { min-width: 60px; }
/* A document is prose: monospace only where it is actually being typed as text. */
/* The editor owns the page now, so it may as well own the height: a rules file
   is read as a whole, and 340px meant scrolling a document with four sections. */
.cx-ta { width: 100%; min-height: 58vh; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.6; resize: vertical; }
.cx-save { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.cx-save input { flex: 1; }
.cx-pending { margin-top: 10px; }
.cx-pending summary { cursor: pointer; }

.cx-preview { font-size: 14.5px; line-height: 1.6; }
.cx-preview h3, .cx-preview h4, .cx-preview h5, .cx-preview h6 { margin: 16px 0 6px; }
.cx-preview p { margin: 0 0 10px; }
.cx-preview ul, .cx-preview ol { margin: 0 0 10px; padding-left: 22px; }
.cx-preview code { background: var(--bg); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; }
.cx-code, .cx-preview pre { background: var(--bg); border-radius: 9px; padding: 10px 12px; overflow-x: auto; font-size: 12.5px; }

/* Diffs, read the way a review reads them: the change, with just enough around it. */
.cx-diff { border: 1px solid var(--line); border-radius: 9px; overflow-x: auto; margin-top: 6px; }
.cx-d { display: flex; gap: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.55; padding: 0 10px; white-space: pre-wrap; word-break: break-word; }
.cx-d > span:last-child { min-width: 0; flex: 1; }
.cx-d-mark { width: 9px; flex: none; text-align: center; opacity: .8; font-weight: 700; }
.cx-d.add { background: rgba(10,138,69,.10); }
.cx-d.del { background: rgba(192,38,38,.09); }
.cx-d.skip { color: var(--muted); background: var(--bg); font-style: italic; }
.cx-diff-head { margin-top: 8px; }
.cx-add { color: var(--ok); font-weight: 600; }
.cx-del { color: var(--bad); font-weight: 600; }
.cx-diff-box { margin-top: 12px; }

.cx-hist { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .cx-hist { grid-template-columns: 1fr; } }
.cx-hist ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-rev { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; background: none; border: none; color: var(--ink); text-align: left; padding: 7px 9px; border-radius: 9px; font-weight: 400; }
.cx-rev:hover { background: var(--hover); }
.cx-rev.sel { background: var(--tint); color: var(--orange-ink); }

.cx-blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cx-blocks li { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 13.5px; line-height: 1.5; }
.cx-blocks.dim li { opacity: .75; }
/* The tree. Indentation carries the hierarchy, so the folder head can stay a
   plain row rather than a heavy container — the folder is a fact about the file
   name, not a box the file lives inside. */
.cx-tree { display: flex; flex-direction: column; gap: 2px; }
.cx-folder { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; color: var(--muted); text-align: left; padding: 6px 9px; border-radius: 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.cx-folder:hover { background: var(--hover); color: var(--ink); }
.cx-folder .side-chev { transform: rotate(-90deg); }
.cx-folder-grp.open > .cx-folder .side-chev { transform: none; }
.cx-folder-name { flex: 1; }
.cx-folder-grp ul { padding-left: 12px; border-left: 1px solid var(--line); margin-left: 15px; }
.cx-file-says { font-size: 12px; color: var(--muted); line-height: 1.3; }
.cx-file.sel .cx-file-says { color: inherit; opacity: .85; }
.cx-tag { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 5px; border-radius: 5px; margin-left: 6px; background: var(--bg2); color: var(--muted); vertical-align: 1px; }
.cx-tag.pin { background: var(--tint); color: var(--orange-ink); }
.cx-archived { margin-top: 10px; }
.cx-archived ul { margin-top: 6px; }
.cx-arch { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); padding: 3px 9px; }

/* What the document is for. Open when it says something, closed when it does
   not — a file with no attributes should not make you look at empty controls. */
.cx-attrs { border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; margin-bottom: 10px; }
.cx-attrs > summary { cursor: pointer; }
.cx-attrs-body { display: flex; flex-direction: column; gap: 9px; margin-top: 9px; }
.cx-attrs-body input[type=text], .cx-attrs-body #cxDesc { width: 100%; }
.cx-attrs-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* The explanation goes UNDER the row rather than beside it. Three items in one
   flex line — control, prose, button — is a line that only looks right at one
   width, and this panel is inside a resizable pane. */
.cx-attrs-row > .s { flex: none; }
.cx-attrs-row #cxAttrsSave { margin-left: auto; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-chips .chip { cursor: pointer; }
/* The global `label` rule is display:block with a bottom margin, written for
   form fields that sit above their input. A checkbox sits BESIDE its words, so
   this restates the whole box rather than patching one property of it. */
.cx-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); margin: 0; flex: none; white-space: nowrap; }
/* The global input rule is written for text fields: full width, 9px of padding,
   a border. A checkbox inherits all three and draws its 13px glyph centred in a
   padded box, which is why the tick and its words sat eighty pixels apart. */
.cx-check input { flex: none; width: auto; margin: 0; padding: 0; border: 0; background: none; border-radius: 0; }
.cx-check span { flex: none; }

/* Two secondary actions. They were full-width bars, which made the least
   important controls on the screen the largest thing on it. */
.cx-list-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.cx-list-foot button { width: auto; }
.cx-list-foot .ghost { color: var(--muted); }
.cx-list-foot .ghost:hover { color: var(--ink); }
.cx-report { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin-top: 10px; background: var(--bg); }
.cx-report code { font-size: 11.5px; }
.cx-proposals { margin-bottom: 12px; border-color: var(--orange); }
.cx-proposals h3 { margin: 0 0 4px; font-size: 14px; }
.cx-prop { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.cx-prop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---- the diary ---- */
.cx-hyps { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cx-hyp { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.cx-hyp.done { background: var(--bg); }
.cx-hyp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.cx-ev { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.cx-v { font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: rgba(0,0,0,.05); white-space: nowrap; }
.cx-v.ov-pos { background: rgba(10,138,69,.12); }
.cx-v.ov-neg { background: rgba(192,38,38,.10); }
/* The autopilot dials. A grid rather than a list so the "off | suggest | on its
   own" columns line up — reading down the right edge answers "how much is this
   thing allowed to do" in one glance. */
.cx-dials { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.cx-dial { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.cx-dial:last-child { border-bottom: 0; }
.cx-dial .s { margin-top: 1px; }
.cx-auto .va-seg { flex: none; }

.cx-jrn { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cx-jrn li { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.cx-jrn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.cx-intake-fold { margin-bottom: 10px; }
.cx-intake-fold > summary { cursor: pointer; color: var(--muted); }
.cx-intake-fold > summary:hover { color: var(--ink); }
.cx-intake-fold[open] > summary { margin-bottom: 8px; }
.cx-intake input[type="text"], .cx-intake input:not([type]) { font-size: 12.5px; height: 30px; }

/* ---- Prediction ---- */
.pred-row { margin-bottom: 12px; }
.pred-money { display: flex; gap: 8px; flex-wrap: wrap; }
/* The three ways an app earns are a decision, not a dropdown: each option says
   what shape of money it implies, because that IS the choice being made. */
.pred-mbtn { display: flex; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 8px 14px; color: var(--ink); text-align: left; font-weight: 500; min-height: 38px; }
.pred-mbtn:hover { background: var(--hover); border-color: var(--line); color: var(--ink); }
.pred-mbtn.on { background: var(--tint); border-color: var(--orange); color: var(--orange-ink); }
.pred-mbtn .s { font-size: 11.5px; }
.pred-form { display: flex; gap: 12px 16px; flex-wrap: wrap; align-items: flex-end; }
.pred-form .field { margin: 0; }
.pred-form input { width: 130px; }
.pred-obs { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.pred-ob { display: inline-flex; gap: 8px; align-items: center; }
.pred-verdict { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pred-chart { width: 100%; height: auto; display: block; margin: 6px 0 10px; }
.pc-grid { stroke: var(--line); stroke-width: 1; }
.pc-lab { font-size: 10px; fill: var(--muted); }
.pc-line { fill: none; stroke: var(--orange); stroke-width: 2.25; stroke-linejoin: round; }
.pc-spend { stroke: #cdc5b9; stroke-width: 1.5; stroke-dasharray: 5 4; }
.pc-pay { fill: var(--ok); }
.pc-pay-lab { fill: var(--ok); font-weight: 700; }
.pred-days { display: flex; gap: 10px; flex-wrap: wrap; }
.pred-day { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; min-width: 86px; }
.pred-day b { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.pred-notes { margin: 10px 0 0; padding-left: 18px; }
.pred-saved { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pred-saved li { display: flex; align-items: center; gap: 8px; }
.pred-open { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: none; border: none; color: var(--ink); text-align: left; padding: 7px 9px; border-radius: 9px; font-weight: 400; }
.pred-open:hover { background: var(--hover); border: none; color: var(--ink); }
.pred-open b { font-weight: 600; font-size: 13.5px; }
/* The predict column: the second figure is predicted ROAS at the chosen day. */
.bd-proas { display: block; font-size: 10.5px; color: var(--muted); }
table.stats th select { width: auto; padding: 2px 6px; font-size: 12px; border: none; background: none; color: var(--muted); font-weight: 600; cursor: pointer; }
.pred-config { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.pred-config > label { font-weight: 600; color: var(--ink); font-size: 13px; }
.pred-mixrow { display: flex; gap: 16px; flex-wrap: wrap; }
/* Prediction, second pass: the verdict is a sentence, the chart is the hero. */
.pred-say { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.pred-say b { color: var(--orange-ink); }
.pred-say-no { color: var(--muted); }
.pred-facts { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; color: var(--muted); }
.pred-facts b { color: var(--ink); font-weight: 600; }
.pred-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.pc-drop { stroke: var(--ok); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
/* The Prediction hub: the scenario strip and the Advanced fold. */
.pred-strip { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 8px; }
.pred-scen b { margin-right: 2px; }
.pred-scen .menu-btn { margin-left: 2px; }
.pred-scen { display: inline-flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 5px 6px 5px 12px; color: var(--ink); font-weight: 500; }
.pred-scen:hover { background: var(--hover); border-color: var(--line); color: var(--ink); }
.pred-scen.sel { background: var(--tint); border-color: var(--orange); color: var(--orange-ink); }
.pred-scen .s { font-size: 11px; }
.pred-scen .menu-btn { font-size: 14px; padding: 1px 5px; }
.pred-star { color: var(--orange); font-size: 12px; }
.pred-truth { margin: 0 0 10px 4px; color: var(--orange-ink); }
.pred-truth-off { color: var(--muted); }
.pred-adv { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; margin: 4px 0 12px; }
.pred-adv > summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 500; }
.pred-adv > summary:hover { color: var(--ink); }
.pred-adv[open] > summary { margin-bottom: 10px; }
.pred-adv .pred-adv-row { margin-bottom: 10px; }
/* The day-cohort verdict: judged against the target, not against the column's
   own best day. Same thresholds as goalStatus() on the server. */
.bd-goal-ok { background: rgba(23, 128, 74, .16); }
.bd-goal-close { background: rgba(161, 98, 7, .16); }
.bd-goal-miss { background: rgba(192, 61, 51, .15); }
/* The prediction dashboard tab. */
.pred-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 12px; }
.pred-card.active { border-color: var(--orange); }
.pred-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pred-verdict-line { margin-top: 8px; }
.pd-verdict { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 7px; background: var(--bg2); }
.pd-ok { color: var(--ok); } .pd-ok.pd-verdict { background: #e8f4ec; }
.pd-close { color: var(--warn); } .pd-close.pd-verdict { background: #faf0dd; }
.pd-miss { color: var(--bad); } .pd-miss.pd-verdict { background: #fdecec; }
/* The target row. Each way of stating the goal is its own bordered group, so
   "ROAS 1.2 by day 90" reads as one phrase and the OR between the two phrases
   is visibly an OR — not eleven fragments sharing one line. The card owns real
   margin below: it must never touch the scenario strip. */
.pred-goal { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; }
.pred-goal-label .s { margin-top: 1px; }
.pred-goal-opt { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 6px 12px; background: var(--bg); font-size: 13px; white-space: nowrap; }
.pred-goal-opt input { width: 70px; background: var(--panel); }
.pred-goal-or { color: var(--muted); font-size: 12px; text-transform: uppercase; font-weight: 600; letter-spacing: .04em; }
.pred-goal #pgSave { margin-left: auto; }
/* The front door: one link in, the guesses out, everything editable. */
.cx-start h3 { margin: 0 0 4px; font-size: 16px; }
.cx-start-row { display: flex; gap: 10px; margin-top: 12px; }
.cx-start-row input { flex: 1; font-size: 15px; padding: 11px 14px; }
.cx-start-row button { flex: none; }
.cx-start #cxBootMsg { margin-top: 8px; min-height: 18px; }
.cx-start-done { padding: 12px 16px; }
.cx-start-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cx-start-url { font-weight: 600; color: var(--orange-ink); text-decoration: none; }
.cx-start-url:hover { text-decoration: underline; }
.cx-guess { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cx-guess select { width: auto; }
.cx-guess input { width: 240px; }
/* Onboarding quick replies: a row of taps under the bot's question. */
.ob-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 0 4px; }
/* The onboarding speaks in the SAME voice as every other chat — the ChatGPT
   layout the ideas/images/videos surfaces already use: the user is a bubble on
   the right, the bot is plain ink on the left. Only the answer pick-list is
   the onboarding's own. */
.ob-opts { display: flex; flex-direction: column; gap: 6px; max-width: 460px; margin: 6px auto 8px; width: 100%; }
.cmdshell.chat-full .ob-opts { max-width: min(1520px, 96%); padding: 0 clamp(16px, 3vw, 48px); }
.ob-opt { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; color: var(--ink); font-weight: 500; font-size: 13.5px; }
.ob-opt:hover { border-color: var(--orange); background: var(--tint); color: var(--orange-ink); }
.ob-n { width: 20px; height: 20px; border-radius: 6px; background: var(--bg2); color: var(--muted); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.ob-opt:hover .ob-n { background: rgba(246, 130, 31, .18); color: var(--orange-ink); }
.ob-own { font-size: 12px; color: var(--muted); padding: 2px 2px 0; }
/* The tall shell grows with its conversation instead of opening as an empty
   hangar: height comes from content, capped, never below one exchange. */
.cmdshell.tall .cmd-log { height: auto; min-height: 0; max-height: 62vh; }
/* Assistant messages read like ChatGPT's: rendered paragraphs with real air,
   not a preformatted block. The renderer emits p/ul/ol/h-tags; give them the
   rhythm of prose and keep the first/last flush with the bubble row. */
.cmd-msg.bot { white-space: normal; }
.cmd-msg.bot p { margin: 0 0 10px; }
.cmd-msg.bot p:last-child, .cmd-msg.bot ul:last-child, .cmd-msg.bot ol:last-child { margin-bottom: 0; }
.cmd-msg.bot ul, .cmd-msg.bot ol { margin: 0 0 10px; padding-left: 22px; }
.cmd-msg.bot li { margin: 3px 0; }
.cmd-msg.bot h1, .cmd-msg.bot h2, .cmd-msg.bot h3 { font-size: 15px; font-weight: 700; margin: 12px 0 6px; }
.cmd-msg.bot code { background: var(--bg2); border-radius: 5px; padding: 1px 5px; font-size: 13px; }
.cmd-msg.bot pre { background: var(--bg2); border-radius: 9px; padding: 10px 12px; overflow-x: auto; margin: 0 0 10px; }
/* A conversation breathes between turns. */
.cmdshell.chat-full .cmd-log { gap: 18px; }
/* The thinking beat: three dots breathing while the answer is prepared. Still
   under reduced motion, where they simply stand. */
.cmd-typing { display: inline-flex; gap: 5px; padding: 8px 2px; align-items: center; }
/* The label that makes the wait legible when the dots cannot move (reduced
   motion) and names which wait it is when they can. */
.cmd-typing-t { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.cmd-typing span { width: 7px; height: 7px; border-radius: 50%; background: #cdc5b9; animation: cmdTyping 1.2s ease-in-out infinite; }
.cmd-typing span:nth-child(2) { animation-delay: .18s; }
.cmd-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes cmdTyping { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .cmd-typing span { animation: none; opacity: .6; } }
/* Work in progress, named. The dot breathes in the brand's ember so it reads as
   "this is running" at a glance; the sentence says which step and out of how
   many, because a spinner proves the page is alive and not that anything is
   happening on the account. */
/* ===== The goal a conversation is pursuing =====
   Not decoration: this is the answer to "почему копилот делает именно это", and
   every line under it was measured against the real account rather than
   asserted, which is why each carries its own evidence instead of a tick.

   It sits between the transcript and the composer, where a status line belongs:
   above the place you answer, below what was said. Quiet at rest, one line, and
   it only grows when you ask it to. */
/* Capped, and it scrolls on its own.
   A ten-criterion goal expanded inside a 600px dock pushed the composer off the
   bottom and left nothing to scroll, so the widget read as frozen. A status
   strip may never take the room the conversation needs. */
.goal-mount { flex: none; padding: 0 12px; max-height: 46%; display: flex; }
.goal { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--bg2); overflow: hidden; }
.goal-head { flex: none; display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 11px; background: none; border: none; color: var(--ink); font-weight: 500; font-size: 13px; text-align: left; }
.goal-head:hover, .goal-head:active { background: var(--hover); border: none; color: var(--ink); }
/* Ember for a destination, green for a state being held: a standing goal is
   never "almost done", and colouring both the same invited that reading. */
.goal-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.goal-dot.keep { background: var(--ok); }
.goal-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-n { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.goal-chev { flex: none; font-size: 10px; color: var(--muted); }
.goal-body { min-height: 0; overflow-y: auto; padding: 2px 11px 9px; border-top: 1px solid var(--line); }
.goal-c { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 12px; line-height: 1.45; }
.goal-m { flex: none; width: 12px; text-align: center; font-weight: 700; }
.goal-c.met .goal-m { color: var(--ok); }
.goal-c.open .goal-m { color: var(--orange-ink); }
/* Unknown is its own state and looks like neither. "We could not look" must not
   read as either good news or a task. */
.goal-c.unknown { color: #9a938a; }
.goal-c.unknown .goal-m { color: #b9b1a6; }
.goal-e { flex: 1 1 auto; min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.goal-e b { font-weight: 600; color: inherit; }
.goal-c.met .goal-e { color: #8b857c; }
.goal-c.open .goal-e { color: var(--ink); }
.goal-do { flex: none; align-self: center; background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: var(--r-s); padding: 2px 9px; font-size: 11.5px; font-weight: 600; }
.goal-do:hover, .goal-do:active { background: var(--tint); border-color: #eab989; color: var(--orange-ink); }
/* Sticky so the way out of the panel is reachable without scrolling to the
   end of a long checklist. */
.goal-foot { position: sticky; bottom: 0; display: flex; gap: 12px; padding-top: 7px; margin-top: 5px; background: var(--bg2); border-top: 1px solid var(--line); }
.goal-foot .link { font-size: 12px; }
.cmd-note { display: flex; align-items: center; gap: 9px; padding: 7px 2px; font-size: 13px; color: var(--muted); }
.cmd-note-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: cmdNote 1.4s ease-in-out infinite; }
/* Inside a run note the dots are the subject, not a bullet: they sit tight and
   take the accent colour, so a plan working through its steps looks alive. */
.cmd-note .cmd-typing { padding: 0; flex: none; }
.cmd-note .cmd-typing span { width: 6px; height: 6px; background: var(--orange); }
@keyframes cmdNote { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 130, 31, .35); } 50% { box-shadow: 0 0 0 5px rgba(246, 130, 31, 0); } }
@media (prefers-reduced-motion: reduce) { .cmd-note-dot { animation: none; } }
/* Links in the conversation look like links, in both voices. */
.cmd-msg a { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.cmd-msg a:hover { color: var(--ink); }
/* A step missing a value asks for it in the voice of a question rather than the
   red of a failure — see .rm-note.need in the Copilot block. */