/* ═══════════════════════════════════════════════════════════
   ParlayBuilder – Chatbot Styles
   Matches "Customize Your Build" modal styling conventions.
   ═══════════════════════════════════════════════════════════ */

/* ── FAB Button ─────────────────────────────────────────── */
.pb-chat-fab {
  position: fixed;
  bottom: calc(var(--pb-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 16px);
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--theme-gradient-primary, linear-gradient(135deg, #00F5D4, #00D3BD, #00AD84));
  color: #000;
  font-size: 24px;
  cursor: pointer;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 211, 189, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}
.pb-chat-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(0, 211, 189, 0.45);
}
.pb-chat-fab:active { transform: scale(0.96); }

/* Hide on cover page */
body.cover-active .pb-chat-fab,
body.cover-active .pb-chat-panel { display: none !important; }

/* NBA chatbot is in development — hide its FAB + panel until the feature
   is ready to ship. Scoped so the MLB assistant (.pb-chat--mlb, mounted
   by js/mlb/mlbChat.js) is NOT affected. Drop these rules to re-enable
   the NBA widget. */
.pb-chat-fab:not(.pb-chat--mlb),
.pb-chat-panel:not(.pb-chat--mlb) { display: none !important; }

/* ── MLB assistant additions ─────────────────────────── */

/* MLB FAB: neon chat-bubble icon (static/css/used-imgs/chat-bubble-neon.png,
   built from the user's neon PNG — black knocked out to transparent) on a dark
   disc instead of the teal circle + baseball glyph. The disc + cyan glow keep it
   noticeable on the dark page while letting the neon read as neon. Scoped to the
   MLB widget so nothing else is touched. To restore the old look, delete this
   block and revert the _fab.innerHTML in mlbChat.js. */
.pb-chat-fab.pb-chat--mlb {
  /* Wide screens: a bit larger than the shared 56px base. Mobile bumps this a lot
     more in the max-width:1000px block below (icon scales with it, ~0.69 ratio). */
  width: 72px;
  height: 72px;
  background: radial-gradient(circle at 50% 42%, #14232f 0%, #0a0f16 72%);
  /* Just an elevation drop-shadow now — the cyan halo around the disc was removed;
     the bubble keeps its own subtle neon glow via the icon's drop-shadow below. */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.pb-chat-fab.pb-chat--mlb:hover {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}
.pb-chat-fab.pb-chat--mlb .pb-chat-fab-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  pointer-events: none;
  /* Extra neon glow that scales crisply with the button (the PNG carries a soft
     baked glow too). */
  filter: drop-shadow(0 0 3px rgba(120, 232, 255, 0.85));
}

/* Transient "Checking splits…" activity line while tools run */
.pb-chat-tool-status {
  align-self: flex-start;
  font-size: 12px;
  font-style: italic;
  color: #9aa4b2;
  padding: 4px 12px;
  animation: pbChatPulse 1.2s ease-in-out infinite;
}
@keyframes pbChatPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Tier badge on leg buttons */
.pb-chat-tier {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #fff;
}

/* Server-dropped legs (off the board / bad line) */
.pb-chat-leg-dropped {
  font-size: 12px;
  color: #9aa4b2;
  padding: 2px 4px;
}

/* Refused / failed leg adds */
.pb-chat-add-leg.failed {
  opacity: 0.6;
  text-decoration: line-through;
}

/* ── Embedded spray chart (visuals channel) ───────────── */
.pb-chat-visual {
  align-self: stretch;
  margin: 6px 0;
}

/* ── Breakdown panels (Conditions / Pitch Mix / Matchup) ── */
.pb-panels {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 10px 12px;
}
.pb-panels-head {
  font-size: 13px;
  font-weight: 700;
  padding-bottom: 8px;
}
.pb-panel {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 8px 0;
}
.pb-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #9aa4b2;
  margin-bottom: 7px;
}
.pb-panel-chip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: #e8ffe9;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 2px 9px;
}
.pb-panel-cond {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.pb-panel-spray { width: 46%; flex-shrink: 0; }
.pb-panel-spray .pb-spray-field { border-radius: 8px; }
.pb-panel-spray .pb-spray-dot { width: 5px; height: 5px; }
.pb-panel-venue {
  font-size: 10px;
  color: #9aa4b2;
  text-align: center;
  margin-top: 3px;
}
.pb-panel-stats { flex: 1; min-width: 0; }
.pb-panel-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  font-size: 12px;
}
.pb-panel-stat span {
  color: #9aa4b2;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
.pb-panel-stat em { font-style: normal; font-weight: 600; }
.pb-mix-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
}
.pb-mix-name { width: 72px; flex-shrink: 0; font-weight: 600; }
.pb-mix-usage { width: 44px; flex-shrink: 0; color: #9aa4b2; text-align: right; }
.pb-mix-bar {
  position: relative;
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.pb-mix-bar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.18);
}
.pb-mix-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
}
.pb-mix-val {
  width: 52px;
  flex-shrink: 0;
  text-align: right;
  font-weight: 600;
  font-size: 11.5px;
}
.pb-panel-legend {
  font-size: 10px;
  color: #9aa4b2;
  text-align: center;
  margin-top: 5px;
}
.pb-panel-legend i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  vertical-align: baseline;
  margin-right: 3px;
}
/* Inline panel slots ([[panel:x]] markers in the reply text) */
.pb-panel-slot { margin: 8px 0; }
.pb-panel-slot:empty { display: none; }
.pb-panels--inline .pb-panel { border-top: none; padding: 2px 0; }

