/* BetterChat — small additions on top of the verbatim design CSS.
   These only cover server-rendered specifics (forms reset inside chips/menus,
   the login screen, and making nav/market anchors look like the JSX buttons). */

/* ============================== TYPEFACE ==============================
   Loaded after tokens.css, so these win. Inter for Latin + numbers,
   Noto Sans Arabic for Arabic, JetBrains Mono for IDs / times / counts. */
:root {
  --font-sans: 'Inter', 'Noto Sans Arabic', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ============================== BRAND LOGO ==============================
   The owner's actual wordmark (black-on-transparent PNG with a knockout
   checkmark). On the dark theme we invert it to read white; the checkmark is a
   transparent hole that shows the page bg, so it adapts to either theme. */
.bc-brand-img { height: 26px; width: auto; display: block; }
.bc-brand-img--lg { height: 34px; }
[data-theme="dark"] .bc-brand-img { filter: invert(1); }

/* anchors used as rail buttons / rows must not show link styling */
.bc-app a { text-decoration: none; color: inherit; }
.bc-market-btn, .bc-nav-item { text-decoration: none; }

/* Legibility: align digits in every mono context (long numeric UIDs, times, counts,
   handles). JetBrains Mono is already monospace; tabular-nums keeps columns steady. */
.mono, .bc-field-value.mono, .bc-cell-id, .bc-pane-handle,
.bc-row-handle, .bc-row-time, .bc-msg-time, .bc-profile-handle { font-variant-numeric: tabular-nums; }

/* forms wrapping action buttons should not add layout */
.bc-inline-form { display: contents; }

/* stage trigger + dropdown rendered as a details/summary fall back to button look */
.bc-stage-menu { position: relative; }
.bc-stage-menu > summary { list-style: none; }
.bc-stage-menu > summary::-webkit-details-marker { display: none; }
.bc-pop button.bc-menu-item { font: inherit; }

/* the row is an anchor; keep the active rail bar overlay working */
a.bc-row { color: inherit; }

/* clickable TikTok channel chip -> opens the creator's TikTok profile (new tab) */
a.bc-channel { text-decoration: none; cursor: pointer; }
a.bc-channel:hover { border-color: var(--border-strong); color: var(--text); }

/* composer + drawer forms reset */
.bc-composer form, .bc-drawer form { margin: 0; }
.bc-field form, .bc-notes form { margin: 0; width: 100%; }
.bc-drawer-stage form, .bc-stage-steps form { display: contents; }

/* favorite toggle as a form button keeps iconbtn look */
button.bc-stage-step { width: 100%; }

/* ===================== INLINE-EDITABLE PROFILE FIELDS =====================
   Display name + TikTok handle in the contact drawer. The value reads as plain
   text; hovering hints a subtle border + reveals a pencil; clicking swaps in an
   input with a small save (check) button. View↔form swap is driven by app.js. */
.bc-field--editable { cursor: text; }
.bc-field--editable:hover { background: var(--surface-2); }
.bc-field-view {
  display: flex; align-items: center; gap: 8px; margin-top: 2px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 3px 7px; margin-left: -7px; margin-right: -7px; min-height: 26px;
  transition: border-color .12s, background .12s;
}
.bc-field--editable:hover .bc-field-view { border-color: var(--accent-line); background: var(--bg); }
.bc-field-view .bc-field-value { margin-top: 0; flex: 1; min-width: 0; }
.bc-field-edit { margin-left: auto; flex-shrink: 0; }
/* (re-uses app.css .bc-field-edit opacity 0 → 1 on .bc-field:hover) */

/* view ↔ form swap driven by .is-editing on the field */
.bc-field-form { display: none; align-items: center; gap: 6px; margin-top: 2px; }
.bc-field--editable.is-editing .bc-field-view { display: none; }
.bc-field--editable.is-editing .bc-field-form { display: flex; }
.bc-field--editable.is-editing { background: var(--surface-2); cursor: default; }
.bc-field-form .bc-field-input { margin-top: 0; flex: 1; min-width: 0; }
.bc-field-save {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--accent-line); background: var(--accent-weak); color: var(--accent-text);
  transition: filter .12s;
}
.bc-field-save:hover { filter: brightness(1.1); }
.bc-field-save svg { color: currentColor; }

/* ===================== DELIVERY STATUS (under outgoing bubbles) =====================
   Correlated from gw_outbound: ⏳ Sending / ✓ Delivered / ⚠ Failed. */
.bc-delivery { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 10px; }
.bc-delivery svg { display: block; }
.bc-delivery-lbl { letter-spacing: .01em; }
.bc-delivery--sent    { color: var(--success); }
.bc-delivery--pending { color: var(--text-3); }
.bc-delivery--failed  { color: var(--danger); }
.bc-delivery--held    { color: var(--held); }
.bc-delivery--canceled { color: var(--text-3); opacity: .7; text-decoration: line-through; }
/* keep meta compact: only failed/canceled always show their word; sent/pending lean on the glyph */
.bc-msg-meta .bc-delivery--sent .bc-delivery-lbl,
.bc-msg-meta .bc-delivery--pending .bc-delivery-lbl { display: none; }
.bc-msg:hover .bc-delivery-lbl { display: inline !important; }

