/* Predicely — chat overlay bar (chat.js). Ported from the Overlays mockup
   (docs/design/Other Games/Overlays/Overlays.dc.html): dark translucent panels that
   float over any board scheme, bottom tab bar, slide-up panels, collapse pill.
   Colors are deliberately scheme-independent (the mockup's fixed dark surfaces). */

#cb-root { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.has-chatbar .wrap { padding-bottom: 84px; }
/* Token-board MP screens (STB MP) have no .wrap — their scroll body is .stbr-content. */
.has-chatbar .stbr-content { padding-bottom: 84px; }
/* Same for Yahtzee MP (.yzr-content). Scoped under .has-chatbar, which the bar sets on its
   HOST — the MP screen — so solo Yahtzee, which shares .yzr-content but mounts on
   #chat-host, keeps using the body.solo-chat-on rule below and never double-pads. */
.has-chatbar .yzr-content { padding-bottom: 84px; }
/* Global bar mounts on the always-present #chat-host (no .wrap child), so pad the
   browse screens directly when it's up, keeping bottom content clear of the fixed bar. */
body.global-chat-on #games-hub-screen,
body.global-chat-on #game-landing-screen,
body.global-chat-on #store-screen,
body.global-chat-on #lobby-screen,
body.global-chat-on #profile-screen { padding-bottom: 84px; }
/* Solo runs mount the bar on the same #chat-host (ctx 'solo', slice C) — pad the solo game
   screens so the board never sits under the fixed bar. */
body.solo-chat-on #shutbox-game-screen,
body.solo-chat-on #craps-game-screen,
body.solo-chat-on #yahtzee-game-screen,
body.solo-chat-on #pig-game-screen,
body.solo-chat-on #farkle-game-screen,
body.solo-chat-on #bonespire-game-screen,
body.solo-chat-on #backgammon-game-screen,
body.solo-chat-on #ur-game-screen { padding-bottom: 84px; }
/* COLLAPSED (▾): the bar itself is only an overlay, but the reservations above are real —
   and they used to stay at their full 84px after a collapse, so hiding the bar bought empty
   space instead of room. Collapsed, the only thing down there is the 28px expand pill, so
   reserve just that. Every rule above needs its own override: `body.chat-collapsed` adds a
   class to each of these selectors, which is what wins on specificity. Anything that
   MEASURES its space (Backgammon's board) refits off the `resize` chat.js fires on toggle. */
body.chat-collapsed .has-chatbar .wrap,
body.chat-collapsed .has-chatbar .stbr-content,
body.chat-collapsed .has-chatbar .yzr-content,
body.global-chat-on.chat-collapsed #games-hub-screen,
body.global-chat-on.chat-collapsed #game-landing-screen,
body.global-chat-on.chat-collapsed #store-screen,
body.global-chat-on.chat-collapsed #lobby-screen,
body.global-chat-on.chat-collapsed #profile-screen,
body.solo-chat-on.chat-collapsed #shutbox-game-screen,
body.solo-chat-on.chat-collapsed #craps-game-screen,
body.solo-chat-on.chat-collapsed #yahtzee-game-screen,
body.solo-chat-on.chat-collapsed #pig-game-screen,
body.solo-chat-on.chat-collapsed #farkle-game-screen,
body.solo-chat-on.chat-collapsed #bonespire-game-screen,
body.solo-chat-on.chat-collapsed #backgammon-game-screen,
body.solo-chat-on.chat-collapsed #ur-game-screen {
  padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
}

/* ── bottom bar ── */
.cb-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: flex-end; justify-content: center; gap: 8px;
  padding: 10px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 12, 16, .96);
  border-top: 1px solid rgba(255, 255, 255, .07);
  pointer-events: auto;
  transform: translateY(0);
  transition: transform .34s cubic-bezier(.32, .72, .35, 1);
}
.cb-bar.collapsed { transform: translateY(100%); }

.cb-btn {
  height: 42px; padding: 0 22px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .055);
  color: rgba(218, 216, 212, .68);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: all .18s ease;
}
.cb-btn.active {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22);
  color: #e9e8e4; transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.cb-btn-ico { padding: 0; width: 42px; justify-content: center; font-size: 17px; }
