/**
 * Chrome shared by every per-character mode toggle.
 *
 * Loaded by Webcam Mode AND by Spicy Mode, which is the whole reason it is
 * its own file. These rules first lived in bn_chat-modes.css, which only
 * Spicy injects — so on a character with a webcam and no Spicy Mode the
 * wrapper and the "?" were unstyled: no pill, and a default browser button
 * sitting outside it.
 *
 * Anything specific to ONE mode belongs in that mode's sheet, not here.
 */

/* ── Order in the slot ──────────────────────────────────────────────────── */
/*
 * Webcam first, then Spicy.
 *
 * Enforced here rather than by import order, because the two are separate
 * client:only islands portalling into the same slot — whichever hydrates
 * first lands first, which is not something the page controls.
 */
/* Calls first — it is the most direct thing on offer, so it reads first. */
.cm-mode-call   { order: 0; }
.cm-mode-webcam { order: 1; }
.cm-mode-spicy  { order: 2; }
/* The live bar trails whichever toggles are present. */
#chatModesSlot .spicy-live { order: 3; }

/* ── The pill ───────────────────────────────────────────────────────────── */
/*
 * The wrapper IS the pill.
 *
 * The border used to live on the toggle button, which left the "?" stranded
 * outside it. It cannot go inside that button — a button nested in a button
 * is invalid, and the "?" has to be clickable separately from the switch it
 * explains. So the chrome moves out one level and both stay real buttons.
 *
 * The on-state is mirrored onto this element by the components rather than
 * matched with :has(), so the accent does not depend on selector support.
 */
.cm-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--neutral-700);
  background: var(--neutral-800);
  transition: border-color .15s ease, background .15s ease;
}

/* The buttons keep their type and layout, and give up their box. */
.cm-mode > .wcm-toggle,
.cm-mode > .cm-toggle {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}

/* ── The "?" beside a mode toggle ───────────────────────────────────────── */
/*
 * Matches .rel-progress-help beside her name — the same affordance has to
 * look like the same thing, or it reads as a different control.
 */
.cm-info {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid var(--neutral-600, #4a4a4a);
  border-radius: 50%;
  background: transparent;
  color: var(--neutral-500);
  font-family: 'Heebo', sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  transition: color .15s ease, border-color .15s ease;
}
.cm-info:hover,
.cm-info:focus-visible {
  color: #fff;
  border-color: var(--neutral-500);
}

/* Reuses .rel-progress-tip (bn_chat.css, always loaded on a chat page) for
   the panel itself; this only lifts it above the pinned Spicy bar at 950. */
.cm-tip { z-index: 1000; }

/*
 * The price, picked out of the sentence.
 *
 * Same treatment as the current level in the relationship tip — a tinted chip
 * rather than bold text — because it is the one fact in there someone needs
 * to leave with.
 */
.cm-tip-cost {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(204, 149, 255, 0.12);
  color: #cc95ff;
  font-weight: 600;
  white-space: nowrap;
}

/*
 * While a paid Spicy session runs, the other two modes go away entirely.
 *
 * Neither can be used: Webcam would be a second charge competing for the same
 * frame, and Calls is not built. A dimmed control still invites a press and
 * then refuses it — during a session someone is paying for by the minute, the
 * row should hold only what is actually running.
 *
 * `body.spicy-on` is set by SpicyMode for exactly the session's lifetime, so
 * they come back the moment it ends with nothing to restore.
 */
body.spicy-on .cm-mode-webcam,
body.spicy-on .cm-mode-call { display: none; }

/*
 * The dimmed state stays for anything else that marks itself unavailable —
 * and as a fallback for the case above if this stylesheet loads late. It is
 * aria-disabled rather than disabled so the control can still be focused and
 * explain itself.
 */
.cm-mode:has([aria-disabled="true"]) { opacity: .45; }
.cm-mode [aria-disabled="true"] { cursor: not-allowed; }

/* Real-Time Calls. Neutral rather than accented: it is not available yet, so
   it must not compete with the two toggles that actually do something. */
.cm-toggle-call { color: var(--neutral-400); }
.cm-toggle-call:hover { color: #fff; }
.cm-mode-call:hover { border-color: var(--neutral-600); }