/* ══════════════════════════════════════════════════════════════════════════
   BOUNTY CHAN — UNIFIED HUNTER COMMS  ·  bc-coms.css
   Sprint-3 "20x overhaul" — ONE comms UI for EVERY surface (home · leaderboard ·
   in-game overlay · cockpit rail). Kick/Twitch streamer-chat energy collapsed,
   full cockpit cameo cards expanded, MvC-select emote grid, reply threads.

   Pairs with bc-coms.js  →  window.BCComs.mount(el,{mode})
   CANON: cyan #00f0ff · magenta #ff2d9b · gold #ffd24a · purple #9945ff / near-black.
   Agent name in UI = BOUNTYCHAN / BOUNTY CHAN — never "HER".
   Production polish 2026-07-09: 8pt row rhythm, HER-row tint, char counter,
   loading state, overlay header consistency, focus-visible, contrast ≥4.5:1.

   Everything is namespaced under .bcc-root so it drops into any host page without
   colliding with that page's own .cm / .comms classes. Brand tokens are self-set
   (not inherited) so the panel looks IDENTICAL on every surface — the whole point.
   ══════════════════════════════════════════════════════════════════════════ */

.bcc-root, .bcc-root *, .bcc-root *::before, .bcc-root *::after { box-sizing: border-box; }

.bcc-root{
  /* ── brand tokens — hard-set so all panels match regardless of host page ── */
  --bcc-cyan:#00f0ff;
  --bcc-magenta:#ff2d9b;
  --bcc-gold:#ffd24a;
  --bcc-purple:#9945ff;
  --bcc-green:#14f195;
  --bcc-red:#ff4d6d;
  --bcc-bg:#05070d;
  --bcc-bg2:#080b12;
  --bcc-fg:#e9f3ff;
  --bcc-muted:#8a97ad;
  --bcc-muted2:#71809d; /* was #5f6c86 — bumped for ≥4.5:1 on --bcc-bg (placeholders, meta text) */
  --bcc-line:rgba(255,255,255,.09);
  --bcc-line2:rgba(255,255,255,.14);
  --bcc-ease:cubic-bezier(.16,1,.3,1);
  --bcc-ease-in:cubic-bezier(.7,0,.84,0);
  --bcc-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bcc-disp:'Orbitron','Arial Black','Helvetica Neue',sans-serif;
  --bcc-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --bcc-key:url('/game/assets/hero-cast-keyart.jpg');

  position:relative;
  display:flex; flex-direction:column;
  min-height:0; height:100%;
  color:var(--bcc-fg);
  font-family:var(--bcc-body);
  background:var(--bcc-bg);
  overflow:hidden;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  contain:layout paint;
}
/* keyart wash + darkening gradient — the trench atmosphere (ported from cockpit .comms) */
.bcc-root::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--bcc-key) center 28%/cover;opacity:.24;filter:saturate(1.2)}
.bcc-root::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,13,.55),rgba(5,7,13,.86))}
.bcc-root>*{position:relative;z-index:1}
.bcc-root.no-art::before{display:none}

/* ─────────────────────────  HEADER (same in every mode)  ───────────────────── */
.bcc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 13px;border-bottom:1px solid var(--bcc-line);flex:0 0 auto;
  background:linear-gradient(180deg,rgba(8,11,18,.55),rgba(8,11,18,.15))}
.bcc-head .bcc-t{display:flex;align-items:center;gap:8px;min-width:0}
.bcc-head .bcc-t img{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:50% 12%;
  border:1.5px solid var(--bcc-cyan);box-shadow:0 0 10px rgba(0,240,255,.5);flex:0 0 auto}
.bcc-head .bcc-tt{font-family:var(--bcc-mono);font-weight:700;font-size:11px;letter-spacing:.1em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcc-head .bcc-tt em{font-style:normal;font-size:8px;letter-spacing:.08em;color:var(--bcc-cyan);opacity:.85;margin-left:5px}
.bcc-head .bcc-r{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.bcc-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--bcc-mono);font-size:8px;
  letter-spacing:.12em;color:var(--bcc-red);cursor:pointer;user-select:none}