/* Wind arrows on the park (conditions section) */
.pb-wind-arrow {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.pb-wind-arrow svg { filter: drop-shadow(0 0 3px rgba(0,0,0,0.8)); }
.pb-wind-arrow em {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  color: #e8ffe9;
  text-shadow: 0 0 3px rgba(0,0,0,0.9);
  margin-top: -2px;
}

/* Matchup grade (mirrors the workbench MATCHUP GRADE widget) */
.pb-mg-score {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  letter-spacing: 0;
}
.pb-mg-score b { font-size: 15px; color: #e8ffe9; }
.pb-mg-score > span:not(.pb-panel-chip) { font-size: 10px; color: #9aa4b2; }
.pb-mg-score .pb-panel-chip { margin-left: 6px; font-weight: 700; }
.pb-mg-bar {
  display: flex;
  height: 9px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  margin: 2px 0 8px;
}
.pb-mg-bar i { height: 100%; }
.pb-mg-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.pb-mg-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  padding: 3px 0;
  min-width: 0;
}
.pb-mg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pb-mg-row > span { color: #c7cdd6; flex: 1; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.pb-mg-raw {
  font-style: normal;
  font-weight: 700;
  font-size: 10.5px;
  border: 1px solid;
  border-radius: 6px;
  padding: 0 5px;
  flex-shrink: 0;
}
.pb-mg-weight { color: #9aa4b2; font-size: 10px; flex-shrink: 0; }
.pb-mg-sub { color: #e8ffe9; font-size: 11.5px; flex-shrink: 0; width: 24px;
  text-align: right; }
@media (max-width: 480px) {
  .pb-mg-rows { grid-template-columns: 1fr; }
}

.pb-match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 16px;
}
.pb-match-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 0;
}
.pb-match-row i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pb-match-row span { color: #c7cdd6; flex: 1; }
.pb-match-row em { font-style: normal; font-weight: 600; }
@media (max-width: 480px) {
  .pb-panel-cond { flex-direction: column; }
  .pb-panel-spray { width: 70%; align-self: center; }
  .pb-match-grid { grid-template-columns: 1fr; }
}
.pb-spray-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 8px;
}
.pb-spray-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.pb-spray-venue {
  font-weight: 400;
  font-size: 12px;
  color: #9aa4b2;
}
.pb-spray-field {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 545;
  overflow: hidden;
  border-radius: 10px;
  background: #0c1a12;
}
.pb-spray-park {
  position: absolute;
  pointer-events: none;
}
/* Tilted (V2) park. The aspect ratio MUST equal the V2 viewBox's 900/620,
   because dot positions are percentages of this box computed from viewBox
   coordinates — leave it at 640/545 and every dot shears vertically against
   the park under it, which reads as a projection bug rather than a CSS one.
   The flat art's four crop percentages are NOT applied here: the V2 viewBox is
   already fitted, so re-cropping it would transform it twice. */
.pb-spray-field--v2 {
  aspect-ratio: 900 / 620;
  /* The #0c1a12 fill was chosen to be completely hidden behind the flat art,
     which was scaled 140% and cropped. A fitted viewBox has margins, so that
     colour would now read as a green void framing the park. */
  background: transparent;
}
.pb-spray-park-v2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pb-spray-park-v2 > svg { display: block; width: 100%; height: 100%; }
.pb-spray-dots {
  position: absolute;
  inset: 0;
}
.pb-spray-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.85;
}
.pb-spray-dot--hr {
  width: 9px;
  height: 9px;
  box-shadow: 0 0 6px 1px rgba(52, 211, 153, 0.65);
}
.pb-spray-counts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.pb-spray-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 10px;
}
.pb-spray-count i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.pb-spray-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.pb-spray-filters button {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.pb-spray-filters button.active {
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.18);
  border-color: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.5);
}

