/*
 * watch-sub-modals.css -- the Subscribe and Gift-a-Sub dialogs on the watch page.
 *
 * -- WHY THIS IS A STATIC STYLESHEET -------------------------------------------------------
 *
 * It is NOT part of the Tailwind build. public/build/app.css is compiled by a separate manual
 * step, so a utility class that is new to this repo renders as nothing until somebody runs that
 * build -- which means a dialog built out of fresh utilities ships broken and looks fixed only
 * later. These two dialogs are the money screens; they do not get to look broken in between.
 *
 * public/css/clips.css already set this precedent and says so in its own header. Same rule here:
 * hand-written, served as-is, no build step between writing it and seeing it.
 *
 * -- ASCII ONLY, DELIBERATELY ---------------------------------------------------------------
 *
 * nginx serves text/css with no charset here, so a non-ASCII byte in a `content:` string comes
 * out as mojibake. Every glyph this file draws is a border, a gradient or an SVG from the markup.
 *
 * -- NO backdrop-filter ----------------------------------------------------------------------
 *
 * Not because it would not work, but because it costs a full-surface repaint per frame behind a
 * panel that sits over a PLAYING VIDEO. Solid alpha reads the same here and does not fight the
 * decoder for the compositor.
 */

/* ============================================================================================
   THE SHELL
   ============================================================================================ */

/*
 * The frame is anchored to the PLAYER, not the viewport: see public/js/watch-player-anchor.js.
 * Every var has a full-viewport fallback, so with that script absent -- or on a phone, where it
 * clears them on purpose -- this collapses to an ordinary full-screen sheet.
 *
 * -- 🔴 THERE IS NO SCRIM, AND THE FRAME DOES NOT TAKE CLICKS ---------------------------------
 *
 * The panel docks to the player's RIGHT EDGE at full player height, and the stream keeps playing
 * in the clear beside it. So this element is a positioning frame and nothing else:
 * `pointer-events: none` hands every click straight through to the video underneath, and only
 * the panel itself takes them back. Dimming the video, or swallowing clicks on it, would mean
 * deciding whether to subscribe to a stream you can no longer watch or pause.
 *
 * That is also why there is no click-outside-to-close: there is nothing to click outside ON.
 * Escape, the X and the footer's Close are the three ways out, which is what the dialog's own
 * `wire:keydown.escape.window` and buttons provide.
 */
.xv-money-scrim {
  position: fixed;
  top: var(--xv-anchor-top, 0px);
  left: var(--xv-anchor-left, 0px);
  width: var(--xv-anchor-width, 100vw);
  height: var(--xv-anchor-height, 100vh);
  z-index: 100;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  pointer-events: none;
}

.xv-money-panel {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: #f4f4f5;
  background: #121216;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.5);
  animation: xv-money-slide 190ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes xv-money-slide {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .xv-money-panel { animation: none; }
}

/* The one scrolling region. The banner and the footer are pinned so the price and the button
   never scroll out of reach of somebody deciding whether to spend money. */
.xv-money-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/*
 * 🔴 LOAD-BEARING, AND IT COST AN HOUR. This is a COLUMN flex container with a bounded height, so
 * its children take `flex-shrink: 1` from the initial value and the browser SQUASHES them to fit
 * rather than overflowing -- which means `overflow-y: auto` above never fires, because nothing
 * ever overflows. The visible symptom was the Gift 'em All row collapsing to a 30px strip with
 * its own copy and button clipped away inside it (the row is `overflow: hidden`), and the tile
 * grid losing its last row the same way.
 *
 * Pinning every child to its natural height is what turns the squash back into a scroll.
 */
.xv-money-body > * { flex: 0 0 auto; }

.xv-money-body::-webkit-scrollbar { width: 10px; }
.xv-money-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
  background-color: rgba(255, 255, 255, 0.14);
}

/* ============================================================================================
   THE BANNER
   ============================================================================================ */