.bcc-live .dt{width:5px;height:5px;border-radius:50%;background:#ff2d5b;box-shadow:0 0 8px #ff2d5b;animation:bccPulse 1.9s infinite}
.bcc-root.paused .bcc-live{color:var(--bcc-muted)}
.bcc-root.paused .bcc-live .dt{background:var(--bcc-muted);box-shadow:none;animation:none}
.bcc-expand{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border:1px solid var(--bcc-line);background:rgba(8,11,18,.6);color:var(--bcc-muted);font-size:13px;
  line-height:1;padding:0;border-radius:7px;cursor:pointer;
  transition:color .18s var(--bcc-ease),border-color .18s,background .18s,transform .18s}
.bcc-expand:hover{color:var(--bcc-cyan);border-color:rgba(0,240,255,.4);background:rgba(0,240,255,.08);transform:scale(1.06)}
.bcc-expand:active{transform:scale(.92)}
.bcc-expand[hidden]{display:none}

/* ─────────────────────────  PINNED BOUNTY STRIP  ───────────────────── */
.bcc-pin{flex:0 0 auto;display:flex;align-items:center;gap:10px;margin:8px 10px 2px;padding:8px 10px;
  border:1px solid var(--bcc-line2);border-left:3px solid var(--bc,var(--bcc-magenta));border-radius:11px;
  background:linear-gradient(100deg,color-mix(in srgb,var(--bc,#ff2d9b) 15%,rgba(8,11,18,.7)),rgba(8,11,18,.7));
  animation:bccIn .3s var(--bcc-ease)}
.bcc-pin .bcc-pin-img{width:38px;height:38px;flex:0 0 auto;border-radius:9px;object-fit:cover;object-position:top;
  border:1px solid var(--bc,var(--bcc-magenta));background:#05070d}
.bcc-pin .bcc-pin-m{flex:1;min-width:0}
.bcc-pin .bcc-pin-tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--bcc-mono);font-weight:800;
  font-size:7.5px;letter-spacing:.1em;color:var(--bcc-gold);text-transform:uppercase}
.bcc-pin .bcc-pin-tag i{width:5px;height:5px;border-radius:50%;background:var(--bc,var(--bcc-magenta));
  box-shadow:0 0 8px var(--bc,var(--bcc-magenta));animation:bccPulse 1.5s infinite}
.bcc-pin .bcc-pin-name{font-family:var(--bcc-disp);font-weight:900;font-style:italic;font-size:14px;
  letter-spacing:.01em;color:#fff;line-height:1.05;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcc-pin .bcc-pin-bty{font-family:var(--bcc-mono);font-weight:800;font-size:11px;color:var(--bcc-gold);flex:0 0 auto}
.bcc-pin .bcc-pin-x{flex:0 0 auto;width:20px;height:20px;border:0;background:none;color:var(--bcc-muted);
  font-size:13px;cursor:pointer;border-radius:6px}
.bcc-pin .bcc-pin-x:hover{color:var(--bcc-fg);background:rgba(255,255,255,.07)}

/* ─────────────────────────  FEED  ───────────────────── */
.bcc-feed{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:8px 10px;display:flex;flex-direction:column;gap:3px;scrollbar-width:thin;scroll-behavior:auto}
.bcc-feed::-webkit-scrollbar{width:7px}
.bcc-feed::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:7px}
.bcc-empty{margin:auto;font-family:var(--bcc-mono);font-size:11px;line-height:1.7;color:var(--bcc-muted);
  text-align:center;padding:22px 12px;opacity:.85}
.bcc-empty.loading{animation:bccPulse 1.6s var(--bcc-ease) infinite} /* pre-first-poll "linking…" */

/* ── standard message row (her + hunter) — 8pt rhythm: 4px v / 8px h, 8px gap ── */
.bcc-msg{position:relative;flex:0 0 auto;display:flex;gap:8px;align-items:flex-start;
  font-size:12.5px;line-height:1.34;padding:4px 8px;border-radius:8px;animation:bccIn .2s var(--bcc-ease)}
.bcc-msg:hover{background:rgba(255,255,255,.03)}
/* HER rows — distinct but not shouty: faint cyan wash + inset edge (no layout shift) */
.bcc-msg.her{background:linear-gradient(90deg,rgba(0,240,255,.055),rgba(0,240,255,0) 72%);
  box-shadow:inset 2px 0 0 rgba(0,240,255,.38)}
.bcc-msg.her:hover{background:linear-gradient(90deg,rgba(0,240,255,.085),rgba(255,255,255,.02) 72%)}
.bcc-pfp{width:22px;height:22px;flex:0 0 auto;border-radius:50%;object-fit:cover;object-position:50% 12%;
  margin-top:1px;background:#05070d;border:1px solid var(--bcc-cyan);box-shadow:0 0 8px rgba(0,240,255,.4)}
.bcc-pfp.gen{display:grid;place-items:center;font-family:var(--bcc-disp);font-weight:700;font-size:10px;
  color:#eafcff;text-shadow:0 1px 3px rgba(0,0,0,.6);
  background:linear-gradient(135deg,var(--a1,#00f0ff),var(--a2,#ff2d9b));border:1px solid rgba(255,255,255,.22)}
.bcc-main{flex:1;min-width:0}
.bcc-line{word-wrap:break-word;overflow-wrap:anywhere}
.bcc-name{font-weight:800;color:var(--bcc-cyan)}
.bcc-name::after{content:':';opacity:.5;margin:0 3px 0 1px;font-weight:400}
.bcc-name.hunter{text-transform:uppercase} /* elite: hunter names ALL CAPS */
.bcc-bc{font-family:var(--bcc-disp);font-weight:800;letter-spacing:.01em;margin-right:3px}
.bcc-bc::after{content:':';opacity:.5;margin:0 3px 0 1px;font-weight:400}
.bcc-bc b:first-child{color:var(--bcc-cyan);text-shadow:0 0 9px rgba(0,240,255,.5)}
.bcc-bc b:last-child{color:var(--bcc-magenta);text-shadow:0 0 9px rgba(255,45,155,.5)}
.bcc-time{font-family:var(--bcc-mono);font-size:9px;color:var(--bcc-muted);opacity:.8;
  float:right;margin-left:8px;margin-top:2px;letter-spacing:.04em} /* effective ≥4.5:1 on bg */

/* ── inline sticker inside a message body ── */
.bcc-stkrow{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:bottom;margin:2px 0}
.bcc-sticker{display:inline-block;vertical-align:bottom;height:56px;width:auto;max-width:120px;object-fit:contain;
  border-radius:8px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.55));cursor:pointer;transition:transform .15s var(--bcc-ease)}
.bcc-sticker.snt:hover{transform:scale(1.06)}
.bcc-sticker.big{height:120px;max-width:none}
.bcc-stkrow .bcc-sticker{height:56px}
/* animated 6-frame fire sheet */
.bcc-sticker.sheet{height:80px;width:42px;background-size:600% 100%;background-position:left center;
  background-repeat:no-repeat;animation:bccFire .72s steps(6) infinite}
.bcc-sticker.sheet.big{height:130px;width:68px}
/* animated 8x4 fighting sheet cell */
.bcc-sticker.fightcell{height:80px;width:40px;background-repeat:no-repeat;background-size:800% 400%;
  background-position:0% 0%;animation:bccCol .8s steps(8) infinite,bccRow 2.8s steps(4) infinite;border-radius:8px}
.bcc-stkmiss{font-style:normal;color:var(--bcc-muted);font-size:11px}

/* ─── HER host state (she's talking) ─── */
.bcc-root.hertalk .bcc-live{color:var(--bcc-cyan)!important}
.bcc-root.hertalk .bcc-live .dt{background:var(--bcc-cyan)!important;box-shadow:0 0 9px var(--bcc-cyan)!important}
.bcc-typing{display:flex;align-items:center;gap:7px;padding:4px 6px;font-size:12px}
.bcc-typing .bcc-dots{display:inline-flex;gap:3px}
.bcc-typing .bcc-dots i{width:5px;height:5px;border-radius:50%;background:var(--bcc-cyan);opacity:.5;animation:bccBlink 1s infinite}
.bcc-typing .bcc-dots i:nth-child(2){animation-delay:.15s}
.bcc-typing .bcc-dots i:nth-child(3){animation-delay:.3s}

/* ─── quoted reply chip (a reply that couldn't nest under a visible parent) ─── */
.bcc-quote{display:block;font-size:10.5px;line-height:1.3;color:var(--bcc-muted);
  border-left:2px solid var(--bcc-cyan);padding:1px 0 1px 7px;margin:1px 0 3px}
.bcc-quote b{color:var(--bcc-cyan);font-weight:700}
.bcc-quote i{font-style:normal;opacity:.8;margin-left:5px}

/* ─── nested replies (depth 1) ─── */
.bcc-replies{margin:2px 0 2px 12px;padding-left:9px;border-left:1.5px solid var(--bcc-line2);
  display:flex;flex-direction:column;gap:2px}
/* .bcc-replies is appended INSIDE the parent's flex row — wrap it to a full-width
   second line (else it sits beside .bcc-main and crushes the parent text vertical) */
.bcc-msg{flex-wrap:wrap}
.bcc-msg>.bcc-replies{flex:0 0 100%;min-width:0;margin-left:30px} /* 22px pfp + 8px gap = text column */
.bcc-msg.bcc-reply{padding:3px 8px;font-size:12px;gap:6px;background:rgba(0,240,255,.025)}
.bcc-msg.bcc-reply .bcc-pfp{width:18px;height:18px}
.bcc-msg.bcc-reply .bcc-replarrow{color:var(--bcc-cyan);font-size:10px;margin-right:3px;opacity:.7}

/* ─────────────────────────  MESSAGE ACTIONS (like · react · reply)  ───────────────────── */
.bcc-acts{display:flex;align-items:center;gap:3px;margin-top:3px;
  opacity:0;transform:translateY(-2px);transition:opacity .16s var(--bcc-ease),transform .16s var(--bcc-ease)}
.bcc-msg:hover .bcc-acts,.bcc-acts.show,.bcc-msg.boss .bcc-acts{opacity:1;transform:none}
.bcc-act{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 7px;border:1px solid var(--bcc-line);
  background:rgba(8,11,18,.5);color:var(--bcc-muted);border-radius:7px;font-family:var(--bcc-mono);
  font-size:10px;font-weight:700;cursor:pointer;transition:color .15s,border-color .15s,background .15s,transform .12s}
.bcc-act svg{width:12px;height:12px;fill:currentColor}
.bcc-act:hover{color:var(--bcc-fg);border-color:var(--bcc-line2);background:rgba(255,255,255,.05)}
.bcc-act:active{transform:scale(.92)}
.bcc-act.like.liked{color:var(--bcc-magenta);border-color:rgba(255,45,155,.4);background:rgba(255,45,155,.1)}
.bcc-act.reply:hover{color:var(--bcc-cyan);border-color:rgba(0,240,255,.4)}

/* reaction chips row */
.bcc-reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.bcc-reactchip{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 6px;border-radius:20px;
  border:1px solid var(--bcc-line2);background:rgba(8,11,18,.55);font-size:11px;line-height:1;cursor:pointer;
  transition:transform .12s var(--bcc-ease),background .15s}
.bcc-reactchip b{font-family:var(--bcc-mono);font-size:9px;font-weight:800;color:var(--bcc-fg)}
.bcc-reactchip.me{border-color:rgba(0,240,255,.5);background:rgba(0,240,255,.12)}
.bcc-reactchip.pop{animation:bccReactPop .3s var(--bcc-ease)}
.bcc-reactchip:hover{background:rgba(255,255,255,.06)}

/* quick-react popover (＋) */
.bcc-reactpop{position:fixed;z-index:60;display:none;gap:2px;padding:5px;border-radius:12px;
  border:1px solid var(--bcc-line2);background:rgba(8,11,18,.96);backdrop-filter:blur(12px);
  box-shadow:0 12px 40px -10px rgba(0,0,0,.8);max-width:288px;flex-wrap:wrap}
.bcc-reactpop.on{display:flex;animation:bccIn .16s var(--bcc-ease)}
.bcc-reactpop button{width:32px;height:32px;border:0;background:none;font-size:17px;line-height:1;cursor:pointer;
  border-radius:8px;transition:transform .12s var(--bcc-ease),background .12s}
.bcc-reactpop button:hover{transform:scale(1.28);background:rgba(0,240,255,.14)}

/* ─────────────────────────  BOSS CAMEO CARD (rail + overlay)  ───────────────────── */
.bcc-boss{display:block;padding:0;margin:8px 2px;border-radius:14px;overflow:hidden;position:relative;
  border:1px solid color-mix(in srgb,var(--bc,#ff2d9b) 40%,var(--bcc-line));
  background:linear-gradient(180deg,rgba(8,11,18,.4),rgba(8,11,18,.85));animation:bccIn .32s var(--bcc-ease)}
.bcc-boss .bcc-bimg{position:relative;width:100%;height:168px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--bc,#ff2d9b) 22%,transparent),transparent 70%)}
.bcc-boss .bcc-bimg img{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);height:116%;width:auto;
  max-width:none;object-fit:contain;object-position:bottom;filter:drop-shadow(0 8px 20px rgba(0,0,0,.65))}
.bcc-boss .bcc-bimg::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 44%,rgba(8,11,18,.72) 84%,rgba(8,11,18,.95))}
.bcc-boss .bcc-bimg::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 2px,transparent 2px 4px);opacity:.4}
.bcc-boss .bcc-bbadge{position:absolute;top:9px;left:9px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--bcc-mono);font-weight:800;font-size:7.5px;letter-spacing:.08em;color:#fff;text-transform:uppercase;
  padding:4px 8px;border-radius:20px;background:rgba(5,7,13,.7);border:1px solid color-mix(in srgb,var(--bc,#ff2d9b) 55%,transparent)}
.bcc-boss .bcc-bbadge i{width:5px;height:5px;border-radius:50%;background:var(--bc,#ff2d9b);
  box-shadow:0 0 8px var(--bc,#ff2d9b);animation:bccPulse 1.4s infinite}
.bcc-boss .bcc-bbty{position:absolute;top:9px;right:9px;z-index:2;font-family:var(--bcc-mono);font-weight:800;
  font-size:9px;letter-spacing:.04em;color:var(--bcc-gold);padding:4px 8px;border-radius:20px;
  background:rgba(5,7,13,.7);border:1px solid rgba(255,210,74,.4)}
.bcc-boss .bcc-bbody{position:relative;z-index:2;padding:0 13px 12px;margin-top:-30px}
.bcc-boss .bcc-bname{font-family:var(--bcc-disp);font-weight:900;font-style:italic;font-size:19px;letter-spacing:.01em;
  color:#fff;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.bcc-boss .bcc-brole{font-family:var(--bcc-mono);font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bc,#ff2d9b);margin-top:5px}
.bcc-boss .bcc-btaunt{font-size:12.5px;line-height:1.4;color:#dbe5ef;margin-top:8px}
.bcc-boss .bcc-btaunt::before{content:'“';color:var(--bc,#ff2d9b);font-weight:700;margin-right:1px}
.bcc-boss .bcc-btaunt::after{content:'”';color:var(--bc,#ff2d9b);font-weight:700}
.bcc-boss .bcc-brun{display:inline-flex;align-items:center;gap:8px;margin-top:11px;padding:9px 13px;border:0;
  border-radius:10px;background:linear-gradient(100deg,var(--bcc-green),#00d18a);color:#04120b;
  font-family:var(--bcc-mono);font-weight:800;font-size:10px;letter-spacing:.06em;cursor:pointer;
  transition:transform .14s var(--bcc-ease),box-shadow .14s;text-transform:uppercase}
.bcc-boss .bcc-brun .c{color:#04120b;opacity:.75}
.bcc-boss .bcc-brun:hover{transform:translateY(-1px);box-shadow:0 0 20px -4px var(--bcc-green)}
.bcc-boss .bcc-brun:active{transform:scale(.96)}
.bcc-boss .bcc-acts{padding:0 13px 11px;margin-top:-4px}

/* ─────────────────────────  SLIM SYSTEM / HIGHLIGHT ROW  ───────────────────── */
.bcc-sys{flex:0 0 auto;display:block;padding:4px 9px;margin:2px 0;border-radius:7px;
  border-left:2px solid var(--bc,var(--bcc-gold));background:color-mix(in srgb,var(--bc,#ffd24a) 8%,transparent);
  font-size:11.5px;line-height:1.4;color:#d5deec;animation:bccIn .2s var(--bcc-ease)}
.bcc-sys b{font-family:var(--bcc-mono);font-weight:800;font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bc,var(--bcc-gold));margin-right:7px}

/* ─────────────────────────  INPUT + REPLY BAR + TRAY  ───────────────────── */
.bcc-replybar{display:none;align-items:center;gap:8px;padding:7px 12px;border-top:1px solid var(--bcc-line);
  background:rgba(0,240,255,.05);flex:0 0 auto}
.bcc-replybar.on{display:flex;animation:bccIn .18s var(--bcc-ease)}
.bcc-replybar .rb-bar{width:3px;align-self:stretch;border-radius:3px;background:var(--bcc-cyan);flex:0 0 auto}
.bcc-replybar .rb-t{flex:1;min-width:0}
.bcc-replybar .rb-t b{display:block;font-family:var(--bcc-mono);font-size:8.5px;font-weight:800;letter-spacing:.08em;color:var(--bcc-cyan)}
.bcc-replybar .rb-t i{display:block;font-style:normal;font-size:11px;color:var(--bcc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcc-replybar .rb-x{flex:0 0 auto;width:22px;height:22px;border:0;background:none;color:var(--bcc-muted);font-size:12px;cursor:pointer;border-radius:6px}
.bcc-replybar .rb-x:hover{color:var(--bcc-fg);background:rgba(255,255,255,.07)}

/* sticker-preview chips (stacked [stk] before send) */
.bcc-chips{display:none;flex-wrap:wrap;gap:5px;padding:7px 12px 0;flex:0 0 auto}
.bcc-chips.on{display:flex}
.bcc-chip{position:relative;width:34px;height:34px;border-radius:8px;overflow:hidden;border:1px solid var(--bcc-line2);background:rgba(255,255,255,.04)}
.bcc-chip img,.bcc-chip i{display:block;width:100%;height:100%;object-fit:contain}
.bcc-chip i{background-repeat:no-repeat;background-position:left top}
.bcc-chip .x{position:absolute;top:-1px;right:-1px;width:15px;height:15px;border:0;border-radius:0 0 0 7px;
  background:rgba(5,7,13,.85);color:#fff;font-size:9px;line-height:1;cursor:pointer;display:grid;place-items:center}

.bcc-in{display:flex;gap:8px;align-items:center;padding:10px 12px;border-top:1px solid var(--bcc-line);flex:0 0 auto}
.bcc-emojibtn{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:9px;background:var(--bcc-magenta);color:#fff;
  font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:transform .14s var(--bcc-ease),box-shadow .14s}
.bcc-emojibtn:hover{box-shadow:0 0 16px -3px var(--bcc-magenta)}
.bcc-emojibtn:active{transform:scale(.92)}
.bcc-emojibtn.on{background:var(--bcc-cyan);color:#04121a}
.bcc-in input{flex:1;min-width:0;min-height:40px;padding:0 12px;border-radius:9px;border:1px solid var(--bcc-line);
  background:rgba(8,11,18,.6);color:var(--bcc-fg);font-family:var(--bcc-body);font-size:13px;outline:none;
  transition:border-color .18s var(--bcc-ease),box-shadow .18s}
.bcc-in input::placeholder{color:var(--bcc-muted2)}
.bcc-in input:focus{border-color:var(--bcc-cyan);box-shadow:0 0 0 3px rgba(0,240,255,.16),0 0 18px -6px rgba(0,240,255,.6)}
.bcc-send{flex:0 0 auto;min-width:54px;min-height:40px;padding:0 14px;border:0;border-radius:9px;background:var(--bcc-magenta);
  color:#fff;font-family:var(--bcc-mono);font-weight:800;font-size:11px;letter-spacing:.05em;cursor:pointer;
  transition:transform .14s var(--bcc-ease),box-shadow .14s,opacity .14s}
.bcc-send:hover{box-shadow:0 0 18px -4px var(--bcc-magenta)}
.bcc-send:active{transform:scale(.94)}
.bcc-send:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
/* in-flight send state (root.sending set by JS while the POST is out) */
.bcc-root.sending .bcc-in .bcc-send{opacity:.55;box-shadow:none;animation:bccPulse 1.1s var(--bcc-ease) infinite}
/* char-limit counter — appears for the last 30 chars, red at ≤10 */
.bcc-in .bcc-count{flex:0 0 auto;font:800 9px/1 var(--bcc-mono);letter-spacing:.05em;color:var(--bcc-muted);
  padding:4px 5px 3px;border:1px solid var(--bcc-line);border-radius:6px;background:rgba(8,11,18,.5)}
.bcc-in .bcc-count.hot{color:var(--bcc-red);border-color:rgba(255,77,109,.45)}
.bcc-in .bcc-count[hidden]{display:none}
/* login-gated (copied from bcChatGate: read-open, connect-to-send) */
.bcc-in.locked input{cursor:pointer;color:var(--bcc-muted)}
.bcc-in.locked .bcc-send{background:rgba(255,255,255,.08);color:var(--bcc-muted2)}
/* keyboard nav — visible focus ring on all interactive chrome (input keeps its own glow ring) */
.bcc-root button:focus-visible,.bcc-root .bcc-live:focus-visible,.bcc-root .bcc-feed:focus-visible{
  outline:2px solid rgba(0,240,255,.75);outline-offset:2px}

/* ─────────────────────────  "↓ N NEW" RESUME CHIP  ───────────────────── */
.bcc-newchip{position:absolute;left:50%;transform:translateX(-50%) translateY(6px);bottom:74px;z-index:20;
  display:none;align-items:center;gap:6px;padding:7px 14px;border-radius:20px;border:1px solid rgba(0,240,255,.5);
  background:rgba(5,7,13,.92);color:var(--bcc-cyan);font-family:var(--bcc-mono);font-weight:800;font-size:10px;
  letter-spacing:.05em;cursor:pointer;box-shadow:0 8px 26px -6px rgba(0,240,255,.5);
  transition:transform .2s var(--bcc-ease),opacity .2s}
.bcc-newchip.on{display:inline-flex;animation:bccChip .28s var(--bcc-ease)}
.bcc-newchip:hover{transform:translateX(-50%) translateY(-1px)}

/* ═════════════════════════  MvC EMOTE / STICKER SELECT GRID  ═════════════════════════
   founder: "pop up like that Marvel vs Capcom selector, all of them in one view,
   clickable, all the animated ones." Full-panel overlay, one scroll, everything visible. */
.bcc-picker{position:absolute;inset:0;z-index:40;display:none;flex-direction:column;
  background:linear-gradient(180deg,rgba(5,7,13,.97),rgba(5,7,13,.99));backdrop-filter:blur(10px)}
.bcc-picker.on{display:flex;animation:bccPickerIn .22s var(--bcc-ease)}
.bcc-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;
  border-bottom:1px solid var(--bcc-line);flex:0 0 auto}
.bcc-picker-head .h{font-family:var(--bcc-disp);font-weight:900;font-style:italic;font-size:13px;letter-spacing:.02em;color:#fff}
.bcc-picker-head .h b{color:var(--bcc-cyan)}
.bcc-picker-x{width:28px;height:28px;border:1px solid var(--bcc-line);background:rgba(8,11,18,.6);color:var(--bcc-muted);
  font-size:14px;line-height:1;cursor:pointer;border-radius:8px;transition:color .15s,border-color .15s,transform .12s}
.bcc-picker-x:hover{color:var(--bcc-fg);border-color:var(--bcc-line2)}
.bcc-picker-x:active{transform:scale(.9)}
.bcc-picker-body{flex:1;min-height:0;overflow-y:auto;padding:12px 13px 16px;scrollbar-width:thin}
.bcc-picker-body::-webkit-scrollbar{width:7px}
.bcc-picker-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:7px}
.bcc-sec{font-family:var(--bcc-mono);font-weight:800;font-size:8.5px;letter-spacing:.14em;color:var(--bcc-cyan);
  text-transform:uppercase;margin:4px 2px 8px;display:flex;align-items:center;gap:8px}
.bcc-sec:not(:first-child){margin-top:16px}
.bcc-sec::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(0,240,255,.3),transparent)}

/* emoji sub-grid */
.bcc-egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:4px}
.bcc-egrid button{aspect-ratio:1;border:1px solid transparent;border-radius:9px;background:rgba(255,255,255,.04);
  font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:transform .13s var(--bcc-ease),background .13s,border-color .13s}
.bcc-egrid button:hover{transform:scale(1.22) translate(0,-1px);background:rgba(0,240,255,.14);border-color:rgba(0,240,255,.4);z-index:1}
.bcc-egrid button.flash{animation:bccSelect .34s var(--bcc-ease)}

/* sticker / character-select sub-grid (MvC portraits + animated sheets) */
.bcc-sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px}
.bcc-scell{position:relative;aspect-ratio:1;border:1px solid var(--bcc-line);border-radius:10px;overflow:hidden;
  background:rgba(255,255,255,.03);cursor:pointer;display:grid;place-items:center;
  transition:transform .14s var(--bcc-ease),border-color .14s,box-shadow .14s}
.bcc-scell img{width:100%;height:100%;object-fit:contain;padding:4px}
.bcc-scell .sh{width:100%;height:100%;background-repeat:no-repeat;background-position:center}
.bcc-scell .sh.sheet{background-size:auto 100%;background-position:left center;animation:bccFire .72s steps(6) infinite}
.bcc-scell .sh.fight{background-size:800% 400%;background-position:0% 0%;
  animation:bccCol .8s steps(8) infinite,bccRow 2.8s steps(4) infinite}
.bcc-scell .tag{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;font-family:var(--bcc-mono);font-weight:700;
  font-size:7px;letter-spacing:.03em;color:#dfeaf7;text-transform:uppercase;text-align:center;
  background:linear-gradient(0deg,rgba(5,7,13,.9),transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transition:opacity .14s}
.bcc-scell:hover{transform:translateY(-3px) scale(1.05);border-color:var(--bcc-cyan);box-shadow:0 8px 22px -6px rgba(0,240,255,.5);z-index:1}
.bcc-scell:hover .tag{opacity:1}
.bcc-scell:active{transform:scale(.96)}
.bcc-scell.flash{animation:bccSelect .34s var(--bcc-ease),bccSelectRing .34s var(--bcc-ease)}
/* mini composer strip inside picker (mirrors emoji picks, obvious SEND) */
.bcc-picker-foot{flex:0 0 auto;display:flex;gap:8px;align-items:center;padding:9px 13px;border-top:1px solid var(--bcc-line);
  background:rgba(8,11,18,.6)}
.bcc-picker-foot input{flex:1;min-width:0;min-height:38px;padding:0 12px;border-radius:9px;border:1px solid var(--bcc-line);
  background:rgba(8,11,18,.6);color:var(--bcc-fg);font-family:var(--bcc-body);font-size:13px;outline:none}
.bcc-picker-foot input:focus{border-color:var(--bcc-cyan)}
.bcc-picker-foot .bcc-send{min-height:38px}

/* ══════════════════════════  MODE: COLLAPSED — KICK / TWITCH DENSE CHAT  ══════════════════════════
   founder: "coms when collapsed smaller view should feel like a KICK or TWITCH streamer chat vibe" */
.bcc-root.m-collapsed .bcc-feed{gap:0;padding:5px 8px}
.bcc-root.m-collapsed .bcc-msg{display:block;padding:1px 8px;font-size:13px;line-height:1.3;border-radius:5px;animation:bccInSm .16s var(--bcc-ease)}
.bcc-root.m-collapsed .bcc-msg:hover{background:rgba(255,255,255,.04)}
.bcc-root.m-collapsed .bcc-pfp{display:none}
.bcc-root.m-collapsed .bcc-main{display:inline}
.bcc-root.m-collapsed .bcc-name{font-weight:700}
.bcc-root.m-collapsed .bcc-bc{font-size:12px}
.bcc-root.m-collapsed .bcc-line{display:inline}
.bcc-root.m-collapsed .bcc-time{font-size:8.5px;margin-left:6px}
/* inline emotes render small in the dense stream */
.bcc-root.m-collapsed .bcc-sticker{height:22px;vertical-align:middle;border-radius:5px;margin:0 1px}
.bcc-root.m-collapsed .bcc-sticker.sheet{height:26px;width:14px}
.bcc-root.m-collapsed .bcc-sticker.fightcell{height:26px;width:13px}
.bcc-root.m-collapsed .bcc-sticker.big{height:96px}
.bcc-root.m-collapsed .bcc-stkrow{display:inline;gap:2px}
/* actions collapse to a tiny inline affordance, reveal on hover/tap */
.bcc-root.m-collapsed .bcc-acts{display:inline-flex;margin:0 0 0 6px;vertical-align:middle;gap:2px}
.bcc-root.m-collapsed .bcc-act{height:17px;padding:0 5px;font-size:9px}
.bcc-root.m-collapsed .bcc-act svg{width:10px;height:10px}
.bcc-root.m-collapsed .bcc-reacts{display:inline-flex;margin:0 0 0 6px;vertical-align:middle}
.bcc-root.m-collapsed .bcc-reactchip{height:16px;font-size:10px;padding:0 5px}
/* BOSS becomes a SLIM highlight row (NOT a big card) in collapsed */
.bcc-root.m-collapsed .bcc-boss{display:block;margin:2px 0;padding:3px 9px;border-radius:6px;overflow:visible;
  border:0;border-left:2px solid var(--bc,var(--bcc-magenta));
  background:color-mix(in srgb,var(--bc,#ff2d9b) 9%,transparent)}
.bcc-root.m-collapsed .bcc-boss .bcc-bimg,.bcc-root.m-collapsed .bcc-boss .bcc-bbadge,
.bcc-root.m-collapsed .bcc-boss .bcc-bbty,.bcc-root.m-collapsed .bcc-boss .bcc-brun{display:none}
.bcc-root.m-collapsed .bcc-boss .bcc-bbody{margin:0;padding:0}
.bcc-root.m-collapsed .bcc-boss .bcc-bname{display:inline;font-size:12px;font-style:italic;color:var(--bc,#ff2d9b)}
.bcc-root.m-collapsed .bcc-boss .bcc-bname::after{content:':';opacity:.5;margin:0 4px 0 1px}
.bcc-root.m-collapsed .bcc-boss .bcc-brole{display:none}
.bcc-root.m-collapsed .bcc-boss .bcc-btaunt{display:inline;font-size:12.5px;color:#e6edf7;margin:0}
.bcc-root.m-collapsed .bcc-boss .bcc-btaunt::before,.bcc-root.m-collapsed .bcc-boss .bcc-btaunt::after{content:''}
.bcc-root.m-collapsed .bcc-boss .bcc-acts{display:inline-flex;padding:0;margin-left:6px}
.bcc-root.m-collapsed .bcc-replies{margin-left:8px;padding-left:7px}
/* HER wash stays subtle at streamer density */
.bcc-root.m-collapsed .bcc-msg.her{box-shadow:inset 2px 0 0 rgba(0,240,255,.3)}
/* resume chip scales down with the dense stream */
.bcc-root.m-collapsed .bcc-newchip{bottom:70px;padding:6px 12px;font-size:9.5px}

/* ══════════════════════════  MODE: OVERLAY — IN-GAME FULL PANEL  ══════════════════════════ */
.bcc-root.m-overlay{--bcc-fs:13.5px}
/* header scales WITH the roomier panel — same anatomy as rail, one step up */
.bcc-root.m-overlay .bcc-head{padding:12px 14px}
.bcc-root.m-overlay .bcc-head .bcc-t img{width:24px;height:24px}
.bcc-root.m-overlay .bcc-head .bcc-tt{font-size:12px}
.bcc-root.m-overlay .bcc-feed{padding:10px 12px;gap:4px}
.bcc-root.m-overlay .bcc-msg{font-size:13.5px;padding:5px 8px}
.bcc-root.m-overlay .bcc-pfp{width:26px;height:26px}
.bcc-root.m-overlay .bcc-msg>.bcc-replies{margin-left:34px} /* 26px pfp + 8px gap */
.bcc-root.m-overlay .bcc-boss .bcc-bimg{height:190px}
.bcc-root.m-overlay .bcc-in input{min-height:44px;font-size:14px}
.bcc-root.m-overlay .bcc-send,.bcc-root.m-overlay .bcc-emojibtn{min-height:44px;height:44px}

/* ══════════════════════════  RESPONSIVE — 390px flawless  ══════════════════════════ */
@media(max-width:430px){
  .bcc-head{padding:10px 11px}
  .bcc-head .bcc-tt{font-size:10px}
  .bcc-feed{padding:7px 8px}
  .bcc-egrid{grid-template-columns:repeat(auto-fill,minmax(34px,1fr))}
  .bcc-sgrid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}
  .bcc-boss .bcc-bimg{height:150px}
  .bcc-in input{font-size:13px}
}

/* ══════════════════════════  MOTION / PERF GUARDS  ══════════════════════════ */
@media(pointer:coarse){
  .bcc-egrid button:hover,.bcc-scell:hover,.bcc-reactpop button:hover,.bcc-sticker.snt:hover{transform:none}
  .bcc-scell:hover{box-shadow:none}
  /* coarse pointers: 2-frame toggle instead of full sheet flip (perf) */
  .bcc-sticker.fightcell,.bcc-scell .sh.fight{animation:bccTog 1.05s step-end infinite}
}
@media(prefers-reduced-motion:reduce){
  .bcc-root *,.bcc-root *::before,.bcc-root *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .bcc-live .dt,.bcc-pin-tag i,.bcc-bbadge i{animation:none!important}
  .bcc-sticker.sheet,.bcc-sticker.fightcell,.bcc-scell .sh.sheet,.bcc-scell .sh.fight{animation:none!important;background-position:left center!important}
}

/* ══════════════════════════  KEYFRAMES  ══════════════════════════ */
@keyframes bccIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes bccInSm{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
@keyframes bccPulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes bccBlink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes bccFire{from{background-position-x:0%}to{background-position-x:120%}} /* 6-frame: steps(6) samples 0..100 */
@keyframes bccCol{from{background-position-x:0%}to{background-position-x:114.2857%}} /* 8 cols */
@keyframes bccRow{from{background-position-y:0%}to{background-position-y:133.3333%}} /* 4 rows */
@keyframes bccTog{0%,49%{background-position:0% 33.33%}50%,100%{background-position:57.14% 66.66%}}
@keyframes bccReactPop{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes bccChip{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes bccPickerIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
@keyframes bccSelect{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes bccSelectRing{0%{box-shadow:0 0 0 0 rgba(0,240,255,.7)}100%{box-shadow:0 0 0 14px rgba(0,240,255,0)}}