/* Body scroll lock when chat is open (mobile) */
html.pb-chat-lock,
body.pb-chat-lock {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* ── Chat Panel (desktop) ──────────────────────────────── */
.pb-chat-panel {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 624px;
  /* Constant height (was max-height:820px, which let the panel GROW upward as a
     response streamed in — the "page scrolls with the text" on wide screens). Now
     it's a fixed box and the messages area scrolls internally. Capped to the
     viewport so it stays on-screen; mobile resets this to auto (top/bottom size it). */
  height: min(864px, calc(100vh - 120px));
  background: var(--theme-bg-base, #0a1628);
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.22);
  border-radius: 20px;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.pb-chat-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── Panel Header ───────────────────────────────────────── */
.pb-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.12);
  flex-shrink: 0;
}
.pb-chat-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  /* Absorb the header's free space so the header's justify-content:
     space-between can't strand "New chat" in the middle — it and close stay
     clustered on the right. */
  flex: 1 1 auto;
}
.pb-chat-header-title {
  font-weight: 700;
  font-size: 20px;
  color: var(--theme-text-primary, #e8ffe9);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.pb-chat-header-title::before { display: none; }
.pb-chat-header-stats {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
}
.pb-chat-close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 10px;
  color: #d6fffa;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.pb-chat-close:hover { background: rgba(255,255,255,0.2); }

/* FAB baseball glyph (color emoji replaces the flat FA icon) */
.pb-chat-fab .pb-chat-fab-ball {
  font-size: 1.15em;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Copy-transcript button — first in the right-hand cluster, left of
   "New chat". Same fill/hover as its neighbours; 9px corner matches
   .pb-chat-clear beside it. */
.pb-chat-copy {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 9px;
  color: #d6fffa;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 8px;
  transition: background 0.15s;
}
.pb-chat-copy:hover { background: rgba(255,255,255,0.2); }
.pb-chat-copy.copied { color: #22c55e; }
.pb-chat-copy.copy-failed { color: #ef4444; }

/* "New chat" — compose icon + label, in the right-hand control cluster next
   to close. Deliberately neutral: same translucent-white fill and hover as
   .pb-chat-close (no accent border) and a soft 9px corner rather than a pill,
   so the two read as one control group. Height matches close for alignment. */
.pb-chat-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 9px;
  color: #d6fffa;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 8px;
  transition: background 0.15s;
}
.pb-chat-clear:hover { background: rgba(255,255,255,0.2); }
.pb-chat-clear-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ── Messages Area ──────────────────────────────────────── */
.pb-chat-messages {
  flex: 1;
  overflow-y: auto;
  /* Never scroll sideways: a lone overflow-y:auto gets promoted to auto on BOTH
     axes, so wide content (a long token, a visual) could scroll horizontally.
     Pin overflow-x and let content wrap/clip within the chat width instead. */
  overflow-x: hidden;
  /* Keep scroll INSIDE the message list — never chain to the page behind the
     panel as content streams in or when scrolling hits the top/bottom. */
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  /* Top-align: the conversation starts at the TOP of the list and fills downward
     (so the first message sits at the top, not floating at the bottom of the tall
     panel). Default flex-start + no justify-content:flex-end also means overflow
     scrolls normally and older messages stay reachable. */
  justify-content: flex-start;
}
.pb-chat-messages::-webkit-scrollbar { width: 4px; }
.pb-chat-messages::-webkit-scrollbar-track { background: transparent; }
.pb-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
}

/* ── Empty State Placeholder ───────────────────────────── */
.pb-chat-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1;
  padding: 40px 24px;
  text-align: center;
  color: rgba(255,255,255,0.35);
}
.pb-chat-placeholder-icon {
  font-size: 36px;
  color: var(--theme-accent, #00D3BD);
  opacity: 0.6;
}
.pb-chat-placeholder-text {
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}
/* Center onboarding CTAs — the prominent first-time entry, below the prompt
   text in the empty state. Accent-filled pills so they read as the primary
   action for a newcomer (distinct from the neutral research starter chips). */
.pb-chat-onboarding {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.pb-chat-onboard-btn {
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.16);
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.55);
  color: var(--theme-accent, #00D3BD);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pb-chat-onboard-btn:hover {
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.3);
  color: #fff;
  border-color: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.8);
}

/* ── Message Bubbles ────────────────────────────────────── */
.pb-chat-msg {
  max-width: 88%;
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 15.5px;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* Never let a bubble compress in the flex column — a long/streaming reply must
     keep its full height so the message list actually OVERFLOWS and scrolls
     (default flex-shrink:1 would squish it and the list would never scroll). */
  flex-shrink: 0;
}
.pb-chat-msg-user {
  align-self: flex-end;
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.75);
  color: var(--theme-text-on-accent, #0a1628);
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.pb-chat-msg-assistant {
  align-self: flex-start;
  background: rgba(255,255,255,0.06);
  color: var(--theme-text-secondary, #e8ffe9);
  border-bottom-left-radius: 4px;
}

/* Markdown — bold/headers stay the base text color: the accent teal is
   reserved for .pb-chat-player-link so color = "clickable", nothing else */
.pb-chat-msg-assistant strong { color: inherit; font-weight: 700; }
.pb-chat-msg-assistant .pb-chat-h2,
.pb-chat-msg-assistant .pb-chat-h3 {
  display: block;
  margin-top: 6px;
}
.pb-chat-msg-assistant .pb-chat-h2 { font-size: 1.1em; }
.pb-chat-msg-assistant .pb-chat-h3 { font-size: 1em; }
.pb-chat-msg-assistant em { font-style: italic; }
.pb-chat-msg-assistant code {
  background: rgba(255,255,255,0.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 13px;
}
.pb-chat-msg-assistant ul,
.pb-chat-msg-assistant ol { margin: 4px 0; padding-left: 18px; }
.pb-chat-msg-assistant li { margin: 2px 0; }

/* Player name links */
.pb-chat-player-link {
  color: var(--theme-accent, #00D3BD);
  cursor: pointer;
  font-weight: 600;
}

/* Game links ("Angels @ Twins" → game page) — same clickable accent */
.pb-chat-game-link {
  color: var(--theme-accent, #00D3BD);
  cursor: pointer;
  font-weight: 600;
}

/* Token usage (dev) */
.pb-chat-usage {
  align-self: flex-start;
  font-size: 10px;
  color: rgba(255,255,255,0.25);
  padding: 2px 0 0 4px;
}

/* Quota nudge (server 'notice' event) */
.pb-chat-notice {
  align-self: center;
  font-size: 11px;
  color: rgba(245,158,11,0.85);
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 8px;
  padding: 4px 10px;
  margin: 4px 0;
  max-width: 92%;
  text-align: center;
}

/* ── Add-to-Parlay Buttons ──────────────────────────────── */
.pb-chat-parlay-legs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: flex-start;
  max-width: 92%;
}
.pb-chat-add-leg {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.12);
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.35);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--theme-text-secondary, #e8ffe9);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
  line-height: 1.35;
}
.pb-chat-add-leg:hover {
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.22);
  border-color: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.5);
}
.pb-chat-add-leg:disabled { cursor: default; opacity: 0.7; }
.pb-chat-add-leg.added {
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.06);
  border-color: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.12);
  color: rgba(255,255,255,0.4);
}
.pb-chat-add-all {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--theme-accent, #00D3BD);
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--theme-text-on-accent, #0a1628);
  cursor: pointer;
  transition: opacity 0.15s;
  text-align: left;
  line-height: 1.35;
}
.pb-chat-add-all:hover { opacity: 0.85; }
.pb-chat-add-all:disabled { cursor: default; opacity: 0.5; }
.pb-chat-add-all.added {
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.15);
  color: var(--theme-accent, #00D3BD);
}