/* Game-supplied extras (History / Rules — chat.js opts.extras). Slightly slimmer than the
   Chat button so a 4-button bar still fits a phone width. */
.cb-btn-x { padding: 0 15px; font-size: 13.5px; }

/* ── Arcade: lift the bar off black ──────────────────────────────────────────────
   chat.js sets the resolved --pgr-* tokens on #cb-root and flags .cb-arcade. The fixed dark
   surfaces read as a black slab under a neon cabinet, so tint them with the palette and raise
   the buttons a few shades. Panels get the same lift so the bar and its panels stay one piece.
   Classic keeps the mockup's original surfaces exactly. */
.cb-arcade .cb-bar {
  background: color-mix(in oklch, var(--pgr-accent, #60a5fa) 12%, rgba(26, 30, 44, .96));
  border-top-color: color-mix(in oklch, var(--pgr-accent, #60a5fa) 30%, transparent);
}
.cb-arcade .cb-btn {
  background: color-mix(in oklch, var(--pgr-accent, #60a5fa) 14%, rgba(255, 255, 255, .06));
  border-color: color-mix(in oklch, var(--pgr-accent, #60a5fa) 35%, transparent);
  color: rgba(233, 232, 228, .88);
}
.cb-arcade .cb-btn.active {
  background: color-mix(in oklch, var(--pgr-accent, #60a5fa) 34%, rgba(255, 255, 255, .06));
  border-color: color-mix(in oklch, var(--pgr-accent, #60a5fa) 65%, transparent); color: #fff;
}
.cb-arcade .cb-panel { background: color-mix(in oklch, var(--pgr-accent, #60a5fa) 10%, rgba(22, 26, 38, .97)); }
.cb-arcade .cb-collapse, .cb-arcade .cb-expand {
  background: color-mix(in oklch, var(--pgr-accent, #60a5fa) 16%, rgba(26, 30, 44, .98));
  border-color: color-mix(in oklch, var(--pgr-accent, #60a5fa) 35%, transparent);
}

/* unread glow (mockup: green ring on the Chat button) */
.cb-btn .cb-dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: #35d08e; }
.cb-btn.unread .cb-dot { display: inline-block; }
.cb-btn.unread {
  border-color: rgba(53, 208, 142, .55);
  box-shadow: 0 0 0 2px rgba(53, 208, 142, .8), 0 0 14px rgba(53, 208, 142, .25);
}

/* collapse chevron on the bar + floating expand pill */
.cb-collapse {
  position: absolute; top: -13px; right: 22px; width: 26px; height: 26px;
  border-radius: 50%; background: rgba(20, 22, 28, .98);
  border: 1px solid rgba(255, 255, 255, .14); color: rgba(218, 216, 212, .75);
  font-size: 12px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.cb-expand {
  position: absolute; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 50%;
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  width: 40px; height: 28px; border-radius: 14px;
  background: rgba(20, 22, 28, .98); border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(218, 216, 212, .75); font-size: 12px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  transition: transform .32s cubic-bezier(.32, .72, .35, 1), opacity .24s ease;
}
.cb-expand.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }

/* ── slide-up panels ── */
.cb-panel {
  position: absolute; bottom: 72px; left: 50%;
  width: min(calc(100% - 32px), 500px); transform: translate(-50%, 14px);
  background: rgba(12, 14, 20, .97);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; overflow: hidden;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.cb-panel.open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.cb-panel-head {
  padding: 12px 18px 10px; border-bottom: 1px solid rgba(255, 255, 255, .07);
  display: flex; align-items: center; justify-content: space-between; user-select: none;
}
.cb-panel-label { font-size: 11px; font-weight: 700; color: rgba(122, 124, 130, .75); letter-spacing: .11em; }
/* opts.panelActions — rare/destructive actions parked in the panel head instead of the bar
   (see chat.js). Deliberately quiet: it should be findable, not inviting. */
.cb-pact {
  background: none; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px;
  padding: 4px 11px; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 700;
  color: rgba(122, 124, 130, .85); letter-spacing: .04em;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: color .2s, border-color .2s;
}
.cb-pact:hover { color: #E24B4A; border-color: rgba(226, 75, 74, .5); }

/* Local/Global tabs */
.cb-tabs { display: flex; gap: 18px; }
.cb-tab {
  background: none; border: none; padding: 2px 2px 6px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  color: rgba(122, 124, 130, .6); border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.cb-tab.on { color: #e9e8e4; border-bottom-color: #35d08e; }

/* message log */
.cb-log { overflow-y: auto; max-height: min(260px, 38vh); user-select: none; }
.cb-msg { padding: 10px 18px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.cb-msg:last-child { border-bottom: none; }
.cb-msg.mine { background: rgba(53, 208, 142, .04); }
.cb-msg-who { font-size: 10px; font-weight: 600; color: rgba(122, 124, 130, .65); margin-bottom: 4px; }
.cb-msg.mine .cb-msg-who { color: #35d08e; }
.cb-msg-body { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cb-msg-text { font-size: 15px; font-weight: 700; color: #e9e8e4; }
.cb-msg-emoji { font-size: 22px; line-height: 1; flex-shrink: 0; }
.cb-empty { padding: 22px 18px; text-align: center; font-size: 12px; color: rgba(122, 124, 130, .6); }

/* 📣 Announce invite (Slice D): "Anyone want to play <game>? [▶ Join]". The chip rides
   the existing join pipeline; the host sees a non-clickable "📣 Announced" instead. */
.cb-msg-invite .cb-msg-body { flex-wrap: wrap; gap: 8px; }
.cb-join-chip {
  padding: 6px 14px; border-radius: 9px; font-family: inherit; font-size: 13px; font-weight: 700;
  border: 1px solid rgba(53, 208, 142, .55); background: rgba(53, 208, 142, .16); color: #7fe7bd;
  cursor: pointer; white-space: nowrap; transition: background .1s, border-color .1s;
}
button.cb-join-chip:hover { background: rgba(53, 208, 142, .28); border-color: rgba(53, 208, 142, .8); }
.cb-join-chip.cb-join-mine { cursor: default; border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: rgba(122, 124, 130, .8); }
/* Armed state of the two-tap join guard (solo runs: joining leaves the run behind). */
.cb-join-chip.cb-join-armed {
  border-color: rgba(255, 176, 76, .8); background: rgba(255, 176, 76, .18); color: #ffcb84;
  white-space: normal;
}

/* ── send panel ── */
.cb-send-sec { padding: 10px 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.cb-send-label { font-size: 10px; font-weight: 700; color: rgba(122, 124, 130, .55); letter-spacing: .08em; margin-bottom: 8px; }
.cb-row {
  /* Wrap into lines + vertical scroll (owner playtest 2026-07-23: a horizontal
     overflow row can't be scrolled with a PC mouse; the mockup was vertical anyway).
     Mouse wheel + touch both scroll vertically natively — no drag handling needed. */
  display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 10px;
  max-height: 122px; overflow-y: auto;
}
.cb-pill {
  padding: 7px 13px; border-radius: 9px; cursor: pointer; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .05);
  color: rgba(218, 216, 212, .8); font-family: inherit; font-size: 13px; font-weight: 600;
  white-space: nowrap; transition: background .1s, border-color .1s, color .1s;
}
.cb-pill.sel { border-color: rgba(53, 208, 142, .55); background: rgba(53, 208, 142, .16); color: #7fe7bd; }
.cb-emoji {
  width: 42px; height: 42px; border-radius: 11px; cursor: pointer; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .05);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  transition: background .1s, border-color .1s;
}
.cb-emoji.sel { border-color: rgba(53, 208, 142, .55); background: rgba(53, 208, 142, .16); }
.cb-send-foot { padding: 12px 16px 14px; }
.cb-send-go {
  width: 100%; height: 44px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .03); color: rgba(122, 124, 130, .4);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: default;
  transition: all .15s;
}
.cb-send-go:not(:disabled) {
  border-color: #1f8f66;
  background: linear-gradient(180deg, #1c6c50, #14513c);
  color: #a5eccd; cursor: pointer;
}