/* business_agents.css — the agent workspace.
 *
 * Self-contained on purpose. home.css carries an UNLAYERED `* { margin:0; padding:0 }`
 * and Tailwind v4 emits utilities inside `@layer utilities`; unlayered rules beat every
 * layer, so all Tailwind margin/padding utilities are dead app-wide. Rather than fight
 * that, this surface styles itself with its own classes, which outrank `*` on specificity.
 *
 * Design: a jeweller's year IS the festival calendar, so the calendar is the spine of the
 * interface. Chrome follows the app's own system; the only warm colour on these
 * pages is the customer's extracted brand palette, so their gold reads as theirs.
 */

.ba {
  /* Matches the app's own system (see _invites_v2_styles): near-white ground,
     deep navy text, purple accent. The ONLY warm colour on these pages should be
     the customer's own extracted brand palette — the chrome stays neutral so
     their gold actually reads as theirs. */
  --paper: #fbfbff;
  --card: #ffffff;
  --ink: #1f295d;
  --ink-2: #687394;
  --ink-3: #94a3b8;
  --accent: #6c4bea;
  --accent-soft: #f3f0fe;
  --rule: #e2e8f0;
  --rule-strong: #cbd5e1;
  --radius: 12px;

  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  min-height: 70vh;
  padding: 32px 24px 72px;
}
.ba *, .ba *::before, .ba *::after { box-sizing: border-box; }
.ba-wrap { max-width: 880px; margin-left: auto; margin-right: auto; }
.dashboard-v2-layout .ba { min-height: calc(100vh - 64px); }
.ba a { color: inherit; }
.ba h1, .ba h2, .ba h3 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 600; letter-spacing: -0.01em; margin: 0; }

/* ── workspace bar: makes org-level vs brand-level explicit ───────────── */
.ba-ws { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 30px; }
.ba-ws-org { font-family: 'DM Serif Display', Georgia, serif; font-size: 19px; font-weight: 600; }
.ba-ws-meta { color: var(--ink-2); font-size: 13px; }
.ba-ws-right { margin-left: auto; display: flex; gap: 18px; font-size: 13px; }
.ba-ws-right a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.ba-ws-right a:hover, .ba-ws-right a:focus-visible { color: var(--ink); border-bottom-color: var(--accent); }

.ba-brands { display: grid; gap: 12px; margin-top: 24px; }
@media (min-width: 700px) { .ba-brands { grid-template-columns: 1fr 1fr; } }
.ba-brand { display: block; text-decoration: none; background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; }
.ba-brand:hover { border-color: var(--accent); }
.ba-brand-name { display: block; font-family: 'DM Serif Display', Georgia, serif; font-size: 19px; }
.ba-brand-meta { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); }

/* The brand is the container; the agent's output (Posts) sits apart from the
   business's own things (Products, Brand kit) so ownership reads correctly. */
.ba-brandbar { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.ba-brandbar-name { font-family: 'DM Serif Display', Georgia, serif; font-size: 23px; font-weight: 600; }
.ba-brandbar-meta { font-size: 13px; color: var(--ink-3); }

.ba-tabs { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; font-size: 14px; }
.ba-tabs-end { margin-left: auto; }
.ba-tabs a { color: var(--ink-2); text-decoration: none; padding-bottom: 7px; border-bottom: 2px solid transparent; }
.ba-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ── the calendar spine ───────────────────────────────────────────────── */
.ba-next { margin-bottom: 34px; }
.ba-next-rule { height: 2px; background: var(--accent); width: 54px; margin-bottom: 18px; }
.ba-next h1 { font-size: clamp(38px, 7vw, 60px); line-height: 1.02; }
.ba-next-when { margin-top: 10px; color: var(--ink-2); font-size: 14px; }
.ba-next-angle { margin-top: 14px; max-width: 46ch; color: var(--ink-2); }

  padding: 13px 0; border-bottom: 1px solid var(--rule); }

/* ── agent marketplace ────────────────────────────────────────────────── */
.ba-lede { font-size: 17px; color: var(--ink-2); max-width: 52ch; margin: 10px 0 34px; }
.ba-agents { display: grid; gap: 16px; }
@media (min-width: 760px) { .ba-agents { grid-template-columns: 1fr 1fr; } }
.ba-agent { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 24px; display: block; text-decoration: none; }