/* ── Follow-up suggestion chips ──────────────────────── */
.pb-chat-followups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: flex-start;
  max-width: 92%;
  padding-top: 4px;
}
.pb-chat-followup {
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.08);
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.28);
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--theme-accent, #00D3BD);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.pb-chat-followup:hover {
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.18);
  border-color: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.45);
}

/* Typing indicator */
.pb-chat-typing {
  align-self: flex-start;
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
  color: rgba(255,255,255,0.4);
}
.pb-chat-typing::after {
  content: "...";
  animation: pb-chat-dots 1.2s infinite;
}
@keyframes pb-chat-dots {
  0%, 20% { content: "."; }
  40% { content: ".."; }
  60%, 100% { content: "..."; }
}

/* ── Suggested Starters (wrapping chips — no carousel) ──── */
.pb-chat-starters-wrap {
  flex-shrink: 0;
  padding: 0;
}
.pb-chat-starters-track {
  display: flex;
  flex-wrap: wrap;          /* chips wrap onto new rows within the chat width */
  gap: 8px;
  padding: 0 16px 8px;
}
.pb-chat-starter {
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.12);
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.35);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--theme-text-secondary, #e8ffe9);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: normal;     /* a long chip wraps its text instead of overflowing */
  max-width: 100%;
  text-align: left;
}
.pb-chat-starter:hover {
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.22);
  color: #fff;
  border-color: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.5);
}