.xv-money-banner {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 48px 18px 18px;
  overflow: hidden;
  background:
    radial-gradient(120% 160% at 85% -30%, rgba(236, 72, 153, 0.55) 0%, rgba(236, 72, 153, 0) 60%),
    linear-gradient(135deg, #3b1174 0%, #51187f 48%, #6d1d78 100%);
}

/* A soft sheen across the banner. Pure decoration, so it is a pseudo-element and never a node
   the layout has to account for. */
.xv-money-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

.xv-money-banner__art {
  position: relative;
  flex: 0 0 auto;
  z-index: 1;
}

.xv-money-banner__avatar {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  object-fit: cover;
  background: #1c1024;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28), 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* The initial, for a creator with no avatar. Same box as the image so the banner never reflows
   between the two cases. */
.xv-money-banner__initial {
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  color: #e9d5ff;
  background: #2a0f45;
}

.xv-money-banner__live {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: #e11d48;
  box-shadow: 0 0 0 2px rgba(18, 18, 22, 0.75);
}

.xv-money-banner__text {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
}

.xv-money-banner__title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
}

.xv-money-banner__name { color: #f5d0fe; }

.xv-money-banner__sub {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

.xv-money-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(0, 0, 0, 0.26);
  transition: background 120ms ease, color 120ms ease;
}

.xv-money-close:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
}

/* ============================================================================================
   THE HERO ROW  (Gift 'em All)
   ============================================================================================ */

.xv-money-hero {
  position: relative;
  overflow: hidden;
  padding: 14px 15px;
  border-radius: 13px;
  border: 1px solid rgba(217, 70, 239, 0.3);
  background:
    radial-gradient(90% 180% at 100% 0%, rgba(236, 72, 153, 0.3) 0%, rgba(236, 72, 153, 0) 62%),
    linear-gradient(100deg, rgba(88, 28, 135, 0.6) 0%, rgba(131, 24, 67, 0.28) 100%);
}

.xv-money-hero__title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}

.xv-money-hero__copy {
  margin: 4px 0 0;
  max-width: 68%;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(244, 244, 245, 0.8);
}

/* The oversized gift glyph bleeding off the corner. aria-hidden in the markup; it is texture. */
.xv-money-hero__art {
  position: absolute;
  right: -14px;
  bottom: -20px;
  width: 104px;
  height: 104px;
  color: rgba(244, 114, 182, 0.22);
  pointer-events: none;
}

/* ============================================================================================
   BUTTONS
   ============================================================================================ */

.xv-money-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: transform 110ms ease, box-shadow 140ms ease, filter 120ms ease, background 120ms ease;
}

.xv-money-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.xv-money-btn--primary {
  background: linear-gradient(97deg, #9333ea 0%, #d946ef 52%, #ec4899 100%);
  box-shadow: 0 8px 22px -8px rgba(217, 70, 239, 0.9);
}

.xv-money-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px rgba(217, 70, 239, 1);
}

.xv-money-btn--primary:active:not(:disabled) { transform: translateY(0); }

.xv-money-btn--primary:disabled { box-shadow: none; }

.xv-money-btn--ghost {
  color: #d4d4d8;
  background: rgba(255, 255, 255, 0.07);
}

.xv-money-btn--ghost:hover:not(:disabled) {
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
}

.xv-money-btn--hero { margin-top: 11px; }

.xv-money-btn__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* ============================================================================================
   MODE ROW  -- community vs one named viewer
   ============================================================================================ */

.xv-money-moderow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.xv-money-mode {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: #71717a;
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms ease;
}