/* ===================== RAIL SEND-QUEUE CHIP ===================== */
.bc-rail-queue {
  margin: 0 12px; padding: 8px 10px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.bc-queue-lead { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.bc-queue-lead svg { color: var(--text-3); }
.bc-queue-pill {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
}
.bc-queue-pill.is-pending { color: var(--stage2); background: color-mix(in srgb, var(--stage2) 16%, transparent); }
.bc-queue-pill.is-held    { color: var(--held); background: color-mix(in srgb, var(--held) 16%, transparent); }
.bc-queue-pill.is-elig    { color: var(--elig); background: color-mix(in srgb, var(--elig) 16%, transparent); }
.bc-queue-pill.is-failed  { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); }

/* ===================== WHATSAPP HANDOFF BADGE ===================== */
.bc-wa-badge {
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  font-size: 10.5px; font-weight: 600; padding: 2px 8px 2px 6px; border-radius: 999px;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border);
}
.bc-wa-badge svg { color: currentColor; }
.bc-wa-badge.is-active {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
}
.bc-wa-badge .bc-wa-check { display: inline-flex; }
.bc-wa-badge--sm { font-size: 10px; padding: 2px 7px 2px 5px; }

/* ===================== ACCOUNT TAGS (market / agency / qualif) =====================
   Clear, colour-coded separation used across Contacts, Inbox rows and the drawer.
   --tc carries the chip's hue (market accent or the qualification tag's own colour). */
.bc-tags { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.bc-tag {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 10.5px; font-weight: 600; padding: 2px 8px 2px 7px; border-radius: 999px;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border);
}
.bc-tag svg { color: currentColor; }
.bc-tag--sm { font-size: 10px; padding: 1px 7px 1px 6px; }
.bc-tag-flag { font-size: 11px; line-height: 1; }
.bc-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tc, var(--text-3)); flex-shrink: 0; }

/* market — outlined, tinted by --tc */
.bc-tag--market {
  color: color-mix(in srgb, var(--tc) 78%, var(--text));
  background: color-mix(in srgb, var(--tc) 12%, transparent);
  border-color: color-mix(in srgb, var(--tc) 30%, transparent);
}
/* agency member — stronger fill so members stand out at a glance */
.bc-tag--agency {
  color: color-mix(in srgb, var(--tc) 82%, var(--text));
  background: color-mix(in srgb, var(--tc) 17%, transparent);
  border-color: color-mix(in srgb, var(--tc) 38%, transparent);
}
/* prospect — muted */
.bc-tag--prospect { color: var(--text-3); background: var(--surface-2); border-color: var(--border); }
/* no market tag — dashed faint */
.bc-tag--unassigned { color: var(--text-faint); background: transparent; border: 1px dashed var(--border-2); }
/* qualification sub-tags — dot in the tag's own colour */
.bc-tag--qualif { color: var(--text-2); background: var(--surface-2); border-color: var(--border); }
/* targeted — tt-outreach LIVE scout pick; gold + filled so quality creators pop */
.bc-tag--targeted {
  --tc: #e6a817;
  color: color-mix(in srgb, var(--tc) 88%, var(--text));
  background: color-mix(in srgb, var(--tc) 18%, transparent);
  border-color: color-mix(in srgb, var(--tc) 42%, transparent);
}
/* watch — hand-picked, must never be missed. Magenta: the one hue no market accent
   and no other chip uses, so a watched row is unmistakable next to a gold Targeted. */
.bc-tag--watch {
  --tc: #e069c8;
  color: color-mix(in srgb, var(--tc) 88%, var(--text));
  background: color-mix(in srgb, var(--tc) 20%, transparent);
  border-color: color-mix(in srgb, var(--tc) 46%, transparent);
}
/* A watched row is pinned to the top of the list; the wash is what says why. Tint
   rather than a 4th left bar — ::before (active) and ::after (needs reply) are taken. */