.ba-agent--soon { background: transparent; border-style: dashed; }
.ba-agent h2 { font-size: 26px; }
.ba-agent-knows { margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-2); }
.ba-agent-knows li { padding: 4px 0 4px 16px; position: relative; }
.ba-agent-knows li::before { content: ""; position: absolute; left: 0; top: 13px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ba-agent--soon .ba-agent-knows li::before { background: var(--ink-3); }
.ba-agent-go { margin-top: 18px; font-size: 14px; color: var(--accent); font-weight: 500; }
.ba-agent-soon { margin-top: 18px; font-size: 13px; color: var(--ink-3); }

/* ── posts ────────────────────────────────────────────────────────────── */
.ba-posts { display: grid; gap: 18px; margin-top: 26px; align-items: start; }
@media (min-width: 620px) { .ba-posts { grid-template-columns: repeat(3, 1fr); } }
.ba-post { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.ba-post img { display: block; width: 100%; height: auto; }
.ba-post-ph { aspect-ratio: 4 / 5; display: grid; place-items: center; color: var(--ink-3); font-size: 13px; background: #efeae3; }
.ba-post-foot { padding: 11px 13px; display: flex; align-items: center; gap: 10px; }
.ba-post-fmt { font-size: 12px; color: var(--ink-3); }
.ba-post-edit { margin-left: auto; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink-2); background: transparent; border: 1px solid var(--rule-strong);
  border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.ba-post-edit:hover { border-color: var(--accent); color: var(--accent); }
.ba-post-edit form { margin: 0; }
.ba-post-dl { font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 500; }
.ba-post-dl:hover { text-decoration: underline; }

/* ── products ─────────────────────────────────────────────────────────── */
.ba-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 24px; }
@media (min-width: 620px) { .ba-grid { grid-template-columns: repeat(4, 1fr); } }
.ba-item { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px; }
.ba-item--star { border-color: var(--accent); }
.ba-item--out { opacity: .5; }
.ba-item img, .ba-item .ba-item-ph { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: #efeae3; display: block; }
.ba-item-name { font-size: 13px; margin-top: 8px; }
.ba-item-acts { display: flex; gap: 6px; margin-top: 8px; }
.ba-item-acts form { margin: 0; }
.ba-chip { font-size: 11px; padding: 3px 8px; border: 1px solid var(--rule); border-radius: 99px;
  background: transparent; color: var(--ink-2); cursor: pointer; font-family: inherit; }
.ba-chip--on { border-color: var(--accent); color: var(--accent); }

/* ── brand kit ────────────────────────────────────────────────────────── */
.ba-kit { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 22px; display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; margin-top: 24px; }
.ba-kit-logo { width: 72px; height: 72px; border-radius: 8px; object-fit: contain; background: #efeae3; }
.ba-sw { display: flex; gap: 8px; flex-wrap: wrap; }
.ba-sw span { display: flex; align-items: center; gap: 7px; font-size: 12px;
  font-variant-numeric: tabular-nums; border: 1px solid var(--rule); border-radius: 6px; padding: 5px 9px; }
.ba-sw i { width: 15px; height: 15px; border-radius: 3px; display: block; }
.ba-dt { font-size: 12px; color: var(--ink-3); margin-bottom: 7px; }
.ba-tone { margin-top: 16px; }

/* ── forms, buttons, states ───────────────────────────────────────────── */
.ba-field { margin-top: 16px; }
.ba-field label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 5px; }
.ba-input { width: 100%; font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: 8px; padding: 11px 13px; }
.ba-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ba-row2 { display: grid; gap: 14px; }
@media (min-width: 620px) { .ba-row2 { grid-template-columns: 1fr 1fr; } }
.ba-btn { display: inline-block; font: inherit; font-weight: 500; cursor: pointer;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 8px; padding: 11px 20px; text-decoration: none; }
.ba-btn:hover { background: #5a3ad4; }
.ba-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ba-btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.ba-hint { font-size: 13px; color: var(--ink-3); margin-top: 10px; }
.ba-note { margin-top: 18px; padding: 16px 18px; border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; }
.ba-note strong { font-weight: 600; }
.ba-err { margin-top: 18px; padding: 13px 16px; border-left: 3px solid #d64550;
  background: #fdf2f3; border-radius: 0 8px 8px 0; font-size: 14px; }
.ba-empty { margin-top: 26px; padding: 30px; border: 1px dashed var(--rule);
  border-radius: var(--radius); text-align: center; color: var(--ink-2); }
.ba-progress { height: 3px; background: var(--rule); border-radius: 99px; overflow: hidden; margin-top: 20px; }
.ba-progress i { display: block; height: 100%; width: 34%; background: var(--accent); border-radius: 99px;
  animation: ba-slide 1.5s ease-in-out infinite; }
@keyframes ba-slide { 0% { margin-left: -34%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .ba-progress i { animation: none; width: 100%; } }
.hidden { display: none; }

/* ── talking to the agent ─────────────────────────────────────────────── */
.ba-ask { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--rule); }
.ba-ask label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.ba-ask-row { display: flex; gap: 10px; }
.ba-ask-row .ba-input { flex: 1; }

/* ── settings ─────────────────────────────────────────────────────────── */
.ba-set { margin-top: 30px; }
.ba-set + .ba-set { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--rule); }
.ba-set h2 { font-size: 21px; }
.ba-set-note { color: var(--ink-2); font-size: 14px; margin-top: 6px; max-width: 54ch; }
.ba-members { margin-top: 18px; }
.ba-member { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.ba-member-role { font-size: 12px; color: var(--ink-3); }
.ba-member form { margin-left: auto; }
.ba-plan { margin-top: 16px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ba-plan-now { font-family: 'DM Serif Display', Georgia, serif; font-size: 19px; }

/* ── the signup-intent nudge ──────────────────────────────────────────── */
.ba-nudge { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--card); border: 1px solid #ddd6fb; border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 18px 22px; }
.ba-nudge > div:first-child { flex: 1; min-width: 240px; }
.ba-nudge-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 18px; }
.ba-nudge-note { margin-top: 5px; color: var(--ink-2); font-size: 14px; max-width: 58ch; }
.ba:has(> .ba-nudge) {
  padding: 20px 24px 0;
  background: transparent;
  /* .main-content is a flex COLUMN (dashboard_v2.css), so this banner is a flex
     item. Without this it shrinks to its padding while the page body below
     takes all the space — it rendered as a 20px sliver. Size to content. */
  flex: 0 0 auto;
  min-height: 0;
}

/* ── agent catalogue: a browse page, like templates ───────────────────── */
.ba-cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ba-cat-head h1 { font-size: 32px; }
.ba-cat-count { font-size: 13px; color: var(--ink-3); }

.ba-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 22px 0 20px; }
.ba-search { position: relative; flex: 1; min-width: 240px; max-width: 420px; }
.ba-search input { width: 100%; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule); border-radius: 999px;
  padding: 10px 16px 10px 40px; }
.ba-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ba-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); margin-right: 0 !important; }
.ba-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.ba-pill { font: inherit; font-size: 13px; cursor: pointer; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--rule-strong); background: var(--card); color: var(--ink-2); }
.ba-pill[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.ba-cards { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .ba-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .ba-cards { grid-template-columns: 1fr; } }

.ba-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .2s; }
a.ba-card:hover { transform: translateY(-3px); border-color: var(--rule-strong);
  box-shadow: 0 10px 28px rgba(31,41,93,.08); }