.xv-money-mode:hover { color: #d4d4d8; }
.xv-money-mode.is-on { color: #fff; }

/* The price chip where a tier selector would sit on another platform. Xive channels have ONE
   plan, so this states the creator's real price instead of offering a choice. */
/*
 * 🔴 THE NAME TRUNCATES, THE PRICE NEVER DOES. Ellipsising the chip as a whole cut it at
 * "Channel Subscription . $5..." -- hiding the one number the viewer is here to read. So the
 * chip is a flex row: the name is the only part allowed to shrink, and the price is pinned.
 */
.xv-money-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  flex: 0 1 auto;
  min-width: 0;
  padding: 5px 10px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  color: #e4e4e7;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  white-space: nowrap;
}

.xv-money-chip__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xv-money-chip__price { flex: 0 0 auto; }

.xv-money-chip__sep { flex: 0 0 auto; color: #71717a; }

.xv-money-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #e879f9;
  cursor: pointer;
  transition: color 120ms ease;
}

.xv-money-link:hover { color: #f5d0fe; }
.xv-money-link.is-on { color: #fff; }
.xv-money-link__icon { width: 15px; height: 15px; }

.xv-money-note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #8b8b94;
}

/* ============================================================================================
   QUANTITY TILES
   ============================================================================================ */

.xv-money-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.xv-money-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 11px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  font: inherit;
  color: #e4e4e7;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 110ms ease;
}

.xv-money-tile:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.xv-money-tile.is-on {
  border-color: #d946ef;
  background: linear-gradient(160deg, rgba(217, 70, 239, 0.2) 0%, rgba(147, 51, 234, 0.1) 100%);
  box-shadow: 0 0 0 1px rgba(217, 70, 239, 0.45), 0 8px 20px -12px rgba(217, 70, 239, 0.9);
}

.xv-money-tile__icon {
  width: 20px;
  height: 20px;
  color: #a1a1aa;
  transition: color 120ms ease;
}

.xv-money-tile.is-on .xv-money-tile__icon { color: #f0abfc; }

.xv-money-tile__count {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.xv-money-tile--custom { cursor: default; }
.xv-money-tile--custom:hover { transform: none; }

.xv-money-tile__input {
  width: 100%;
  padding: 3px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font: inherit;
  font-size: 13px;
  text-align: center;
}

.xv-money-tile__input:focus {
  outline: none;
  border-color: #d946ef;
  box-shadow: 0 0 0 2px rgba(217, 70, 239, 0.28);
}

.xv-money-tile__hint {
  font-size: 10px;
  color: #71717a;
}

/* ============================================================================================
   NAMED-RECIPIENT ROW
   ============================================================================================ */

.xv-money-find { display: flex; gap: 8px; }

.xv-money-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
  font: inherit;
  font-size: 13px;
}

.xv-money-input::placeholder { color: #71717a; }

.xv-money-input:focus {
  outline: none;
  border-color: #d946ef;
  box-shadow: 0 0 0 2px rgba(217, 70, 239, 0.26);
}

.xv-money-verdict {
  margin: 8px 0 0;
  font-size: 11.5px;
  font-weight: 600;
}

.xv-money-verdict--ok  { color: #4ade80; }
.xv-money-verdict--bad { color: #fb7185; }

/* ============================================================================================
   MILESTONE LADDER
   ============================================================================================ */

.xv-money-ladder {
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
}

.xv-money-ladder__caption {
  margin: 0;
  font-size: 11.5px;
  color: #a1a1aa;
}

.xv-money-ladder__row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
}

.xv-money-ladder__icon { width: 15px; height: 15px; flex: 0 0 auto; color: #e879f9; }

.xv-money-ladder__track {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.xv-money-ladder__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #a855f7 0%, #ec4899 100%);
  box-shadow: 0 0 10px rgba(217, 70, 239, 0.6);
  transition: width 320ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.xv-money-ladder__goal {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  color: #a1a1aa;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================================
   TOTAL / MESSAGES
   ============================================================================================ */

.xv-money-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.05) 0%, rgba(168, 85, 247, 0.09) 100%);
}

.xv-money-total__label { font-size: 12.5px; color: #a1a1aa; }

.xv-money-total__value {
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.xv-money-warn {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #fbbf24;
}

.xv-money-error {
  margin: 0;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 12.5px;
  color: #fecdd3;
  background: rgba(190, 18, 60, 0.18);
  border: 1px solid rgba(244, 63, 94, 0.32);
}

.xv-money-empty {
  margin: 0;
  font-size: 13px;
  color: #a1a1aa;
}

/* ============================================================================================
   FOOTER
   ============================================================================================ */

.xv-money-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.22);
}

/* ============================================================================================
   SUBSCRIBE-ONLY: THE PERKS
   ============================================================================================ */

.xv-money-perk {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
}

.xv-money-perk__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.xv-money-perk__icon { width: 16px; height: 16px; flex: 0 0 auto; color: #e879f9; }

.xv-money-perk__copy {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #8b8b94;
}

.xv-money-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.xv-money-emote {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.xv-money-emote img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.xv-money-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 58px;
}

.xv-money-badge img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.xv-money-badge__label {
  font-size: 9.5px;
  line-height: 1.2;
  text-align: center;
  color: #8b8b94;
}

/* The subscribed state: nothing left to buy, so the panel says so instead of drawing a price. */
.xv-money-held {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #86efac;
  background: rgba(22, 101, 52, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.xv-money-held__icon { width: 17px; height: 17px; flex: 0 0 auto; }

/* ============================================================================================
   NARROW SCREENS
   -- the anchor vars are unset below 1024px (see watch-player-anchor.js), so the scrim is the
   whole viewport again and the panel gets the room back.
   ============================================================================================ */

@media (max-width: 640px) {
  .xv-money-panel {
    width: 100%;
    border-left: 0;
  }

  .xv-money-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .xv-money-hero__copy { max-width: 100%; }
  .xv-money-hero__art { display: none; }
}