.bc-row.is-watch { background: color-mix(in srgb, #e069c8 8%, transparent); }
.bc-row.is-watch:hover,
.bc-row.is-watch.is-active { background: color-mix(in srgb, #e069c8 14%, var(--surface)); }

/* Targeted quick-filter: a distinct, always-visible gold button, pulled out of the
   crowded seg strip (where "Targeted" was clipping to "T") so the quality-creator
   filter is obvious and never truncates. Toggles the ?filter=targeted view. The row
   wraps so on a narrow list column the button drops to its own line, still fully shown. */
.bc-filters { flex-wrap: wrap; row-gap: 6px; }
.bc-filters .bc-seg { flex: 0 1 auto; }
.bc-targeted-btn, .bc-watch-btn {
  --tg: #e6a817;
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 5px 10px; border-radius: var(--r-md); text-decoration: none; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit; line-height: 1;
  color: color-mix(in srgb, var(--tg) 90%, var(--text));
  background: color-mix(in srgb, var(--tg) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--tg) 40%, transparent);
  transition: background .13s, border-color .13s, box-shadow .13s;
}
.bc-watch-btn { --tg: #e069c8; }
.bc-targeted-btn:hover, .bc-watch-btn:hover {
  background: color-mix(in srgb, var(--tg) 24%, transparent);
  border-color: color-mix(in srgb, var(--tg) 58%, transparent);
}
.bc-targeted-btn.is-active, .bc-watch-btn.is-active {
  background: color-mix(in srgb, var(--tg) 32%, transparent);
  border-color: color-mix(in srgb, var(--tg) 72%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tg) 45%, transparent);
}
.bc-targeted-btn svg, .bc-watch-btn svg { color: var(--tg); flex: none; }
.bc-targeted-btn-count { font-family: var(--font-mono); font-size: 10.5px; opacity: .9; }

/* Watch list page. Fixed columns rather than flex so every row lines up exactly:
   the status and market columns hold their width even on rows that have neither. */
.bc-watch-add {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px; align-items: stretch; max-width: 760px; margin: 0 0 18px;
}
.bc-watch-input {
  min-width: 0; padding: 9px 12px; font: inherit; font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
}
.bc-watch-input::placeholder { color: var(--text-3); }
.bc-watch-input:focus { outline: none; border-color: color-mix(in srgb, #e069c8 60%, transparent); }
.bc-watch-add .bc-watch-btn { padding: 0 16px; }

.bc-watch-rows { display: flex; flex-direction: column; gap: 6px; max-width: 760px; }
.bc-watch-row {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) 128px 118px 30px;
  align-items: center; gap: 12px;
  padding: 11px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.bc-watch-row > svg { color: #e069c8; }
.bc-watch-row.is-waiting { border-color: color-mix(in srgb, #e069c8 55%, transparent); }
.bc-watch-main { min-width: 0; }
.bc-watch-handle { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-watch-why { margin-top: 2px; font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-watch-flag {
  font-size: 11px; font-weight: 700; text-align: center; padding: 3px 8px; border-radius: 999px;
  color: #fff; background: #e069c8;
}
.bc-watch-nochat { grid-column: 3 / 5; font-size: 12px; color: var(--text-3); }
.bc-watch-open { grid-column: 4; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.bc-watch-when { font-size: 11.5px; color: var(--text-3); }
.bc-watch-row form { display: flex; }

@media (max-width: 720px) {
  .bc-watch-add { grid-template-columns: 1fr; }
  .bc-watch-row { grid-template-columns: 16px minmax(0, 1fr) 30px; row-gap: 8px; }
  .bc-watch-flag, .bc-watch-nochat, .bc-watch-open { grid-column: 2 / 4; justify-self: start; }
}

/* League sub-filter: a secondary, OUTLINED gold control sitting right after the solid
   Targeted button. It narrows the targeted set to chosen gift-gallery leagues (multi-
   select). Ghost by default so the primary Targeted toggle stays dominant; fills in
   softly once one or more leagues are picked. */
.bc-league-btn {
  --tg: #e6a817;
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 5px 8px 5px 10px; border-radius: var(--r-md); cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit; line-height: 1;
  color: color-mix(in srgb, var(--tg) 82%, var(--text));
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--tg) 32%, transparent);
  transition: background .13s, border-color .13s, box-shadow .13s;
}
.bc-league-btn:hover {
  background: color-mix(in srgb, var(--tg) 12%, transparent);
  border-color: color-mix(in srgb, var(--tg) 50%, transparent);
}
.bc-league-btn.is-active {
  background: color-mix(in srgb, var(--tg) 18%, transparent);
  border-color: color-mix(in srgb, var(--tg) 60%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tg) 38%, transparent);
}
.bc-league-btn svg { color: var(--tg); flex: none; }
.bc-league-btn-count { font-family: var(--font-mono); font-size: 10.5px; opacity: .9; }
/* caret flips when the menu is open (matches the stage pill affordance) */
.bc-leaguefilter-menu .bc-league-btn > svg:last-child { transition: transform .15s; }
.bc-leaguefilter-menu.is-open .bc-league-btn > svg:last-child { transform: rotate(180deg); }

/* league menu rows: CODE ......... count check */
.bc-league-menu { max-height: min(60vh, 360px); overflow-y: auto; }
.bc-league-menu .bc-league-code { font-family: var(--font-mono); font-weight: 600; letter-spacing: .02em; }
.bc-league-menu .bc-league-n { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.bc-league-menu .bc-menu-item.is-active .bc-league-n { color: var(--accent-text); }

/* ===================== CONTACTS FILTER BAR ===================== */
.bc-contacts-filters {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.bc-filter-group { display: inline-flex; align-items: center; gap: 6px; }
.bc-filter-group > .lbl {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}
.bc-chip-link {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; text-decoration: none;
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color .12s, color .12s, background .12s;
}
.bc-chip-link:hover { color: var(--text); border-color: var(--border-strong); }
.bc-chip-link.is-active { color: var(--m-accent); background: var(--accent-weak); border-color: var(--accent-line); }
.bc-chip-link .bc-chip-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }
.bc-chip-link.is-active .bc-chip-count { color: var(--m-accent); }

/* contacts table — tag cell wraps neatly */
.bc-table .bc-tags { row-gap: 4px; }
.bc-table tr.is-static { cursor: default; }
.bc-table tr.is-static:hover { background: transparent; }
.bc-cell-src { font-size: 10px; color: var(--text-faint); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* contacts creator sub-line: @handle · numeric TikTok ID (both shown when present) */
.bc-cell-sub { display: flex; align-items: center; gap: 5px; margin-top: 1px; min-width: 0; }
.bc-cell-handle { font-size: 11.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.bc-cell-uid { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.bc-cell-dot { color: var(--text-faint); font-size: 11px; }
.bc-cell-sub-empty { font-size: 11px; color: var(--text-faint); font-style: italic; }

/* contacts "Load more" footer */
.bc-loadmore { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 12px 26px; }
.bc-loadmore-count { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bc-loadmore-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none;
  font-size: 12.5px; font-weight: 600; padding: 7px 16px; border-radius: 999px;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color .12s, color .12s, background .12s;
}
.bc-loadmore-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface); }
.bc-loadmore-btn svg { color: var(--text-3); }

/* drawer account section */
.bc-account-tags { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 12px 4px; }

/* ============================== LOGIN ============================== */
.bc-login-wrap {
  min-height: 100vh; display: grid; place-items: center; background: var(--bg); padding: 24px;
}
.bc-login-card {
  width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 30px 28px 26px; box-shadow: var(--shadow-pop);
}
.bc-login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.bc-login-brand .bc-logo { width: 34px; height: 34px; }
.bc-login-brand .bc-wordmark { font-size: 19px; }
.bc-login-card h1 { margin: 0 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.bc-login-card p.sub { margin: 0 0 20px; font-size: 12.5px; color: var(--text-3); }
.bc-login-field { margin-bottom: 13px; }
.bc-login-field label {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 6px;
}
.bc-login-field input {
  width: 100%; background: var(--bg); border: 1px solid var(--border-2); color: var(--text);
  border-radius: var(--r-md); padding: 10px 12px; font-size: 13.5px; font-family: inherit;
  transition: border-color .14s, box-shadow .14s;
}
.bc-login-field input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-weak); }
.bc-login-btn {
  width: 100%; margin-top: 8px; height: 40px; border: 0; border-radius: var(--r-md); cursor: pointer;
  background: var(--accent); color: var(--accent-fg); font-family: inherit; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 2px 8px -2px var(--accent-weak); transition: filter .12s;
}
.bc-login-btn:hover { filter: brightness(1.08); }
.bc-login-row { display: flex; align-items: center; margin: 4px 0 14px; }
.bc-login-remember {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12.5px; color: var(--text-2); user-select: none;
}
.bc-login-remember input {
  width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex: none;
}
.cf-turnstile { margin: 0 0 16px; min-height: 65px; }
.bc-login-err {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 36%, transparent);
  color: var(--danger); border-radius: var(--r-md); padding: 9px 12px; font-size: 12.5px; margin-bottom: 16px;
}

/* ===================== EMPTY STATES ===================== */
.bc-row-preview.is-empty { color: var(--text-faint); font-style: italic; }
.bc-empty-thread { text-align: center; padding: 46px 20px 30px; color: var(--text-3); }
.bc-empty-thread .bc-empty-icon {
  margin: 0 auto 10px; width: 44px; height: 44px; border-radius: 12px;
  background: var(--surface-2); display: grid; place-items: center; color: var(--text-3);
}
.bc-empty-thread h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.bc-empty-thread p { margin: 0 auto; font-size: 12.5px; max-width: 320px; color: var(--text-3); }

/* ===================== RESPONSIVE =====================
   Breakpoints:
     > 1180px  full rail + list + pane (desktop)
     1024–1180 rail(210) + list(300) + pane (small laptop / iPad landscape)
     621–1023  icon rail + list + pane  (iPad portrait / small tablet — 2 columns)
     <= 620px  icon rail + ONE column   (phone — list OR thread, chat-app style) */

/* mobile back button in the pane header — hidden on desktop */
.bc-back { display: none; }

/* Laptop / tablet / phone: tighter columns, and the pane header keeps its whole
   action cluster on ONE horizontally-scrollable row instead of wrapping into a
   tall block (the stage trigger used to stack 3 lines under the creator name). */
@media (max-width: 1180px) {
  .bc-app { --rail-w: 210px; --list-w: 300px; }
  .bc-pane-head { flex-wrap: wrap; row-gap: 8px; align-items: center; }
  .bc-pane-actions {
    flex: 1 1 100%; margin-left: 0; min-width: 0; flex-wrap: nowrap;
    justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
  }
  .bc-pane-actions::-webkit-scrollbar { display: none; }
  .bc-pane-actions > * { flex-shrink: 0; }
  .bc-stage-trigger { white-space: nowrap; }
}

/* Tablet + phone: collapse the rail to icons, let wide tables scroll horizontally,
   and make the stages funnel two-up. Shared by both the 2-col and 1-col layouts. */
@media (max-width: 1023px) {
  .bc-rail { overflow: hidden; }
  .bc-brand, .bc-market-label, .bc-market-name, .bc-market-sub,
  .bc-market-unread, .bc-nav-label, .bc-nav-count, .bc-rail-queue, .bc-user-meta { display: none; }
  .bc-market { padding: 12px 6px 4px; }
  .bc-market-toggle { display: flex; flex-direction: column; gap: 6px; }
  .bc-market-btn { padding: 9px 0; display: grid; place-items: center; }
  .bc-market-top { justify-content: center; gap: 4px; }
  .bc-nav { padding: 4px 6px; }
  .bc-nav-item { justify-content: center; padding: 12px 0; }
  .bc-rail-foot { display: grid; place-items: center; }
  .bc-user { padding: 6px 0; }
  .bc-user > .bc-iconbtn { margin-left: 0 !important; }
  .bc-funnel { grid-template-columns: repeat(2, 1fr) !important; }
  .bc-view, .bc-contacts-scroll { overflow-x: auto; }
  /* let the creator sub-line (TikTok · @handle · active · ID) wrap on a narrow
     pane instead of clipping its right edge */
  .bc-pane-sub { flex-wrap: wrap; row-gap: 2px; }
}

/* iPad portrait / small tablet: icon rail + list + pane, all three visible — there
   is room for two content columns here, so we do NOT collapse to one. */
@media (min-width: 621px) and (max-width: 1023px) {
  .bc-app { grid-template-columns: 56px minmax(0, clamp(250px, 38vw, 320px)) minmax(0, 1fr) !important; }
  .bc-app.is-single { grid-template-columns: 56px minmax(0, 1fr) !important; }
}

/* Phone: ONE column at a time (list OR thread, like a chat app). body.has-chat is
   set only for an explicit ?c= selection, so the list stays the landing view and a
   tapped conversation opens full-screen with a back button. */
/* =====================================================================
   PHONE (<=620px) — full mobile redesign (Claude Design spec, ported onto
   the live markup). Desktop + iPad (>=621px) are intentionally untouched.
   ===================================================================== */
@media (max-width: 620px) {
  /* shell: 52px icon rail + ONE stacked content column (list OR chat) */
  .bc-app, .bc-app.is-single { grid-template-columns: 52px minmax(0, 1fr) !important; }
  .bc-list, .bc-pane { grid-column: 2; grid-row: 1; min-width: 0; }
  .bc-pane { display: none; }
  body.has-chat .bc-list { display: none; }
  body.has-chat .bc-pane { display: flex; }
  body.has-chat .bc-back { display: inline-flex; flex-shrink: 0; }
  .bc-market { padding: 10px 5px 4px; }
  .bc-rail-foot { padding: 10px 4px; }

  /* inbox row badges wrap instead of clipping off the right edge */
  .bc-row-foot { flex-wrap: wrap; row-gap: 6px; margin-top: 8px; }
  .bc-badge-unread { margin-left: auto; }

  /* ---- chat header: clean rows (back+market / avatar+name+@handle / stage+actions) ---- */
  .bc-pane-head { padding: 10px 12px; gap: 7px 10px; align-items: center; }
  .bc-pane-creator { flex: 1 1 100%; min-width: 0; gap: 11px; }
  .bc-pane-name { font-size: 16px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bc-pane-sub { gap: 0; margin-top: 1px; }
  .bc-pane-handle { font-size: 12.5px; }
  /* keep only @handle under the name; TikTok link, "active ago" + numeric ID live in the drawer */
  .bc-pane-sub > span:not(.bc-pane-handle),
  .bc-pane-sub > a.bc-channel { display: none; }
  /* actions: one horizontal-scroll strip with comfortable 36px touch targets */
  .bc-pane-actions .bc-stage-trigger { height: 36px; }
  .bc-pane-actions .bc-iconbtn { width: 36px; height: 36px; }
  /* a popover can't show inside an overflow-scroll strip -> render it as a bottom
     sheet so the Stage dropdown (and any pane menu) actually works on a phone */
  .bc-pane-actions .bc-pop {
    position: fixed !important; left: 10px !important; right: 10px !important;
    top: auto !important; bottom: 10px !important; min-width: 0 !important;
    animation: bc-sheet-in .18s ease;
  }

  /* ---- thread + composer ---- */
  .bc-thread { padding: 16px 0 12px; overflow-x: hidden; }
  .bc-thread-inner { padding: 0 14px; }
  .bc-bubble { max-width: 86%; font-size: 13.5px; }
  .bc-composer { padding: 10px 12px 12px; }
  .bc-composer-bar { gap: 6px; flex-wrap: nowrap; padding: 6px 6px 7px; }
  .bc-composer-bar .mono { display: none; }
  /* circular icon-only Send (the placeholder already says "on TikTok") */
  .bc-send { width: 40px; height: 40px; min-width: 40px; padding: 0; border-radius: 50%; gap: 0; flex-shrink: 0; }
  .bc-send-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* ---- contacts table -> labeled cards (every field shown as LABEL · value) ---- */
  .bc-contacts-head { flex-wrap: wrap; padding: 14px 14px 10px; row-gap: 10px; }
  .bc-contacts-head .bc-search { order: 5; max-width: none !important; flex: 1 1 100% !important; margin: 0 !important; }
  .bc-contacts-filters { padding: 10px 14px; gap: 10px 14px; }
  .bc-filter-group { flex-wrap: wrap; }
  .bc-contacts-scroll { overflow-x: hidden; padding-top: 8px; }
  .bc-table, .bc-table tbody, .bc-table tr, .bc-table td { display: block; }
  .bc-table thead { display: none; }
  .bc-table tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); margin: 0 14px 10px; padding: 12px 14px; }
  .bc-table td { padding: 6px 0; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .bc-table td::before { content: attr(data-label); flex-shrink: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
  .bc-table td:first-child { padding: 0 0 9px; margin-bottom: 7px; border-bottom: 1px solid var(--border); }
  .bc-table td:first-child::before { display: none; }

  /* contact drawer takes the whole screen */
  .bc-drawer { width: 100vw !important; max-width: 100vw !important; }
}
@keyframes bc-sheet-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* iPad portrait / small tablet (621-860): contacts table stacks into compact
   cards (kept as-is — phone uses the labeled-card design above). */
@media (min-width: 621px) and (max-width: 860px) {
  .bc-contacts-head { flex-wrap: wrap; row-gap: 8px; padding: 14px 14px 10px; }
  .bc-contacts-head .bc-search { margin-left: 0 !important; max-width: 100% !important; flex: 1 1 100%; order: 5; }
  .bc-contacts-filters { padding: 10px 14px; gap: 10px 14px; }
  .bc-filter-group { flex-wrap: wrap; }
  .bc-contacts-scroll { overflow-x: hidden; }
  .bc-table thead { display: none; }
  .bc-table, .bc-table tbody { display: block; }
  .bc-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 14px; }
  .bc-table td { display: inline-flex; align-items: center; padding: 0; border: none; }
  .bc-table td:first-child { flex: 1 1 100%; }
  .bc-table td:nth-child(4), .bc-table td:nth-child(5) { display: none; }
}

/* ===================== STAGE — READ-ONLY (managed in recruitment) ===================== */
.bc-stage-trigger.is-readonly { cursor: default; }
.bc-stage-trigger.is-readonly:hover { background: var(--surface-2); }
.bc-stage-steps.is-readonly .bc-stage-step { cursor: default; width: 100%; }
.bc-stage-steps.is-readonly .bc-stage-step:hover { border-color: var(--border); color: var(--text-3); }
.bc-stage-steps.is-readonly .bc-stage-step.is-active:hover {
  border-color: color-mix(in srgb, var(--ss) 42%, transparent);
  color: color-mix(in srgb, var(--ss) 72%, var(--text));
}
/* header TikTok id — the permanent identifier (name/@handle can change, this can't) */
.bc-pane-id { color: var(--text-faint); font-size: 11px; }

/* ===================== TRANSLATE-TO-ENGLISH (team reading aid) =====================
   Muted English sub-line shown under each bubble when translate mode is on — the
   creator's inbound messages AND our outbound replies. Toggle (EN) sets bc_tx cookie. */
.bc-tx {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
  margin-top: 4px;
  white-space: pre-wrap;
  border-inline-start: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding-inline-start: 8px;
  max-width: 78%;
}
.bc-tx[data-tx-pending]:empty::before { content: 'translating…'; font-style: italic; opacity: .55; }
/* Our outbound replies are right-aligned, so mirror the accent to the right edge. */
.bc-tx--out {
  border-inline-start: none;
  border-inline-end: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding-inline-start: 0;
  padding-inline-end: 8px;
  text-align: right;
  align-self: flex-end;
}

/* ===================== MARKET SEPARATION (always-visible) =====================
   The rail switcher scrolls out of mind once you're reading a thread, so each
   surface carries its own market signal in the active hue (--m-accent: gold MENA
   / pink TR). Goal: you can never mistake — or reply into — the wrong market.
   - inbox list + pane header each show a MENA/TR chip
   - the conversation column gets a market-coloured top accent strip
   - the Send button is tinted to the market (gold MENA / pink TR) */
.bc-list-title { display: inline-flex; align-items: center; gap: 8px; }
.bc-pane-market { display: inline-flex; align-items: center; flex-shrink: 0; }
.bc-pane-market .bc-tag { font-size: 11px; padding: 3px 10px 3px 8px; }
.bc-pane-head { border-top: 3px solid var(--m-accent); }
/* Send-to-TikTok button wears the active market's colour (dark text reads on both
   gold and pink), and the composer focus ring matches — a last visual check on
   which market this reply is about to go to. */
.bc-send { background: var(--m-accent); color: #1d1402; box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--m-accent) 45%, transparent); }
.bc-send svg { color: currentColor; }
.bc-composer-box:focus-within { border-color: var(--m-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-accent) 22%, transparent); }

/* settings view spacing */
.bc-settings-grid { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.bc-settings-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
}
.bc-settings-row .lbl { font-size: 13.5px; font-weight: 500; }
.bc-settings-row .desc { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.bc-settings-row .bc-seg { flex: 0 0 auto; min-width: 220px; margin-left: auto; }

/* Per-message manual delete (hover-revealed) */
.bc-msg-del { display: inline; margin: 0; }
.bc-msg-del-btn { opacity: 0; background: none; border: none; cursor: pointer; color: var(--text-3); padding: 0 2px; line-height: 1; transition: opacity .12s, color .12s; }
.bc-msg:hover .bc-msg-del-btn { opacity: .55; }
.bc-msg-del-btn:hover { opacity: 1; color: var(--danger); }

/* ===================== STAGE SWITCHER (themed popover, not a native <select>) =====================
   Reuses the app's data-pop popover (.bc-pop + .bc-menu-item + .bc-mi-check). Pane = the stage
   chip as a button with an animated caret; Stages board = a compact per-card trigger. */
button.bc-stage-trigger { font-family: inherit; }
.bc-stage-trigger.bc-stage-pill { position: relative; padding-right: 24px; }
.bc-stage-trigger.bc-stage-pill::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px;
  border-right: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .15s; pointer-events: none;
}
.bc-stage-menu.is-open .bc-stage-pill::after { transform: translateY(-25%) rotate(225deg); }
.bc-pop .bc-menu-stage .bc-stage-dot { width: 8px; height: 8px; }

/* Stages board: compact per-card trigger (dot + stage number + caret), hover-revealed. */
.bc-funnel-card:hover { background: var(--surface-2); }
.bc-funnel-move-btn {
  display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--text-2); background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 3px 7px; cursor: pointer;
  opacity: 0; transition: opacity .12s, border-color .12s, color .12s;
}
.bc-funnel-card:hover .bc-funnel-move-btn, .bc-stage-menu.is-open .bc-funnel-move-btn { opacity: 1; }
.bc-funnel-move-btn:hover { border-color: var(--border-strong); color: var(--text); }
.bc-fm-caret { width: 5px; height: 5px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: translateY(-1px) rotate(45deg); opacity: .7; }

/* ===================== QA FIXES 2026-06-16 ===================== */
/* Unread / WhatsApp badges sit on the gold/pink market accent — dark text reads on BOTH
   themes (white was invisible on gold in light mode), matching the Send button. */
.bc-nav-count.is-unread, .bc-badge-unread { color: #1d1402; }
/* Keyboard focus ring on controls that had none (inputs keep their own box-shadow ring). */
.bc-app a:focus-visible, .bc-app button:focus-visible, .bc-app summary:focus-visible,
.bc-app [tabindex]:focus-visible, .bc-login-card button:focus-visible {
  outline: 2px solid var(--accent-line); outline-offset: 2px; border-radius: var(--r-xs);
}
/* Touch devices have no :hover — keep hover-revealed controls reachable. */
@media (hover: none) {
  .bc-funnel-move-btn { opacity: 1; }
  .bc-msg-del-btn { opacity: .55; }
}
/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ===================== ROUND 13 2026-07-10: back-to-inbox everywhere ===================== */
/* Every secondary page (queue/labels/stages/settings/contacts) gets a back pill at ALL
   widths; on phones it is the main way back since the rail is a bare icon strip. */
.bc-pageback {
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content; margin: 0 0 14px; padding: 7px 13px 7px 9px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); color: var(--text-2);
  font-size: 12.5px; font-weight: 600; line-height: 1; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.bc-pageback svg { flex: none; }
.bc-pageback:hover { color: var(--text); border-color: var(--border-2); }
.bc-pageback:active { background: var(--surface-2); }
/* Contacts header is a tight flex row: icon-only, no bottom margin. */
.bc-contacts-head .bc-pageback { margin: 0; padding: 7px; }
.bc-contacts-head .bc-pageback .bc-pageback-label { display: none; }
/* Contact drawer: left back arrow only on phones, where the drawer is a full-screen
   takeover and the top-right X is a thumb stretch. Desktop keeps just the X. */
.bc-drawer-back { display: none; }
@media (max-width: 620px) {
  .bc-drawer-back { display: inline-flex; }
}

/* ===================== ROUND 14 2026-07-10: QA sweep fixes ===================== */
/* Phone: the pane-head action cluster wraps into tidy rows instead of the hidden
   horizontal scroll (nobody discovered the swipe — the Contact-details icon and
   "Pause AI" sat off-screen at 390px). Tablets/laptops keep the one-row scroll
   from the 1180px block, where width makes overflow rare. */
@media (max-width: 620px) {
  .bc-pane-actions { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
}

/* ===================== ROUND 15 2026-07-22: phone/tablet responsive pass ===================== */
/* Real mobile viewport: 100vh includes the collapsed iOS Safari toolbar, so the
   composer sat behind it until the user scrolled the URL bar away. dvh tracks the
   VISIBLE viewport; browsers without dvh keep the vh line. */
.bc-app { height: 100vh; height: 100dvh; }
.bc-login { min-height: 100vh; min-height: 100dvh; }

/* Tablet/laptop scroll strip: action labels stay on one line ("Pause AI" was
   wrapping into a two-line button at iPad-portrait pane widths). */
@media (max-width: 1180px) {
  .bc-pane-actions button, .bc-pane-actions .bc-iconbtn { white-space: nowrap; }
}

@media (max-width: 620px) {
  /* Stages funnel: two columns crushed creator names to one clipped letter at
     390px; one full-width column per stage reads properly. */
  .bc-funnel { grid-template-columns: 1fr !important; }
  /* Settings: the fixed 220px seg control overflowed the card's right edge;
     stack it full-width under the label instead. */
  .bc-settings-row { flex-wrap: wrap; }
  .bc-settings-row .bc-seg { flex: 1 1 100%; min-width: 0; margin-left: 0; }
  /* iOS zooms the whole page when a focused field's font-size is under 16px;
     keep the composer + search fields at 16px so typing never jolts the layout. */
  .bc-composer-box textarea, .bc-search input { font-size: 16px; }
  /* Home-indicator clearance in standalone/PWA contexts (evaluates to the plain
     padding wherever no inset exists). */
  .bc-composer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .bc-rail-foot { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}

/* ===================== ROUND 16 2026-07-22: operator seen tracking + notifications ===================== */
/* Unseen = the creator wrote since the operator last OPENED the chat (distinct
   from .unread, which tracks reply state and survives AI handling). Accent dot
   beside the time + bold name, mirroring every mainstream inbox. */
.bc-unseen-dot {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--m-accent, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-accent) 18%, transparent);
}
.bc-row.is-unseen .bc-row-name { font-weight: 700; }
.bc-row.is-unseen .bc-row-preview { color: var(--text); }

/* ===================== ROUND 27 2026-07-29: phone inbox filter chips ===================== */
/* Same class of bug ROUND 14 fixed on .bc-pane-actions: the seg strip is
   overflow:hidden with nowrap buttons, so at 390px "Wants human" was cut off the
   right edge with nothing to scroll. Wrap onto a second line instead. */
@media (max-width: 620px) {
  .bc-filters .bc-seg { flex: 1 1 100%; flex-wrap: wrap; overflow: visible; row-gap: 3px; }
  .bc-filters .bc-seg-btn { flex: 1 0 auto; padding: 7px 10px; }
}

/* ===================== ROUND 29 2026-08-13: stages board ===================== */
/* The funnel geometry used to live in inline style attributes on stages.php, which
   meant it was re-emitted on every one of up to 4000 cards. Same measurements, once. */
.bc-stages-view { padding: 26px 32px; overflow-y: auto; }
.bc-stages-title { margin: 0 0 4px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.bc-stages-sub { margin: 0 0 18px; color: var(--text-3); font-size: 13px; }

.bc-stages-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin: 0 0 18px; max-width: 1180px;
}
.bc-stages-search { margin: 0; flex: 1 1 260px; max-width: 340px; }
.bc-stages-sort { margin-left: auto; }
.bc-stages-none { margin: 18px 0 0; color: var(--text-3); font-size: 13px; }

.bc-funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1180px; }
.bc-funnel-col {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
}
.bc-funnel-head {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.bc-funnel-head .bc-stage-dot { width: 9px; height: 9px; }
.bc-funnel-name {
  font-size: 13.5px; font-weight: 600; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-funnel-count { margin-left: auto; font-size: 13px; color: var(--text-2); }
.bc-funnel-track { height: 4px; background: var(--surface-2); }
.bc-funnel-fill { height: 100%; transition: width .3s; }
.bc-funnel-list { padding: 8px; display: flex; flex-direction: column; gap: 2px; max-height: 380px; overflow-y: auto; }

/* Every card is exactly 46px: avatar 30 + link padding 12 + card padding 4. The two
   text lines are pinned to 16px + 14px = the avatar's 30px, so a creator with no
   handle sits at the identical height as one with a long handle. */
.bc-funnel-card {
  position: relative; height: 46px; flex: none;
  display: flex; align-items: center; gap: 6px;
  padding: 2px 3px; border-radius: var(--r-sm);
}
.bc-funnel-card.is-attention { box-shadow: inset 2px 0 0 var(--danger); }
.bc-funnel-card.is-watch { box-shadow: inset 2px 0 0 #e069c8; }
.bc-funnel-link {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 6px; border-radius: var(--r-sm); text-decoration: none; color: inherit;
}
.bc-funnel-id { min-width: 0; flex: 1; }
.bc-funnel-card .bc-stage-menu { position: relative; flex: none; }
.bc-funnel-nm {
  font-size: 12.5px; font-weight: 600; line-height: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-funnel-meta {
  font-size: 11px; line-height: 14px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-funnel-unread {
  flex: none; min-width: 17px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--m-accent, var(--accent)); color: #1d1402;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}
.bc-funnel-empty { padding: 14px 6px; text-align: center; color: var(--text-3); font-size: 11.5px; }
.bc-funnel-more {
  display: block; margin-top: 4px; padding: 7px 6px; border-radius: var(--r-sm);
  text-align: center; font-size: 11.5px; font-weight: 600;
  color: var(--text-2); background: var(--surface-2); text-decoration: none;
}
.bc-funnel-more:hover { color: var(--text); }
.bc-funnel-more.is-capped { background: transparent; color: var(--text-3); font-weight: 500; }

@media (max-width: 900px) {
  .bc-stages-view { padding: 20px 16px; }
  .bc-stages-search { max-width: none; }
  .bc-stages-sort { margin-left: 0; }
}

/* ============================ IMAGE ATTACHMENTS ==============================
   MENA + TR only: one picture per reply, picked from the canned screenshot set or
   uploaded. The chip above the text box is the "what is about to go out" proof. */
.bc-attach {
  display: flex; align-items: center; gap: 9px; margin: 10px 12px 0; padding: 6px 8px 6px 6px;
  border: 1px solid var(--border-2); border-radius: var(--r-md); background: var(--surface-2);
}
/* display:flex outranks the UA stylesheet's [hidden] rule, so without this the
   empty chip sits above the text box on every thread. */
.bc-attach[hidden] { display: none; }
.bc-attach img {
  width: 26px; height: 34px; flex: none; object-fit: cover; object-position: top;
  border-radius: 4px; background: var(--bg);
}
.bc-attach-label {
  flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bc-attach-x {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-3); cursor: pointer;
}
.bc-attach-x:hover { background: var(--surface); color: var(--text); }

.bc-media-pop { min-width: 236px; padding: 6px; }
.bc-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 2px 3px 6px; }
.bc-media-pick {
  padding: 0; border: 1px solid var(--border-2); border-radius: var(--r-sm);
  background: var(--bg); cursor: pointer; overflow: hidden; line-height: 0;
}
.bc-media-pick:hover { border-color: var(--accent-line); }
/* Every tile is the SAME box regardless of the screenshot's aspect ratio. */
.bc-media-pick img { width: 100%; height: 86px; object-fit: cover; object-position: top; display: block; }
.bc-media-upload {
  display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: var(--r-sm);
  color: var(--text-2); font-size: 12.5px; cursor: pointer; border-top: 1px solid var(--border);
}
.bc-media-upload:hover { background: var(--surface-2); color: var(--text); }
.bc-media-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.bc-bubble-media { display: flex; flex-direction: column; gap: 4px; max-width: 74%; margin-bottom: 4px; }
.bc-msg.from-us .bc-bubble-media { align-items: flex-end; }
.bc-bubble-media img {
  max-width: 220px; border-radius: var(--r-lg); border: 1px solid var(--border-2); display: block;
}
.bc-media-note { font-size: 10.5px; color: var(--text-3); }
.bc-media-note.is-bad { color: var(--danger); font-weight: 600; }