.ba-card--soon { background: transparent; border-style: dashed; }

/* The emblem is the agent's own mark — the one place a vertical's colour shows. */
.ba-emblem { height: 116px; display: grid; place-items: center; position: relative; }
/* dashboard_v2.css carries a global `svg { width:16px !important }` for its
   sidebar icons, which beats even an inline style. Matching !important is the
   only way to size an illustration inside this layout. */
.ba .ba-emblem svg { width: 46px !important; height: 46px !important;
  margin-right: 0 !important; display: block; }
.ba-card--soon .ba-emblem { filter: grayscale(1); opacity: .5; }
.ba-badge { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--ink-2); }
.ba-badge--live { background: var(--accent); color: #fff; }

.ba-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.ba-card-body h2 { font-size: 20px; }
.ba-card-knows { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--ink-2); }
.ba-card-knows li { padding: 3px 0 3px 15px; position: relative; }
.ba-card-knows li::before { content: ""; position: absolute; left: 0; top: 12px;
  width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; }
.ba-card-go { margin-top: auto; padding-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.ba-card-soon { margin-top: auto; padding-top: 14px; font-size: 13px; color: var(--ink-3); }
.ba-noresults { margin-top: 28px; padding: 34px; border: 1px dashed var(--rule-strong);
  border-radius: var(--radius); text-align: center; color: var(--ink-2); }

.ba .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- The reel ---------------------------------------------------------- */
/* A storyboard IS a sequence, so it is numbered — the one place in this
   surface where numbered markers carry information rather than decorate. */
.ba-reel { margin-top: 44px; padding-top: 4px; }
.ba-reel-rule { height: 2px; width: 54px; background: var(--accent); margin-bottom: 18px; }
.ba-reel-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ba-reel-head h2 { font-size: clamp(26px, 4vw, 34px); }
.ba-reel-status { font-size: 13px; color: var(--accent); }
.ba-reel-lede { margin: 12px 0 0; max-width: 52ch; color: var(--ink-2); font-size: 15px; }
.ba-reel-failure { margin: 16px 0 0; color: var(--ink-2); font-size: 14px; max-width: 52ch; }
.ba-reel-failure.hidden { display: none; }

.ba-reel-beats { list-style: none; margin: 22px 0 0; padding: 0; max-width: 620px; }
.ba-reel-beat { display: flex; align-items: baseline; gap: 14px; padding: 11px 0;
  border-top: 1px solid var(--rule); }
.ba-reel-beat:last-child { border-bottom: 1px solid var(--rule); }
.ba-reel-num { flex: 0 0 auto; width: 22px; font-variant-numeric: tabular-nums;
  font-family: 'DM Serif Display', Georgia, serif; font-size: 17px; color: var(--accent); }
.ba-reel-beat-text { flex: 1 1 auto; font-size: 15px; }
.ba-reel-beat-state { flex: 0 0 auto; font-size: 12.5px; color: var(--ink-3); }
.ba-reel-beat-state--ready { color: var(--ink-2); }
.ba-reel-beat-state--failed { color: #b4483f; }

.ba-reel-film { margin-top: 24px; max-width: 260px; background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.ba-reel-film video { display: block; width: 100%; height: auto; background: #000; }
.ba-reel-film-foot { padding: 12px 14px; display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; }
.ba-reel-film-name { font-size: 13px; color: var(--ink-3); }
.ba-reel-cta { margin-top: 24px; }

/* ---- The conversation --------------------------------------------------- */
.ba-chat { margin-top: 44px; }
.ba-chat-rule { height: 2px; width: 54px; background: var(--accent); margin-bottom: 18px; }
.ba-chat h2 { font-size: clamp(26px, 4vw, 34px); }
.ba-chat-thread { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.ba-chat-empty { color: var(--ink-2); font-size: 15px; max-width: 52ch; margin: 0; }
.ba-msg { max-width: 58ch; padding: 11px 15px; border-radius: 14px; font-size: 15px; line-height: 1.55; }
.ba-msg--user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.ba-msg--assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--rule);
  border-bottom-left-radius: 4px; }
.ba-msg--thinking { color: var(--ink-3); font-style: italic; margin-top: 10px; }
.ba-msg--thinking.hidden { display: none; }
.ba-chat-form { display: flex; gap: 10px; margin-top: 18px; align-items: center; }
.ba-chat-form .ba-input { flex: 1 1 auto; }

/* ---- The one thing we ask for ------------------------------------------- */
.ba-post-verdict { padding: 0 13px 12px; }
.ba-verdict-btn { font: inherit; font-size: 12.5px; color: var(--ink-3); background: none;
  border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ba-verdict-btn:hover { color: var(--ink-2); }
.ba-verdict-btn.hidden, .ba-verdict-form.hidden, .ba-verdict-said.hidden { display: none; }
.ba-verdict-form { display: flex; gap: 8px; align-items: center; }
.ba-verdict-input { font-size: 13px; padding: 7px 10px; flex: 1 1 auto; min-width: 0; }
.ba-verdict-said { margin: 0; font-size: 12.5px; color: var(--ink-2); }

/* Logo upload on a partial kit — the page read, but had no logo on it. */
.ba-upload { display: inline-block; position: relative; cursor: pointer; }
.ba-upload-input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }

/* ---- Recreate a reel ---------------------------------------------------- */
.ba-recreate { margin-top: 44px; }
.ba-recreate-rule { height: 2px; width: 54px; background: var(--accent); margin-bottom: 18px; }
.ba-recreate h2 { font-size: clamp(26px, 4vw, 34px); }
.ba-recreate-lede { margin: 12px 0 0; max-width: 52ch; color: var(--ink-2); font-size: 15px; }
.ba-recreate-form { display: flex; gap: 10px; margin-top: 18px; align-items: center; flex-wrap: wrap; }
.ba-recreate-form .ba-input { flex: 1 1 260px; min-width: 0; }

/* A piece whose name the agent is still working out. */
.ba-item--unnamed .ba-item-name { color: var(--ink-3); font-style: italic; }

/* The caption. A shop copies these words into Instagram, so the box is a real
   textarea they can correct in place — and correcting it teaches the agent. */
.ba-post-caption { padding: 0 13px 10px; }
.ba-caption-text { width: 100%; font: inherit; font-size: 13px; line-height: 1.55;
  color: var(--ink); background: var(--card); border: 1px solid var(--rule);
  border-radius: 8px; padding: 9px 10px; resize: vertical; white-space: pre-wrap; }
.ba-caption-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ba-caption-acts { display: flex; align-items: center; gap: 12px; margin-top: 7px; }
.ba-caption-acts .hidden { display: none; }
.ba-caption-said { font-size: 12px; color: var(--ink-3); }

/* What the shop sells, at the top of the page — the subject, not the calendar. */
.ba-stock-strip { display: flex; align-items: center; gap: 8px; margin: 18px 0 4px; flex-wrap: wrap; }
.ba-stock-chip { width: 46px; height: 46px; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--rule); background: #efeae3; display: block; }
.ba-stock-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-stock-all { font-size: 13px; color: var(--ink-3); text-decoration: none; margin-left: 2px; }
.ba-stock-all:hover { color: var(--accent); }
.ba-make { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.ba-make form { margin: 0; }
/* The calendar, demoted to one line the shop can reach for. */
.ba-occasion-chip { font: inherit; font-size: 13.5px; color: var(--ink-2); background: none;
  border: 1px solid var(--rule); border-radius: 999px; padding: 8px 15px; cursor: pointer; }
.ba-occasion-chip:hover { border-color: var(--accent); color: var(--accent); }

/* The queue: work the agent did on a standing instruction, waiting on the shop. */
.ba-queue { background: var(--card); border: 1px solid #D9D4FB; border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 15px 17px; }
.ba-queue-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ba-queue-head strong { font-size: 15px; flex-grow: 1; }
.ba-queue-head form { margin: 0; }
.ba-queue-why { font-size: 13px; color: var(--ink-2); margin-top: 7px; line-height: 1.5; }

/* One standing instruction, read as a sentence. */
.ba-autos { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.ba-auto { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 17px; }
.ba-auto--off { opacity: 0.62; }
.ba-auto-line { font-size: 16px; line-height: 1.5; }
.ba-auto-ctl { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ba-auto-ctl form { margin: 0; }
.ba-rung { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px;
  color: var(--ink-2); background: none; border: 1px solid var(--rule); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; }
.ba-rung:hover { border-color: var(--accent); color: var(--accent); }
.ba-rung-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #C9C9DA; flex-shrink: 0; }
.ba-rung--on { color: var(--accent); border-color: var(--accent); }
.ba-rung--on .ba-rung-dot { border: 4px solid var(--accent); }
.ba-rung--blocked { opacity: 0.5; cursor: not-allowed; }
.ba-rung--blocked:hover { border-color: var(--rule); color: var(--ink-2); }
.ba-auto-foot { display: flex; align-items: center; gap: 12px; margin-top: 13px;
  padding-top: 13px; border-top: 1px solid #F0F0F6; }
.ba-auto-foot .ba-hint { flex-grow: 1; margin: 0; }
.ba-auto-foot form { margin: 0; }
.ba-post--waiting { border-color: #D9D4FB; }
.ba-post-flag { font-size: 11.5px; font-weight: 500; color: var(--accent); background: #EEEBFE;
  padding: 6px 13px; }

/* The business rail INSIDE the editor. Scoped to its own class so none of it
   can reach the wedding editor's own sidebar. */
.editor-sidebar-right--brand { padding: 0; overflow-y: auto; }
.brand-rail { font-size: 14px; color: #1f2937; }
.brand-rail-head { padding: 16px 16px 14px; border-bottom: 1px solid #e8e8ef; }
.brand-rail-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: #6b7280; text-decoration: none; margin-bottom: 10px; }
.brand-rail-back:hover { color: #5C4DF0; }
.brand-rail-name { font-size: 17px; font-weight: 600; }
.brand-rail-meta { font-size: 12.5px; color: #8a8aa3; margin-top: 2px; }
.brand-rail-section { padding: 15px 16px; border-bottom: 1px solid #f0f0f6; }
.brand-rail-title { font-size: 11px; font-weight: 600; color: #8a8aa3; letter-spacing: .05em;
  text-transform: uppercase; margin-bottom: 10px; }
.brand-rail-stock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.brand-rail-piece { padding: 0; border: 1px solid #e8e8ef; border-radius: 8px; overflow: hidden;
  background: #f4f4f9; cursor: pointer; aspect-ratio: 1; }
.brand-rail-piece:hover { border-color: #5C4DF0; }
.brand-rail-piece img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-rail-piece-ph { display: block; width: 100%; height: 100%; }
.brand-rail-hint { font-size: 12px; color: #8a8aa3; line-height: 1.5; margin: 9px 0 0; }
.brand-rail-caption-text { width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px;
  line-height: 1.5; color: #1f2937; background: #fbfbfe; border: 1px solid #e8e8ef;
  border-radius: 8px; padding: 9px 10px; resize: vertical; }
.brand-rail-caption-acts { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.brand-rail-caption-acts button { font: inherit; font-size: 12.5px; color: #5C4DF0;
  background: none; border: none; padding: 0; cursor: pointer; }
.brand-rail-caption-acts .hidden { display: none; }
.brand-rail-said { display: block; font-size: 11.5px; color: #8a8aa3; margin-top: 7px; }
.brand-rail-keep { font: inherit; font-size: 13.5px; font-weight: 500; color: #fff;
  background: #5C4DF0; border: none; border-radius: 8px; padding: 10px 18px; cursor: pointer; }
.brand-rail-verdict form { margin: 0; }
.brand-rail-kept { font-size: 13px; color: #1F8A5B; }

/* A reel in the work feed. One row, because its real surface is the editor. */
.ba-reels { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.ba-reel-row { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 13px 15px; }
.ba-reel-row:hover { border-color: var(--accent); }
.ba-reel-kind { font-size: 11.5px; font-weight: 500; color: var(--accent); background: #EEEBFE;
  border-radius: 5px; padding: 4px 9px; }
.ba-reel-name { font-size: 14px; font-weight: 500; flex-grow: 1; }
.ba-reel-when { font-size: 12.5px; color: var(--ink-3); }
.ba-reel-go { font-size: 13px; color: var(--accent); }

/* ── The workspace shell ──────────────────────────────────────────────────
   The editor's own shape — one bar across the top, the agent always in the
   left rail, the work in the middle — so moving between the workspace and a
   document is not a change of application. Deliberately NOT the editor's own
   stylesheet: the editor is the money surface and must not be able to break
   from here. */
/* Sits INSIDE the app's main content column, beside the product's own sidebar —
   not instead of it. Dropping that sidebar made the whole surface feel like a
   different application with no way back. */
.ws { display: flex; flex-direction: column; min-height: calc(100vh - 2px);
  background: #eef0f7; font-family: 'Inter', system-ui, sans-serif; }

.ws-bar { display: flex; align-items: center; gap: 12px; height: 54px; flex-shrink: 0;
  padding: 0 18px; background: linear-gradient(90deg, #1b2a6b, #4b2f8f);
  color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.ws-bar-name { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.95); }
.ws-bar-tabs { display: flex; gap: 4px; margin-left: 14px; }
.ws-bar-tabs a { font-size: 13.5px; color: rgba(255,255,255,.72); text-decoration: none;
  padding: 7px 13px; border-radius: 8px; }
.ws-bar-tabs a:hover { color: #fff; background: rgba(255,255,255,.1); }
.ws-bar-tabs a.is-on { color: #fff; background: rgba(255,255,255,.18); font-weight: 500; }
.ws-bar-gap { flex-grow: 1; }
.ws-bar-btn { font-size: 13px; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.34);
  border-radius: 8px; padding: 8px 14px; }
.ws-bar-btn:hover { background: rgba(255,255,255,.14); }

.ws-body-row { display: flex; flex-grow: 1; min-height: 0; align-items: stretch; }
.ws-agent { width: 320px; flex-shrink: 0; background: #fff; border-right: 1px solid #dfe3ee;
  display: flex; flex-direction: column; min-height: 0;
  position: sticky; top: 0; max-height: calc(100vh - 54px); overflow: hidden; }
.ws-agent .ba-chat { border: none; border-radius: 0; margin: 0; height: 100%;
  display: flex; flex-direction: column; min-height: 0; }
.ws-agent .ba-chat-log { flex-grow: 1; overflow-y: auto; }

.ws-main { flex-grow: 1; min-width: 0; overflow-y: auto; }
.ws-main .ba { background: transparent; }
.ba-wrap--ws { max-width: 980px; padding: 26px 30px 60px; }
.ws-flash { margin: 18px 30px -6px; padding: 11px 15px; border-radius: 10px; font-size: 13.5px;
  background: #e8f5ee; color: #14573a; border: 1px solid #c7e6d6; }
.ws-flash--bad { background: #fdecea; color: #7f2318; border-color: #f5c6c0; }

/* The phone: the agent goes under the work rather than beside it. A shopkeeper
   is on a phone, behind a counter. */
@media (max-width: 860px) {
  .ws { height: auto; overflow: visible; }
  .ws-body-row { flex-direction: column-reverse; }
  .ws-agent { width: auto; border-right: none; border-top: 1px solid #dfe3ee; }
  .ws-bar-tabs { margin-left: 0; }
  .ws-bar { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 8px; }
  .ba-wrap--ws { padding: 18px 16px 40px; }
}

/* The agent rail borrows the editor's own panel (ai_agent.css). Only the
   things that differ in a workspace column live here: it fills the rail, its
   thread scrolls, and the message bubbles are the workspace's own because the
   thread is plain persisted text rather than the editor's rich replies. */
.ws-agent .ai-agent-panel { height: 100%; border-radius: 0; }
.ws-agent .agent-panel-header { cursor: default; padding: 14px 16px; }
.ws-agent .agent-panel-body { flex-grow: 1; display: flex; flex-direction: column; min-height: 0; }
.ws-agent .agent-messages { flex-grow: 1; overflow-y: auto; padding: 15px 16px;
  display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.ws-agent .agent-message { margin: 0; }
.ws-agent .ba-msg { font-size: 13px; line-height: 1.5; padding: 9px 12px; border-radius: 12px; max-width: 100%; }
.ws-agent .ba-msg--user { align-self: flex-end; background: #eeebfe; border-bottom-right-radius: 3px; }
.ws-agent .ba-msg--assistant { align-self: flex-start; background: #f3f4f9; border-bottom-left-radius: 3px; }
.ws-agent .ba-msg--thinking { margin: 0 16px 6px; color: var(--ink-3); }
.ws-agent .agent-input-area { flex-shrink: 0; }

/* ── The shop panel, on the editor's own rail ─────────────────────────────
   Styled here rather than in the editor's stylesheet: the editor is the money
   surface and must not be able to break from this side. */
.rail-flyout-shop { width: 360px; max-height: 76vh; display: flex; flex-direction: column;
  background: #fff; overflow: hidden; }
.shop-flyout-head { display: flex; align-items: center; gap: 10px; padding: 13px 15px;
  border-bottom: 1px solid #e8eaf2; flex-shrink: 0; }
.shop-flyout-name { font-size: 14px; font-weight: 600; color: #1f295d; flex-grow: 1; }
.shop-flyout-out { font-size: 12px; color: #5C4DF0; text-decoration: none; }
.shop-flyout-tabs { display: flex; gap: 3px; padding: 10px 12px; border-bottom: 1px solid #f0f0f6; flex-shrink: 0; }
.shop-tab { font: inherit; font-size: 12.5px; color: #687394; background: none; border: none;
  border-radius: 7px; padding: 7px 12px; cursor: pointer; }
.shop-tab:hover { background: #f4f4f9; }
.shop-tab.is-on { background: #eeebfe; color: #4335c8; font-weight: 500; }
.shop-pane { padding: 14px 15px 18px; overflow-y: auto; }
.shop-queue { font-size: 12.5px; font-weight: 500; color: #4335c8; background: #eeebfe;
  border-radius: 8px; padding: 9px 11px; margin-bottom: 12px; }
.shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.shop-work, .shop-piece { position: relative; display: block; aspect-ratio: 1; padding: 0;
  border: 1px solid #e8eaf2; border-radius: 8px; overflow: hidden; background: #f4f4f9; cursor: pointer; }
.shop-work img, .shop-piece img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-work:hover, .shop-piece:hover { border-color: #5C4DF0; }
.shop-work.is-current { border-color: #5C4DF0; box-shadow: 0 0 0 2px rgba(92,77,240,.22); }
.shop-work-flag { position: absolute; top: 3px; left: 3px; font-size: 9.5px; font-weight: 600;
  color: #fff; background: #5C4DF0; border-radius: 4px; padding: 2px 5px; }
.shop-empty, .shop-hint { font-size: 12.5px; color: #687394; line-height: 1.55; margin: 10px 0 0; }
.shop-auto { border: 1px solid #e8eaf2; border-radius: 9px; padding: 11px 12px; margin-bottom: 9px; }
.shop-auto.is-off { opacity: .6; }
.shop-auto-line { font-size: 13px; line-height: 1.45; color: #1f295d; }
.shop-auto-when { font-size: 11.5px; color: #94a3b8; margin-top: 6px; }
.shop-add { display: block; text-align: center; font-size: 12.5px; color: #5C4DF0;
  border: 1px dashed #cfcfe4; border-radius: 9px; padding: 11px; margin-bottom: 12px; cursor: pointer; }
.shop-add:hover { border-color: #5C4DF0; background: #faf9ff; }

/* ── The agent itself ──────────────────────────────────────────────────────
   Sits above the list of things it does, because it is the thing that does
   them. Before this the roster sold "your agent" and the shop could not name
   it, stop it, or tell it anything. */
.ba-agent {
  background: #fff;
  border: 1px solid #e6e2ea;
  border-radius: 16px;
  margin-top: 22px;
  padding: 18px 20px 16px;
}
/* Paused has to be obvious at a glance — a shop that thinks it is off when it
   is on comes back to a week of posts it did not want. */
.ba-agent--paused {
  background: #fffaf3;
  border-color: #e7cfa6;
}
.ba-agent-head { align-items: flex-start; display: flex; gap: 14px; justify-content: space-between; }
.ba-agent-id { display: grid; gap: 3px; min-width: 0; }
/* An editable field that reads as a heading until you click it. */
.ba-agent-name {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #191520;
  font-size: 21px;
  font-weight: 760;
  letter-spacing: -.02em;
  margin: -4px -8px;
  max-width: 100%;
  padding: 4px 8px;
}
.ba-agent-name:hover { border-color: #e6e2ea; }
.ba-agent-name:focus { background: #fff; border-color: #6e2e89; outline: none; }
.ba-agent-state { color: #7c7586; font-size: 12px; }
.ba-agent--paused .ba-agent-state { color: #9a6b12; font-weight: 640; }
.ba-agent-label {
  color: #4a4453;
  display: block;
  font-size: 12px;
  font-weight: 680;
  margin: 16px 0 6px;
}
.ba-agent-rules {
  border: 1px solid #e6e2ea;
  border-radius: 11px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  resize: vertical;
  width: 100%;
}
.ba-agent-rules:focus { border-color: #6e2e89; outline: none; }
.ba-agent-foot { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-top: 10px; }
.ba-agent-toggle {
  background: #fff;
  border: 1px solid #e6e2ea;
  border-radius: 999px;
  color: #6b4b12;
  cursor: pointer;
  font-size: 12px;
  font-weight: 680;
  margin-top: 14px;
  padding: 7px 14px;
}
.ba-agent-toggle:hover { border-color: #c9a227; }
.ba-agent-toggle--on { background: #6e2e89; border-color: #6e2e89; color: #fff; }
.ba-agent-toggle--on:hover { background: #5c2673; border-color: #5c2673; }

@media (max-width: 640px) {
  .ba-agent-head { flex-direction: column; gap: 8px; }
  .ba-agent-foot { align-items: stretch; flex-direction: column; }
}

/* ── Taste at onboarding ───────────────────────────────────────────────────
   Nine looks, pick three. Swatches rather than photographs: there is no
   generated sample to show, and a stock photo would promise a picture we did
   not make. */
.ba-taste { margin-top: 20px; }
.ba-looks {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.ba-look {
  align-items: center;
  border: 1px solid var(--rule, #e6e2ea);
  border-radius: 13px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 9px 11px;
  transition: border-color .12s, opacity .12s;
}
.ba-look:hover { border-color: #c9a227; }
.ba-look input { accent-color: #6e2e89; flex: none; margin: 0; }
.ba-look.is-on { border-color: #6e2e89; box-shadow: inset 0 0 0 1px #6e2e89; }
/* Muted, never hidden: the shop can still see what it did not pick. */
.ba-look.is-muted { opacity: .45; }
.ba-look-swatch {
  border-radius: 8px;
  flex: none;
  height: 34px;
  width: 34px;
}
.ba-look-text { display: grid; gap: 1px; min-width: 0; }
.ba-look-text strong { font-size: 12.5px; font-weight: 700; }
.ba-look-text em { color: #7c7586; font-size: 10.5px; font-style: normal; line-height: 1.3; }

/* Paused: the standing instructions are kept exactly as they are, and none of
   them will run. Dimmed rather than hidden — the shop should still be able to
   read and change what will happen when it comes back on. */
.ba-autos--paused { opacity: .55; }