/* ============================================================
   v5.18.0 — Desktop chat width modes (compact / wide / xwide)
   ------------------------------------------------------------
   Three desktop widths the user can cycle between via the
   chat-mode-cycle button (same control as mobile).

     • body.chat-w-compact  →  280px (legacy default)
     • body.chat-w-wide     →  380px
     • body.chat-w-xwide    →  480px

   The pitch / broadcast shell reflows because we update the
   CSS custom property --chat-rail-w that the broadcast layout
   reads via padding-right.
   ============================================================ */

:root {
  --chat-rail-w: 280px;
}

/* Apply width via CSS variable so the broadcast shell reflows. */
@media (min-width: 901px) {

  /* Make the broadcast respect the variable (overrides hard 280px in v512.css). */
  body.has-livefeel .broadcast {
    padding-right: var(--chat-rail-w) !important;
  }
  body.has-livefeel #tournamentEntryBtn {
    right: calc(var(--chat-rail-w) + 8px) !important;
  }

  /* Drive the chat panel width from the same variable. */
  .live-feel {
    width: var(--chat-rail-w) !important;
    transition: width 200ms ease, padding 200ms ease;
  }
  .broadcast {
    transition: padding-right 200ms ease;
  }

  /* The three width presets. */
  body.chat-w-compact { --chat-rail-w: 280px; }
  body.chat-w-wide    { --chat-rail-w: 380px; }
  body.chat-w-xwide   { --chat-rail-w: 480px; }

  /* When the chat is running wider, give the feed room to breathe. */
  body.chat-w-wide  .lf-feed,
  body.chat-w-xwide .lf-feed {
    padding: 12px 14px !important;
    gap: 6px !important;
  }
  body.chat-w-wide  .lf-msg,
  body.chat-w-xwide .lf-msg {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    padding: 7px 10px !important;
  }

  /* Resize-by-drag handle pinned to the chat's left edge. */
  .lf-resize-handle {
    position: fixed;
    top: 68px;
    bottom: 0;
    width: 6px;
    margin-left: -3px;          /* JS sets `left` to align with the chat's left edge */
    cursor: ew-resize;
    z-index: 75;
    background: linear-gradient(90deg, transparent, rgba(30,219,138,0.22), transparent);
    opacity: 0;
    transition: opacity 160ms ease;
  }
  .lf-resize-handle:hover,
  .lf-resize-handle.dragging {
    opacity: 1;
  }
  /* Visual notch in the middle so users can find it. */
  .lf-resize-handle::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 2px; height: 36px;
    transform: translate(-50%, -50%);
    background: rgba(30,219,138,0.55);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(30,219,138,0.45);
  }

  /* While the user is mid-drag, suppress the width transition for
     a snappy, frame-perfect resize, then re-enable it after. */
  body.chat-resizing .live-feel,
  body.chat-resizing .broadcast {
    transition: none !important;
  }
}

/* ============================================================
   Cycle-button: re-skin so it works on BOTH desktop and mobile.
   The mobile-only display rules in v5180-chat-modes.css are
   overridden here so the same button shows on desktop too.
   ============================================================ */
.lf-mode-cycle {
  /* Show on every breakpoint (desktop + mobile). */
  display: inline-flex !important;
  align-items: center;
  appearance: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(30,219,138,0.32);
  color: #e7edf5;
  font: 700 10px/1 'Oswald', 'Inter', system-ui, sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 6px;
  min-height: 26px;
  transition: background 120ms ease, border-color 120ms ease;
}
.lf-mode-cycle:hover {
  background: rgba(30,219,138,0.10);
  border-color: rgba(30,219,138,0.55);
}
.lf-mode-cycle:active { transform: translateY(1px); }
.lf-mode-cycle .lf-mode-icon {
  margin-right: 5px;
  font-size: 12px;
  line-height: 1;
  vertical-align: -1px;
  color: #1edb8a;
}

/* On desktop, the cycle button cycles WIDTHS, not modes — make that
   visual difference subtle but real (different focus colour). */
@media (min-width: 901px) {
  .lf-mode-cycle.lf-mode-cycle--desktop .lf-mode-icon { color: #7ec8ff; }
}