/* ── Input Area ─────────────────────────────────────────── */
.pb-chat-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.12);
  flex-shrink: 0;
}
.pb-chat-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.22);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 15.5px;
  color: #fff;
  max-height: 80px;
  overflow-y: auto;
  line-height: 1.4;
  font-family: inherit;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.pb-chat-input:empty::before {
  content: "Ask about NBA stats, props, matchups\2026";
  color: rgba(255,255,255,0.3);
  pointer-events: none;
}
.pb-chat--mlb .pb-chat-input:empty::before {
  content: "Ask about MLB props, matchups, live games\2026";
}
.pb-chat-input:focus { border-color: rgba(var(--theme-accent-rgb, 0, 211, 189), 0.6); }

.pb-chat-send {
  background: var(--theme-accent, #00D3BD);
  border: none;
  border-radius: 10px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--theme-text-on-accent, #0a1628);
  font-size: 15px;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.pb-chat-send:disabled { opacity: 0.4; cursor: default; }

/* ═══════════════════════════════════════════════════════════
   Mobile / Tablet – max-width 1000px
   Matches Customize Your Build modal mobile layout.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {

  /* ── Backdrop (overlay) ──────────────────────────────── */
  .pb-chat-backdrop {
    display: none;
    position: fixed;
    top: 0;
    bottom: -400px;
    left: 0;
    right: 0;
    background: var(--theme-bg-primary, #0D1117);
    z-index: 1299;
  }
  .pb-chat-backdrop.open {
    display: block;
  }

  /* ── FAB ──────────────────────────────────────────────── */
  .pb-chat-fab {
    right: 16px;
    width: 70px;
    height: 70px;
    font-size: 30px;
  }
  /* MLB assistant FAB — much larger on mobile (thumb-friendly), icon scaled with
     it (~0.68 ratio). Higher specificity + later source order than the base rule
     above, so it wins at this breakpoint. */
  .pb-chat-fab.pb-chat--mlb {
    width: 112px;
    height: 112px;
  }
  .pb-chat-fab.pb-chat--mlb .pb-chat-fab-icon {
    width: 76px;
    height: 76px;
  }

  /* ── Panel → card style, covers bottom nav ───────────── */
  .pb-chat-panel {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 140px);
    bottom: -400px !important;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 960px;
    max-height: none;
    height: auto; /* the top/bottom pair sizes the sheet here — not the base's fixed height */
    margin: 0 auto;
    padding: 0;
    padding-bottom: 400px;
    border-radius: 24px 24px 0 0;
    border: none;
    border-top: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), 0.22);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.4);
  }

  /* ── Header ──────────────────────────────────────────── */
  .pb-chat-header {
    padding: 22px 24px;
    /* Room for the absolutely-positioned close btn (14px right + 60px wide),
       plus 14px so the gap to "New chat" matches this header's own gap. */
    padding-right: 88px;
    position: relative;
    gap: 14px;
  }
  .pb-chat-header-title {
    font-size: 46px;
    font-weight: 700;
  }
  .pb-chat-header-title::before {
    font-size: 40px;
  }
  .pb-chat-header-stats {
    font-size: 22px;
  }
  /* Scale the copy + "New chat" buttons with the rest of the mobile header
     (the page ships no viewport meta, so these are pre-downscale pixels).
     Both sized to the 60px close button they sit beside; the header's 86px
     padding-right keeps "New chat" clear of that absolutely-positioned
     button, so only copy needs a margin. */
  .pb-chat-copy {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    font-size: 26px;
    margin-right: 0;   /* the header's own 14px gap spaces these on mobile */
  }
  .pb-chat-clear {
    height: 60px;
    padding: 0 20px;
    gap: 10px;
    font-size: 24px;
    border-radius: 14px;
    margin-right: 0;
  }
  .pb-chat-clear-icon {
    width: 26px;
    height: 26px;
  }
  .pb-chat-close {
    position: absolute;
    /* Matches the header's 22px top padding so this out-of-flow button lines
       up with the in-flow "New chat" button beside it. */
    top: 22px;
    right: 14px;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    font-size: 36px;
  }

  /* ── Messages ────────────────────────────────────────── */
  .pb-chat-messages {
    padding: 20px 18px;
    gap: 18px;
  }
  .pb-chat-messages::-webkit-scrollbar { width: 6px; }

  .pb-chat-msg {
    max-width: 92%;
    font-size: 46px;
    padding: 20px 24px;
    line-height: 1.45;
    border-radius: 20px;
  }
  .pb-chat-msg-user { border-bottom-right-radius: 6px; }
  .pb-chat-msg-assistant { border-bottom-left-radius: 6px; }

  .pb-chat-msg-assistant code {
    font-size: 38px;
    padding: 2px 8px;
    border-radius: 6px;
  }
  .pb-chat-msg-assistant ul,
  .pb-chat-msg-assistant ol { padding-left: 32px; margin: 8px 0; }
  .pb-chat-msg-assistant li { margin: 4px 0; }

  /* ── Input ───────────────────────────────────────────── */
  .pb-chat-input-wrap {
    padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    gap: 12px;
  }
  .pb-chat-input {
    font-size: 46px;
    padding: 18px 20px;
    border-radius: 14px;
  }
  .pb-chat-send {
    width: 70px;
    height: 70px;
    font-size: 30px;
    border-radius: 14px;
  }

  /* ── Starters (wrapping chips) ─────────────────────────── */
  .pb-chat-starters-track {
    padding: 0 18px 16px;
    gap: 12px;
  }
  .pb-chat-starter {
    font-size: 38px;
    padding: 16px 22px;
    border-radius: 14px;
    white-space: normal;
  }

  /* ── Placeholder ───────────────────────────────────────── */
  .pb-chat-placeholder { padding: 60px 32px; }
  .pb-chat-placeholder-icon { font-size: 60px; }
  .pb-chat-placeholder-text { font-size: 38px; }
  .pb-chat-onboarding { gap: 18px; margin-top: 20px; }
  .pb-chat-onboard-btn { font-size: 34px; padding: 18px 30px; }

  /* ── Add-to-Parlay ───────────────────────────────────── */
  .pb-chat-parlay-legs { gap: 14px; }
  .pb-chat-add-leg {
    font-size: 38px;
    padding: 16px 20px;
    border-radius: 14px;
    gap: 12px;
  }
  .pb-chat-add-all {
    font-size: 38px;
    padding: 16px 20px;
    border-radius: 14px;
    gap: 12px;
  }

  /* ── Follow-up chips ────────────────────────────────── */
  .pb-chat-followups { gap: 12px; padding-top: 8px; }
  .pb-chat-followup {
    font-size: 38px;
    padding: 14px 22px;
    border-radius: 24px;
  }

  /* ── Typing ──────────────────────────────────────────── */
  .pb-chat-typing {
    font-size: 42px;
    padding: 20px 24px;
    border-radius: 20px;
    border-bottom-left-radius: 6px;
  }

  /* ── Usage tag ───────────────────────────────────────── */
  .pb-chat-usage {
    font-size: 22px;
    padding: 4px 0 0 6px;
  }
}