:root {
  --font-ui: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Inter, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-strong: rgba(255, 255, 255, 0.985);
  --surface-soft: #f8fbff;
  --surface-tint: #eef6ff;
  --border: rgba(80, 113, 145, 0.10);
  --text: #16202c;
  --muted: #71869b;
  --shadow: 0 22px 52px rgba(103, 138, 176, 0.10);
  --shadow-soft: 0 10px 24px rgba(103, 138, 176, 0.07);
  --blue-dark: #4f95d8;
  --blue-soft: #eaf5ff;
  --online: #41c16b;
  --accent: linear-gradient(135deg, #ddefff 0%, #c6e2ff 100%);
  --accent-ink: #17334d;
  --bubble: rgba(255, 255, 255, 0.99);
  --bubble-own: #edf7ff;
  --bubble-system: #f3f9ff;
}

* {
  box-sizing: border-box;
  min-width: 0;
}

html,
body {
  margin: 0;
  min-height: 100%;
  height: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  overflow-y: auto;
  font-family: var(--font-ui);
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(223, 240, 255, 0.95), rgba(223, 240, 255, 0) 26%),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, #f9fcff 0%, #eef5fb 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Form controls do NOT inherit fonts by default — without this, every
   button/input that forgot `font: inherit` renders in the browser's UA
   font instead of the site face. Class-level overrides (e.g. the
   mono-font inputs) still win over this element-level rule. */
button, input, select, textarea {
  font-family: var(--font-ui);
}

button,
input {
  font: inherit;
}

.hidden {
  display: none !important;
}

/* Authentication button visibility control */
/* Buttons are hidden by default with .hidden class in HTML */
/* They get shown/hidden via JS toggling the .hidden class based on auth state */

.window {
  max-width: 1520px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.topbar,
.session-strip,
.sidebar,
.room-header,
.live-panel,
.message-log,
.message-form,
.emoji-tray,
.auth-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 28px;
}

.topbar {
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.brand-mark-shell {
  flex: 0 0 auto;
  width: 214px;
  height: 84px;
  border-radius: 22px;
  background: linear-gradient(135deg, #92c6fb 0%, #6eb2f2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 10px 24px rgba(96, 148, 201, 0.15);
  padding: 10px 14px;
}

.brand-logo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 184px;
  max-height: 62px;
  object-fit: contain;
  object-position: center center;
  flex: 0 0 auto;
}

.brand-copy {
  min-width: 0;
}

.brand-eyebrow,
.panel-heading,
.auth-form label,
.soft-badge,
.live-badge,
.message-system-label,
.nick-role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-eyebrow,
.panel-heading,
.auth-form label,
.nick-role,
.panel-subtext,
.title-detail,
.room-topic,
.legend,
.channel-topic,
.auth-copy,
.live-meta,
.message-system-time,
.status-message.error {
  color: var(--muted);
}

.brand-headline {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-top: 2px;
  max-width: 720px;
}

.brand-subtitle {
  margin-top: 4px;
  max-width: 720px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.titlebar-right,
.session-strip,
.session-pill,
.sidebar-head,
.room-badges,
.names-heading,
.user-copy,
.channel-copy,
.message-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-heading-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.panel-hash {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
}

.titlebar-right {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.session-strip {
  padding: 8px 12px;
  justify-content: space-between;
  gap: 8px;
}

.session-pill {
  min-width: 0;
  background: var(--blue-soft);
  border: 1px solid rgba(90, 167, 255, 0.16);
  border-radius: 999px;
  padding: 8px 12px;
}

.title-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.status-light {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--online);
  box-shadow: 0 0 0 5px rgba(65, 193, 107, 0.14);
  flex: 0 0 auto;
}

.title-text {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.title-detail,
.panel-subtext {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guest-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

.guest-notice strong,
.guest-remaining {
  color: var(--text);
}

.theme-button,
.message-form button,
.auth-form button,
.tab,
.close-button,
.emoji-button {
  border: 1px solid transparent;
  background: var(--surface-tint);
  color: var(--text);
  border-radius: 999px;
  padding: 11px 15px;
  cursor: default;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  min-width: 0;
  white-space: normal;
  text-align: center;
}

.message-form button[type="submit"],
.auth-form button,
.tab.is-active,
.theme-button.is-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: rgba(90, 167, 255, 0.12);
  font-size: 13px !important;
}

.theme-button:hover,
.message-form button:hover,
.auth-form button:hover,
.tab:hover,
.close-button:hover,
.emoji-button:hover,
.channel-item:hover,
.emoji-chip:hover,
.user-item:hover {
  transform: translateY(-1px);
}

.chat-shell {
  display: grid;
  /* Channels panel widened from 184→220 so room titles ("general",
     "off-topic") and topics ("Operator & owner chat", "VIP fan room")
     stop wrapping on standard desktop widths. */
  grid-template-columns: 220px minmax(0, 1fr) 196px;
  gap: 12px;
  min-height: 0;
  height: calc(100vh - 166px);
  max-height: calc(100vh - 166px);
  align-items: stretch;
}

.sidebar,
.main-column,
.users-panel {
  min-height: 0;
  max-height: 100%;
}

.sidebar {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.main-column {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.channel-list,
.user-list,
.message-log {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.channel-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.channel-item {
  width: 100%;
  display: flex;
  gap: 0;
  align-items: center;
  text-align: left;
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,250,255,0.96));
  border: 1px solid rgba(95, 140, 186, 0.14);
  border-radius: 14px;
  padding: 8px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
  cursor: default;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

/* Live "N people in this room" badge on the right edge of each room row. */
.channel-occupancy{
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 800;
  color: #4b7bab;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(90, 167, 255, 0.12);
  border: 1px solid rgba(90, 167, 255, 0.18);
}
.channel-occupancy[hidden]{ display: none; }

.channel-item.active {
  background: linear-gradient(180deg, #e8f3ff, #dcecff);
  border-color: rgba(90, 167, 255, 0.28);
  box-shadow: 0 10px 22px rgba(96, 148, 201, 0.12);
}

.channel-avatar,
.room-avatar,
.message-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--blue-dark);
  background: var(--blue-soft);
}

.channel-avatar {
  font-family: var(--font-mono);
  font-size: 14px;
}

.channel-copy {
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.channel-item strong {
  display: block;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.channel-item .channel-copy {
  width: 100%;
}

.channel-topic {
  display: block;
  font-size: 12px;
  line-height: 1.3;
}

.room-header {
  flex: 0 0 auto;
  padding: 6px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 40px;
}

.room-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.room-heading-text{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
}

.room-avatar {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #dcecff 0%, #b9ddff 100%);
  color: var(--blue-dark);
  font-family: var(--font-mono);
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  flex: 0 0 auto;
}

.room-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height:1.2;
  color: var(--accent-ink);
  text-transform: lowercase;
}

.room-topic {
  font-size: 11px;
  line-height:1.3;
  color: var(--muted);
}

.room-badges{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.room-badges-row{
  display:flex;
  gap:8px;
  align-items:center;
}

.soft-badge,
.live-badge {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height:1.2;
}

.soft-badge {
  background: rgba(120, 168, 224, 0.16);
  color: var(--blue-dark);
}
/* Admin channel badge — red lock aesthetic, slotted in next to the
   channel-title area. */
.soft-badge.room-badge-admin {
  background: linear-gradient(135deg, #ffe5e5 0%, #ffd6d6 100%);
  color: #8a1f1f;
  border: 1px solid rgba(140, 30, 30, 0.18);
  font-weight: 700;
  letter-spacing: 0.4px;
}

.live-badge {
  background: linear-gradient(135deg, #a6d0ff 0%, #7cbcff 100%);
  color: var(--accent-ink);
}

.live-panel {
  flex: 0 0 auto;
  padding: 14px;
}

.live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  margin-top: 10px;
}

.video-frame-wrap,
.live-meta,
.user-list {
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 22px;
}

.video-frame-wrap {
  overflow: hidden;
}

.video-frame {
  width: 100%;
  min-height: 350px;
  background: linear-gradient(135deg, #b8dbff 0%, #89c3ff 100%);
}

.live-meta {
  padding: 14px;
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.live-donate-wrap {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.live-donate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe2e2 0%, #ffc7c7 100%);
  border: 1px solid rgba(209, 98, 98, 0.22);
  box-shadow: 0 8px 18px rgba(196, 61, 61, 0.12);
  color: #7f1f1f;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.live-donate-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(196, 61, 61, 0.18);
  background: linear-gradient(135deg, #ffd0d0 0%, #ffb0b0 100%);
}

.live-donate-icon {
  font-size: 15px;
  line-height: 1;
}

.message-log {
  flex: 1 1 auto;
  min-height: 240px;
  padding: 14px 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.95)),
    radial-gradient(circle at top left, rgba(220, 236, 255, 0.5), rgba(220, 236, 255, 0) 25%),
    #f6fbff;
}

.message-row {
  display: flex;
  /* Avatar rides at the TOP of the row, level with the username, so
     it's easy to see who wrote what (was flex-end = photo at the
     bottom next to the reaction bar). */
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 9px;
  /* Anchor for the floating action bar. */
  position: relative;
}

.message-row.is-own {
  justify-content: flex-end;
}

/* The avatar leads the meta row on BOTH sides — [photo] Name Time … —
   (the old order:2 mirror predates the avatar moving into the meta row). */
.message-row.is-own .message-avatar {
  order: 0;
}

.message-row.is-own .message-stack {
  align-items: flex-end;
}

.message-avatar {
  font-size: 13px;
}

.message-avatar.is-op,
.nick-prefix.is-op {
  background: linear-gradient(135deg, #8fc5ff 0%, #72b5ff 100%);
  color: var(--accent-ink);
}

.message-avatar.is-voice,
.nick-prefix.is-voice {
  background: #eef6ff;
  color: var(--blue-dark);
}

.message-avatar.is-own {
  background: #dcecff;
  color: var(--blue-dark);
}

.message-stack {
  max-width: min(92%, 760px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.message-meta {
  gap: 8px;
  font-size: 12px;
}

.message-user {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 13px !important;
  /* Left-click starts a reply (@name in the input); beats the inline
     cursor:context-menu the right-click binding sets. */
  cursor: pointer !important;
}
.message-user:hover {
  text-decoration: underline;
}

.message-time {
  font-size: 11px !important;
  color: var(--muted);
}

.message-bubble {
  background: var(--bubble);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  border-radius: 20px 20px 20px 10px;
  padding: 8px 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  font-size: 13px !important;
  /* Hug the content — .message-stack is a flex column whose default
     align-items:stretch made short bubbles inflate to the width of the
     meta row above (name + time + Edit/Delete). */
  width: fit-content;
  max-width: 100%;
}

.message-row.is-own .message-bubble {
  background: var(--bubble-own);
  border-radius: 20px 20px 10px 20px;
}

.message-system-card {
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--bubble-system);
  border: 1px solid rgba(90, 167, 255, 0.12);
  font-size: 12px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.message-system-label {
  color: var(--blue-dark);
}

.message-system-body {
  color: var(--text);
  overflow-wrap: anywhere;
  /* Multi-line system output (e.g. the /id dossier) keeps its layout
     instead of collapsing into one run-on paragraph. */
  white-space: pre-wrap;
}

.message-form {
  flex: 0 0 auto;
  padding: 8px 10px 10px;
  display: grid;
  /* Input + up to 5 buttons (gift, VIP photo, gif, emoji, send). Hidden
     buttons (no photo perk) drop out of the grid; the spare auto track
     just collapses to 0, so Send always stays inline at the right end. */
  grid-template-columns: minmax(0, 1fr) repeat(5, auto);
  gap: 6px;
  align-items: center;
  position: sticky;
  bottom: 0;
  z-index: 4;
}

.message-form input,
.auth-form input {
  width: 100%;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(90, 167, 255, 0.14);
  background: var(--surface-strong);
  color: var(--text);
  outline: none;
  font-size: 13px !important;
}

/* Composer matches the chat bubbles (12px) — auth inputs stay 13px. */
.message-form input {
  font-size: 12px !important;
}

.message-form input:focus,
.auth-form input:focus {
  border-color: rgba(90, 167, 255, 0.34);
  box-shadow: 0 0 0 4px rgba(124, 188, 255, 0.12);
}

.message-form button[type="submit"] {
  padding: 11px 18px;
  border-radius: 999px;
}

.gif-button,
.gif-search-toggle,
.emoji-button {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 16px;
}

.gif-button {
  background: var(--surface-tint);
}

.emoji-button {
  font-size: 16px;
}

.emoji-tray {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  position: relative;
  z-index: 3;
}

.emoji-chip {
  border: 1px solid rgba(90, 167, 255, 0.12);
  background: #fff;
  padding: 9px 11px;
  border-radius: 16px;
  cursor: default;
  font-size: 18px;
}

.user-list {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}


.user-list {
  flex: 1 1 auto;
}

.admin-panel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--surface-strong);
  border: 1px solid rgba(79, 149, 216, 0.16);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}

.admin-panel-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 2px 2px 8px;
  border-bottom: 1px solid rgba(79, 149, 216, 0.12);
  margin-bottom: 2px;
}

.admin-panel-title {
  /* Match the eyebrow style used elsewhere in the app (e.g. "ONLINE NOW"
   * in the user list panel) — small, bold, uppercase, wide letter
   * spacing. Centered on the top row. */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #17334d;
  text-align: center;
  flex: 1 1 auto;
}

.admin-panel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #dcecff 0%, #bedcff 100%);
  color: #245f98;
  border: 1px solid rgba(79, 149, 216, 0.16);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.admin-stat {
  padding: 7px 9px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
  border: 1px solid rgba(79, 149, 216, 0.12);
}

.admin-stat-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-stat-value {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #245f98;
}

.admin-panel-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-shortcut {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(79, 149, 216, 0.14);
  background: #fff;
  color: #356ea8;
  cursor: default;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.admin-shortcut:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #e4f1ff 0%, #cfe5ff 100%);
  border-color: rgba(79, 149, 216, 0.22);
}

.admin-log {
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}

.admin-log-entry {
  padding: 10px 11px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(79, 149, 216, 0.10);
}

.admin-log-summary {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}
.admin-log-action {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  vertical-align: 1px;
}

.admin-log-time {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.admin-log-empty {
  padding: 12px;
  border-radius: 16px;
  background: rgba(79, 149, 216, 0.06);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

/* Live status bar — sticky pill + compact recent-mod log feed.
   Renders above the admin tab strip; only visible to OWNER / SOP / AOP
   (the client-side renderStatusBar() also gates this, but hidden
   here is the default so non-staff never see a flicker). */
.admin-status-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(213, 235, 255, 0.52);
  border: 1px solid rgba(79, 149, 216, 0.16);
  color: #2f6fae;
  font-size: 11.5px;
  line-height: 1.4;
  margin: -2px 0 6px;
  max-width: 100%;
  min-width: 0;
}
.admin-status-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}
.admin-status-bar-row .admin-status-pill {
  flex: 1 1 auto;
  min-width: 0;
}
.admin-status-recent-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(79, 149, 216, 0.10);
  border: 1px solid rgba(79, 149, 216, 0.18);
  color: #2f6fae;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
}
.admin-status-recent-badge:hover {
  background: rgba(79, 149, 216, 0.16);
}
.admin-status-recent-empty {
  cursor: default;
  opacity: 0.65;
}
.admin-status-recent-badge:hover.admin-status-recent-empty {
  background: rgba(79, 149, 216, 0.10);
}

/* Hover popover — opens below the bar with the full recent moderation
   list and the verbose throttle body. Kept narrow so it doesn't dominate
   the chat view. */
.admin-status-popover {
  position: fixed;
  z-index: 80;
  background: var(--surface-strong);
  border: 1px solid rgba(79, 149, 216, 0.22);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(80, 113, 145, 0.16);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  max-height: 360px;
  overflow-y: auto;
}
.admin-status-popover-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-status-popover-heading {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-status-popover-log {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}

.admin-status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(79, 149, 216, 0.18);
}
.admin-status-pill-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 10px;
  color: #fff;
  text-transform: uppercase;
}
.status-bar-ok    .admin-status-pill-label { background: #10b981; }
.status-bar-warm  .admin-status-pill-label { background: #f59e0b; }
.status-bar-hot   .admin-status-pill-label { background: #ef4444; }
.admin-status-pill-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-status-log {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 110px;
  overflow-y: auto;
}
.admin-status-log-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--text);
}
.admin-status-log-row .admin-log-action {
  font-size: 9px;
  padding: 1px 6px;
}
.admin-status-log-when {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
}
.admin-status-log-empty {
  font-size: 11px;
  color: var(--muted);
  padding: 2px 4px;
}

.admin-ticket-detail-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 4px;
  scroll-behavior: smooth;
}
.admin-ticket-detail-log .support-msg-bubble {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

/* Server roles panel (AOP / SOP) inside the admin Mod Tools tab.
   Glass / blur aesthetic matching the existing admin-panel style. */
.admin-roles {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(90, 167, 255, 0.15);
}
.admin-roles-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
}
.admin-roles-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.admin-roles-label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #5aa7ff;
  text-transform: uppercase;
}
.admin-roles-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-roles-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(90, 167, 255, 0.08);
  border: 1px solid rgba(90, 167, 255, 0.20);
  min-width: 0;
}
.admin-roles-avatar {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #8ec1ff 0%, #4a93ff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.admin-roles-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.admin-roles-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-roles-meta {
  font-size: 10px;
  color: rgba(120, 140, 160, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-roles-list li button {
  flex: none;
  margin-left: auto;
  background: transparent;
  border: none;
  color: rgba(255, 99, 99, 0.85);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 50%;
  transition: background 140ms ease, color 140ms ease;
}
.admin-roles-list li button:hover {
  color: #ff5a5a;
  background: rgba(255, 99, 99, 0.10);
}
.admin-roles-list .admin-roles-empty {
  font-size: 11px;
  color: rgba(120, 140, 160, 0.7);
  font-style: italic;
  background: none;
  border: none;
  padding: 2px 0;
}
.admin-roles-add {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap;
}
.admin-log::-webkit-scrollbar {
  width: 10px;
}

.admin-log::-webkit-scrollbar-thumb {
  background: rgba(111, 163, 219, 0.30);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.user-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px 12px;
  padding: 7px 8px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor: default;
  transition: background 140ms ease, transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.user-item:hover {
  background: linear-gradient(135deg, #d7ebff 0%, #bedcff 100%);
  border-color: rgba(79, 149, 216, 0.28);
  box-shadow: 0 8px 18px rgba(111, 163, 219, 0.16), inset 0 0 0 1px rgba(255,255,255,0.52);
}

.user-item:hover .nick-name,
.user-item:hover .nick-role {
  color: #2d78bf;
}

.user-item:hover .nick-prefix {
  background: linear-gradient(135deg, #8ec3ff 0%, #5fa7f4 100%);
  color: white;
}

.user-item:hover .nick-status {
  background: #236dcf;
  box-shadow: 0 0 0 1px rgba(35, 109, 207, 0.32);
}


.user-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 6px;
  row-gap: 2px;
}

.nick-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #4a78ac;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.18;
  word-break: break-word;
}

.nick-role {
  font-size: 9px;
  flex: 0 0 auto;
}

.nick-prefix {
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.nick-prefix.is-empty {
  background: transparent;
  color: transparent;
  border: 1px solid transparent;
}

.nick-status {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  justify-self: center;
  align-self: center;
  display: block;
  background: #2f7de1;
  box-shadow: 0 0 0 1px rgba(47, 125, 225, 0.42);
  opacity: 1;
  visibility: visible;
}


/* ── Online-now roster header ────────────────────────────────────────
   Liquid-glass count pill with a breathing presence dot, and the
   "@ ops / + VIPs" legend rendered as tinted role chips (blue for
   operators, gold for VIPs — same palette as their badges). */
.names-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 13px;
  height: auto;
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(240,248,255,0.5));
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  box-shadow: 0 4px 12px rgba(50,100,160,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-dark);
  white-space: nowrap;
}
.names-count-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: radial-gradient(circle at 35% 30%, #7ee2a8, #2ebd6b 70%);
  box-shadow: 0 0 0 0 rgba(46, 189, 107, 0.45), inset 0 1px 1px rgba(255,255,255,0.5);
  animation: wpzPresencePulse 2.4s ease-out infinite;
}
@keyframes wpzPresencePulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 189, 107, 0.45); }
  60%  { box-shadow: 0 0 0 6px rgba(46, 189, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 189, 107, 0); }
}
.names-count-num {
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
}
/* Center the whole header group (heading + chips + count pill) in the
   panel instead of hugging the left edge. */
.sidebar-head.names-heading {
  justify-content: center;
  text-align: center;
}
.roster-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 4px;
  overflow: visible;
}
.roster-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.roster-chip-op {
  background: linear-gradient(180deg, rgba(214,233,255,0.9), rgba(186,217,250,0.75));
  color: #1a3f6b;
  border-color: rgba(120,168,224,0.35);
}
.roster-chip-vip {
  background: linear-gradient(180deg, rgba(255,241,204,0.95), rgba(255,224,150,0.8));
  color: #7a5a12;
  border-color: rgba(216,174,80,0.45);
}

.legend {
  font-size: 11px;
  line-height: 1.5;
}


.channel-list::-webkit-scrollbar,
.user-list::-webkit-scrollbar,
.message-log::-webkit-scrollbar,
.auth-panel::-webkit-scrollbar {
  width: 10px;
}

.channel-list::-webkit-scrollbar-thumb,
.user-list::-webkit-scrollbar-thumb,
.message-log::-webkit-scrollbar-thumb,
.auth-panel::-webkit-scrollbar-thumb {
  background: rgba(111, 163, 219, 0.34);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.channel-list::-webkit-scrollbar-track,
.user-list::-webkit-scrollbar-track,
.message-log::-webkit-scrollbar-track,
.auth-panel::-webkit-scrollbar-track {
  background: transparent;
}

.auth-modal {
  position: fixed;
  inset: 0;
  /* Above the session strip / menu rows (z 30–1200) so nothing from the
     page intercepts clicks on the panel (the VIP button used to sit on
     top of the close button); below the transition overlay (99999). */
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(95, 132, 171, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.auth-panel {
  width: min(430px, calc(100vw - 36px));
  max-height: min(88vh, 760px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 22px;
  box-shadow: var(--shadow);
}

.auth-panel-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.close-button {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  flex: 0 0 auto;
}

.auth-copy {
  margin: 8px 0 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-tint);
}

.tab {
  border-radius: 999px;
}

.auth-form {
  display: grid;
  gap: 10px;
}

.status-message.error {
  margin-top: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@media (max-width: 1240px) {
  .chat-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .users-panel {
    grid-column: 1 / -1;
  }

  .user-list {
    max-height: 250px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
  }
}

@media (max-width: 920px) {
  .window {
    padding: 12px;
  }

  .topbar,
  .session-strip {
    flex-direction: column;
    align-items: stretch;
  }

  .brand-lockup {
    flex-direction: column;
    align-items: stretch;
  }

  .brand-mark-shell {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .chat-shell {
    grid-template-columns: 1fr;
    min-height: calc(100vh - 260px);
    height: auto;
    max-height: none;
  }

  /* Prevent extreme text wrapping in brand elements on narrow screens */
  .brand-copy {
    max-width: 720px;
    min-width: 200px;
  }

  .brand-headline,
  .brand-subtitle,
  .brand-eyebrow {
    word-break: break-word;
  }

  /* Ensure sidebar and message areas stay visible even when empty */
  .channel-list,
  .message-log,
  .user-list {
    min-height: 40px;
  }

  .live-grid {
    grid-template-columns: 1fr;
  }

  .message-stack {
    max-width: 100%;
  }

  .user-list {
    display: flex;
    max-height: 220px;
  }

  .user-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}


.member-context-menu {
  position: fixed;
  min-width: 220px;
  max-width: min(280px, calc(100vw - 24px));
  padding: 10px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 24px 60px rgba(31, 38, 135, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(28px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(210%) !important;
  z-index: 2147483010 !important;
  transition: opacity 160ms, transform 160ms;
}

/* Inbox conversation right-click menu — same liquid-glass polish the
   member menu gets from its #memberContextMenu overrides. */
#wpzInboxThreadMenu{
  /* The inbox window sits at 2147483016 — this menu must float above it. */
  z-index: 2147483030 !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 24px 60px rgba(31, 38, 135, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.45) !important;
  border-radius: 18px !important;
  padding: 6px !important;
  width: 196px !important;
  min-width: 0;
}

.member-context-header {
  padding: 6px 10px 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  margin-bottom: 6px;
}

.member-context-eyebrow {
  font-size: 9px !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.member-context-name {
  margin-top: 4px;
  font-size: 13px !important;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}

.member-context-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 12px !important;
  font-size: 13px !important;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: default;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms;
}

.member-context-item:hover,
.member-context-item:focus-visible {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #17334d !important;
  outline: none;
  transform: translateY(-1px);
}

.member-context-item.is-danger {
  color: #b15062;
}

.member-context-item.is-danger:hover,
.member-context-item.is-danger:focus-visible {
  background: rgba(194, 102, 131, 0.15) !important;
  border-color: rgba(194, 102, 131, 0.25) !important;
  color: #b15062 !important;
  outline: none;
  transform: translateY(-1px);
}

.user-item.is-friend .nick-status {
  background: #5faff4;
  box-shadow: 0 0 0 4px rgba(95, 175, 244, 0.12);
}

.user-item.is-blocked {
  opacity: 0.78;
  background: linear-gradient(135deg, rgba(243, 248, 255, 0.95), rgba(236, 244, 255, 0.98));
  border-color: rgba(79, 149, 216, 0.18);
}

.user-item.is-blocked .nick-name {
  color: #5e7f9f;
}

.user-item.is-blocked .nick-role {
  color: #7f98b2;
}


.pm-window {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: min(420px, calc(100vw - 28px));
  max-height: min(72vh, 720px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  padding: 14px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(79, 149, 216, 0.2);
  box-shadow: 0 26px 60px rgba(86, 126, 164, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 70;
}

.pm-window-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.pm-target-name {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}

.pm-notice {
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--surface-tint);
  border: 1px solid rgba(79, 149, 216, 0.12);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.pm-log {
  min-height: 220px;
  max-height: 44vh;
  overflow: auto;
  padding: 4px 4px 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-log::-webkit-scrollbar {
  width: 10px;
}

.pm-log::-webkit-scrollbar-thumb {
  background: rgba(111, 163, 219, 0.34);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.pm-row {
  display: flex;
  justify-content: flex-start;
}

.pm-row.is-own {
  justify-content: flex-end;
}

.pm-bubble-wrap {
  max-width: min(88%, 320px);
}

.pm-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.pm-user {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-dark);
}

.pm-time {
  font-size: 11px;
  color: var(--muted);
}

.pm-bubble {
  padding: 11px 14px;
  border-radius: 18px 18px 18px 8px;
  background: var(--bubble);
  border: 1px solid rgba(79, 149, 216, 0.12);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.pm-row.is-own .pm-bubble {
  background: var(--bubble-own);
  border-radius: 18px 18px 8px 18px;
}

.pm-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.pm-form input {
  width: 100%;
  padding: 13px 15px;
  border-radius: 999px;
  border: 1px solid rgba(90, 167, 255, 0.14);
  background: var(--surface-strong);
  color: var(--text);
  outline: none;
}

.pm-form input:focus {
  border-color: rgba(90, 167, 255, 0.34);
  box-shadow: 0 0 0 4px rgba(124, 188, 255, 0.12);
}

@media (max-width: 920px) {
  .pm-window {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 12px;
    max-height: min(68vh, 680px);
  }
}


.user-list-section {
  margin: 6px 2px 4px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(79, 149, 216, 0.08);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.user-item.is-banned {
  background: linear-gradient(135deg, rgba(255, 245, 245, 0.95), rgba(249, 236, 236, 0.98));
  border-color: rgba(190, 117, 117, 0.22);
}

.user-item.is-banned .user-copy {
  position: relative;
}

.user-item.is-banned .user-copy::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1.5px dashed rgba(167, 96, 96, 0.7);
  transform: translateY(-50%);
  pointer-events: none;
}

.user-item.is-banned .nick-name {
  color: #8f5c5c;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(167, 96, 96, 0.7);
}

.user-item.is-banned .nick-role,
.user-item.is-banned .nick-prefix {
  color: #a36f6f;
}

.user-item.is-banned .nick-status {
  background: #d38c8c;
  box-shadow: 0 0 0 4px rgba(211, 140, 140, 0.16);
}

.member-context-item[data-user-action="unban"] {
  color: var(--blue-dark);
  font-weight: 600;
}

.member-context-item[data-user-action="unblock"] {
  color: var(--blue-dark);
  font-weight: 600;
}


@media (max-width: 1100px) {
  .admin-log { max-height: 132px; }
}



.channels-panel .channel-list {
  flex: 0 0 auto;
}

.channels-panel .admin-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 2px;
}

.channels-panel .panel-subtext + .admin-panel,
.channels-panel #adminPanel {
  margin-top: 0;
}

.users-panel .user-list {
  flex: 1 1 auto;
}

.member-context-admin { font-weight: 700; }


/* --- Username display improvement (single line) --- */
.users-panel{
  width: 280px;
}

.user-copy{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.nick-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}


/* --- Strong username visibility fix --- */
.chat-shell{
  grid-template-columns: 220px minmax(0, 1fr) 260px !important;
}

.users-panel{
  width: 260px !important;
  min-width: 260px !important;
}

.user-list{
  overflow-x: visible !important;
}

.user-item{
  /* First column matches the 42px avatar (was 24px — the avatar
     overflowed the column and crowded the username). */
  grid-template-columns: 42px minmax(0, 1fr) 10px !important;
  align-items: center;
  column-gap: 12px !important;
}

.user-copy{
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  overflow: visible !important;
}

.nick-name{
  font-size: 13px !important;
  font-weight: 700 !important;
  /* No !important color here — custom VIP username colors arrive as an
     inline style and must win. Base color lives in the non-!important
     .nick-name rule. */
  white-space: nowrap !important;
  max-width: none !important;
  flex: none !important;
}

.nick-role{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}


/* --- User list polish v7: alignment, badges, dots, spacing --- */
.user-list{
  padding-right: 4px;
}
.user-item{
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 12px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 4px 10px !important;
  margin-bottom: 0;
  border-radius: 14px !important;
}
.user-item > .user-copy{
  min-width: 0 !important;
}
.user-copy{
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  overflow: visible !important;
}
.nick-prefix{
  min-width: 26px !important;
  width: 26px !important;
  height: 26px !important;
  font-size: 11px !important;
}
.nick-name{
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em;
  max-width: none !important;
  flex: none !important;
}
.nick-role{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(79,149,216,0.18) !important;
  background: rgba(79,149,216,0.10) !important;
  /* Compact pill pushed hard right so every label sits next to the
     status dot. margin-left:auto works regardless of the flex-start
     justify-content a later .user-copy rule forces. */
  margin-left: auto !important;
  margin-right: 0 !important;
  color: #4a78ac !important;
  line-height: 1 !important;
}
.user-item[data-role="owner"] .nick-role{
  background: rgba(240, 189, 72, 0.16) !important;
  border-color: rgba(240, 189, 72, 0.30) !important;
  color: #916400 !important;
}
.user-item[data-role="operator"] .nick-role{
  background: rgba(79,149,216,0.14) !important;
  border-color: rgba(79,149,216,0.28) !important;
  color: #2d6faf !important;
}
.user-item[data-role="vip"] .nick-role{
  background: rgba(166, 108, 255, 0.14) !important;
  border-color: rgba(166,108,255,0.28) !important;
  color: #7b45cf !important;
}
.user-item[data-role="guest"] .nick-role{
  background: rgba(128, 145, 163, 0.14) !important;
  border-color: rgba(128,145,163,0.26) !important;
  color: #6f7e8d !important;
}
.user-item.is-blocked .nick-role,
.user-item[data-role="blocked"] .nick-role{
  background: rgba(209, 98, 98, 0.12) !important;
  border-color: rgba(209,98,98,0.26) !important;
  color: #b34c4c !important;
}
.user-item.is-banned .nick-role,
.user-item[data-role="banned"] .nick-role{
  background: rgba(196, 61, 61, 0.14) !important;
  border-color: rgba(196,61,61,0.30) !important;
  color: #9f2f2f !important;
}
.nick-status{
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  justify-self: center !important;
  align-self: center !important;
  background: #2ec27e !important;
  box-shadow: 0 0 0 2px rgba(46,194,126,0.18) !important;
}
.user-item.is-blocked .nick-status,
.user-item[data-role="blocked"] .nick-status{
  background: #9aa8b7 !important;
  box-shadow: 0 0 0 2px rgba(154,168,183,0.18) !important;
}
.user-item.is-banned .nick-status,
.user-item[data-role="banned"] .nick-status{
  background: #d16262 !important;
  box-shadow: 0 0 0 2px rgba(209,98,98,0.18) !important;
}


/* --- v8 avatars, friend stars, typing indicator, smoother bubbles --- */
.user-item{
  grid-template-columns: 42px minmax(0, 1fr) 12px !important;
}

.user-avatar{
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #25527d;
  background: linear-gradient(135deg, #e8f4ff 0%, #cfe7ff 100%);
  border: 1px solid rgba(79,149,216,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.user-avatar.is-owner{
  background: linear-gradient(135deg, #fff4d6 0%, #ffe39a 100%);
  border-color: rgba(240,189,72,0.30);
  color: #8c6410;
}

.user-avatar.is-op{
  background: linear-gradient(135deg, #dff0ff 0%, #beddff 100%);
  border-color: rgba(79,149,216,0.28);
  color: #2e6fae;
}

.user-avatar.is-vip{
  background: linear-gradient(135deg, #f2e8ff 0%, #dcc8ff 100%);
  border-color: rgba(166,108,255,0.28);
  color: #7643c5;
}

.user-avatar.is-guest{
  background: linear-gradient(135deg, #f4f6f8 0%, #e1e7ee 100%);
  border-color: rgba(128,145,163,0.26);
  color: #6f7e8d;
}

.user-avatar.is-blocked,
.user-avatar.is-banned{
  background: linear-gradient(135deg, #fff0f0 0%, #ffd9d9 100%);
  border-color: rgba(209,98,98,0.26);
  color: #a53d3d;
}

.nick-name-wrap{
  min-width: 0;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.friend-star{
  display: inline-block !important;
  font-size: 12px !important;
  line-height: 1 !important;
  width: 14px !important;
  height: 14px !important;
  text-align: center !important;
  vertical-align: middle !important;
  color: #f0b748 !important;
  margin-left: 4px !important;
  position: relative !important;
  top: 0 !important;
  flex: none !important;
  filter: drop-shadow(0 1px 1px rgba(240,183,72,0.2));
}

.message-avatar{
  width: 34px !important;
  height: 34px !important;
  font-size: 12px !important;
  border: 1px solid rgba(79,149,216,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.message-avatar.is-owner{
  background: linear-gradient(135deg, #fff4d6 0%, #ffe39a 100%);
  border-color: rgba(240,189,72,0.30);
  color: #8c6410;
}

.message-avatar.is-op{
  background: linear-gradient(135deg, #dff0ff 0%, #beddff 100%) !important;
  border-color: rgba(79,149,216,0.28);
  color: #2e6fae !important;
}

.message-avatar.is-vip,
.message-avatar.is-voice{
  background: linear-gradient(135deg, #f2e8ff 0%, #dcc8ff 100%) !important;
  border-color: rgba(166,108,255,0.28);
  color: #7643c5 !important;
}

.message-avatar.is-own{
  background: linear-gradient(135deg, #e7f4ff 0%, #d4ebff 100%) !important;
}

.message-bubble{
  border-radius: 22px 22px 22px 12px !important;
  box-shadow: 0 12px 26px rgba(103,138,176,0.08) !important;
}

.message-row.is-own .message-bubble{
  border-radius: 22px 22px 12px 22px !important;
}

.typing-indicator{
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 10px 8px;
  font-size: 12px;
  color: #6d8195;
  display: flex;
  align-items: center;
  gap: 8px;
}

.typing-indicator.hidden{
  display: none !important;
}

.typing-dots{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.typing-dots span{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8fb6dd;
  animation: wpzTypingPulse 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(2){ animation-delay: .15s; }
.typing-dots span:nth-child(3){ animation-delay: .3s; }

@keyframes wpzTypingPulse{
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.45; }
  40% { transform: scale(1); opacity: 1; }
}


/* --- v9 social / messenger style panels --- */
.user-actions{
  display:flex;
  gap:8px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.social-window{
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: min(380px, calc(100vw - 28px));
  max-height: min(76vh, 760px);
  display:grid;
  grid-template-rows:auto auto auto minmax(180px,1fr) auto;
  gap:8px;
  padding:14px;
  border-radius:24px;
  background: linear-gradient(135deg, rgba(220,235,255,0.42) 0%, rgba(255,255,255,0.55) 100%) !important;
  border:1px solid rgba(255,255,255,0.55) !important;
  box-shadow:
    0 26px 60px rgba(31, 38, 135, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(40px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(220%) !important;
  z-index:72;
}
.social-window.hidden{ display:none !important; }
.social-window-header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.social-tabs{
  display:flex;
  gap:8px;
}
.social-tab{
  border:1px solid rgba(79,149,216,0.14);
  background:var(--surface-tint);
  color:var(--blue-dark);
  border-radius:999px;
  padding:9px 12px;
  cursor:default;
  font-weight:700;
}
.social-tab.is-active{
  background: linear-gradient(135deg, #cae6ff 0%, #a9d2ff 100%);
  color:#17334d;
}
.social-search-wrap input{
  width:100%;
  padding:7px 12px;
  font-size:13px;
  border-radius:999px;
  border:1px solid rgba(90,167,255,0.14);
  background:var(--surface-strong);
}
.social-list{
  min-height:0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.social-empty{
  color:var(--muted);
  font-size:13px;
  padding:8px 4px 2px;
}
.social-item{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:18px;
  border:1px solid rgba(79,149,216,0.10);
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,250,255,0.98));
  cursor:default;
}
.social-item:hover{
  border-color:rgba(79,149,216,0.20);
  box-shadow:0 12px 22px rgba(103,138,176,0.08);
}
.social-avatar{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  font-size:11px; font-weight:800;
  color:#25527d;
  background:linear-gradient(135deg, #e8f4ff 0%, #cfe7ff 100%);
  border:1px solid rgba(79,149,216,0.22);
}
.social-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.social-name{
  font-weight:700;
  font-size:13px;
  color:#356fa8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.social-sub{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.social-action{
  border:1px solid rgba(79,149,216,0.16);
  background:var(--surface-tint);
  color:var(--blue-dark);
  border-radius:999px;
  padding:8px 10px;
  cursor:default;
  font-weight:700;
}
.pm-window{
  width:min(440px, calc(100vw - 28px));
}
.pm-log{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pm-row{
  display:flex;
  align-items:flex-end;
  gap:8px;
}
.pm-row.is-own{
  justify-content:flex-end;
}
.pm-contact-avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, #e8f4ff 0%, #cfe7ff 100%);
  border:1px solid rgba(79,149,216,0.20);
  color:#25527d;
  font-size:11px;
  font-weight:800;
}
.pm-row.is-own .pm-contact-avatar{ order:2; }
.pm-bubble-wrap{ max-width:min(78%, 300px); display:flex; flex-direction:column; gap:4px; }
.pm-row.is-own .pm-bubble-wrap{ align-items:flex-end; }
.pm-bubble{
  background: var(--bubble);
  border:1px solid var(--border);
  box-shadow: var(--shadow-soft);
  border-radius: 20px 20px 20px 10px;
  padding: 9px 13px;
  line-height:1.45;
  /* Match the main chat's type scale — PM bubbles otherwise inherit the
     window's larger base size and look oversized next to #general. */
  font-size: 13px !important;
}
.pm-user{
  font-size: 13px !important;
  font-weight: 700;
}
.pm-time{
  font-size: 11px !important;
}
.pm-edit-btn,
.pm-delete-btn{
  font-size: 11px !important;
}
.pm-row.is-own .pm-bubble{
  background: var(--bubble-own);
  border-radius:20px 20px 10px 20px;
}


/* --- v12 anti-spam pause shield --- */
.main-column{
  position: relative;
}
.main-column.chat-paused .message-log,
.main-column.chat-paused .message-form,
.main-column.chat-paused .typing-indicator,
.main-column.chat-paused .emoji-tray{
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}
.spam-shield{
  position: absolute;
  inset: 64px 8px 8px 8px;
  display: grid;
  place-items: center;
  z-index: 12;
}
.spam-shield.hidden{
  display: none !important;
}
.spam-shield-card{
  width: min(520px, calc(100% - 20px));
  border-radius: 26px;
  padding: 20px 22px;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(209,98,98,0.20);
  box-shadow: 0 26px 60px rgba(86,126,164,0.16);
  text-align: center;
}
.spam-shield-title{
  margin-top: 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #234d74;
}
.spam-shield-body{
  margin-top: 8px;
  line-height: 1.5;
  color: #5f7488;
}
.spam-shield-timer{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 9px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff0f0 0%, #ffdede 100%);
  color: #a53d3d;
  font-weight: 800;
}
.message-form button[disabled],
.message-form input[disabled],
.emoji-button[disabled]{
  opacity: .7;
  cursor: not-allowed;
}

.message-form .gif-button,
.message-form .gif-search-toggle,
.message-form .emoji-button {
  border: 1px solid transparent;
  background: var(--surface-tint);
  color: var(--text);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 16px;
  cursor: default;
  /* No transitions on hover. The popup itself appears instantly (the
     main menu pattern), and a 140ms translateY/background animation
     on the button while the cursor hovers reads as a flicker. The
     button visually pops on hover, but only via the popup opening —
     not via a separate button animation. The global `button` rule at
     line 7894 sets `transition: all 0.2s ease !important`; we need
     !important to beat it. */
  transition: none !important;
}

.message-form .gif-button:hover,
.message-form .gif-search-toggle:hover,
.message-form .emoji-button:hover {
  transform: translateY(-1px);
}

.message-form .gif-button:hover {
  background: linear-gradient(135deg, #dce9ff 0%, #bce0ff 100%);
  border-color: rgba(79, 149, 216, 0.20);
}

.gif-search-toggle:hover,
.gif-search-toggle.is-active {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
  border-color: rgba(236, 72, 153, 0.22);
  color: #be185d;
}

.gif-popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 14, 28, 0.18);
  z-index: 80;
  /* No fade-in animation — the main menu has no backdrop, and a
     fading-in dim layer reads as a "blink" when the popup opens
     over the chat. The backdrop just appears at full opacity. */
}
.gif-popup-backdrop.hidden { display: none; }

.gif-popup {
  position: fixed;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 14px;
  width: min(640px, calc(100vw - 32px));
  /* Fixed height (not just max-height) so the popup doesn't suddenly
     jump taller when async content (GIPHY search results) loads after
     open. The results area inside scrolls when there's more content
     than fits. */
  height: min(560px, calc(100vh - 96px));
  background: var(--surface-strong, #ffffff);
  border: 1px solid rgba(79, 149, 216, 0.16);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(8, 14, 28, 0.35);
  overflow: hidden;
  /* Position is set inline by JS based on the anchor button's rect.
     Default fallback so it doesn't end up at 0,0 if JS hasn't run yet. */
  top: auto;
  left: auto;
  right: 16px;
  bottom: 80px;
  /* No entry animation. An animation that scales the panel while
     the user is trying to click a chip reads as a "blink" — the
     click target shifts under the cursor for ~200ms. The popup
     just appears at full size on open. */
}
.gif-popup.hidden { display: none; }

.gif-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 0;
  flex: 0 0 auto;
}
.gif-popup-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text);
}
.gif-popup-close {
  border: 1px solid rgba(90, 167, 255, 0.14);
  background: var(--surface-tint, #f4f7fb);
  color: var(--text);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease;
}
.gif-popup-close:hover { transform: translateY(-1px); background: rgba(90, 167, 255, 0.18); }

body.gif-popup-open { /* anchored popup: no body scroll-lock */ }

@keyframes gif-popup-fade {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes gif-popup-pop {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.gif-search-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #ffffff;
  border: 1px solid rgba(90, 167, 255, 0.16);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  /* NEVER compress inside the fixed-height popup's flex column — shrinking
     clipped the placeholder and the search button. Results scroll instead. */
  flex: 0 0 auto;
  min-height: 36px;
}

.gif-popup-frequent {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 4px 8px;
  border-bottom: 1px solid rgba(90, 167, 255, 0.10);
}
.gif-popup-frequent.hidden { display: none; }
.gif-popup-frequent-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b7a8f);
  padding: 0 4px;
}
.gif-popup-frequent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}
.gif-popup-frequent-result {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #eef6ff 0%, #ddefff 100%);
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.gif-popup-frequent-result:hover {
  transform: translateY(-1px);
  border-color: rgba(236, 72, 153, 0.30);
  box-shadow: 0 6px 14px rgba(103, 138, 176, 0.14);
}
.gif-popup-frequent-result img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gif-search-bar input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 34px;
  padding: 7px 14px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px !important;
  outline: none;
}

.gif-search-clear {
  flex: 0 0 auto;
  align-self: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(180, 190, 200, 0.25);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  margin: 0 4px;
  transition: transform 120ms ease, background 120ms ease;
}

.gif-search-clear:hover {
  transform: scale(1.05);
  background: rgba(160, 170, 180, 0.4);
}

.gif-search-submit {
  flex: 0 0 auto;
  margin-left: auto; /* pinned to the bar's right edge */
  width: 52px;
  border: none;
  /* Blue-glass gradient matching the site theme (was GIPHY pink/orange). */
  background: linear-gradient(135deg, #8ec1ff 0%, #6aa9ff 45%, #4a93ff 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* The bar's overflow:hidden pill-clips the button's outer edge. */
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  transition: filter 140ms ease;
}

.gif-search-submit:hover {
  filter: brightness(1.08);
}

.gif-search-results {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  /* Fixed row height instead of aspect-ratio on the cards: Safari does
     not reliably honor aspect-ratio on <button>, which stretched the
     cards and rendered every GIF as a squashed strip. */
  grid-auto-rows: 112px;
  gap: 10px;
  overflow-y: auto;
  padding-right: 2px;
}

.gif-search-result {
  position: relative;
  height: 100%;
  padding: 0 !important; /* global button padding shrinks the image */
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #eef6ff 0%, #ddefff 100%) !important;
  cursor: default;
  border: 2px solid transparent;
  box-shadow: none !important;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.gif-search-result:hover,
.gif-search-result:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(236, 72, 153, 0.35);
  box-shadow: 0 10px 24px rgba(103, 138, 176, 0.14);
}

.gif-search-result img {
  /* Absolute cover fill — immune to button sizing quirks (Safari). */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gif-search-result-title {
  position: absolute;
  inset: auto 0 0 0;
  padding: 6px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.gif-search-footer {
  display: flex;
  justify-content: center;
  padding-top: 2px;
  flex: 0 0 auto;
}

.gif-search-load-more {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(90, 167, 255, 0.16);
  background: var(--surface-tint);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: default;
  transition: transform 140ms ease, background 140ms ease;
}

.gif-search-load-more:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #dce9ff 0%, #bce0ff 100%);
}

.gif-search-empty,
.gif-search-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px 12px;
  color: var(--muted);
  font-size: 13px;
}

.gif-search-empty b {
  color: var(--text);
  font-weight: 700;
}

.gif-button[disabled] {
  opacity: .7;
  cursor: not-allowed;
}

/* ── Emoji picker popup ───────────────────────────────────────────── */
.emoji-popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 14, 28, 0.18);
  z-index: 80;
  /* No fade-in animation — see .gif-popup-backdrop comment. */
}
.emoji-popup-backdrop.hidden { display: none; }

.emoji-popup {
  position: fixed;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 14px;
  width: min(480px, calc(100vw - 32px));
  /* Fixed height (not just max-height) so the popup doesn't shift
     vertically when content inside grows. The grid inside scrolls
     when there's more content than fits. */
  height: min(480px, calc(100vh - 96px));
  background: var(--surface-strong, #ffffff);
  border: 1px solid rgba(79, 149, 216, 0.16);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(8, 14, 28, 0.35);
  overflow: hidden;
  /* Position is set inline by JS based on the anchor button's rect.
     Default fallback so it doesn't end up at 0,0 if JS hasn't run yet. */
  top: auto;
  left: auto;
  right: 16px;
  bottom: 80px;
  /* No entry animation. The popup just appears at full size on
     open — any scale/fade animation reads as a "blink" because
     the click target shifts under the cursor during the entry. */
}
.emoji-popup.hidden { display: none; }

.emoji-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 0;
}
.emoji-popup-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text);
}
.emoji-popup-close {
  border: 1px solid rgba(90, 167, 255, 0.14);
  background: var(--surface-tint, #f4f7fb);
  color: var(--text);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease;
}
.emoji-popup-close:hover { transform: translateY(-1px); background: rgba(90, 167, 255, 0.18); }

.emoji-popup-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 0;
  align-items: center;
  /* The popup is a FIXED-HEIGHT flex column; overflow:hidden gives this row
     a min-content height of 0, so with a full grid (custom emojis, frequent
     row) flexbox crushed the whole search bar into a ~10px sliver. Pin it. */
  flex: 0 0 auto;
  min-height: 42px;
  background: #ffffff;
  border: 1px solid rgba(90, 167, 255, 0.16);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.emoji-popup-search input {
  width: 100%;
  padding: 11px 14px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px !important;
  outline: none;
}
.emoji-popup-search-clear {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(180, 190, 200, 0.25);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 4px;
  transition: transform 120ms ease, background 120ms ease;
}
.emoji-popup-search-clear:hover { transform: scale(1.05); background: rgba(160, 170, 180, 0.4); }

.emoji-popup-frequent {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 4px 8px;
  border-bottom: 1px solid rgba(90, 167, 255, 0.10);
}
.emoji-popup-frequent.hidden { display: none; }
.emoji-popup-frequent-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b7a8f);
  padding: 0 4px;
}
.emoji-popup-frequent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 6px;
}

.emoji-popup-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 4px;
  overflow-y: auto;
  padding: 2px;
  align-content: start;
}

.emoji-popup-chip {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
  font-size: 22px;
  line-height: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.emoji-popup-chip:hover {
  background: rgba(90, 167, 255, 0.10);
  border-color: rgba(90, 167, 255, 0.20);
  transform: translateY(-1px);
}
.emoji-popup-chip:active {
  transform: scale(0.94);
}
.emoji-popup-chip.is-frequent {
  font-size: 30px;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.08) 0%, rgba(249, 115, 22, 0.10) 100%);
  border-color: rgba(236, 72, 153, 0.18);
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.10);
}
.emoji-popup-chip.is-frequent:hover {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.18) 0%, rgba(249, 115, 22, 0.20) 100%);
  border-color: rgba(236, 72, 153, 0.32);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.18);
}

.emoji-popup-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px 12px;
  color: var(--muted, #6b7a8f);
  font-size: 13px;
}

body.emoji-popup-open { /* anchored popup: no body scroll-lock */ }

.gif-preview-container {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.gif-preview-item {
  position: relative;
  width: 80px;
  height: 60px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(79, 149, 216, 0.25);
  box-shadow: 0 4px 12px rgba(8, 22, 39, 0.12);
  animation: gifPreviewSlideIn 180ms ease;
}

.gif-preview-item:hover .gif-remove-btn {
  opacity: 1;
}

.gif-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #b34c4c;
  border: none;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease;
}

.gif-remove-btn:hover {
  background: #ffd9d9;
}

.gif-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gif-thumb-overlay {
  position: absolute;
  bottom: 4px;
  left: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 6px;
  border-radius: 8px;
}

.gif-thumb-duration {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 5px;
  border-radius: 8px;
}

@keyframes gifPreviewSlideIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.gif-bubble-img {
  /* Compact chat GIFs — !important beats the inline width/height hints
     GIPHY results carry, which used to blow GIFs up to 400×300. */
  max-width: 140px !important;
  max-height: 120px !important;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(79, 149, 216, 0.15);
}

.gif-bubble-img.animated {
  /* Let the native animation play */
}

@keyframes gifPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* GIF URL placeholders in message bubbles */
.gif-url-wrapper,
.gif-bubble-img.gif-url {
  display: inline-block;
  vertical-align: middle;
  margin: 2px 4px;
}

/* Inline audio player for voice clips / file attachments that arrive as
   bare URLs in the body. Mirrors the PM file attachment look. */
.wpz-audio-wrapper {
  display: block;
  margin: 2px 0;
}

/* Voice-clip bubbles hug the player — without this the bubble wraps the
   player in thick padding and a stray <br> line above it. */
.message-bubble:has(.wpz-audio-player),
.pm-bubble:has(audio){
  padding: 4px 6px !important;
}
.message-bubble br:has(+ .wpz-audio-wrapper),
.message-bubble br:has(+ audio),
.pm-bubble br:has(+ audio){
  display: none;
}

/* GIF bubbles hug the image the same way — the default bubble padding
   reads as thick blue bars around a 140px GIF. */
.message-bubble:has(.gif-bubble-img),
.pm-bubble:has(.gif-bubble-img){
  padding: 4px !important;
}
.message-bubble:has(.gif-bubble-img) .gif-bubble-img,
.pm-bubble:has(.gif-bubble-img) .gif-bubble-img{
  display: block;
  border-radius: 10px;
}
.message-bubble br:has(+ .gif-bubble-img),
.pm-bubble br:has(+ .gif-bubble-img){
  display: none;
}
.pm-bubble audio{
  margin-top: 0 !important;
}
.pm-bubble .wpz-scan-badge{
  margin-top: 2px !important;
  padding-left: 4px;
}
.wpz-audio-player {
  width: 100%;
  max-width: 360px;
  height: 38px;
  border-radius: 999px;
  display: block;
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(220,235,255,0.85));
  box-shadow: 0 4px 12px rgba(79,149,216,0.16), inset 0 1px 0 rgba(255,255,255,0.65);
  padding: 4px 8px;
  outline: none;
}
.wpz-audio-player:focus {
  box-shadow: 0 0 0 3px rgba(79,149,216,0.32), 0 4px 12px rgba(79,149,216,0.16);
}

/* Custom click-to-play voice message for the admin chat. The play
   button is the only control the user needs — clicking once starts
   playback, clicking again pauses. The waveform is a purely decorative
   animated bar group; the live timecode sits on the right. Glass pill
   so it harmonises with the admin channel surface. */
.wpz-admin-voice{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  margin-top: 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(232,244,255,0.78));
  box-shadow: 0 3px 8px rgba(50,100,160,0.12), inset 0 1px 0 rgba(255,255,255,0.65);
  max-width: 220px;
  user-select: none;
}
.wpz-admin-voice-play{
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(79,149,216,0.32);
  background: linear-gradient(135deg, #8ec1ff 0%, #6aa9ff 45%, #4a93ff 100%);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(74,147,255,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 140ms ease, box-shadow 140ms ease;
  /* Slightly shrink the SVG play triangle to match the smaller
     hit target so the icon doesn't look oversized. */
}
.wpz-admin-voice-play svg{
  width: 11px;
  height: 11px;
}
.wpz-admin-voice-play:hover{ transform: scale(1.05); }
.wpz-admin-voice-play:active{ transform: scale(0.96); }
.wpz-admin-voice.is-playing .wpz-admin-voice-play{
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 2px 6px rgba(220,38,38,0.42), inset 0 1px 0 rgba(255,255,255,0.4);
}
.wpz-admin-voice-waveform{
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 1.5px;
  height: 16px;
  min-width: 64px;
  cursor: pointer;
  touch-action: none; /* drag-to-seek without the page scrolling */
}
.wpz-admin-voice-waveform span{
  display: inline-block;
  width: 2px;
  background: linear-gradient(180deg, #c4ddfa, #9cc4ef);
  border-radius: 1.5px;
  opacity: 0.85;
  transition: background 120ms ease;
  pointer-events: none;
}
/* Played portion lights up in the full blue. */
.wpz-admin-voice-waveform span.is-played{
  background: linear-gradient(180deg, #8ec1ff, #4a93ff);
  opacity: 1;
}
.wpz-admin-voice-waveform span:nth-child(1){ height: 30%; }
.wpz-admin-voice-waveform span:nth-child(2){ height: 80%; }
.wpz-admin-voice-waveform span:nth-child(3){ height: 50%; }
.wpz-admin-voice-waveform span:nth-child(4){ height: 95%; }
.wpz-admin-voice-waveform span:nth-child(5){ height: 65%; }
.wpz-admin-voice-waveform span:nth-child(6){ height: 40%; }
.wpz-admin-voice-waveform span:nth-child(7){ height: 90%; }
.wpz-admin-voice-waveform span:nth-child(8){ height: 55%; }
.wpz-admin-voice-waveform span:nth-child(9){ height: 75%; }
.wpz-admin-voice-waveform span:nth-child(10){ height: 35%; }
.wpz-admin-voice.is-playing .wpz-admin-voice-waveform span{
  animation: wpzVoiceBar 1.1s ease-in-out infinite;
}
.wpz-admin-voice.is-playing .wpz-admin-voice-waveform span:nth-child(odd){ animation-delay: 0.1s; }
.wpz-admin-voice.is-playing .wpz-admin-voice-waveform span:nth-child(3n){ animation-delay: 0.25s; }
.wpz-admin-voice.is-playing .wpz-admin-voice-waveform span:nth-child(5n){ animation-delay: 0.4s; }
@keyframes wpzVoiceBar{
  0%, 100% { transform: scaleY(0.6); opacity: 0.7; }
  50%      { transform: scaleY(1.15); opacity: 1; }
}
.wpz-admin-voice-time{
  flex: 0 0 auto;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: #1d4a85;
  font-weight: 700;
  letter-spacing: 0.2px;
  min-width: 46px;
  text-align: right;
}

/* Inline image attachment (matches PM look). */
.wpz-chat-attachment {
  display: block;
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  border-radius: 10px;
  margin-top: 6px;
  box-shadow: 0 4px 14px rgba(40, 80, 130, 0.18);
}

.gif-url-placeholder {
  color: #356fa8;
  text-decoration: none;
  font-size: inherit;
  line-height: inherit;
}

/* Show a small dot while GIPHY resolution is in progress */
.gif-url-placeholder[data-gif-type="giphy"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4d95d8;
  margin-right: 2px;
  vertical-align: middle;
}

.gif-url-wrapper:hover .gif-bubble-img,
.gif-url-placeholder:hover {
  box-shadow: 0 10px 24px rgba(79, 149, 216, 0.20);
}

.gif-url-wrapper img,
.gif-url-placeholder img {
  max-width: 320px;
  max-height: 280px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(79, 149, 216, 0.15);
}

.gif-url-wrapper img:hover,
.gif-url-placeholder img:hover {
  transform: scale(1.03);
}


/* Messenger floating PM windows (separate from existing PM modal) */
.pm-float-root{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 590;
}
.pm-float-window{
  position: fixed;
  width: 300px;
  height: 380px;
  background: rgba(255,255,255,0.985);
  border: 1px solid rgba(79,149,216,0.18);
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(25,44,66,0.24);
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto;
  overflow: hidden;
  pointer-events: auto;
}
.pm-float-header{
  background: linear-gradient(135deg, #2c6fb2 0%, #4b89c7 100%);
  color: white;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-weight:700;
}
.pm-float-title-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.pm-float-avatar{
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,0.22);
  font-size:10px;
  font-weight:800;
  flex:0 0 auto;
}
.pm-float-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pm-float-badge{
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#ff5a70;
  color:white;
  font-size:10px;
  display:inline-grid;
  place-items:center;
}
.pm-float-badge.hidden,
.pm-float-typing.hidden{
  display:none !important;
}
.pm-float-close{
  background:none;
  border:none;
  color:white;
  font-size:18px;
  cursor:default;
  line-height:1;
}
.pm-float-typing{
  padding: 8px 12px 0;
  font-size: 12px;
  color: #678099;
  display:flex;
  align-items:center;
  gap:8px;
}
.pm-float-typing-dots{
  display:inline-flex;
  gap:4px;
}
.pm-float-typing-dots span{
  width:5px;height:5px;border-radius:50%;
  background:#8fb6dd;
  animation: pmTyping 1.2s infinite ease-in-out;
}
.pm-float-typing-dots span:nth-child(2){ animation-delay:.15s; }
.pm-float-typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes pmTyping{
  0%,80%,100%{ transform:scale(.8); opacity:.45; }
  40%{ transform:scale(1); opacity:1; }
}
.pm-float-log{
  padding: 10px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pm-float-row{
  display:flex;
}
.pm-float-row.me{
  justify-content:flex-end;
}
.pm-float-bubble{
  background:#e6f2ff;
  padding:8px 12px;
  border-radius:14px 14px 14px 8px;
  max-width:72%;
  line-height:1.42;
  box-shadow: 0 6px 16px rgba(79,149,216,0.10);
}
.pm-float-row.me .pm-float-bubble{
  background:#cfe7ff;
  border-radius:14px 14px 8px 14px;
}
.pm-float-input-row{
  border-top:1px solid rgba(79,149,216,0.12);
  padding:8px;
}
.pm-float-input{
  width:100%;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid rgba(90,167,255,0.18);
}


/* Messenger floating PM windows v16 */
.pm-float-root{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 590;
}
.pm-float-window{
  position: fixed;
  width: 300px;
  height: 380px;
  background: rgba(255,255,255,0.985);
  border: 1px solid rgba(79,149,216,0.18);
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(25,44,66,0.24);
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto;
  overflow: hidden;
  pointer-events: auto;
}
.pm-float-window.is-dragging{ opacity:.96; }
.pm-float-header{
  background: linear-gradient(135deg, #2c6fb2 0%, #4b89c7 100%);
  color: white;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:700;
  cursor:move;
  user-select:none;
}
.pm-float-title-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.pm-float-avatar{
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,0.22);
  font-size:10px;
  font-weight:800;
  flex:0 0 auto;
}
.pm-float-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pm-float-badge{
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#ff5a70;
  color:white;
  font-size:10px;
  display:inline-grid;
  place-items:center;
}
.pm-float-badge.hidden,
.pm-float-typing.hidden{ display:none !important; }
.pm-float-close{
  background:none;
  border:none;
  color:white;
  font-size:18px;
  cursor:default;
  line-height:1;
}
.pm-float-typing{
  padding:8px 12px 0;
  font-size:12px;
  color:#678099;
  display:flex;
  align-items:center;
  gap:8px;
}
.pm-float-typing-dots{ display:inline-flex; gap:4px; }
.pm-float-typing-dots span{
  width:5px;height:5px;border-radius:50%;
  background:#8fb6dd;
  animation: pmTyping 1.2s infinite ease-in-out;
}
.pm-float-typing-dots span:nth-child(2){ animation-delay:.15s; }
.pm-float-typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes pmTyping{
  0%,80%,100%{ transform:scale(.8); opacity:.45; }
  40%{ transform:scale(1); opacity:1; }
}
.pm-float-log{
  padding:10px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pm-float-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.pm-float-row.me{ align-items:flex-end; }
.pm-float-bubble{
  background:#e6f2ff;
  padding:8px 12px;
  border-radius:14px 14px 14px 8px;
  max-width:72%;
  line-height:1.42;
  box-shadow:0 6px 16px rgba(79,149,216,0.10);
}
.pm-float-row.me .pm-float-bubble{
  background:#cfe7ff;
  border-radius:14px 14px 8px 14px;
}
.pm-float-reactions{
  display:flex;
  gap:4px;
  margin-top:4px;
}
.pm-float-reaction-btn{
  border:1px solid rgba(79,149,216,0.14);
  background:#fff;
  border-radius:999px;
  padding:2px 6px;
  cursor:default;
  font-size:12px;
}
.pm-float-reaction-stack{
  display:flex;
  gap:4px;
  margin-top:4px;
  min-height:16px;
}
.pm-float-reaction{ display:inline-flex; font-size:13px; }
.pm-float-input-row{
  border-top:1px solid rgba(79,149,216,0.12);
  padding:8px;
}
.pm-float-input{
  width:100%;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid rgba(90,167,255,0.18);
}

/* GIF support in Messenger PM windows */
.pm-float-gif,
.pm-float-row .pm-float-bubble img {
  max-width: 280px;
  max-height: 240px;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(79,149,216,0.12);
}

.pm-float-row.me .pm-float-gif,
.pm-float-row.me .pm-float-bubble img {
  border-radius: 12px 12px 8px 12px;
}
.pm-demo-bar{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:580;
  background:rgba(255,255,255,0.98);
  border:1px solid rgba(79,149,216,0.16);
  border-radius:16px;
  box-shadow:0 12px 28px rgba(25,44,66,0.18);
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pm-demo-title{
  font-size:12px;
  font-weight:700;
  color:#2f6fae;
}
.pm-demo-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pm-demo-btn{
  border:1px solid rgba(79,149,216,0.14);
  background:#eef6ff;
  color:#2f6fae;
  border-radius:999px;
  padding:8px 10px;
  cursor:default;
  font-size:12px;
  font-weight:700;
}


/* Messenger PM fixes v20 */
.pm-float-window{
  display:flex !important;
  flex-direction:column !important;
  width:300px !important;
  height:380px !important;
  max-height:min(420px, calc(100vh - 90px)) !important;
}
.pm-float-header{
  flex:0 0 auto !important;
  min-height:48px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
.pm-float-title-wrap{
  flex:1 1 auto !important;
  min-width:0 !important;
}
.pm-float-close{
  flex:0 0 auto !important;
  width:28px !important;
  height:28px !important;
  display:inline-grid !important;
  place-items:center !important;
  position:relative !important;
  z-index:2 !important;
  opacity:1 !important;
  visibility:visible !important;
}
.pm-float-log{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
}
.pm-float-input-row{
  flex:0 0 auto !important;
  display:block !important;
  min-height:52px !important;
  position:relative !important;
  z-index:2 !important;
  background:rgba(255,255,255,0.98) !important;
}
.pm-float-input{
  display:block !important;
  width:100% !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* GIF URL support in Messenger PM windows */
.pm-float-gif-url-placeholder {
  color:#356fa8;
  text-decoration:none;
  font-size:inherit;
}

.pm-float-gif-url-wrapper img,
.pm-float-gif-url-placeholder img {
  max-width:280px;
  max-height:240px;
  border-radius:12px;
  box-shadow:0 6px 14px rgba(79,149,216,0.12);
}

.pm-float-row.me .pm-float-gif-url-wrapper img,
.pm-float-row.me .pm-float-gif-url-placeholder img {
  border-radius:12px 12px 8px 12px;
}


/* Facebook-style friend section */
.social-window{
  /* Spawn tall enough that the detail column (Message / Show profile /
     Remove friend) is fully visible without a manual resize, but no taller.
     The previous min(82vh, 850px) filled most of a tall screen and left the
     friend list mostly empty space; 620px covers header + search + add-row +
     the detail actions with room to spare, and the window is still resizable
     for anyone who wants more. */
  width:min(560px, calc(100vw - 28px));
  height:min(70vh, 620px);
  /* Hard cap: the window is user-resizable and persists its geometry, so
     without this a previous oversized drag makes it fill the screen. */
  max-width:560px !important;
  max-height:min(88vh, 880px);
  min-width:380px;
  min-height:360px;
  resize:both;
  overflow:hidden;
}
/* Blocked mode carries less: no "add a friend" row, and the block box sits
   inside the list panel rather than above it. Sizing it the same as the friend
   list left roughly half the window empty. The two modes share one element
   (toggleSocialWindow adds .blocked-mode), so they can simply differ here.
   A user's own resize still wins — it persists as an inline height. */
.social-window.blocked-mode{
  height:min(52vh, 420px);
  min-height:320px;
}
.social-window-header{
  cursor:grab;
  user-select:none;
}
.social-window-header:active{
  cursor:grabbing;
}
.social-shell{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(220px, 260px) minmax(0, 1fr);
  gap:10px;
}
.social-list-panel,
.social-detail{
  min-height:0;
  background: rgba(255,255,255,0.18) !important;
  border:1px solid rgba(255,255,255,0.35) !important;
  box-shadow: 0 8px 22px rgba(31, 38, 135, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.20) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border-radius:18px;
  padding:10px;
}
.social-count-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2px 2px 10px;
}
.social-count-label{
  font-size:12px;
  font-weight:700;
  color:#6d8195;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.social-list{
  max-height:100%;
  min-height:240px;
  overflow:auto;
}
.social-item{
  width:100%;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:18px;
  border:1px solid transparent;
  background:transparent;
  text-align:left;
  cursor:default;
}
.social-item.is-selected{
  background: linear-gradient(180deg, rgba(232,244,255,0.85), rgba(219,238,255,0.85)) !important;
  border-color: rgba(79,149,216,0.35) !important;
  box-shadow: 0 4px 12px rgba(79,149,216,0.15), inset 0 0 0 1px rgba(255,255,255,0.4) !important;
}
.social-avatar-wrap{
  position:relative;
  width:38px;
  height:38px;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
}
.social-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  font-size:12px;
  font-weight:800;
  color:#25527d;
  background:linear-gradient(135deg, #e8f4ff 0%, #cfe7ff 100%);
  border:1px solid rgba(79,149,216,0.22);
}
.social-presence{
  position:absolute;
  right:1px;
  bottom:1px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#2ec27e;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(46,194,126,.16);
}
.social-presence.is-muted{
  background:#9aa8b7;
  box-shadow:0 0 0 1px rgba(154,168,183,.16);
}
.social-copy{
  min-width:0;
}
.social-name{
  display:block;
  font-weight:700;
  font-size:13px;
  color:#356fa8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.social-sub{
  display:block;
  margin-top:3px;
  font-size:12px;
  color:#6d8195;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.social-chevron{
  font-size:22px;
  color:#9bb9d7;
  line-height:1;
}
.social-detail{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.social-detail-empty{
  color:#6d8195;
  font-size:14px;
  line-height:1.5;
  text-align:center;
  padding:20px;
}
.social-detail-card{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.social-detail-card.hidden{
  display:none !important;
}
.social-detail-hero{
  display:flex;
  align-items:center;
  gap:14px;
}
.social-detail-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:18px;
  font-weight:800;
  color:#25527d;
  background:linear-gradient(135deg, #e8f4ff 0%, #cfe7ff 100%);
  border:1px solid rgba(79,149,216,0.22);
}
.social-detail-copy{
  min-width:0;
}
.social-detail-name{
  font-size:15px;
  font-weight:800;
  letter-spacing:-0.01em;
  color:#17334d;
}
.social-detail-sub{
  margin-top:2px;
  color:#6d8195;
  line-height:1.4;
  font-size:12px;
}
.social-detail-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.social-chip{
  padding:7px 10px;
  border-radius:999px;
  background:#eef6ff;
  color:#2f6fae;
  font-size:12px;
  font-weight:700;
}
.social-detail-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.social-primary,
.social-secondary{
  min-width:0;
  flex:1 1 0;
  padding:8px 12px;
  border-radius:12px;
  font-weight:800;
  font-size:12px;
  line-height:1.2;
  cursor:pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  white-space:nowrap;
  text-align:center;
  border:1px solid rgba(79,149,216,0.30);
  background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(220,235,252,0.85));
  color:#1a3f6b;
  box-shadow:0 3px 8px rgba(50,100,160,0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.social-primary:hover,
.social-secondary:hover{
  transform: translateY(-1px);
  box-shadow:0 6px 14px rgba(50,100,160,0.20);
}
.social-primary:active,
.social-secondary:active{
  transform: translateY(0);
}
.social-primary{
  background: linear-gradient(135deg, #6fb1f3 0%, #4f95d8 100%) !important;
  color:#fff !important;
  border-color: rgba(79,149,216,0.45) !important;
  box-shadow: 0 6px 16px rgba(79,149,216,0.30) !important;
}
.social-primary:hover{
  box-shadow: 0 8px 20px rgba(79,149,216,0.40) !important;
}
.social-secondary.is-danger{
  background: linear-gradient(180deg, rgba(255,235,235,0.90), rgba(252,220,220,0.90)) !important;
  color:#b03434 !important;
  border-color: rgba(196,61,61,0.30) !important;
}
.social-secondary.is-danger:hover{
  background: linear-gradient(180deg, rgba(255,225,225,0.95), rgba(250,210,210,0.95)) !important;
  box-shadow: 0 6px 14px rgba(196,61,61,0.20) !important;
}

/* Inline PM view inside the friend list right panel */
.social-pm{
  display:flex;
  flex-direction:column;
  gap:8px;
  height:100%;
  min-height:0;
}
.social-pm.hidden{ display:none !important; }
.social-pm-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(79,149,216,0.18);
}
.social-pm-back{
  width:30px; height:30px; border-radius:10px;
  border:1px solid rgba(79,149,216,0.20);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(220,235,252,0.85));
  color:#1a3f6b; font-weight:900; cursor:pointer; line-height:1;
  display:grid; place-items:center;
}
.social-pm-back:hover{ transform:translateY(-1px); }
.social-pm-title{
  flex:1 1 auto;
  font-size:14px; font-weight:800; color:#17334d; letter-spacing:-0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.social-pm-head-actions{
  display:flex;
  gap:4px;
  align-items:center;
  flex:0 0 auto;
}
.social-pm-icon-btn{
  width:30px; height:30px; border-radius:10px;
  border:1px solid rgba(79,149,216,0.20);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(220,235,252,0.85));
  color:#1a3f6b;
  display:grid; place-items:center;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.social-pm-icon-btn:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ffffff, #d9eaff);
  box-shadow: 0 4px 10px rgba(79,149,216,0.18);
}
.social-pm-icon-btn.is-recording{
  background: #ef4444 !important;
  color:#fff !important;
  border-color: rgba(239,68,68,0.45) !important;
  animation: wpz-pulse-record 1.4s ease-in-out infinite;
}
@keyframes wpz-pulse-record{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
  50%{ box-shadow: 0 0 0 10px rgba(239,68,68,0); }
}
.social-pm-emoji-tray{
  padding:8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(247,251,255,0.65));
  border:1px solid rgba(255,255,255,0.55);
  border-radius:12px;
  max-height:120px;
  overflow-y:auto;
}
.social-pm-emoji-tray.hidden{ display:none !important; }
.social-pm-emoji-row{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.social-pm-emoji-row .emoji-chip{
  font-size:18px;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:4px 6px;
  border-radius:8px;
  transition: background 140ms ease, transform 140ms ease;
}
.social-pm-emoji-row .emoji-chip:hover{
  background: rgba(79,149,216,0.12);
  transform: scale(1.15);
}
.social-pm-form .social-pm-icon-btn{ width:34px; height:34px; flex:0 0 auto; }

/* Cancel button shown next to the mic while a voice clip is recording */
.social-pm-mic-cancel{
  color:#c0392b !important;
  border-color: rgba(196,61,61,0.32) !important;
  background: linear-gradient(180deg, rgba(255,232,232,0.85), rgba(255,210,210,0.85)) !important;
}
.social-pm-mic-cancel:hover{
  background: linear-gradient(180deg, rgba(255,200,200,0.95), rgba(255,180,180,0.95)) !important;
  transform: translateY(-1px);
}

/* Small "×" delete affordance on the user's own PM bubbles (text, voice, image).
   Hidden by default — becomes visible on bubble hover/focus so the chat stays
   clean, but stays clickable on touch devices because the button keeps pointer
   events. */
.social-pm-delete-btn{
  position:absolute;
  top:-8px;
  right:-8px;
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid rgba(196,61,61,0.32);
  background: linear-gradient(180deg, #ffe2e2, #ffc7c7);
  color:#7f1f1f;
  font-size:14px;
  line-height:1;
  font-weight:800;
  cursor:pointer;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform: scale(0.85);
  transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
  box-shadow: 0 4px 10px rgba(196,61,61,0.25);
  z-index: 2;
}
.social-pm-bubble{ position: relative; }
/* Reveal on hover for ANY row that has the button — the builder only adds
   it when authorized (own messages, or staff moderating: System
   announcements included). The old .is-mine-only rule left staff's ✕
   permanently invisible on other senders' messages. */
.social-pm-msg:hover .social-pm-delete-btn,
.social-pm-delete-btn:focus-visible{
  opacity: 1;
  transform: scale(1);
}
.social-pm-delete-btn:hover{
  background: linear-gradient(180deg, #ffd1d1, #ffb0b0);
}
.social-pm-log{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:4px 2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(247,251,255,0.45));
  border:1px solid rgba(255,255,255,0.45);
  border-radius:14px;
  padding:10px;
}
.social-pm-empty{
  margin:auto;
  text-align:center;
  color:#6d8195;
  font-size:13px;
  font-style:italic;
}
.social-pm-msg{
  display:flex;
  align-items:flex-end;
  gap:6px;
  max-width:88%;
  word-wrap:break-word;
}
.social-pm-msg.is-mine{
  align-self:flex-end;
  flex-direction: row-reverse;
}
.social-pm-msg .pm-avatar{
  width:22px; height:22px; border-radius:50%;
  background: linear-gradient(135deg, #6fb1f3, #4f95d8);
  color:#fff; font-size:10px; font-weight:800;
  display:grid; place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,0.6);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  overflow:hidden;
}
/* Voice-clip bubbles hug the player instead of stretching into a wide
   empty blue slab. */
.social-pm-bubble:has(.wpz-admin-voice){
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px 6px;
}
.social-pm-bubble .wpz-admin-voice{ margin-top: 0; }
.social-pm-msg.is-mine .social-pm-bubble:has(.wpz-admin-voice){ margin-left: auto; }
.social-pm-bubble{
  padding:8px 12px;
  border-radius:14px 14px 14px 8px;
  font-size:13px;
  line-height:1.35;
  background: var(--bubble, rgba(255,255,255,0.9));
  color:#17334d;
  border:1px solid var(--border, rgba(79,149,216,0.18));
  box-shadow: var(--shadow-soft, 0 6px 16px rgba(8,22,39,0.06));
  word-wrap:break-word;
  white-space:pre-wrap;
  min-width:0;
  position:relative;
}
.social-pm-msg.is-mine .social-pm-bubble{
  /* Match the PM window's own-message look: light glass, dark text —
     replaces the heavy solid-blue bubbles. */
  background: var(--bubble-own, linear-gradient(180deg, #eaf3ff, #dcecff));
  color:#17334d;
  border-color: rgba(120,168,224,0.3);
  box-shadow: var(--shadow-soft, 0 6px 16px rgba(8,22,39,0.06));
}
.social-pm-msg.is-mine .social-pm-time{
  color:#6d8195;
}
.social-pm-msg .social-pm-attachment{
  display:block;
  margin-top:6px;
}
.social-pm-msg .social-pm-attachment img{
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  display: block;
}
.social-pm-msg .social-pm-attachment audio{
  margin-top: 4px;
  max-width: 100%;
  height: 32px;
  outline: none;
}
.social-pm-msg .social-pm-attachment a{
  color: #2f6fae;
  text-decoration: underline;
  font-weight: 700;
  display: inline-block;
  margin-top: 4px;
  font-size:12px;
}
.social-pm-msg.is-mine .social-pm-attachment a{ color:#fff; }
.social-pm-msg .wpz-scan-badge{
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-weight: 700;
  opacity: 0.85;
}
.social-pm-msg .wpz-scan-badge.clean{ color: #2e7d32; }
.social-pm-msg .wpz-scan-badge.scanning{ color: #e65100; }
.social-pm-msg .wpz-scan-badge.danger{ color: #c62828; }
/* Own bubbles are LIGHT glass — the old white badge text was invisible
   on them; keep the semantic colors (green/orange/red) instead. */
.social-pm-msg.is-mine .wpz-scan-badge.clean{ color: #2e7d32; }
.social-pm-msg.is-mine .wpz-scan-badge.scanning{ color: #e65100; }
.social-pm-msg.is-mine .wpz-scan-badge.danger{ color: #c62828; }

/* Compact shield-only badge used inside the support-ticket window.
   Hides the "Checked & Safe" text — hovering the icon reveals it via
   the native title attribute so the row stays a single short line. */
.wpz-scan-badge-row{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  border-radius: 50%;
  background: rgba(16,185,129,0.12);
  color: #10b981;
  cursor: help;
  vertical-align: middle;
}
.wpz-scan-badge-row svg{ display: block; }
.wpz-scan-badge-row.is-warning{
  background: rgba(245,158,11,0.15);
  color: #f59e0b;
}

/* Hover-zoom for any image attachment inside a chat bubble or PM.
   Click is left alone — middle-click / ctrl-click / long-press still
   open the image at full resolution; hover just gives a quick preview. */
.social-pm-msg .social-pm-attachment img,
.support-msg-bubble img,
.social-pm-bubble img {
  cursor: zoom-in;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms ease;
  transform-origin: center;
  will-change: transform;
}
.social-pm-msg .social-pm-attachment img:hover,
.support-msg-bubble img:hover,
.social-pm-bubble img:hover {
  transform: scale(1.6);
  box-shadow: 0 14px 36px rgba(0,0,0,0.45);
  position: relative;
  z-index: 5;
}
.social-pm-time{
  display:block;
  margin-top:2px;
  font-size:10px;
  color:rgba(0,0,0,0.45);
  font-weight:700;
}
.social-pm-msg.is-mine .social-pm-time{
  color:#6d8195; /* light bubbles now — white timestamps were invisible */
}
.social-pm-form{
  display:flex;
  gap:6px;
  align-items:center;
}
.social-pm-form .social-pm-input{ order: 1; }
.social-pm-form-actions{
  order: 2;
  display:flex;
  gap:4px;
  align-items:center;
  flex:0 0 auto;
}
.social-pm-input{
  flex:1 1 auto;
  min-width:0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(79,149,216,0.30);
  background: rgba(255,255,255,0.85);
  color:#17334d;
  font-size:13px;
  outline:none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.social-pm-input:focus{
  border-color: rgba(79,149,216,0.55);
  box-shadow: 0 0 0 3px rgba(79,149,216,0.12);
}
.social-pm-send{
  flex:0 0 auto;
  padding:10px 16px;
  border-radius:14px;
  border:1px solid rgba(79,149,216,0.45);
  background: linear-gradient(135deg, #6fb1f3 0%, #4f95d8 100%);
  color:#fff;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  box-shadow: 0 4px 10px rgba(79,149,216,0.25);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.social-pm-send:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(79,149,216,0.35);
}
.social-pm-send:disabled{
  opacity:0.55;
  cursor:not-allowed;
  transform:none;
}
.social-detail-note{
  color:#6d8195;
  line-height:1.5;
  font-size:13px;
}
@media (max-width: 900px){
  .social-window{ width:min(96vw, 760px); }
  .social-shell{ grid-template-columns:1fr; }
}


/* v22 friend list bottom bar fix */
.social-window:not(.hidden) ~ #pmDemoBar,
body:has(.social-window:not(.hidden)) #pmDemoBar{
  display:none !important;
}


/* v23 friend list white bar fix */
.social-window,
.social-shell,
.social-list-panel,
.social-detail,
.social-list,
.social-item,
.social-item.is-selected{
  background-clip: padding-box;
}

.social-item{
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.social-item:focus,
.social-item:active{
  outline: none !important;
  box-shadow: none !important;
}

.social-window{
  overflow: hidden !important;
}

.social-list-panel{
  overflow: hidden !important;
}

.social-list{
  padding-right: 2px;
  background: transparent !important;
}

.social-count-row{
  background: transparent !important;
}

.social-detail-empty,
.social-detail-card,
.social-detail-note{
  background: transparent !important;
}


/* v24 friends list frame/border cleanup — REMOVED: was overwriting the
   base glass background (rgba(255,255,255,0.72) + backdrop-filter:blur(28px))
   with an opaque flat gradient and removing the border. The base rule at
   .social-window (above) is the source of truth. */


/* v25 strong friend window frame cleanup — REMOVED for the same reason:
   another `!important` stack that flattened the glass. */


/* v26 friends list bottom white bar fix */
.social-window{
  grid-template-rows: auto auto auto minmax(260px, 1fr) !important;
  align-content: stretch !important;
}
.social-shell{
  height: 100% !important;
  min-height: 0 !important;
}
.social-list-panel,
.social-detail{
  height: 100% !important;
  min-height: 0 !important;
}
.social-empty{
  margin-top: 8px !important;
}


/* v27 friend buttons pleasant */
.topbar-actions{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  margin:0 12px !important;
}

/* Logged-in user pill (avatar + username) rendered above the action
   buttons. Smaller than the previous nav-people pill so it stays
   unobtrusive. Click opens the user's own profile (matches the
   behavior the old #navPeople link had). */
.topbar-user-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  margin-right:4px;
  border-radius:999px;
  background:linear-gradient(180deg, #f4faff, #c8dffc);
  border:1px solid rgba(60,120,200,0.55);
  color:#1a3f6b;
  font-size:11.5px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(50,100,160,0.22);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
/* Make sure the .hidden utility wins over the chip's display rule, so the
   pill disappears entirely for guest sessions instead of leaving an empty
   placeholder. */
.topbar-user-chip.hidden{
  display:none !important;
}
.topbar-user-chip:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(103,138,176,0.18) !important;
}
.topbar-user-chip img{
  width:62px !important;
  height:62px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  border:2px solid rgba(255,255,255,0.85) !important;
  box-shadow: 0 6px 16px rgba(50,100,160,0.3) !important;
  border:1.5px solid var(--blue-dark) !important;
}
.topbar-user-chip .emoji-avatar{
  font-size:13px !important;
  line-height:1 !important;
}
.topbar-user-chip .username{
  font-size:11.5px !important;
  font-weight:700 !important;
}
@media (max-width: 1100px){
  .topbar-user-chip{
    font-size:11px !important;
    padding:3px 8px !important;
  }
  .topbar-user-chip img{
    width:12px !important;
    height:12px !important;
  }
}
.topbar-actions .theme-button{
  padding:7px 14px !important;
  border-radius:999px !important;
  font-size:12.5px !important;
  line-height:1.2 !important;
  /* Liquid glass — translucent white over the topbar with a hairline
     and inner sheen, matching the rest of the theme (was a heavy solid
     blue gradient with a hard border). */
  border:1px solid rgba(255,255,255,0.65) !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.72), rgba(240,248,255,0.5)) !important;
  backdrop-filter: blur(14px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(170%) !important;
  box-shadow: 0 4px 12px rgba(50,100,160,0.12), inset 0 1px 0 rgba(255,255,255,0.7) !important;
  color:#1a3f6b !important;
  box-shadow:0 3px 8px rgba(50,100,160,0.22) !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}
.topbar-actions .theme-button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(103,138,176,0.12) !important;
}

/* Guest auth controls (Login / Sign up) — they sit directly in the topbar
   (outside .topbar-actions) so they missed the liquid-glass upgrade the
   other topbar buttons got. Login: white glass. Sign up: accent-blue
   glass so it reads as the primary CTA. */
#loginButton,
#signupButton{
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.65);
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(240,248,255,0.5));
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  color: #1a3f6b;
  box-shadow: 0 4px 12px rgba(50,100,160,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
#loginButton:hover,
#signupButton:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(50,100,160,0.2);
  filter: brightness(1.05);
}
#signupButton{
  border-color: rgba(255,255,255,0.55);
  background: linear-gradient(135deg, rgba(120,178,240,0.88), rgba(64,124,196,0.9));
  color: #fff;
  box-shadow: 0 6px 14px rgba(50,100,160,0.28), inset 0 1px 0 rgba(255,255,255,0.4);
}
#signupButton:hover{
  box-shadow: 0 8px 16px rgba(50,100,160,0.34);
}
@media (max-width: 1100px){
  .topbar-actions .theme-button{
    font-size:11.5px !important;
    padding:6px 10px !important;
  }
}
@media (max-width: 820px){
  .topbar-actions{
    gap:4px !important;
    margin:0 6px !important;
  }
  .topbar-actions .theme-button{
    font-size:10.5px !important;
    padding:5px 8px !important;
  }
}


/* v27 friends list layout — kept (compact shell + 2-col grid + selected
   item gradient). The width:820px and the opaque background/border overrides
   that were here have been removed so the base glass rule (above) wins. */
.social-shell{
  min-height:0 !important;
  height:100% !important;
  display:grid !important;
  grid-template-columns:minmax(220px,260px) minmax(0,1fr) !important;
  gap:0 !important;
  background:transparent !important;
  border-radius:18px !important;
  overflow:hidden !important;
}
.social-list-panel,
.social-detail{
  min-height:0 !important;
  height:100% !important;
  margin:0 !important;
  padding:14px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
}
.social-list-panel{
  border-right:1px solid rgba(79,149,216,0.10) !important;
}
.social-list{
  min-height:0 !important;
  height:100% !important;
  padding-right:2px !important;
  background:transparent !important;
}
.social-count-row,
.social-detail-empty,
.social-detail-card,
.social-detail-note{
  background:transparent !important;
}
.social-empty{
  margin-top:8px !important;
  background:transparent !important;
}
.social-item{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:1px solid transparent !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
}
.social-item:focus,
.social-item:focus-visible,
.social-item:active{
  outline:none !important;
  box-shadow:none !important;
}
.social-item.is-selected{
  background:linear-gradient(180deg, rgba(232,244,255,0.95), rgba(219,238,255,0.95)) !important;
  border-color:rgba(79,149,216,0.18) !important;
}
@media (max-width: 900px){
  .social-shell{
    grid-template-columns:1fr !important;
  }
  .social-list-panel{
    border-right:none !important;
    border-bottom:1px solid rgba(79,149,216,0.10) !important;
  }
}


/* v28 hide Messenger PM demo bar in previews */
#pmDemoBar,
.pm-demo-bar{
  display: none !important;
}


/* v29 blocked users shown in red */
.social-window .social-tab#blockedTab.is-active{
  background: linear-gradient(135deg, #ffe2e2 0%, #ffc7c7 100%) !important;
  color: #7f1f1f !important;
  border-color: rgba(196,61,61,0.22) !important;
}
.social-window .social-item .social-presence.is-muted{
  background:#d16262 !important;
  box-shadow:0 0 0 1px rgba(209,98,98,.18) !important;
}
.social-window .social-item.blocked-mode,
.social-window.blocked-mode .social-item,
.social-window[data-mode="blocked"] .social-item{
  background: transparent !important;
}
.social-window.blocked-mode .social-item.is-selected,
.social-window[data-mode="blocked"] .social-item.is-selected{
  background: linear-gradient(180deg, rgba(255,232,232,0.98), rgba(255,214,214,0.98)) !important;
  border-color: rgba(196,61,61,0.22) !important;
}
.social-window.blocked-mode .social-name,
.social-window[data-mode="blocked"] .social-name{
  color:#b34c4c !important;
}
.social-window.blocked-mode .social-sub,
.social-window[data-mode="blocked"] .social-sub{
  color:#a76666 !important;
}
.social-window.blocked-mode .social-chevron,
.social-window[data-mode="blocked"] .social-chevron{
  color:#d38b8b !important;
}
.social-window.blocked-mode .social-avatar,
.social-window[data-mode="blocked"] .social-avatar{
  background: linear-gradient(135deg, #fff0f0 0%, #ffd9d9 100%) !important;
  border-color: rgba(209,98,98,0.26) !important;
  color:#a53d3d !important;
}
.social-window.blocked-mode .social-count-label,
.social-window[data-mode="blocked"] .social-count-label{
  color:#b34c4c !important;
}
.social-window.blocked-mode .social-detail-sub,
.social-window[data-mode="blocked"] .social-detail-sub{
  color:#a76666 !important;
}
.social-window.blocked-mode .social-chip,
.social-window[data-mode="blocked"] .social-chip{
  background:#fff0f0 !important;
  color:#b34c4c !important;
}
.social-window.blocked-mode .social-secondary,
.social-window[data-mode="blocked"] .social-secondary{
  border-color: rgba(209,98,98,0.18) !important;
  color:#b34c4c !important;
}


/* v30 blocked users red + bottom of right user list */
.user-list .user-item.is-blocked,
.user-list .user-item[data-role="blocked"]{
  order: 999 !important;
}
.user-list .user-item.is-blocked .nick-name,
.user-list .user-item[data-role="blocked"] .nick-name{
  color:#b34c4c !important;
}
.user-list .user-item.is-blocked .nick-prefix,
.user-list .user-item[data-role="blocked"] .nick-prefix{
  background:linear-gradient(135deg, #fff0f0 0%, #ffd9d9 100%) !important;
  border-color:rgba(209,98,98,0.26) !important;
  color:#a53d3d !important;
}
.user-list .user-item.is-blocked .nick-status,
.user-list .user-item[data-role="blocked"] .nick-status{
  background:#d16262 !important;
  box-shadow:0 0 0 2px rgba(209,98,98,0.18) !important;
}
.user-list .user-item.is-blocked .nick-role,
.user-list .user-item[data-role="blocked"] .nick-role{
  background:#fff0f0 !important;
  border-color:rgba(209,98,98,0.26) !important;
  color:#b34c4c !important;
}


/* v32 blocked section in right user list */
.user-list{
  display:flex;
  flex-direction:column;
}
.user-section-divider{
  order: 998 !important;
  margin: 10px 2px 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,240,240,0.98), rgba(255,229,229,0.98));
  border: 1px solid rgba(209,98,98,0.16);
  color: #b34c4c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.user-list .user-item.is-blocked,
.user-list .user-item[data-role="blocked"]{
  order: 999 !important;
}
.user-list .user-item.is-blocked .nick-name,
.user-list .user-item[data-role="blocked"] .nick-name{
  color:#b34c4c !important;
}
.user-list .user-item.is-blocked .nick-prefix,
.user-list .user-item[data-role="blocked"] .nick-prefix,
.user-list .user-item.is-blocked .user-avatar,
.user-list .user-item[data-role="blocked"] .user-avatar{
  background:linear-gradient(135deg, #fff0f0 0%, #ffd9d9 100%) !important;
  border-color:rgba(209,98,98,0.26) !important;
  color:#a53d3d !important;
}
.user-list .user-item.is-blocked .nick-status,
.user-list .user-item[data-role="blocked"] .nick-status{
  background:#d16262 !important;
  box-shadow:0 0 0 2px rgba(209,98,98,0.18) !important;
}
.user-list .user-item.is-blocked .nick-role,
.user-list .user-item[data-role="blocked"] .nick-role{
  background:#fff0f0 !important;
  border-color:rgba(209,98,98,0.26) !important;
  color:#b34c4c !important;
}


/* v33 strong visible blocked section */
.user-list{
  display:flex !important;
  flex-direction:column !important;
}
.user-section-divider{
  order: 998 !important;
  margin: 10px 2px 6px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255,240,240,0.98), rgba(255,229,229,0.98)) !important;
  border: 1px solid rgba(209,98,98,0.16) !important;
  color: #b34c4c !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.user-item.is-blocked,
.user-item[data-role="blocked"]{
  order: 999 !important;
}
.user-item.is-blocked .nick-name,
.user-item[data-role="blocked"] .nick-name{
  color:#b34c4c !important;
}
.user-item.is-blocked .user-avatar,
.user-item[data-role="blocked"] .user-avatar,
.user-item.is-blocked .nick-prefix,
.user-item[data-role="blocked"] .nick-prefix{
  background:linear-gradient(135deg, #fff0f0 0%, #ffd9d9 100%) !important;
  border-color:rgba(209,98,98,0.26) !important;
  color:#a53d3d !important;
}
.user-item.is-blocked .nick-status,
.user-item[data-role="blocked"] .nick-status{
  background:#d16262 !important;
  box-shadow:0 0 0 2px rgba(209,98,98,0.18) !important;
}
.user-item.is-blocked .nick-role,
.user-item[data-role="blocked"] .nick-role{
  background:#fff0f0 !important;
  border-color:rgba(209,98,98,0.26) !important;
  color:#b34c4c !important;
}


/* v36 larger header nav buttons */
.topbar-links a,
.header-links a,
header .links a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px 18px !important;
  min-height:44px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.10)) !important;
  border:1px solid rgba(255,255,255,0.22) !important;
  box-shadow:0 10px 22px rgba(8,22,39,0.14) !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
  opacity:1 !important;
  transition:transform 140ms ease, box-shadow 140ms ease, background 140ms ease !important;
}
.topbar-links a:hover,
.header-links a:hover,
header .links a:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 14px 28px rgba(8,22,39,0.18) !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.14)) !important;
}
.topbar-links,
.header-links,
header .links{
  gap:12px !important;
  flex-wrap:wrap !important;
}


/* v38 place status text directly below  */
.title-stack{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}
.title-text{
  display:block !important;
}
.title-detail{
  display:block !important;
  margin-top:6px !important;
  order: 2 !important;
}
.session-links{
  order: 3 !important;
}


/* v39 remove  label */
.title-detail:empty{
  display:none !important;
  margin:0 !important;
}


/* v40 fully remove title detail line */
.title-detail{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}


/* v41 remove Wasted Penguinz Chat title */
.title-text{
  display:none !important;
}


/* v42 center header buttons relative to left status area */
.header-shell,
.topbar-shell,
.status-shell{
  align-items:center !important;
}
.title-stack{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.session-links{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  margin-top:0 !important;
  min-height:24px !important;
}
.status-light{
  align-self:center !important;
  margin-top:0 !important;
}
.session-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
}


/* v43 main menu label + Book WPZ button */
.title-stack{
  gap:8px !important;
}
.main-menu-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  width:100% !important;
}
.main-menu-left{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  min-width:0 !important;
}
.main-menu-label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 14px !important;
  min-height:42px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08)) !important;
  border:1px solid rgba(255,255,255,0.18) !important;
  box-shadow:0 10px 22px rgba(8,22,39,0.10) !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  font-size:12px !important;
  opacity:1 !important;
}
.main-menu-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex:0 0 auto !important;
}
/* Custom Spotify player docked next to the topbar support bar — light
   glass like the rest of the topbar (Spotify's own iframe is dark-only).
   Interior built by setupSpotifyDock() in client.js. */
.topbar-spotify-dock{
  flex:1 1 auto;
  align-self:center;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:270px;
  max-width:480px;
  margin-left:12px;
  padding:9px 14px 9px 9px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(235,245,255,0.85));
  border:1px solid rgba(79, 149, 216, 0.22);
  box-shadow:0 10px 22px rgba(8,22,39,0.10), inset 0 1px 0 rgba(255,255,255,0.6);
  transition:box-shadow 250ms ease;
}
.topbar-spotify-dock:empty{ display:none; } /* until hydrated */
.topbar-spotify-dock.is-playing{
  box-shadow:0 10px 22px rgba(8,22,39,0.10), 0 0 18px rgba(90, 167, 255, 0.35), inset 0 1px 0 rgba(255,255,255,0.6);
}
.spdock-cover{
  width:54px;
  height:54px;
  border-radius:12px;
  object-fit:cover;
  flex:0 0 auto;
  box-shadow:0 4px 10px rgba(8,22,39,0.18);
}
.spdock-info{ flex:1 1 auto; min-width:0; }
.spdock-name{
  font-size:14px;
  font-weight:800;
  color:#17334d;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.spdock-sub{ font-weight:600; color:#6d8195; }
.spdock-track{
  font-size:13px;
  font-weight:600;
  color:#4a637c;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:1px;
}
.spdock-progress{
  height:3px;
  margin-top:5px;
  border-radius:999px;
  background:rgba(79, 149, 216, 0.16);
  overflow:hidden;
}
.spdock-progress i{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, #5aa7ff, #3b82f6);
  transition:width 250ms linear;
}
.spdock-controls{
  display:flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
}
.spdock-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:33px;
  height:33px;
  border-radius:50%;
  border:1px solid rgba(79, 149, 216, 0.22);
  background:rgba(255,255,255,0.85);
  color:#2c4a68;
  cursor:pointer;
  transition:transform 120ms ease, box-shadow 160ms ease, background 160ms ease;
}
.spdock-btn:hover{ transform:translateY(-1px); box-shadow:0 4px 10px rgba(8,22,39,0.14); }
.spdock-btn:active{ transform:scale(0.92); }
.spdock-play{
  width:34px;
  height:34px;
  border:1px solid rgba(255, 255, 255, 0.45);
  color:#fff;
  background:linear-gradient(135deg, #6db3ff 0%, #3d8ce0 100%);
  box-shadow:0 4px 12px rgba(61, 140, 224, 0.45), inset 0 1px 0 rgba(255,255,255,0.35);
}
.spdock-play:hover{ box-shadow:0 6px 16px rgba(61, 140, 224, 0.6), inset 0 1px 0 rgba(255,255,255,0.4); }
.spdock-logo{
  flex:0 0 auto;
  display:inline-flex;
  color:#1ab853;
  transition:transform 120ms ease;
}
.spdock-logo:hover{ transform:scale(1.12); color:#17a94b; }
@media (max-width: 1250px){
  .topbar-spotify-dock{ display:none; } /* no free space to fill on narrow screens */
}
.book-wpz-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:13px 20px !important;
  min-height:46px !important;
  border-radius:16px !important;
  background:linear-gradient(135deg, #d5ebff 0%, #b8dcff 100%) !important;
  border:1px solid rgba(79,149,216,0.22) !important;
  box-shadow:0 12px 24px rgba(8,22,39,0.16) !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;
  color:#17334d !important;
}
.book-wpz-link:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 16px 28px rgba(8,22,39,0.20) !important;
}
@media (max-width: 900px){
  .main-menu-row{
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  .main-menu-right{
    width:100% !important;
    justify-content:flex-start !important;
  }
}


/* v44 move Book WPZ above Friend list in right panel */
.users-panel .book-wpz-panel-wrap{
  margin-bottom:10px;
}
.book-wpz-panel-link{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:46px !important;
  padding:12px 16px !important;
  border-radius:16px !important;
  background:linear-gradient(135deg, #d5ebff 0%, #b8dcff 100%) !important;
  border:1px solid rgba(79,149,216,0.22) !important;
  box-shadow:0 12px 24px rgba(8,22,39,0.14) !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  color:#17334d !important;
  text-decoration:none !important;
}
.book-wpz-panel-link:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 16px 28px rgba(8,22,39,0.18) !important;
}


/* v45 Book WPZ inside MAIN MENU row on far right */
.main-menu-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  width:100% !important;
}
.main-menu-left{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}
.main-menu-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex:0 0 auto !important;
  margin-left:auto !important;
}
.book-wpz-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:13px 20px !important;
  min-height:46px !important;
  border-radius:16px !important;
  background:linear-gradient(135deg, #d5ebff 0%, #b8dcff 100%) !important;
  border:1px solid rgba(79,149,216,0.22) !important;
  box-shadow:0 12px 24px rgba(8,22,39,0.16) !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;
  color:#17334d !important;
  white-space:nowrap !important;
}
.book-wpz-link:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 16px 28px rgba(8,22,39,0.20) !important;
}
.book-wpz-panel-wrap{
  display:none !important;
}
@media (max-width: 900px){
  .main-menu-row{
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  .main-menu-right{
    width:100% !important;
    justify-content:flex-start !important;
    margin-left:0 !important;
  }
}


/* v46 logo returns to main chat */
.brand-home-link{
  cursor:default !important;
}


/* v47 MAIN MENU hover dropdown */
.main-menu-left{
  position: relative !important;
}
.main-menu-trigger{
  position: relative !important;
}
.main-menu-dropdown{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:320px;
  display:none;
  flex-direction:column;
  gap:6px;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,0.985);
  border:1px solid rgba(79,149,216,0.16);
  box-shadow:0 18px 36px rgba(25,44,66,0.18);
  z-index:120;
}
.main-menu-left:hover .main-menu-dropdown,
.main-menu-left:focus-within .main-menu-dropdown{
  display:flex;
}
.main-menu-dd-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6d8195;
  padding:2px 6px 6px;
}
.main-menu-dd-link{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  min-height:44px;
  padding:11px 14px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(239,247,255,0.98));
  border:1px solid rgba(79,149,216,0.14);
  box-shadow:0 8px 18px rgba(103,138,176,0.08);
  color:#2f6fae;
  font-weight:700;
  text-decoration:none;
  cursor:default;
}
.main-menu-dd-link:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(103,138,176,0.12);
}
.main-menu-dd-link.is-guest{
  background:linear-gradient(180deg, rgba(232,244,255,0.95), rgba(219,238,255,0.95));
  color:#17334d;
}


/* v48 MAIN MENU dropdown visibility fix */
.title-shell,
.title-stack,
.main-menu-row,
.main-menu-left{
  position: relative !important;
  overflow: visible !important;
}
.main-menu-row{
  z-index: 200 !important;
}
.main-menu-left{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
}
.main-menu-trigger{
  cursor:default !important;
}
.main-menu-dropdown{
  position:absolute !important;
  top:calc(100% + 10px) !important;
  left:0 !important;
  min-width:340px !important;
  display:none !important;
  flex-direction:column !important;
  gap:6px !important;
  padding:12px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,0.985) !important;
  border:1px solid rgba(79,149,216,0.16) !important;
  box-shadow:0 18px 36px rgba(25,44,66,0.18) !important;
  z-index:9999 !important;
}
.main-menu-row:hover .main-menu-dropdown,
.main-menu-left:hover .main-menu-dropdown,
.main-menu-left:focus-within .main-menu-dropdown,
.main-menu-trigger:hover + .main-menu-dropdown{
  display:flex !important;
}


/* v49 MAIN MENU forced dropdown visibility fix */
.title-shell,
.title-stack,
.main-menu-row,
.main-menu-left{
  position: relative !important;
  overflow: visible !important;
}
.main-menu-row{
  z-index: 400 !important;
}
.main-menu-left{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
}
.main-menu-trigger{
  cursor:default !important;
}
.main-menu-dropdown{
  position:absolute !important;
  top:calc(100% + 10px) !important;
  left:0 !important;
  min-width:340px !important;
  display:none !important;
  flex-direction:column !important;
  gap:6px !important;
  padding:12px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,0.985) !important;
  border:1px solid rgba(79,149,216,0.16) !important;
  box-shadow:0 18px 36px rgba(25,44,66,0.18) !important;
  z-index:99999 !important;
}
.main-menu-left.is-open .main-menu-dropdown,
.main-menu-left:hover .main-menu-dropdown,
.main-menu-left:focus-within .main-menu-dropdown{
  display:flex !important;
}


/* v50 MAIN MENU dropdown opens above the trigger */
.title-shell,
.title-stack,
.main-menu-row,
.main-menu-left{
  position: relative !important;
  overflow: visible !important;
}
.main-menu-row{
  z-index: 500 !important;
}
.main-menu-left{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
}
.main-menu-trigger{
  cursor:default !important;
  position:relative !important;
  z-index: 100001 !important;
}
.main-menu-dropdown{
  position:absolute !important;
  bottom:calc(100% + 10px) !important;
  top:auto !important;
  left:0 !important;
  min-width:340px !important;
  display:none !important;
  flex-direction:column !important;
  gap:6px !important;
  padding:12px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,0.99) !important;
  border:1px solid rgba(79,149,216,0.16) !important;
  box-shadow:0 18px 36px rgba(25,44,66,0.20) !important;
  z-index:100000 !important;
  pointer-events:auto !important;
}
.main-menu-left.is-open .main-menu-dropdown,
.main-menu-left:hover .main-menu-dropdown,
.main-menu-left:focus-within .main-menu-dropdown{
  display:flex !important;
}


/* v51 MAIN MENU only trigger on label, dropdown downward */
.main-menu-left{
  position: relative !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  flex-wrap:wrap !important;
}
.main-menu-trigger{
  position:relative !important;
  z-index:100001 !important;
  cursor:default !important;
}
.main-menu-dropdown{
  position:absolute !important;
  top:calc(100% + 10px) !important;
  bottom:auto !important;
  left:0 !important;
  min-width:340px !important;
  display:none !important;
  flex-direction:column !important;
  gap:6px !important;
  padding:12px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,0.99) !important;
  border:1px solid rgba(79,149,216,0.16) !important;
  box-shadow:0 18px 36px rgba(25,44,66,0.20) !important;
  z-index:100000 !important;
}
.main-menu-trigger:hover + .main-menu-dropdown,
.main-menu-left.is-open .main-menu-dropdown{
  display:flex !important;
}


/* v52 MAIN MENU isolated trigger */
.main-menu-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  width:100% !important;
}
.main-menu-left{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}
.main-menu-trigger-wrap{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
}
.main-menu-trigger{
  position:relative !important;
  z-index:100001 !important;
  cursor:default !important;
}
.main-menu-dropdown{
  position:absolute !important;
  top:calc(100% + 10px) !important;
  left:0 !important;
  bottom:auto !important;
  min-width:340px !important;
  display:none !important;
  flex-direction:column !important;
  gap:6px !important;
  padding:12px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,0.99) !important;
  border:1px solid rgba(79,149,216,0.16) !important;
  box-shadow:0 18px 36px rgba(25,44,66,0.20) !important;
  z-index:100000 !important;
}
.main-menu-trigger-wrap:hover .main-menu-dropdown,
.main-menu-trigger-wrap.is-open .main-menu-dropdown{
  display:flex !important;
}
.session-links{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  min-width:0 !important;
}


/* v53 MAIN MENU portal dropdown */
.main-menu-trigger-wrap{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
}
.main-menu-trigger{
  cursor:default !important;
}
.main-menu-dropdown{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  min-width:340px !important;
  display:none !important;
  flex-direction:column !important;
  gap:6px !important;
  padding:12px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,0.99) !important;
  border:1px solid rgba(79,149,216,0.16) !important;
  box-shadow:0 18px 36px rgba(25,44,66,0.20) !important;
  z-index:2147483000 !important;
}
.main-menu-dropdown.is-open{
  display:flex !important;
}


/* v54 restore clickability for header links */
.main-menu-row,
.main-menu-left,
.main-menu-right,
.session-links{
  position: relative !important;
  z-index: 20 !important;
}

.session-links a,
.book-wpz-link{
  position: relative !important;
  z-index: 30 !important;
  pointer-events: auto !important;
}

.main-menu-trigger-wrap{
  z-index: 40 !important;
}

.main-menu-dropdown{
  pointer-events: auto !important;
}

.main-menu-trigger-wrap:not(.is-open) .main-menu-dropdown{
  pointer-events: none !important;
}

.main-menu-trigger-wrap.is-open .main-menu-dropdown{
  pointer-events: auto !important;
}

.main-menu-left{
  flex-wrap: nowrap !important;
}

.session-links{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.main-menu-right{
  flex: 0 0 auto !important;
}


/* v55 fix header link clickability and MAIN MENU sizing */
.main-menu-row,
.main-menu-left,
.main-menu-right,
.session-links{
  position: relative !important;
  z-index: 50 !important;
  overflow: visible !important;
}
.session-links{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}
.session-links a,
.book-wpz-link{
  position: relative !important;
  z-index: 60 !important;
  pointer-events: auto !important;
}
.main-menu-trigger-wrap{
  position:relative !important;
  z-index: 80 !important;
  display:inline-flex !important;
  align-items:center !important;
}
.main-menu-trigger{
  position:relative !important;
  z-index:81 !important;
  cursor:default !important;
}
.main-menu-dropdown{
  z-index: 2147483000 !important;
  pointer-events: auto !important;
}
.main-menu-trigger-wrap:not(.is-open) .main-menu-dropdown{
  pointer-events:none !important;
}
.main-menu-trigger-wrap.is-open .main-menu-dropdown{
  pointer-events:auto !important;
}

/* Make MAIN MENU same visual size as the other buttons */
.main-menu-label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px 18px !important;
  min-height:44px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.10)) !important;
  border:1px solid rgba(255,255,255,0.22) !important;
  box-shadow:0 10px 22px rgba(8,22,39,0.14) !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
  font-size:inherit !important;
  line-height:1 !important;
  opacity:1 !important;
  text-decoration:none !important;
}
.main-menu-label:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 14px 28px rgba(8,22,39,0.18) !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.14)) !important;
}


/* v56 revert MAIN MENU size, keep links clickable */
.main-menu-label{
  padding:10px 14px !important;
  min-height:42px !important;
  border-radius:14px !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  font-size:12px !important;
  line-height:1 !important;
}


/* v57 smaller MAIN MENU dropdown */
.main-menu-dropdown{
  min-width:240px !important;
  max-width:260px !important;
  padding:8px !important;
  gap:4px !important;
  border-radius:14px !important;
}
.main-menu-dd-label{
  font-size:10px !important;
  padding:2px 4px 4px !important;
}
.main-menu-dd-link{
  min-height:34px !important;
  padding:8px 10px !important;
  border-radius:10px !important;
  font-size:12px !important;
  line-height:1.2 !important;
  box-shadow:0 6px 14px rgba(103,138,176,0.06) !important;
}


/* v89 clickable header links */
.session-link,
.book-wpz-link,
.main-menu-dd-link{
  pointer-events: auto !important;
  position: relative !important;
  z-index: 50 !important;
}
.brand-home-link{
  pointer-events: none !important;
}


/* v90 safe feature pack */
.room-pinned{
  margin:-6px 0 6px;
  padding:7px 10px 7px 12px;
  border-radius:12px;
  background:rgba(213,235,255,.52);
  border:1px solid rgba(79,149,216,.16);
  color:#2f6fae;
  font-size:11.5px;
  line-height:1.35;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  min-width:0;
}
.room-pinned .room-pinned-body{
  flex:1 1 auto;
  min-width:0;
  overflow-wrap:anywhere;
}
.room-pinned .room-pinned-edit{
  flex:0 0 auto;
  margin:0 !important;
  padding:3px 8px !important;
  font-size:11px !important;
  border-radius:8px !important;
}
.room-pinned strong{
  color:#17334d;
}
.channel-item{
  position:relative;
}
.channel-unread{
  margin-left:auto;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#eaf5ff;
  border:1px solid rgba(79,149,216,.16);
  color:#2f6fae;
  font-size:11px;
  font-weight:800;
}
.message-reply-bar{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  /* .main-column is a 10px-gap flex column — pull the composer up so
     the reply bar hugs the text box (Aug 2026). */
  margin:0 0 -10px;
  padding:8px 12px 12px;
  border-radius:12px 12px 0 0;
  background:rgba(213,235,255,.52);
  border:1px solid rgba(79,149,216,.16);
  color:#2f6fae;
  font-size:12px;
}
.message-reply-bar.is-open{
  display:flex;
}
.message-reply-clear{
  border:1px solid rgba(79,149,216,.16);
  background:#fff;
  color:#2f6fae;
  border-radius:10px;
  padding:4px 8px;
  cursor:default;
}
.message-tools{
  /* Floating action bar (Discord-style): overlays the top-right of the
     row on hover, takes ZERO layout space — no row jumping. */
  position:absolute;
  top:-13px;
  right:10px;
  z-index:5;
  display:flex;
  gap:5px;
  padding:5px 8px;
  /* Same compact scale as the own-message bar — unscaled it renders
     oversized react circles (Aug 2026). */
  transform: scale(0.82);
  transform-origin: top right;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.65);
  background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(235,245,255,0.92));
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  box-shadow:0 6px 16px rgba(50,100,160,0.16);
  opacity:0;
  visibility:hidden;
  transition:opacity 110ms ease;
  margin:0;
}
.message-row:hover .message-tools,
.message-row:focus-within .message-tools{
  opacity:1;
  visibility:visible;
}
.message-tool{
  border:1px solid rgba(79,149,216,.14) !important;
  background:#fff !important;
  color:#2f6fae !important;
  border-radius:999px !important;
  padding:4px 10px !important;
  font-size:13px !important;
  line-height:1.4 !important;
  min-height:0 !important;
  box-shadow:none !important;
  cursor:default;
}
.message-reactions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:6px;
}
.message-reaction-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:1px solid rgba(79,149,216,.14);
  background:#f8fbff;
  color:#2f6fae;
  border-radius:999px;
  padding:4px 8px;
  font-size:11px;
  font-weight:700;
  font-family: inherit;
  line-height: 1;
  cursor: pointer !important;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.message-reaction-pill:hover {
  background: linear-gradient(135deg, rgba(90,167,255,0.16) 0%, rgba(255,255,255,0.55) 100%);
  border-color: rgba(90,167,255,0.35);
  transform: translateY(-1px);
}
.message-reaction-pill:active {
  transform: scale(0.94);
}
/* Highlight pills that include the current user's reaction so it's
   visually clear which ones will toggle off on a second click. */
.message-reaction-pill.is-own{
  background: linear-gradient(135deg, rgba(90,167,255,0.18) 0%, rgba(255,255,255,0.45) 100%);
  border-color: rgba(90,167,255,0.45);
  color: #17334d;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}
.message-reaction-pill.is-own:hover {
  background: linear-gradient(135deg, rgba(90,167,255,0.32) 0%, rgba(255,255,255,0.55) 100%);
  border-color: rgba(90,167,255,0.55);
}
.friend-requests-card{
  margin-top:10px;
  border-radius:16px;
  background:#f8fbff;
  border:1px solid rgba(79,149,216,.12);
  padding:10px;
}
.friend-requests-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.friend-request-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 0;
  border-top:1px solid rgba(79,149,216,.10);
}
.friend-request-row:first-of-type{
  border-top:0;
}
.friend-request-meta{
  min-width:0;
}
.friend-request-name{
  font-weight:800;
  color:#17334d;
  font-size:13px;
}
.friend-request-note{
  font-size:11px;
  color:#6d8195;
}
.friend-request-actions{
  display:flex;
  gap:5px;
  flex-wrap:nowrap;      /* Accept + Decline always on one row */
  flex: 0 0 auto;
  align-items:center;
}
/* Accept/Decline — liquid-glass light-blue pills matching the site theme
   (they previously rendered as bare default browser buttons). */
.friend-accept-btn,
.friend-decline-btn{
  appearance: none;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.friend-accept-btn{
  border: 1px solid rgba(90, 167, 255, 0.25) !important;
  background: linear-gradient(135deg, #dcecff 0%, #bedcff 100%) !important;
  color: #17334d !important;
  box-shadow: 0 6px 14px rgba(79, 149, 216, 0.18), inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
.friend-accept-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 9px 18px rgba(79, 149, 216, 0.26), inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
.friend-decline-btn{
  border: 1px solid rgba(120, 168, 224, 0.22) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(240,248,255,0.85)) !important;
  color: #4d6b8c !important;
  box-shadow: 0 4px 10px rgba(8, 22, 39, 0.06), inset 0 1px 0 rgba(255,255,255,0.7) !important;
}
.friend-decline-btn:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ffffff, #eef6ff) !important;
}
.friend-request-btn{
  border:1px solid rgba(79,149,216,.14);
  background:#fff;
  color:#2f6fae;
  border-radius:10px;
  padding:6px 8px;
  font-size:11px;
  font-weight:700;
  cursor:default;
}
.friend-request-btn.primary{
  background:linear-gradient(135deg,#d5ebff,#b8dcff);
  color:#17334d;
}


/* v92 guest users should not see friend requests card */


/* v95 friend add toast notification */
.wpz-toast-stack{
  position:fixed;
  right:18px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:2147483647;
  pointer-events:none;
}
.wpz-toast.is-visible{
  opacity:1;
  transform:translateY(0);
}
.wpz-toast--xp{
  background:linear-gradient(135deg, rgba(255,247,224,0.98), rgba(255,228,168,0.98));
  border-color:rgba(255,180,80,0.45);
  color:#7a4a00;
}
/* Light-blue success accent — matches the announcement modal / site
   theme. Used for owner broadcast confirmations and similar positive
   notifications so they don't clash with the orange xp toast. */
.wpz-toast--success{
  background: linear-gradient(135deg, rgba(232, 244, 255, 0.98), rgba(200, 224, 255, 0.98));
  border-color: rgba(110, 160, 220, 0.5);
  color: #1d4a85;
}
/* Soft red error accent — used for failed broadcast attempts so
   they read as a clear error without clashing with the orange xp toast. */
.wpz-toast--error{
  background: linear-gradient(135deg, rgba(255, 232, 232, 0.98), rgba(255, 210, 210, 0.98));
  border-color: rgba(220, 100, 100, 0.5);
  color: #8a1f1f;
}


/* v96 global toast notifications */
.wpz-toast-stack{
  position:fixed;
  right:18px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:2147483647;
  pointer-events:none;
}
.wpz-toast{
  min-width:220px;
  max-width:340px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.98);
  border:1px solid rgba(79,149,216,0.16);
  box-shadow:0 18px 36px rgba(25,44,66,0.18);
  color:#17334d;
  font-size:13px;
  font-weight:700;
  transform:translateY(8px);
  opacity:0;
  transition:opacity 180ms ease, transform 180ms ease;
}
.wpz-toast.is-visible{
  opacity:1;
  transform:translateY(0);
}


/* v98 feature pack */
.wpz-top-tools{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:10px;
}
.wpz-bell{
  position:relative;
}
.wpz-bell-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#eaf5ff;
  border:1px solid rgba(79,149,216,.16);
  color:#2f6fae;
  font-size:10px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.wpz-profile-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index:2147483646;
  padding:20px;
}
.wpz-notification-panel.is-open,
.wpz-profile-modal.is-open{
  display:flex;
}
.wpz-modal-card{
  width:min(560px, 96vw);
  max-height:84vh;
  overflow:auto;
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(28px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(210%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
  padding: 16px;
}
.wpz-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.wpz-modal-title{
  font-size:20px;
  font-weight:900;
  color:#17334d;
}
.wpz-close{
  border:1px solid rgba(79,149,216,.14);
  background:#fff;
  color:#2f6fae;
  border-radius:10px;
  padding:7px 10px;
  cursor:default;
}
.wpz-notification-list,
.wpz-profile-grid,
.wpz-friend-status-list,
.wpz-mod-card,
.wpz-track-card{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.wpz-notification-item,
.wpz-friend-status-item,
.wpz-mod-item,
.wpz-track-item{
  padding:10px 12px;
  border-radius:14px;
  background:#f8fbff;
  border:1px solid rgba(79,149,216,.10);
}
.wpz-profile-hero{
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:14px;
  margin-bottom:14px;
}
.wpz-avatar{
  width:72px;
  height:72px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:22px;
  font-weight:900;
  color:#25527d;
  background:linear-gradient(135deg,#e8f4ff,#cfe7ff);
  border:1px solid rgba(79,149,216,.18);
}
.wpz-profile-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
.wpz-profile-cell{
  padding:10px 12px;
  border-radius:14px;
  background:#f8fbff;
  border:1px solid rgba(79,149,216,.10);
}
.wpz-k{
  font-size:11px;
  color:#6d8195;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
}
.wpz-v{
  margin-top:5px;
  font-size:14px;
  color:#17334d;
  font-weight:700;
}

/* Glass-style confirm modal — replaces native window.confirm() */
.wpz-confirm-modal{
  position:fixed;
  inset:0;
  display:none;
  background:rgba(95, 132, 171, 0.18);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  z-index:2147483647;
  padding:20px;
}
/* Two layouts: centered (default) and anchored (set by JS when an
   anchor element is supplied — the card positions itself adjacent to
   the click target). The layout classes only control positioning;
   visibility is gated entirely by the `is-open` class so removing
   `is-open` actually hides the modal again. */
.wpz-confirm-modal.is-centered{
  align-items:center;
  justify-content:center;
}
.wpz-confirm-modal[data-anchored="1"]{}
.wpz-confirm-modal.is-open{
  display:flex;
  animation: wpzConfirmFade 160ms ease-out;
}
.wpz-confirm-modal.is-open[data-anchored="1"]{
  display:block;
}
@keyframes wpzConfirmFade{
  from{ opacity:0; }
  to  { opacity:1; }
}
.wpz-confirm-card{
  position: absolute;
  width:min(360px, calc(100vw - 40px));
  padding:14px 18px 12px;
  background: rgba(245, 248, 255, 0.62) !important;
  backdrop-filter: blur(40px) saturate(220%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 20px !important;
  box-shadow:
    0 22px 50px rgba(31, 38, 135, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
  color: #17334d;
  animation: wpzConfirmPop 180ms cubic-bezier(.2, .9, .3, 1.2);
}
/* Centered fallback — used when no anchor is supplied. Renders the
   card as a flex-centered child of the modal overlay. */
.wpz-confirm-modal.is-centered .wpz-confirm-card{
  position: relative;
  margin: auto;
}
@keyframes wpzConfirmPop{
  from{ transform: translateY(8px) scale(0.97); opacity:0; }
  to  { transform: translateY(0)    scale(1);    opacity:1; }
}
.wpz-confirm-title{
  font-size:14px;
  font-weight:800;
  color:#17334d;
  margin-bottom:6px;
  letter-spacing:-0.01em;
}
.wpz-confirm-message{
  font-size:12.5px;
  line-height:1.45;
  color:#36506d;
  margin-bottom:12px;
  overflow-wrap:anywhere;
  /* Callers may pass multi-line messages (e.g. the signup email
     confirmation puts the address on its own line). */
  white-space:pre-line;
}

/* Input inside the glass confirm/prompt card. Matches the room-card
   inputs in the rest of the app — soft border, inset highlight, blue
   focus ring. Sized full-width so long pinned messages / names display
   on one line.

   Two element types share the `wpz-confirm-input` class:
     - <input>        — single-line (used by quick-tools prompts etc.)
     - <textarea>     — multi-line (used by the pinned-message editor)
   The shared rule below keeps visual rhythm (border, radius, glass fill,
   focus ring) but explicitly resets `min-height` / `resize` so the
   single-line input doesn't render as a 110px tall block. The textarea
   override further down lifts the minimum to ~4 lines. */
.wpz-confirm-input{
  width:100%;
  font-family:inherit;
  font-size:13px;
  line-height:1.4;
  color:#17334d;
  padding:8px 12px;
  margin-bottom:12px;
  border-radius:10px;
  border:1px solid rgba(79, 149, 216, 0.22);
  background:rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  outline:none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
/* Single-line input — modest height, no resize handle, no min-height.
   This is the default for the quick-tools /ban, /kick, etc. prompts
   so they don't render as a giant empty box. */
input.wpz-confirm-input{
  height: 36px;
  min-height: 0;
  resize: none;
}
/* Multi-line textarea — give it breathing room so 3-4 lines are visible
   without scrolling. The user can still grab the corner to drag taller. */
textarea.wpz-confirm-input{
  min-height: 96px;
  resize: vertical;
}
.wpz-confirm-input:focus{
  border-color: rgba(79, 149, 216, 0.55);
  background:rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 3px rgba(79, 149, 216, 0.18),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.wpz-confirm-input::placeholder{
  color:#8aa3bd;
}
.wpz-confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.wpz-confirm-btn{
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  padding:5px 12px;
  border-radius:9px;
  border:1px solid rgba(255, 255, 255, 0.6);
  cursor:default;
  transition: transform 140ms, filter 140ms, box-shadow 140ms;
}
.wpz-confirm-btn:focus{ outline:none; }
.wpz-confirm-cancel{
  background: rgba(255, 255, 255, 0.55);
  color:#36506d;
  box-shadow: 0 1px 4px rgba(31, 38, 135, 0.08);
}
.wpz-confirm-cancel:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(31, 38, 135, 0.12);
}
.wpz-confirm-ok{
  background: linear-gradient(135deg, #6fb1f3 0%, #4f95d8 100%);
  color:#fff;
  box-shadow: 0 3px 10px rgba(79, 149, 216, 0.32);
}
.wpz-confirm-ok:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(79, 149, 216, 0.42);
}
.wpz-confirm-ok.is-danger{
  background: linear-gradient(135deg, #ff8a8a 0%, #ef5a5a 100%);
  box-shadow: 0 3px 10px rgba(239, 90, 90, 0.32);
}
.wpz-confirm-ok.is-danger:hover{
  box-shadow: 0 5px 14px rgba(239, 90, 90, 0.42);
}

/* ── wpz-donate — single unified donation card ──────────────────────
   Replaces three sequential native prompts (amount → name → message)
   with one liquid-glass card showing everything at once. */
.wpz-donate{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wpz-donate-amount-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
}
.wpz-donate-amount-readout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  border-radius:10px;
  background: rgba(255, 255, 255, 0.55);
  border:1px solid rgba(79, 149, 216, 0.18);
  font-size:13px;
  color:#36506d;
}
.wpz-donate-amount-readout strong{
  font-size:18px;
  font-weight:800;
  color:#17334d;
}
.wpz-donate-field-label{
  display:block;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#4d6b8c;
  margin-bottom:4px;
}
.wpz-donate-field{
  width:100%;
  font-family:inherit;
  font-size:13px;
  line-height:1.4;
  color:#17334d;
  padding:7px 10px;
  border-radius:9px;
  border:1px solid rgba(79, 149, 216, 0.18);
  background:rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  outline:none;
  resize:vertical;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.wpz-donate-field:focus{
  border-color:#6db3ff;
  background:rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 3px rgba(109, 179, 255, 0.18);
}
textarea.wpz-donate-field{
  min-height:54px;
  max-height:140px;
  font-family:inherit;
}
/* Breathing room between the announce toggle and the Cancel/Support row. */
#wpzDonateModal .wpz-confirm-actions{
  margin-top: 16px;
}
#wpzDonateModal .wpz-donate-announce-toggle{
  margin-top: 2px;
}
.wpz-donate-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  color:#4d6b8c;
  margin-top:2px;
}
.wpz-donate-summary .badge{
  font-size:10px;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255, 226, 197, 0.65);
  color:#6b2a05;
  border:1px solid rgba(255, 140, 66, 0.4);
}
.wpz-donate-anon-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:#36506d;
  cursor:pointer;
}
.wpz-donate-anon-toggle input{
  margin:0;
  accent-color:#6db3ff;
}
.wpz-inline-tools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.wpz-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  background:#eef6ff;
  border:1px solid rgba(79,149,216,.14);
  color:#2f6fae;
  font-size:11px;
  font-weight:800;
}
.wpz-online-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#41c16b;
  display:inline-block;
}
.wpz-offline-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#a3b4c4;
  display:inline-block;
}
.wpz-track-widget{
  margin-top:10px;
  padding:10px 12px;
  border-radius:16px;
  background:linear-gradient(135deg,#d5ebff,#b8dcff);
  border:1px solid rgba(79,149,216,.18);
  box-shadow:0 10px 22px rgba(8,22,39,.08);
}
.wpz-track-title{
  font-size:11px;
  color:#356fa8;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
}
.wpz-track-name{
  margin-top:4px;
  font-size:16px;
  font-weight:900;
  color:#17334d;
}
.wpz-track-meta{
  margin-top:4px;
  font-size:12px;
  color:#2f6fae;
}
.wpz-mute-tools{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}
.wpz-mini-btn{
  border:1px solid rgba(79,149,216,.14);
  background:#fff;
  color:#2f6fae;
  border-radius:999px;
  padding:4px 8px;
  font-size:11px;
  font-weight:800;
  cursor:default;
}
@media (max-width:700px){
  .wpz-profile-grid{grid-template-columns:1fr;}
}


/* v102 dedicated main chat context menu */
#wpzMainChatContextMenu{
  position:fixed;
  left:0;
  top:0;
  min-width:158px;
  display:none;
  flex-direction:column;
  gap:0;
  padding:6px;
  border-radius:16px;
  /* Liquid glass: heavy translucency — the chat shows through. */
  background:linear-gradient(160deg, rgba(228,242,255,0.5) 0%, rgba(255,255,255,0.58) 55%, rgba(206,232,255,0.48) 100%);
  backdrop-filter: blur(36px) saturate(210%);
  -webkit-backdrop-filter: blur(36px) saturate(210%);
  border:1px solid rgba(255,255,255,0.65);
  box-shadow:0 16px 38px rgba(31,38,135,0.2), inset 0 1px 0 rgba(255,255,255,0.75);
  z-index:2147483647;
}
#wpzMainChatContextMenu.is-open{
  display:flex;
}
#wpzMainChatContextMenu .wpz-mainchat-head{
  padding:4px 6px 8px;
}
#wpzMainChatContextMenu .wpz-mainchat-eye{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6d8195;
}
#wpzMainChatContextMenu .wpz-mainchat-name{
  margin-top:1px;
  color:#17334d;
  font-size:12.5px;
  font-weight:800;
}
#wpzMainChatContextMenu .wpz-mainchat-btn{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  /* Some wiring toggles buttons with inline display:block — keep the
     label left-aligned in that mode too. */
  text-align:left !important;
  width:100%;
  min-height:0 !important;
  padding:5px 10px !important;
  border-radius:10px !important;
  background:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(240,248,255,0.35)) !important;
  border:1px solid rgba(255,255,255,0.6) !important;
  box-shadow:0 2px 8px rgba(50,100,160,0.08), inset 0 1px 0 rgba(255,255,255,0.65) !important;
  color:#1a3f6b !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  line-height:1.4 !important;
  cursor:pointer !important;
  transition:transform 130ms ease, background 130ms ease, box-shadow 130ms ease;
}
#wpzMainChatContextMenu .wpz-mainchat-btn:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg, #ffffff, #d9eaff) !important;
  box-shadow:0 5px 12px rgba(79,149,216,0.2), inset 0 1px 0 rgba(255,255,255,0.75) !important;
}
#wpzMainChatContextMenu .wpz-mainchat-btn + .wpz-mainchat-btn{
  margin-top:4px;
}
/* Destructive actions read red, glassy */
#wpzMainChatContextMenu .wpz-mainchat-btn[data-wpz-action="delete"],
#wpzMainChatContextMenu .wpz-mainchat-btn[data-wpz-action="mute"]{
  color:#c0392b !important;
}
#wpzMainChatContextMenu .wpz-mainchat-btn[data-wpz-action="delete"]:hover,
#wpzMainChatContextMenu .wpz-mainchat-btn[data-wpz-action="mute"]:hover{
  background:linear-gradient(180deg, #ffffff, #ffe3de) !important;
  border-color:rgba(192,57,43,0.3) !important;
}


/* v106 Friend list show profile */
.wpz-show-profile-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}


/* v107 social detail actions layout */
.social-detail-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
/* Compact action pills that wrap instead of clipping at the (now capped)
   window width. */
.social-detail-actions .social-primary,
.social-detail-actions .social-secondary{
  flex:1 1 auto !important;
  padding:6px 10px !important;
  font-size:12px !important;
  white-space:nowrap !important;
}


/* v113 restore toast visibility */
.wpz-toast-stack{
  position:fixed;
  right:18px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:2147483647;
  pointer-events:none;
}
.wpz-toast{
  min-width:220px;
  max-width:340px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.98);
  border:1px solid rgba(79,149,216,0.16);
  box-shadow:0 18px 36px rgba(25,44,66,0.18);
  color:#17334d;
  font-size:13px;
  font-weight:700;
  transform:translateY(8px);
  opacity:0;
  transition:opacity 180ms ease, transform 180ms ease;
}
.wpz-toast.is-visible{
  opacity:1;
  transform:translateY(0);
}


/* v114 toast restore */
.wpz-toast-stack{
  position:fixed;
  right:18px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:2147483647;
  pointer-events:none;
}
.wpz-toast{
  min-width:220px;
  max-width:340px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.98);
  border:1px solid rgba(79,149,216,0.16);
  box-shadow:0 18px 36px rgba(25,44,66,0.18);
  color:#17334d;
  font-size:13px;
  font-weight:700;
  transform:translateY(8px);
  opacity:0;
  transition:opacity 180ms ease, transform 180ms ease;
}
.wpz-toast.is-visible{
  opacity:1;
  transform:translateY(0);
}


/* v116 friend persistence toast */
.wpz-toast-stack{
  position:fixed;
  right:18px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:2147483647;
  pointer-events:none;
}
.wpz-toast{
  min-width:220px;
  max-width:340px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.98);
  border:1px solid rgba(79,149,216,0.16);
  box-shadow:0 18px 36px rgba(25,44,66,0.18);
  color:#17334d;
  font-size:13px;
  font-weight:700;
  transform:translateY(8px);
  opacity:0;
  transition:opacity 180ms ease, transform 180ms ease;
}
.wpz-toast.is-visible{ opacity:1; transform:translateY(0); }


/* v128 UI updates */
.session-link{
  min-height: 42px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
.user-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  justify-content:flex-end !important;
  flex-wrap:wrap !important;
}
#logoutPanelButton{
  order:-1 !important;
}


/* v129 menu sizing + right actions */
.session-link{
  min-height: 48px !important;
  padding: 12px 18px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}


/* v130 inbox + notification polish */
.wpz-toast{
  border:2px solid rgba(79,149,216,0.45) !important;
  background:linear-gradient(180deg, rgba(234,245,255,0.98), rgba(255,255,255,0.98)) !important;
  font-size:14px !important;
  font-weight:800 !important;
  color:#17334d !important;
}

/* === wpzInbox v2 — full-featured glass Messenger === */
.wpz-inbox{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: min(820px, calc(100vw - 28px));
  height: min(620px, calc(100vh - 28px));
  min-width: 480px;
  min-height: 380px;
  resize: both;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(220,235,255,0.42) 0%, rgba(255,255,255,0.55) 100%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    0 26px 60px rgba(31, 38, 135, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(40px) saturate(220%);
  -webkit-backdrop-filter: blur(40px) saturate(220%);
  z-index: 71;
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 58px 1fr;
  font-family: inherit;
  color: #17334d;
}
.wpz-inbox.hidden{ display: none !important; }

.wpz-inbox-shell{
  display: contents;
}

.wpz-inbox-top{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(79,149,216,0.12);
  cursor: grab;
  user-select: none;
  background: rgba(255,255,255,0.18);
}
.wpz-inbox-top:active{ cursor: grabbing; }
.wpz-inbox-title{
  font-size: 17px;
  font-weight: 800;
  color: #17334d;
  letter-spacing: 0.2px;
}
.wpz-inbox-top-actions{ display: flex; gap: 6px; }

.wpz-inbox-icon-btn{
  width: 32px; height: 32px; border-radius: 50%;
  /* Liquid glass — same recipe as the topbar buttons. */
  border: 1px solid rgba(255,255,255,0.65);
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(240,248,255,0.5));
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  box-shadow: 0 4px 12px rgba(50,100,160,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
  color: #1a3f6b; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; padding: 0;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.wpz-inbox-icon-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(50,100,160,0.18);
  filter: brightness(1.1);
}
.wpz-inbox-icon-btn.is-danger{
  background: linear-gradient(180deg, #ffe2e2, #ffc7c7);
  color: #7f1f1f; border-color: rgba(196,61,61,0.32);
}
.wpz-inbox-icon-btn.is-recording{
  background: linear-gradient(180deg, #ffb1b1, #ff7a7a);
  color: #fff; border-color: rgba(196,61,61,0.55);
  box-shadow: 0 0 0 0 rgba(255,90,90,0.6);
  animation: wpzInboxPulse 1.2s infinite;
}
@keyframes wpzInboxPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,90,90,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255,90,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,90,90,0); }
}

.wpz-inbox-left{
  grid-column: 1; grid-row: 2;
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid rgba(79,149,216,0.10);
  background: rgba(255,255,255,0.18);
}
.wpz-inbox-search-wrap{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(79,149,216,0.10);
}
.wpz-inbox-search-wrap input{
  width: 100%;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(90,167,255,0.18);
  background: rgba(255,255,255,0.65);
  font-size: 13px;
  color: #17334d;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.wpz-inbox-search-wrap input:focus{
  border-color: rgba(79,149,216,0.55);
  box-shadow: 0 0 0 3px rgba(79,149,216,0.18);
  background: rgba(255,255,255,0.95);
}
.wpz-inbox-thread-list{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wpz-inbox-thread{
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: inherit;
  transition: background 140ms ease, border-color 140ms ease;
}
.wpz-inbox-thread:hover{
  background: rgba(255,255,255,0.55);
  border-color: rgba(79,149,216,0.10);
}
.wpz-inbox-thread.is-active{
  background: linear-gradient(180deg, rgba(232,244,255,0.95), rgba(219,238,255,0.95));
  border-color: rgba(79,149,216,0.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}
.wpz-inbox-thread-avatar{
  display: flex; align-items: center; justify-content: center;
}
.wpz-inbox-thread-meta{
  display: flex; flex-direction: column; min-width: 0;
}
.wpz-inbox-thread-name{
  font-size: 13px; font-weight: 700; color: #17334d;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wpz-inbox-thread-preview{
  font-size: 12px; color: #6d8195;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wpz-inbox-thread-right{
  display: flex; align-items: center; justify-content: flex-end;
}
.wpz-inbox-thread-unread{
  background: linear-gradient(135deg, #4c8cd1, #397ac0);
  color: #fff; font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 999px;
  min-width: 20px; text-align: center;
  box-shadow: 0 2px 6px rgba(76,140,209,0.4);
}

.wpz-inbox-right{
  grid-column: 2; grid-row: 2;
  display: flex; flex-direction: column; min-height: 0;
}
.wpz-inbox-conv-head{
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(79,149,216,0.10);
  background: rgba(255,255,255,0.18);
}
.wpz-inbox-back{ display: none; }
.wpz-inbox-conv-name{
  flex: 1 1 auto;
  font-size: 15px; font-weight: 800; color: #17334d;
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wpz-inbox-conv-actions{ display: flex; gap: 6px; }

.wpz-inbox-log{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.30) 0%, transparent 40%),
    radial-gradient(circle at 88% 82%, rgba(220,235,255,0.20) 0%, transparent 45%);
}
.wpz-inbox-empty{
  margin: auto;
  color: #6d8195;
  font-size: 13px;
  text-align: center;
  padding: 14px;
}

.wpz-inbox-recording{
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px;
  background: rgba(255, 220, 220, 0.55);
  border-top: 1px solid rgba(196,61,61,0.18);
  font-size: 12px; color: #7f1f1f; font-weight: 700;
}
.wpz-inbox-recording.hidden{ display: none !important; }
.wpz-inbox-rec-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #d12d2d;
  box-shadow: 0 0 0 0 rgba(209,45,45,0.6);
  animation: wpzInboxDotPulse 1.2s infinite;
}
@keyframes wpzInboxDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(209,45,45,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(209,45,45,0); }
  100% { box-shadow: 0 0 0 0 rgba(209,45,45,0); }
}
.wpz-inbox-rec-hint{
  flex: 1 1 auto;
  font-weight: 600;
  color: #7f1f1f;
  opacity: 0.85;
}

.wpz-inbox-compose{
  display: flex; gap: 6px; align-items: center;
  padding: 10px 12px;
  border-top: 1px solid rgba(79,149,216,0.10);
  background: rgba(255,255,255,0.45);
}
.wpz-inbox-compose input[type="text"]{
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(90,167,255,0.18);
  background: rgba(255,255,255,0.85);
  font-size: 13px;
  color: #17334d;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.wpz-inbox-compose input[type="text"]:focus{
  border-color: rgba(79,149,216,0.55);
  box-shadow: 0 0 0 3px rgba(79,149,216,0.18);
  background: rgba(255,255,255,0.98);
}
.wpz-inbox-send{
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 800; font-size: 12.5px;
  /* Accent glass: translucent blue with hairline + sheen, matching the
     theme's primary buttons. */
  border: 1px solid rgba(255,255,255,0.55);
  background: linear-gradient(135deg, rgba(120,178,240,0.88), rgba(64,124,196,0.9));
  backdrop-filter: blur(12px) saturate(170%);
  -webkit-backdrop-filter: blur(12px) saturate(170%);
  color: #fff; cursor: pointer;
  box-shadow: 0 6px 14px rgba(50,100,160,0.28), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.wpz-inbox-send:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(50,100,160,0.32);
  filter: brightness(1.05);
}

/* ── Inbox theme pass: full liquid glass ─────────────────────────────
   The shell was glass, but the interior still read flat — bubbles,
   composer and audio clips now match the Support-Center recipe. */
.wpz-inbox{
  background: linear-gradient(160deg, rgba(220, 235, 255, 0.5) 0%, rgba(255, 255, 255, 0.6) 55%, rgba(200, 226, 255, 0.48) 100%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 26px 60px rgba(31, 38, 135, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(44px) saturate(230%) brightness(1.04);
  -webkit-backdrop-filter: blur(44px) saturate(230%) brightness(1.04);
  animation: wpzScaleIn 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Message bubbles: frosted white for them, blue-gradient glass for own —
   the same pairing as the support chat. */
.wpz-inbox .pm-bubble{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.66)) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 12px rgba(31, 38, 135, 0.07) !important;
}
.wpz-inbox .pm-row.is-own .pm-bubble{
  background: linear-gradient(135deg, rgba(220, 236, 255, 0.95), rgba(190, 220, 255, 0.85)) !important;
  border-color: rgba(79, 149, 216, 0.3) !important;
}
.wpz-inbox .pm-time{ color: #7fa3c4; font-weight: 600; }
/* Voice clips: pill-clipped so the native player sits like a bubble. */
.wpz-inbox audio{
  border-radius: 999px;
  height: 36px;
  max-width: 100%;
  box-shadow: 0 3px 8px rgba(31, 38, 135, 0.12);
}
/* Threads: glass rows with a soft lift, active gets the blue ring. */
.wpz-inbox-thread:hover{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5));
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 10px rgba(31, 38, 135, 0.07);
}
.wpz-inbox-thread.is-active{
  background: linear-gradient(180deg, rgba(232, 244, 255, 0.95), rgba(219, 238, 255, 0.9));
  border-color: rgba(90, 167, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 2px rgba(90, 167, 255, 0.18), 0 6px 14px rgba(79, 149, 216, 0.15);
}
/* Blocked conversations: rose tint in every state (idle/hover/active) so
   the blue selection theme never hides the blocked status. */
.wpz-inbox-thread.is-blocked,
.wpz-inbox-thread.is-blocked:hover,
.wpz-inbox-thread.is-blocked.is-active{
  background: linear-gradient(180deg, rgba(255, 238, 242, 0.95), rgba(251, 221, 229, 0.85));
  border-color: rgba(194, 102, 131, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 10px rgba(194, 102, 131, 0.12);
}
.wpz-inbox-thread.is-blocked.is-active{
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 2px rgba(194, 102, 131, 0.22), 0 6px 14px rgba(194, 102, 131, 0.16);
}
.wpz-inbox-thread.is-blocked .wpz-inbox-thread-name{ color: #a0405a; }
.wpz-inbox-thread.is-blocked .wpz-inbox-thread-preview{ color: #c08698; }
/* Merchandise floating catalog window (in-stock only). */
.merch-catalog-card{
  width: min(860px, calc(100vw - 32px)) !important;
  height: min(640px, calc(100vh - 60px));
  display: flex;
  flex-direction: column;
}
.merch-catalog-grid{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 14px;
}
.merch-catalog-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(90, 167, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.75) !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.merch-catalog-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(31, 38, 135, 0.14) !important;
  border-color: rgba(90, 167, 255, 0.4) !important;
}
.merch-catalog-item img{
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}
.merch-catalog-noimg{
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 40px;
  border-radius: 12px;
  background: rgba(220, 236, 255, 0.6);
}
.merch-catalog-name{
  font-size: 12.5px;
  font-weight: 800;
  color: #17334d;
  text-align: center;
  line-height: 1.25;
}
.merch-catalog-price{
  font-size: 12px;
  font-weight: 700;
  color: #2f6fae;
}
.merch-catalog-back{
  margin-right: 10px;
  padding: 5px 12px !important;
  font-size: 11.5px !important;
  font-weight: 800;
  border-radius: 999px !important;
  border: 1px solid rgba(90, 167, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  color: #2f6fae !important;
  cursor: pointer;
  box-shadow: none !important;
  white-space: nowrap;
  flex: 0 0 auto;
}
.merch-catalog-back:hover{ background: #eef6ff !important; }
.merch-catalog-loading{
  grid-column: 1 / -1;
  padding: 30px;
  text-align: center;
  font-size: 13px;
  color: #5b7794;
}

/* Read-only System conversation: lock note replaces the compose row. */
.wpz-inbox-readonly{
  margin: 8px 12px 12px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #5b7794;
  text-align: center;
  background: rgba(220, 236, 255, 0.5);
  border: 1px solid rgba(90, 167, 255, 0.22);
}
.wpz-inbox-readonly.hidden{ display: none !important; }

/* ── 📩 PM message requests ─────────────────────────────────────────────── */
/* Section headings splitting Requests from accepted Conversations. */
.wpz-inbox-section{
  padding: 12px 12px 6px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8ba3ba;
}
.wpz-inbox-thread-request{
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  color: #a4650b;
  background: rgba(255, 190, 60, 0.22);
  border: 1px solid rgba(214, 154, 32, 0.35);
}
.wpz-inbox-thread.is-request{
  background: rgba(255, 205, 110, 0.1);
  border-color: rgba(214, 154, 32, 0.28);
}
/* Accept / Decline bar, sits where the composer would be. */
.wpz-inbox-request{
  margin: 8px 12px 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 205, 110, 0.14);
  border: 1px solid rgba(214, 154, 32, 0.3);
  display: flex; flex-direction: column; gap: 10px;
}
.wpz-inbox-request.hidden{ display: none !important; }
.wpz-inbox-request-text{
  font-size: 12.5px; line-height: 1.5; color: #6a5a3a; text-align: center;
}
.wpz-inbox-request-text strong{ color: #17334d; }
.wpz-inbox-request-actions{
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.wpz-inbox-request-actions button{
  padding: 8px 20px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 900;
  transition: filter 120ms ease, transform 120ms ease;
}
.wpz-inbox-request-actions button:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.wpz-inbox-req-accept{ background: #38b26b; color: #fff; }
.wpz-inbox-req-decline{
  background: transparent; color: #6d8195;
  border: 1px solid rgba(109, 129, 149, 0.35) !important;
}
.wpz-inbox-req-block{
  background: transparent; color: #d2564f;
  border: 1px solid rgba(210, 86, 79, 0.4) !important;
}
/* The sender's own "not accepted yet" note. */
.wpz-inbox-awaiting{
  margin: 8px 12px 0;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  color: #8a7440;
  background: rgba(255, 205, 110, 0.16);
  border: 1px solid rgba(214, 154, 32, 0.26);
}
.wpz-inbox-awaiting.hidden{ display: none !important; }
html[data-theme="dark"] .wpz-inbox-section{ color: #7b8ea1; }
html[data-theme="dark"] .wpz-inbox-request{
  background: rgba(214, 154, 32, 0.14);
  border-color: rgba(214, 154, 32, 0.34);
}
html[data-theme="dark"] .wpz-inbox-request-text{ color: #d8c79c; }
html[data-theme="dark"] .wpz-inbox-request-text strong{ color: #ffe6a8; }
html[data-theme="dark"] .wpz-inbox-thread-request{
  color: #ffd479; background: rgba(214, 154, 32, 0.2);
}
html[data-theme="dark"] .wpz-inbox-thread.is-request{ background: rgba(214, 154, 32, 0.09); }
html[data-theme="dark"] .wpz-inbox-awaiting{ color: #d8c79c; background: rgba(214, 154, 32, 0.14); }
html[data-theme="dark"] .wpz-inbox-request-actions .wpz-inbox-req-decline{ color: #93a7bb; background: transparent; }
html[data-theme="dark"] .wpz-inbox-request-actions .wpz-inbox-req-block{ color: #ff8079; background: transparent; }
html[data-theme="dark"] .wpz-inbox-request-actions .wpz-inbox-req-accept{ color: #06240f; background: #48c97c; }

/* Blocked-words chips in the admin panel. */
.chat-filter-chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: #a0405a;
  background: rgba(255, 235, 240, 0.85);
  border: 1px solid rgba(194, 102, 131, 0.3);
}
.chat-filter-chip button{
  border: none !important;
  background: transparent !important;
  color: #a0405a !important;
  font-size: 10px !important;
  font-weight: 800;
  cursor: pointer;
  padding: 2px 4px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.chat-filter-chip button:hover{ background: rgba(194, 102, 131, 0.18) !important; }

/* Staff-only Delete on system lines: tiny, right-aligned. */
.message-system-delete{
  margin-left: 8px;
  font-size: 10px !important;
  padding: 2px 8px !important;
}

/* Friend list window: liquid glass (id-scoped to out-rank the old solid
   white v27 overrides living in index.html's inline styles). Same recipe
   as the Inbox window so the two read as one family. */
#socialWindow.social-window{
  background: linear-gradient(160deg, rgba(220, 235, 255, 0.5) 0%, rgba(255, 255, 255, 0.6) 55%, rgba(200, 226, 255, 0.48) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow:
    0 26px 60px rgba(31, 38, 135, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(44px) saturate(230%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(44px) saturate(230%) brightness(1.04) !important;
}
#socialWindow .social-shell{
  background: rgba(255, 255, 255, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}
#socialWindow .social-list-panel,
#socialWindow .social-detail{
  background: transparent !important;
}
#socialWindow .social-list-panel{
  border-right: 1px solid rgba(255, 255, 255, 0.55) !important;
}
/* Frosted inputs instead of flat white. */
#socialWindow .wpz-social-addbox input,
#socialWindow .social-search input,
#socialWindow input[type="text"]{
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
#socialWindow .wpz-social-reqgroup{
  background: linear-gradient(180deg, rgba(240, 248, 255, 0.55), rgba(228, 241, 255, 0.4)) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
}
/* Compact search field + close button — they dominated the header. */
#socialWindow #socialSearch{
  padding: 7px 14px !important;
  font-size: 13px !important;
  border-width: 1px !important;
  border-radius: 999px !important;
}
#socialWindow #closeSocialButton{
  width: 30px !important;
  height: 30px !important;
  min-width: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Merch popup: "Also available" rows under the hero product. */
.merch-more-list{
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(90, 167, 255, 0.18);
}
.merch-more-head{
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5b7794;
  margin-bottom: 6px;
  padding: 0 2px;
}
.merch-more-item{
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 6px !important;
  margin-bottom: 3px;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  cursor: pointer;
  text-align: left;
  font-size: 12px !important;
  box-shadow: none !important;
}
.merch-more-item:hover{
  background: rgba(220, 236, 255, 0.6) !important;
  border-color: rgba(90, 167, 255, 0.3) !important;
}
.merch-more-img{
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 8px;
}
.merch-more-name{
  font-weight: 700;
  color: #1a3f6b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.merch-more-price{
  font-weight: 800;
  color: #2f6fae;
  font-size: 11.5px;
}

/* "Response to:" chip above a reply's bubble — persisted with the message. */
.message-reply-chip{
  display: inline-block;
  max-width: 420px;
  margin: 0 0 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  color: #2f6fae;
  background: rgba(220, 236, 255, 0.55);
  border: 1px solid rgba(90, 167, 255, 0.28);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.message-reply-chip strong{ font-weight: 800; }
.message-row.is-own .message-reply-chip{ align-self: flex-end; }

/* Profile Report button: tiny, quiet flag — must not compete with Send PM.
   !important pins beat the global glass button inflation. */
.support-action-btn.wpz-profile-report-btn{
  padding: 2px 8px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  align-self: center;
  color: #8aa0b5 !important;
  border: 1px solid rgba(140, 165, 195, 0.35) !important;
  background: rgba(255, 255, 255, 0.6) !important;
  box-shadow: none !important;
}
.support-action-btn.wpz-profile-report-btn:hover{
  color: #a0405a !important;
  border-color: rgba(194, 102, 131, 0.4) !important;
  background: rgba(255, 238, 242, 0.9) !important;
}

/* Profile card admin tools — staff only (Owner/admin/SOP/AOP). */
.wpz-profile-admin{
  margin-bottom: 16px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(194, 102, 131, 0.18);
  background: rgba(255, 240, 244, 0.45);
}
.wpz-profile-admin-btns{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wpz-profile-admin-btns button{
  padding: 5px 11px !important;
  font-size: 11px !important;
  font-weight: 700;
  border-radius: 999px !important;
  border: 1px solid rgba(79, 149, 216, 0.25);
  background: rgba(255, 255, 255, 0.88);
  color: #2f6fae;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.wpz-profile-admin-btns button:hover{ background: #eef6ff; transform: translateY(-1px); }
.wpz-profile-admin-btns button.is-danger{
  color: #a0405a;
  border-color: rgba(194, 102, 131, 0.35);
  background: rgba(255, 235, 240, 0.9);
}
.wpz-profile-admin-btns button.is-danger:hover{ background: rgba(248, 205, 215, 0.95); }
.wpz-profile-admin-note{
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #a0405a;
  padding: 5px 4px 5px 0;
}

/* Clickable reported-username inside report tickets. */
.wpz-report-user{
  color: #2f6fae;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.wpz-report-user:hover{ color: #1a3f6b; }

.wpz-inbox-thread-blocked{
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a0405a;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(194, 102, 131, 0.3);
}
/* Search + compose input: frosted with the theme's focus ring. */
.wpz-inbox-search-wrap input,
.wpz-inbox-compose input[type="text"]{
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Compose bar itself gets the glass footer treatment. */
.wpz-inbox-compose{
  background: rgba(255, 255, 255, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
/* Send: the site's signature blue-gradient hero pill. */
.wpz-inbox-send{
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(135deg, #6db3ff 0%, #3d8ce0 100%);
  box-shadow: 0 6px 14px rgba(61, 140, 224, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.wpz-inbox-send:hover{
  box-shadow: 0 9px 20px rgba(61, 140, 224, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
/* Header buttons (refresh/close + composer icons) hover with the blue tint
   instead of a plain brightness bump. */
.wpz-inbox-icon-btn:hover{
  background: linear-gradient(180deg, #eaf3ff, #d8eaff);
  border-color: rgba(90, 167, 255, 0.4);
  filter: none;
}

/* Unread counter on the topbar Inbox button — a floating red pip on the
   top-right corner of the pill (not inline, so the button never resizes). */
#inboxButton{
  position: relative;
  overflow: visible;
}
.wpz-inbox-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: #fff;
  background: linear-gradient(135deg, #ff5b5b, #c81f27);
  border: 2px solid rgba(255,255,255,0.92);
  box-shadow: 0 3px 8px rgba(200,31,39,0.45);
  pointer-events: none;
  z-index: 3;
}
.wpz-inbox-badge.is-pop{
  animation: wpzInboxBadgePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wpzInboxBadgePop{
  0%   { transform: scale(0.4); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
/* Gentle attention pulse on the button itself while anything is unread. */
#inboxButton.has-unread{
  animation: wpzInboxBtnPulse 2.4s ease-in-out infinite;
}
@keyframes wpzInboxBtnPulse{
  0%, 100% { box-shadow: 0 3px 8px rgba(50,100,160,0.22) !important; }
  50%      { box-shadow: 0 3px 8px rgba(50,100,160,0.22), 0 0 0 4px rgba(255,91,91,0.16) !important; }
}

/* ---- Incoming private-message notification cards (bottom-right) ---- */
.wpz-pm-notify-stack{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.wpz-pm-notify{
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 320px;
  max-width: calc(100vw - 36px);
  padding: 11px 12px;
  border-radius: 16px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.7);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(238,247,255,0.86));
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 14px 34px rgba(40,90,150,0.24), inset 0 1px 0 rgba(255,255,255,0.8);
  transform: translateX(24px);
  opacity: 0;
  transition: transform 0.26s cubic-bezier(0.34,1.3,0.64,1), opacity 0.26s ease;
}
.wpz-pm-notify.is-visible{
  transform: translateX(0);
  opacity: 1;
}
.wpz-pm-notify:hover{
  border-color: rgba(90,167,255,0.55);
  box-shadow: 0 18px 40px rgba(40,90,150,0.3), inset 0 1px 0 rgba(255,255,255,0.85);
}
.wpz-pm-notify-avatar{
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  background: linear-gradient(180deg, #eaf3ff, #cfe4fb);
  border: 1.5px solid rgba(90,167,255,0.4);
}
.wpz-pm-notify-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.wpz-pm-notify-meta{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wpz-pm-notify-title{
  font-size: 12.5px;
  font-weight: 800;
  color: #1a3f6b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wpz-pm-notify-body{
  font-size: 11.5px;
  font-weight: 600;
  color: #5b7794;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wpz-pm-notify-close{
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(90,140,190,0.28);
  background: rgba(255,255,255,0.7);
  color: #5b7794;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wpz-pm-notify-close:hover{
  background: #fff;
  color: #1a3f6b;
}

/* Mobile: stack the columns */
@media (max-width: 700px) {
  .wpz-inbox{
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    min-width: 0;
    border-radius: 18px;
    grid-template-columns: 1fr;
  }
  .wpz-inbox-left{
    grid-column: 1; grid-row: 2;
  }
  .wpz-inbox-right{
    grid-column: 1; grid-row: 2;
  }
  .wpz-inbox.is-showing-conversation .wpz-inbox-left{ display: none; }
  .wpz-inbox:not(.is-showing-conversation) .wpz-inbox-right{ display: none; }
  .wpz-inbox-back{ display: inline-flex; }
}

/* v131 fix topbar layout — constrain brand copy width, prevent MAIN MENU overflow */
.brand-copy {
  max-width: 420px !important;
}

.main-menu-trigger-wrap {
  flex-shrink: 0 !important;
}

.session-links {
  min-height: 0 !important;
}

.topbar {
  position: relative !important;
  z-index: 1 !important;
}

/* ==========================================================================
   v132 Adaptive & Fluid Layout Pulse — Alive & Alert Window Resizing
   ========================================================================== */

/* 1. Global smooth transitions for layout adjustments */
.window,
.topbar,
.session-strip,
.chat-shell,
.sidebar,
.room-header,
.users-panel,
.message-log,
.brand-stats,
.session-pill,
.user-item {
  transition: padding 240ms cubic-bezier(0.16, 1, 0.3, 1),
              margin 240ms cubic-bezier(0.16, 1, 0.3, 1),
              gap 240ms cubic-bezier(0.16, 1, 0.3, 1),
              max-width 240ms cubic-bezier(0.16, 1, 0.3, 1),
              font-size 240ms cubic-bezier(0.16, 1, 0.3, 1),
              height 240ms cubic-bezier(0.16, 1, 0.3, 1),
              width 240ms cubic-bezier(0.16, 1, 0.3, 1),
              grid-template-columns 240ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. Compact height modifications (e.g. window height < 720px) */
body.is-compact-height .window {
  padding: 8px !important;
  gap: 6px !important;
}
body.is-compact-height .topbar {
  padding: 10px 14px !important;
}
body.is-compact-height .session-strip {
  padding: 6px 10px !important;
}
body.is-compact-height .room-header {
  padding: 8px 12px !important;
}
body.is-compact-height .chat-shell {
  height: calc(100vh - 138px) !important;
  max-height: calc(100vh - 138px) !important;
}
body.is-compact-height .brand-stats {
  padding: 6px 12px !important;
}

/* 3. Ultra-compact height modifications (e.g. window height < 520px) */
body.is-ultra-compact-height .window {
  padding: 4px !important;
  gap: 4px !important;
}
body.is-ultra-compact-height .topbar {
  padding: 6px 10px !important;
}
body.is-ultra-compact-height .brand-mark-shell {
  height: 52px !important;
  width: 140px !important;
  border-radius: 12px !important;
}
body.is-ultra-compact-height .session-strip {
  display: none !important; /* Hide session strip on super short windows to focus purely on chat */
}
body.is-ultra-compact-height .chat-shell {
  height: calc(100vh - 84px) !important;
  max-height: calc(100vh - 84px) !important;
}
body.is-ultra-compact-height .room-header {
  display: none !important; /* Hide header details to give maximal room for logs */
}

/* 4. Compact width modifications (e.g. window width < 1100px) */
body.is-compact-width .chat-shell {
  grid-template-columns: 220px minmax(0, 1fr) !important; /* Narrow sidebar */
}
body.is-compact-width .users-panel {
  display: none !important; /* Hide right user panel on narrow windows to keep main chat wide */
}

/* 5. Ultra-compact width modifications (e.g. window width < 720px) */
body.is-ultra-compact-width .window {
  padding: 6px !important;
}
body.is-ultra-compact-width .topbar {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}
body.is-ultra-compact-width .brand-lockup {
  justify-content: center !important;
}
body.is-ultra-compact-width .brand-mark-shell {
  width: 100% !important;
  max-width: 240px !important;
}
body.is-ultra-compact-width .titlebar-right {
  justify-content: center !important;
}
body.is-ultra-compact-width .chat-shell {
  grid-template-columns: 1fr !important; /* Stack completely */
}
body.is-ultra-compact-width .sidebar {
  display: none !important; /* Collapse left sidebar, focus purely on main chat */
}
body.is-ultra-compact-width .room-badges {
  display: none !important; /* Hide room badges to maximize chat real estate */
}

/* ==========================================================================
   v133 Force Page Scroll Lock (No Page-Level Scrolling)
   ========================================================================== */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

.window {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.chat-shell {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

/* Ensure sub-panels are the only scrollable elements */
.channel-list,
.user-list,
.message-log,
.admin-log,
.pm-log,
.social-list {
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}

/* Header Layout & Search Bar */
.topbar {
  justify-content: space-between !important;
}


/* Topbar Search Bar (kept as a CSS hook — search input removed from the DOM) */
.topbar-search-wrap {
  position: relative;
  flex-grow: 1;
  max-width: 400px;
  margin: 0 20px;
}

#topbarSearchInput {
  width: 100%;
  padding: 8px 35px 8px 15px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface-strong);
  color: var(--text);
  outline: none;
}

#topbarSearchInput:focus {
  border-color: var(--blue-dark);
}

.search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);

}

/* ── Topbar recent-donations strip (replaces the search box) ─────────
   Renders a "Recent" label + horizontal scrolling pill list of recent
   donors. Sized to take the same flex slot the search box used. */
.topbar-recent-donations{
  position: relative;
  flex-grow: 1;
  max-width: 400px;
  margin: 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(120, 168, 224, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  min-height: 34px;
  overflow: hidden;
}
.topbar-recent-donations-label{
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4d6b8c;
  white-space: nowrap;
  flex: 0 0 auto;
}
.topbar-recent-donations-track{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
}
.topbar-recent-donations-empty{
  font-size: 11.5px;
  color: #4d6b8c;
  font-weight: 600;
  font-style: italic;
  white-space: nowrap;
}
.topbar-recent-donations-item{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(120, 168, 224, 0.22);
  font-size: 12px;
  font-weight: 700;
  color: #17334d;
  white-space: nowrap;
  animation: wpzLbFadeIn 360ms ease-out both;
}
.topbar-recent-donations-item .avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6fb1f3, #a1c8ff);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
  flex: 0 0 auto;
}
.topbar-recent-donations-item .amount{
  color: #4d6b8c;
  font-size: 10.5px;
  font-weight: 800;
}

/* (Removed .search-icon trailing props — search input no longer in the DOM.) */

/* Topbar Navigation — removed; # Rooms + navPeople are gone.
   The logged-in user pill now lives inside #userActions via .topbar-user-chip. */
/* --- Logout Overlay & Deep Blur Focus --- */
body.is-logging-out #appWindow {
  filter: blur(14px) grayscale(10%);
  pointer-events: none;
  user-select: none;
  transition: filter 500ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(0.99);
}

.logout-overlay {
  position: fixed;
  inset: 0;
  background: rgba(95, 132, 171, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.logout-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.logout-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(234, 245, 255, 0.99));
  border: 1px solid rgba(79, 149, 216, 0.22);
  box-shadow: 0 26px 60px rgba(86, 126, 164, 0.18);
  border-radius: 28px;
  padding: 40px;
  width: min(420px, 92vw);
  text-align: center;
  color: var(--text);
  font-family: var(--font-ui);
}

.logout-header {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--blue-dark);
  margin-bottom: 24px;
}

.logout-status {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--muted);
  min-height: 24px;
}

.logout-spinner {
  width: 52px;
  height: 52px;
  border: 4px solid var(--blue-soft);
  border-top-color: var(--blue-dark);
  border-radius: 50%;
  margin: 0 auto 28px;
  animation: logout-spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.logout-footer {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  opacity: 0.55;
  margin-top: 32px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

@keyframes logout-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- Logout Password Reminder Prompt --- */
.logout-prompt {
  position: fixed;
  inset: 0;
  background: rgba(95, 132, 171, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.logout-prompt.active {
  opacity: 1;
  pointer-events: auto;
}

.logout-prompt-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(234, 245, 255, 0.99));
  border: 1px solid rgba(79, 149, 216, 0.22);
  box-shadow: 0 26px 60px rgba(86, 126, 164, 0.18);
  border-radius: 28px;
  padding: 36px;
  width: min(440px, 92vw);
  text-align: center;
  color: var(--text);
  font-family: var(--font-ui);
}

.logout-prompt-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--blue-dark);
  margin-bottom: 14px;
}

.logout-prompt-desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 28px;
}

.logout-prompt-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.logout-prompt-btn {
  flex: 1;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  cursor: default;
  transition: all 0.2s ease;
}

.logout-prompt-btn.yes {
  background: var(--blue-dark);
  color: #fff;
}

.logout-prompt-btn.yes:hover {
  background: #3c82bf;
}

.logout-prompt-btn.no {
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.logout-prompt-btn.no:hover {
  background: #d8ecff;
}

.logout-prompt-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: default;
  user-select: none;
}

.logout-prompt-checkbox-label input {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(79, 149, 216, 0.3);
  accent-color: var(--blue-dark);
}

/* ==========================================================================
   Dynamic Blur Effect on Auth/Signup Modal Open
   ========================================================================== */
body.auth-modal-open .topbar,
body.auth-modal-open .session-strip,
body.auth-modal-open .chat-shell {
  filter: blur(8px) grayscale(15%);
  pointer-events: none;
  transform: scale(0.995);
  opacity: 0.85;
}

.topbar,
.session-strip,
.chat-shell {
  transition: filter 350ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 350ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ==========================================================================
   Compact Floating Profile Popover
   ========================================================================== */
.wpz-profile-popover {
  position: absolute;
  width: 280px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 24px !important;
  padding: 16px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16) !important;
  z-index: 100000 !important;
  display: none;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  animation: wpzFadeScaleIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes wpzFadeScaleIn {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Admin channel panel */
.admin-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: none;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}
.admin-panel.is-visible {
  display: flex;
}
.admin-panel.hidden {
  display: none;
}
.admin-channel-header {
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(255,240,240,0.98), rgba(255,229,229,0.98));
  border: 1px solid rgba(209,98,98,0.16);
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-channel-title {
  font-size: 14px;
  font-weight: 800;
  color: #7f1f1f;
}
.admin-channel-sub {
  font-size: 11px;
  font-weight: 700;
  color: #b34c4c;
  letter-spacing: 0.05em;
}
.admin-channel-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.95));
  border: 1px solid var(--border);
  border-radius: 20px;
}
.admin-channel-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.admin-channel-form input {
  flex: 1;
  width: 100%;
  padding: 11px 15px;
  border-radius: 999px;
  border: 1px solid rgba(90,167,255,0.14);
  background: var(--surface-strong);
  color: var(--text);
  outline: none;
  font: inherit;
}
.admin-channel-form button {
  border: 1px solid transparent;
  background: var(--surface-tint);
  color: var(--text);
  border-radius: 999px;
  padding: 11px 15px;
  cursor: default;
  font: inherit;
  font-weight: 700;
  transition: transform 140ms ease, background 140ms ease;
}
.admin-channel-form button:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #e4f1ff 0%, #cfe5ff 100%);
}

/* Round glass pill icons for the admin channel input. Mirrors the
   support-ticket and social-PM icon-button design. */
.admin-channel-form .admin-channel-icon-btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(79, 149, 216, 0.18);
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(235,243,255,0.7));
  color: #1d3b5e;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease, color 140ms ease;
  box-shadow: 0 4px 10px rgba(50,100,160,0.12), inset 0 1px 0 rgba(255,255,255,0.65);
  -webkit-tap-highlight-color: transparent;
}
.admin-channel-form .admin-channel-icon-btn:hover {
  transform: translateY(-1px) scale(1.04);
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(220,235,255,0.85));
  box-shadow: 0 6px 14px rgba(50,100,160,0.18), inset 0 1px 0 rgba(255,255,255,0.75);
}
.admin-channel-form .admin-channel-icon-btn:active {
  transform: translateY(0) scale(0.98);
}
.admin-channel-form .admin-channel-mic-btn.is-recording {
  color: #ffffff;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border-color: rgba(220,38,38,0.55);
  box-shadow: 0 0 0 0 rgba(239,68,68,0.5), 0 6px 16px rgba(220,38,38,0.32);
  animation: wpzMicPulse 1.4s ease-out infinite;
}
.admin-channel-form .admin-channel-mic-cancel-btn {
  color: #b91c1c;
}
.admin-channel-form .admin-channel-mic-cancel-btn:hover {
  background: linear-gradient(135deg, rgba(254,226,226,0.95), rgba(255,255,255,0.9));
}
.admin-channel-form .admin-channel-icon-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 4px rgba(50,100,160,0.08);
}
.admin-channel-form #adminChannelFileInput { display: none; }

/* ── Voice-quality context menu ────────────────────────────────
   Right-click the admin mic button to open this glass-pill menu.
   Appended to <body> so a `position: fixed` parent can't trap it
   behind a transform/backdrop-filter ancestor (Hard rule 7 in the
   WPZ HTML-edits skill). The four options reflect the four quality
   presets defined in client.js (LOW / MEDIUM / HIGH / HIGHEST). */
.wpz-quality-menu {
  position: fixed;
  z-index: 10000;
  min-width: 220px;
  max-width: 280px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(79, 149, 216, 0.22);
  background: linear-gradient(160deg, rgba(255,255,255,0.94), rgba(232,243,255,0.86));
  box-shadow:
    0 14px 40px rgba(20, 50, 90, 0.22),
    0 4px 12px rgba(20, 50, 90, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  font-family: inherit;
  color: #1d3b5e;
  animation: wpzQualityMenuIn 140ms ease-out;
  transform-origin: top left;
}
@keyframes wpzQualityMenuIn {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.wpz-quality-menu-header {
  padding: 8px 12px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4f6f95;
  border-bottom: 1px solid rgba(79, 149, 216, 0.12);
  margin-bottom: 4px;
}
.wpz-quality-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: #1d3b5e;
  font: inherit;
  font-size: 14px;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.wpz-quality-option:hover,
.wpz-quality-option:focus-visible {
  background: linear-gradient(135deg, rgba(220, 235, 255, 0.95), rgba(245, 250, 255, 0.85));
  outline: none;
  transform: translateX(2px);
}
.wpz-quality-option:active {
  transform: translateX(2px) scale(0.985);
}
.wpz-quality-option-label {
  flex: 1 1 auto;
  font-weight: 500;
}
.wpz-quality-option-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: transparent;
  transition: color 140ms ease;
}
.wpz-quality-option.is-selected {
  background: linear-gradient(135deg, rgba(79, 149, 216, 0.16), rgba(122, 184, 240, 0.10));
  color: #1a4d80;
}
.wpz-quality-option.is-selected .wpz-quality-option-check {
  color: #1a4d80;
}
.wpz-quality-option.is-selected .wpz-quality-option-label {
  font-weight: 700;
}
.wpz-quality-menu-hint {
  margin-top: 6px;
  padding: 8px 12px 4px;
  font-size: 11px;
  font-style: italic;
  color: #6b86a8;
  border-top: 1px solid rgba(79, 149, 216, 0.10);
}

.hidden { display: none !important; }

/* ── Support window ─────────────────────────────────────────── */

.support-window {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: min(420px, calc(100vw - 28px));
  max-height: min(72vh, 720px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  padding: 16px;
  border-radius: 28px;
  /* Liquid glass — same recipe as the Support Center / inbox cards:
     translucent blue-tinted gradient, heavy blur + saturation, white
     hairline and inner sheen. */
  background: linear-gradient(160deg, rgba(220, 235, 255, 0.55) 0%, rgba(255, 255, 255, 0.66) 55%, rgba(200, 226, 255, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 26px 60px rgba(31, 38, 135, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(42px) saturate(220%) brightness(1.04);
  -webkit-backdrop-filter: blur(42px) saturate(220%) brightness(1.04);
  z-index: 70;
  animation: wpzScaleIn 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.support-window-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.support-title {
  margin-top: 2px;
  font-size: 15px !important;
  font-weight: 800;
  color: var(--text);
  overflow-wrap: anywhere;
}
.support-window .member-context-eyebrow{
  font-size: 9.5px !important;
  letter-spacing: 0.1em;
}
.support-window .close-button{
  width: 28px !important;
  height: 28px !important;
  min-height: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.support-log {
  min-height: 220px;
  max-height: 44vh;
  overflow: auto;
  padding: 4px 4px 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.support-log::-webkit-scrollbar {
  width: 10px;
}

.support-log::-webkit-scrollbar-thumb {
  background: rgba(111, 163, 219, 0.34);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.support-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Floating admin ticket window — pops up when an operator clicks a
 * ticket in the operator panel. Uses the same liquid-glass design as
 * .wpz-inbox / .social-window: blue-tinted gradient, soft inner highlight,
 * 40px backdrop blur with 220% saturation. */
.admin-ticket-window {
  position: fixed;
  /* Position is set from JS in openAdminTicketWindow so the window
   * can sit just to the right of the operator panel (where the
   * usernames live). Inline `top` / `left` / `bottom` / `right` are
   * applied at open time. */
  right: 20px;
  bottom: 20px;
  width: min(440px, calc(100vw - 28px));
  /* Smaller default height — operators usually glance at a ticket and
   * reply in a few lines, not read long histories. The window is still
   * resizeable via any corner (see below). */
  height: min(560px, calc(100vh - 80px));
  max-height: calc(100vh - 80px);
  min-height: 320px;
  /* Resizable in both directions — `resize: both` lets the operator
     drag any corner to grow or shrink. `min-width` keeps the panel
     from collapsing below the point where the status pills wrap. */
  min-width: 320px;
  max-width: calc(100vw - 20px);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  padding: 16px 16px 14px;
  border-radius: 26px;
  /* ── Liquid glass: layered translucency + chromatic highlights ── */
  background:
    linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.22) 40%, rgba(140,200,255,0.28) 100%),
    radial-gradient(120% 80% at 0% 0%, rgba(255,182,224,0.38) 0%, rgba(255,182,224,0) 55%),
    radial-gradient(140% 100% at 100% 100%, rgba(140,200,255,0.55) 0%, rgba(140,200,255,0) 60%),
    radial-gradient(90% 70% at 100% 0%, rgba(186,160,255,0.30) 0%, rgba(186,160,255,0) 55%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 -1px 0 rgba(120, 168, 224, 0.20) inset,
    0 30px 60px rgba(31, 38, 135, 0.28),
    0 8px 18px rgba(31, 38, 135, 0.12),
    inset 0 0 1px rgba(255,255,255,0.5);
  backdrop-filter: blur(40px) saturate(240%) brightness(1.06);
  -webkit-backdrop-filter: blur(40px) saturate(240%) brightness(1.06);
  z-index: 75;
  font-family: inherit;
  color: #17334d;
  overflow: hidden;
  resize: both;
}
/* Liquid sheen layer — sweeps across the window on a loop to sell the
   fluid-glass feel. Pseudo-element so it doesn't disturb the DOM. */
.admin-ticket-window::before {
  content: "";
  position: absolute;
  inset: -60% -20%;
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.55) 48%,
    rgba(255,255,255,0) 66%);
  transform: translateX(-60%) rotate(10deg);
  animation: wpzAdminTicketSheen 6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(2px);
  z-index: 0;
}
@keyframes wpzAdminTicketSheen {
  0%   { transform: translateX(-60%) rotate(10deg); }
  55%  { transform: translateX(60%)  rotate(10deg); }
  100% { transform: translateX(60%)  rotate(10deg); }
}
/* Lift the actual content above the sheen pseudo-element. */
.admin-ticket-window > * { position: relative; z-index: 1; }
/* Custom resize grip — most browsers do not render a visible affordance
   for `resize: both`, so paint a small diagonal pattern in the bottom-right
   corner. Bounded by `right`/`bottom`/`width`/`height` so it doesn't
   stretch across the whole window. */
.admin-ticket-window::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(135deg,
      transparent 38%,
      rgba(79,149,216,0.55) 38%, rgba(79,149,216,0.55) 42%,
      transparent 42%, transparent 54%,
      rgba(79,149,216,0.55) 54%, rgba(79,149,216,0.55) 58%,
      transparent 58%, transparent 70%,
      rgba(79,149,216,0.55) 70%, rgba(79,149,216,0.55) 74%,
      transparent 74%);
  border-bottom-right-radius: 26px;
  opacity: 0.85;
}
.admin-ticket-window.hidden { display: none !important; }
.admin-ticket-window-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.admin-ticket-window-eyebrow {
  font-size: 10px;
  font-weight: 800;
  color: #4f95d8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.admin-ticket-window-title {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 800;
  color: #17334d;
  overflow-wrap: anywhere;
  letter-spacing: -0.01em;
}
.admin-ticket-window-subtitle {
  font-size: 11.5px;
  color: #6d8195;
  margin-top: 2px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.admin-ticket-window-status {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-ticket-status-btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(79, 149, 216, 0.18);
  background: rgba(255, 255, 255, 0.55);
  color: #17334d;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: default;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 140ms ease, background 220ms ease, box-shadow 220ms ease, border-color 140ms ease, color 220ms ease;
}
.admin-ticket-status-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 4px 10px rgba(50, 100, 160, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.admin-ticket-status-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}
.admin-ticket-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7) inset;
  flex-shrink: 0;
}
.admin-ticket-status-btn.is-pending .admin-ticket-status-dot { background: #94a3b8; }
.admin-ticket-status-btn.is-urgent  .admin-ticket-status-dot { background: #ef4444; }
.admin-ticket-status-btn.is-resolved .admin-ticket-status-dot { background: #10b981; }
.admin-ticket-status-btn.is-active {
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(50, 100, 160, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.admin-ticket-status-btn.is-active .admin-ticket-status-dot {
  background: #ffffff;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.25) inset;
}
.admin-ticket-status-btn.is-pending.is-active {
  background: linear-gradient(135deg, #64748b, #475569);
}
.admin-ticket-status-btn.is-urgent.is-active {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
}
.admin-ticket-status-btn.is-resolved.is-active {
  background: linear-gradient(135deg, #10b981, #047857);
}
/* Smooth background swap when the active class is toggled. */
/* When a button is NOT active, dim it slightly to make the active one
 * pop more — the operator immediately sees which status is selected. */
.admin-ticket-status-btn:not(.is-active) {
  opacity: 0.78;
  filter: saturate(0.55);
}
.admin-ticket-status-btn:not(.is-active):hover {
  opacity: 1;
  filter: saturate(1);
}
.admin-ticket-window-log {
  min-height: 120px;
  overflow: auto;
  padding: 4px 4px 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Inner glass panel: slightly darker glass so the messages pop out. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.22) 100%),
    radial-gradient(120% 80% at 0% 0%, rgba(140,200,255,0.18) 0%, rgba(140,200,255,0) 60%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(120,168,224,0.10);
}
.admin-ticket-window-log::-webkit-scrollbar {
  width: 10px;
}
.admin-ticket-window-log::-webkit-scrollbar-thumb {
  background: rgba(111, 163, 219, 0.34);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.admin-ticket-window-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.admin-ticket-window-form input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(79, 149, 216, 0.18);
  background: rgba(255, 255, 255, 0.7);
  color: #17334d;
  outline: none;
  font: inherit;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.admin-ticket-window-form input[type="text"]::placeholder {
  color: #6d8195;
}
.admin-ticket-window-form input[type="text"]:focus {
  border-color: rgba(79, 149, 216, 0.55);
  background: rgba(255, 255, 255, 0.92);
}
/* ── Form action buttons (mic, attach, cancel, send) ────────────────
   Round glass pills so the support-ticket reply bar reads like a
   standalone messaging input rather than a chunky tool button. Mirrors
   the social-PM design for consistency. */
.admin-ticket-window-form .admin-ticket-icon-btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(79, 149, 216, 0.18);
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(235,243,255,0.7));
  color: #1d3b5e;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease, color 140ms ease;
  box-shadow: 0 4px 10px rgba(50,100,160,0.12), inset 0 1px 0 rgba(255,255,255,0.65);
  -webkit-tap-highlight-color: transparent;
}
.admin-ticket-window-form .admin-ticket-icon-btn:hover {
  transform: translateY(-1px) scale(1.04);
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(220,235,255,0.85));
  box-shadow: 0 6px 14px rgba(50,100,160,0.18), inset 0 1px 0 rgba(255,255,255,0.75);
}
.admin-ticket-window-form .admin-ticket-icon-btn:active {
  transform: translateY(0) scale(0.98);
}
.admin-ticket-window-form .admin-ticket-icon-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 4px rgba(50,100,160,0.08);
}

/* Recording state — red drop-shadow + pulsing scale animation. The
   caller toggles `is-recording` on the mic button while MediaRecorder
   is in `recording` state. */
.admin-ticket-window-form .admin-ticket-mic-btn.is-recording {
  color: #ffffff;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border-color: rgba(220,38,38,0.55);
  box-shadow: 0 0 0 0 rgba(239,68,68,0.5), 0 6px 16px rgba(220,38,38,0.32);
  animation: wpzMicPulse 1.4s ease-out infinite;
}
.admin-ticket-window-form .admin-ticket-mic-cancel-btn {
  color: #b91c1c;
}
.admin-ticket-window-form .admin-ticket-mic-cancel-btn:hover {
  background: linear-gradient(135deg, rgba(254,226,226,0.95), rgba(255,255,255,0.9));
}
@keyframes wpzMicPulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.55), 0 6px 16px rgba(220,38,38,0.32); }
  70%  { box-shadow: 0 0 0 12px rgba(239,68,68,0), 0 6px 16px rgba(220,38,38,0.32); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0), 0 6px 16px rgba(220,38,38,0.32); }
}

/* The legacy emoji-only file button (📎) lives inside `.admin-ticket-file-btn`
   so any old markup keeps working. */
.admin-ticket-window-form .admin-ticket-file-btn {
  border: 1px solid rgba(79, 149, 216, 0.18);
  background: rgba(255, 255, 255, 0.7);
  color: #17334d;
  border-radius: 999px;
  padding: 0 13px;
  height: 38px;
  cursor: default;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.admin-ticket-window-form .admin-ticket-file-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(220,235,255,0.85), rgba(255,255,255,0.9));
  box-shadow: 0 4px 10px rgba(50,100,160,0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.admin-ticket-window-form .admin-ticket-file-btn[disabled] {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}
.admin-ticket-window-form input[type="file"] {
  display: none;
}
.admin-ticket-window-form button[type="submit"] {
  border: 1px solid rgba(60, 120, 200, 0.55);
  background: linear-gradient(135deg, #4c8cd1, #397ac0);
  color: #ffffff;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: default;
  font: inherit;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 12px rgba(50, 100, 160, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.admin-ticket-window-form button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(50, 100, 160, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.admin-ticket-window-empty {
  padding: 12px;
  color: #6d8195;
  font-size: 13px;
  text-align: center;
  margin: auto;
}

.support-form input {
  flex: 1;
  min-width: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.62);
  color: var(--text);
  outline: none;
  font: inherit;
  font-size: 13px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.support-form input:focus {
  border-color: rgba(90, 167, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(90, 167, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.support-form button {
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
  border-radius: 999px;
  padding: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  cursor: pointer;
  font: inherit;
  font-size: 14px !important;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 8px rgba(31, 38, 135, 0.08);
  transition: transform 140ms ease, background 140ms ease, box-shadow 160ms ease;
}

.support-form button:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 14px rgba(31, 38, 135, 0.12);
}

/* Send is the primary action: the site's signature blue-gradient pill. */
.support-form button[type="submit"] {
  background: linear-gradient(135deg, #dcecff 0%, #bedcff 100%);
  border: 1px solid rgba(79, 149, 216, 0.28);
  color: #17334d;
  width: auto;
  height: auto;
  padding: 7px 16px;
  font-size: 12.5px !important;
  box-shadow: 0 6px 14px rgba(79, 149, 216, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.support-form button[type="submit"]:hover {
  background: linear-gradient(135deg, #e4f1ff 0%, #cfe5ff 100%);
  box-shadow: 0 10px 20px rgba(79, 149, 216, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Support message rows */
.support-msg-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.45;
}

.support-msg-row.is-own {
  justify-content: flex-end;
}

.support-msg-bubble {
  max-width: 80%;
  padding: 8px 13px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--text);
  word-break: break-word;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 3px 8px rgba(31, 38, 135, 0.06);
}

.support-msg-bubble.admin-reply {
  background: linear-gradient(135deg, rgba(220, 236, 255, 0.9), rgba(190, 220, 255, 0.75)) !important;
  border: 1px solid rgba(79, 149, 216, 0.28) !important;
}

/* Support action buttons */
.support-action-btn {
  padding: 6px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  cursor: default !important;
  transition: transform 140ms, opacity 140ms !important;
  background: rgba(90, 167, 255, 0.1);
  color: #17334d;
}
.support-action-btn:hover {
  transform: translateY(-1px) !important;
  opacity: 0.9 !important;
}

.support-msg-meta {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 2px;
}
/* "Support" badge prefix on admin replies — sits next to the staff name
   so the operator (or the user on the other side) can see at a glance
   which side of the conversation wrote the message. */
.support-msg-role {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #dcecff 0%, #bedcff 100%);
  color: #17334d;
  border: 1px solid rgba(79,149,216,0.30);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  margin-right: 4px;
  vertical-align: 1px;
}

/* Support button in top bar */
.support-btn {
  background: linear-gradient(135deg, #4f95d8 0%, #5b7bd9 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 3px 9px !important;
  font-size: 10.5px !important;
  font-weight: 700;
  line-height: 1.5 !important;
  min-height: 0 !important;
  cursor: default;
  transition: transform 140ms ease, box-shadow 140ms ease;
  box-shadow: 0 2px 6px rgba(79, 149, 216, 0.25);
}

.support-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(79, 149, 216, 0.35);
}


/* Ensure support button is visible when not hidden */
.support-btn:not(.hidden) {
  display: block !important;
}
/* ...and actually GONE when hidden — a layout rule elsewhere was beating
   the generic .hidden class, which kept the button visible for staff. */
.support-btn.hidden {
  display: none !important;
}

/* Make sure session-pill doesn't clip content */
.session-pill {
  overflow: visible !important;
}

/* Ensure button shows and is clickable — but ONLY when not .hidden.
   The old unconditional display:inline-block !important overrode the
   hidden class, so staff (who should never see it) still got the button. */
#supportBtn:not(.hidden) {
  display: inline-block !important;
  position: relative !important;
  z-index: 2147483001 !important;
  pointer-events: auto !important;
}

#supportBtn.hidden,
body.is-guest #supportBtn {
  display: none !important;
}

/* Support tickets styling */
.support-ticket-item {
  background: rgba(90, 167, 255, 0.08);
  border: 1px solid rgba(90, 167, 255, 0.15);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background-color 140ms, transform 140ms;
}
.support-ticket-item:hover {
  background: rgba(90, 167, 255, 0.18);
  transform: translateY(-1px);
}

/* Active Operator Panel tab styling */
.active-admin-tab {
  background: linear-gradient(135deg, #4f95d8 0%, #5b7bd9 100%) !important;
  color: white !important;
  border-color: rgba(79, 149, 216, 0.25) !important;
  box-shadow: 0 4px 12px rgba(79, 149, 216, 0.25) !important;
}

/* Tiny red notification pill shown on the Tickets tab when at least
   one brand-new support ticket has arrived since the operator last
   viewed the ticket list. Counter is set by the client; the [hidden]
   attribute is toggled to show/hide the pill entirely. The pulse
   animation runs while the pill is visible so the eye catches it
   even on a busy operator panel. */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
  animation: tabBadgePulse 1.6s ease-out infinite;
}
.tab-badge[hidden] { display: none !important; }
@keyframes tabBadgePulse {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Admin tools side-by-side buttons */
.admin-tools {
  display: flex !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 10px !important;
}
.admin-tools .theme-button {
  flex: 1 1 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 9px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #4f95d8 0%, #2f7cc2 100%) !important;
  border: 1px solid rgba(47, 124, 194, 0.35) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(47, 124, 194, 0.22) !important;
  cursor: pointer !important;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease !important;
}
.admin-tools .theme-button:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.06) !important;
  box-shadow: 0 6px 16px rgba(47, 124, 194, 0.30) !important;
}

/* Global App-like cursor: Remove 'hand' icon and add hover feedback */
button, 
.clickable, 
.member-context-item, 
.v3-thread, 
.channel-item, 
.social-item, 
.wpz-quick-unblock-btn,
.pm-file-toggle,
.v3-close,
.v3-send {
  cursor: default !important;
  transition: all 0.2s ease !important;
}

button:hover,
.clickable:hover,
.member-context-item:hover,
.v3-thread:hover,
.channel-item:hover,
.social-item:hover,
.wpz-quick-unblock-btn:hover,
.pm-file-toggle:hover,
.v3-close:hover,
.v3-send:hover {
  filter: brightness(1.15) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.pm-friend-select-item:hover {
  background: rgba(79, 149, 216, 0.1) !important;
  color: #2f6fae !important;
}


.message-edit-btn,
.message-delete-btn,
.pm-edit-btn,
.pm-delete-btn {
  border: 1px solid rgba(79,149,216,.14) !important;
  background: #fff !important;
  color: #2f6fae !important;
  border-radius: 8px !important;
  padding: 1px 6px !important;
  font-size: 9px !important;
  line-height: 1.6 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  margin-left: 4px;
}

.message-edit-btn:hover,
.message-delete-btn:hover,
.pm-edit-btn:hover,
.pm-delete-btn:hover {
  background: #f0f4f8;
  color: #1a4d8a;
}

.message-delete-btn:hover,
.pm-delete-btn:hover {
  color: #c62828;
}

@keyframes wpzRecordBlink {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.96); box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); }
  100% { opacity: 1; transform: scale(1); }
}

.wpz-pulse-record {
  animation: wpzRecordBlink 1.4s infinite ease-in-out !important;
}


/* === username-visibility-fix: widen users-panel === */
.chat-shell{
  grid-template-columns: 220px minmax(0, 1fr) 320px !important;
}
.users-panel{
  width: 320px !important;
  min-width: 320px !important;
}
.user-item{
  /* Tight rows — fit more people in Online Now. */
  padding: 4px 10px !important;
}
.user-copy{
  gap: 10px !important;
}
.nick-name-wrap{
  max-width: none !important;
  overflow: visible !important;
}

/* === live-room redesign === */
.live-panel{
  flex: 0 0 auto;
  padding: 14px;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.live-panel.hidden{ display: none !important; }

/* Twitch-themed banner — hidden by default (per user request, July 2026).
   The live room still shows the video frame + meta panel underneath; only
   the Wasted Penguinz / @wastedpenguinzofficial / OFFLINE banner is
   suppressed. Re-enable by removing the `display: none` line. */
.live-banner{
  border-radius: 22px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #9146ff 0%, #6441a5 50%, #2c1740 100%);
  box-shadow: 0 14px 32px rgba(70, 30, 130, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  position: relative;
  display: none;
  overflow: hidden;
}
.live-banner::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 200px at 90% 0%, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}
.live-banner-inner{
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.live-channel-avatar{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #b18aff 0%, #7c4dff 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  flex: 0 0 auto;
}
.live-channel-avatar svg{
  width: 24px;
  height: 24px;
  display: block;
}
.live-banner-info{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.live-channel-name{
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-channel-handle{
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-status-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 0 0 auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.live-status-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b6bcc8;
  box-shadow: 0 0 0 0 rgba(182, 188, 200, 0.6);
}
.live-status-pill.is-live{
  background: rgba(255, 60, 60, 0.22);
  border-color: rgba(255, 120, 120, 0.45);
}
.live-status-pill.is-live .live-status-dot{
  background: #ff3b3b;
  animation: liveDotPulse 1.4s infinite ease-in-out;
}
@keyframes liveDotPulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(255, 59, 59, 0); }
}

/* Main grid */
.live-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 12px;
  /* Side panel must not stretch taller than the player frame. */
  align-items: start;
}
.video-frame-wrap{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #b8dbff 0%, #89c3ff 100%);
  min-height: 140px;
  box-shadow: 0 14px 30px rgba(8, 22, 39, 0.12);
}

/* ── Live room must FIT the column ────────────────────────────────────
   The video used to demand a fixed 16:9 / 320px-min box; with the chat
   strip + composer that exceeded the column height, the overflow-hidden
   column got scrolled and the video's top was cut out of frame. Now the
   panel flexes, the grid row absorbs the leftover height (the Twitch
   iframe letterboxes itself), and the chat strip keeps a fixed share. */
#livePanel:not(.hidden){
  flex: 1 1 auto !important;
  min-height: 0;
}
#livePanel > .live-grid{
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
  grid-template-rows: minmax(0, 1fr);
  /* the redesign sets align-items:start, which collapses the video to
     its min-height instead of filling the row */
  align-items: stretch;
}
/* Meta side-card removed (per request) — the video takes the full row. */
#livePanel .live-meta{
  display: none;
}
/* Donate: compact pill tucked into the right corner under the video. */
#livePanel .live-actions{
  display: flex;
  justify-content: flex-end;
}
#livePanel .live-actions .live-action-btn{
  padding: 7px 16px;
  font-size: 12px;
  gap: 5px;
}
#livePanel .live-actions .live-donate-icon{
  font-size: 13px;
}
#livePanel > .live-grid{
  grid-template-columns: minmax(0, 1fr);
}
/* The base .video-frame rule pins the iframe to min 350px tall, which
   made the wrap overflow its grid row and bleed over the chat below. */
#livePanel .video-frame{
  min-height: 0;
  height: 100%;
}
.main-column:has(> #livePanel:not(.hidden)) .message-log{
  flex: 0 0 auto;
  height: 180px;
  min-height: 0;
}
/* Compact offline-overlay content so it fits the letterboxed frame. */
#livePanel .live-offline-overlay{
  gap: 6px;
  padding: 14px;
}
#livePanel .live-offline-icon{ font-size: 22px; }
#livePanel .live-offline-title{ font-size: 16px; }
#livePanel .live-offline-desc{ font-size: 11.5px; line-height: 1.35; }
#livePanel .live-offline-btn{ padding: 8px 22px; font-size: 13px; }
.video-frame{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}
.live-offline-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(15, 20, 35, 0.86), rgba(45, 20, 70, 0.92));
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 220ms ease;
}
.live-offline-overlay.hidden{ display: none !important; }
/* While the offline overlay is up, blank the Twitch iframe underneath —
   its own offline page bled through the translucent overlay and read as
   broken, misplaced frames. */
.video-frame-wrap:has(.live-offline-overlay:not(.hidden)) .video-frame{
  visibility: hidden;
}
.live-offline-icon{
  font-size: 38px;
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
.live-offline-title{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.live-offline-desc{
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: 320px;
  font-weight: 600;
}
.live-offline-btn{
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #b18aff 0%, #7c4dff 100%);
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 18px rgba(124, 77, 255, 0.4);
  transition: transform 130ms ease, box-shadow 130ms ease;
}
.live-offline-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(124, 77, 255, 0.55);
  color: #fff;
  text-decoration: none;
}

/* Side meta panel */
.live-meta{
  padding: 16px;
  font-size: 13px;
  line-height: 1.6;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-wrap: anywhere;
}
.live-meta-empty{
  color: #71869b;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  padding: 16px 8px;
  font-style: italic;
}
.live-meta-title{
  font-size: 15px;
  font-weight: 800;
  color: var(--accent-ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.live-meta-row{
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(234,245,255,0.95), rgba(255,255,255,0.98));
  border: 1px solid rgba(79, 149, 216, 0.16);
  border-radius: 12px;
}
.live-meta-row .live-meta-label{
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #71869b;
}
.live-meta-row .live-meta-value{
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-ink);
  letter-spacing: -0.01em;
}

/* Bottom action row — Watch stays left, Donate sits on the right edge. */
.live-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
/* Donate cluster: label + button grouped on the right side of the row. */
.live-donate-group{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.live-donate-label{
  font-size: 13px;
  font-weight: 600;
  color: #17334d;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* Hover popup showing the Streamlabs tip form preview. Anchored to
   the right of the Donate button. Falls back to a call-to-action
   when the iframe is blocked by x-frame-options. */
.live-donate-popup{
  position: fixed;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  width: min(330px, calc(100vw - 24px));
  height: auto;
  max-height: calc(100vh - 96px);
  /* Liquid glass — hairline white edge + inner sheen, same recipe as
     the monthly-support / VIP popups. */
  background: linear-gradient(160deg, rgba(240, 248, 255, 0.88), rgba(255, 255, 255, 0.92));
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(31, 38, 135, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
.live-donate-popup.hidden{ display: none !important; }
.live-donate-popup-header{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(120, 168, 224, 0.16);
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(234,245,255,0.45));
}
.live-donate-popup-title{
  font-size: 14px;
  font-weight: 800;
  color: #17334d;
}
.live-donate-popup-url{
  font-size: 11px;
  color: #5a7a99;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.live-donate-popup-frame-wrap{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #f4f7fb;
}
.live-donate-popup-iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #ffffff;
}
.live-donate-popup-fallback{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 24px;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
}
.live-donate-popup-fallback.hidden{ display: none !important; }
.live-donate-fallback-icon{
  font-size: 36px;
  line-height: 1;
  color: #e85a6a;
  margin-bottom: 4px;
}
.live-donate-fallback-title{
  font-size: 15px;
  font-weight: 800;
  color: #17334d;
}
.live-donate-fallback-desc{
  font-size: 12px;
  color: #5a7a99;
  line-height: 1.5;
  max-width: 320px;
}
.live-donate-fallback-saved{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.live-donate-fallback-saved.hidden{ display: none !important; }
.live-donate-saved-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(110, 160, 220, 0.10);
  border: 1px solid rgba(79, 149, 216, 0.18);
}
.live-donate-saved-label{
  font-size: 11px;
  font-weight: 700;
  color: #5a7a99;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.live-donate-saved-value{
  font-size: 13px;
  color: #17334d;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  text-align: left;
}
.live-donate-copy-btn{
  appearance: none;
  border: 1px solid rgba(79, 149, 216, 0.30);
  background: #ffffff;
  color: #17334d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: none !important;
}
.live-donate-copy-btn:hover{
  background: rgba(79, 149, 216, 0.12);
}
.live-donate-copy-btn.is-copied{
  background: rgba(78, 168, 122, 0.18);
  border-color: rgba(78, 168, 122, 0.40);
  color: #1f6b3a;
}
.live-donate-fallback-cta{
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 999px;
  /* Accent glass — the theme's primary-CTA recipe (translucent blue,
     hairline + sheen), replacing the off-theme red. */
  background: linear-gradient(135deg, rgba(120,178,240,0.88), rgba(64,124,196,0.9));
  backdrop-filter: blur(12px) saturate(170%);
  -webkit-backdrop-filter: blur(12px) saturate(170%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 14px rgba(50, 100, 160, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: none !important;
}
.live-donate-fallback-cta:hover{
  color: #ffffff;
  text-decoration: none;
  filter: brightness(1.05);
}
.live-action-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 130ms ease, box-shadow 150ms ease, background 150ms ease;
  border: 1px solid rgba(79, 149, 216, 0.22);
  background: linear-gradient(180deg, #ffffff 0%, #f1f7ff 100%);
  color: #17334d;
  box-shadow: 0 8px 18px rgba(103, 138, 176, 0.10);
}
.live-action-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(103, 138, 176, 0.18);
  color: #17334d;
  text-decoration: none;
}
.live-action-btn svg{
  display: block;
}
.live-action-primary{
  background: linear-gradient(135deg, #9146ff 0%, #6441a5 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 22px rgba(70, 30, 130, 0.30);
}
.live-action-primary:hover{
  color: #fff;
  box-shadow: 0 14px 28px rgba(70, 30, 130, 0.45);
}
.live-donate-icon{
  display: inline-block;
  color: #e85a6a;
  font-size: 14px;
  line-height: 1;
}
.live-action-primary .live-donate-icon{
  color: #fff;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 900px){
  .live-grid{
    grid-template-columns: 1fr !important;
  }
  .live-meta{ order: 2; }
  .video-frame-wrap{ min-height: 240px !important; }
}

/* ============================================================
   Monthly server support bar (self-hosted donation system)
   ============================================================ */
/* The topbar is pinned at z-index:1 (see the v13x .topbar rule), which traps
   the support popup UNDER the session strip (z-index 30) and its menu row
   (raised to 1000 on hover). While the bar is hovered or its popup is open,
   float whichever ancestor currently hosts the bar (topbar when logged out,
   #supportBarDock after login) above them. */
.topbar:has(.monthly-support-bar:hover),
.topbar:has(.monthly-support-popup:not(.hidden)),
.support-bar-dock:has(.monthly-support-bar:hover),
.support-bar-dock:has(.monthly-support-popup:not(.hidden)){
  position: relative;
  z-index: 1200 !important;
}
/* Column stack next to the logo: donation bar on top, recent-donations
   strip beneath it while logged out (client.js parks the strip here). */
.support-stack{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  align-self: center;
  /* hug the logo — keeps userActions pushed to the far right */
  margin-right: auto;
}
.support-stack .monthly-support-bar{
  margin: 0;
}
.support-stack .topbar-recent-donations{
  margin: 0;
  flex: 0 0 auto;
  min-width: 220px;
  max-width: 320px;
  min-height: 21px;
  padding: 2px 9px;
  gap: 6px;
}
/* Compact everything inside so donor pills fit without clipping. */
.support-stack .topbar-recent-donations-label{
  font-size: 7.5px;
}
.support-stack .topbar-recent-donations-track{
  gap: 4px;
}
.support-stack .topbar-recent-donations-item{
  gap: 4px;
  padding: 1px 6px 1px 2px;
  font-size: 9.5px;
}
.support-stack .topbar-recent-donations-item .avatar{
  width: 13px;
  height: 13px;
  font-size: 7.5px;
}
.support-stack .topbar-recent-donations-item .amount{
  font-size: 8.5px;
}
.support-stack .topbar-recent-donations-empty{
  font-size: 9.5px;
}
.monthly-support-bar{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  width: auto;
  min-width: 220px;
  max-width: 320px;
  flex: 0 1 auto;
  align-self: center;
  /* auto right margin keeps the bar hugging the logo even when the
     recent-donations spacer is moved out of the topbar (logged in) */
  margin: 0 auto 0 0;
  padding: 8px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(234,245,255,0.78));
  border: 1px solid rgba(120,168,224,0.22);
  box-shadow: 0 10px 24px rgba(8,22,39,0.10);
  transition: box-shadow 240ms ease, transform 240ms ease;
}
.monthly-support-bar:hover{
  box-shadow: 0 14px 32px rgba(8,22,39,0.16);
}
.monthly-support-bar.is-flashing{
  box-shadow: 0 0 0 4px rgba(255, 187, 105, 0.45), 0 10px 26px rgba(8,22,39,0.18);
  transform: translateY(-1px);
}

/* ── VIP menu button + purchase hover popup ────────────────────────────── */
.vip-menu-wrap{
  position: relative;
  display: inline-flex;
  margin-right: 12px;
  /* .main-menu-right carries pointer-events:none (Book WPZ is display-only);
     the VIP button is interactive, so restore pointer events here. */
  pointer-events: auto !important;
}
.vip-menu-wrap *{
  pointer-events: auto;
}
/* The session strip's backdrop-filter creates a stacking context, which
   trapped its dropdowns UNDER the track-of-the-week banner and room header
   (both later in the DOM with their own backdrop contexts). Lift the strip
   above them so the main-menu dropdown and VIP popup paint on top. Modals
   use z-index ≥ 1000 and still cover everything. */
.session-strip{
  position: relative;
  z-index: 30;
}
/* While the menu row is hovered (e.g. VIP popup open), float it above the
   rest of the strip. Extra selector depth beats index.html's !important 50. */
.session-strip .session-pill .main-menu-row:hover,
.session-strip .session-pill .main-menu-row:has(.vip-menu-popup.is-open),
body .main-menu-row:has(.vip-menu-wrap:hover){
  z-index: 1000 !important;
}
.vip-menu-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 20px;
  min-height: 46px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffe9b8 0%, #ffd47e 100%);
  border: 1px solid rgba(216, 164, 49, 0.35);
  box-shadow: 0 12px 24px rgba(8,22,39,0.16);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .01em;
  color: #4d3608;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 140ms ease, box-shadow 200ms ease;
}
/* The global "app-like cursor" rule (button:hover, ~line 8035) flattens the
   shadow to 0 4px 12px and adds brightness(1.15) with !important — on this
   button that reads as a dim/flatten instead of the lift the neighboring
   header pills (.session-link/.book-wpz-link, all <a> tags) get. Out-specify
   it so VIP hovers like the rest of the row. */
.vip-menu-btn:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 28px rgba(8,22,39,0.20) !important;
  filter: none !important;
  background: linear-gradient(135deg, #ffefc9 0%, #ffda8f 100%);
}
.vip-menu-btn.is-vip{
  background: linear-gradient(135deg, #ffdf94 0%, #ffc84d 100%);
}
.vip-menu-btn.is-vip:hover{
  background: linear-gradient(135deg, #ffe6a8 0%, #ffd166 100%);
}
.vip-menu-popup{
  /* Kept in the layout (not display:none) so open/close can fade AND get a
     260ms grace period — the old instant hide made the popup vanish when
     the cursor briefly left while crossing the gap or hugging an edge. */
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 260ms;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  z-index: 60;
  /* Liquid glass — same recipe as the monthly-support popup. NOTE: the
     session strip's own backdrop-filter limits this element's backdrop
     root, so a translucent background lets the chat bleed through un-
     blurred. Near-opaque background (like the support popup) is what
     actually reads as frosted glass here. */
  /* Exclusive gold-touched glass: warm gradient, gold hairline + halo. */
  background: linear-gradient(165deg, rgba(255, 249, 230, 0.98) 0%, rgba(255,255,255,0.98) 40%, rgba(240,248,255,0.96) 100%);
  border: 1px solid rgba(216, 164, 49, 0.4);
  border-radius: 28px;
  box-shadow:
    0 24px 60px rgba(31, 38, 135, 0.2),
    0 0 26px rgba(246, 193, 60, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.75);
  padding: 18px;
  text-align: left;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  /* NOTE: no overflow:hidden — the ::before hover bridge sits above the
     card edge and must stay interactive. */
}
/* "EXCLUSIVE" seal in the corner. */
.vip-menu-popup::after{
  content: "EXCLUSIVE";
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #7a5b16;
  background: linear-gradient(135deg, #fff6dc, #ffe9ad);
  border: 1px solid rgba(216, 164, 49, 0.5);
  border-radius: 999px;
  padding: 4px 10px;
  box-shadow: 0 2px 6px rgba(216, 164, 49, 0.25), inset 0 1px 0 rgba(255,255,255,0.7);
}
.vip-menu-wrap:hover .vip-menu-popup,
.vip-menu-popup:hover,
.vip-menu-popup.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}
/* Hard-hide while the signup/login modal is up (guest → Get VIP flow) —
   beats the :hover rules above even if the cursor is still on the popup. */
.vip-menu-popup.is-suppressed{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Invisible hover bridge across the 10px gap between the VIP button and
   the popup — crossing it no longer drops :hover (the bridge is part of
   the popup, which is a descendant of the wrap). */
.vip-menu-popup::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
/* The popup is portaled to <body> by client.js (like the merch popup) so
   it can sit ABOVE the hover-focus blur overlay (z 100001) while the rest
   of the page — session strip included — softens behind it, exactly like
   the other buttons' hover popups. JS sets top/right inline. */
.vip-menu-popup.is-floating{
  position: fixed;
  z-index: 100002;
}
.vip-popup-eyebrow{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #b8860b;
}
.vip-popup-eyebrow::before{ content: "⭐ "; }
.vip-popup-title{
  font-size: 19px;
  font-weight: 900;
  color: #17334d;
  margin: 2px 0 2px;
  letter-spacing: -0.01em;
}
.vip-popup-price{
  font-size: 14px;
  color: #4d6b8c;
  margin-bottom: 10px;
}
.vip-popup-price strong{
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(135deg, #b8860b 0%, #e8a422 45%, #8a6508 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #b8860b;
}
.vip-popup-perks{
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.vip-popup-perks li{
  font-size: 12px;
  font-weight: 600;
  color: #2c4560;
  line-height: 1.35;
  padding: 2px 6px;
  border-radius: 8px;
  transition: background 140ms ease, transform 140ms ease;
}
.vip-popup-perks li:hover{
  background: rgba(255, 244, 214, 0.85);
  transform: translateX(3px);
}
.vip-popup-buy{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(216, 164, 49, 0.55);
  background: linear-gradient(135deg, #ffe9a8 0%, #f6c13c 45%, #ffb347 100%);
  color: #5d430c;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(246, 193, 60, 0.4), inset 0 1px 0 rgba(255,255,255,0.55);
  transition: transform 140ms ease, box-shadow 200ms ease;
}
.vip-popup-buy::after{
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: wpzVipCtaShine 3.4s ease-in-out infinite;
}
.vip-popup-buy:hover{
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 16px 32px rgba(246, 193, 60, 0.55), inset 0 1px 0 rgba(255,255,255,0.55);
}
.vip-popup-buy:disabled{
  opacity: 0.65;
  cursor: default;
  transform: none;
}
.vip-popup-note{
  margin-top: 8px;
  font-size: 10.5px;
  color: #8b9bad;
  text-align: center;
}

/* ── Boot-retry overlay — blocks the half-loaded app while the session
   retries (nothing behind it works without a session, so nothing behind
   it may be clickable). ───────────────────────────────────────────────── */
.wpz-boot-overlay{
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(220, 236, 255, 0.55);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}
.wpz-boot-card{
  max-width: 380px;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(120, 168, 224, 0.25);
  border-radius: 24px;
  padding: 34px 30px;
  box-shadow: 0 24px 60px rgba(8, 22, 39, 0.16);
}
.wpz-boot-emoji{
  font-size: 38px;
  margin-bottom: 10px;
}
.wpz-boot-title{
  font-size: 18px;
  font-weight: 800;
  color: #17334d;
  margin-bottom: 6px;
}
.wpz-boot-sub{
  font-size: 13px;
  color: #4d6b8c;
}
.wpz-boot-sub strong{
  color: #2f6fae;
}

/* ── Avatar lightbox — enlarged profile photo over a blurred page ─────── */
.wpz-avatar-lightbox{
  position: fixed;
  inset: 0;
  /* The profile modal pins itself at 2147483646 (int max − 1); the
     lightbox must cover it, so it takes the last slot. */
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 25, 38, 0.35);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
  cursor: zoom-out;
}
.wpz-avatar-lightbox.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 200ms ease, visibility 0s;
}
.wpz-avatar-lightbox figure{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: scale(0.92);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wpz-avatar-lightbox.is-open figure{
  transform: scale(1);
}
.wpz-avatar-lightbox img{
  width: min(60vmin, 420px);
  height: min(60vmin, 420px);
  object-fit: cover;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 40px 100px rgba(8, 22, 39, 0.5);
}
.wpz-avatar-lightbox figcaption{
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  text-shadow: 0 2px 12px rgba(8, 22, 39, 0.6);
}

/* Profile editor avatar: reveal the "Upload" overlay on hover (the
   overlay carries inline opacity:0 + transition; !important wins). */
#wpzAvatarEditTrigger:hover .avatar-hover-overlay{
  opacity: 1 !important;
}

/* ── @mention autocomplete picker (message input) ──────────────────────── */
.mention-autocomplete{
  position: absolute;
  bottom: calc(100% + 8px);
  left: 10px;
  min-width: 230px;
  max-width: 340px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(240,248,255,0.95));
  border: 1px solid rgba(120,168,224,0.22);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(8,22,39,0.18);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  padding: 6px;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mention-autocomplete.hidden{
  display: none;
}
.mention-autocomplete-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  color: #1d5c9e;
  cursor: pointer;
  white-space: nowrap;
}
.mention-autocomplete-item:hover,
.mention-autocomplete-item.is-selected{
  background: rgba(109, 179, 255, 0.14);
}
.mention-autocomplete-item.is-staff{
  color: #a04a08;
}
.mention-autocomplete-item.is-staff:hover,
.mention-autocomplete-item.is-staff.is-selected{
  background: rgba(255, 140, 66, 0.14);
}
.mention-autocomplete-hint{
  font-size: 10px;
  font-weight: 600;
  color: #7a92ad;
}
.mention-autocomplete-item.is-staff .mention-autocomplete-hint{
  color: #a04a08;
  opacity: 0.85;
}

/* ── @mentions in chat ─────────────────────────────────────────────────── */
.msg-mention{
  display: inline-block;
  padding: 0 5px;
  border-radius: 7px;
  background: rgba(109, 179, 255, 0.18);
  color: #1d5c9e;
  font-weight: 700;
}
/* User mentions open the member context menu on click (@staff doesn't). */
.message-bubble .msg-mention:not(.msg-mention-staff){
  cursor: pointer !important;
}
.message-bubble .msg-mention:not(.msg-mention-staff):hover{
  background: rgba(109, 179, 255, 0.32);
  text-decoration: underline;
}
.msg-mention-self{
  background: rgba(109, 179, 255, 0.35);
  color: #123f73;
  box-shadow: inset 0 0 0 1px rgba(61, 140, 224, 0.35);
}
.msg-mention-staff{
  background: rgba(255, 140, 66, 0.18);
  color: #a04a08;
  box-shadow: inset 0 0 0 1px rgba(255, 140, 66, 0.3);
}

/* ── In-page VIP checkout modal (Stripe Embedded Checkout) ─────────────── */
.vip-checkout-overlay{
  position: fixed;
  inset: 0;
  z-index: 2147483648;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* A light dim ONLY — no backdrop blur. The room stays readable while the
     checkout is open: a champagne pop is a public moment, and the donor
     should still see the chat celebrating behind the payment card instead
     of a wall of frosted glass. */
  background: rgba(10, 16, 24, 0.38);
}
.vip-checkout-card{
  width: min(500px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(245,248,255,0.92), rgba(228,240,255,0.88));
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 28px;
  box-shadow: 0 32px 80px rgba(31, 38, 135, 0.30), inset 0 1px 0 rgba(255,255,255,0.6);
  backdrop-filter: blur(32px) saturate(210%);
  -webkit-backdrop-filter: blur(32px) saturate(210%);
  overflow: hidden;
}
.vip-checkout-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(120,168,224,0.16);
}
.vip-checkout-title{
  font-size: 14px;
  font-weight: 800;
  color: #17334d;
}
.vip-checkout-close{
  appearance: none;
  border: 1px solid rgba(120,168,224,0.25);
  background: rgba(255,255,255,0.75);
  color: #17334d;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease;
}
.vip-checkout-close:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(8,22,39,0.14);
}
.vip-checkout-mount{
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 320px;
  background: #ffffff;
}
.vip-checkout-loading{
  padding: 48px 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #4d6b8c;
}

/* Dock under the main menu that hosts the support bar + recent donations
   while a user is logged in (client.js reparents them out of the topbar). */
.support-bar-dock{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 4px;
}
.support-bar-dock.hidden{
  display: none !important;
}
.support-bar-dock .topbar-recent-donations{
  margin: 0;
  flex: 1 1 auto;
  max-width: 480px;
}
/* In the dock the bar sits at the far left, so anchor the popup to the
   bar's left edge instead of its right — otherwise it hangs off-screen. */
.support-bar-dock .monthly-support-popup{
  left: 0;
  right: auto;
}

/* (Leaderboard strip moved OUT of the bar to the topbar. Its styles now
   live under .topbar-recent-donations-* further down this file.) */

@keyframes wpzLbFadeIn{
  from{ opacity: 0; transform: translateY(3px); }
  to  { opacity: 1; transform: translateY(0);  }
}

.monthly-support-trigger{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
}
.monthly-support-emoji{
  font-size: 18px;
  color: #ff5f5f;
  flex: 0 0 auto;
  display: inline-block;
  transform-origin: center 60%;
}
.monthly-support-text{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-ink, #17334d);
  /* Never truncate the title — "Support the se…" looked broken. The
     counter next to it is the flexible part. */
  flex: 0 0 auto;
  text-transform: none;
  white-space: nowrap;
}
.monthly-support-counter{
  font-size: 11px;
  color: #4d6b8c;
  white-space: nowrap;
  flex: 0 0 auto;
  font-weight: 600;
}
.monthly-support-counter strong{
  color: #17334d;
  font-weight: 800;
  font-size: 12px;
}

/* ── Eye-catching animations ─────────────────────────────────────────
   `monthly-support-trigger-pulse` adds a subtle scaling pulse to the
   whole trigger button so the eye is drawn to the bar. Pauses on
   hover so the user can click without distraction.
   `monthly-support-emoji-shimmer` runs a quick beat on the heart so
   it reads as "alive / in need". */
.monthly-support-trigger-pulse{
  animation: wpzTriggerPulse 2.6s ease-in-out infinite;
  will-change: transform;
}
.monthly-support-trigger-pulse:hover,
.monthly-support-trigger-pulse:focus-visible{
  animation-play-state: paused;
}
@keyframes wpzTriggerPulse{
  0%, 92%, 100% { transform: scale(1); }
  20%           { transform: scale(1.025); }
  32%           { transform: scale(1); }
  44%           { transform: scale(1.025); }
  56%           { transform: scale(1); }
}
.monthly-support-emoji-shimmer{
  animation: wpzHeartBeat 1.4s ease-in-out infinite;
}
@keyframes wpzHeartBeat{
  0%, 60%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,95,95,0)); }
  20%           { transform: scale(1.28); filter: drop-shadow(0 0 6px rgba(255,95,95,0.55)); }
  40%           { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(255,95,95,0)); }
}
.monthly-support-progress{
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(120, 168, 224, 0.18);
  overflow: hidden;
  flex: 0 0 auto;
}
.monthly-support-fill{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, #6db3ff 0%, #4773d6 60%, #2a4ea8 100%);
  border-radius: 999px;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1), background 240ms ease;
  box-shadow: 0 0 6px rgba(109, 179, 255, 0.6);
  overflow: hidden;
}

/* "Show up in the server for everyone" opt-in in the donate dialog —
   greyed out until the amount reaches €10. */
.wpz-donate-announce-toggle{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  transition: opacity 160ms ease;
}
.wpz-donate-announce-toggle.is-disabled{
  opacity: 0.45;
  pointer-events: none;
}
.wpz-donate-announce-hint{
  font-size: 11px;
  color: #7a92ad;
  font-weight: 600;
}

/* Staff-only ✕ that strips an offensive supporter message for everyone. */
.monthly-support-msg-remove{
  appearance: none;
  border: none;
  background: rgba(196, 61, 61, 0.10);
  color: #b03a3a;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 2px 5px;
  margin-left: 6px;
  border-radius: 6px;
  cursor: pointer !important;
  vertical-align: middle;
}
.monthly-support-msg-remove:hover{
  background: rgba(196, 61, 61, 0.22);
}
.monthly-support-msg-remove:disabled{
  opacity: 0.4;
}

/* Days-until-reset countdown next to the €raised/€goal counter. */
.monthly-support-days{
  font-size: 10px;
  font-weight: 700;
  color: #7a92ad;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ── Goal-proximity animations ───────────────────────────────────────
   Classes applied by client.js updateDonationBar() to the fill AND its
   track: is-warm (≥60%), is-almost (≥85%), is-goal-reached (≥100%).
   Each state builds on the previous — shimmer, then gold glow, then a
   full celebration flow when the goal is hit. */

/* Shimmer sweep — a soft light band travelling across the fill. */
.monthly-support-fill::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-130%);
  opacity: 0;
}
.monthly-support-fill.is-warm::after{
  opacity: 1;
  animation: wpzFillShimmer 2.4s ease-in-out infinite;
}
.monthly-support-fill.is-almost::after{
  animation-duration: 1.3s;
}
@keyframes wpzFillShimmer{
  0%   { transform: translateX(-130%); }
  100% { transform: translateX(330%); }
}

/* Almost there (≥85%) — fill heats up to gold and pulses. */
.monthly-support-fill.is-almost{
  background: linear-gradient(90deg, #ffc861 0%, #ff9d3c 55%, #ff7a3d 100%);
  animation: wpzFillHotGlow 1.5s ease-in-out infinite;
}
@keyframes wpzFillHotGlow{
  0%, 100% { box-shadow: 0 0 6px rgba(255, 160, 60, 0.55); }
  50%      { box-shadow: 0 0 16px rgba(255, 160, 60, 0.95); }
}

/* Goal reached (100%) — flowing gold gradient + glowing track. */
.monthly-support-fill.is-goal-reached{
  background: linear-gradient(90deg, #ffd54d, #ffb347, #ffe98a, #f7c948, #ffd54d);
  background-size: 250% 100%;
  animation: wpzGoldFlow 2.2s linear infinite, wpzFillHotGlow 1.5s ease-in-out infinite;
}
@keyframes wpzGoldFlow{
  0%   { background-position: 0% 0; }
  100% { background-position: 250% 0; }
}
.monthly-support-progress.is-goal-reached{
  background: rgba(255, 213, 77, 0.20);
  box-shadow: 0 0 12px rgba(255, 200, 80, 0.45);
}

/* Popup */
.monthly-support-popup{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 24px);
  z-index: 50;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(240,248,255,0.95));
  border: 1px solid rgba(120,168,224,0.22);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(8,22,39,0.22);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  font-family: inherit;
  text-align: left;
  color: var(--accent-ink, #17334d);
}
.monthly-support-popup.hidden{ display: none !important; }
.monthly-support-popup-header{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.monthly-support-eyebrow{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f8ba8;
}
.monthly-support-title{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #17334d;
}
.monthly-support-desc{
  font-size: 12px;
  color: #4d6b8c;
  line-height: 1.4;
}
/* 2×2 grid — four tiles in one row squeezed the labels ("MONTHLY
   SUPPORTERS", "DONATIONS") out of their tiles at the popup's width. */
.monthly-support-stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}
.monthly-support-stat{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(234, 245, 255, 0.7);
  border: 1px solid rgba(120,168,224,0.15);
}
.monthly-support-stat-label{
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6f8ba8;
}
.monthly-support-stat-value{
  font-size: 13px;
  font-weight: 600;
  color: #17334d;
}
.monthly-support-section{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.monthly-support-section-label{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4d6b8c;
  display: flex;
  align-items: center;
  gap: 8px;
}
.monthly-support-recommended{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff8c42 0%, #ff5f5f 100%);
  color: #fff;
  text-transform: uppercase;
}
.monthly-support-presets{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 6px;
}
.monthly-support-preset{
  appearance: none;
  border: 1px solid rgba(120,168,224,0.28);
  background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
  color: #17334d;
  font-weight: 500;
  font-size: 11.5px;
  padding: 6px 6px;
  border-radius: 9px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.monthly-support-preset:hover{
  transform: translateY(-1px);
  border-color: #6db3ff;
  box-shadow: 0 6px 14px rgba(109, 179, 255, 0.32);
}
.monthly-support-preset.is-recommended{
  background: linear-gradient(180deg, #ffe2c5 0%, #ffc098 100%);
  border-color: rgba(255, 140, 66, 0.5);
  color: #6b2a05;
}
.monthly-support-providers{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.monthly-support-providers-label{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4d6b8c;
}
.monthly-support-provider-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.monthly-support-provider{
  appearance: none;
  border: 1px solid rgba(120,168,224,0.28);
  background: rgba(255,255,255,0.9);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  font: inherit;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 120ms ease;
}
.monthly-support-provider:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(8,22,39,0.10);
  border-color: #6db3ff;
}
.monthly-support-provider.is-active{
  border-color: #4773d6;
  background: linear-gradient(180deg, #e8f1ff 0%, #d4e3ff 100%);
}
.monthly-support-provider .provider-name{
  font-size: 12.5px;
  font-weight: 600;
  color: #17334d;
}
.monthly-support-provider .provider-sub{
  font-size: 10px;
  color: #6f8ba8;
}
.monthly-support-leaderboard{
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}
.monthly-support-leaderboard-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.monthly-support-leaderboard-empty{
  padding: 12px 8px;
  font-size: 12px;
  color: #6f8ba8;
  text-align: center;
  background: rgba(234, 245, 255, 0.5);
  border-radius: 10px;
  font-style: italic;
}
.monthly-support-leaderboard-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(120,168,224,0.12);
  border-radius: 12px;
}
.monthly-support-leaderboard-avatar{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6db3ff 0%, #4773d6 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}
.monthly-support-leaderboard-body{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.monthly-support-leaderboard-row{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.monthly-support-leaderboard-name{
  font-size: 12.5px;
  font-weight: 600;
  color: #17334d;
}
.monthly-support-leaderboard-badge{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff8c42 0%, #ff5f5f 100%);
  color: #fff;
}
.monthly-support-leaderboard-amount{
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: #2a4ea8;
}
.monthly-support-leaderboard-msg{
  font-size: 11.5px;
  color: #4d6b8c;
  font-style: italic;
  line-height: 1.4;
}
.monthly-support-leaderboard-time{
  font-size: 10.5px;
  color: #6f8ba8;
}

@media (max-width: 900px){
  .monthly-support-bar{
    max-width: 100%;
  }
  .monthly-support-popup{
    position: fixed;
    top: auto;
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Owner announcement broadcast — full-screen liquid-glass modal that
   forces every connected user to read a server-wide message. Built
   once in JS (lazy-created on first broadcast) so the HTML stays lean.
   ════════════════════════════════════════════════════════════════════ */
.wpz-announce-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:2147483647;
  background:rgba(70, 110, 170, 0.32);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  align-items:center;
  justify-content:center;
  padding:24px;
  animation: wpzAnnounceFade 240ms ease-out;
}
.wpz-announce-modal.is-open{ display:flex; }

@keyframes wpzAnnounceFade{
  from{ opacity:0; }
  to  { opacity:1; }
}

.wpz-announce-card{
  position: relative;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow: auto;
  padding: 28px 26px 22px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(220, 235, 255, 0.6) 0%, rgba(255, 255, 255, 0.7) 55%, rgba(195, 220, 250, 0.55) 100%);
  backdrop-filter: blur(40px) saturate(220%) brightness(1.05);
  -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 28px 70px rgba(31, 38, 135, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  color: #17334d;
  animation: wpzAnnouncePop 280ms cubic-bezier(.18, .9, .3, 1.18);
  text-align: center;
}
@keyframes wpzAnnouncePop{
  from{ transform: translateY(14px) scale(0.96); opacity:0; }
  to  { transform: translateY(0)    scale(1);    opacity:1; }
}

.wpz-announce-eyebrow{
  display:inline-block;
  font-size: 11px;
  letter-spacing: 1.6px;
  font-weight: 800;
  text-transform: uppercase;
  color: #1d4a85;
  background: linear-gradient(135deg, rgba(180, 215, 255, 0.55), rgba(220, 235, 255, 0.4));
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(110, 160, 220, 0.45);
  margin-bottom: 14px;
}

/* Donation celebration variant — same layout as the owner broadcast but
   warmed up: gold eyebrow pill and a soft gold halo on the card. */
.wpz-announce-modal.is-donation .wpz-announce-eyebrow{
  color: #7a5410;
  background: linear-gradient(135deg, rgba(255, 227, 160, 0.75), rgba(255, 240, 200, 0.55));
  border-color: rgba(216, 164, 49, 0.5);
}
.wpz-announce-modal.is-donation .wpz-announce-card{
  box-shadow: 0 30px 80px rgba(8, 22, 39, 0.35), 0 0 42px rgba(255, 200, 80, 0.35);
  border-color: rgba(216, 164, 49, 0.35);
}
.wpz-announce-modal.is-donation .wpz-announce-message{
  font-style: italic;
}
/* Donation celebration motion: springy card pop, staggered title rise,
   breathing gold eyebrow — plus the floating hearts layer from JS. */
.wpz-announce-modal.is-donation .wpz-announce-card{
  animation: wpzDonationPop 620ms cubic-bezier(0.2, 1.5, 0.4, 1);
}
@keyframes wpzDonationPop{
  0%{ transform: scale(0.82) translateY(26px); opacity: 0; }
  60%{ transform: scale(1.04) translateY(-6px); opacity: 1; }
  100%{ transform: scale(1) translateY(0); }
}
.wpz-announce-modal.is-donation .wpz-announce-eyebrow{
  animation: wpzDonationEyebrow 1.8s ease-in-out infinite;
}
@keyframes wpzDonationEyebrow{
  0%, 100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(216, 164, 49, 0.35); }
  50%{ transform: scale(1.06); box-shadow: 0 0 18px 2px rgba(216, 164, 49, 0.35); }
}
.wpz-announce-modal.is-donation .wpz-announce-title{
  animation: wpzDonationTitle 700ms 120ms cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}
@keyframes wpzDonationTitle{
  from{ transform: translateY(12px) scale(0.94); opacity: 0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

/* Champagne pop (€1000) — the donation variant cranked to eleven: deep
   gold halo, springy pop-in, rising champagne bubbles behind the copy. */
.wpz-announce-modal.is-champagne .wpz-announce-eyebrow{
  color: #5d3f0a;
  background: linear-gradient(135deg, rgba(255, 216, 120, 0.9), rgba(255, 236, 180, 0.75));
  border-color: rgba(184, 134, 28, 0.65);
  font-weight: 800;
  letter-spacing: 0.08em;
}
.wpz-announce-modal.is-champagne .wpz-announce-card{
  border-color: rgba(240, 189, 72, 0.65);
  box-shadow: 0 30px 90px rgba(8, 22, 39, 0.4), 0 0 80px rgba(255, 195, 66, 0.6), 0 0 160px rgba(255, 180, 40, 0.3);
  animation:
    wpzVipCardPop 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
    wpzChampagneGlow 2.2s ease-in-out 420ms infinite alternate;
  position: relative;
  overflow: hidden;
}
@keyframes wpzChampagneGlow{
  from{ box-shadow: 0 30px 90px rgba(8, 22, 39, 0.4), 0 0 60px rgba(255, 195, 66, 0.45), 0 0 120px rgba(255, 180, 40, 0.22); }
  to  { box-shadow: 0 30px 90px rgba(8, 22, 39, 0.4), 0 0 100px rgba(255, 195, 66, 0.75), 0 0 190px rgba(255, 180, 40, 0.4); }
}
/* Keep the card copy above the decoration layer. */
.wpz-announce-modal.is-champagne .wpz-announce-card > *:not(.wpz-champagne-fx){
  position: relative;
  z-index: 1;
}
.wpz-champagne-fx{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* Bottle: quick shake building up, then a pop-tilt — like the cork going. */
.wpz-champagne-bottle{
  position: absolute;
  top: 14px;
  left: 18px;
  font-size: 46px;
  transform-origin: 50% 88%;
  animation: wpzBottleShakePop 2.8s ease-in-out infinite;
  filter: drop-shadow(0 4px 14px rgba(255, 195, 66, 0.55));
}
@keyframes wpzBottleShakePop{
  0%, 8%   { transform: rotate(0deg) scale(1); }
  12%      { transform: rotate(-7deg) scale(1); }
  16%      { transform: rotate(6deg) scale(1); }
  20%      { transform: rotate(-6deg) scale(1); }
  24%      { transform: rotate(5deg) scale(1); }
  28%      { transform: rotate(-4deg) scale(1.02); }
  36%      { transform: rotate(-22deg) scale(1.22); }
  48%      { transform: rotate(-18deg) scale(1.12); }
  62%, 100%{ transform: rotate(0deg) scale(1); }
}
/* Glasses: clink-tilt toward each other on a happy loop. */
.wpz-champagne-glasses{
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 40px;
  transform-origin: 50% 85%;
  animation: wpzGlassesClink 2.2s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(255, 214, 110, 0.5));
}
@keyframes wpzGlassesClink{
  0%, 100% { transform: rotate(0deg) scale(1); }
  30%      { transform: rotate(-8deg) scale(1.06); }
  45%      { transform: rotate(6deg) scale(1.14); }
  60%      { transform: rotate(-4deg) scale(1.04); }
}
/* Confetti / bubble spray: emoji rise from the bottom edge, drifting
   sideways and spinning as they fade — parameters are randomized inline
   per particle by client.js. */
.wpz-champagne-confetti{
  position: absolute;
  top: 100%;
  animation-name: wpzChampagneConfetti;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
@keyframes wpzChampagneConfetti{
  0%  { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8%  { opacity: 1; }
  100%{ transform: translate(var(--confetti-drift, 0px), -560px) rotate(320deg); opacity: 0; }
}
.wpz-announce-modal.is-champagne .wpz-announce-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(4px 4px at 12% 100%, rgba(255, 214, 110, 0.85) 40%, transparent 60%),
    radial-gradient(3px 3px at 30% 100%, rgba(255, 236, 170, 0.8) 40%, transparent 60%),
    radial-gradient(5px 5px at 48% 100%, rgba(255, 205, 90, 0.7) 40%, transparent 60%),
    radial-gradient(3px 3px at 64% 100%, rgba(255, 236, 170, 0.85) 40%, transparent 60%),
    radial-gradient(4px 4px at 80% 100%, rgba(255, 214, 110, 0.75) 40%, transparent 60%),
    radial-gradient(3px 3px at 93% 100%, rgba(255, 236, 170, 0.8) 40%, transparent 60%);
  background-repeat: no-repeat;
  animation: wpzChampagneBubbles 2.6s linear infinite;
  pointer-events: none;
}
@keyframes wpzChampagneBubbles{
  from{ transform: translateY(0); opacity: 0.9; }
  to  { transform: translateY(-115%); opacity: 0; }
}
.wpz-announce-modal.is-champagne .wpz-announce-title{
  /* Solid gold + glow (not gradient-clipped text) so the 🍾🥂 emoji in the
     title keep their native full-color rendering. */
  color: #8a5f12;
  font-weight: 900;
  animation: wpzChampagneTitleGlow 1.8s ease-in-out infinite alternate;
}
@keyframes wpzChampagneTitleGlow{
  from{ text-shadow: 0 0 12px rgba(255, 205, 90, 0.35), 0 0 30px rgba(255, 195, 66, 0.15); }
  to  { text-shadow: 0 0 20px rgba(255, 205, 90, 0.65), 0 0 46px rgba(255, 195, 66, 0.35); }
}

/* Champagne banner — the 2-minute afterglow strip above the chat log
   after a €1000+ donation. Gold liquid glass with a slow shine sweep. */
.wpz-champagne-banner{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 10px 4px;
  padding: 8px 12px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 246, 220, 0.92), rgba(255, 233, 173, 0.85));
  border: 1px solid rgba(216, 164, 49, 0.55);
  box-shadow: 0 6px 22px rgba(255, 195, 66, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  animation: wpzChampagneBannerIn 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
  flex: 0 0 auto;
}
.wpz-champagne-banner::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: wpzPopShine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wpzChampagneBannerIn{
  from{ opacity: 0; transform: translateY(-8px) scale(0.97); }
  to  { opacity: 1; transform: translateY(0) scale(1); }
}
.wpz-champagne-banner.is-leaving{
  transition: opacity 600ms ease, transform 600ms ease;
  opacity: 0;
  transform: translateY(-8px);
}
.wpz-champagne-banner-icon{
  font-size: 17px;
  animation: wpzGlassesClink 2.6s ease-in-out infinite;
  transform-origin: 50% 85%;
}
.wpz-champagne-banner-text{
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: #6b4c10;
}
.wpz-champagne-banner-close{
  appearance: none;
  border: 0;
  background: none;
  font-size: 16px;
  line-height: 1;
  color: #a07c2a;
  cursor: pointer;
  padding: 0 2px;
  position: relative;
  z-index: 1;
}

/* "People said thanks" — inline strip in the room header's free space
   (between the room title and the MAINSTAGE badge), filling live as
   users hit Say thanks. */
.wpz-thanks-window{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.8), rgba(232, 243, 255, 0.7));
  border: 1px solid rgba(90, 167, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 10px rgba(35, 68, 105, 0.12);
  animation: wpzChampagneBannerIn 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wpz-thanks-window-title{
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #2f5a86;
  white-space: nowrap;
}
.wpz-thanks-window-list{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.wpz-thanks-window-list::-webkit-scrollbar{ display: none; }
.wpz-thanks-window-item{
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  color: #17334d;
  animation: wpzChampagneBannerIn 260ms ease-out;
}
.wpz-thanks-window-empty{
  font-size: 11px;
  color: #6d8195;
  font-style: italic;
  white-space: nowrap;
}
.wpz-thanks-window.is-fading{
  opacity: 0;
  transition: opacity 2.5s ease;
}

/* In-banner "Say thanks" — sends the thank-you directly. Filled gold pill
   (coral on the blue support banner, matching the Donate button) with a
   beating heart, idle wiggle and shine sweep; clicking bursts hearts. */
.wpz-champagne-banner-thanks{
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(135deg, #ffe08a 0%, #f2c95c 55%, #e0ab30 100%);
  color: #5d3f0a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(224, 171, 48, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: box-shadow 200ms ease, filter 200ms ease;
  animation: wpzThanksWiggle 3.4s ease-in-out infinite;
}
.wpz-thanks-heart{
  display: inline-block;
  animation: wpzHeartBeat 1.6s ease-in-out infinite;
}
.wpz-champagne-banner.is-support .wpz-champagne-banner-thanks{
  background: linear-gradient(135deg, #ff8a95 0%, #e8556a 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 3px 10px rgba(232, 85, 106, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.wpz-champagne-banner.is-support .wpz-champagne-banner-thanks:hover{
  box-shadow: 0 5px 16px rgba(232, 85, 106, 0.55);
}
@keyframes wpzThanksWiggle{
  0%, 82%, 100% { transform: rotate(0deg) scale(1); }
  86% { transform: rotate(-3deg) scale(1.07); }
  90% { transform: rotate(3deg) scale(1.07); }
  94% { transform: rotate(-2deg) scale(1.03); }
}
.wpz-champagne-banner-thanks::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.8) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: wpzPopShine 3.4s ease-in-out infinite;
  pointer-events: none;
}
.wpz-champagne-banner-thanks:hover{
  filter: brightness(1.05);
  box-shadow: 0 4px 14px rgba(255, 195, 66, 0.5);
}
.wpz-champagne-banner-thanks:active{
  transform: scale(0.92);
  animation: none;
}

/* Heart confetti burst from a clicked Say-thanks button. */
.wpz-heart-burst{
  position: fixed;
  z-index: 9600;
  pointer-events: none;
  animation: wpzHeartBurst 1.3s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
@keyframes wpzHeartBurst{
  0%  { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100%{ transform: translate(calc(-50% + var(--burst-x, 0px)), calc(-50% + var(--burst-y, -70px))) scale(0.85) rotate(14deg); opacity: 0; }
}

/* Modal "Say thanks" once the countdown arms it: springy reveal +
   breathing glow so the unlocked action is impossible to miss. */
#wpzAnnounceCtaBtn.wpz-cta-armed{
  animation:
    wpzVipCardPop 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
    wpzCtaArmedPulse 1.6s ease-in-out 380ms infinite;
}
@keyframes wpzCtaArmedPulse{
  0%, 100% { box-shadow: 0 16px 36px rgba(106, 169, 255, 0.42), 0 0 0 0 rgba(255, 195, 66, 0.55); }
  50%      { box-shadow: 0 16px 36px rgba(106, 169, 255, 0.42), 0 0 0 9px rgba(255, 195, 66, 0); }
}
/* Regular €50+ support variant — same strip in the site's blue glass;
   gold stays reserved for champagne pops. */
.wpz-champagne-banner.is-support{
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(223, 240, 255, 0.8));
  border-color: rgba(90, 167, 255, 0.45);
  box-shadow: 0 6px 22px rgba(90, 167, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.wpz-champagne-banner.is-support::after{
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
}
.wpz-champagne-banner.is-support .wpz-champagne-banner-icon{
  color: #e2557b;
  animation: wpzSupportHeartbeat 1.8s ease-in-out infinite;
}
@keyframes wpzSupportHeartbeat{
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.18); }
  24%      { transform: scale(1); }
  36%      { transform: scale(1.12); }
  48%      { transform: scale(1); }
}
.wpz-champagne-banner.is-support .wpz-champagne-banner-text{
  color: #2f5a86;
}
.wpz-champagne-banner.is-support .wpz-champagne-banner-close{
  color: #6d8195;
}

/* Level-up celebration — full-screen exclusive moment: dimmed backdrop,
   gold liquid-glass card, rotating light rays, spark burst, big number.
   Auto-dismisses after ~4s; click anywhere to skip. */
.wpz-levelup-overlay{
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  background: rgba(10, 20, 36, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: wpzLevelUpFadeIn 260ms ease-out;
  cursor: pointer;
}
.wpz-levelup-overlay.is-leaving{
  animation: wpzLevelUpFadeOut 480ms ease-in forwards;
}
@keyframes wpzLevelUpFadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes wpzLevelUpFadeOut{ from{ opacity: 1; } to{ opacity: 0; } }
.wpz-levelup-card{
  position: relative;
  min-width: 300px;
  padding: 34px 52px 30px;
  text-align: center;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 252, 240, 0.92), rgba(255, 240, 205, 0.85));
  border: 1px solid rgba(240, 189, 72, 0.65);
  box-shadow: 0 30px 80px rgba(8, 22, 39, 0.45), 0 0 70px rgba(255, 195, 66, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  animation: wpzVipCardPop 460ms cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: visible;
}
.wpz-levelup-card.is-milestone{
  box-shadow: 0 30px 90px rgba(8, 22, 39, 0.5), 0 0 110px rgba(255, 195, 66, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* Slow-spinning light rays behind the number. */
.wpz-levelup-rays{
  position: absolute;
  inset: -60px;
  background: conic-gradient(
    rgba(255, 214, 110, 0) 0deg, rgba(255, 214, 110, 0.28) 18deg, rgba(255, 214, 110, 0) 36deg,
    rgba(255, 214, 110, 0) 90deg, rgba(255, 214, 110, 0.22) 108deg, rgba(255, 214, 110, 0) 126deg,
    rgba(255, 214, 110, 0) 180deg, rgba(255, 214, 110, 0.28) 198deg, rgba(255, 214, 110, 0) 216deg,
    rgba(255, 214, 110, 0) 270deg, rgba(255, 214, 110, 0.22) 288deg, rgba(255, 214, 110, 0) 306deg);
  border-radius: 50%;
  animation: wpzLevelUpRays 7s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes wpzLevelUpRays{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
/* Spark burst: dots shoot outward from the card center once on entry. */
.wpz-levelup-spark{
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff2c8 0%, #f2c95c 60%, rgba(242, 201, 92, 0) 100%);
  transform: translate(-50%, -50%);
  animation: wpzLevelUpSpark 900ms ease-out forwards;
  pointer-events: none;
}
@keyframes wpzLevelUpSpark{
  from{ transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateX(0); opacity: 1; }
  to  { transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateX(var(--spark-dist)); opacity: 0; }
}
.wpz-levelup-eyebrow{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #7a5410;
  margin-bottom: 2px;
}
.wpz-levelup-number{
  font-size: 84px;
  line-height: 1;
  font-weight: 900;
  background: linear-gradient(160deg, #b8861c 0%, #f2c95c 45%, #8a5f12 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 16px rgba(255, 195, 66, 0.45));
  animation: wpzLevelUpNumber 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms backwards;
}
@keyframes wpzLevelUpNumber{
  from{ transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  to  { transform: scale(1); opacity: 1; }
}
.wpz-levelup-sub{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6b5320;
}

/* VIP celebration variant — gold liquid glass with a springy pop-in and
   twinkling stars orbiting the card. */
.wpz-announce-modal.is-vip .wpz-announce-eyebrow{
  color: #7a5410;
  background: linear-gradient(135deg, rgba(255, 227, 160, 0.75), rgba(255, 240, 200, 0.55));
  border-color: rgba(216, 164, 49, 0.5);
}
.wpz-announce-modal.is-vip .wpz-announce-card{
  border-color: rgba(240, 189, 72, 0.45);
  box-shadow: 0 30px 80px rgba(8, 22, 39, 0.35), 0 0 60px rgba(255, 200, 80, 0.45);
  animation: wpzVipCardPop 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: visible;
}
@keyframes wpzVipCardPop{
  from{ transform: scale(0.82); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  to  { transform: scale(1); opacity: 1; }
}
.wpz-announce-modal.is-vip .wpz-announce-card::before,
.wpz-announce-modal.is-vip .wpz-announce-card::after{
  content: "⭐";
  position: absolute;
  font-size: 26px;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 200, 80, 0.85));
  animation: wpzVipStarFloat 2.6s ease-in-out infinite;
}
.wpz-announce-modal.is-vip .wpz-announce-card::before{
  top: -12px;
  left: -10px;
}
.wpz-announce-modal.is-vip .wpz-announce-card::after{
  bottom: -10px;
  right: -12px;
  animation-delay: 1.3s;
}
@keyframes wpzVipStarFloat{
  0%, 100%{ transform: translateY(0) scale(1) rotate(-10deg); opacity: 0.85; }
  50%     { transform: translateY(-12px) scale(1.3) rotate(12deg); opacity: 1; }
}

.wpz-announce-title{
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: #17334d;
  margin-bottom: 12px;
  word-wrap: break-word;
}

.wpz-announce-message{
  font-size: 15px;
  line-height: 1.55;
  color: #2c4869;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-bottom: 18px;
  text-align: left;
}

.wpz-announce-meta{
  font-size: 11px;
  color: #5a7791;
  margin-bottom: 18px;
  letter-spacing: 0.3px;
}

.wpz-announce-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.wpz-announce-btn{
  appearance: none;
  border: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.4px;
  padding: 12px 18px;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 200ms ease, background 200ms ease;
}
.wpz-announce-btn:active{ transform: scale(0.98); }

.wpz-announce-btn-primary{
  /* Primary CTA — lighter blue to match the site theme. Full-width,
     heavy gradient + glow so the action reads as the dominant choice. */
  width: 100%;
  font-size: 16px;
  padding: 14px 22px;
  background: linear-gradient(135deg, #8ec1ff 0%, #6aa9ff 45%, #4a93ff 100%);
  color: white;
  box-shadow: 0 16px 36px rgba(106, 169, 255, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.36);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  order: 1;
}
.wpz-announce-btn-primary:hover{
  background: linear-gradient(135deg, #9eccff 0%, #7ab4ff 45%, #5aa1ff 100%);
}

/* When there's no link, the primary button acts as the close CTA.
   Keep the same lighter blue gradient — both layouts (with-link and
   without) read as the same light-blue accent. */
.wpz-announce-btn-primary.is-cta{
  background: linear-gradient(135deg, #8ec1ff 0%, #6aa9ff 45%, #4a93ff 100%);
  box-shadow: 0 16px 36px rgba(106, 169, 255, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.36);
}
.wpz-announce-btn-primary.is-cta:hover:not(:disabled){
  background: linear-gradient(135deg, #9eccff 0%, #7ab4ff 45%, #5aa1ff 100%);
}

.wpz-announce-btn-link{
  /* Same lighter blue gradient as the primary CTA. */
  width: 100%;
  font-size: 16px;
  padding: 14px 22px;
  background: linear-gradient(135deg, #8ec1ff 0%, #6aa9ff 45%, #4a93ff 100%);
  color: white;
  box-shadow: 0 16px 36px rgba(106, 169, 255, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.36);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  order: 1;
}
.wpz-announce-btn-link:hover{
  background: linear-gradient(135deg, #9eccff 0%, #7ab4ff 45%, #5aa1ff 100%);
}

/* "Back to chat" — secondary, smaller, sits beneath the blue CTA.
   No heavy gradient; just a soft glass pill so it reads as a
   de-emphasized fallback action while the timer runs. */
.wpz-announce-btn-close{
  width: auto;
  font-size: 12px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  color: #4a6480;
  box-shadow: inset 0 0 0 1px rgba(90, 120, 150, 0.22);
  order: 2;
}
.wpz-announce-btn-close:hover:not(:disabled){
  background: rgba(255, 255, 255, 0.7);
  color: #17334d;
}

.wpz-announce-btn:disabled{
  cursor: not-allowed;
  opacity: 0.55;
  filter: saturate(0.6);
}

.wpz-announce-timer{
  font-size: 12px;
  color: #1d4a85;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: 8px;
  min-height: 16px;
}

/* Pulse ring around the eyebrow while the timer is running — visual
   hint that this is a forced read, not a dismissible toast. Uses the
   site's light-blue accent so it harmonizes with the rest of the UI. */
.wpz-announce-eyebrow::before{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #3b8eff;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(59, 142, 255, 0.55);
  animation: wpzAnnouncePulse 1.6s ease-out infinite;
}
@keyframes wpzAnnouncePulse{
  0%  { box-shadow: 0 0 0 0 rgba(59, 142, 255, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(59, 142, 255, 0); }
  100%{ box-shadow: 0 0 0 0 rgba(59, 142, 255, 0); }
}

@media (max-width: 480px){
  .wpz-announce-card{ padding: 22px 18px 18px; border-radius: 22px; }
  .wpz-announce-title{ font-size: 19px; }
  .wpz-announce-message{ font-size: 14px; }
}

/* ── Notification center — liquid glass home for all notifications ────── */
#wpzNotificationPanel{
  background: rgba(14, 25, 38, 0.30);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
#wpzNotificationPanel .wpz-modal-card{
  width: min(440px, 94vw) !important;
  background: linear-gradient(160deg, rgba(235, 245, 255, 0.92) 0%, rgba(255, 255, 255, 0.96) 55%, rgba(222, 238, 255, 0.92) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 26px !important;
  box-shadow: 0 26px 60px rgba(31, 38, 135, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(36px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(210%) !important;
  padding: 18px !important;
}
#wpzNotificationPanel .wpz-modal-title{
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #17334d;
}
.wpz-notification-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 52vh;
  overflow: auto;
  padding-right: 2px;
}
.wpz-notification-item{
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 9px 12px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(120, 168, 224, 0.16) !important;
  font-size: 13px !important;
  color: #26415c !important;
  line-height: 1.4;
  transition: transform 140ms ease, background 140ms ease;
}
.wpz-notification-item:hover{
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.92) !important;
}
.wpz-notification-item.is-unread{
  background: linear-gradient(135deg, rgba(220, 236, 255, 0.9), rgba(240, 248, 255, 0.85)) !important;
  border-color: rgba(90, 167, 255, 0.35) !important;
}
.wpz-notif-icon{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 15px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8f4ff 0%, #cfe7ff 100%);
  border: 1px solid rgba(79, 149, 216, 0.22);
}
.wpz-notif-body{
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.wpz-notif-time{
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  color: #8aa2b8;
}

/* Anchored (hover-style) notification panel: no full-screen dim — the
   card floats at the cursor; the invisible overlay still catches
   outside-clicks to close. */
#wpzNotificationPanel.is-anchored{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}
#wpzNotificationPanel.is-anchored .wpz-modal-card{
  animation: wpzScaleIn 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wpz-notif-user{
  color: #2f6fae;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}
.wpz-notif-user:hover{
  text-decoration: underline;
}

/* ── Animated VIP badge — gold pill with an occasional shimmer "spark".
   The spark occupies only the first slice of a long randomized cycle
   (per-badge --vip-spark-period/--vip-spark-delay), so badges glint at
   different moments instead of bouncing constantly. ─────────────────── */
.wpz-vip-badge{
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #ffe9b8 0%, #ffd47e 100%) !important;
  border: 1px solid rgba(216, 164, 49, 0.42) !important;
  color: #7a5410 !important;
  font-weight: 800 !important;
}
.wpz-vip-badge::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  transform: translateX(-160%) skewX(-15deg);
  animation: wpzVipSpark var(--vip-spark-period, 7s) linear infinite;
  animation-delay: var(--vip-spark-delay, 0s);
  pointer-events: none;
}
@keyframes wpzVipSpark{
  0%   { transform: translateX(-160%) skewX(-15deg); }
  9%   { transform: translateX(300%) skewX(-15deg); }
  100% { transform: translateX(300%) skewX(-15deg); }
}

/* VIP celebration: demote "Back to chat" so the gold Get VIP CTA leads. */
.wpz-announce-modal.is-vip #wpzAnnounceCtaBtn{
  background: linear-gradient(135deg, #ffe9b8 0%, #ffd47e 100%) !important;
  border: 1px solid rgba(216, 164, 49, 0.45) !important;
  color: #7a5410 !important;
  font-weight: 800 !important;
}
.wpz-announce-modal.is-vip #wpzAnnounceCloseBtn{
  padding: 6px 18px !important;
  font-size: 12px !important;
  width: auto !important;
}

/* VIP-grant notifications get the golden treatment (with the same
   occasional shimmer spark as the VIP badge). */
.wpz-notification-item.is-vip-notif{
  background: linear-gradient(135deg, rgba(255, 233, 184, 0.85), rgba(255, 244, 214, 0.9)) !important;
  border-color: rgba(216, 164, 49, 0.45) !important;
  color: #6d4c0a !important;
  font-weight: 700;
  position: relative;
  overflow: hidden;
}
.wpz-notification-item.is-vip-notif .wpz-notif-icon{
  background: linear-gradient(135deg, #ffe9b8 0%, #ffd47e 100%);
  border-color: rgba(216, 164, 49, 0.45);
}
.wpz-notification-item.is-vip-notif::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  transform: translateX(-160%) skewX(-15deg);
  animation: wpzVipSpark 8s linear infinite;
  pointer-events: none;
}

/* ── Tickets overview — large liquid-glass support center ─────────────── */
.wpz-tickets-overlay{
  position: fixed;
  inset: 0;
  z-index: 100020;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(14, 25, 38, 0.32);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.wpz-tickets-overlay.is-open{ display: flex; }
.wpz-tickets-card{
  width: min(860px, 94vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: 28px;
  /* Full liquid glass: translucent enough that the blurred page glows
     through, heavy blur + saturation, white hairline, inner sheen. */
  background: linear-gradient(160deg, rgba(220, 235, 255, 0.48) 0%, rgba(255, 255, 255, 0.58) 55%, rgba(200, 226, 255, 0.46) 100%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 30px 70px rgba(31, 38, 135, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(44px) saturate(230%) brightness(1.05);
  -webkit-backdrop-filter: blur(44px) saturate(230%) brightness(1.05);
  animation: wpzScaleIn 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wpz-tickets-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wpz-tickets-eyebrow{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6f8ba8;
}
.wpz-tickets-title{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #17334d;
}
.wpz-tickets-head-actions{
  display: flex;
  gap: 8px;
}
.wpz-tickets-head-actions .theme-button{
  padding: 7px 14px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}
.wpz-tickets-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
}
.wpz-tickets-empty{
  padding: 28px;
  text-align: center;
  color: #6d8195;
  font-size: 14px;
}
.wpz-ticket-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.34));
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 12px rgba(31, 38, 135, 0.06);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.wpz-ticket-row:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 24px rgba(79, 149, 216, 0.2);
}
.wpz-ticket-avatar{
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  color: #25527d;
  background: linear-gradient(135deg, #e8f4ff 0%, #cfe7ff 100%);
  border: 1px solid rgba(79, 149, 216, 0.22);
}
.wpz-ticket-main{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wpz-ticket-name{
  font-weight: 800;
  font-size: 14px;
  color: #17334d;
}
.wpz-ticket-meta{
  font-size: 12px;
  color: #6d8195;
}
.wpz-ticket-status{
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.wpz-ticket-status.is-open{ background: rgba(90,167,255,0.14); color: #2f6fae; border: 1px solid rgba(90,167,255,0.3); }
.wpz-ticket-status.is-pending{ background: rgba(255,170,60,0.16); color: #9a6207; border: 1px solid rgba(255,170,60,0.35); }
.wpz-ticket-status.is-urgent{ background: rgba(232,90,106,0.14); color: #b03a3a; border: 1px solid rgba(232,90,106,0.35); }
.wpz-ticket-status.is-solved{ background: rgba(78,168,122,0.16); color: #1f6b3a; border: 1px solid rgba(78,168,122,0.35); }
.wpz-ticket-open{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  color: #2f6fae;
}

/* Admin-panel additions: stats chips, filter tabs + search, previews and
   per-row quick status actions. */
.wpz-tickets-stats{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wpz-tstat{
  font-size: 11px;
  font-weight: 700;
  color: #4a637c;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.wpz-tstat b{ font-weight: 900; }
.wpz-tstat.is-urgent b{ color: #b03a3a; }
.wpz-tstat.is-pending b{ color: #9a6207; }
.wpz-tstat.is-solved b{ color: #1f6b3a; }
.wpz-tstat.is-reply b{ color: #2f6fae; }
.wpz-tickets-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.wpz-tickets-tabs{
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.wpz-tickets-tab{
  border: none;
  background: transparent;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #4a637c;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.wpz-tickets-tab:hover{ color: #17334d; }
.wpz-tickets-tab.is-active{
  background: linear-gradient(180deg, #ffffff, #eaf3ff);
  color: #17334d;
  box-shadow: 0 3px 8px rgba(31, 38, 135, 0.12);
}
.wpz-tickets-search{
  flex: 1 1 200px;
  max-width: 280px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.55);
  font-size: 12.5px;
  color: #17334d;
  outline: none;
}
.wpz-tickets-search:focus{
  border-color: rgba(90, 167, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(90, 167, 255, 0.15);
}
.wpz-ticket-avatar{ position: relative; }
.wpz-ticket-replydot{
  position: absolute;
  right: -1px;
  top: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #4f95d8;
  border: 2px solid #fff;
  animation: wpzReplyDotPulse 1.8s ease-in-out infinite;
}
@keyframes wpzReplyDotPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(79, 149, 216, 0.45); }
  50%{ box-shadow: 0 0 0 5px rgba(79, 149, 216, 0); }
}
.wpz-ticket-vip{
  font-size: 10px;
  font-weight: 800;
  color: #9a6207;
  background: linear-gradient(135deg, #fff6dc, #ffe9ad);
  border: 1px solid rgba(216, 164, 49, 0.4);
  border-radius: 999px;
  padding: 1px 7px;
  vertical-align: 1px;
}
.wpz-ticket-preview{
  font-size: 12px;
  color: #52708c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 520px;
}
.wpz-ticket-you{ color: #2f6fae; font-weight: 800; }
.wpz-ticket-actions{
  flex: 0 0 auto;
  display: none;
  gap: 5px;
}
.wpz-ticket-row:hover .wpz-ticket-actions{ display: inline-flex; }
.wpz-ticket-qbtn{
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 140ms ease;
}
.wpz-ticket-qbtn:hover{ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(31, 38, 135, 0.14); }
.wpz-ticket-qbtn:disabled{ opacity: 0.5; cursor: default; }
.wpz-ticket-qbtn.is-urgent{ background: rgba(232,90,106,0.12); color: #b03a3a; border: 1px solid rgba(232,90,106,0.4); }
.wpz-ticket-qbtn.is-pending{ background: rgba(255,170,60,0.14); color: #9a6207; border: 1px solid rgba(255,170,60,0.4); }
.wpz-ticket-qbtn.is-solved{ background: rgba(78,168,122,0.14); color: #1f6b3a; border: 1px solid rgba(78,168,122,0.4); }
/* Solved rows recede so the live queue pops. */
.wpz-ticket-row.is-st-solved{ opacity: 0.62; }
.wpz-ticket-row.is-st-solved:hover{ opacity: 1; }
/* Urgent rows carry a red edge so they're findable at a glance. */
.wpz-ticket-row.is-st-urgent{ border-left: 3px solid rgba(232, 90, 106, 0.65); }

/* ── Track-of-the-week poll ─────────────────────────────────────────────
   Voting popup opened from the banner above the chat. */
.track-of-the-week-banner{ cursor: pointer; }
.track-of-the-week-banner:hover .totw-title{ color: #3b82f6 !important; }
.wpz-poll-overlay{
  position: fixed;
  inset: 0;
  z-index: 100003;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(23, 51, 77, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.wpz-poll-overlay.is-open{ display: flex; }
.wpz-poll-card{
  width: min(640px, 94vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: 26px;
  /* Same light-blue liquid glass as the Support Center card. */
  background: linear-gradient(160deg, rgba(220, 235, 255, 0.48) 0%, rgba(255, 255, 255, 0.58) 55%, rgba(200, 226, 255, 0.46) 100%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 30px 70px rgba(31, 38, 135, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(44px) saturate(230%) brightness(1.05);
  -webkit-backdrop-filter: blur(44px) saturate(230%) brightness(1.05);
  animation: wpzScaleIn 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wpz-poll-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wpz-poll-eyebrow{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff7c38;
}
.wpz-poll-heading{ font-size: 21px; font-weight: 900; color: #17334d; letter-spacing: -0.01em; }
.wpz-poll-sub{ font-size: 12.5px; color: #6d8195; margin-top: 2px; }
.wpz-poll-close{
  border: none;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 14px;
  color: #4a637c;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(31, 38, 135, 0.12);
}
.wpz-poll-list{ display: flex; flex-direction: column; gap: 7px; overflow-y: auto; padding-right: 4px; }
.wpz-poll-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.34));
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 12px rgba(31, 38, 135, 0.06);
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.wpz-poll-row:hover{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.55));
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 24px rgba(79, 149, 216, 0.2);
}
.wpz-poll-row.is-leader{
  border-color: rgba(90, 167, 255, 0.45);
  background: linear-gradient(90deg, rgba(216, 236, 255, 0.75), rgba(255, 255, 255, 0.5));
}
.wpz-poll-row.is-mine{ box-shadow: 0 0 0 2px rgba(90, 167, 255, 0.35); }
.wpz-poll-rank{ flex: 0 0 30px; text-align: center; font-size: 13px; font-weight: 800; color: #6d8195; }
.wpz-poll-play{
  /* Deeper solid blue + white glyph so "listen" reads instantly apart
     from the pale Vote pill — still the site's blue family. */
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(135deg, #6db3ff 0%, #3d8ce0 100%);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(61, 140, 224, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 120ms ease, box-shadow 140ms ease;
}
.wpz-poll-play:hover{
  transform: scale(1.12);
  box-shadow: 0 6px 16px rgba(61, 140, 224, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.wpz-poll-main{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wpz-poll-title{ font-size: 13.5px; font-weight: 800; color: #17334d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpz-poll-bar{ height: 5px; border-radius: 999px; background: rgba(79, 149, 216, 0.14); overflow: hidden; }
.wpz-poll-bar i{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #5aa7ff, #3b82f6);
  transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wpz-poll-row.is-leader .wpz-poll-bar i{ background: linear-gradient(90deg, #7db8ff, #2f6fae); }
.wpz-poll-votes{ flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: #6d8195; font-variant-numeric: tabular-nums; }
.wpz-poll-votebtn{
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(90, 167, 255, 0.4);
  background: linear-gradient(180deg, #eaf3ff, #d8eaff);
  color: #2f6fae;
  font-size: 11.5px;
  font-weight: 800;
  padding: 6px 13px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 140ms ease;
}
.wpz-poll-votebtn:hover{ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(90, 167, 255, 0.3); }
.wpz-poll-votebtn.is-mine{
  background: linear-gradient(135deg, #5aa7ff, #3b82f6);
  color: #fff;
  border-color: transparent;
  cursor: default;
}
.wpz-poll-foot{ text-align: center; font-size: 11.5px; color: #6d8195; font-weight: 600; }

.wpz-poll-search{ max-width: none; width: 100%; box-sizing: border-box; }
.wpz-poll-play.is-blank{ background: transparent; box-shadow: none; cursor: default; }

/* VIP modal invitations: gold hero CTA with shine sweep + heartbeat glow,
   perks that light up on hover, and a reassurance line. */
.wpz-vip-cta{
  background: linear-gradient(135deg, #ffe9a8 0%, #f6c13c 45%, #ffb347 100%) !important;
  border: 1px solid rgba(216, 164, 49, 0.55) !important;
  color: #5d430c !important;
  font-size: 16px !important;
  padding: 15px 32px !important;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  animation: wpzVipCtaPulse 2.6s ease-in-out infinite;
  transition: transform 150ms ease, box-shadow 180ms ease !important;
}
.wpz-vip-cta:hover{
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 16px 34px rgba(246, 193, 60, 0.55) !important;
}
.wpz-vip-cta::after{
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: wpzVipCtaShine 3.4s ease-in-out infinite;
}
@keyframes wpzVipCtaPulse{
  0%, 100%{ box-shadow: 0 10px 22px rgba(246, 193, 60, 0.35); }
  50%{ box-shadow: 0 14px 30px rgba(246, 193, 60, 0.6); }
}
@keyframes wpzVipCtaShine{
  0%, 55%{ left: -80%; }
  85%, 100%{ left: 130%; }
}
.wpz-vip-perks li{
  padding: 1px 6px;
  border-radius: 8px;
  transition: background 140ms ease, transform 140ms ease;
  animation: wpzPerkIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.wpz-vip-perks li:nth-child(1){ animation-delay: 60ms; }
.wpz-vip-perks li:nth-child(2){ animation-delay: 110ms; }
.wpz-vip-perks li:nth-child(3){ animation-delay: 160ms; }
.wpz-vip-perks li:nth-child(4){ animation-delay: 210ms; }
.wpz-vip-perks li:nth-child(5){ animation-delay: 260ms; }
.wpz-vip-perks li:nth-child(6){ animation-delay: 310ms; }
.wpz-vip-perks li:nth-child(7){ animation-delay: 360ms; }
.wpz-vip-perks li:nth-child(8){ animation-delay: 410ms; }
.wpz-vip-perks li:nth-child(9){ animation-delay: 460ms; }
.wpz-vip-perks li:nth-child(10){ animation-delay: 510ms; }
.wpz-vip-perks li:hover{
  background: rgba(255, 255, 255, 0.75);
  transform: translateX(4px);
}
.wpz-vip-reassure{
  font-size: 11.5px;
  font-weight: 700;
  color: #6d8195;
  text-align: center;
  margin-top: -4px;
}

/* ── VIP perk surfaces ─────────────────────────────────────────────── */
/* Star on VIP members' chat messages. */
.message-vip-star{
  font-size: 11px;
  margin-left: 2px;
  filter: drop-shadow(0 1px 3px rgba(246, 193, 60, 0.6));
}
/* Custom emojis in messages and the picker. */
.wpz-custom-emoji{
  height: 24px;
  width: auto;
  max-width: 60px;
  vertical-align: -6px;
  border-radius: 4px;
}
/* …but reaction pills/tools are tight chips — keep custom emoji keys
   (:name:) small and on the text baseline instead of message-sized. */
.message-tool .wpz-custom-emoji,
.message-reaction-pill .wpz-custom-emoji,
.chan-window-pill .wpz-custom-emoji{
  height: 20px;
  max-width: 48px;
  vertical-align: -5px;
}
.emoji-popup-chip.is-custom img{
  height: 22px;
  width: 22px;
  object-fit: contain;
  display: block;
}
.emoji-popup-chip.is-custom{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(216, 164, 49, 0.35);
}
/* "Add custom emoji" — a labeled full-row button leading the grid. */
.emoji-popup-add-btn{
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(216, 164, 49, 0.55);
  background: linear-gradient(135deg, rgba(255, 244, 214, 0.8), rgba(255, 236, 190, 0.6));
  color: #7a5410;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease;
}
.emoji-popup-add-btn:hover{
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(255, 240, 200, 0.95), rgba(255, 228, 160, 0.8));
}
.emoji-popup-chip.is-add{
  border: 1px dashed rgba(90, 167, 255, 0.5);
  color: #2f6fae;
}
/* VIP section in the profile editor. */
.wpz-vip-profile-section{
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 249, 230, 0.85), rgba(255, 255, 255, 0.6));
  border: 1px solid rgba(216, 164, 49, 0.35);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.wpz-vip-profile-section.is-locked{ opacity: 1; }
/* Floating full-perks card shown while hovering the soft VIP section.
   Must out-stack the profile modal (z 2147483646). */
.wpz-vip-perks-hover{
  position: fixed;
  z-index: 2147483647 !important;
  width: 300px;
  background: linear-gradient(165deg, rgba(255, 249, 230, 0.98), rgba(255, 255, 255, 0.98)) !important;
  border: 1px solid rgba(216, 164, 49, 0.4) !important;
  box-shadow: 0 18px 44px rgba(31, 38, 135, 0.25), 0 0 20px rgba(246, 193, 60, 0.2) !important;
  /* Springy entrance, then a slow dreamy float while it stays up. */
  animation:
    wpzScaleIn 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    wpzPerksHoverFloat 5s ease-in-out 220ms infinite;
  pointer-events: none;
}
@keyframes wpzPerksHoverFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-7px); }
}
.wpz-vip-perks-hover .wpz-announce-benefits-title{
  animation: wpzPerkIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.wpz-vip-perks-hover .wpz-announce-benefits-item{
  border-radius: 8px;
  padding: 1px 6px;
  /* Entrance stagger, then a highlight that travels down the list and
     loops forever — each perk "goes on and off" in turn. */
  animation:
    wpzPerkIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both,
    wpzPerkCycle 9.1s ease-in-out 900ms infinite;
}
@keyframes wpzPerkCycle{
  0%, 7.7%, 100%{ background: transparent; transform: translateX(0); }
  3.8%{ background: rgba(255, 230, 150, 0.95); transform: translateX(5px); }
}
.wpz-vip-perks-hover .wpz-announce-benefits-item:nth-child(2){ animation-delay: 60ms, 1600ms; }
.wpz-vip-perks-hover .wpz-announce-benefits-item:nth-child(3){ animation-delay: 110ms, 2300ms; }
.wpz-vip-perks-hover .wpz-announce-benefits-item:nth-child(4){ animation-delay: 160ms, 3000ms; }
.wpz-vip-perks-hover .wpz-announce-benefits-item:nth-child(5){ animation-delay: 210ms, 3700ms; }
.wpz-vip-perks-hover .wpz-announce-benefits-item:nth-child(6){ animation-delay: 260ms, 4400ms; }
.wpz-vip-perks-hover .wpz-announce-benefits-item:nth-child(7){ animation-delay: 310ms, 5100ms; }
.wpz-vip-perks-hover .wpz-announce-benefits-item:nth-child(8){ animation-delay: 360ms, 5800ms; }
.wpz-vip-perks-hover .wpz-announce-benefits-item:nth-child(9){ animation-delay: 410ms, 6500ms; }
.wpz-vip-perks-hover .wpz-announce-benefits-item:nth-child(10){ animation-delay: 460ms, 7200ms; }
.wpz-vip-perks-hover .wpz-announce-benefits-item:nth-child(11){ animation-delay: 510ms, 7900ms; }
.wpz-vip-perks-hover .wpz-announce-benefits-item:nth-child(12){ animation-delay: 560ms, 8600ms; }
.wpz-vip-perks-hover .wpz-announce-benefits-item:nth-child(13){ animation-delay: 610ms, 9300ms; }
.wpz-vip-perks-hover .wpz-announce-benefits-item:nth-child(14){ animation-delay: 660ms, 10000ms; }

/* Soft (non-pushy) locked VIP section: quiet one-liner + small pill. */
.wpz-vip-profile-section.is-soft{
  background: rgba(255, 248, 228, 0.8);
  border-color: rgba(216, 164, 49, 0.32);
  gap: 6px;
}
.wpz-vip-soft-highlights{
  font-size: 11px;
  font-weight: 700;
  color: #8a7134;
  line-height: 1.4;
}
.wpz-vip-soft-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.wpz-vip-soft-text{
  font-size: 12px;
  font-weight: 600;
  color: #6d5c33;
  line-height: 1.4;
}
.wpz-vip-soft-btn{
  flex: 0 0 auto;
  border: 1px solid rgba(216, 164, 49, 0.5);
  background: linear-gradient(135deg, #ffe9a8, #f6c13c);
  color: #5d430c;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  animation: wpzVipCtaPulse 3s ease-in-out infinite;
  transition: transform 120ms ease, box-shadow 140ms ease;
}
.wpz-vip-soft-btn:hover{
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 6px 16px rgba(246, 193, 60, 0.5);
}
.wpz-vip-seeall{
  align-self: flex-start;
  border: none;
  background: none;
  padding: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: #a08544;
  cursor: pointer;
}
.wpz-vip-seeall:hover{ color: #7a5b16; text-decoration: underline; }
.wpz-vip-locked-perks.hidden{ display: none !important; }

.wpz-vip-locked-perks{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wpz-vip-locked-perks span{
  font-size: 12px;
  font-weight: 600;
  color: #5d4f2a;
  line-height: 1.45;
  padding: 1px 6px;
  border-radius: 8px;
  animation: wpzPerkIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: background 140ms ease, transform 140ms ease;
}
.wpz-vip-locked-perks span:hover{ background: rgba(255, 244, 214, 0.9); transform: translateX(3px); }
.wpz-vip-locked-perks span:nth-child(1){ animation-delay: 40ms; }
.wpz-vip-locked-perks span:nth-child(2){ animation-delay: 80ms; }
.wpz-vip-locked-perks span:nth-child(3){ animation-delay: 120ms; }
.wpz-vip-locked-perks span:nth-child(4){ animation-delay: 160ms; }
.wpz-vip-locked-perks span:nth-child(5){ animation-delay: 200ms; }
.wpz-vip-locked-perks span:nth-child(6){ animation-delay: 240ms; }
.wpz-vip-locked-perks span:nth-child(7){ animation-delay: 280ms; }
.wpz-vip-locked-perks span:nth-child(8){ animation-delay: 320ms; }
.wpz-vip-locked-perks span:nth-child(9){ animation-delay: 360ms; }
.wpz-vip-locked-perks span:nth-child(10){ animation-delay: 400ms; }
.wpz-vip-locked-perks span:nth-child(11){ animation-delay: 440ms; }
.wpz-vip-locked-perks span:nth-child(12){ animation-delay: 480ms; }
.wpz-vip-upgrade-btn{
  border-radius: 999px;
  padding: 11px 20px !important;
  font-size: 13.5px !important;
  font-weight: 900;
  cursor: pointer;
  width: 100%;
}
.wpz-vip-profile-locked{ font-size: 12px; color: #7a6a3f; line-height: 1.5; }
.wpz-vip-profile-row{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #4a637c;
}
.wpz-vip-profile-row.is-col{ flex-direction: column; align-items: stretch; gap: 5px; }
.wpz-vip-profile-row em{ font-weight: 600; font-style: normal; color: #8ba3ba; font-size: 11px; }
.wpz-vip-profile-row input[type="color"]{
  width: 44px;
  height: 28px;
  border: 1px solid rgba(216, 164, 49, 0.4);
  border-radius: 8px;
  padding: 2px;
  background: #fff;
  cursor: pointer;
}
/* Banner adjuster: 3:1 framing preview with drag + zoom. Must beat the
   profile modal's z-index (2147483646) or it opens BEHIND the editor. */
#wpzBannerAdjust{ z-index: 2147483647; }
.wpz-banner-adjust-card{
  width: min(560px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(220, 235, 255, 0.55) 0%, rgba(255, 255, 255, 0.85) 55%, rgba(200, 226, 255, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 30px 70px rgba(31, 38, 135, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(40px) saturate(210%);
  -webkit-backdrop-filter: blur(40px) saturate(210%);
  animation: wpzScaleIn 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wpz-banner-adjust-preview{
  aspect-ratio: 3 / 1;
  width: 100%;
  border-radius: 16px;
  background-repeat: no-repeat;
  background-color: #17334d;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 6px 16px rgba(31, 38, 135, 0.18);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.wpz-banner-adjust-preview:active{ cursor: grabbing; }
.wpz-banner-adjust-zoomrow{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.wpz-banner-adjust-zoomrow input[type="range"]{
  flex: 1 1 auto;
  accent-color: #3d8ce0;
}

/* Long unbroken strings (bios, track names) must wrap instead of blowing
   the popover/card width apart. */
.wpz-profile-popover,
#wpzProfileBody{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Compact banner strip in the hover popover (mini profile-card hero). */
.wpz-profile-popover .wpz-pop-banner{
  height: 72px;
  margin: -16px -16px 0;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(120deg, #8fc0f7 0%, #5a8fd6 45%, #b9d9ff 100%);
  background-size: cover;
  background-position: center;
}
.wpz-profile-popover .wpz-avatar{
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-sizing: content-box;
  box-shadow: 0 4px 12px rgba(31, 38, 135, 0.22);
}

/* Verified checkmark (staff-granted via /verify): the classic blue seal. */
/* The tick is DRAWN, not typed. As a ✓ glyph its position inside the circle
   depended on font metrics — it rendered low and slightly left, which is what
   made the badge look off next to a name. A two-border chevron is centred by
   geometry and stays centred at any size. */
.wpz-verified-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5aa7ff, #2f6fae);
  color: transparent;            /* hides the ✓ in the markup */
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
  margin-left: 3px;
  align-self: center;
  box-shadow: 0 1px 3px rgba(47, 111, 174, 0.40);
  flex: 0 0 auto;
  --tick: 1.5px;                 /* stroke weight, scaled per size */
}
.wpz-verified-badge::after{
  content: "";
  display: block;
  width: 3px;
  height: 6px;
  border: solid #fff;
  border-width: 0 var(--tick) var(--tick) 0;
  border-radius: 0 0 1px 0;
  /* Rotated first, then nudged along its own axes so the corner of the
     chevron — not its bounding box — sits on the circle's centre. */
  transform: rotate(45deg) translate(-0.5px, -1px);
}
.wpz-verified-badge.is-large{
  width: 17px;
  height: 17px;
  --tick: 2px;
  /* vertical-align:middle lands on baseline + half x-height, which sits low
     beside a caps-dominant display name. Lift it onto the caps' optical
     centre. Measured against .wpz-modal-title, not guessed. */
  position: relative;
  top: -2px;
}
.wpz-verified-badge.is-large::after{
  width: 4px;
  height: 8px;
  transform: rotate(45deg) translate(-0.5px, -1px);
}
.wpz-verified-pill{
  background: linear-gradient(135deg, #dcecff, #bedcff);
  border: 1px solid rgba(90, 167, 255, 0.45);
  color: #1d4f7e;
  font-weight: 800;
}

/* Discord-style profile hero: full-bleed banner + overlapping avatar
   with a presence dot. Negative margins cancel the card's 24px padding
   so the banner reaches the card edges and rounds with its corners. */
.wpz-banner-hero{
  position: relative;
  margin: -24px -24px 0;
  padding-bottom: 44px; /* room for the avatar's overlapping half */
}
/* Round glass corner buttons floating over the banner (✕ close, ← back). */
.wpz-modal-round-btn{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.85);
  color: #17334d;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(31, 38, 135, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 120ms ease, background 140ms ease;
  flex: 0 0 auto;
  margin-left: 8px;
}
.wpz-modal-round-btn:hover{ transform: scale(1.08); background: #ffffff; }

/* The header row floats OVER the banner so the artwork owns the whole
   top of the card — Back/✕ sit on top, and the strip stays draggable. */
#wpzProfileModalCard .wpz-modal-head{
  position: absolute !important;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 6;
  margin: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
/* Banner hero then claims the header's former space too. */
#wpzProfileModalCard .wpz-banner-hero{
  margin-top: -24px;
}
#wpzProfileModalCard .wpz-banner-img{
  height: 150px; /* a little taller now that it owns the full top */
}
#wpzProfileModalCard .wpz-banner-avatar{
  top: 106px; /* keep the avatar riding the banner's bottom edge */
}
.wpz-banner-img{
  height: 120px;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(120deg, #8fc0f7 0%, #5a8fd6 45%, #b9d9ff 100%);
  background-size: cover;
  background-position: center;
  position: relative;
}
/* Own profile (VIP): the banner is the upload surface. */
.wpz-banner-img.is-editable{ cursor: pointer; }
.wpz-banner-upload-hint{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(23, 51, 77, 0.42);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}
.wpz-banner-img.is-editable:hover .wpz-banner-upload-hint{ opacity: 1; }
.wpz-banner-avatar{
  position: absolute;
  left: 24px;
  top: 76px; /* avatar center rides the banner's bottom edge */
}
.wpz-banner-avatar .wpz-avatar{
  width: 88px !important;
  height: 88px !important;
  font-size: 30px;
  border: 5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 20px rgba(31, 38, 135, 0.25);
  box-sizing: border-box;
}
.wpz-banner-presence{
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.95);
  box-sizing: border-box;
}
.wpz-banner-presence.is-online{
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.7);
}
.wpz-banner-presence.is-offline{ background: #9db3c8; }
.wpz-banner-avatar.is-editable{ cursor: pointer; }
/* ── Editor density pass: the whole form fits one viewport, no scroll.
   Scoped via :has(#profileEditForm) so the VIEW card keeps its airier
   spacing. ── */
#wpzProfileModalCard:has(#profileEditForm){ padding: 18px !important; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-banner-hero{ margin: -18px -18px 0; padding-bottom: 30px; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-banner-img{ height: 96px; border-radius: 28px 28px 0 0; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-banner-avatar{ top: 62px; left: 18px; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-banner-avatar .wpz-avatar,
#wpzProfileModalCard:has(#profileEditForm) #wpzAvatarEditTrigger{ width: 64px !important; height: 64px !important; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-banner-presence{ width: 16px; height: 16px; border-width: 3px; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-avatar-cam-badge{ width: 20px; height: 20px; font-size: 10px; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-profile-hero{ margin-top: 14px !important; margin-bottom: 2px !important; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-modal-title{ font-size: 17px !important; }
#wpzProfileModalCard:has(#profileEditForm) #profileEditForm{ gap: 14px !important; padding: 6px 0 !important; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-profile-label{ font-size: 9.5px; margin-bottom: 4px; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-social-edit-grid input,
#wpzProfileModalCard:has(#profileEditForm) #profileTrack,
#wpzProfileModalCard:has(#profileEditForm) #profileCountry{ padding: 5px 10px !important; font-size: 12px !important; }
#wpzProfileModalCard:has(#profileEditForm) #profileBio{ padding: 8px 12px !important; font-size: 12px !important; min-height: 120px; height: 120px; }
/* Country input keeps room for the inline flag on the left. */
#wpzProfileModalCard:has(#profileEditForm) #profileCountry{ padding-left: 32px !important; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-vip-profile-section{ padding: 9px 11px; gap: 6px; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-vip-profile-row{ font-size: 11.5px; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-vip-profile-toggle{ font-size: 11.5px; gap: 6px; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-vip-rename-row input{ padding: 5px 10px; font-size: 11.5px; }
#wpzProfileModalCard:has(#profileEditForm) #profileLinks{ padding: 5px 10px !important; font-size: 11.5px !important; min-height: 34px; height: 34px; }
/* Perk list → two columns, half the height. */
#wpzProfileModalCard:has(#profileEditForm) .wpz-vip-locked-perks{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
}
#wpzProfileModalCard:has(#profileEditForm) .wpz-vip-locked-perks span{ font-size: 10.5px; line-height: 1.35; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-vip-upgrade-btn{ padding: 9px 16px !important; font-size: 12.5px !important; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-vip-ad-copy b{ font-size: 13px; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-vip-ad-copy span{ font-size: 11px; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-vip-profile-locked{ font-size: 11px; }

#wpzProfileModalCard:has(#profileEditForm) .wpz-social-edit-grid{ gap: 5px !important; }
#wpzProfileModalCard:has(#profileEditForm) .wpz-social-edit-row{ gap: 5px !important; }

/* Blurred VIP-ad banner: the user's own (locked) hero — their avatar,
   dreamily blurred, with the upsell floating on top. Click → checkout. */
.wpz-banner-img.is-vip-ad{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(120deg, #b9d3ef 0%, #8fb4dd 100%);
}
.wpz-vip-ad-blur{
  position: absolute;
  inset: -30px; /* blur bleeds past the edges — no vignette seams */
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(170%) brightness(0.9);
  transform: scale(1.1);
}
.wpz-vip-ad-copy{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 0 20px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  transition: transform 160ms ease;
}
.wpz-vip-ad-copy b{ font-size: 15px; font-weight: 900; letter-spacing: 0.01em; }
.wpz-vip-ad-copy span{ font-size: 12px; font-weight: 700; opacity: 0.92; }
.wpz-banner-img.is-vip-ad:hover .wpz-vip-ad-copy{ transform: scale(1.04); }

/* Non-VIP profiles: NO strip at all — plain inline header. */
.wpz-banner-hero.no-banner{
  margin: 0 0 6px;
  padding-bottom: 0;
}
#wpzProfileModalCard .wpz-banner-hero.no-banner{ margin-top: 26px; } /* clear the floating ✕ */
.wpz-banner-hero.no-banner .wpz-banner-avatar{
  position: static;
  display: inline-block;
}
/* Popover: taller banner (card-like), close button floating on it. */
.wpz-profile-popover .wpz-pop-banner{ height: 96px; }
/* With a banner present, the avatar scales up so the overlap reads like
   the full profile card. */
.wpz-profile-popover .wpz-pop-banner + .wpz-pop-close + div .wpz-avatar{
  width: 60px !important;
  height: 60px !important;
  font-size: 20px !important;
}
.wpz-pop-close{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 30px;
  height: 30px;
  font-size: 13px;
  margin-left: 0;
}
/* Always-visible camera badge: "this photo is uploadable" at a glance. */
.wpz-avatar-cam-badge{
  position: absolute;
  left: -2px;
  bottom: -2px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #eaf3ff);
  border: 1px solid rgba(90, 167, 255, 0.4);
  box-shadow: 0 3px 8px rgba(31, 38, 135, 0.2);
  pointer-events: none;
}

.wpz-vip-rename-row{
  display: flex;
  gap: 8px;
  align-items: center;
}
.wpz-vip-rename-row input{
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(216, 164, 49, 0.35);
  background: #fffdf5;
  font-size: 12.5px;
  outline: none;
}
.wpz-vip-rename-row input:focus{
  border-color: rgba(216, 164, 49, 0.6);
  box-shadow: 0 0 0 3px rgba(246, 193, 60, 0.18);
}
.wpz-vip-rename-row input:disabled{ opacity: 0.55; }
.wpz-vip-profile-toggle{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #4a637c;
  cursor: pointer;
}
/* PM "Seen ✓" receipt under the newest own message. */
.pm-seen-marker{
  text-align: right;
  font-size: 10.5px;
  font-weight: 700;
  color: #7fa3c4;
  margin-top: 2px;
  animation: wpzFadeIn 240ms ease;
}

/* Quick-donate message window: preset amounts skip the full form — this
   compact glass card lists the benefits, takes an optional message and
   jumps straight into checkout. */
.wpz-quickdonate-overlay{
  position: fixed;
  inset: 0;
  z-index: 100004;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 51, 77, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: wpzFadeIn 160ms ease;
}
.wpz-quickdonate-card{
  position: relative;
  width: min(400px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 18px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(220, 235, 255, 0.6) 0%, rgba(255, 255, 255, 0.85) 55%, rgba(200, 226, 255, 0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 30px 70px rgba(31, 38, 135, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(40px) saturate(210%);
  -webkit-backdrop-filter: blur(40px) saturate(210%);
  animation: wpzScaleIn 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
}
.wpz-quickdonate-close{ position: absolute; top: 12px; right: 12px; }
.wpz-quickdonate-amount{
  font-size: 34px;
  font-weight: 900;
  color: #17334d;
  letter-spacing: -0.02em;
  line-height: 1;
}
.wpz-quickdonate-amount span{ font-size: 15px; font-weight: 800; color: #6d8195; }
.wpz-quickdonate-title{ font-size: 14px; font-weight: 800; color: #4a637c; }
.wpz-quickdonate-perks{
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 10px 13px;
  border-radius: 14px;
  background: rgba(90, 167, 255, 0.09);
  border: 1px solid rgba(90, 167, 255, 0.18);
}
.wpz-quickdonate-perks span{
  font-size: 12px;
  line-height: 1.5;
  color: #4a637c;
  animation: wpzPerkIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.wpz-quickdonate-perks span:nth-child(1){ animation-delay: 50ms; }
.wpz-quickdonate-perks span:nth-child(2){ animation-delay: 110ms; }
.wpz-quickdonate-perks span:nth-child(3){ animation-delay: 170ms; }
.wpz-quickdonate-perks span:nth-child(4){ animation-delay: 230ms; }
.wpz-quickdonate-perks span:nth-child(5){ animation-delay: 290ms; }
.wpz-quickdonate-perks span:nth-child(6){ animation-delay: 350ms; }
.wpz-quickdonate-perks b{ color: #2c4a68; font-weight: 800; }
.wpz-quickdonate-label{
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8ba3ba;
  margin-bottom: -6px;
}
.wpz-quickdonate-card textarea{
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: 13px;
  color: var(--text);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.wpz-quickdonate-card textarea:focus{
  border-color: rgba(90, 167, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(90, 167, 255, 0.15);
}
.wpz-quickdonate-go{
  border: 1px solid rgba(79, 149, 216, 0.28);
  background: linear-gradient(135deg, #dcecff 0%, #bedcff 100%);
  color: #17334d;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(79, 149, 216, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 140ms ease, box-shadow 160ms ease;
}
.wpz-quickdonate-go:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(79, 149, 216, 0.35); }
.wpz-quickdonate-go:disabled{ opacity: 0.6; transform: none; cursor: default; }
.wpz-quickdonate-note{ font-size: 10.5px; color: #8ba3ba; font-weight: 600; }

/* Signup self-typing credentials: status line narrating the generation
   ("Creating a random username…"), animated dots while working, then a
   ✓ line with an inline ↻ reroll. */
.gen-status{
  min-height: 16px;
  font-size: 11.5px;
  font-weight: 700;
  color: #6d8195;
  letter-spacing: 0.01em;
}
.gen-status.is-working::after{
  content: "";
  animation: wpzGenDots 1.1s steps(4, end) infinite;
}
@keyframes wpzGenDots{
  0%{ content: ""; }
  25%{ content: "."; }
  50%{ content: ".."; }
  75%, 100%{ content: "..."; }
}
.gen-status.is-done{ color: #1f6b3a; }
.gen-status.is-hint{ color: #2f6fae; animation: wpzFadeIn 200ms ease; }
.gen-status.is-warn{ color: #b03a3a; }

/* Auth notice fade-out (showAuthError auto-clears after 10s). */
#authError{ transition: opacity 900ms ease; }
#authError.is-fading{ opacity: 0; }
.gen-status .gen-reroll{
  color: #2f6fae;
  cursor: pointer;
  font-weight: 800;
  border-radius: 8px;
  padding: 1px 6px;
  transition: background 140ms ease;
}
.gen-status .gen-reroll:hover{ background: rgba(90, 167, 255, 0.14); }
.auth-form input.is-generating{
  border-color: rgba(90, 167, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(90, 167, 255, 0.15) !important;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  letter-spacing: 0.03em;
}

/* Logged-out topbar auth: bigger buttons, Sign up as the hero with a
   bouncing "join" pointer beneath it. */
#loginButton{
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 12px 26px !important;
  border-radius: 999px !important;
}
#signupButton{
  position: relative;
  font-size: 16px !important;
  font-weight: 900 !important;
  padding: 14px 34px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #8fc0f7 0%, #5a8fd6 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  animation: wpzSignupGlow 2.4s ease-in-out infinite;
  transition: transform 140ms ease !important;
}
#signupButton:hover{ transform: translateY(-2px) scale(1.03); }
@keyframes wpzSignupGlow{
  0%, 100%{ box-shadow: 0 6px 16px rgba(90, 143, 214, 0.35); }
  50%{ box-shadow: 0 10px 28px rgba(90, 143, 214, 0.65); }
}
#signupButton::after{
  content: "Join the Penguinz — it's free! 👆";
  position: absolute;
  top: calc(100% + 12px);
  /* The trailing 👆 sits at the button's horizontal center and the text
     extends LEFT (the button lives near the right screen edge, so a
     rightward pill would clip). Keyframes carry the same X offset. */
  right: 50%;
  transform: translateX(24px);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  color: #2f6fae;
  background: linear-gradient(180deg, #ffffff, #eaf3ff);
  border: 1px solid rgba(90, 167, 255, 0.4);
  border-radius: 999px;
  padding: 7px 14px;
  box-shadow: 0 8px 20px rgba(31, 38, 135, 0.18);
  pointer-events: none;
  z-index: 50;
  animation: wpzJoinBounce 1.6s ease-in-out infinite;
}
@keyframes wpzJoinBounce{
  0%, 100%{ transform: translate(24px, 0); }
  50%{ transform: translate(24px, -6px); }
}

/* VIP upsell modal star: gentle float + tilt with a breathing gold glow,
   flanked by two twinkling sparkles. */
.wpz-vip-star{
  position: relative;
  display: inline-block;
  animation: wpzVipStarFloat 3.2s ease-in-out infinite;
  filter: drop-shadow(0 6px 16px rgba(246, 193, 60, 0.45));
}
@keyframes wpzVipStarFloat{
  0%, 100%{ transform: translateY(0) rotate(-8deg) scale(1); filter: drop-shadow(0 6px 14px rgba(246, 193, 60, 0.35)); }
  25%{ transform: translateY(-7px) rotate(5deg) scale(1.08); filter: drop-shadow(0 12px 24px rgba(246, 193, 60, 0.6)); }
  50%{ transform: translateY(-2px) rotate(-4deg) scale(1.02); filter: drop-shadow(0 8px 18px rgba(246, 193, 60, 0.45)); }
  75%{ transform: translateY(-6px) rotate(6deg) scale(1.06); filter: drop-shadow(0 12px 22px rgba(246, 193, 60, 0.55)); }
}
.wpz-vip-star::before,
.wpz-vip-star::after{
  content: "✨";
  position: absolute;
  font-size: 15px;
  pointer-events: none;
  animation: wpzVipSparkleTwinkle 2.1s ease-in-out infinite;
}
.wpz-vip-star::before{ top: -4px; left: -18px; }
.wpz-vip-star::after{ bottom: -2px; right: -18px; animation-delay: 1.05s; }
@keyframes wpzVipSparkleTwinkle{
  0%, 100%{ opacity: 0; transform: scale(0.4) rotate(0deg); }
  50%{ opacity: 1; transform: scale(1.15) rotate(25deg); }
}

/* Live-channel Donate button: gentle attention pulse + beating heart +
   occasional shimmer spark (reuses the site's existing keyframes). */
#liveDonateBtn{
  position: relative;
  overflow: hidden;
  animation: wpzTriggerPulse 2.8s ease-in-out infinite;
  will-change: transform;
}
#liveDonateBtn:hover{
  animation-play-state: paused;
}
#liveDonateBtn .live-donate-icon{
  display: inline-block;
  animation: wpzHeartBeat 1.6s ease-in-out infinite;
}
#liveDonateBtn::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: translateX(-160%) skewX(-15deg);
  animation: wpzVipSpark 9s linear infinite;
  animation-delay: 2s;
  pointer-events: none;
}

/* In-popup live donation form (replaces the blocked Streamlabs iframe). */
.live-donate-form{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 2px 2px;
}
/* Clean 5-column grid: presets on row one, Custom (2 cols) + Champagne
   Pop (3 cols) on row two — everything the same height, evenly spaced. */
.live-donate-amounts{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  align-items: stretch;
}
.live-donate-amt{
  appearance: none;
  position: relative;
  border: 1px solid rgba(120, 168, 224, 0.3);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(240,248,255,0.65));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: #2f6fae;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 0;
  text-align: center;
  border-radius: 999px;
  cursor: pointer !important;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.live-donate-amt:hover{ transform: translateY(-1px); }
.live-donate-tease{
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,248,255,0.9));
  border: 1px solid rgba(90, 167, 255, 0.35);
  box-shadow: 0 6px 18px rgba(35, 68, 105, 0.18), inset 0 1px 0 rgba(255,255,255,0.7);
  color: #17334d;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  pointer-events: none;
  animation: liveDonateTeasePop 180ms ease-out;
  z-index: 5;
}
@keyframes liveDonateTeasePop{
  from{ opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.9); }
  to{ opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.live-donate-amt.is-active{
  background: linear-gradient(135deg, #dcecff 0%, #bedcff 100%);
  border-color: rgba(90, 167, 255, 0.45);
  color: #17334d;
}
.live-donate-custom{
  grid-column: span 2;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 14px;
  border-radius: 999px;
  /* Halfway to the champagne treatment: a steady filled blue-glass —
     clearly more inviting than the plain presets, but the gold pop
     keeps the crown. No animation: one glowing element per row. */
  border: 1px solid rgba(90, 167, 255, 0.5);
  background: linear-gradient(135deg, #eaf4ff 0%, #d5e8ff 100%);
  color: #17334d;
  font-weight: 700;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 8px rgba(90, 167, 255, 0.18);
}
.live-donate-custom::placeholder{
  color: #4a78ac;
  font-weight: 600;
}
.live-donate-custom:focus{
  outline: none;
  border-color: #5aa7ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 14px rgba(90, 167, 255, 0.4);
}
/* Hide the number spinners — they read as clutter in a pill field. */
.live-donate-custom::-webkit-inner-spin-button,
.live-donate-custom::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.live-donate-custom{
  -moz-appearance: textfield;
}
.live-donate-field{
  width: 100%;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-size: 13px;
  box-sizing: border-box;
}
/* Multi-line message box — the STAR of the form: labelled, elevated and
   focused on open, so writing something comes naturally before picking
   an amount. */
.live-donate-msg-label{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8299b0;
  margin-bottom: -6px;
}
.live-donate-message{
  font-family: inherit;
  resize: none;
  min-height: 76px;
  line-height: 1.45;
  font-size: 13.5px;
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(90, 167, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 14px rgba(35, 68, 105, 0.1);
}
.live-donate-message::placeholder{
  color: #7d95ab;
  font-style: italic;
}
.live-donate-message:focus{
  outline: none;
  border-color: rgba(90, 167, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 3px rgba(90, 167, 255, 0.18);
}
.live-donate-form-note{
  font-size: 11px;
  color: #6d8195;
  text-align: center;
}

/* Perks preview: one short row per unlocked perk, refreshed live as the
   donor hovers/picks an amount (updateDonatePerks in client.js). */
.live-donate-perks{
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(90, 167, 255, 0.08);
  border: 1px solid rgba(90, 167, 255, 0.18);
}
.live-donate-perks:empty{ display: none; }
.live-donate-perks .ldp-row{
  font-size: 11.5px;
  line-height: 1.45;
  color: #4a637c;
}
.live-donate-perks .ldp-row b{ color: #2c4a68; font-weight: 800; }
.live-donate-perks.is-gold{
  background: linear-gradient(135deg, rgba(255, 244, 214, 0.9), rgba(255, 232, 168, 0.65));
  border-color: rgba(216, 164, 49, 0.45);
}
.live-donate-perks.is-gold .ldp-row{ color: #7a5b16; }
.live-donate-perks.is-gold .ldp-row b{ color: #5d430c; }

/* Champagne Pop — the €1000 preset. Gold bottle-glass so it reads as a
   different league than the blue presets, with a slow shine sweep. */
.live-donate-amt.live-donate-pop{
  grid-column: span 3;
  border-color: rgba(216, 164, 49, 0.55);
  background: linear-gradient(135deg, #fff6dc 0%, #ffe9ad 55%, #f7d778 100%);
  color: #7a5410;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 14px rgba(255, 200, 80, 0.35);
  overflow: hidden;
  white-space: nowrap;
}
.live-donate-amt.live-donate-pop::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: wpzPopShine 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wpzPopShine{
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}
.live-donate-amt.live-donate-pop.is-active{
  background: linear-gradient(135deg, #f2c95c 0%, #d8a431 60%, #b8861c 100%);
  border-color: #8a5f12;
  color: #3d2a06;
  box-shadow:
    inset 0 2px 4px rgba(90, 62, 10, 0.35),
    0 0 0 3px rgba(216, 164, 49, 0.4),
    0 0 24px rgba(255, 195, 66, 0.7);
}

/* Inbox call pills — pinned to the conversation header's right corner,
   colored and alive so starting a call feels like an invitation. */
.wpz-inbox-conv-actions{
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.wpz-inbox-call-pill{
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: transform 140ms ease, box-shadow 200ms ease, filter 200ms ease;
  animation: wpzChampagneBannerIn 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wpz-inbox-call-pill svg{ transition: transform 200ms ease; }
.wpz-inbox-call-pill:hover{
  transform: translateY(-1px) scale(1.04);
  filter: brightness(1.06);
}
.wpz-inbox-call-pill:hover svg{ transform: rotate(-12deg) scale(1.15); }
.wpz-inbox-call-pill:active{ transform: scale(0.95); }
/* Both pills wear the site's light blue-glass theme (matching the vip
   header's Voice chat / Video chat buttons) instead of green/purple. */
.wpz-inbox-call-pill.is-voice,
.wpz-inbox-call-pill.is-video{
  color: #1a3f6b;
  border: 1px solid rgba(79, 149, 216, 0.20);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(220, 235, 252, 0.85));
  box-shadow: none;
}
.wpz-inbox-call-pill.is-voice:hover,
.wpz-inbox-call-pill.is-video:hover{
  background: linear-gradient(180deg, #ffffff, #d9eaff);
  box-shadow: 0 4px 10px rgba(79, 149, 216, 0.18);
}
.wpz-inbox-call-pill.is-block{
  color: #a0405a;
  border: 1px solid rgba(194, 102, 131, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 228, 234, 0.85));
  box-shadow: none;
  /* Secondary action — visibly smaller than Call/Video. */
  padding: 5px 10px;
  font-size: 11px;
  gap: 4px;
}
.wpz-inbox-call-pill.is-block svg{ width: 12px; height: 12px; }
.wpz-inbox-call-pill.is-block:hover{
  background: linear-gradient(180deg, rgba(255, 235, 240, 0.98), rgba(248, 205, 215, 0.95));
  box-shadow: 0 4px 10px rgba(194, 102, 131, 0.2);
}
.wpz-inbox-call-pill.is-block:hover svg{ transform: none; }
.wpz-inbox-call-pill.is-block.hidden{ display: none !important; }
/* Already blocked: solid red state so the pill reads as a status. */
.wpz-inbox-call-pill.is-block.is-blocked{
  color: #ffffff;
  border-color: rgba(160, 64, 90, 0.5);
  background: linear-gradient(180deg, #d96a8a 0%, #c05070 100%);
}

/* Full artist player (tracklist) shown while hovering the Spotify dock. */
.topbar-spotify-popup{
  position: fixed;
  z-index: 100002;
  width: 380px;
  border-radius: 18px;
  overflow: hidden;
  background: #121212;
  border: 1px solid rgba(30, 215, 96, 0.4);
  box-shadow: 0 20px 48px rgba(8, 22, 39, 0.35), 0 0 24px rgba(30, 215, 96, 0.25);
  animation: wpzChampagneBannerIn 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.topbar-spotify-popup.hidden{ display: none; }
.topbar-spotify-popup iframe{ display: block; border: 0; }

/* Benefits card for the "Show up in the server" toggle — appears above
   the toggle on hover, listing everything an announced donation gets. */
.wpz-announce-benefits{
  position: fixed;
  width: 290px;
  z-index: 100005;
  pointer-events: none;
  padding: 13px 15px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.97), rgba(232, 243, 255, 0.94));
  border: 1px solid rgba(90, 167, 255, 0.45);
  box-shadow: 0 14px 38px rgba(35, 68, 105, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: wpzChampagneBannerIn 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wpz-announce-benefits-title{
  font-size: 12.5px;
  font-weight: 800;
  color: #2f5a86;
  margin-bottom: 7px;
}
.wpz-announce-benefits-item{
  font-size: 11.5px;
  font-weight: 600;
  color: #3c5a78;
  line-height: 1.45;
  margin-bottom: 4px;
}

/* Floating "if you pop this…" card beside the donate popup — appears when
   the Champagne Pop preset is selected. */
.wpz-pop-info{
  position: fixed;
  width: 310px;
  z-index: 9600;
  pointer-events: none;
  padding: 16px 16px 14px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  box-sizing: border-box;
  background: linear-gradient(160deg, rgba(255, 250, 234, 0.96), rgba(255, 236, 180, 0.92));
  border: 1px solid rgba(240, 189, 72, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  animation:
    wpzChampagneBannerIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
    wpzPopInfoGlow 2.2s ease-in-out 320ms infinite alternate;
}
/* Champagne bubbles rising through the panel + a slow shine sweep. */
.wpz-pop-info::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(4px 4px at 15% 100%, rgba(255, 214, 110, 0.8) 40%, transparent 60%),
    radial-gradient(3px 3px at 35% 100%, rgba(255, 236, 170, 0.75) 40%, transparent 60%),
    radial-gradient(5px 5px at 55% 100%, rgba(255, 205, 90, 0.65) 40%, transparent 60%),
    radial-gradient(3px 3px at 72% 100%, rgba(255, 236, 170, 0.8) 40%, transparent 60%),
    radial-gradient(4px 4px at 90% 100%, rgba(255, 214, 110, 0.7) 40%, transparent 60%);
  background-repeat: no-repeat;
  animation: wpzChampagneBubbles 3s linear infinite;
  pointer-events: none;
}
.wpz-pop-info::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: wpzPopShine 4s ease-in-out 600ms infinite;
  pointer-events: none;
}
.wpz-pop-info > *{
  position: relative;
  z-index: 1;
}
/* Perk lines pop in one by one — a little parade of reasons to celebrate. */
.wpz-pop-info-section,
.wpz-pop-info-item{
  animation: wpzPerkIn 380ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.wpz-pop-info > *:nth-child(2) { animation-delay: 250ms; }
.wpz-pop-info > *:nth-child(3) { animation-delay: 400ms; }
.wpz-pop-info > *:nth-child(4) { animation-delay: 550ms; }
.wpz-pop-info > *:nth-child(5) { animation-delay: 700ms; }
.wpz-pop-info > *:nth-child(6) { animation-delay: 850ms; }
.wpz-pop-info > *:nth-child(7) { animation-delay: 1000ms; }
.wpz-pop-info > *:nth-child(8) { animation-delay: 1150ms; }
.wpz-pop-info > *:nth-child(9) { animation-delay: 1300ms; }
.wpz-pop-info > *:nth-child(10){ animation-delay: 1450ms; }
.wpz-pop-info > *:nth-child(11){ animation-delay: 1600ms; }
@keyframes wpzPerkIn{
  from{ opacity: 0; transform: translateX(-16px) scale(0.94); }
  to  { opacity: 1; transform: translateX(0) scale(1); }
}
/* The bottle in the title keeps celebrating. */
.wpz-pop-info-title{
  animation: wpzGlassesClink 2.4s ease-in-out 1.8s infinite;
  transform-origin: 15% 60%;
}
@keyframes wpzPopInfoGlow{
  from{ box-shadow: 0 14px 38px rgba(35, 68, 105, 0.3), 0 0 34px rgba(255, 195, 66, 0.4), 0 0 70px rgba(255, 180, 40, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
  to  { box-shadow: 0 14px 38px rgba(35, 68, 105, 0.3), 0 0 60px rgba(255, 195, 66, 0.75), 0 0 120px rgba(255, 180, 40, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
}
.wpz-pop-info-title{
  font-size: 18px;
  font-weight: 900;
  color: #7a5410;
  margin-bottom: 4px;
}
.wpz-pop-info-section{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a07c2a;
  margin-top: 6px;
}
.wpz-pop-info-item{
  font-size: 14px;
  font-weight: 700;
  color: #5d4a1e;
  line-height: 1.5;
}

/* Champagne Pop chip in the topbar support panel — same gold-glass
   treatment as the donate popup's preset. */
.monthly-support-preset.monthly-support-pop{
  position: relative;
  overflow: hidden;
  border-color: rgba(216, 164, 49, 0.55);
  background: linear-gradient(135deg, #fff6dc 0%, #ffe9ad 55%, #f7d778 100%);
  color: #7a5410;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 14px rgba(255, 200, 80, 0.35);
}
.monthly-support-preset.monthly-support-pop::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: wpzPopShine 3.4s ease-in-out infinite;
  pointer-events: none;
}
.monthly-support-preset.monthly-support-pop:hover{
  filter: brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 20px rgba(255, 195, 66, 0.55);
}
/* Full-width royal bar: the champagne pop gets its own section for the
   kings & queens — one big gold button, breathing glow, shine sweep. */
.monthly-support-pop-bar{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  padding: 10px 16px;
  border-radius: 16px;
  white-space: nowrap;
  transform-origin: 50% 50%;
  /* Never static: a slow 14s cycle of three gentle swells, each slightly
     bigger than the last — barely-there breathing that builds, then
     settles and starts over. Glow rides along with each swell. */
  animation: wpzPopBarGrow 14s ease-in-out infinite;
}
@keyframes wpzPopBarGrow{
  0%  { transform: scale(1);     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 12px rgba(255, 200, 80, 0.3); }
  14% { transform: scale(1.005); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 15px rgba(255, 195, 66, 0.38); }
  24% { transform: scale(1);     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 12px rgba(255, 200, 80, 0.3); }
  40% { transform: scale(1.012); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 19px rgba(255, 195, 66, 0.46); }
  52% { transform: scale(1);     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 12px rgba(255, 200, 80, 0.3); }
  68% { transform: scale(1.025); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 24px rgba(255, 195, 66, 0.55); }
  82% { transform: scale(1);     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 12px rgba(255, 200, 80, 0.3); }
  100%{ transform: scale(1);     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 12px rgba(255, 200, 80, 0.3); }
}
.monthly-support-pop-main{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #7a5410;
}
.monthly-support-pop-sub{
  font-size: 10.5px;
  font-weight: 600;
  font-style: italic;
  color: #a07c2a;
}
@keyframes wpzPopBarGlow{
  from{ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 14px rgba(255, 200, 80, 0.35); }
  to  { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 28px rgba(255, 195, 66, 0.65); }
}

/* POP badge — champagne-pop donors (€1000 in one go). Deep bottle-dark
   glass with gold lettering + shine sweep: deliberately the most
   exclusive-looking chip in the whole UI. */
.wpz-pop-badge{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #1c1306 0%, #3d2c0a 55%, #6b4c10 100%);
  color: #ffd76a !important;
  border: 1px solid rgba(255, 205, 90, 0.65);
  box-shadow: 0 0 10px rgba(255, 200, 80, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.04em;
  overflow: hidden;
}
.wpz-pop-badge::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 236, 170, 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: wpzPopShine 4.2s ease-in-out infinite;
  pointer-events: none;
}
.wpz-pop-badge.nick-pop{
  font-size: 8px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}


/* Avatar-only user stack: big round picture with Log out underneath. */
.topbar-user-stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px; /* breathing room so aiming at the avatar can't hit Log out */
}
.topbar-user-stack .topbar-user-chip{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.topbar-user-stack .topbar-user-chip .emoji-avatar{
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  font-size: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8f4ff 0%, #cfe7ff 100%);
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 6px 16px rgba(50,100,160,0.3);
}
.topbar-user-stack #logoutButton{
  /* Deliberately tiny + low-key: sits right under the profile chip, and a
     fat target here gets fat-fingered when aiming for the avatar. */
  padding: 1px 8px !important;
  font-size: 9.5px !important;
  min-height: 0 !important;
  line-height: 1.6 !important;
  border-radius: 999px !important;
  opacity: 0.75;
  transition: opacity 140ms ease;
}
.topbar-user-stack #logoutButton:hover{ opacity: 1; }

/* Profile modal header: title takes the slack so Back + Close sit
   together on the right as matching pills. */
#wpzProfileModalCard .wpz-modal-head .wpz-modal-title{
  margin-right: auto;
}
#wpzProfileModalCard .wpz-modal-head{
  gap: 8px !important;
}

/* ── Owner badge — arctic aurora with a waddling penguin ──────────────── */
.wpz-owner-badge{
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(120deg, #14293e 0%, #1f5078 30%, #3d8ab8 50%, #6fc3e8 65%, #1f5078 85%, #14293e 100%) !important;
  background-size: 300% 100% !important;
  animation: wpzOwnerAurora 7s ease-in-out infinite;
  color: #eaf6ff !important;
  border: 1px solid rgba(140, 210, 255, 0.55) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.06em;
}
@keyframes wpzOwnerAurora{
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}
.wpz-owner-badge .wpz-owner-penguin{
  display: inline-block;
  animation: wpzPenguinWaddle 4s ease-in-out infinite;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 0 4px rgba(140, 210, 255, 0.7));
}
@keyframes wpzPenguinWaddle{
  0%, 20%, 100% { transform: rotate(0deg); }
  4%  { transform: rotate(-14deg); }
  8%  { transform: rotate(11deg); }
  12% { transform: rotate(-7deg); }
  16% { transform: rotate(4deg); }
}
/* Frost shimmer sweeping across, like the VIP spark but icy. */
.wpz-owner-badge::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(210, 240, 255, 0.75), transparent);
  transform: translateX(-160%) skewX(-15deg);
  animation: wpzVipSpark 8.5s linear infinite;
  animation-delay: 3s;
  pointer-events: none;
}

/* Notifications + My profile: same liquid glass as the topbar buttons. */
.wpz-top-tools .theme-button{
  padding: 7px 14px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(240, 248, 255, 0.5)) !important;
  backdrop-filter: blur(14px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(170%) !important;
  box-shadow: 0 4px 12px rgba(50, 100, 160, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  color: #1a3f6b !important;
  font-weight: 700 !important;
}
.wpz-top-tools .theme-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(50, 100, 160, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
.wpz-bell-badge{
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(220,236,255,0.85)) !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
  box-shadow: 0 2px 6px rgba(50,100,160,0.18) !important;
}
/* Nothing waiting → no pip at all (a permanent grey "0" reads as broken). */
.wpz-bell-badge.is-empty{
  display: none !important;
}
/* Something waiting → red pip, same language as the Inbox unread badge. */
.wpz-bell-badge.is-alert{
  background: linear-gradient(135deg, #ff5b5b, #c81f27) !important;
  border: 2px solid rgba(255,255,255,0.92) !important;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(200,31,39,0.45) !important;
}
.wpz-bell-badge.is-pop{
  animation: wpzInboxBadgePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Notification panel buttons (Close, Dismiss all): same liquid glass. */
#wpzNotificationPanel .wpz-close,
#wpzNotificationPanel #wpzClearNotifications{
  padding: 7px 14px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(240, 248, 255, 0.5)) !important;
  backdrop-filter: blur(14px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(170%) !important;
  box-shadow: 0 4px 12px rgba(50, 100, 160, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  color: #1a3f6b !important;
  cursor: pointer !important;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
#wpzNotificationPanel .wpz-close:hover,
#wpzNotificationPanel #wpzClearNotifications:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(50, 100, 160, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

/* ── VIP voice/video lounge ────────────────────────────────────────────── */
.vip-room-star{
  display: inline-block;
  margin-left: 8px;
  animation: wpzVipStarFloat 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 200, 80, 0.8));
}
.vip-header-call-btns{
  display: flex;
  gap: 8px;
  margin-left: auto;
  align-items: center;
}
/* Prioritized (⭐) tiles: gold ring + star; they span 2×2 in the grid. */
.vip-call-stage-tile.is-priority{
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.75), 0 6px 18px rgba(180, 130, 10, 0.25);
}
.vip-call-stage-tile.is-priority .vip-call-stage-name::after{ content: " ⭐"; }
.vip-call-prio.is-on{
  background: rgba(250, 204, 21, 0.35);
  color: #b45309;
}
.vip-stage-menu{
  position: fixed;
  z-index: 100050;
  min-width: 170px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: linear-gradient(160deg, rgba(240, 247, 255, 0.96), rgba(220, 235, 255, 0.96));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 16px 40px rgba(31, 38, 135, 0.25);
}
.vip-stage-menu[hidden]{ display: none; }
.vip-stage-menu button{
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #17334d;
  cursor: pointer;
}
.vip-stage-menu button:hover{ background: rgba(90, 167, 255, 0.14); }

/* Minimized call: docks as a slim BAR across the bottom of the screen —
   always in the same spot, impossible to lose, call keeps running. */
.vip-call-panel.is-mini{
  width: auto !important;
  max-height: none;
  top: auto !important;
  left: 16px !important;
  right: 16px;
  bottom: 12px;
  padding: 8px 18px;
  border-radius: 999px;
  animation: vipMiniBarIn 260ms cubic-bezier(0.2, 1.2, 0.4, 1);
}
@keyframes vipMiniBarIn{
  from{ transform: translateY(18px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}
.vip-call-panel.is-mini .vip-call-body,
.vip-call-panel.is-mini .vip-call-chat{ display: none; }
.vip-call-panel.is-mini .vip-call-head{ margin-bottom: 0; cursor: default; }
.vip-call-panel.is-mini .vip-call-title{ font-size: 13px; }

/* Country picker: flag inside the field + custom (opaque!) suggestion
   dropdown — the native datalist bled page content through in Safari. */
.wpz-country-field{ position: relative; }
.wpz-country-field-flag{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}
.wpz-country-suggest{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(110, 160, 220, 0.35);
  background: #f6faff;
  box-shadow: 0 16px 36px rgba(31, 38, 135, 0.22);
  max-height: 210px;
  overflow-y: auto;
}
.wpz-country-suggest[hidden]{ display: none; }
.wpz-country-suggest button{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #17334d;
  cursor: pointer;
}
.wpz-country-suggest button:hover{ background: rgba(90, 167, 255, 0.14); }

/* XP sub-label on the donation preset chips (100 XP per €). */
.monthly-support-preset{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.15;
}
.monthly-support-preset .preset-xp{
  font-size: 7.5px;
  font-weight: 600;
  opacity: 0.55;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* "Add <name> as friend" row shown while searching the friend list. */
.wpz-social-add-row{
  border: 1px dashed rgba(90, 167, 255, 0.45) !important;
  background: linear-gradient(135deg, rgba(232, 244, 255, 0.85), rgba(255, 255, 255, 0.8)) !important;
  margin-bottom: 6px;
}
.wpz-social-add-cta{
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  color: #2f6fae;
  background: rgba(90, 167, 255, 0.16);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* Email-verification bar: slim amber glass strip above the chat. */
.wpz-emailverify-bar{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  padding: 9px 14px;
  border-radius: 14px;
  border: 1px solid rgba(216, 164, 49, 0.35);
  background: linear-gradient(135deg, rgba(255, 244, 214, 0.85), rgba(255, 236, 190, 0.7));
  box-shadow: 0 8px 22px rgba(180, 130, 10, 0.12);
  font-size: 12.5px;
  color: #7a5410;
}
.wpz-emailverify-text{ flex: 1; min-width: 0; line-height: 1.4; }
.wpz-emailverify-bar .theme-button{
  font-size: 11px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  white-space: nowrap;
}

/* Live user-created channels: clickable join chips in the vip header. */
.vip-custom-calls{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vip-custom-call-chip{
  border: 1px solid rgba(90, 167, 255, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(228, 241, 255, 0.9));
  color: #1d4a85;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 140ms ease, background 140ms ease;
}
.vip-custom-call-chip:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ffffff, #d9eaff);
}

/* Live lounge occupancy shown next to the join buttons. */
.vip-call-occupancy{
  font-size: 11px;
  font-weight: 700;
  color: #5b7a99;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(90, 167, 255, 0.10);
  border: 1px solid rgba(90, 167, 255, 0.16);
}
.vip-call-join-btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border: 1px solid rgba(79, 149, 216, 0.20) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(220, 235, 252, 0.85)) !important;
  color: #1a3f6b !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease !important;
}
.vip-call-join-btn svg{ flex: 0 0 auto; }
.vip-call-join-btn:hover{
  transform: translateY(-1px) !important;
  background: linear-gradient(180deg, #ffffff, #d9eaff) !important;
  box-shadow: 0 4px 10px rgba(79, 149, 216, 0.18) !important;
}
.vip-call-panel{
  position: fixed;
  top: 96px;
  right: 26px;
  width: 252px;
  z-index: 9000;
  padding: 12px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  max-height: min(78vh, calc(100vh - 130px));
}
.vip-call-body{
  overflow-y: auto;
  min-height: 0;
  padding-right: 2px;
  background: linear-gradient(160deg, rgba(220, 235, 255, 0.5) 0%, rgba(255, 255, 255, 0.6) 55%, rgba(200, 226, 255, 0.48) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 14px 34px rgba(31, 38, 135, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
}
.vip-call-panel.hidden{ display: none !important; }
.vip-call-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  cursor: grab;
  user-select: none;
}
.vip-call-head:active{ cursor: grabbing; }
.vip-call-title{
  font-weight: 800;
  font-size: 12.5px;
  color: #17334d;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.vip-call-title svg{ flex: none; }
.vip-call-panel .wpz-inbox-icon-btn{
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #25527d;
}
.vip-call-panel .wpz-inbox-icon-btn.is-danger{ color: #e05252; }
.vip-call-count{
  font-weight: 700;
  font-size: 12px;
  color: #6d8195;
}
.vip-call-controls{
  display: flex;
  gap: 5px;
  flex: none;
}
/* Video / Voice sections: camera users live under "Video" (stage grid +
   their rows), mic-only users under "Voice". */
.vip-call-section{ margin-bottom: 6px; }
.vip-call-section[hidden]{ display: none; }
.vip-call-section-label{
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7d95ac;
  margin: 2px 2px 5px;
}

/* Video stage: big camera tiles in a grid ABOVE the list, so everyone
   can actually see each other. The panel widens while any video is on. */
.vip-call-panel.has-video{ width: min(560px, 92vw); }
/* Crowded call (7+ cameras): square-ish window, compact square tiles —
   more faces on screen, less scrolling. */
.vip-call-panel.has-video.is-crowded{ width: min(1360px, 96vw); }
.vip-call-panel.is-crowded .vip-call-stage{
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
.vip-call-panel.is-crowded .vip-call-stage-tile{ aspect-ratio: 1 / 1; }
.vip-call-panel.is-crowded .vip-call-stage-name{
  font-size: 10px;
  left: 6px;
  right: 6px;
  bottom: 5px;
}
.vip-call-panel.is-crowded .vip-call-stage-fake{
  width: 42px;
  height: 42px;
  font-size: 15px;
}
.vip-call-stage{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.vip-call-stage[hidden]{ display: none; }
.vip-call-stage-tile{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(23, 51, 77, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.35);
  aspect-ratio: 16 / 10;
}
.vip-call-stage-media{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.vip-call-stage-tile video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vip-call-stage-name{
  position: absolute;
  left: 8px;
  bottom: 6px;
  right: 8px;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 2;
}
.vip-call-stage-tile.is-speaking{
  animation: vipSpeakPulse 1.3s ease-in-out infinite;
}
/* Hover controls + status badges directly on the stage tile (camera
   users have no list row, so this is where their actions live). */
.vip-call-stage-actions{
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  gap: 4px;
  z-index: 3;
}
.vip-call-stage-tile:hover .vip-call-stage-actions{ display: inline-flex; }
.vip-call-stage-actions .vip-call-mod-btn{
  background: rgba(255, 255, 255, 0.88);
}
.vip-call-stage-actions .vip-call-mod-btn:hover{ background: #ffffff; }
.vip-call-stage-badges{
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  gap: 4px;
  z-index: 2;
  color: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.vip-call-stage-tile.is-local-muted .vip-call-stage-actions{ display: inline-flex; }
.vip-call-stage-tile.is-server-muted video,
.vip-call-stage-tile.is-local-muted video,
.vip-call-stage-tile.is-server-muted .vip-call-stage-fake,
.vip-call-stage-tile.is-local-muted .vip-call-stage-fake{ opacity: 0.55; }
/* Simulated camera feed: slow-drifting gradient "video" + breathing
   avatar bubble, so the preview reads as live footage at a glance. */
.vip-call-stage-tile.is-placeholder .vip-call-stage-media{
  background: linear-gradient(120deg, #35648f 0%, #1b3a57 30%, #2f5f8f 55%, #223c58 80%, #35648f 100%);
  background-size: 300% 300%;
  animation: vipFakeCam 6s ease-in-out infinite;
}
.vip-call-stage-tile.is-placeholder:nth-child(2n) .vip-call-stage-media{
  filter: hue-rotate(18deg) brightness(1.06);
  animation-duration: 7.4s;
}
.vip-call-stage-tile.is-placeholder:nth-child(3n) .vip-call-stage-media{
  filter: hue-rotate(-16deg);
  animation-duration: 5.1s;
}
@keyframes vipFakeCam{
  0%, 100%{ background-position: 0% 40%; }
  50%{ background-position: 100% 60%; }
}
.vip-call-stage-fake{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #25527d;
  background: linear-gradient(135deg, #e8f4ff 0%, #cfe7ff 100%);
  border: 2px solid rgba(255, 255, 255, 0.55);
  animation: vipFakeBob 3.4s ease-in-out infinite;
}
.vip-call-stage-tile.is-placeholder:nth-child(2n) .vip-call-stage-fake{ animation-duration: 4.2s; }
@keyframes vipFakeBob{
  0%, 100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-4px) scale(1.05); }
}

/* Participants render as a compact Discord-style LIST inside the
   floating window: 32px round media (avatar or live video) + name. */
.vip-call-tiles{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vip-call-tile{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 6px;
  border-radius: 10px;
  transition: background 140ms ease;
}
.vip-call-tile:hover{ background: rgba(90, 167, 255, 0.10); }
.vip-call-tile[hidden]{ display: none; }
.vip-call-tile-media{
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(23, 51, 77, 0.85);
  transition: box-shadow 160ms ease;
}
.vip-call-tile video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vip-call-tile-avatar{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #25527d;
  background: linear-gradient(135deg, #e8f4ff 0%, #cfe7ff 100%);
}
/* Speaking indicator: green pulse ring (Discord-style) around the
   avatar while the participant's mic picks up voice. */
.vip-call-tile.is-speaking .vip-call-tile-media{
  animation: vipSpeakPulse 1.3s ease-in-out infinite;
}
.vip-call-tile.is-speaking .vip-call-tile-name{ color: #15803d; }
@keyframes vipSpeakPulse{
  0%, 100%{ box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.65); }
  50%{ box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.95), 0 0 12px rgba(74, 222, 128, 0.55); }
}
.vip-call-tile-name{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: #17334d;
}
/* Staff moderation controls: appear on row hover. */
.vip-call-mod-actions{
  display: none;
  gap: 3px;
  flex: none;
}
.vip-call-tile:hover .vip-call-mod-actions{ display: inline-flex; }
.vip-call-mod-btn{
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(90, 167, 255, 0.12);
  color: #25527d;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 140ms ease;
}
.vip-call-mod-btn:hover{ background: rgba(90, 167, 255, 0.28); }
.vip-call-mod-btn.is-danger{ color: #e05252; }
.vip-call-mod-btn.is-danger:hover{ background: rgba(255, 99, 99, 0.22); }
.vip-call-mute-badge,
.vip-call-localmute-badge{
  flex: none;
  display: grid;
  place-items: center;
  color: #8aa0b5;
  opacity: 0.9;
}
.vip-call-mute-badge[hidden],
.vip-call-localmute-badge[hidden]{ display: none; }
.vip-call-tile.is-server-muted .vip-call-tile-media{ opacity: 0.55; }
.vip-call-tile.is-server-muted .vip-call-tile-name{ color: #8aa0b5; }
/* Personal mute: dimmed row for you only; the toggle stays visible and
   tinted red while active (not just on hover). */
.vip-call-localmute.is-on{ background: rgba(255, 99, 99, 0.18); color: #e05252; }
.vip-call-localmute.is-on:hover{ background: rgba(255, 99, 99, 0.30); }
.vip-call-tile.is-local-muted .vip-call-mod-actions{ display: inline-flex; }
.vip-call-tile.is-local-muted .vip-call-tile-media{ opacity: 0.55; }
.vip-call-tile.is-local-muted .vip-call-tile-name{ color: #8aa0b5; }

/* Call chat: same glass card as the body, dense Discord-style lines. */
.vip-call-chat{
  margin-top: 8px;
  padding: 8px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(220, 235, 255, 0.5) 0%, rgba(255, 255, 255, 0.6) 55%, rgba(200, 226, 255, 0.48) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 14px 34px rgba(31, 38, 135, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
}
.vip-call-chat[hidden]{ display: none; }
.vip-call-chat-log{
  max-height: 140px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 7px;
  padding-right: 2px;
  overscroll-behavior: contain;
}
.vip-call-chat-log:empty::before{
  content: "No messages yet — say hi 👋";
  font-size: 11px;
  color: #7d93ab;
}
.vip-call-chat-row{
  font-size: 12px;
  line-height: 1.35;
  color: #24405c;
  overflow-wrap: anywhere;
}
.vip-call-chat-row strong{
  color: #2a63a5;
  font-weight: 700;
  margin-right: 2px;
}
.vip-call-chat-form{
  display: flex;
  align-items: center;
  gap: 6px;
}
.vip-call-chat-form input{
  flex: 1;
  min-width: 0;
  border-radius: 999px;
  border: 1px solid rgba(140, 170, 210, 0.45);
  background: rgba(255, 255, 255, 0.78);
  padding: 6px 11px;
  font-size: 12px;
  font-family: inherit;
  color: #17334d;
  outline: none;
}
.vip-call-chat-form input::placeholder{ color: #8aa0b5; }
.vip-call-chat-form input:focus{
  border-color: rgba(90, 140, 210, 0.75);
  box-shadow: 0 0 0 3px rgba(120, 165, 230, 0.22);
}
/* Global glass button rules inflate compact controls — pin size down. */
.vip-call-chat-form button{
  padding: 6px 13px !important;
  font-size: 11.5px !important;
  font-weight: 700;
  border-radius: 999px !important;
  flex-shrink: 0;
}

/* ── Floating channel windows ─────────────────────────────────────────── */
.chan-window{
  position: fixed;
  width: 350px;
  height: 400px;
  min-width: 270px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: linear-gradient(160deg, rgba(228, 242, 255, 0.72) 0%, rgba(255, 255, 255, 0.78) 55%, rgba(210, 233, 255, 0.7) 100%);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  box-shadow: 0 20px 48px rgba(31, 38, 135, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  overflow: hidden;
  resize: both;
}
.chan-window-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(240, 248, 255, 0.25));
}
.chan-window-head:active{ cursor: grabbing; }
.chan-window-title{
  font-weight: 800;
  font-size: 13.5px;
  color: #17334d;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chan-window-hash{
  color: #4f95d8;
  font-weight: 800;
}
.chan-window-close{
  width: 26px;
  height: 26px;
  border-radius: 9px;
  border: 1px solid rgba(79, 149, 216, 0.20);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(220, 235, 252, 0.85));
  color: #1a3f6b;
  font-size: 12px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.chan-window-close:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ffffff, #d9eaff);
  box-shadow: 0 4px 10px rgba(79, 149, 216, 0.18);
}
.chan-window-log{
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.chan-window-row{
  font-size: 12px;
  line-height: 1.45;
  color: #2a4a66;
  word-break: break-word;
}
.chan-window-row.is-system{
  color: #6d8195;
  font-style: italic;
}
.chan-window-time{
  color: #8fa6ba;
  font-size: 10.5px;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}
.chan-window-user{
  font-weight: 800;
  color: #17334d;
  margin-right: 6px;
}
.chan-window-error{
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #c0392b;
}
.chan-window-error.hidden{ display: none; }
.chan-window-form{
  display: flex;
  gap: 6px;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.chan-window-form input{
  flex: 1;
  min-width: 0;
  padding: 7px 12px;
  border-radius: 12px;
  border: 1px solid rgba(110, 160, 220, 0.32);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(232, 244, 255, 0.7));
  font-size: 12.5px;
  color: #17334d;
  font-family: inherit;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6);
}
.chan-window-form input:focus{ outline: 2px solid rgba(79, 149, 216, 0.35); outline-offset: 1px; }
.chan-window-form button{
  padding: 7px 14px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(79, 149, 216, 0.20) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(220, 235, 252, 0.85)) !important;
  color: #1a3f6b !important;
  cursor: pointer !important;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease !important;
}
.chan-window-form button:hover{
  transform: translateY(-1px) !important;
  background: linear-gradient(180deg, #ffffff, #d9eaff) !important;
  box-shadow: 0 4px 10px rgba(79, 149, 216, 0.18) !important;
}

/* Right-click menu on sidebar rooms */
.chan-context-menu{
  position: fixed;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: linear-gradient(160deg, rgba(235, 245, 255, 0.82) 0%, rgba(255, 255, 255, 0.88) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 12px 30px rgba(31, 38, 135, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  padding: 5px;
  overflow: hidden;
}
.chan-context-item{
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px !important;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #1a3f6b !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.chan-context-item:hover{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(217, 234, 255, 0.9)) !important;
}

/* Floating window: GIF/emoji buttons, emoji tray, GIFs, reactions */
.chan-window-icon-btn{
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 10px !important;
  border: 1px solid rgba(79, 149, 216, 0.20) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(220, 235, 252, 0.85)) !important;
  color: #1a3f6b !important;
  display: grid;
  place-items: center;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease !important;
}
.chan-window-icon-btn:hover{
  transform: translateY(-1px) !important;
  background: linear-gradient(180deg, #ffffff, #d9eaff) !important;
  box-shadow: 0 4px 10px rgba(79, 149, 216, 0.18) !important;
}
.chan-window-emoji-tray{
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 10px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(247, 251, 255, 0.65));
  max-height: 86px;
  overflow-y: auto;
}
.chan-window-emoji-tray.hidden{ display: none !important; }
.chan-window-emoji-tray .emoji-chip{
  font-size: 16px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 3px 5px !important;
  border-radius: 8px !important;
  transition: background 140ms ease, transform 140ms ease;
}
.chan-window-emoji-tray .emoji-chip:hover{
  background: rgba(79, 149, 216, 0.12) !important;
  transform: scale(1.15);
}
.chan-window-gif{
  display: block;
  max-width: 70%;
  max-height: 140px;
  border-radius: 10px;
  margin: 4px 0 2px 44px;
  box-shadow: 0 4px 12px rgba(31, 38, 135, 0.14);
}
.chan-window-reacts{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 2px 0 0 44px;
  min-height: 14px;
}
.chan-window-pill{
  padding: 1px 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(79, 149, 216, 0.22) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(228, 241, 255, 0.8)) !important;
  color: #1a3f6b !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.chan-window-pill.is-own{
  border-color: rgba(79, 149, 216, 0.55) !important;
  background: linear-gradient(180deg, rgba(217, 234, 255, 0.95), rgba(198, 226, 255, 0.95)) !important;
}
.chan-window-quick{
  display: none;
  gap: 2px;
}
.chan-window-row:hover .chan-window-quick{ display: inline-flex; }
.chan-window-quick-btn{
  padding: 0 4px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  opacity: 0.65;
  transition: transform 120ms ease, opacity 120ms ease;
}
.chan-window-quick-btn:hover{
  opacity: 1;
  transform: scale(1.25);
  background: transparent !important;
}

/* ── VIP aura: profile windows of VIP users ────────────────────────────
   Rotating gold ring + breathing glow + periodic shine sweep. Applied
   via .wpz-vip-aura on the profile popover and profile modal card when
   the viewed user is VIP. */
@property --wpz-aura-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
/* NOTE: no `position` here — the popover is position:absolute and this
   class must never override it (it broke popover placement for VIPs).
   Pseudo-element anchoring is guaranteed per-target below instead. */
.wpz-vip-aura{
  animation: wpzVipAuraGlow 3.2s ease-in-out infinite;
}
.wpz-modal-card.wpz-vip-aura{ position: relative; }
/* Preserve the popover's entry fade alongside the aura glow. */
.wpz-profile-popover.wpz-vip-aura{
  animation: wpzFadeScaleIn 220ms cubic-bezier(0.16, 1, 0.3, 1),
             wpzVipAuraGlow 3.2s ease-in-out infinite;
}
.wpz-vip-aura::before{
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from var(--wpz-aura-angle),
    rgba(255, 205, 90, 0) 0%,
    rgba(255, 216, 115, 0.9) 12%,
    rgba(255, 243, 196, 1) 20%,
    rgba(247, 183, 51, 0.95) 30%,
    rgba(255, 205, 90, 0) 45%,
    rgba(255, 205, 90, 0) 55%,
    rgba(255, 216, 115, 0.7) 70%,
    rgba(255, 243, 196, 0.9) 78%,
    rgba(255, 205, 90, 0) 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: wpzVipAuraSpin 4s linear infinite;
  pointer-events: none;
  z-index: 3;
}
.wpz-vip-aura::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg,
    transparent 42%,
    rgba(255, 236, 170, 0.30) 50%,
    rgba(255, 255, 255, 0.42) 53%,
    rgba(255, 236, 170, 0.28) 56%,
    transparent 64%);
  background-size: 300% 100%;
  background-position: 120% 0;
  animation: wpzVipAuraShine 5.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes wpzVipAuraSpin{ to { --wpz-aura-angle: 360deg; } }
@keyframes wpzVipAuraShine{
  0%, 55% { background-position: 120% 0; }
  78%, 100% { background-position: -60% 0; }
}
@keyframes wpzVipAuraGlow{
  0%, 100% {
    box-shadow: 0 18px 44px rgba(31, 38, 135, 0.2),
                0 0 16px rgba(255, 200, 80, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }
  50% {
    box-shadow: 0 18px 44px rgba(31, 38, 135, 0.2),
                0 0 34px rgba(255, 195, 70, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }
}

/* ── VIP funnel gold trim ──────────────────────────────────────────────
   The signup modal (while it's part of the Get-VIP flow) and the Stripe
   checkout card wear the VIP gold: the same rotating conic ring and
   breathing glow as the profile aura. These cards clip their children
   (overflow auto/hidden), so the ring is painted into the border itself
   instead of a pseudo-element. */
.auth-modal.is-vip-flow .auth-panel,
.vip-checkout-card{
  border: 3px solid transparent;
  animation: wpzVipAuraSpin 4s linear infinite,
             wpzVipAuraGlow 3.2s ease-in-out infinite;
}
.auth-modal.is-vip-flow .auth-panel{
  /* Near-opaque padding-box layer: the conic ring sits behind the whole
     card, and a translucent surface lets it wash/fog the content (it
     read as a blur over the top of the panel). */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.97), rgba(240,248,255,0.96)) padding-box,
    conic-gradient(from var(--wpz-aura-angle),
      rgba(255, 205, 90, 0.18) 0%,
      rgba(255, 216, 115, 0.9) 12%,
      rgba(255, 243, 196, 1) 20%,
      rgba(247, 183, 51, 0.95) 30%,
      rgba(255, 205, 90, 0.18) 45%,
      rgba(255, 205, 90, 0.18) 55%,
      rgba(255, 216, 115, 0.7) 70%,
      rgba(255, 243, 196, 0.9) 78%,
      rgba(255, 205, 90, 0.18) 92%) border-box;
}
.vip-checkout-card{
  background:
    linear-gradient(180deg, rgba(245,248,255,0.97), rgba(228,240,255,0.96)) padding-box,
    conic-gradient(from var(--wpz-aura-angle),
      rgba(255, 205, 90, 0.18) 0%,
      rgba(255, 216, 115, 0.9) 12%,
      rgba(255, 243, 196, 1) 20%,
      rgba(247, 183, 51, 0.95) 30%,
      rgba(255, 205, 90, 0.18) 45%,
      rgba(255, 205, 90, 0.18) 55%,
      rgba(255, 216, 115, 0.7) 70%,
      rgba(255, 243, 196, 0.9) 78%,
      rgba(255, 205, 90, 0.18) 92%) border-box;
}

/* Profile editor field labels — match the site's small uppercase label
   style (same recipe as the profile view's BIO / FAVORITE TRACK heads). */
.wpz-profile-label{
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6d8195;
  margin-bottom: 6px;
}
.wpz-profile-label #profileBioCount{
  text-transform: none;
  letter-spacing: normal;
}

/* ── Social chips on profiles + editor inputs ─────────────────────────── */
.wpz-social-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 14px;
}
.wpz-social-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 5px;
  border-radius: 999px;
  border: 1px solid rgba(79, 149, 216, 0.20);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(220, 235, 252, 0.85));
  color: #1a3f6b;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.wpz-social-chip:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ffffff, #d9eaff);
  box-shadow: 0 4px 10px rgba(79, 149, 216, 0.18);
}
.wpz-social-ico{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.wpz-social-edit-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.wpz-social-edit-row{
  display: flex;
  align-items: center;
  gap: 7px;
}
.wpz-social-edit-row input{
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(79, 149, 216, 0.16);
  background: #f8fbff;
  font-size: 12.5px;
  font-family: inherit;
  color: #17334d;
}
@media (max-width: 560px){ .wpz-social-edit-grid{ grid-template-columns: 1fr; } }

/* "Read more" reveal for clamped bios in the profile popover */
.wpz-bio-more{
  margin-top: 4px;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(79, 149, 216, 0.20) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(220, 235, 252, 0.85)) !important;
  color: #2f6fae !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: transform 140ms ease, background 140ms ease;
}
.wpz-bio-more:hover{
  transform: translateY(-1px) !important;
  background: linear-gradient(180deg, #ffffff, #d9eaff) !important;
}

/* Usernames in floating windows are clickable (fills @reply) */
.chan-window-user{ cursor: pointer; }
.chan-window-user:hover{ text-decoration: underline; text-decoration-color: rgba(79, 149, 216, 0.55); }

/* ── XP bar fill: loads in from 0 + continuous shine sweep ───────────── */
.wpz-xp-fill{
  border-radius: inherit;
  /* layer 1: moving highlight, layer 2: the blue fill gradient */
  background-image:
    linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.45) 50%, transparent 75%),
    linear-gradient(90deg, #5a9be8 0%, #2f6fae 100%);
  background-size: 220% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  animation:
    wpzXpLoad 900ms cubic-bezier(0.22, 1, 0.36, 1),
    wpzXpShine 2.4s linear 900ms infinite;
}
@keyframes wpzXpLoad{ from { width: 0; } }
@keyframes wpzXpShine{
  0%   { background-position: 130% 0, 0 0; }
  100% { background-position: -90% 0, 0 0; }
}

/* Edit/Delete controls in floating windows (hover-revealed) */
.chan-window-mod-btn{
  padding: 0 4px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  color: #6d8195 !important;
  opacity: 0.7;
  transition: transform 120ms ease, opacity 120ms ease, color 120ms ease;
}
.chan-window-mod-btn:hover{
  opacity: 1;
  transform: scale(1.15);
  background: transparent !important;
}
.chan-window-del-btn:hover{ color: #c0392b !important; }
.chan-window-edit-btn:hover{ color: #2f6fae !important; }

/* Quick category chips in the GIF popup */
.gif-quick-cats{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 2px;
}
.gif-cat-chip{
  padding: 4px 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(79, 149, 216, 0.20) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(220, 235, 252, 0.85)) !important;
  color: #1a3f6b !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease !important;
}
.gif-cat-chip:hover{
  transform: translateY(-1px) !important;
  background: linear-gradient(180deg, #ffffff, #d9eaff) !important;
  box-shadow: 0 4px 10px rgba(79, 149, 216, 0.18) !important;
}
.gif-cat-chip.is-active{
  border-color: rgba(79, 149, 216, 0.55) !important;
  background: linear-gradient(180deg, rgba(217, 234, 255, 0.95), rgba(198, 226, 255, 0.95)) !important;
}

/* ── Admin chat file cards: type, size, antivirus status ─────────────── */
.wpz-file-card{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(79, 149, 216, 0.20);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(226, 240, 255, 0.85));
  text-decoration: none;
  color: #17334d;
  max-width: 320px;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.wpz-file-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(79, 149, 216, 0.18);
}
.wpz-file-card-icon{
  font-size: 24px;
  flex: 0 0 auto;
}
.wpz-file-card-info{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wpz-file-card-name{
  font-size: 12.5px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wpz-file-card-meta{
  font-size: 10.5px;
  font-weight: 700;
  color: #6d8195;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wpz-file-card-meta .wpz-file-size{ text-transform: none; }
.wpz-file-scan{
  font-size: 10px;
  font-weight: 700;
  width: fit-content;
  padding: 1px 8px;
  border-radius: 999px;
}
.wpz-file-scan.is-clean{
  color: #157347;
  background: rgba(25, 135, 84, 0.12);
  border: 1px solid rgba(25, 135, 84, 0.25);
}
.wpz-file-scan.is-warning{
  color: #9a5b00;
  background: rgba(255, 165, 0, 0.14);
  border: 1px solid rgba(255, 165, 0, 0.35);
}

/* Avatar inline in the meta row — directly next to the username */
.message-avatar.in-meta{
  width: 34px;
  height: 34px;
  min-width: 34px;
  font-size: 12px;
  border-radius: 50%;
  overflow: hidden;
}
.message-avatar.in-meta img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.message-meta{
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Reaction counts live on the quick-react buttons — the old pill row
   under the bubble is gone. */
.message-reactions{ display: none !important; }
.message-tool.has-count{
  font-weight: 700 !important;
  color: #1a3f6b !important;
}
.message-tool.is-own{
  border-color: rgba(79, 149, 216, 0.55) !important;
  background: linear-gradient(180deg, rgba(217, 234, 255, 0.95), rgba(198, 226, 255, 0.95)) !important;
}

/* Composer character counter (visible near the 450 limit) */
.msg-char-count{
  position: absolute;
  top: -20px;
  right: 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: #6d8195;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(226, 240, 255, 0.85));
  border: 1px solid rgba(79, 149, 216, 0.20);
  border-radius: 999px;
  padding: 1px 9px;
  pointer-events: none;
}
.msg-char-count.hidden{ display: none; }
.msg-char-count.is-max{
  color: #c0392b;
  border-color: rgba(192, 57, 43, 0.35);
}

/* (tools visibility is handled on the floating bar container) */

/* Tiny byline under each message bubble */
.message-byline{
  font-size: 8.5px;
  font-weight: 600;
  color: #9fb2c4;
  letter-spacing: 0.03em;
  margin: 1px 6px 0;
  user-select: none;
}

/* (density handled by the floating bar taking no layout space) */

/* Ambient reaction counts: tiny chips on the byline line — always fits,
   no extra row. Clickable (same toggle as the react buttons). */
.message-byline .message-reaction-pill{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 0 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(79, 149, 216, 0.25) !important;
  background: #f3f9ff !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  color: #2f6fae !important;
  cursor: pointer !important;
  box-shadow: none !important;
  vertical-align: middle;
  pointer-events: auto;
  user-select: none;
}
.message-byline .message-reaction-pill.is-own{
  border-color: rgba(79, 149, 216, 0.55) !important;
  background: linear-gradient(180deg, rgba(217, 234, 255, 0.95), rgba(198, 226, 255, 0.95)) !important;
}

/* Discord-style hover: the whole row tints softly and the action bar
   sits pinned at the row's top-right, overlapping the row edge. */
.message-row{
  /* Anchor for the hover toolbar: the bar positions against the FULL
     row, not the content-hugging stack — deterministic for any
     message length (Discord pins to the log edge the same way). */
  position: relative;
  border-radius: 14px;
  padding: 3px 8px;
  margin-left: -8px;
  margin-right: -4px;
  transition: background 120ms ease;
}
.message-row:hover{
  background: linear-gradient(180deg, rgba(178, 214, 250, 0.62), rgba(200, 228, 252, 0.48));
}

/* Own messages: overlay the TOP-LEFT edge of the row (mirror of the
   default top-right overlay). The old placement hung the bar fully
   outside the message column (right: 100% + 10px), which pushed it off
   the viewport once a long bubble made the stack span the full log
   width — clipping the react buttons (Aug 2026). */
.message-row.is-own .message-stack{ position: static; }
.message-row.is-own .message-tools{
  left: 10px;
  right: auto;
  top: -13px;
  width: max-content;
  flex-wrap: nowrap;
  transform: scale(0.82);
  transform-origin: top left;
}

/* ── Floating Twitch window ──────────────────────────────────────────
   "Open Twitch channel" opens this draggable in-page window instead of
   a new tab, so people keep chatting while they watch. The ⛶ button
   toggles a near-fullscreen FLOATING state (still in-page). */
.wpz-twitch-float{
  position: fixed;
  top: 96px;
  right: 32px;
  width: min(720px, calc(100vw - 48px));
  z-index: 100060;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(160deg, rgba(240, 248, 255, 0.9), rgba(255, 255, 255, 0.92));
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  box-shadow: 0 30px 70px rgba(8, 22, 39, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: wpzFadeScaleIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wpz-twitch-float-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  cursor: grab;
  user-select: none;
  border-bottom: 1px solid rgba(120, 168, 224, 0.16);
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(234,245,255,0.45));
}
.wpz-twitch-float.is-dragging .wpz-twitch-float-head{ cursor: grabbing; }
.wpz-twitch-float-title{
  font-size: 12.5px;
  font-weight: 800;
  color: #17334d;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wpz-twitch-float-actions{ display: flex; gap: 6px; flex: 0 0 auto; }
.wpz-twitch-float-btn{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(240,248,255,0.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: #1a3f6b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  transition: transform 120ms ease, filter 120ms ease;
}
.wpz-twitch-float-btn:hover{ transform: translateY(-1px); filter: brightness(1.08); }
.wpz-twitch-float-body{
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0e1420;
}
.wpz-twitch-float-frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Near-fullscreen, but still a floating in-page window. */
.wpz-twitch-float.is-max{
  inset: 20px;
  width: auto;
  height: auto;
}
.wpz-twitch-float.is-max .wpz-twitch-float-body{
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-height: 0;
}
/* The iframe would swallow mouse events mid-drag. */
.wpz-twitch-float.is-dragging .wpz-twitch-float-frame{ pointer-events: none; }

/* ── Admin composer: standard chat template ──────────────────────────
   Same flat tint circles + accent Send as the main message form; the
   admin-only tools (GIF / file / mic) stay. Overrides the glass-pill
   styling above (later in file, same specificity). */
.admin-channel-form input{
  font-size: 12px !important;
}
.admin-channel-form .admin-channel-icon-btn{
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  background: var(--surface-tint);
  color: var(--text);
  box-shadow: none;
  font-size: 16px;
}
.admin-channel-form .admin-channel-icon-btn:hover{
  transform: translateY(-1px);
  background: linear-gradient(135deg, #e4f1ff 0%, #cfe5ff 100%);
  box-shadow: none;
}
.admin-channel-form button[type="submit"]{
  background: var(--accent);
  color: var(--accent-ink);
  border-color: rgba(90, 167, 255, 0.12);
  padding: 11px 18px;
  font-size: 13px;
}

/* ── Live-room header actions (Donate + Twitch, top-right) ─────────── */
.room-badges-row{
  display: flex;
  align-items: center;
  gap: 8px;
}
.room-badges-row .live-action-btn{
  /* Exact metrics of the topbar pills (Inbox / Friend list) so the pair
     never reads bulkier than the rest of the chrome. */
  height: auto;
  box-sizing: border-box;
  padding: 7px 14px;
  font-size: 12.5px;
  line-height: 1.2;
  gap: 5px;
}
.room-header-twitch-btn{
  background: linear-gradient(135deg, #a970ff 0%, #9146ff 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 6px rgba(145, 70, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.room-header-twitch-btn:hover{
  filter: brightness(1.07);
  color: #fff;
}
.room-header-twitch-btn.hidden{ display: none !important; }

/* Twitch pill: CSS dot instead of the 🟣 emoji (whose glyph metrics made
   the button read bulkier than Donate). */
.room-header-twitch-btn::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: radial-gradient(circle at 35% 30%, #e3d1ff, #5b21b6 75%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55);
}
/* Donate pill: stand-out warm gradient to balance the purple Twitch. */
.room-badges-row .live-donate-group .live-action-btn{
  background: linear-gradient(135deg, #ff8a95 0%, #e8556a 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 2px 6px rgba(232, 85, 106, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.room-badges-row .live-donate-group .live-action-btn:hover{
  filter: brightness(1.06);
  color: #fff;
}

/* ── Friend list: add-by-username + pending request queue ───────────────
   Sits between the search field and the two-column shell inside the
   Connections window. */
.wpz-social-requests{
  flex: 0 0 auto;
  padding: 0 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wpz-social-requests.hidden{ display: none !important; }

.wpz-social-addbox{
  display: flex;
  align-items: center;
  gap: 8px;
}
.wpz-social-addbox input{
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid rgba(90,167,255,0.22);
  background: var(--surface-strong);
  outline: none;
}
.wpz-social-addbox input:focus{
  border-color: rgba(90,167,255,0.6);
  box-shadow: 0 0 0 3px rgba(90,167,255,0.14);
}
.wpz-social-addbtn{
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  color: #1a3f6b;
  border: 1px solid rgba(255,255,255,0.7);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(226,240,255,0.72));
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 3px 8px rgba(50,100,160,0.2);
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wpz-social-addbtn:hover:not(:disabled){
  transform: translateY(-1px);
  box-shadow: 0 7px 15px rgba(50,100,160,0.22);
}
.wpz-social-addbtn:disabled{ opacity: 0.6; cursor: default; }

.wpz-social-addstatus{
  font-size: 11.5px;
  font-weight: 700;
  padding: 0 4px;
  color: #2f6fae;
}
.wpz-social-addstatus.is-error{ color: #c43d3d; }
.wpz-social-addstatus.is-ok{ color: #2c8a5b; }
.wpz-social-addstatus.hidden{ display: none !important; }

.wpz-social-reqgroup{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(90,167,255,0.2);
  background: linear-gradient(180deg, rgba(240,248,255,0.85), rgba(228,241,255,0.65));
}
.wpz-social-reqgroup.hidden{ display: none !important; }
.wpz-social-reqhead{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5b7794;
  padding: 0 2px 2px;
}
.wpz-social-reqrow{
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto;
  gap: 9px;
  align-items: center;
}
.wpz-social-reqavatar{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: linear-gradient(180deg, #eaf3ff, #cfe4fb);
  border: 1px solid rgba(90,167,255,0.35);
}
.wpz-social-reqavatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.wpz-social-reqname{
  font-size: 12.5px;
  font-weight: 800;
  color: #1a3f6b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wpz-social-reqactions{
  display: inline-flex;
  gap: 6px;
}
.wpz-social-reqactions button{
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid rgba(90,167,255,0.28);
  background: rgba(255,255,255,0.82);
  color: #2f6fae;
  transition: background 0.15s ease, color 0.15s ease;
}
.wpz-social-reqactions .wpz-social-accept{
  background: linear-gradient(180deg, #eaf7f0, #d6f0e2);
  border-color: rgba(44,138,91,0.28);
  color: #2c8a5b;
}
.wpz-social-reqactions .wpz-social-accept:hover{ background: #d6f0e2; }
.wpz-social-reqactions .wpz-social-decline{
  background: rgba(196,61,61,0.07);
  border-color: rgba(196,61,61,0.2);
  color: #c43d3d;
}
.wpz-social-reqactions .wpz-social-decline:hover{ background: rgba(196,61,61,0.14); }
.wpz-social-reqactions button:disabled{ opacity: 0.55; cursor: default; }

.wpz-social-reqrow.is-outgoing{ opacity: 0.82; }
.wpz-social-reqpending{
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8aa3bd;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(90,140,190,0.18);
}

/* Outgoing rows: Pending chip with Cancel stacked right underneath, both
   hugging the row's right edge so the grid stays a single line. */
.wpz-social-reqactions.wpz-social-reqright{
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

/* Compact request cards — the queue is a status strip, not a hero panel. */
.wpz-social-reqgroup{
  gap: 4px;
  padding: 6px 8px;
}
.wpz-social-reqhead{ font-size: 9px; }
.wpz-social-reqrow{
  grid-template-columns: 22px minmax(0,1fr) auto;
  gap: 7px;
}
.wpz-social-reqavatar{
  width: 22px;
  height: 22px;
  font-size: 11px;
}
.wpz-social-reqname{ font-size: 12px; }
.wpz-social-reqpending{
  font-size: 9px;
  padding: 2px 7px;
}
.wpz-social-reqactions button{
  padding: 3px 9px;
  font-size: 10.5px;
}

/* The friend-detail pane must scroll, never clip: centered flex + overflow
   cuts the card's top off, so anchor to the top and scroll. The empty
   state keeps its vertical centering via auto margins. */
.social-detail{
  justify-content: flex-start !important;
  overflow-y: auto !important;
}
.social-detail-empty{ margin: auto 0; }
#socialDetailNote{ display: none !important; }

/* A "New PM from X" notification opens the conversation on click — make it
   look pressable so it reads as an action, not a log line. */
.wpz-notification-item.is-openable{
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.wpz-notification-item.is-openable:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(228,241,255,0.9));
  box-shadow: 0 6px 14px rgba(50,100,160,0.16);
}
.wpz-notification-item.is-openable:active{
  transform: translateY(0);
}

/* ── Staff dossier window (/id) ────────────────────────────────────────── */
.wpz-dossier{
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 28px));
  max-height: min(78vh, 820px);
  display: flex;
  flex-direction: column;
  z-index: 2147483040;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(220,235,255,0.55) 0%, rgba(255,255,255,0.66) 55%, rgba(200,226,255,0.5) 100%);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 26px 60px rgba(31,38,135,0.28), inset 0 1px 0 rgba(255,255,255,0.75);
  backdrop-filter: blur(40px) saturate(220%);
  -webkit-backdrop-filter: blur(40px) saturate(220%);
  animation: wpzScaleIn 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wpz-dossier.hidden{ display: none !important; }
.wpz-dossier-head{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  cursor: grab;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.35);
}
.wpz-dossier-head:active{ cursor: grabbing; }
.wpz-dossier-title{ font-size: 14px; font-weight: 800; color: #17334d; }
.wpz-dossier-head-right{ display: inline-flex; align-items: center; gap: 8px; }
.wpz-dossier-copy{
  padding: 4px 11px !important;
  font-size: 11px !important;
  font-weight: 700;
  border-radius: 999px !important;
  border: 1px solid rgba(90,167,255,0.3) !important;
  background: rgba(255,255,255,0.8) !important;
  color: #2f6fae !important;
  cursor: pointer;
  box-shadow: none !important;
}
.wpz-dossier-copy:hover{ background: #eef6ff !important; }
.wpz-dossier-close{
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  background: rgba(255,255,255,0.7) !important;
  color: #17334d !important;
  cursor: pointer;
  box-shadow: none !important;
}
.wpz-dossier-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px 18px;
}
.wpz-dossier-warn{
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,235,240,0.85);
  border: 1px solid rgba(194,102,131,0.35);
}
.wpz-dossier-warn-head{
  font-size: 10px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
  color: #a0405a; margin-bottom: 4px;
}
.wpz-dossier-warn-item{ font-size: 12.5px; font-weight: 700; color: #a0405a; }
.wpz-dossier-section{ margin-bottom: 14px; }
.wpz-dossier-section-title{
  font-size: 10px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;
  color: #5b7794; padding: 0 2px 5px;
  border-bottom: 1px solid rgba(90,167,255,0.2);
  margin-bottom: 6px;
}
.wpz-dossier-row{
  display: grid;
  grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
  gap: 10px;
  padding: 4px 2px;
  border-radius: 8px;
}
.wpz-dossier-row:hover{ background: rgba(255,255,255,0.45); }
.wpz-dossier-label{
  font-size: 11.5px; font-weight: 700; color: #5b7794;
}
.wpz-dossier-value{
  font-size: 12.5px; font-weight: 600; color: #17334d;
  overflow-wrap: anywhere;
}
.wpz-dossier-value.is-alert{ color: #a0405a; font-weight: 800; }
.wpz-dossier-value.is-good{ color: #2c8a5b; font-weight: 700; }

/* ── Server statistics report (admin panel → Status) ───────────────────── */
.wpz-stats-loading{ padding: 14px 4px; font-size: 12px; color: var(--muted); }
.wpz-stats-head{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 10.5px; color: #5b7794; font-weight: 700;
  padding-bottom: 8px; margin-bottom: 4px;
}
.wpz-stats-refresh{
  padding: 3px 10px !important; font-size: 10.5px !important; font-weight: 700;
  border-radius: 999px !important; cursor: pointer;
  border: 1px solid rgba(90,167,255,0.3) !important;
  background: rgba(255,255,255,0.8) !important; color: #2f6fae !important;
  box-shadow: none !important;
}
.wpz-stats-refresh:hover{ background: #eef6ff !important; }
.wpz-stats-section{ margin-bottom: 14px; }
.wpz-stats-title{
  font-size: 10px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;
  color: #2f6fae; padding-bottom: 5px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(90,167,255,0.25);
}
.wpz-stats-subtitle{
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #5b7794; margin: 10px 0 5px;
}
.wpz-stat-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 7px;
}
.wpz-stat-grid.is-compact{ grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
.wpz-stat-tile{
  padding: 8px 10px; border-radius: 12px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(90,167,255,0.18);
}
.wpz-stat-value{ font-size: 15px; font-weight: 900; color: #17334d; line-height: 1.15; }
.wpz-stat-label{ font-size: 9.5px; font-weight: 700; color: #5b7794; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.wpz-stat-sub{ font-size: 10px; color: #8aa0b5; margin-top: 2px; }
.wpz-stats-tablewrap{ overflow-x: auto; border-radius: 10px; }
.wpz-stats-table{ width: 100%; border-collapse: collapse; font-size: 11px; }
.wpz-stats-table th{
  text-align: left; font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #5b7794; padding: 4px 6px;
  border-bottom: 1px solid rgba(90,167,255,0.2);
}
.wpz-stats-table td{ padding: 4px 6px; color: #17334d; border-bottom: 1px solid rgba(90,167,255,0.08); overflow-wrap: anywhere; }
.wpz-stats-table td.is-key{ font-weight: 700; }
.wpz-stats-table td.is-empty{ color: #8aa0b5; font-style: italic; text-align: center; }
.wpz-stats-table tr:hover td{ background: rgba(255,255,255,0.5); }
.wpz-stats-bars{ display: flex; flex-direction: column; gap: 3px; }
.wpz-stats-bar{ display: grid; grid-template-columns: minmax(70px, 30%) 1fr auto; align-items: center; gap: 7px; }
.wpz-bar-label{ font-size: 10.5px; font-weight: 700; color: #5b7794; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpz-bar-track{ height: 8px; border-radius: 999px; background: rgba(90,167,255,0.14); overflow: hidden; }
.wpz-bar-fill{ display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7fb4f5, #4f95d8); }
.wpz-bar-val{ font-size: 10.5px; font-weight: 800; color: #2f6fae; }

/* Full server-statistics window (opened from the Status tab). */
.wpz-stats-window{
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  z-index: 2147483045;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(220,235,255,0.58) 0%, rgba(255,255,255,0.7) 55%, rgba(200,226,255,0.52) 100%);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 26px 60px rgba(31,38,135,0.3), inset 0 1px 0 rgba(255,255,255,0.75);
  backdrop-filter: blur(40px) saturate(220%);
  -webkit-backdrop-filter: blur(40px) saturate(220%);
  animation: wpzScaleIn 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wpz-stats-window.hidden{ display: none !important; }
.wpz-stats-window-head{
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; cursor: grab;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.35);
}
.wpz-stats-window-head:active{ cursor: grabbing; }
.wpz-stats-window-title{ font-size: 14px; font-weight: 800; color: #17334d; }
.wpz-stats-window-body{
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 14px 18px 20px;
  /* Two columns on wide screens so the report reads like a dashboard. */
  column-gap: 22px;
}
@media (min-width: 900px){
  .wpz-stats-window-body{ columns: 2; }
  .wpz-stats-window-body .wpz-stats-section{ break-inside: avoid; }
  .wpz-stats-window-body .wpz-stats-head{ column-span: all; }
}

/* Live indicators on the statistics report. */
.wpz-live-dot{
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #2c8a5b;
  box-shadow: 0 0 0 0 rgba(44,138,91,0.6);
  animation: wpzLivePulse 2s infinite;
  vertical-align: middle;
}
@keyframes wpzLivePulse{
  0%{ box-shadow: 0 0 0 0 rgba(44,138,91,0.55); }
  70%{ box-shadow: 0 0 0 7px rgba(44,138,91,0); }
  100%{ box-shadow: 0 0 0 0 rgba(44,138,91,0); }
}
.wpz-live-word{ font-size: 9px; font-weight: 900; letter-spacing: 0.12em; color: #2c8a5b; }
.wpz-stats-livebadge{
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; color: #2c8a5b;
}
.wpz-stats-live-head{
  display: flex; align-items: center;
  font-size: 9px; font-weight: 900; letter-spacing: 0.1em;
  color: #2c8a5b; margin-bottom: 6px;
}
/* Value changed on a live tick — brief highlight so movement is visible. */
.wpz-stat-tile.is-pulse{ animation: wpzTilePulse 900ms ease-out; }
@keyframes wpzTilePulse{
  0%{ background: rgba(180,225,200,0.75); border-color: rgba(44,138,91,0.45); }
  100%{ background: rgba(255,255,255,0.55); border-color: rgba(90,167,255,0.18); }
}

/* ═══ Announcement modal — entrance & attention animations ═══════════
   The card already pops in; this layers a staggered rise for its rows,
   a sonar pulse on the eyebrow dot, a periodic sheen sweep across the
   blue CTA, a lift on hover and an unlock pop when the forced-read
   countdown releases "Back to chat". */

/* Springier card entrance with a touch of overshoot. */
.wpz-announce-card{
  animation: wpzAnnouncePopXL 460ms cubic-bezier(0.3, 1.4, 0.45, 1) both;
}
@keyframes wpzAnnouncePopXL{
  from{ transform: translateY(28px) scale(0.92); opacity: 0; }
  60% { transform: translateY(-3px) scale(1.012); opacity: 1; }
  to  { transform: translateY(0) scale(1); opacity: 1; }
}

/* Staggered rise: each row fades up shortly after the card lands. */
.wpz-announce-card > .wpz-announce-eyebrow{ animation: wpzAnnounceRise 460ms cubic-bezier(0.22, 0.9, 0.32, 1) 0.08s both; }
.wpz-announce-card > .wpz-announce-title  { animation: wpzAnnounceRise 460ms cubic-bezier(0.22, 0.9, 0.32, 1) 0.16s both; }
.wpz-announce-card > .wpz-announce-message{ animation: wpzAnnounceRise 460ms cubic-bezier(0.22, 0.9, 0.32, 1) 0.24s both; }
.wpz-announce-card > .wpz-announce-meta   { animation: wpzAnnounceRise 460ms cubic-bezier(0.22, 0.9, 0.32, 1) 0.32s both; }
.wpz-announce-card > .wpz-announce-actions{ animation: wpzAnnounceRise 460ms cubic-bezier(0.22, 0.9, 0.32, 1) 0.40s both; }
.wpz-announce-card > .wpz-announce-timer  {
  animation:
    wpzAnnounceRise 460ms cubic-bezier(0.22, 0.9, 0.32, 1) 0.48s both,
    wpzAnnounceTimerBreathe 1.6s ease-in-out 1.1s infinite;
}
@keyframes wpzAnnounceRise{
  from{ opacity: 0; transform: translateY(14px); }
  to  { opacity: 1; transform: translateY(0); }
}
/* Champagne titles keep their gold glow: rise in first, then glow forever. */
.wpz-announce-modal.is-champagne .wpz-announce-card > .wpz-announce-title{
  animation:
    wpzAnnounceRise 460ms cubic-bezier(0.22, 0.9, 0.32, 1) 0.16s both,
    wpzChampagneTitleGlow 1.8s ease-in-out 0.7s infinite alternate;
}

/* Eyebrow dot: gentle sonar pulse. */
.wpz-announce-eyebrow::before{
  animation: wpzAnnounceDotPulse 1.8s ease-in-out 0.6s infinite;
}
@keyframes wpzAnnounceDotPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(74, 147, 255, 0.45); }
  50%     { box-shadow: 0 0 0 5px rgba(74, 147, 255, 0); }
}

/* Sheen sweep across the dominant blue CTA (Listen now / Back to chat
   when it's the only action). Demoted close pills and disabled buttons
   don't advertise. */
.wpz-announce-btn-link,
.wpz-announce-btn-primary.is-cta{
  position: relative;
  overflow: hidden;
}
.wpz-announce-btn-link::after,
.wpz-announce-btn-primary.is-cta::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: wpzAnnounceSheen 3.4s ease-in-out 1.4s infinite;
}
.wpz-announce-btn:disabled::after{ animation: none; opacity: 0; }
@keyframes wpzAnnounceSheen{
  0%  { left: -70%; }
  40% { left: 130%; }
  100%{ left: 130%; }
}

/* Hover lift on the big blue actions. */
.wpz-announce-btn-link:hover,
.wpz-announce-btn-primary:hover:not(:disabled){
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(106, 169, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

/* Unlock pop: fires the moment the forced-read countdown releases the
   button (the :not(:disabled) rule starts matching → animation runs). */
#wpzAnnounceCloseBtn:not(:disabled){
  animation: wpzAnnounceUnlock 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wpzAnnounceUnlock{
  0%  { transform: scale(0.94); }
  55% { transform: scale(1.05); }
  100%{ transform: scale(1); }
}

/* Countdown line breathes softly while the reader waits. */
.wpz-announce-timer{
  animation: wpzAnnounceTimerBreathe 1.6s ease-in-out infinite;
}
@keyframes wpzAnnounceTimerBreathe{
  0%, 100%{ opacity: 1; }
  50%     { opacity: 0.62; }
}

@media (prefers-reduced-motion: reduce){
  .wpz-announce-card,
  .wpz-announce-card > *,
  .wpz-announce-eyebrow::before,
  .wpz-announce-btn-link::after,
  .wpz-announce-btn-primary.is-cta::after,
  .wpz-announce-timer,
  #wpzAnnounceCloseBtn:not(:disabled){
    animation: none !important;
  }
}

/* ── Presence dot as a VIP status switch (own profile card) ──────────
   Clickable dot: green = online, hollow grey = invisible (Discord-style).
   pointer-events + z-index so the click lands on the dot, not the
   avatar's photo-upload handler underneath. */
.wpz-banner-presence.is-toggle{
  cursor: pointer;
  pointer-events: auto;
  z-index: 3;
  transition: transform 130ms ease, box-shadow 200ms ease;
}
.wpz-banner-presence.is-toggle:hover{
  transform: scale(1.22);
  box-shadow: 0 0 0 4px rgba(90, 167, 255, 0.25);
}
.wpz-banner-presence.is-invisible{
  background: radial-gradient(circle at center, #f4f7fb 0 26%, #94a4ba 30% 100%);
}

/* Private user-created channel chips: soft gold tint + lock. */
.vip-custom-call-chip.is-private{
  border-color: rgba(216, 164, 49, 0.5);
  background: linear-gradient(135deg, rgba(255, 244, 214, 0.85), rgba(255, 252, 240, 0.75));
}

/* Minimized call bar: the glass background normally lives on
   .vip-call-body, which is hidden in mini mode — so the bar was floating
   with no background at all. Give it its own, nearly opaque, so it reads
   clearly against any page content. */
.vip-call-panel.is-mini{
  background: linear-gradient(160deg, rgba(235, 244, 255, 0.94) 0%, rgba(255, 255, 255, 0.96) 55%, rgba(219, 236, 255, 0.94) 100%);
  border: 1px solid rgba(150, 190, 235, 0.75);
  box-shadow: 0 10px 30px rgba(31, 38, 135, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

/* Twitch floating window: corner resize grip. */
.wpz-twitch-float-resize{
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  z-index: 3;
  opacity: 0.75;
  background:
    linear-gradient(135deg, transparent 0 55%, rgba(255, 255, 255, 0.85) 55% 62%, transparent 62% 72%, rgba(255, 255, 255, 0.85) 72% 79%, transparent 79% 89%, rgba(255, 255, 255, 0.85) 89% 96%, transparent 96%);
  border-bottom-right-radius: 18px;
}
.wpz-twitch-float-resize:hover{ opacity: 1; }
.wpz-twitch-float.is-max .wpz-twitch-float-resize{ display: none; }
/* The iframe would swallow mouse events mid-resize too. */
.wpz-twitch-float.is-resizing .wpz-twitch-float-frame{ pointer-events: none; }

/* Edit/Delete on support-ticket rows: tiny ghost buttons in the meta
   line, revealed on row hover (Discord-style). */
.support-msg-actions{
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
  opacity: 0;
  transition: opacity 120ms ease;
  vertical-align: middle;
}
.support-msg-row:hover .support-msg-actions{ opacity: 1; }
.support-msg-act{
  appearance: none;
  border: 1px solid rgba(90, 167, 255, 0.35);
  background: rgba(255, 255, 255, 0.75);
  color: #2f6fae;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  padding: 0;
}
.support-msg-act:hover{ background: rgba(223, 240, 255, 0.95); }
.support-msg-act.is-danger{ color: #c0392b; border-color: rgba(224, 82, 82, 0.4); }
.support-msg-act.is-danger:hover{ background: rgba(255, 231, 231, 0.95); }

/* ── VIP header: Channels dropdown ───────────────────────────────────
   Live member channels collapse into one fixed button + count badge;
   the list opens as a glass dropdown so the header never overflows. */
.vip-header-call-btns{ position: relative; }
.vip-channels-count{
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  background: linear-gradient(135deg, #8ec1ff, #4a93ff);
  color: #fff;
  margin-left: 2px;
}
.vip-channels-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 300px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 900;
  padding: 6px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(240, 247, 255, 0.96) 0%, rgba(255, 255, 255, 0.97) 55%, rgba(225, 239, 255, 0.96) 100%);
  border: 1px solid rgba(150, 190, 235, 0.6);
  box-shadow: 0 18px 44px rgba(31, 38, 135, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  animation: wpzAnnounceRise 200ms cubic-bezier(0.22, 0.9, 0.32, 1);
}
.vip-channels-item{
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 11px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 120ms ease;
}
.vip-channels-item:hover{ background: rgba(150, 195, 245, 0.18); }
.vip-channels-item-ico{ font-size: 15px; flex: 0 0 auto; }
.vip-channels-item-info{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vip-channels-item-name{
  font-size: 13px;
  font-weight: 800;
  color: #1c3a5c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vip-channels-item-meta{
  font-size: 11px;
  font-weight: 600;
  color: #6d8195;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vip-channels-item-count{
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  color: #2f6fae;
  background: rgba(90, 167, 255, 0.14);
  border-radius: 999px;
  padding: 2px 8px;
}
.vip-channels-item-join{
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #8ec1ff, #4a93ff);
  border-radius: 999px;
  padding: 4px 12px;
  box-shadow: 0 4px 12px rgba(106, 169, 255, 0.35);
}
.vip-channels-item:hover .vip-channels-item-join{ filter: brightness(1.06); }

/* Call control toggles: OFF state is a red crossed icon on a red tint —
   readable at a glance in both the full window and the docked bar. */
.vip-call-panel .wpz-inbox-icon-btn.is-off{
  color: #d84343;
  background: rgba(224, 82, 82, 0.14);
  box-shadow: inset 0 0 0 1px rgba(224, 82, 82, 0.45);
}
.vip-call-panel .wpz-inbox-icon-btn.is-off:hover{
  background: rgba(224, 82, 82, 0.22);
}

/* ── Channel invite picker ───────────────────────────────────────────
   Friend list with avatars + online dots and one-click Invite, plus a
   free-text row for anyone else. */
.wpz-call-invite-dlg{
  position: fixed;
  inset: 0;
  z-index: 2147483200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(70, 110, 170, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: wpzAnnounceFade 180ms ease-out;
}
.wpz-call-invite-card{
  width: min(360px, calc(100vw - 32px));
  max-height: min(480px, calc(100vh - 60px));
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(238, 246, 255, 0.96) 0%, rgba(255, 255, 255, 0.97) 55%, rgba(222, 238, 255, 0.96) 100%);
  border: 1px solid rgba(150, 190, 235, 0.65);
  box-shadow: 0 24px 60px rgba(31, 38, 135, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  animation: wpzAnnouncePop 220ms cubic-bezier(0.18, 0.9, 0.3, 1.18);
}
.wpz-call-invite-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 800;
  color: #1c3a5c;
  margin-bottom: 12px;
}
.wpz-call-invite-close{
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(150, 190, 235, 0.5);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  color: #35597e;
  display: grid;
  place-items: center;
}
.wpz-call-invite-form{
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.wpz-call-invite-form input{
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 13px;
  border-radius: 12px;
  border: 1px solid rgba(150, 190, 235, 0.55);
  background: rgba(255, 255, 255, 0.85);
  font-family: inherit;
  font-size: 13px;
}
.wpz-call-invite-form input:focus{ outline: 2px solid rgba(106, 169, 255, 0.5); }
.wpz-call-invite-label{
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #6d8195;
  margin: 0 2px 6px;
}
.wpz-call-invite-list{
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wpz-call-invite-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 11px;
  transition: background 120ms ease;
}
.wpz-call-invite-row:hover{ background: rgba(150, 195, 245, 0.16); }
.wpz-call-invite-row.is-invited{ opacity: 0.65; }
.wpz-call-invite-av{
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8ec1ff, #4a93ff);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: grid;
  place-items: center;
  overflow: visible;
}
.wpz-call-invite-av img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.wpz-call-invite-dot{
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9db3c8;
  border: 2px solid #fff;
}
.wpz-call-invite-dot.is-on{ background: #35c26a; }
.wpz-call-invite-name{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #1c3a5c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wpz-invite-add{ flex: 0 0 auto; font-size: 12px; padding: 5px 13px; }
.wpz-invite-add:disabled{ opacity: 0.7; cursor: default; }
.wpz-call-invite-empty{
  font-size: 12.5px;
  color: #6d8195;
  padding: 10px 8px;
}

/* ── Image lightbox ──────────────────────────────────────────────────
   Full-screen floating view for conversation images: dimmed + blurred
   backdrop, the picture centered at up to 92% of the viewport. */
.wpz-img-lightbox{
  position: fixed;
  inset: 0;
  z-index: 2147483400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 32, 52, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  cursor: zoom-out;
  animation: wpzAnnounceFade 160ms ease-out;
}
.wpz-img-lightbox[hidden]{ display: none; }
.wpz-img-lightbox-img{
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.18);
  animation: wpzAnnouncePop 220ms cubic-bezier(0.18, 0.9, 0.3, 1.18);
}
.wpz-img-lightbox-close{
  position: absolute;
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wpz-img-lightbox-close:hover{ background: rgba(255, 255, 255, 0.28); }

/* Chat photos: compact card, never dominates the column — click opens
   the lightbox for the full view. Keeps the reaction row in sight. */
.message-bubble .wpz-chat-attachment{
  max-width: min(320px, 100%);
  max-height: 220px;
  cursor: zoom-in;
}

/* Paperclip photo button: line icon, centered like its neighbors. */
.photo-button svg{ pointer-events: none; }
.photo-button{ color: #35597e; display: inline-grid; place-items: center; }

/* Lightbox reaction bar: floating glass pill under the image. */
.wpz-img-lightbox-reacts{
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: default;
}
.wpz-img-lightbox-reacts[hidden]{ display: none; }
.wpz-img-lightbox-reacts button{
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 19px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 120ms ease, background 150ms ease;
}
.wpz-img-lightbox-reacts button:hover{
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px) scale(1.08);
}
.wpz-img-lightbox-reacts button.is-popped{
  animation: wpzLbReactPop 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* "+" opens the full emoji picker (incl. server custom emojis). Custom-emoji
   reactions mirror into the strip as images the size of the text emoji. */
.wpz-img-lightbox-reacts .wpz-lb-react-add{
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  padding-bottom: 3px; /* optical centering for the crossbar */
}
.wpz-img-lightbox-reacts button .wpz-custom-emoji{
  width: 24px;
  height: 24px;
  vertical-align: middle;
  pointer-events: none; /* clicks count for the button, not the img */
}
@keyframes wpzLbReactPop{
  0%{ transform: scale(0.8); }
  55%{ transform: scale(1.35); }
  100%{ transform: scale(1); }
}

/* ── Upload progress pill ────────────────────────────────────────────
   Floating glass bar bottom-center with live percent, shown for every
   file upload (chat photos, PM files, voice clips, ticket attachments). */
.wpz-upload-progress{
  position: fixed;
  bottom: 86px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 2147483300;
  min-width: 240px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(238, 246, 255, 0.96), rgba(255, 255, 255, 0.97));
  border: 1px solid rgba(150, 190, 235, 0.65);
  box-shadow: 0 14px 36px rgba(31, 38, 135, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.wpz-upload-progress.is-visible{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.wpz-upload-progress-label{
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #1c3a5c;
  margin-bottom: 6px;
  text-align: center;
}
.wpz-upload-progress-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(90, 167, 255, 0.18);
  overflow: hidden;
}
.wpz-upload-progress-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8ec1ff, #4a93ff);
  transition: width 160ms ease;
}

/* Lightbox reaction counts: small white badge on each button; a blue
   ring marks the reaction you have in yourself. */
.wpz-img-lightbox-reacts button{ position: relative; }
.wpz-img-lightbox-reacts .wpz-lb-count{
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #fff;
  color: #1c3a5c;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.wpz-img-lightbox-reacts .wpz-lb-count[hidden]{ display: none; }
.wpz-img-lightbox-reacts button.is-own{
  background: rgba(106, 169, 255, 0.45);
  box-shadow: 0 0 0 2px rgba(142, 193, 255, 0.9);
}

/* Custom emojis: bigger inline presence, and GIF-sized "jumbo" when the
   message is nothing but emojis (Discord-style). */
.wpz-custom-emoji{
  height: 44px;
  max-width: 110px;
  vertical-align: -14px;
  border-radius: 8px;
}
.message-bubble.has-jumbo-emoji .wpz-custom-emoji{
  height: 96px;
  max-width: 200px;
  vertical-align: middle;
  border-radius: 12px;
  margin: 2px 2px 0 0;
}

/* Thanks strip: chips never wrap mid-name; the "+N more" chip carries
   the overflow (full list in its tooltip). */
.wpz-thanks-window-item{ white-space: nowrap; flex: 0 0 auto; }
.wpz-thanks-window-item.is-more{
  font-weight: 800;
  color: #2f6fae;
  background: rgba(90, 167, 255, 0.14);
  border-radius: 999px;
  padding: 2px 10px;
  cursor: default;
}

/* Pinned "+N more" counter at the right edge of the thanks pill. */
.wpz-thanks-window-more{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  color: #2f6fae;
  background: rgba(90, 167, 255, 0.14);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
  cursor: default;
}

/* Hover popover for the thanks "+N more" chip: every remaining name in
   a glass panel, wrapping into columns, scrollable past ~300px. */
.wpz-thanks-more-pop{
  position: fixed;
  z-index: 2147483500;
  width: 300px;
  max-height: 224px;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 12px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(240, 247, 255, 0.97), rgba(255, 255, 255, 0.98));
  border: 1px solid rgba(150, 190, 235, 0.6);
  box-shadow: 0 18px 44px rgba(31, 38, 135, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  animation: wpzAnnounceRise 150ms cubic-bezier(0.22, 0.9, 0.32, 1);
}
.wpz-thanks-more-pop[hidden]{ display: none; }
.wpz-thanks-more-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6d8195;
  margin: 0 2px 8px;
}
.wpz-thanks-more-close{
  appearance: none;
  border: 1px solid rgba(150, 190, 235, 0.5);
  background: rgba(255, 255, 255, 0.85);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
  color: #35597e;
  cursor: pointer;
  display: none;
  place-items: center;
  padding: 0;
}
.wpz-thanks-more-pop.is-pinned .wpz-thanks-more-close{ display: grid; }
.wpz-thanks-more-grid{
  overflow-y: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 8px;
}
.wpz-thanks-more-user{
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 3px 6px;
  border-radius: 9px;
  transition: background 120ms ease;
}
.wpz-thanks-more-user:hover{ background: rgba(150, 195, 245, 0.16); }
.wpz-thanks-more-user b{
  font-size: 12px;
  font-weight: 700;
  color: #1c3a5c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wpz-thanks-more-av{
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8ec1ff, #4a93ff);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-style: normal;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.wpz-thanks-more-av img{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Frequently-used emojis: fixed-size cells — with few entries the old
   minmax(52px, 1fr) grid stretched each chip to fill the whole row. */
.emoji-popup-frequent-grid{
  grid-template-columns: repeat(auto-fill, 40px);
  justify-content: start;
}
.emoji-popup-frequent-grid .emoji-popup-chip{
  width: 40px;
  height: 40px;
  font-size: 22px;
  padding: 0;
  justify-content: center;
}

/* Custom emojis in the picker: fill the chip like a proper tile. */
.emoji-popup-chip.is-custom img{
  height: 34px;
  width: 34px;
  object-fit: cover;
  border-radius: 9px;
}
.emoji-popup-chip.is-custom{ padding: 3px; }
.emoji-popup-chip.is-custom img{ max-width: none; min-width: 34px; flex: 0 0 auto; }

/* Custom emoji tiles: full-size squares in the picker. */
.emoji-popup-chip.is-custom{
  width: 48px;
  height: 48px;
  padding: 3px;
  display: inline-grid;
  place-items: center;
}
.emoji-popup-chip.is-custom img{
  height: 42px;
  width: 42px;
  min-width: 42px;
  object-fit: cover;
  border-radius: 10px;
}

/* Recent-donors empty state: clear the track's edge-fade mask so the
   first letter isn't clipped, and center it vertically in the strip. */
.topbar-recent-donations-empty{
  padding-left: 16px;
  align-self: center;
}

/* ── Notification reader ─────────────────────────────────────────────
   Clicking a notification opens its full text in a floating glass card
   (list rows are clamped, long announcements got cut off). */
.wpz-notif-reader{
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(70, 110, 170, 0.24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: wpzAnnounceFade 160ms ease-out;
}
.wpz-notif-reader-card{
  width: min(440px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 18px 20px 16px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(240, 247, 255, 0.97), rgba(255, 255, 255, 0.98));
  border: 1px solid rgba(150, 190, 235, 0.6);
  box-shadow: 0 24px 60px rgba(31, 38, 135, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  animation: wpzAnnouncePop 220ms cubic-bezier(0.18, 0.9, 0.3, 1.18);
}
.wpz-notif-reader-head{
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}
.wpz-notif-reader-icon{ font-size: 19px; }
.wpz-notif-reader-title{
  flex: 1 1 auto;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #6d8195;
}
.wpz-notif-reader-close{
  appearance: none;
  border: 1px solid rgba(150, 190, 235, 0.5);
  background: rgba(255, 255, 255, 0.85);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 11px;
  color: #35597e;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.wpz-notif-reader-close:hover{ background: rgba(223, 240, 255, 0.95); }
.wpz-notif-reader-body{
  font-size: 14px;
  line-height: 1.6;
  color: #1c3a5c;
  white-space: pre-wrap;
  word-break: break-word;
}
.wpz-notif-reader-actions{
  display: flex;
  margin-top: 14px;
}
.wpz-notif-reader-cta{
  appearance: none;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(216, 92, 168, 0.5);
  background: linear-gradient(135deg, #ff7ac8, #b45cf0);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(180, 92, 240, 0.28);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.wpz-notif-reader-cta:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(180, 92, 240, 0.36);
}
.wpz-notif-reader-cta:active{ transform: translateY(0); }
.wpz-notif-reader-meta{
  margin-top: 14px;
  font-size: 11.5px;
  font-weight: 600;
  color: #6d8195;
}
/* Openable notification rows get the pointer affordance. */
.wpz-notification-item.is-openable{ cursor: pointer; }

/* Official brand marks inside social/link chips: white glyph centered on
   the brand color, replacing the old text initials. */
.wpz-social-ico svg{
  display: block;
  width: 13px;
  height: 13px;
  fill: #fff;
  color: #fff;
}
.wpz-social-ico{ display: inline-grid; place-items: center; }

/* ── Listening room (#listening-party) ─────────────────────────────────── */
.listen-stage {
  margin: 10px 14px 4px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 252, 240, 0.92), rgba(255, 244, 214, 0.85));
  border: 1px solid rgba(216, 164, 49, 0.28);
  box-shadow: 0 10px 28px rgba(120, 90, 20, 0.12);
  backdrop-filter: blur(10px);
  position: relative;
}
.listen-stage.hidden { display: none; }
.listen-stage-inner { display: flex; align-items: center; gap: 14px; }
.listen-disc {
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #3b3b3f, #121215 70%);
  color: #fff;
  font-size: 20px;
  border: 3px solid rgba(216, 164, 49, 0.55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.listen-disc img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.listen-disc.is-spinning { animation: listenSpin 6s linear infinite; }
@keyframes listenSpin { to { transform: rotate(360deg); } }
.listen-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.listen-label { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: #b8860b; }
.listen-title { font-size: 16px; color: #3a2c10; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listen-sub { font-size: 12px; color: #8a713d; }
.listen-sub b { color: #6b4f14; }
.listen-progress {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(150, 110, 30, 0.16); margin-top: 5px;
}
.listen-progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #e7b93c, #d8862c);
  border-radius: 999px; transition: width 0.25s linear;
}
.listen-meta-row { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.listen-progress-time { font-size: 11px; color: #9a7d3f; font-variant-numeric: tabular-nums; }
.listen-count { font-size: 11.5px; color: #8a713d; font-weight: 600; white-space: nowrap; }
.listen-votes { flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; align-items: stretch; }
.listen-vote {
  border: 1px solid rgba(216, 164, 49, 0.35);
  background: rgba(255, 255, 255, 0.75);
  border-radius: 999px; padding: 7px 14px;
  font-size: 12.5px; font-weight: 700; color: #6b4f14;
  cursor: pointer; transition: transform 0.12s ease, background 0.12s ease;
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
}
.listen-vote b { font-variant-numeric: tabular-nums; }
.listen-vote:hover { transform: translateY(-1px); }
.listen-vote.is-woot.is-active { background: linear-gradient(135deg, #ffd977, #f3a93c); border-color: #d8862c; color: #4a3400; }
.listen-vote.is-meh.is-active { background: rgba(120, 120, 130, 0.18); border-color: rgba(90, 90, 100, 0.4); color: #444; }
.listen-booth-row {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 11px; padding-top: 10px;
  border-top: 1px dashed rgba(216, 164, 49, 0.3);
}
.listen-booth-label { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: #b8860b; text-transform: uppercase; }
.listen-booth-chip {
  font-size: 11.5px; font-weight: 700; color: #6b4f14;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(216, 164, 49, 0.3);
  border-radius: 999px; padding: 3px 10px;
}
.listen-booth-chip.is-me { background: linear-gradient(135deg, #ffe9ad, #ffd977); border-color: #d8a431; }
.listen-btn {
  border: 1px solid rgba(216, 164, 49, 0.4);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 999px; padding: 5px 13px;
  font-size: 12px; font-weight: 700; color: #6b4f14; cursor: pointer;
  transition: transform 0.12s ease;
}
.listen-btn:hover { transform: translateY(-1px); }
.listen-btn.is-primary { background: linear-gradient(135deg, #ffd977, #f3a93c); border-color: #d8862c; color: #4a3400; }
.listen-btn.is-ghost { background: transparent; }
.listen-hint { font-size: 11.5px; color: #9a7d3f; font-style: italic; }
.listen-idle { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.listen-idle-disc { font-size: 34px; filter: saturate(1.2); }
.listen-idle-copy { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.listen-idle-copy strong { color: #3a2c10; font-size: 14.5px; }
.listen-idle-copy span { color: #8a713d; font-size: 12px; }
.listen-idle .listen-booth-row { margin-top: 0; padding-top: 0; border-top: 0; }
.listen-tap {
  position: absolute; inset: 0; border: 0; border-radius: 18px; cursor: pointer;
  background: rgba(30, 22, 5, 0.55); backdrop-filter: blur(3px);
  color: #ffe9ad; font-size: 16px; font-weight: 800; letter-spacing: 0.03em;
}

/* Mini dock — tuned in while browsing another channel */
.listen-dock {
  position: fixed; left: 14px; bottom: 14px; z-index: 12000;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 252, 240, 0.97), rgba(255, 240, 200, 0.95));
  border: 1px solid rgba(216, 164, 49, 0.4);
  box-shadow: 0 10px 26px rgba(80, 60, 10, 0.28);
  max-width: 320px;
}
.listen-dock .listen-disc { border-width: 2px; font-size: 13px; }
.listen-dock-copy { min-width: 0; cursor: pointer; display: flex; flex-direction: column; line-height: 1.2; }
.listen-dock-copy strong { font-size: 12px; color: #3a2c10; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.listen-dock-copy span { font-size: 10.5px; color: #8a713d; }
.listen-dock-woot {
  border: 1px solid rgba(216, 164, 49, 0.4); background: rgba(255, 255, 255, 0.85);
  border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 700;
  color: #6b4f14; cursor: pointer;
}
.listen-dock-woot.is-active { background: linear-gradient(135deg, #ffd977, #f3a93c); }
.listen-dock-close {
  border: 0; background: transparent; color: #9a7d3f;
  font-size: 13px; cursor: pointer; padding: 2px 5px;
}

/* Track picker */
.listen-picker {
  position: fixed; inset: 0; z-index: 13000;
  background: rgba(20, 14, 2, 0.45); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.listen-picker-card {
  width: min(430px, 92vw); max-height: min(560px, 84vh);
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, #fffdf5, #fff4d6);
  border: 1px solid rgba(216, 164, 49, 0.35);
  border-radius: 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  padding: 14px; gap: 10px;
}
.listen-picker-head { display: flex; align-items: center; justify-content: space-between; }
.listen-picker-head strong { color: #3a2c10; font-size: 15px; }
.listen-picker-close { border: 0; background: transparent; font-size: 15px; color: #9a7d3f; cursor: pointer; }
.listen-picker-search {
  width: 100%; padding: 9px 13px; border-radius: 999px;
  border: 1px solid rgba(216, 164, 49, 0.35); background: rgba(255, 255, 255, 0.85);
  font-size: 13px; color: #3a2c10; outline: none;
}
.listen-picker-search:focus { border-color: #d8a431; }
.listen-picker-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.listen-picker-row {
  display: flex; align-items: center; gap: 10px; text-align: left;
  border: 1px solid transparent; background: transparent;
  border-radius: 12px; padding: 6px 8px; cursor: pointer;
}
.listen-picker-row:hover { background: rgba(216, 164, 49, 0.12); border-color: rgba(216, 164, 49, 0.25); }
.listen-picker-row img, .listen-picker-noart {
  width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(216, 164, 49, 0.15); font-size: 16px;
}
.listen-picker-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.listen-picker-copy strong { font-size: 13px; color: #3a2c10; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listen-picker-copy span { font-size: 11px; color: #8a713d; }
.listen-picker-dur {
  margin-left: auto; flex: 0 0 auto;
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #9a7d3f; background: rgba(216, 164, 49, 0.12);
  border-radius: 999px; padding: 2px 8px;
}
.listen-picker-dur.is-full { color: #4a3400; background: linear-gradient(135deg, #ffe9ad, #ffd977); }
.wpz-champagne-banner-thanks.is-thanked{
  opacity: 0.75;
  cursor: default !important;
  pointer-events: none;
}
/* Thanks strip must never crush the room-header action buttons
   (Create channel / Voice chat / … in #vip) — it shrinks + clips
   instead, and the buttons refuse to shrink. */
.wpz-thanks-window{ overflow: hidden; }
.vip-header-call-btns{ flex: 0 0 auto; }
.vip-header-call-btns .vip-call-join-btn{ white-space: nowrap !important; }
/* Keep the room title block at natural size when the thanks strip is
   in the header — without this the strip's flex-grow crushed the
   heading and "main" overlapped its topic text. */
.room-header .room-heading{ flex: 0 0 auto; min-width: max-content; }
.room-heading-text .room-title,
.room-heading-text .room-topic{ white-space: nowrap; }

/* Support-the-server bar: occasional VIP-style shimmer spark. Period and
   delay are randomized per page load from client.js so the glint feels
   organic rather than metronomic. */
.monthly-support-trigger{ position: relative; overflow: hidden; border-radius: 18px; }
.monthly-support-trigger::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-160%) skewX(-15deg);
  animation: wpzVipSpark var(--support-spark-period, 14s) linear infinite;
  animation-delay: var(--support-spark-delay, 4s);
  pointer-events: none;
}

/* Center the ✓ (and friend/POP chips) on the username's midline — the
   inline-block wrap baseline-aligned them slightly off-center. */
.nick-name-wrap{
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
}
.nick-name-wrap .wpz-verified-badge{ margin-left: 0; }
/* Optical centering: the name renders caps-dominant (no descenders), so
   the true line-box center reads ~1px low — nudge the check up. */
.nick-name-wrap .wpz-verified-badge{ transform: translateY(-1.5px); }

/* Hover perks preview for the support presets */
.wpz-preset-hover{
  position: fixed;
  z-index: 100010;
  width: 300px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,255,255,0.97), rgba(240,248,255,0.95));
  border: 1px solid rgba(90, 167, 255, 0.3);
  box-shadow: 0 18px 44px rgba(8, 22, 39, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 130ms ease, transform 130ms ease, visibility 130ms;
  pointer-events: none;
}
.wpz-preset-hover.is-open{ opacity: 1; visibility: visible; transform: translateY(0); }
.wpz-preset-hover-amt{ font-size: 20px; font-weight: 900; color: #17334d; margin-bottom: 6px; }
.wpz-preset-hover-amt span{ font-size: 12px; font-weight: 700; color: #6d8195; }
.wpz-preset-hover-rows{ display: flex; flex-direction: column; gap: 5px; }
.wpz-preset-hover-rows span{ font-size: 12px; line-height: 1.45; color: #33506d; }
.wpz-preset-hover-hint{ margin-top: 9px; font-size: 10.5px; font-weight: 700; color: #6d8195; text-transform: uppercase; letter-spacing: 0.06em; }
/* Gold variant for the Champagne Pop hover preview */
.wpz-preset-hover.is-gold{
  background: linear-gradient(160deg, #fff6dc, #ffe9ad);
  border-color: rgba(216, 164, 49, 0.55);
  box-shadow: 0 18px 44px rgba(120, 90, 20, 0.3);
}
.wpz-preset-hover.is-gold .wpz-preset-hover-amt{ color: #6e4d0c; }
.wpz-preset-hover.is-gold .wpz-preset-hover-rows span{ color: #5d430c; }
.wpz-preset-hover.is-gold .wpz-preset-hover-hint{ color: #8c6410; }

/* Merch popup: subtle zoom on product imagery when hovered */
.merch-product-img-wrap{ overflow: hidden; }
.merch-product-img-wrap .merch-tshirt-img{
  transition: transform 260ms ease;
  display: block;
}
.merch-product-img-wrap:hover .merch-tshirt-img{ transform: scale(1.08); }
.merch-more-img{
  transition: transform 220ms ease;
  border-radius: 8px;
}
.merch-more-item:hover .merch-more-img{ transform: scale(1.14); }

/* Roster rows: pull usernames snug against the avatar (was ~20px away —
   10px flex gap + stray spacing). */
.user-item{ gap: 6px !important; }
.user-item .user-copy{ margin-left: -8px !important; }

/* Roster OWNER badge: render the SAME aurora design as everywhere else
   (profile card, chat) in both themes — the [data-role="owner"]
   .nick-role gold-wash rule was out-specifying .wpz-owner-badge. */
.user-item[data-role="owner"] .nick-role.wpz-owner-badge{
  background: linear-gradient(120deg, #14293e 0%, #1f5078 30%, #3d8ab8 50%, #6fc3e8 65%, #1f5078 85%, #14293e 100%) !important;
  background-size: 300% 100% !important;
  color: #eaf6ff !important;
  border-color: rgba(140, 210, 255, 0.55) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* AOP badge — emerald aurora: clearly special, one tier under the
   OWNER's blue aurora (distinct hue, slower drift). */
.wpz-aop-badge{
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(120deg, #0d2b23 0%, #14523f 30%, #1f8a63 50%, #4fd39b 65%, #14523f 85%, #0d2b23 100%) !important;
  background-size: 300% 100% !important;
  animation: wpzOwnerAurora 10s ease-in-out infinite;
  color: #e4fff2 !important;
  border: 1px solid rgba(110, 230, 180, 0.55) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.06em;
}
.user-item[data-role="aop"] .nick-role.wpz-aop-badge{
  background: linear-gradient(120deg, #0d2b23 0%, #14523f 30%, #1f8a63 50%, #4fd39b 65%, #14523f 85%, #0d2b23 100%) !important;
  background-size: 300% 100% !important;
  color: #e4fff2 !important;
  border-color: rgba(110, 230, 180, 0.55) !important;
}

/* ── VIP gifting (Twitch-style) ────────────────────────────────────────── */
.wpz-gift-overlay{
  position: fixed; inset: 0; z-index: 2147483647;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 14, 2, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.wpz-gift-card{
  position: relative;
  width: min(400px, 92vw);
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(160deg, #fffdf5, #fff2cf);
  border: 1px solid rgba(216, 164, 49, 0.45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column; gap: 12px;
}
.wpz-gift-close{ position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font-size: 15px; color: #8c6410; cursor: pointer; }
.wpz-gift-title{ font-size: 17px; font-weight: 900; color: #4d3608; }
.wpz-gift-sub{ font-size: 12.5px; color: #7a5b16; line-height: 1.45; }
.wpz-gift-options{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wpz-gift-opt{
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(216, 164, 49, 0.35);
  background: rgba(255, 255, 255, 0.75);
  font-size: 13px; font-weight: 800; color: #4d3608;
  min-width: 0;
}
.wpz-gift-opt span{ font-size: 12px; font-weight: 700; color: #8c6410; }
/* Custom-amount tile in community gifts: the button shows the total price
   while the inline number input lets the user pick the count. */
.wpz-gift-opt.wpz-gift-opt-custom{
  padding: 8px 6px 6px;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}
.wpz-gift-opt.wpz-gift-opt-custom:focus-visible{
  outline: 2px solid rgba(216, 134, 44, 0.7);
  outline-offset: -2px;
}
.wpz-gift-custom-input{
  width: 58px;
  margin-top: 2px;
  padding: 3px 4px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: #4d3608;
  border: 1px solid rgba(216, 164, 49, 0.45);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  outline: none;
}
.wpz-gift-opt.is-active .wpz-gift-custom-input{
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(216, 164, 49, 0.7);
}
/* Remove number spinner arrows — they fight the pill layout. */
.wpz-gift-custom-input::-webkit-outer-spin-button,
.wpz-gift-custom-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.wpz-gift-custom-input{ -moz-appearance: textfield; }
.wpz-gift-opt.is-active{
  background: linear-gradient(135deg, #ffd977, #f3a93c);
  border-color: #d8862c;
}
.wpz-gift-anon{ display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #7a5b16; cursor: pointer; }
.wpz-gift-go{
  border: 0; border-radius: 999px; padding: 12px 18px;
  background: linear-gradient(135deg, #ffd977, #f3a93c);
  color: #4a3400; font-size: 14px; font-weight: 900; cursor: pointer;
  box-shadow: 0 8px 18px rgba(216, 134, 44, 0.35);
}
.wpz-gift-go:hover{ transform: translateY(-1px); }
.wpz-gift-note{ font-size: 10.5px; color: #9a7d3f; text-align: center; }
.vip-popup-buy.is-gift{ margin-top: 8px; background: linear-gradient(135deg, #ffe9b8, #ffd47e); color: #6e4d0c; }

/* Blurred backdrop behind the server-statistics report window */
.wpz-stats-backdrop{
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(10, 14, 20, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* VIP gift banner — royal purple, distinct from the gold champagne strip */
.wpz-gift-banner{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 14px 4px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f2e8ff 0%, #dcc8ff 100%);
  border: 1px solid rgba(166, 108, 255, 0.5);
  box-shadow: 0 6px 18px rgba(118, 67, 197, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: #4c2a86;
  font-size: 13.5px;
  font-weight: 800;
  animation: wpzChampagneBannerIn 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wpz-gift-banner.is-leaving{ opacity: 0; transform: translateY(-8px); transition: opacity 600ms ease, transform 600ms ease; }
.wpz-gift-banner-icon{ font-size: 17px; }
.wpz-gift-banner-text{ flex: 1 1 auto; min-width: 0; }
.wpz-gift-banner-close{ border: 0; background: transparent; color: #7643c5; font-size: 15px; cursor: pointer; flex: 0 0 auto; }
.wpz-gift-banner-copy{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wpz-gift-banner-chips{ display: flex; flex-wrap: wrap; gap: 5px; }
.wpz-gift-chip{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 2px 3px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(166, 108, 255, 0.35);
  font-size: 11px; font-weight: 700; color: #4c2a86;
}
.wpz-gift-chip-av{
  width: 17px; height: 17px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #a66cff, #7643c5);
  color: #fff; font-size: 9px; font-weight: 800;
}
.wpz-gift-chip.is-more{ padding: 2px 9px; cursor: pointer; background: rgba(166, 108, 255, 0.2); }
.wpz-gift-banner-thanks{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid rgba(166, 108, 255, 0.45);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 999px; padding: 5px 13px;
  font-size: 12px; font-weight: 800; color: #4c2a86; cursor: pointer;
  transition: transform 120ms ease;
}
.wpz-gift-banner-thanks:hover{ transform: translateY(-1px); }
.wpz-gift-banner-thanks.is-thanked{ opacity: 0.75; pointer-events: none; }

/* Gift icon animation — the present shakes like it wants to be opened */
@keyframes wpzGiftShake{
  0%, 84%       { transform: rotate(0) scale(1); }
  86%           { transform: rotate(-14deg) scale(1.12); }
  88%           { transform: rotate(12deg) scale(1.12); }
  90%           { transform: rotate(-10deg) scale(1.1); }
  92%           { transform: rotate(8deg) scale(1.08); }
  94%           { transform: rotate(-5deg) scale(1.05); }
  96%           { transform: rotate(3deg) scale(1.02); }
  98%, 100%     { transform: rotate(0) scale(1); }
}
.wpz-gift-banner-icon{
  display: inline-block;
  animation: wpzGiftShake 2.6s ease-in-out infinite;
  transform-origin: 50% 85%;
}

/* VIP gift takeover — royal purple flavor of the announcement modal */
.wpz-announce-modal.is-vipgift .wpz-announce-card{
  border-color: rgba(166, 108, 255, 0.55) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 40px rgba(140, 90, 220, 0.35) !important;
}
.wpz-announce-modal.is-vipgift .wpz-announce-eyebrow{ color: #a66cff !important; }

/* Mega VIP gift (50+ community VIPs) — absolutely celebratory takeover. */
.wpz-announce-modal.is-vipgift-mega .wpz-announce-card{
  width: min(620px, calc(100vw - 32px)) !important;
  padding: 34px 30px 26px !important;
  border-color: rgba(197, 166, 255, 0.75) !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(140, 90, 220, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
  animation: wpzGiftCardIn 680ms cubic-bezier(0.34, 1.56, 0.64, 1), wpzMegaGiftPulse 2.4s ease-in-out infinite 700ms;
}
@keyframes wpzMegaGiftPulse{
  0%, 100%{ box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55), 0 0 60px rgba(140, 90, 220, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
  50%    { box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55), 0 0 90px rgba(166, 108, 255, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
}
.wpz-announce-modal.is-vipgift-mega .wpz-announce-eyebrow{
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  padding: 6px 18px !important;
  background: linear-gradient(135deg, rgba(166, 108, 255, 0.35), rgba(140, 90, 220, 0.25)) !important;
  border-color: rgba(197, 166, 255, 0.6) !important;
  color: #f2e8ff !important;
}
.wpz-announce-modal.is-vipgift-mega .wpz-announce-title{
  font-size: clamp(22px, 4.5vw, 32px) !important;
  animation: wpzGiftTitleShine 3.2s ease-in-out infinite, wpzMegaTitlePulse 1.8s ease-in-out infinite alternate;
}
@keyframes wpzMegaTitlePulse{
  from{ filter: drop-shadow(0 0 10px rgba(166, 108, 255, 0.35)); }
  to  { filter: drop-shadow(0 0 26px rgba(166, 108, 255, 0.7)); }
}
.wpz-announce-modal.is-vipgift-mega .wpz-champagne-bottle.is-mega{
  font-size: 64px;
  top: 8px;
  left: 14px;
  filter: drop-shadow(0 6px 22px rgba(166, 108, 255, 0.65));
  animation: wpzMegaTrophyBob 2.6s ease-in-out infinite;
}
@keyframes wpzMegaTrophyBob{
  0%, 100%{ transform: translateY(0) rotate(0deg) scale(1); }
  50%    { transform: translateY(-8px) rotate(4deg) scale(1.08); }
}
.wpz-announce-modal.is-vipgift-mega .wpz-champagne-confetti.is-mega{
  animation-name: wpzMegaGiftConfetti;
}
@keyframes wpzMegaGiftConfetti{
  0%  { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  6%  { opacity: 1; }
  100%{ transform: translate(var(--confetti-drift, 0px), -700px) rotate(360deg); opacity: 0; }
}
.wpz-gift-pop-chips.is-mega{ max-width: 520px; }
.wpz-gift-pop-chips.is-mega .wpz-gift-chip.is-pop{
  font-size: 12.5px;
  padding: 4px 12px 4px 4px;
}
.wpz-gift-pop-chips.is-mega .wpz-gift-chip.is-pop .wpz-gift-chip-av{
  width: 20px; height: 20px; font-size: 10px;
}

/* VIP gift takeover — premium purple celebration */
.wpz-announce-modal.is-vipgift .wpz-announce-card{
  background:
    radial-gradient(circle at 20% 0%, rgba(140, 90, 220, 0.28), transparent 55%),
    radial-gradient(circle at 85% 100%, rgba(166, 108, 255, 0.22), transparent 50%),
    linear-gradient(160deg, #221a38 0%, #171225 100%) !important;
  border: 1px solid rgba(166, 108, 255, 0.6) !important;
  animation: wpzGiftCardIn 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wpzGiftCardIn{
  0%   { transform: scale(0.86) translateY(18px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.wpz-announce-modal.is-vipgift .wpz-announce-eyebrow{
  display: inline-flex; align-self: center;
  background: rgba(166, 108, 255, 0.18) !important;
  border: 1px solid rgba(166, 108, 255, 0.45) !important;
  border-radius: 999px; padding: 5px 16px !important;
  color: #cfb3ff !important; letter-spacing: 0.14em;
}
.wpz-announce-modal.is-vipgift .wpz-announce-title{
  background: linear-gradient(115deg, #f2e8ff 15%, #b98aff 50%, #f2e8ff 85%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
  animation: wpzGiftTitleShine 3.2s ease-in-out infinite;
}
@keyframes wpzGiftTitleShine{
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}
.wpz-gift-pop-welcome{ font-size: 15px; font-weight: 800; color: #cfb3ff; margin-bottom: 10px; }
.wpz-gift-pop-chips{ display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.wpz-gift-chip.is-pop{
  font-size: 11.5px; padding: 3px 10px 3px 3px;
  background: rgba(166, 108, 255, 0.16);
  border-color: rgba(166, 108, 255, 0.45);
  color: #e9dcff;
  animation: wpzGiftCardIn 480ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.wpz-gift-pop-chips .wpz-gift-chip.is-pop:nth-child(1){ animation-delay: .10s; }
.wpz-gift-pop-chips .wpz-gift-chip.is-pop:nth-child(2){ animation-delay: .18s; }
.wpz-gift-pop-chips .wpz-gift-chip.is-pop:nth-child(3){ animation-delay: .26s; }
.wpz-gift-pop-chips .wpz-gift-chip.is-pop:nth-child(4){ animation-delay: .34s; }
.wpz-gift-pop-chips .wpz-gift-chip.is-pop:nth-child(5){ animation-delay: .42s; }
.wpz-gift-pop-chips .wpz-gift-chip.is-pop:nth-child(6){ animation-delay: .50s; }
.wpz-gift-pop-chips .wpz-gift-chip.is-pop:nth-child(7){ animation-delay: .58s; }
.wpz-gift-pop-chips .wpz-gift-chip.is-pop:nth-child(8){ animation-delay: .66s; }
.wpz-gift-pop-chips .wpz-gift-chip.is-pop:nth-child(n+9){ animation-delay: .74s; }
.wpz-gift-chip.is-pop .wpz-gift-chip-av{ width: 17px; height: 17px; font-size: 9px; }
.wpz-gift-pop-perks{ margin-top: 10px; font-size: 12px; color: #b493e8; font-weight: 600; }
.wpz-gift-pop-welcome{ text-align: center; }
.wpz-gift-chip.is-count{ padding: 4px 13px; }
/* Keep the gifter as the star: recipients stay one compact block */
.wpz-gift-pop-chips{ max-width: 560px; margin: 0 auto; }

/* Thanks strip: proper chips + soft fade instead of hard-clipped names */
.wpz-thanks-window-list{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
  gap: 5px !important;
}
.wpz-thanks-window-item{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(90, 167, 255, 0.25);
}

/* "Live" treatment for the thanks strip */
.wpz-thanks-live-dot{
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; margin-right: 6px; flex: 0 0 auto;
  background: radial-gradient(circle at 35% 30%, #ff9d9d, #e2333d 70%);
  animation: wpzPresencePulse 2s ease-out infinite;
}
.wpz-thanks-count{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px; margin-left: 7px;
  border-radius: 999px; font-size: 10.5px; font-weight: 900;
  background: linear-gradient(135deg, #ff6b6b, #e2333d);
  color: #fff;
}
.wpz-thanks-count.is-bump{ animation: wpzThanksBump 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes wpzThanksBump{
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.wpz-thanks-beat{ display: inline-block; animation: wpzThanksHeartBeat 1.8s ease-in-out infinite; }
@keyframes wpzThanksHeartBeat{
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.25); }
  24%      { transform: scale(1); }
  36%      { transform: scale(1.18); }
  48%      { transform: scale(1); }
}
/* Soft breathing glow while the window is live */
.wpz-thanks-window{ animation: wpzChampagneBannerIn 380ms cubic-bezier(0.34, 1.56, 0.64, 1), wpzThanksGlow 3.2s ease-in-out infinite; }
@keyframes wpzThanksGlow{
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 10px rgba(35, 68, 105, 0.12); }
  50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 16px rgba(226, 51, 61, 0.28); }
}

/* Composer gift button — first circle of the right-side cluster
   (sits just left of the photo / GIF / emoji / Send group). */
.gift-vip-button{
  background: linear-gradient(135deg, #ffe9b8, #ffd47e) !important;
  border: 1px solid rgba(216, 164, 49, 0.45) !important;
}
.gift-vip-button:hover{ transform: translateY(-1px); }

/* Idle "jingle": at random intervals the gift button rocks with a soft
   gold glow while tiny sparkles pop off it — a gentle nudge to gift VIP.
   Fired by client.js; skipped on hover / hidden tab / reduced motion. */
.gift-vip-button.is-jingling{
  animation: wpzGiftWiggle 1.1s ease-in-out, wpzGiftGlow 1.1s ease-out;
  transform-origin: 50% 50%;
}
@keyframes wpzGiftWiggle{
  0%, 100%{ transform: rotate(0); }
  15%{ transform: rotate(-11deg) translateY(-2px) scale(1.06); }
  32%{ transform: rotate(9deg); }
  48%{ transform: rotate(-7deg); }
  64%{ transform: rotate(5deg); }
  80%{ transform: rotate(-3deg); }
}
@keyframes wpzGiftGlow{
  0%{ box-shadow: 0 0 0 0 rgba(255, 215, 120, 0.55); }
  100%{ box-shadow: 0 0 26px 12px rgba(255, 215, 120, 0); }
}
.wpz-gift-sparkle{
  position: fixed;
  z-index: 2147483399; /* above chat, under the image lightbox */
  pointer-events: none;
  animation: wpzGiftSpark 850ms ease-out forwards;
  will-change: transform, opacity;
}
@keyframes wpzGiftSpark{
  0%{ opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }
  25%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(var(--sx, 0px), var(--sy, -34px)) scale(1.15) rotate(70deg); }
}
@media (prefers-reduced-motion: reduce){
  .gift-vip-button.is-jingling{ animation: none; }
  .wpz-gift-sparkle{ display: none !important; }
}

/* ── Floating Operator Panel ──────────────────────────────────────────────
   #adminPanel keeps its .admin-panel class (renderAdminPanel() still gates
   it), so these rules are written at .admin-panel.op-window specificity to
   win over the docked sidebar styling above. */
.admin-panel.op-window {
  position: fixed;
  /* Baseline just under this app's stacking floor (state.maxZIndex starts at
     2147483015); raise() bumps it above siblings on click. */
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface-strong);
  border: 1px solid rgba(79, 149, 216, 0.22);
  box-shadow: 0 24px 60px rgba(23, 51, 77, 0.28);
}
.op-window-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  cursor: move;
  user-select: none;
  border-bottom: 1px solid rgba(79, 149, 216, 0.16);
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(238, 246, 255, 0.94));
  flex: 0 0 auto;
}
.op-window-title { font-size: 12.5px; font-weight: 800; color: #17334d; letter-spacing: 0.01em; }
.op-window-actions { display: flex; gap: 6px; }
.op-window-btn {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(79, 149, 216, 0.22);
  background: rgba(255, 255, 255, 0.8);
  color: #35618c;
  font-size: 11px; font-weight: 800;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.op-window-btn:hover { background: #dbeaff; color: #17334d; }
.op-window-body { display: flex; flex: 1 1 auto; min-height: 0; }
.op-nav {
  flex: 0 0 148px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 8px;
  overflow-y: auto;
  border-right: 1px solid rgba(79, 149, 216, 0.14);
  background: rgba(240, 247, 255, 0.55);
}
.op-nav-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #35618c;
  font-size: 12px; font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 130ms ease, color 130ms ease;
}
.op-nav-item:hover { background: rgba(219, 234, 255, 0.9); color: #17334d; }
.op-nav-item.is-active {
  background: linear-gradient(135deg, #dbeaff, #bcd9ff);
  border-color: rgba(79, 149, 216, 0.34);
  color: #12334f;
}
.op-nav-icon { font-size: 11px; opacity: 0.8; }
.op-nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-nav-badge {
  flex: 0 0 auto;
  min-width: 17px; padding: 1px 5px;
  border-radius: 999px;
  background: #e5484d; color: #fff;
  font-size: 10px; font-weight: 800; text-align: center;
}
.op-pane { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 12px 14px; }
.op-section { display: block; }
.op-section.hidden { display: none; }
.op-window-grip {
  position: absolute; right: 0; bottom: 0;
  width: 16px; height: 16px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 46%, rgba(79, 149, 216, 0.5) 46%, rgba(79, 149, 216, 0.5) 54%, transparent 54%),
    linear-gradient(135deg, transparent 70%, rgba(79, 149, 216, 0.5) 70%, rgba(79, 149, 216, 0.5) 78%, transparent 78%);
}
.admin-panel.op-window.is-minimized { height: auto !important; }
.admin-panel.op-window.is-minimized .op-window-body,
.admin-panel.op-window.is-minimized .op-window-grip { display: none; }
/* Launcher is a .main-menu-dd-link in the Main Menu dropdown and inherits
   that styling; it only needs to disappear for non-staff. */
.op-launcher.hidden { display: none !important; }

/* ── Bookings section (operator panel) ────────────────────────────────── */
.bk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bk-views { display: flex; gap: 6px; }
.bk-view-btn, .bk-new-btn, .bk-act, .bk-cal-nav, .bk-cal-today {
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(79,149,216,0.28); background: rgba(255,255,255,0.85);
  color: #35618c; font-size: 11.5px; font-weight: 700;
  transition: background 130ms ease, color 130ms ease, border-color 130ms ease;
}
.bk-view-btn:hover, .bk-new-btn:hover, .bk-act:hover, .bk-cal-nav:hover, .bk-cal-today:hover { background: #dbeaff; color: #17334d; }
.bk-view-btn.is-active { background: linear-gradient(135deg,#dbeaff,#bcd9ff); border-color: rgba(79,149,216,0.45); color: #12334f; }
.bk-act-primary { background: linear-gradient(135deg,#6aa9ff,#4a93ff); border-color: #4a93ff; color: #fff; }
.bk-act-primary:hover { background: linear-gradient(135deg,#4a93ff,#2f7ff0); color: #fff; }
.bk-act-danger { color: #b4242a; border-color: rgba(180,36,42,0.32); }
.bk-act-danger:hover { background: #ffe7e7; color: #8d1a1f; }
.bk-error { padding: 8px 12px; border-radius: 10px; background: #ffe7e7; color: #8d1a1f; font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.bk-empty { font-size: 12px; color: #71869b; padding: 10px 2px; }

.bk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; }
.bk-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px;
  background: rgba(240,247,255,0.75); border: 1px solid rgba(79,149,216,0.16); }
.bk-tile-value { font-size: 18px; font-weight: 900; color: #17334d; }
.bk-tile-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #71869b; }
.bk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-col-title { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #71869b; }
.bk-mini { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; margin-bottom: 6px;
  padding: 8px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(79,149,216,0.16); background: rgba(255,255,255,0.8); }
.bk-mini:hover { background: #eef6ff; }
.bk-mini-date { font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #4a7fb8; }
.bk-mini-name { font-size: 12.5px; font-weight: 800; color: #17334d; }
.bk-mini-meta { font-size: 10.5px; color: #71869b; }
.bk-mini-warn { border-color: rgba(216,134,44,0.35); background: rgba(255,246,230,0.85); }
.bk-mini-warn:hover { background: #fff0d9; }

.bk-filters { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.bk-input { padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(79,149,216,0.22);
  background: rgba(255,255,255,0.9); color: #17334d; font-size: 12px; font-family: inherit; }
.bk-input:focus { outline: 2px solid rgba(79,149,216,0.4); outline-offset: -1px; }
.bk-input.has-error { border-color: #d2434a; }
.bk-field-error { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700; color: #b4242a; }
#bkSearch { flex: 1 1 200px; min-width: 140px; }
.bk-check { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #35618c; cursor: pointer; }

.bk-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bk-table th { text-align: left; padding: 6px 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: #71869b; border-bottom: 1px solid rgba(79,149,216,0.18); }
.bk-table td { padding: 7px 8px; border-bottom: 1px solid rgba(79,149,216,0.1); color: #17334d; }
.bk-table tbody tr { cursor: pointer; }
.bk-table tbody tr:hover { background: rgba(219,234,255,0.55); }
.bk-nowrap { white-space: nowrap; }
.bk-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800;
  letter-spacing: 0.03em; text-transform: uppercase; }
.bk-status-new { background: #dbeaff; color: #1d4a85; }
.bk-status-hold { background: #ffeccc; color: #8c5a10; }
.bk-status-confirmed { background: #d6f5e0; color: #1c6b3c; }
.bk-status-done { background: #e6e8eb; color: #4f5c6b; }
.bk-status-declined { background: #ffe0e0; color: #a32229; }
.bk-status-cancelled { background: #e6e8eb; color: #6b7480; }

.bk-cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bk-cal-title { flex: 1 1 auto; font-size: 13px; font-weight: 800; color: #17334d; }
.bk-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.bk-cal-dow span { font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #71869b; text-align: center; }
.bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-cal-cell { min-height: 64px; padding: 4px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(79,149,216,0.14); background: rgba(255,255,255,0.7); }
.bk-cal-cell:hover { background: #eef6ff; }
.bk-cal-cell.is-empty { background: transparent; border-color: transparent; cursor: default; }
.bk-cal-cell.is-today { border-color: rgba(79,149,216,0.6); }
.bk-cal-cell.has-confirmed { background: rgba(214,245,224,0.5); }
.bk-cal-num { display: block; font-size: 10.5px; font-weight: 800; color: #4a7fb8; margin-bottom: 2px; }
.bk-chip { display: block; width: 100%; margin-bottom: 2px; padding: 2px 5px; border: 0; border-radius: 6px;
  font-size: 9.5px; font-weight: 800; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bk-drawer { position: fixed; inset: 0; z-index: 2147483200; display: flex; justify-content: flex-end;
  background: rgba(23,51,77,0.32); }
.bk-drawer-card { width: min(560px, 96vw); height: 100%; display: flex; flex-direction: column;
  background: var(--surface-strong); border-left: 1px solid rgba(79,149,216,0.22); box-shadow: -24px 0 60px rgba(23,51,77,0.28); }
.bk-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid rgba(79,149,216,0.16); }
.bk-drawer-title { display: block; margin-top: 4px; font-size: 15px; font-weight: 900; color: #17334d; }
.bk-drawer-sub { font-size: 11.5px; color: #71869b; }
.bk-drawer-close { width: 26px; height: 26px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(79,149,216,0.22); background: rgba(255,255,255,0.8); color: #35618c; font-weight: 800; }
.bk-drawer-close:hover { background: #dbeaff; }
.bk-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; }
.bk-group { margin-bottom: 16px; }
.bk-group-title { margin: 0 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #71869b; }
.bk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-field { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 700; color: #71869b; }
.bk-textarea { width: 100%; resize: vertical; }
.bk-public { margin-top: 8px; }
.bk-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.bk-history li { display: flex; gap: 8px; font-size: 11px; }
.bk-history-when { flex: 0 0 96px; color: #9aa9b8; font-variant-numeric: tabular-nums; }
.bk-history-what { color: #35618c; }
.bk-drawer-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid rgba(79,149,216,0.16); }
.bk-act-spacer { flex: 1 1 auto; }
/* New-booking dialog: a centred card rather than the edge drawer. */
.bk-new-card { width: min(560px, 96vw); height: auto; max-height: 92vh; margin: auto;
  border-radius: 18px; border: 1px solid rgba(79,149,216,0.22); box-shadow: 0 32px 80px rgba(23,51,77,0.3); }
#bkNewDrawer { align-items: center; justify-content: center; padding: 20px; }
.bk-field-wide { grid-column: 1 / -1; }
.bk-req { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: #b4242a; margin-left: 4px; }
/* ── Operator-panel launcher (admin channel header) ───────────────────────
   Borrows the site's aura technique — a conic gold gradient painted into the
   border via padding-box/border-box, driven by --wpz-aura-angle — so it reads
   as part of this codebase rather than a bolt-on.
   It is deliberately NOT the VIP aura: that ring signals status, and this is a
   control. The ring here turns slowly and the gear is the signature, waking up
   only on interaction. One flourish, not three. */
.room-operator-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, #fff9e8, #ffeec4) padding-box,
    conic-gradient(from var(--wpz-aura-angle),
      rgba(216, 164, 49, 0.25) 0%,
      rgba(255, 216, 115, 0.95) 14%,
      rgba(255, 247, 214, 1) 22%,
      rgba(247, 183, 51, 0.95) 32%,
      rgba(216, 164, 49, 0.25) 48%,
      rgba(216, 164, 49, 0.25) 62%,
      rgba(255, 216, 115, 0.8) 76%,
      rgba(255, 247, 214, 0.95) 84%,
      rgba(216, 164, 49, 0.25) 96%) border-box;
  color: #6b4a08; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 0 0 rgba(247, 183, 51, 0);
  animation: wpzVipAuraSpin 6s linear infinite, wpzOpBeacon 3.6s ease-in-out infinite;
  transition: transform 140ms ease, color 140ms ease, box-shadow 200ms ease;
}
/* A slow pulse so the eye finds it among the flat header badges. */
@keyframes wpzOpBeacon {
  0%, 100% { box-shadow: 0 0 0 rgba(247, 183, 51, 0), 0 2px 8px rgba(107, 74, 8, 0.08); }
  50%      { box-shadow: 0 0 14px rgba(247, 183, 51, 0.45), 0 2px 8px rgba(107, 74, 8, 0.12); }
}
.room-operator-btn .rop-gear {
  display: inline-block; font-size: 11px; line-height: 1;
  transition: transform 420ms cubic-bezier(0.34, 1.3, 0.64, 1);
}
.room-operator-btn:hover,
.room-operator-btn:focus-visible {
  transform: translateY(-1px);
  color: #4d3608;
  animation-duration: 2.4s, 3.6s;      /* ring quickens; pulse keeps its pace */
  box-shadow: 0 0 18px rgba(247, 183, 51, 0.55), 0 6px 14px rgba(107, 74, 8, 0.16);
}
/* The gear is the signature: it turns when you reach for the control. */
.room-operator-btn:hover .rop-gear,
.room-operator-btn:focus-visible .rop-gear { transform: rotate(180deg); }
.room-operator-btn:active { transform: translateY(0); }
.room-operator-btn:focus-visible { outline: 2px solid rgba(107, 74, 8, 0.55); outline-offset: 2px; }
.room-operator-btn.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .room-operator-btn { animation: none; }
  .room-operator-btn:hover, .room-operator-btn:focus-visible { animation: none; }
  .room-operator-btn .rop-gear { transition: none; }
  .room-operator-btn:hover .rop-gear, .room-operator-btn:focus-visible .rop-gear { transform: none; }
}
.wpz-xp-next { color: #4a7fb8; white-space: nowrap; }
/* Nav group headings — "Server" vs "Management". The rule sits above the
   heading so the band reads as starting there, not ending. */
.op-nav-group {
  padding: 6px 9px 3px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: #8ba3bd;
}
.op-nav-group.has-rule {
  margin-top: 8px; padding-top: 10px;
  border-top: 1px solid rgba(79, 149, 216, 0.18);
}
/* Floating-window composer: the 🎁 wears the same gold as the main one so
   the cluster reads identically in both places. */
.chan-window-gift-btn{
  background: linear-gradient(135deg, #ffe9b8, #ffd47e) !important;
  border: 1px solid rgba(216, 164, 49, 0.45) !important;
}
.chan-window-gift-btn:hover{ background: linear-gradient(135deg, #ffe0a0, #ffc961) !important; }
.chan-window-photo-btn.hidden{ display: none !important; }
/* Donor message counter — quiet until the cap is close. */
.wpz-donate-count{
  margin-top: 4px;
  text-align: right;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8ba3bd;
  font-variant-numeric: tabular-nums;
}
.wpz-donate-count.is-near{ color: #c9821f; }
/* Schedule popup: optional set time / city line and a ticket link. The row
   is a 4-column grid only when a link is present, so dates without one keep
   the original three-column layout. */
.td-event-meta {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #8ba3bd !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.td-event.has-link { grid-template-columns: 56px 1fr auto auto !important; }
.td-event-tickets {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(216, 164, 49, 0.5);
  background: linear-gradient(135deg, #ffe9a8, #f6c13c);
  color: #4d3608;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 140ms ease, transform 140ms ease;
}
.td-event-tickets:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ── Room action bar hierarchy ────────────────────────────────────────────
   Four identical pills read as a row of labels, not actions. "Create
   channel" is the primary move here, so it carries the accent; voice and
   video are secondary but live; Channels is a nav affordance with a count
   and stays quietest. Boldness spent in one place, not four. */
#vipCreateCallBtn.vip-call-join-btn{
  background: linear-gradient(135deg, #6aa9ff, #3f86f5) !important;
  border-color: #3f86f5 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(63, 134, 245, 0.35) !important;
}
#vipCreateCallBtn.vip-call-join-btn:hover{
  background: linear-gradient(135deg, #7db6ff, #2f79ef) !important;
  box-shadow: 0 6px 16px rgba(63, 134, 245, 0.45) !important;
}
#vipVoiceChatBtn.vip-call-join-btn,
#vipVideoChatBtn.vip-call-join-btn{
  border-color: rgba(63, 134, 245, 0.4) !important;
  color: #1a4f9b !important;
}
#vipVoiceChatBtn.vip-call-join-btn:hover,
#vipVideoChatBtn.vip-call-join-btn:hover{
  border-color: rgba(63, 134, 245, 0.7) !important;
}

/* ── VIP room action bar: gold ────────────────────────────────────────────
   This bar lives in the ⭐ VIP room, so it wears the room's gold rather than
   the generic blue accent. Same hierarchy: Create channel leads. */
#vipCreateCallBtn.vip-call-join-btn{
  background: linear-gradient(135deg, #ffe9a8, #f3a93c) !important;
  border-color: rgba(216, 164, 49, 0.65) !important;
  color: #4d3608 !important;
  box-shadow: 0 3px 10px rgba(216, 134, 44, 0.35) !important;
}
#vipCreateCallBtn.vip-call-join-btn:hover{
  background: linear-gradient(135deg, #fff0c2, #eb9a24) !important;
  box-shadow: 0 6px 16px rgba(216, 134, 44, 0.45) !important;
}
#vipVoiceChatBtn.vip-call-join-btn,
#vipVideoChatBtn.vip-call-join-btn{
  border-color: rgba(216, 164, 49, 0.45) !important;
  color: #6b4a08 !important;
}
#vipVoiceChatBtn.vip-call-join-btn:hover,
#vipVideoChatBtn.vip-call-join-btn:hover{
  border-color: rgba(216, 164, 49, 0.8) !important;
}

/* VIP room Send button — gold, scoped to body.wpz-room-vip so every other
   room keeps the blue accent. The hook is set in decorateVipRoomHeader(). */
body.wpz-room-vip .message-form button[type="submit"] {
  background: linear-gradient(135deg, #ffe9a8, #f3a93c) !important;
  border-color: rgba(216, 164, 49, 0.65) !important;
  color: #4d3608 !important;
  box-shadow: 0 3px 10px rgba(216, 134, 44, 0.32) !important;
}
body.wpz-room-vip .message-form button[type="submit"]:hover {
  background: linear-gradient(135deg, #fff0c2, #eb9a24) !important;
  box-shadow: 0 6px 16px rgba(216, 134, 44, 0.45) !important;
}

/* Prompts raised from the VIP room (Create channel) follow its gold. */
body.wpz-room-vip .wpz-confirm-btn.wpz-confirm-ok {
  background: linear-gradient(135deg, #ffe9a8, #f3a93c) !important;
  border-color: rgba(216, 164, 49, 0.65) !important;
  color: #4d3608 !important;
  box-shadow: 0 3px 10px rgba(216, 134, 44, 0.32) !important;
}
body.wpz-room-vip .wpz-confirm-btn.wpz-confirm-ok:hover {
  background: linear-gradient(135deg, #fff0c2, #eb9a24) !important;
}
body.wpz-room-vip .wpz-confirm-input:focus {
  outline-color: rgba(216, 164, 49, 0.75) !important;
  border-color: rgba(216, 164, 49, 0.6) !important;
}

/* ── VIP room header bar ──────────────────────────────────────────────────
   The buttons already carry the gold, so the bar itself stays restrained: a
   warm tint, a gold hairline, and a soft glow that fades inward. Enough to
   read as "you are in the VIP room" without competing with the CTA. */
body.wpz-room-vip .room-header {
  border-color: rgba(216, 164, 49, 0.42) !important;
  background:
    linear-gradient(90deg, rgba(255, 233, 168, 0.16), rgba(255, 233, 168, 0.04) 42%, rgba(255, 233, 168, 0.14)),
    var(--surface) !important;
  box-shadow: 0 0 0 1px rgba(216, 164, 49, 0.10) inset,
              0 8px 24px rgba(216, 134, 44, 0.12) !important;
}
body.wpz-room-vip .room-title { color: #6b4a08 !important; }
body.wpz-room-vip .room-avatar { color: #d8862c !important; border-color: rgba(216, 164, 49, 0.45) !important; }

/* ── Default room header bar ──────────────────────────────────────────────
   The blue counterpart to the VIP room's gold, same structure so the two
   read as siblings. body.wpz-room-vip .room-header is more specific, so the
   gold still wins in #vip without needing an :not() here. */
.room-header {
  border-color: rgba(79, 149, 216, 0.38) !important;
  background:
    linear-gradient(90deg, rgba(90, 167, 255, 0.14), rgba(90, 167, 255, 0.03) 42%, rgba(90, 167, 255, 0.12)),
    var(--surface) !important;
  box-shadow: 0 0 0 1px rgba(79, 149, 216, 0.10) inset,
              0 8px 24px rgba(79, 149, 216, 0.12) !important;
}
.room-avatar { color: #2f6fae !important; }

/* ── Recent-supporters strip ──────────────────────────────────────────────
   Third sibling of the room-header bars, in the donation accent (rose)
   rather than blue or gold — it belongs to the support flow, not a room. */
.topbar-recent-donations{
  border: 1px solid rgba(79, 149, 216, 0.38) !important;
  background:
    linear-gradient(90deg, rgba(90, 167, 255, 0.14), rgba(90, 167, 255, 0.03) 45%, rgba(90, 167, 255, 0.11)),
    rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(79, 149, 216, 0.08) inset,
              0 6px 18px rgba(79, 149, 216, 0.12) !important;
}
.topbar-recent-donations-label{ color: #2f6fae !important; }

/* Channels menu belongs to the VIP room's action bar, so it wears the gold.
   Scoped to body.wpz-room-vip like the rest of the room's treatment. */
body.wpz-room-vip .vip-channels-item-join{
  background: linear-gradient(135deg, #ffe9a8, #f3a93c) !important;
  color: #4d3608 !important;
  box-shadow: 0 4px 12px rgba(216, 134, 44, 0.35) !important;
}
body.wpz-room-vip .vip-channels-menu{
  border-color: rgba(216, 164, 49, 0.4) !important;
}
body.wpz-room-vip .vip-channels-item:hover{
  border-color: rgba(216, 164, 49, 0.45) !important;
}
body.wpz-room-vip .vip-channels-item-count{ color: #a8781a !important; }

/* VIP call controls: gold, because the lounge is a VIP feature and the panel
   can be open in any room. Leave stays red — a destructive action must not
   blend into the row it sits in. */
.vip-call-controls .wpz-inbox-icon-btn{
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.85), rgba(255, 231, 176, 0.6)) !important;
  border-color: rgba(216, 164, 49, 0.55) !important;
  color: #6b4a08 !important;
  box-shadow: 0 4px 12px rgba(216, 134, 44, 0.18) !important;
}
.vip-call-controls .wpz-inbox-icon-btn:hover{
  background: linear-gradient(180deg, #ffeec4, #f6c13c) !important;
  color: #4d3608 !important;
}
#vipCallLeaveBtn.wpz-inbox-icon-btn{
  background: linear-gradient(180deg, rgba(255, 226, 226, 0.9), rgba(255, 199, 199, 0.7)) !important;
  border-color: rgba(196, 61, 61, 0.5) !important;
  color: #8d1a1f !important;
}
#vipCallLeaveBtn.wpz-inbox-icon-btn:hover{
  background: linear-gradient(180deg, #ffd1d1, #ffb0b0) !important;
}

/* ── New-VIP strip ────────────────────────────────────────────────────────
   Replaces the full-screen VIP takeover: signups arrive in bursts and a
   modal each made the app unusable. Rides the champagne banner's layout
   with a deeper gold and a star pulse. Stacked, max 3, 10s each. */
.wpz-champagne-banner.wpz-vip-banner{
  background: linear-gradient(135deg, rgba(255, 244, 209, 0.96), rgba(247, 210, 122, 0.92));
  border: 1px solid rgba(216, 164, 49, 0.7);
  box-shadow: 0 6px 22px rgba(216, 164, 49, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.wpz-champagne-banner.wpz-vip-banner .wpz-champagne-banner-text{
  color: #4d3608;
}
.wpz-champagne-banner.wpz-vip-banner .wpz-champagne-banner-icon{
  animation: wpzVipBannerStar 2.4s ease-in-out infinite;
}
.wpz-champagne-banner.wpz-vip-banner .wpz-champagne-banner-close{
  color: #8c6410;
}
@keyframes wpzVipBannerStar{
  0%, 100% { transform: scale(1) rotate(0deg); }
  45%      { transform: scale(1.18) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce){
  .wpz-champagne-banner.wpz-vip-banner .wpz-champagne-banner-icon{ animation: none; }
}

/* VIP strips live in a height-capped container. .message-log has
   min-height:240px and will not shrink to absorb them, so loose banners
   pushed the message composer off the bottom of the viewport once a few
   stacked up. Hard cap = the composer is always reachable. */
.wpz-vip-banner-stack{
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  max-height: 124px;
  overflow: hidden;
}

/* ── Donation takeover: more life around the card ────────────────────────
   Rotating gold aura, breathing glow and a heartbeat on the icon, so the
   €50+ moment reads as an event rather than a dialog. */
.wpz-announce-card{
  position: relative;
  animation: wpzAnnounceBreathe 3.2s ease-in-out infinite;
}
.wpz-announce-card::before{
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from var(--wpz-announce-angle, 0deg),
    rgba(216, 164, 49, 0.05) 0%,
    rgba(255, 216, 115, 0.85) 14%,
    rgba(255, 246, 214, 1) 22%,
    rgba(247, 183, 51, 0.9) 32%,
    rgba(216, 164, 49, 0.05) 48%,
    rgba(216, 164, 49, 0.05) 58%,
    rgba(255, 216, 115, 0.7) 74%,
    rgba(255, 246, 214, 0.9) 82%,
    rgba(216, 164, 49, 0.05) 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: wpzAnnounceSpin 5.5s linear infinite;
  pointer-events: none;
}
.wpz-announce-eyebrow{
  animation: wpzAnnouncePulse 2.1s ease-in-out infinite;
}
@property --wpz-announce-angle{ syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes wpzAnnounceSpin{ to { --wpz-announce-angle: 360deg; } }
@keyframes wpzAnnounceBreathe{
  0%, 100% { transform: scale(1);     box-shadow: 0 24px 60px rgba(216, 164, 49, 0.28); }
  50%      { transform: scale(1.012); box-shadow: 0 30px 78px rgba(216, 164, 49, 0.45); }
}
@keyframes wpzAnnouncePulse{
  0%, 100% { opacity: 1;    letter-spacing: 0.14em; }
  50%      { opacity: 0.75; letter-spacing: 0.19em; }
}
@media (prefers-reduced-motion: reduce){
  .wpz-announce-card,
  .wpz-announce-card::before,
  .wpz-announce-eyebrow{ animation: none; }
}

/* €50 support takeover: keep the celebration subordinate to the message.
   The champagne pop stays the loud one — this tier reads as tasteful. */
.wpz-champagne-fx.is-support-fx{
  z-index: 0;                 /* behind the card's copy, never over it */
}
.wpz-champagne-fx.is-support-fx .wpz-champagne-confetti{
  opacity: 0.55;
  filter: saturate(0.85);
}
/* Card content sits above the effects layer regardless of DOM order. */
.wpz-announce-card > *:not(.wpz-champagne-fx){
  position: relative;
  z-index: 1;
}
/* Softer aura for the support tier than the champagne treatment. */
.wpz-announce-modal .wpz-announce-card{
  animation-duration: 4.2s;
}

/* Recent-donations rail: it was pinned to max-width:400px, which clipped the
   third pill mid-word even on a wide topbar. Let it use the space that's
   actually there, with a floor so it doesn't collapse on narrow screens. */
.topbar-recent-donations{
  max-width: min(920px, 52vw) !important;
  min-width: 260px;
}
@media (max-width: 1100px){
  .topbar-recent-donations{ max-width: 46vw !important; }
}

/* ── Recent-donations rail: a little life, not a light show ───────────────
   The strip is rebuilt wholesale on each stats update, so the pills are
   staggered on entry (--i is set per item in client.js) and the newest one
   gets a single soft welcome pulse. A very slow sheen crosses the rail so
   it never looks frozen between donations. */
.topbar-recent-donations-item{
  animation: wpzDonorPillIn 420ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.topbar-recent-donations-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 149, 216, 0.22);
}
.topbar-recent-donations-item.is-newest{
  animation:
    wpzDonorPillIn 420ms cubic-bezier(0.34, 1.4, 0.64, 1) both,
    wpzDonorPillWelcome 1500ms ease-out 420ms 1;
}
@keyframes wpzDonorPillIn{
  from { opacity: 0; transform: translateX(-10px) scale(0.94); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes wpzDonorPillWelcome{
  0%   { box-shadow: 0 0 0 0 rgba(79, 149, 216, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(79, 149, 216, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 149, 216, 0); }
}
/* Slow sheen across the rail itself. */
.topbar-recent-donations::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.30) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: wpzDonorRailSheen 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wpzDonorRailSheen{
  0%, 62% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce){
  .topbar-recent-donations-item,
  .topbar-recent-donations-item.is-newest,
  .topbar-recent-donations::after{ animation: none; }
}

/* ── Top supporters board (month to date) ─────────────────────────────────
   Sits beside the Recent rail in the topbar and shares its shape, with a
   gold accent so the two read as ranking vs recency at a glance. Fed from
   stats.topDonors on the existing /api/donations/stats poll. */
.topbar-donor-board{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(560px, 30vw);
  margin: 0 8px 0 0;
  padding: 6px 14px;
  border-radius: 999px;
  min-height: 34px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(216, 164, 49, 0.16), rgba(216, 164, 49, 0.04) 45%, rgba(216, 164, 49, 0.13)),
    rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(216, 164, 49, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
              0 6px 18px rgba(216, 164, 49, 0.12);
}
.topbar-donor-board.hidden{ display: none; }
.topbar-donor-board-label{
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8c6410;
}
.topbar-donor-board-track{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
}
.topbar-donor-board-item{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(216, 164, 49, 0.3);
  font-size: 12px;
  font-weight: 700;
  color: #4d3608;
  white-space: nowrap;
  animation: wpzDonorPillIn 420ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.topbar-donor-board-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(216, 164, 49, 0.28);
}
.topbar-donor-board-item .rank{ font-size: 12px; }
.topbar-donor-board-item .total{ color: #8c6410; font-size: 10.5px; font-weight: 800; }
/* The leader gets a slow gold shimmer — the only always-on motion here. */
.topbar-donor-board-item:first-child{
  background: linear-gradient(120deg, rgba(255, 246, 214, 0.95), rgba(247, 210, 122, 0.9));
  border-color: rgba(216, 164, 49, 0.55);
  animation:
    wpzDonorPillIn 420ms cubic-bezier(0.34, 1.4, 0.64, 1) both,
    wpzDonorLeadGlow 3.6s ease-in-out 500ms infinite;
}
@keyframes wpzDonorLeadGlow{
  0%, 100% { box-shadow: 0 0 0 0 rgba(216, 164, 49, 0.0); }
  50%      { box-shadow: 0 0 12px 0 rgba(216, 164, 49, 0.45); }
}
@media (max-width: 1100px){
  .topbar-donor-board{ max-width: 34vw; }
}
@media (prefers-reduced-motion: reduce){
  .topbar-donor-board-item,
  .topbar-donor-board-item:first-child{ animation: none; }
}

/* Rail + board share one flex row in the dock — budget the width between
   them so neither pushes the other out on narrower screens. */
.support-bar-dock .topbar-recent-donations{
  flex: 1 1 auto;
  max-width: min(760px, 44vw) !important;
}
.support-bar-dock .topbar-donor-board{
  flex: 0 1 auto;
  max-width: min(520px, 28vw);
}
@media (max-width: 1200px){
  .support-bar-dock .topbar-recent-donations{ max-width: 40vw !important; }
  .support-bar-dock .topbar-donor-board{ max-width: 32vw; }
}

/* Four pills must fit without clipping: slightly wider budget, tighter
   padding, and no fade mask on the right (the mask was what made #4 look
   cut in half even when it technically fitted). */
.support-bar-dock .topbar-donor-board{
  max-width: min(600px, 34vw);
}
.topbar-donor-board-track{
  -webkit-mask-image: none;
          mask-image: none;
}
.topbar-donor-board-item{
  padding: 4px 9px;
  gap: 4px;
}
.topbar-donor-board-item .who{
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 92px;
}
@media (max-width: 1200px){
  .support-bar-dock .topbar-donor-board{ max-width: 36vw; }
  .topbar-donor-board-item .who{ max-width: 72px; }
}

/* The board sizes to its four pills and never clips; the RECENT rail takes
   whatever is left and fades its overflow, which it is already designed to
   do. Previously both competed for a share and #4 lost below ~1500px. */
.support-bar-dock .topbar-donor-board{
  flex: 0 0 auto;
  max-width: none;
}
.support-bar-dock .topbar-recent-donations{
  flex: 1 1 0;
  min-width: 180px;
  max-width: none !important;
}

/* ── Medal auras ─────────────────────────────────────────────────────────
   A rotating metallic ring around each podium pill — gold, silver, bronze —
   so the top three read as a podium at a glance. #4 stays plain on purpose,
   which is what makes the medals feel earned. */
@property --wpz-medal-angle{ syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.topbar-donor-board-item{ position: relative; isolation: isolate; }
.topbar-donor-board-item:nth-child(-n+3)::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: wpzMedalSpin 4.2s linear infinite;
  pointer-events: none;
  z-index: -1;
}
.topbar-donor-board-item:nth-child(1)::before{
  background: conic-gradient(from var(--wpz-medal-angle),
    rgba(216,164,49,0.05) 0%, rgba(255,216,115,0.95) 12%, rgba(255,250,225,1) 20%,
    rgba(247,183,51,0.95) 30%, rgba(216,164,49,0.05) 46%, rgba(216,164,49,0.05) 56%,
    rgba(255,216,115,0.8) 72%, rgba(255,250,225,0.95) 80%, rgba(216,164,49,0.05) 94%);
}
.topbar-donor-board-item:nth-child(2)::before{
  background: conic-gradient(from var(--wpz-medal-angle),
    rgba(170,178,189,0.05) 0%, rgba(214,222,232,0.9) 14%, rgba(255,255,255,1) 22%,
    rgba(170,178,189,0.85) 32%, rgba(170,178,189,0.05) 50%, rgba(170,178,189,0.05) 60%,
    rgba(214,222,232,0.7) 76%, rgba(170,178,189,0.05) 96%);
  animation-duration: 5.4s;
}
.topbar-donor-board-item:nth-child(3)::before{
  background: conic-gradient(from var(--wpz-medal-angle),
    rgba(176,113,66,0.05) 0%, rgba(214,152,99,0.9) 14%, rgba(245,205,170,1) 22%,
    rgba(176,113,66,0.85) 32%, rgba(176,113,66,0.05) 50%, rgba(176,113,66,0.05) 60%,
    rgba(214,152,99,0.7) 76%, rgba(176,113,66,0.05) 96%);
  animation-duration: 6.4s;
}
@keyframes wpzMedalSpin{ to { --wpz-medal-angle: 360deg; } }
/* The medal emoji gets a slow tilt, strongest on gold. */
.topbar-donor-board-item:nth-child(-n+3) .rank{
  display: inline-block;
  animation: wpzMedalTilt 3.4s ease-in-out infinite;
}
.topbar-donor-board-item:nth-child(2) .rank{ animation-duration: 4.1s; }
.topbar-donor-board-item:nth-child(3) .rank{ animation-duration: 4.8s; }
@keyframes wpzMedalTilt{
  0%, 100% { transform: rotate(0deg) scale(1); }
  45%      { transform: rotate(-11deg) scale(1.13); }
}
@media (prefers-reduced-motion: reduce){
  .topbar-donor-board-item:nth-child(-n+3)::before,
  .topbar-donor-board-item:nth-child(-n+3) .rank{ animation: none; }
}

/* TOP leads, RECENT follows. Done with flex order rather than DOM order so
   relocateSupportBar() can re-parent both widgets (dock vs support stack)
   without the sequence depending on which one it appends first. */
.support-bar-dock .topbar-donor-board,
.support-stack .topbar-donor-board{ order: 0; }
.support-bar-dock .topbar-recent-donations,
.support-stack .topbar-recent-donations{ order: 1; }

/* The two rails split the row evenly and carry the same number of entries,
   so neither reads as the "main" one. flex-basis 0 with equal grow makes the
   split independent of their content widths. */
.support-bar-dock .topbar-donor-board,
.support-bar-dock .topbar-recent-donations{
  flex: 1 1 0 !important;
  min-width: 0;
  max-width: none !important;
}
/* Names shrink before the rail does, so four pills keep fitting as the
   viewport narrows. */
.topbar-donor-board-item .who{ max-width: clamp(56px, 6vw, 104px); }
.topbar-recent-donations-item > span:not(.avatar):not(.amount){
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: clamp(56px, 6vw, 104px);
}

/* Below ~1400px five pills no longer fit their half at full size, so compact
   them rather than letting the fifth slide under the fade. */
@media (max-width: 1400px){
  .topbar-recent-donations-item{
    padding: 3px 7px 3px 4px;
    gap: 4px;
    font-size: 11px;
  }
  .topbar-recent-donations-item .avatar{ width: 15px; height: 15px; font-size: 9px; }
  .topbar-recent-donations-item .amount{ font-size: 9.5px; }
  .topbar-recent-donations-item > span:not(.avatar):not(.amount){ max-width: 52px; }
  .topbar-recent-donations-label,
  .topbar-donor-board-label{ font-size: 9px; letter-spacing: 0.08em; }
  .topbar-donor-board-item{ padding: 3px 7px; font-size: 11px; }
  .topbar-donor-board-item .who{ max-width: 54px; }
  .topbar-donor-board-item .total{ font-size: 9.5px; }
}

/* Tighter tier: keeps all five visible in each rail down to laptop widths. */
@media (max-width: 1200px){
  .topbar-recent-donations-item,
  .topbar-donor-board-item{
    padding: 2px 5px;
    gap: 3px;
    font-size: 10px;
  }
  .topbar-recent-donations-item{ padding-left: 3px; }
  .topbar-recent-donations-item .avatar{ width: 13px; height: 13px; font-size: 8px; }
  .topbar-recent-donations-item .amount,
  .topbar-donor-board-item .total{ font-size: 9px; }
  .topbar-recent-donations-item > span:not(.avatar):not(.amount),
  .topbar-donor-board-item .who{ max-width: 42px; }
  .topbar-recent-donations-label,
  .topbar-donor-board-label{ font-size: 8px; letter-spacing: 0.05em; }
  .topbar-recent-donations,
  .topbar-donor-board{ padding: 5px 9px; gap: 7px; }
  .topbar-recent-donations-track,
  .topbar-donor-board-track{ gap: 4px; }
}

/* Centre the pill group in each rail so the leftover space sits evenly on
   both sides instead of pooling at the right end. `safe center` keeps the
   first pill reachable if the content ever does overflow — plain `center`
   would push it out of view on the left. */
.topbar-recent-donations-track,
.topbar-donor-board-track{
  justify-content: center;
  justify-content: safe center;
}

/* Newest donation: a slow blue ring, the counterpart to the gold one on the
   #1 supporter. Deliberately calmer — this marks "just happened", not "won". */
.topbar-recent-donations-item{ position: relative; isolation: isolate; }
.topbar-recent-donations-item.is-newest::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--wpz-medal-angle),
    rgba(79,149,216,0.04) 0%,
    rgba(140,196,255,0.85) 15%,
    rgba(226,242,255,1) 23%,
    rgba(79,149,216,0.75) 33%,
    rgba(79,149,216,0.04) 52%,
    rgba(79,149,216,0.04) 62%,
    rgba(140,196,255,0.6) 78%,
    rgba(79,149,216,0.04) 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: wpzMedalSpin 7s linear infinite;
  pointer-events: none;
  z-index: -1;
}
/* Its avatar breathes gently so the eye lands on it even mid-scan. */
.topbar-recent-donations-item.is-newest .avatar{
  animation: wpzNewestAvatar 2.8s ease-in-out infinite;
}
@keyframes wpzNewestAvatar{
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(79,149,216,0.0); }
  50%      { transform: scale(1.08); box-shadow: 0 0 8px 0 rgba(79,149,216,0.55); }
}
@media (prefers-reduced-motion: reduce){
  .topbar-recent-donations-item.is-newest::before,
  .topbar-recent-donations-item.is-newest .avatar{ animation: none; }
}

/* ── Rails: one notch smaller ─────────────────────────────────────────────
   Same layout, a little less presence in the topbar. Roughly 15% off the
   vertical footprint; the extra horizontal slack also gives the five pills
   more breathing room before the compaction tiers kick in. */
.topbar-recent-donations,
.topbar-donor-board{
  min-height: 29px;
  padding: 4px 12px;
  gap: 8px;
}
.topbar-recent-donations-item,
.topbar-donor-board-item{
  padding: 3px 8px;
  font-size: 11px;
  gap: 4px;
}
.topbar-recent-donations-item{ padding-left: 4px; }
.topbar-recent-donations-item .avatar{
  width: 16px;
  height: 16px;
  font-size: 9px;
}
.topbar-recent-donations-item .amount,
.topbar-donor-board-item .total{ font-size: 9.5px; }
.topbar-recent-donations-label,
.topbar-donor-board-label{ font-size: 9px; }
.topbar-recent-donations-track,
.topbar-donor-board-track{ gap: 5px; }

/* Both rails must be the same height. The board ran ~4px taller because the
   medal emoji (🥇) has a bigger line box than the plain avatar circle. */
.topbar-recent-donations,
.topbar-donor-board{
  height: 30px;
  min-height: 30px;
  box-sizing: border-box;
}
.topbar-donor-board-item,
.topbar-recent-donations-item{
  line-height: 1.15;
}
.topbar-donor-board-item .rank{
  font-size: 11px;
  line-height: 1;
}

/* Re-assert the compaction tiers: they appear earlier in this file than the
   size reduction above, so without repeating them the base sizes would win
   at narrow widths and the fifth pill would clip again. */
@media (max-width: 1400px){
  .topbar-recent-donations-item,
  .topbar-donor-board-item{ padding: 3px 7px; font-size: 10.5px; gap: 3px; }
  .topbar-recent-donations-item{ padding-left: 3px; }
  .topbar-recent-donations-item .avatar{ width: 15px; height: 15px; font-size: 8.5px; }
  .topbar-recent-donations-item .amount,
  .topbar-donor-board-item .total{ font-size: 9px; }
  .topbar-recent-donations-item > span:not(.avatar):not(.amount),
  .topbar-donor-board-item .who{ max-width: 54px; }
}
@media (max-width: 1200px){
  .topbar-recent-donations-item,
  .topbar-donor-board-item{ padding: 2px 5px; font-size: 10px; gap: 3px; }
  .topbar-recent-donations-item{ padding-left: 3px; }
  .topbar-recent-donations-item .avatar{ width: 13px; height: 13px; font-size: 8px; }
  .topbar-recent-donations-item .amount,
  .topbar-donor-board-item .total{ font-size: 8.5px; }
  .topbar-recent-donations-item > span:not(.avatar):not(.amount),
  .topbar-donor-board-item .who{ max-width: 42px; }
  .topbar-recent-donations,
  .topbar-donor-board{ padding: 4px 8px; gap: 6px; }
  .topbar-recent-donations-track,
  .topbar-donor-board-track{ gap: 4px; }
}

/* Pull the TOP / RECENT label in toward the rounded left edge — it was
   sitting with the same 12px inset as the right side, which read as a gap. */
.topbar-recent-donations,
.topbar-donor-board{
  padding-left: 7px;
}
@media (max-width: 1200px){
  .topbar-recent-donations,
  .topbar-donor-board{ padding-left: 6px; }
}

/* Optical centring for the all-caps rail labels. They were already centred
   geometrically, but an uppercase-only string reserves descender space it
   never uses, so the glyphs read as sitting high. Collapsing the line box
   and nudging down by half a pixel lands them on the true optical centre. */
.topbar-recent-donations-label,
.topbar-donor-board-label{
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transform: translateY(0.5px);
}

/* Nudge the label right so it reads as centred within the rail's rounded
   left cap. The rail is 30px tall with a pill radius, so the cap is a 15px
   semicircle — starting the text at that radius clears the curve instead of
   crowding it. */
.topbar-recent-donations,
.topbar-donor-board{
  padding-left: 15px;
}
@media (max-width: 1200px){
  .topbar-recent-donations,
  .topbar-donor-board{ padding-left: 12px; }
}

/* Sit the label midway between the rail's left edge and the first pill,
   rather than tucked against the cap. The pill group stays centred in the
   track, so this just re-balances the space in front of it. */
.topbar-recent-donations,
.topbar-donor-board{
  padding-left: 34px;
}
@media (max-width: 1200px){
  .topbar-recent-donations,
  .topbar-donor-board{ padding-left: 22px; }
}

/* Gold aura around the VIP buy CTA — same rotating-ring treatment as the
   VIP storefront card, sized for a button. Purely decorative, so it sits
   behind the label and ignores pointer events. */
.vip-popup-buy:not(.is-gift){ position: relative; isolation: isolate; }
.vip-popup-buy:not(.is-gift)::before{
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from var(--wpz-vipcta-angle, 0deg),
    rgba(216,164,49,0.05) 0%, rgba(255,216,115,0.95) 12%, rgba(255,250,225,1) 20%,
    rgba(247,183,51,0.95) 30%, rgba(216,164,49,0.05) 46%, rgba(216,164,49,0.05) 56%,
    rgba(255,216,115,0.8) 72%, rgba(255,250,225,0.95) 80%, rgba(216,164,49,0.05) 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: wpzVipCtaSpin 5s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@property --wpz-vipcta-angle{ syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes wpzVipCtaSpin{ to { --wpz-vipcta-angle: 360deg; } }
@media (prefers-reduced-motion: reduce){
  .vip-popup-buy:not(.is-gift)::before{ animation: none; }
}

/* Community gifting softened for non-VIPs: a light blur plus reduced
   saturation, so the paid "Get VIP" CTA above it stays the visual priority.
   It stays clickable on purpose — the server lets guests gift anonymously
   (see openVipGiftDialog), so this is de-emphasis, not a lock. Sharpens on
   hover/focus to confirm it's still available. */
.vip-popup-buy.is-gift.is-locked{
  filter: blur(1.1px) saturate(0.75);
  opacity: 0.72;
  transition: filter 180ms ease, opacity 180ms ease;
}
.vip-popup-buy.is-gift.is-locked:hover,
.vip-popup-buy.is-gift.is-locked:focus-visible{
  filter: blur(0) saturate(1);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  .vip-popup-buy.is-gift.is-locked{ transition: none; }
}

/* "Say thanks" inside the header strip. The banner's button disappears with
   the 45s strip, so this is the durable affordance for the celebration's
   full window. Sized to sit inline in the room header without changing its
   height. */
.wpz-thanks-window-btn{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid rgba(216, 84, 110, 0.45);
  background: linear-gradient(135deg, #ff8fa3, #f2607d);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(216, 84, 110, 0.3);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.wpz-thanks-window-btn:hover:not(:disabled){
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(216, 84, 110, 0.42);
  filter: brightness(1.06);
}
.wpz-thanks-window-btn.is-thanked,
.wpz-thanks-window-btn:disabled{
  background: linear-gradient(135deg, #d9a3ae, #c58a99);
  border-color: rgba(216, 84, 110, 0.28);
  cursor: default;
  box-shadow: none;
  opacity: 0.85;
}
.wpz-thanks-window-btn[hidden]{ display: none; }
@media (prefers-reduced-motion: reduce){
  .wpz-thanks-window-btn{ transition: none; }
}

/* The celebration strip sat ~16px below the pinned bar: .main-column is a
   flex column with gap:10px and the banner added margin-top:6px on top of
   it. The pinned bar pulls itself tight with margin-top:-6px, so the strip
   read as detached by comparison. Match that treatment. */
.wpz-champagne-banner{
  margin-top: -4px;
}
.wpz-vip-banner-stack{
  margin-top: -4px;
}

/* The strip itself pulses each time the crowd grows, so the count landing
   reads as a shared moment rather than a silent number change. */
.wpz-thanks-window.is-crowd-pulse{
  animation: wpzThanksCrowdPulse 700ms ease-out;
}
@keyframes wpzThanksCrowdPulse{
  0%   { box-shadow: 0 0 0 0 rgba(242, 96, 125, 0.45); }
  60%  { box-shadow: 0 0 0 8px rgba(242, 96, 125, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 96, 125, 0); }
}
@media (prefers-reduced-motion: reduce){
  .wpz-thanks-window.is-crowd-pulse{ animation: none; }
}

/* System lines fade out at the end of their 40s life rather than vanishing. */
.message-row.is-system.is-expiring{
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 550ms ease, transform 550ms ease;
}
@media (prefers-reduced-motion: reduce){
  .message-row.is-system.is-expiring{ transition: none; }
}

/* In #vip the header also carries Create channel / Voice / Video / Channels,
   which squeezes the thanks strip. The Say-thanks button used to sit after
   the name list in DOM order, so it was the thing that got cut off — the one
   part that must stay usable. Reorder so shrinkage eats the chips (which
   already fade out gracefully) and the button is never clipped. */
.wpz-thanks-window-title{ order: 0; flex: 0 0 auto; }
.wpz-thanks-window-btn{ order: 1; flex: 0 0 auto; margin-left: 2px; }
.wpz-thanks-window-list{ order: 2; }
.wpz-thanks-window-more{ order: 3; flex: 0 0 auto; }
/* Never shrink below title + button, so the strip stays functional even in
   the busiest header. */
.wpz-thanks-window{ min-width: 0; }

/* Tightest headers: let the "Saying thanks" label itself give up space so
   the button still fits. The live dot and the count stay pinned — they're
   the information; the words are the decoration. */
.wpz-thanks-window-title{
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wpz-thanks-live-dot,
.wpz-thanks-count{ flex: 0 0 auto; }

/* Six pills per half needs a tighter pill than five did: names truncate
   earlier, padding and type step down. Applied at all widths because even
   1680 only leaves ~113px per pill once the label is accounted for. */
.topbar-recent-donations-item,
.topbar-donor-board-item{
  padding: 2px 6px;
  font-size: 10px;
  gap: 3px;
}
.topbar-recent-donations-item{ padding-left: 3px; }
.topbar-recent-donations-item .avatar{ width: 13px; height: 13px; font-size: 8px; }
.topbar-recent-donations-item .amount,
.topbar-donor-board-item .total{ font-size: 9px; }
.topbar-recent-donations-item > span:not(.avatar):not(.amount),
.topbar-donor-board-item .who{ max-width: clamp(34px, 3.4vw, 58px); }
.topbar-donor-board-item .rank{ font-size: 10px; }
.topbar-recent-donations-track,
.topbar-donor-board-track{ gap: 3px; }
.topbar-recent-donations,
.topbar-donor-board{ gap: 6px; padding-left: 20px; padding-right: 8px; }

/* Usernames stay full-size and un-truncated. The space comes from
   left-aligning the pill group instead of centring it — centring wasted
   equal margins on both sides, which is what forced the ellipsis. */
.topbar-recent-donations-track,
.topbar-donor-board-track{
  justify-content: flex-start;
}
.topbar-recent-donations-item,
.topbar-donor-board-item{
  font-size: 11px;
}
.topbar-recent-donations-item .amount,
.topbar-donor-board-item .total{ font-size: 9.5px; }
.topbar-donor-board-item .rank{ font-size: 11px; }
.topbar-recent-donations-item .avatar{ width: 15px; height: 15px; font-size: 8.5px; }
/* No ellipsis: show the whole name. */
.topbar-recent-donations-item > span:not(.avatar):not(.amount),
.topbar-donor-board-item .who{
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

/* Both rails are the same width, but RECENT's pills are narrower (no medal
   or #N prefix, shorter names), so left-aligning left a visible gap at its
   right end. Let the pills share the track instead: they grow to fill it,
   so each bar reads as evenly filled without shrinking any text. */
.topbar-recent-donations-item,
.topbar-donor-board-item{
  flex: 1 1 auto;
  justify-content: center;
}
.topbar-recent-donations-track,
.topbar-donor-board-track{
  justify-content: stretch;
}

/* ═══ Community events ═══════════════════════════════════════════════════ */

/* Floating click-me sprites (gift / golden penguin). */
.wpz-event-sprite{
  position: fixed;
  /* Above the Operator Panel window (2147483000) — spawning from its Events
     tab put the sprite BEHIND the panel, so it looked like nothing happened.
     Still below the toast stack (2147483647) so notifications win. */
  z-index: 2147483200;
  border: 0;
  background: transparent;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  animation: wpzEventPop 420ms cubic-bezier(0.34, 1.56, 0.64, 1), wpzEventBob 2.2s ease-in-out 420ms infinite;
  transition: transform 140ms ease;
}
.wpz-event-sprite:hover{ transform: scale(1.18); }
.wpz-event-sprite:disabled{ cursor: default; }
.wpz-event-sprite.is-leaving{
  animation: none;
  opacity: 0;
  transform: scale(0.4) translateY(-24px);
  transition: opacity 450ms ease, transform 450ms ease;
}
/* ⭐ 1 day of VIP — gold, and brighter than the penguin's shine so the two
   never read as the same drop at a glance. */
.wpz-event-vipday-glyph{
  display: inline-block;
  filter: drop-shadow(0 0 10px rgba(255, 199, 61, 0.95));
  animation: wpzVipDayShine 1.4s ease-in-out infinite;
}
@keyframes wpzVipDayShine{
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 199, 61, 0.65)) brightness(1); transform: rotate(-6deg); }
  50%      { filter: drop-shadow(0 0 20px rgba(255, 214, 102, 1)) brightness(1.3); transform: rotate(6deg); }
}
.wpz-event-penguin-glyph{
  display: inline-block;
  filter: sepia(1) saturate(3.4) hue-rotate(-12deg) brightness(1.15)
          drop-shadow(0 0 10px rgba(255, 205, 90, 0.85));
  animation: wpzPenguinShine 1.6s ease-in-out infinite;
}
@keyframes wpzEventPop{ from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes wpzEventBob{ 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes wpzPenguinShine{
  0%, 100% { filter: sepia(1) saturate(3.4) hue-rotate(-12deg) brightness(1.05) drop-shadow(0 0 6px rgba(255,205,90,0.6)); }
  50%      { filter: sepia(1) saturate(3.4) hue-rotate(-12deg) brightness(1.35) drop-shadow(0 0 16px rgba(255,205,90,1)); }
}

/* Trivia strip above the chat log. */
.wpz-trivia-strip{
  flex: 0 0 auto;
  margin: -4px 10px 4px;
  padding: 10px 14px 6px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(122, 90, 248, 0.14), rgba(90, 122, 255, 0.10)), rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(122, 90, 248, 0.35);
  box-shadow: 0 6px 18px rgba(90, 70, 200, 0.16);
  animation: wpzChampagneBannerIn 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wpz-trivia-strip.is-leaving{ opacity: 0; transform: translateY(-6px); transition: opacity 450ms ease, transform 450ms ease; }
.wpz-trivia-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wpz-trivia-tag{
  flex: 0 0 auto;
  font-size: 9px; font-weight: 900; letter-spacing: 0.1em;
  color: #fff; background: linear-gradient(135deg, #8b5af8, #5a7aff);
  border-radius: 999px; padding: 3px 9px;
}
.wpz-trivia-q{ flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 800; color: #2d2a55; }
.wpz-trivia-timer{ flex: 0 0 auto; font-size: 11px; font-weight: 800; color: #7a5af8; font-variant-numeric: tabular-nums; }
.wpz-trivia-options{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.wpz-trivia-opt{
  border: 1px solid rgba(122, 90, 248, 0.3);
  background: rgba(255, 255, 255, 0.9);
  color: #2d2a55;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 150ms;
}
.wpz-trivia-opt:hover:not(:disabled){ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(122, 90, 248, 0.25); }
.wpz-trivia-opt:disabled{ cursor: default; opacity: 0.75; }
.wpz-trivia-opt.is-picked{ outline: 2px solid rgba(122, 90, 248, 0.6); }
.wpz-trivia-opt.is-correct{ background: linear-gradient(135deg, #b7f5ce, #7fe3a6) !important; color: #0c4d26 !important; opacity: 1; }
.wpz-trivia-opt.is-wrong{ background: linear-gradient(135deg, #ffd2d2, #ffb0b0) !important; color: #6d1414 !important; opacity: 1; }
.wpz-trivia-bar{ height: 3px; border-radius: 2px; margin-top: 8px; background: rgba(122, 90, 248, 0.15); overflow: hidden; }
.wpz-trivia-bar i{
  display: block; height: 100%;
  background: linear-gradient(90deg, #8b5af8, #5a7aff);
  animation-name: wpzTriviaDrain; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes wpzTriviaDrain{ from { width: 100%; } to { width: 0%; } }

/* ── 🗳 Vote poll ────────────────────────────────────────────────────────
   Reuses .wpz-trivia-strip for the shell (so the #admin hide rule and the
   drain bar come for free) in teal rather than violet, because a poll has
   no right answer and shouldn't read as a quiz you can fail. */
.wpz-poll-strip{
  background: linear-gradient(160deg, rgba(0, 176, 185, 0.16), rgba(0, 140, 190, 0.10)), rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 176, 185, 0.38);
  box-shadow: 0 6px 18px rgba(0, 120, 140, 0.16);
}
.wpz-poll-tag{ background: linear-gradient(135deg, #00b0b9, #0090c8) !important; }
.wpz-poll-strip .wpz-trivia-timer{ color: #00808c; }
.wpz-poll-strip .wpz-trivia-bar{ background: rgba(0, 176, 185, 0.15); }
.wpz-poll-strip .wpz-trivia-bar i{ background: linear-gradient(90deg, #00b0b9, #0090c8); }
.wpz-poll-total{
  flex: 0 0 auto; font-size: 11px; font-weight: 800; color: #00808c;
  font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 200ms ease;
}
.wpz-poll-strip.is-voted .wpz-poll-total{ opacity: 1; }
/* One column: the bars are a chart, and a two-up grid makes lengths that
   sit side by side look comparable when they aren't on the same baseline. */
.wpz-poll-options{ display: grid; grid-template-columns: 1fr; gap: 6px; }
.wpz-poll-opt{
  position: relative;
  display: flex; align-items: center; gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 176, 185, 0.32);
  background: rgba(255, 255, 255, 0.9);
  color: #10404a;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px; font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.wpz-poll-opt:hover:not(:disabled){ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 176, 185, 0.28); }
.wpz-poll-opt:disabled{ cursor: default; }
.wpz-poll-strip.is-voted .wpz-poll-opt{ opacity: 1; }
.wpz-poll-opt.is-picked{ outline: 2px solid rgba(0, 176, 185, 0.75); font-weight: 900; }
/* The result bar sits BEHIND the label rather than being the button's own
   background, so the text keeps one constant contrast as the fill grows. */
.wpz-poll-fill{
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, rgba(0, 176, 185, 0.30), rgba(0, 144, 200, 0.20));
  transition: width 450ms cubic-bezier(0.34, 1.2, 0.64, 1);
  pointer-events: none;
}
.wpz-poll-label{ position: relative; flex: 1 1 auto; min-width: 0; }
.wpz-poll-pct{
  position: relative; flex: 0 0 auto;
  font-size: 11px; font-weight: 800; color: #00707c;
  font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity 250ms ease;
}
.wpz-poll-strip.is-voted .wpz-poll-pct{ opacity: 1; }

/* Spin dice in the tools cluster (next to Notifications / My profile).
   Compact on purpose: a full labelled pill in the main-menu row blew the
   row's width budget and wrapped the whole menu onto two lines. */
.wpz-spin-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(120, 168, 224, 0.3);
  background: rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  font-size: 15px;
  padding: 6px 11px;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.wpz-spin-btn:hover{ transform: translateY(-1px); }
.wpz-spin-btn.is-ready{
  border-color: rgba(216, 164, 49, 0.6);
  background: linear-gradient(135deg, #ffe9a8, #f6c13c);
  animation: wpzSpinReady 2.4s ease-in-out infinite;
}
@keyframes wpzSpinReady{
  0%, 100% { box-shadow: 0 0 0 0 rgba(216, 164, 49, 0); }
  50%      { box-shadow: 0 0 12px 2px rgba(216, 164, 49, 0.55); }
}

/* Spin modal. */
.wpz-spin-overlay{
  position: fixed; inset: 0; z-index: 100001;
  display: grid; place-items: center;
  background: rgba(14, 18, 28, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: wpzFadeIn 200ms ease-out;
}
.wpz-spin-card{
  position: relative;
  width: min(460px, calc(100vw - 40px));
  border-radius: 26px;
  padding: 22px 22px 26px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(240,248,255,0.94));
  border: 1px solid rgba(120, 168, 224, 0.3);
  box-shadow: 0 28px 64px rgba(8, 22, 39, 0.35);
}
.wpz-spin-title{ margin: 0 0 10px; font-size: 18px; font-weight: 900; color: #17334d; }
.wpz-spin-close{ position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font-size: 14px; cursor: pointer; color: #64748b; }
.wpz-spin-pointer{ font-size: 20px; line-height: 1; color: #d8a431; margin-bottom: -6px; position: relative; z-index: 2; text-shadow: 0 2px 4px rgba(0,0,0,0.25); }
.wpz-spin-wheel{
  position: relative;
  width: 330px; height: 330px;
  margin: 0 auto;
  border-radius: 50%;
  border: 5px solid #d8a431;
  box-shadow: 0 0 0 1px rgba(255, 233, 184, 0.35),
              0 12px 34px rgba(0, 0, 0, 0.45),
              inset 0 0 26px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
/* Thin gold separators at each slice boundary + a vignette for depth. Both
   are children of the disc, so they rotate with it. Assumes 8 slices (45°),
   which is the fixed wheel layout the server ships. */
.wpz-spin-wheel::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  /* --wpz-arc is set per-render from the real slice count (client.js), so
     adding or removing a prize can't leave the separators misaligned. */
  background: repeating-conic-gradient(from 0deg,
    transparent 0deg var(--wpz-arc-line, 44.5deg),
    rgba(255, 233, 184, 0.45) var(--wpz-arc-line, 44.5deg) var(--wpz-arc, 45deg));
  pointer-events: none;
}
.wpz-spin-wheel::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 52%, rgba(0, 0, 0, 0.30) 100%);
  pointer-events: none;
}
.wpz-spin-label{
  position: absolute;
  left: 50%; top: 50%;
  transform-origin: center;
  font-size: 13px; font-weight: 800; letter-spacing: 0.05em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  z-index: 1;
}
.wpz-spin-hub{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2c3850, #161b28 75%);
  color: #fff;
  display: grid; place-items: center;
  font-size: 22px;
  box-shadow: 0 0 0 3px #d8a431, 0 0 0 5px rgba(255, 233, 184, 0.25), 0 4px 12px rgba(0,0,0,0.5);
  z-index: 2;
}
.wpz-spin-go{
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  padding: 10px 42px;
  font-size: 14px; font-weight: 900; letter-spacing: 0.08em;
  color: #4a340a;
  background: linear-gradient(135deg, #ffe9a8, #f6c13c);
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(216, 164, 49, 0.4);
  transition: transform 140ms ease;
}
.wpz-spin-go:hover:not(:disabled){ transform: translateY(-1px); }
.wpz-spin-go:disabled{ opacity: 0.6; cursor: default; }
.wpz-spin-result{ margin-top: 12px; font-size: 14px; color: #17334d; }
@media (prefers-reduced-motion: reduce){
  .wpz-event-sprite, .wpz-event-penguin-glyph, .wpz-spin-btn.is-ready{ animation: none; }
}

/* The dice lives inside .main-menu-right, which is pointer-events:none
   (Book WPZ there is display-only) — every interactive child must opt back
   in, exactly as .vip-menu-wrap does. Without this the button rendered but
   swallowed no clicks. */
.wpz-spin-btn{
  pointer-events: auto !important;
  position: relative;
  z-index: 3;
}

/* ═══ Admin panel · Events tab ═══════════════════════════════════════════ */
.admin-events-head{
  font-size: 11px; font-weight: 900; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted, #64748b);
  margin: 10px 0 6px;
}
.admin-events-spawn{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.admin-events-spawn .theme-button{ padding: 8px 4px !important; font-size: 11px !important; font-weight: 700 !important; }
/* The VIP day is the odd one out in a 2-up grid and the biggest prize on the
   card — give it the full width and a gold tint so it reads as its own tier. */
.admin-spawn-vipday{
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(255, 199, 61, 0.22), rgba(255, 176, 32, 0.14)) !important;
  border-color: rgba(214, 158, 24, 0.55) !important;
  color: #6b4a05 !important;
}
html[data-theme="dark"] .admin-spawn-vipday{
  background: linear-gradient(135deg, rgba(255, 199, 61, 0.20), rgba(255, 176, 32, 0.10)) !important;
  color: #ffd76a !important;
}
.admin-events-note{
  margin-top: 6px; font-size: 11px; font-weight: 700;
  color: #1a7f4b;
}
.admin-events-note.is-error{ color: #b3261e; }
.admin-trivia-list{
  display: flex; flex-direction: column; gap: 4px;
  max-height: 260px; overflow-y: auto;
  font-size: 12px;
}
.admin-trivia-row{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border-radius: 10px;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.18);
}
.admin-trivia-row.is-disabled{ opacity: 0.5; }
.admin-trivia-row-text{ min-width: 0; }
.admin-trivia-row-q{
  font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-trivia-row-a{ font-size: 10.5px; color: var(--muted, #64748b); }
.admin-trivia-row-actions{ display: flex; gap: 4px; flex: 0 0 auto; }
.admin-trivia-row-actions .theme-button{ padding: 4px 8px !important; font-size: 10px !important; }
.admin-trivia-form{ margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.admin-trivia-form input[type="text"]{
  width: 100%; box-sizing: border-box;
  padding: 7px 9px; border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  font-size: 12px;
}
.admin-trivia-opts{ display: flex; flex-direction: column; gap: 4px; }
.admin-trivia-opts label{ display: flex; align-items: center; gap: 6px; }
.admin-trivia-opts input[type="radio"]{ flex: 0 0 auto; accent-color: #d8a431; }
.admin-trivia-form-actions{ display: flex; gap: 6px; }

/* Events tab: clear control + Double XP scheduler. */
.admin-events-clear{ margin-top: 6px; }
.admin-events-clear .theme-button{ width: 100%; padding: 7px 4px !important; font-size: 11px !important; font-weight: 700 !important; }
.admin-events-hint{ font-size: 10.5px; color: var(--muted, #64748b); margin-top: 4px; }
.admin-dxp-status{
  font-size: 12px; font-weight: 700; padding: 6px 9px; border-radius: 8px;
  background: rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.2);
}
.admin-dxp-status.is-live{
  background: linear-gradient(135deg, rgba(216,164,49,0.25), rgba(216,164,49,0.12));
  border-color: rgba(216, 164, 49, 0.5); color: #8c6410;
}
.admin-dxp-status.is-scheduled{ border-color: rgba(120, 168, 224, 0.4); }
/* Poll duration: three narrow spinners on one row. Fixed-width inputs so
   h/m/s line up instead of each sizing itself to its own value. */
.admin-poll-duration{ align-items: center; flex-wrap: wrap; gap: 8px; }
.admin-poll-duration-label{ font-weight: 700; opacity: 0.8; }
.admin-poll-duration label{ gap: 4px; }
.admin-poll-duration input{ width: 62px; text-align: center; }
.admin-dxp-fields{ display: flex; gap: 10px; margin-top: 6px; font-size: 11px; }
.admin-dxp-fields label{ display: inline-flex; align-items: center; gap: 5px; }
.admin-dxp-fields input{
  width: 62px; padding: 5px 7px; border-radius: 7px; font-size: 12px;
  border: 1px solid rgba(148, 163, 184, 0.3);
}
.admin-dxp-actions{ display: flex; gap: 6px; margin-top: 6px; }
.admin-dxp-actions .theme-button{ flex: 1; padding: 7px 4px !important; font-size: 11px !important; font-weight: 700 !important; }

#spinResetMsg{
  width: 100%; box-sizing: border-box; margin-top: 4px;
  padding: 6px 9px; border-radius: 8px; font-size: 11.5px;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

/* Discount win: the loudest moment the wheel can produce. */
.wpz-spin-card.is-jackpot{
  animation: wpzSpinJackpot 900ms ease-out 2;
  box-shadow: 0 0 0 2px rgba(216,164,49,0.6), 0 28px 70px rgba(216,164,49,0.35);
}
@keyframes wpzSpinJackpot{
  0%, 100% { transform: scale(1); }
  35%      { transform: scale(1.035); }
}
.wpz-spin-win{ display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wpz-spin-win-title{
  font-size: 20px; font-weight: 900; letter-spacing: -0.01em;
  background: linear-gradient(135deg, #ff8fa3, #f6c13c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: wpzSpinWinPulse 1.6s ease-in-out infinite;
}
@keyframes wpzSpinWinPulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.05); } }
.wpz-spin-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px; font-weight: 900; letter-spacing: 0.12em;
  padding: 9px 18px; border-radius: 12px; cursor: pointer;
  color: #4a340a;
  background: linear-gradient(135deg, #ffe9a8, #f6c13c);
  border: 2px dashed rgba(216,164,49,0.75);
  box-shadow: 0 8px 20px rgba(216,164,49,0.4);
  transition: transform 140ms ease;
}
.wpz-spin-code:hover{ transform: translateY(-1px) scale(1.02); }
.wpz-spin-code.is-copied{ background: linear-gradient(135deg, #b7f5ce, #7fe3a6); border-color: rgba(26,127,75,0.6); color: #0c4d26; }
.wpz-spin-win-sub{ font-size: 11.5px; color: var(--muted, #64748b); }
@media (prefers-reduced-motion: reduce){
  .wpz-spin-card.is-jackpot, .wpz-spin-win-title{ animation: none; }
}

/* T-shirt roulette — chat strip. */
.wpz-roulette-strip{
  flex: 0 0 auto;
  margin: -4px 10px 4px;
  padding: 10px 14px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(232,103,127,0.14), rgba(216,164,49,0.10)), rgba(255,255,255,0.85);
  border: 1px solid rgba(232, 103, 127, 0.4);
  box-shadow: 0 6px 18px rgba(200, 70, 100, 0.16);
  animation: wpzChampagneBannerIn 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wpz-roulette-strip.is-win{
  border-color: rgba(216,164,49,0.8);
  box-shadow: 0 0 0 2px rgba(216,164,49,0.5), 0 10px 30px rgba(216,164,49,0.4);
  animation: wpzSpinJackpot 900ms ease-out 2;
}
.wpz-roulette-strip.is-leaving{ opacity: 0; transition: opacity 450ms ease; }
.wpz-roulette-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wpz-roulette-tag{
  flex: 0 0 auto; font-size: 9px; font-weight: 900; letter-spacing: 0.1em;
  color: #fff; background: linear-gradient(135deg, #e8677f, #d8a431);
  border-radius: 999px; padding: 3px 9px;
}
.wpz-roulette-text{ flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 700; color: #17334d; }
.wpz-roulette-timer{ flex: 0 0 auto; font-size: 11px; font-weight: 800; color: #d8a431; font-variant-numeric: tabular-nums; }
.wpz-roulette-form{ display: flex; gap: 6px; align-items: center; }
.wpz-roulette-input{
  width: 120px; padding: 7px 10px; border-radius: 10px; font-size: 13px; font-weight: 700;
  border: 1px solid rgba(232, 103, 127, 0.35);
}
.wpz-roulette-go, .wpz-roulette-lucky{
  padding: 7px 14px; border-radius: 10px; font-size: 12px; font-weight: 800; cursor: pointer;
  border: 1px solid rgba(232, 103, 127, 0.35);
  background: linear-gradient(135deg, #ff8fa3, #f2607d); color: #fff;
}
.wpz-roulette-lucky{ background: rgba(255,255,255,0.85); color: #b3455f; }
.wpz-roulette-go:disabled, .wpz-roulette-lucky:disabled{ opacity: 0.55; cursor: default; }
.wpz-roulette-result{ margin-top: 8px; font-size: 12.5px; font-weight: 700; color: #17334d; }
.wpz-roulette-result.is-win{ font-size: 15px; color: #8c6410; }

/* Admin: roulette control + shirt-win log. */
.admin-roulette{ display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; flex-wrap: wrap; }
.admin-roulette input{ width: 78px; padding: 5px 7px; border-radius: 7px; font-size: 12px; border: 1px solid rgba(148,163,184,0.3); }
.admin-roulette .theme-button{ padding: 7px 12px !important; font-size: 11px !important; font-weight: 700 !important; }
.admin-shirt-wins{ display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: 11.5px; max-height: 140px; overflow-y: auto; }
.admin-shirt-row{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 8px; border-radius: 9px;
  background: rgba(216,164,49,0.12); border: 1px solid rgba(216,164,49,0.3);
}
.admin-shirt-row.is-done{ opacity: 0.55; }
.admin-shirt-row .theme-button{ padding: 3px 8px !important; font-size: 10px !important; }

/* Double XP: pinned strip above the chat with a live countdown. */
.wpz-dxp-banner{
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 9px;
  margin: -4px 10px 4px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 800;
  color: #4d3608;
  background: linear-gradient(135deg, rgba(255,233,168,0.95), rgba(246,193,60,0.9));
  border: 1px solid rgba(216, 164, 49, 0.55);
  box-shadow: 0 6px 18px rgba(216, 164, 49, 0.28);
  animation: wpzChampagneBannerIn 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wpz-dxp-banner.is-leaving{ opacity: 0; transform: translateY(-6px); transition: opacity 450ms ease, transform 450ms ease; }
.wpz-dxp-banner.is-live{
  animation: wpzChampagneBannerIn 380ms cubic-bezier(0.34, 1.56, 0.64, 1), wpzDxpLivePulse 2.2s ease-in-out infinite;
}
@keyframes wpzDxpLivePulse{
  0%, 100% { box-shadow: 0 6px 18px rgba(216, 164, 49, 0.28); }
  50%      { box-shadow: 0 6px 26px rgba(216, 164, 49, 0.6); }
}
.wpz-dxp-star{ font-size: 16px; animation: wpzMedalTilt 3s ease-in-out infinite; display: inline-block; }
.wpz-dxp-text{ flex: 1 1 auto; min-width: 0; }
.wpz-dxp-clock{
  flex: 0 0 auto; font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 900;
  background: rgba(255,255,255,0.55); border-radius: 999px; padding: 2px 10px;
}
@media (prefers-reduced-motion: reduce){
  .wpz-dxp-banner.is-live, .wpz-dxp-star{ animation: none; }
}

/* Roulette table: the ball-landing reveal. */
.wpz-rt-overlay{
  position: fixed; inset: 0; z-index: 2147483300;
  display: grid; place-items: center;
  background: rgba(12, 16, 24, 0.62);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: wpzFadeIn 200ms ease-out;
}
.wpz-rt-card{
  position: relative;
  width: min(760px, calc(100vw - 40px));
  padding: 22px 20px 24px;
  border-radius: 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(240,248,255,0.94));
  border: 1px solid rgba(232, 103, 127, 0.35);
  box-shadow: 0 28px 64px rgba(8, 22, 39, 0.4);
}
.wpz-rt-card.is-win{
  border-color: rgba(216,164,49,0.85);
  box-shadow: 0 0 0 3px rgba(216,164,49,0.5), 0 28px 70px rgba(216,164,49,0.45);
  animation: wpzSpinJackpot 900ms ease-out 2;
}
.wpz-rt-title{ font-size: 18px; font-weight: 900; color: #17334d; }
.wpz-rt-yours{ font-size: 13px; color: #64748b; margin-top: 2px; }
.wpz-rt-yours strong{ color: #e8677f; font-size: 15px; }
.wpz-rt-marker{ font-size: 20px; color: #e8677f; line-height: 1; margin: 8px 0 -8px; position: relative; z-index: 2; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.wpz-rt-window{
  position: relative; overflow: hidden;
  margin: 10px auto 0;
  width: min(702px, 100%);              /* 9 cells x 78px */
  border-radius: 14px;
  border: 2px solid rgba(23, 51, 77, 0.75);
  background: linear-gradient(180deg, #2a3346, #1b2130);
  box-shadow: inset 0 0 24px rgba(0,0,0,0.55);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.wpz-rt-reel{ display: flex; will-change: transform; }
.wpz-rt-cell{
  flex: 0 0 78px; height: 74px;
  display: grid; place-items: center;
  font-size: 19px; font-weight: 900; color: #cbd5e1;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.wpz-rt-cell.is-pick{ color: #ff8fa3; }
.wpz-rt-cell.is-landed{
  color: #fff; background: linear-gradient(135deg, #ffe9a8, #f6c13c); text-shadow: none;
  animation: wpzDxpLivePulse 1.4s ease-in-out infinite;
}
.wpz-rt-status{ margin-top: 14px; font-size: 14px; font-weight: 700; color: #17334d; min-height: 20px; }
.wpz-rt-close{
  margin-top: 14px; border: 0; border-radius: 999px;
  padding: 9px 30px; font-size: 13px; font-weight: 900; cursor: pointer;
  color: #4a340a; background: linear-gradient(135deg, #ffe9a8, #f6c13c);
  box-shadow: 0 8px 20px rgba(216,164,49,0.35);
}
@media (prefers-reduced-motion: reduce){
  .wpz-rt-reel{ transition: none !important; }
  .wpz-rt-cell.is-landed, .wpz-rt-card.is-win{ animation: none; }
}

/* ── Double XP on the donation checkout ────────────────────────────────
   The card goes gold while a boost is live. Deliberately loud: the whole
   point is that a donor notices the window before deciding the amount.
   Scoped to .is-dxp so nothing changes outside a boost. */
.wpz-quickdonate-card.is-dxp{
  background: linear-gradient(160deg, rgba(255, 244, 214, 0.72) 0%, rgba(255, 253, 246, 0.9) 52%, rgba(252, 232, 186, 0.66) 100%);
  border-color: rgba(216, 164, 49, 0.55);
  box-shadow: 0 30px 70px rgba(120, 88, 12, 0.32), 0 0 0 1px rgba(216, 164, 49, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.wpz-quickdonate-card.is-dxp .wpz-quickdonate-perks{
  background: rgba(216, 164, 49, 0.1);
  border-color: rgba(216, 164, 49, 0.28);
}
.wpz-qd-dxp{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -6px -6px 2px;
  padding: 7px 12px;
  border-radius: 999px;
  background: linear-gradient(100deg, #d8a431, #f5d67a 45%, #d8a431);
  background-size: 220% 100%;
  animation: wpzDxpSheen 2.6s linear infinite;
  color: #3d2c05;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(216, 164, 49, 0.42);
}
@keyframes wpzDxpSheen{ to{ background-position: -220% 0; } }
.wpz-qd-dxp-star{ animation: wpzDxpPulse 1.4s ease-in-out infinite; font-size: 13px; }
@keyframes wpzDxpPulse{ 50%{ transform: scale(1.28) rotate(12deg); } }
.wpz-qd-dxp-clock{
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(61, 44, 5, 0.16);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
}
/* The struck-through base and the boosted figure beside it. */
.wpz-xp-was{ opacity: 0.5; font-weight: 700; margin-right: 2px; }
.wpz-xp-boosted{
  color: #9a6f0d !important;
  font-weight: 900;
  font-size: 1.08em;
}
.wpz-xp-boost-tag{
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: linear-gradient(100deg, #d8a431, #f5d67a);
  color: #3d2c05;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* ── VIP sale banner ───────────────────────────────────────────────────
   Gold, like everything else VIP — the pink version read as a different
   product. It is told apart from the Double XP strip by its copy and its
   Get VIP button rather than by hue. */
.wpz-vipsale-banner{
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 9px;
  margin: -4px 10px 4px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 800;
  color: #4d3608;
  background: linear-gradient(135deg, rgba(255,233,168,0.95), rgba(246,193,60,0.92));
  border: 1px solid rgba(216, 164, 49, 0.55);
  box-shadow: 0 6px 18px rgba(216, 164, 49, 0.3);
  animation: wpzChampagneBannerIn 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wpz-vipsale-banner.is-leaving{ opacity: 0; transform: translateY(-6px); transition: opacity 450ms ease, transform 450ms ease; }
.wpz-vipsale-banner.is-live{
  animation: wpzChampagneBannerIn 380ms cubic-bezier(0.34, 1.56, 0.64, 1), wpzSaleLivePulse 2.2s ease-in-out infinite;
}
@keyframes wpzSaleLivePulse{
  0%, 100% { box-shadow: 0 6px 18px rgba(216, 164, 49, 0.3); }
  50%      { box-shadow: 0 6px 28px rgba(216, 164, 49, 0.68); }
}
.wpz-vipsale-cta{
  flex: 0 0 auto;
  border: 1px solid rgba(120, 88, 12, 0.35);
  cursor: pointer;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 12px; font-weight: 900;
  color: #3d2c05;
  background: linear-gradient(135deg, #ffe9a8, #f0c14b);
  box-shadow: 0 4px 12px rgba(120, 88, 12, 0.3);
}
.wpz-vipsale-cta:hover{ filter: brightness(1.07); }
@media (prefers-reduced-motion: reduce){
  .wpz-vipsale-banner.is-live{ animation: none; }
}

/* Struck-through list price + the sale figure, in the VIP popup and the
   embedded-checkout header. */
.vip-popup-price.is-sale s{ opacity: 0.5; font-weight: 700; margin-right: 4px; }
.vip-popup-price.is-sale strong{ color: #b8860b; }
.vip-sale-tag{
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe9a8, #d8a431);
  color: #3d2c05;
  font-size: 10px; font-weight: 900; font-style: normal;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.vip-popup-buy.is-sale{
  background: linear-gradient(135deg, #ffe08a, #d8a431) !important;
  color: #3d2c05 !important;
  box-shadow: 0 8px 22px rgba(216, 164, 49, 0.5) !important;
}

/* ── Community leaderboard ─────────────────────────────────────────────
   Lives under the room list in the left sidebar, taking the space that
   was empty below the last channel. It flexes to whatever is left and
   scrolls internally, so adding a room shrinks the board instead of
   pushing it off the panel. */
.wpz-lb{
  display: flex;
  flex-direction: column;
  min-height: 0;             /* required, or the flex child refuses to shrink */
  flex: 1 1 auto;
  margin: 10px 6px 4px;
  padding: 10px 8px 8px;
  border-radius: 16px;
  background: rgba(90, 167, 255, 0.06);
  border: 1px solid rgba(90, 167, 255, 0.16);
}
.wpz-lb-head{
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.wpz-lb-title{
  flex: 1 1 auto;
  font-size: 11px; font-weight: 900;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #6d8195;
}
.wpz-lb-refresh{
  flex: 0 0 auto;
  border: 0; background: transparent; cursor: pointer;
  font-size: 14px; line-height: 1; color: #8ba3ba;
  padding: 2px 4px; border-radius: 6px;
}
.wpz-lb-refresh:hover{ color: #4a93ff; background: rgba(90,167,255,0.12); }
.wpz-lb-refresh.is-spinning{ animation: wpzLbSpin 600ms linear; }
@keyframes wpzLbSpin{ to{ transform: rotate(360deg); } }

/* Board selector. A native select keeps the current board named in a
   180px column, which twelve chips could not do. */
.wpz-lb-select{
  width: 100%;
  margin-bottom: 8px;
  padding: 5px 8px;
  border-radius: 9px;
  border: 1px solid rgba(90,167,255,0.22);
  background: rgba(255,255,255,0.75);
  color: #2c4a68;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}
.wpz-lb-select:focus{ outline: 2px solid rgba(90,167,255,0.45); outline-offset: 1px; }

.wpz-lb-note{
  font-size: 9.5px; line-height: 1.4;
  color: #8ba3ba;
  margin: -2px 0 6px;
}
.wpz-lb-rows{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}
.wpz-lb-row{
  display: flex; align-items: center; gap: 7px;
  padding: 4px 6px;
  border-radius: 9px;
  font-size: 12px;
}
.wpz-lb-row:hover{ background: rgba(90,167,255,0.09); }
.wpz-lb-rank{
  flex: 0 0 18px;
  text-align: center;
  font-size: 11px; font-weight: 900;
  color: #8ba3ba;
  font-variant-numeric: tabular-nums;
}
.wpz-lb-row.is-top .wpz-lb-rank{ font-size: 13px; }
.wpz-lb-name{
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700; color: #2c4a68;
}
.wpz-lb-name.is-clickable{ cursor: pointer; }
.wpz-lb-name.is-clickable:hover{ color: #4a93ff; text-decoration: underline; }
.wpz-lb-value{
  flex: 0 0 auto;
  font-weight: 900; font-size: 11px;
  color: #4a93ff;
  font-variant-numeric: tabular-nums;
}
.wpz-lb-row.is-rank1 .wpz-lb-name{ color: #b8860b; font-weight: 900; }
.wpz-lb-row.is-me{
  background: rgba(90,167,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(90,167,255,0.3);
}
.wpz-lb-empty{
  padding: 10px 6px;
  font-size: 11.5px;
  color: #8ba3ba;
  text-align: center;
}

/* #admin is event-free — see syncEventVisibility() in client.js. Hidden,
   not removed, so a still-live event reappears on the way back out. */
body.wpz-hide-events .wpz-event-sprite,
body.wpz-hide-events .wpz-trivia-strip,
body.wpz-hide-events .wpz-roulette-strip,
body.wpz-hide-events #wpzDoubleXpBanner,
body.wpz-hide-events #wpzVipSaleBanner{ display: none !important; }

/* Roulette countdown: tabular figures so m:ss does not jitter as it ticks,
   and a red urgency state under 30 seconds. */
.wpz-roulette-timer{ font-variant-numeric: tabular-nums; }
.wpz-roulette-timer.is-urgent{
  color: #e8467f;
  animation: wpzRtUrgent 1s ease-in-out infinite;
}
@keyframes wpzRtUrgent{ 50%{ opacity: 0.45; } }
@media (prefers-reduced-motion: reduce){
  .wpz-roulette-timer.is-urgent{ animation: none; }
}

/* ── "Spin again" / "Play again" re-buys ───────────────────────────────
   Deliberately NOT styled like the primary action: buying a second go with
   XP is an opt-in, and it should not compete with the free one. */
.wpz-spin-again,
.wpz-roulette-rebuy{
  align-self: center;
  margin-top: 10px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(216, 164, 49, 0.5);
  background: rgba(216, 164, 49, 0.14);
  color: #8a6510;
  font-size: 12px; font-weight: 800;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
}
.wpz-spin-again:hover,
.wpz-roulette-rebuy:hover{ background: rgba(216, 164, 49, 0.26); transform: translateY(-1px); }
.wpz-spin-again:disabled,
.wpz-roulette-rebuy:disabled{ opacity: 0.55; cursor: default; transform: none; }
.wpz-spin-again b,
.wpz-roulette-rebuy b{ font-weight: 900; }
.wpz-roulette-rebuy{ display: block; margin: 8px 0 0; align-self: flex-start; }

/* VIP sale inside the gift dialog — gifts are discounted too. */
.wpz-gift-sale{
  align-self: center;
  margin: -2px 0 6px;
  padding: 4px 14px;
  border-radius: 999px;
  background: linear-gradient(100deg, #ffe9a8, #d8a431 60%, #ffe9a8);
  color: #3d2c05;
  font-size: 10.5px; font-weight: 900;
  letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(216,164,49,0.42);
}
/* Old vs new price. The struck price stays legible — a discount you cannot
   read is not a discount — but the strike is red and the new price is larger,
   heavier and brighter, so the eye lands on what you actually pay. */
.wpz-gift-was{
  display: inline-block;
  margin-right: 6px;
  font-size: 0.82em;
  font-weight: 700;
  opacity: 0.72;
  text-decoration: line-through;
  text-decoration-color: #e0483f;
  text-decoration-thickness: 2px;
}
.wpz-gift-now{
  font-size: 1.18em;
  font-weight: 900;
  color: #8a6510;
  letter-spacing: -0.01em;
}
/* A "-50%" flag in the corner of each amount, so the saving is visible even
   at a glance without reading two numbers. */
.wpz-gift-opt.has-sale{ position: relative; overflow: visible; }
.wpz-gift-opt.has-sale::after{
  content: "-" attr(data-off) "%";
  position: absolute;
  top: -8px; right: -6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5a4e, #d0342c);
  color: #fff;
  font-size: 10px; font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 9px rgba(0,0,0,0.4);
  pointer-events: none;
}

/* ── Sale attract loop on the gift buttons ─────────────────────────────
   While a gifting sale is LIVE, every way into the gift dialog nudges for
   attention: a shake every few seconds plus a travelling gold sheen and a
   soft pulsing halo. Deliberately periodic rather than continuous — a
   permanently-wobbling button in your peripheral vision is exhausting, and
   something that moves only now and then is what actually catches the eye.

   Applies to: the sale banner CTA, the composer 🎁, the 🎁 in floating
   channel windows, the profile "Gift VIP" button, and the community-gift
   entry in the VIP popup. */
body.wpz-vip-sale-live .wpz-vipsale-cta,
body.wpz-vip-sale-live #giftVipToggle,
body.wpz-vip-sale-live .chan-window-gift-btn,
body.wpz-vip-sale-live .wpz-profile-gift-btn,
body.wpz-vip-sale-live #vipGiftCommunityBtn{
  position: relative;
  animation: wpzSaleShake 4.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
  box-shadow: 0 0 0 0 rgba(216, 164, 49, 0.6), 0 4px 14px rgba(216, 164, 49, 0.35);
}
/* The halo is a second animation on the same box-shadow slot, so it rides
   along on one property rather than fighting the shake for `transform`. */
body.wpz-vip-sale-live #giftVipToggle,
body.wpz-vip-sale-live .chan-window-gift-btn{
  animation: wpzSaleShake 4.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite,
             wpzSaleHalo 2.2s ease-out infinite;
}
/* Shake is squeezed into the first ~14% of the cycle; the rest is stillness. */
@keyframes wpzSaleShake{
  0%, 14%, 100% { transform: translateX(0) rotate(0deg); }
  2%  { transform: translateX(-2px) rotate(-3deg); }
  4%  { transform: translateX(2px)  rotate(3deg); }
  6%  { transform: translateX(-3px) rotate(-4deg) scale(1.06); }
  8%  { transform: translateX(3px)  rotate(4deg)  scale(1.06); }
  10% { transform: translateX(-2px) rotate(-2deg); }
  12% { transform: translateX(2px)  rotate(2deg); }
}
@keyframes wpzSaleHalo{
  0%   { box-shadow: 0 0 0 0 rgba(216,164,49,0.55), 0 4px 14px rgba(216,164,49,0.35); }
  70%  { box-shadow: 0 0 0 12px rgba(216,164,49,0), 0 4px 14px rgba(216,164,49,0.35); }
  100% { box-shadow: 0 0 0 0 rgba(216,164,49,0), 0 4px 14px rgba(216,164,49,0.35); }
}
/* Travelling sheen across the wide (text) buttons. */
body.wpz-vip-sale-live .wpz-vipsale-cta,
body.wpz-vip-sale-live #vipGiftCommunityBtn,
body.wpz-vip-sale-live .wpz-profile-gift-btn{
  background-image: linear-gradient(100deg,
    rgba(255,255,255,0) 20%, rgba(255,255,255,0.75) 42%, rgba(255,255,255,0) 62%),
    linear-gradient(135deg, #ffe9a8, #f0c14b);
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: wpzSaleShake 4.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite,
             wpzSaleSheen 2.8s linear infinite;
}
@keyframes wpzSaleSheen{
  0%   { background-position: 180% 0, 0 0; }
  100% { background-position: -80% 0, 0 0; }
}
/* A "SALE" flag on the composer gift button so the shake has a reason. */
body.wpz-vip-sale-live #giftVipToggle::after,
body.wpz-vip-sale-live .chan-window-gift-btn::after{
  content: "%";
  position: absolute;
  top: -5px; right: -5px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe08a, #d8a431);
  color: #3d2c05;
  font-size: 9px; font-weight: 900; line-height: 15px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  pointer-events: none;
}
/* Motion is the whole point here, so reduced-motion keeps the gold cue and
   drops only the movement. */
@media (prefers-reduced-motion: reduce){
  body.wpz-vip-sale-live .wpz-vipsale-cta,
  body.wpz-vip-sale-live #giftVipToggle,
  body.wpz-vip-sale-live .chan-window-gift-btn,
  body.wpz-vip-sale-live .wpz-profile-gift-btn,
  body.wpz-vip-sale-live #vipGiftCommunityBtn{ animation: none; }
}

/* ── Events tab: one card per tool ─────────────────────────────────────
   The tab was a flat column of identical full-width rows, so nothing said
   which button belonged to which feature. Each tool now lives in its own
   bordered card: icon + name + one-line description up top, controls
   below, and single-action tools keep their button in the header row. */
.admin-ev-card{
  margin: 10px 0;
  padding: 12px 14px 13px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(148, 163, 184, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-ev-card-head{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.admin-ev-card-head > div{ flex: 1 1 auto; min-width: 0; }
.admin-ev-card-icon{
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1.25;
}
.admin-ev-card-title{
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.admin-ev-card-sub{
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.45;
  opacity: 0.72;
}
/* Single-action cards: the button rides the header, sized to its label —
   a full-width bar for a one-off action is what made the old layout read
   as soup. */
.admin-ev-card-action{
  flex: 0 0 auto;
  align-self: center;
  padding: 7px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}
/* The do-it button and its cancel are no longer twins. */
.admin-dxp-actions .theme-button.is-primary{
  background: linear-gradient(135deg, #4a93ff, #2f6fd0) !important;
  border-color: transparent !important;
  color: #fff !important;
  flex: 2;
}
.admin-trivia-form-actions .theme-button.is-primary{
  background: linear-gradient(135deg, #4a93ff, #2f6fd0) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ── Lucky-spin idle life ──────────────────────────────────────────────
   The wheel sat perfectly still until you pressed SPIN. Everything here
   animates AROUND the disc — sparkles, glow, pointer, hub, button. Nothing
   touches .wpz-spin-wheel's own transform: the spin lands by setting it
   inline, and an idle animation on the same property would drag the ball
   off its server-decided pocket. */
.wpz-spin-stage{ position: relative; }
.wpz-spin-spark{
  position: absolute;
  z-index: 3;
  font-size: 15px;
  color: #f0c14b;
  text-shadow: 0 0 8px rgba(246, 193, 60, 0.8);
  opacity: 0;
  pointer-events: none;
  animation: wpzSparkTwinkle 3.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes wpzSparkTwinkle{
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  12%      { opacity: 1; transform: scale(1.15) rotate(20deg); }
  24%      { opacity: 0.4; transform: scale(0.8) rotate(45deg); }
  36%      { opacity: 0; transform: scale(0.4) rotate(60deg); }
}
/* The rim breathes: the gold glow swells and settles on a slow cycle. */
.wpz-spin-wheel{
  animation: wpzWheelBreathe 3.2s ease-in-out infinite;
}
@keyframes wpzWheelBreathe{
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(255, 233, 184, 0.35),
                0 12px 34px rgba(0, 0, 0, 0.45),
                0 0 18px rgba(216, 164, 49, 0.25),
                inset 0 0 26px rgba(0, 0, 0, 0.35);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(255, 233, 184, 0.55),
                0 12px 34px rgba(0, 0, 0, 0.45),
                0 0 34px rgba(216, 164, 49, 0.6),
                inset 0 0 26px rgba(0, 0, 0, 0.35);
  }
}
/* The pointer taps, like it is itching to click against the pockets. */
.wpz-spin-pointer{
  animation: wpzPointerTap 1.6s ease-in-out infinite;
}
@keyframes wpzPointerTap{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
/* The penguin waddles in the hub. transform carries the centring translate,
   so the keyframes must repeat it. */
.wpz-spin-hub{
  animation: wpzHubWaddle 2.6s ease-in-out infinite;
}
@keyframes wpzHubWaddle{
  0%, 100% { transform: translate(-50%, -50%) rotate(-7deg); }
  50%      { transform: translate(-50%, -50%) rotate(7deg); }
}
/* SPIN heartbeats until it is pressed. */
.wpz-spin-go:not(:disabled){
  animation: wpzSpinGoBeat 1.8s ease-in-out infinite;
}
@keyframes wpzSpinGoBeat{
  0%, 100% { transform: scale(1);     box-shadow: 0 10px 22px rgba(216, 164, 49, 0.4); }
  12%      { transform: scale(1.05);  box-shadow: 0 12px 30px rgba(216, 164, 49, 0.65); }
  24%      { transform: scale(1);     box-shadow: 0 10px 22px rgba(216, 164, 49, 0.4); }
  36%      { transform: scale(1.04);  box-shadow: 0 12px 28px rgba(216, 164, 49, 0.55); }
  48%      { transform: scale(1);     box-shadow: 0 10px 22px rgba(216, 164, 49, 0.4); }
}
/* Once the real spin starts, the idle theatrics on the disc stop — a
   waddling hub on a wheel doing six revolutions reads as a glitch. */
.wpz-spin-wheel.is-spinning,
.wpz-spin-wheel.is-spinning .wpz-spin-hub{ animation: none; }
@media (prefers-reduced-motion: reduce){
  .wpz-spin-spark, .wpz-spin-wheel, .wpz-spin-pointer,
  .wpz-spin-hub, .wpz-spin-go:not(:disabled){ animation: none !important; }
}

/* ══ Engagement suite (engagement.js) ═══════════════════════════════════ */

/* ── 🔥 Streak pill (Daily Quests card head — NOT the topbar, where its
      width wrapped the nav on smaller windows) ── */
.wpz-streak-pill{
  display: inline-flex; align-items: center; gap: 2px;
  flex: 0 0 auto;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 900; letter-spacing: 0.02em;
  color: #9a3412;
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  border: 1px solid rgba(234, 88, 12, 0.35);
  cursor: default; user-select: none;
}
.wpz-streak-pill.is-at-risk{ animation: wpzStreakPulse 2.2s ease-in-out infinite; }
@keyframes wpzStreakPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(234,88,12,0); }
  50%{ box-shadow: 0 0 0 5px rgba(234,88,12,0.18); }
}

/* ── 😀 Emoji picker search (was an unstyled input — invisible in dark) ── */
/* ONE pill, not two: the wrapper (.emoji-popup-search) is the visible
   field — border, tint, focus ring — and the input inside stays invisible.
   (Styling both drew a pill inside a pill, plus the clear-button stub.) */
#emojiPopupSearch{
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 10px 14px 10px 38px;
  border: none !important;
  border-radius: 0;
  background: transparent !important;
  /* 🔍 so it reads as a search bar at a glance. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d93a8' stroke-width='2.4' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><line x1='15.5' y1='15.5' x2='21' y2='21'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  background-size: 16px 16px !important;
  color: #17334d;
  font: inherit;
  font-size: 13.5px;
  outline: none !important;
}
#emojiPopupSearch::placeholder{ color: #7d93a8; }
.emoji-popup-search{
  border: 1px solid rgba(90, 167, 255, 0.35) !important;
}
.emoji-popup-search:focus-within{
  border-color: #4a93ff !important;
  box-shadow: 0 0 0 2px rgba(90, 167, 255, 0.35) !important;
}
/* Dark variant lives in dark.css — its generic `input { … !important }`
   rule (line ~172) must be out-shouted from the later file. */

/* ── 💬 Floating tips (data-wpztip hover cards) ── */
.wpz-tip{
  position: fixed; z-index: 2147483200;
  max-width: 250px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #1d2836;
  border: 1px solid rgba(124,192,255,0.3);
  box-shadow: 0 14px 34px rgba(8,16,32,0.45);
  color: #dcebfb;
  font-size: 11.5px; line-height: 1.45;
  pointer-events: none;
  animation: wpzTipIn 140ms ease;
}
.wpz-tip b{ display: block; color: #fff; font-size: 12px; margin-bottom: 2px; }
.wpz-tip span{ display: block; color: #a9c6e8; }
@keyframes wpzTipIn{ from{ opacity: 0; transform: translateY(3px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .wpz-tip{ animation: none; } }

/* ── 🎯 Daily quests (sidebar card, shares the .wpz-lb look) ── */
/* The left sidebar now carries channels + quests + leaderboard + shop —
   more than one viewport on smaller windows. It scrolls (thin bar) and the
   leaderboard keeps a useful minimum instead of flex-collapsing to a sliver
   with later siblings painted over its spilled content. */
.sidebar.channels-panel{ overflow-y: auto; scrollbar-width: thin; }
.sidebar.channels-panel .wpz-lb{ flex: 1 0 auto; min-height: 205px; }
.sidebar.channels-panel .channel-list{ flex: 0 0 auto; }
.wpz-quests{
  flex: 0 0 auto;
  margin: 0 6px;
  padding: 8px 8px 7px;
  border-radius: 16px;
  background: rgba(90, 167, 255, 0.06);
  border: 1px solid rgba(90, 167, 255, 0.16);
}
.wpz-shop-btn{ flex: 0 0 auto; }
.wpz-q-bonus{
  flex: 0 0 auto;
  font-size: 9.5px; font-weight: 900;
  color: #8ba3ba;
}
.wpz-q-bonus.is-done{ color: #16a34a; }
.wpz-q-rows{ display: flex; flex-direction: column; gap: 5px; }
.wpz-q-row{
  display: flex; align-items: center; gap: 6px;
  padding: 4px 5px; border-radius: 9px;
}
.wpz-q-row.is-done{ background: rgba(22,163,74,0.08); }
.wpz-q-icon{ flex: 0 0 auto; font-size: 13px; }
.wpz-q-main{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wpz-q-label{
  font-size: 10.5px; font-weight: 800; color: #3c5a78;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wpz-q-row.is-done .wpz-q-label{ color: #15803d; }
.wpz-q-bar{
  height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(90,167,255,0.16);
}
.wpz-q-fill{
  display: block; height: 100%;
  background: linear-gradient(90deg, #4a93ff, #7cc0ff);
  border-radius: 999px;
  transition: width 400ms ease;
}
.wpz-q-row.is-done .wpz-q-fill{ background: #22c55e; }
.wpz-q-val{
  flex: 0 0 auto; font-size: 10px; font-weight: 900;
  font-variant-numeric: tabular-nums; color: #6d8195;
}
.wpz-q-row.is-done .wpz-q-val{ color: #16a34a; }

/* ── Leaderboard period tabs + last-week champion ── */
.wpz-lb-tabs{ display: flex; gap: 4px; margin-bottom: 7px; }
.wpz-lb-tab{
  flex: 1 1 0;
  padding: 4px 2px; border-radius: 8px;
  border: 1px solid rgba(90,167,255,0.2);
  background: transparent;
  font-size: 10px; font-weight: 900; letter-spacing: 0.03em;
  color: #6d8195; cursor: pointer;
}
.wpz-lb-tab:hover{ background: rgba(90,167,255,0.1); }
.wpz-lb-tab.is-on{
  background: #4a93ff; border-color: #4a93ff; color: #fff;
}
.wpz-lb-champ{
  margin-top: 6px; padding: 4px 6px;
  border-radius: 8px;
  background: rgba(184,134,11,0.1);
  font-size: 10px; font-weight: 900; color: #92700a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── 🛍️ XP shop ── */
.wpz-shop-btn{
  /* No vertical margin: the sidebar's own 10px row-gap does the spacing.
     Adding margins here stacked with it and pushed the buttons apart. */
  margin: 0 6px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(184,134,11,0.35);
  background: linear-gradient(135deg, #fff7e0, #ffedc2);
  color: #92700a;
  font-size: 12px; font-weight: 900; letter-spacing: 0.02em;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.wpz-shop-btn:hover{ filter: brightness(1.04); }
/* display:flex above beats the [hidden] UA rule — restore it, or the
   "hidden" button sits invisibly over the leaderboard eating clicks. */
.wpz-shop-btn[hidden]{ display: none !important; }
/* Same trap, admin cards: display:flex on .admin-ev-card was defeating the
   hidden attribute on role-gated cards (XP tools, owner broadcast, roles). */
.admin-ev-card[hidden]{ display: none !important; }
.wpz-shop-bal{
  font-size: 10.5px; font-weight: 900;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(184,134,11,0.16);
}
.wpz-shop-overlay{
  position: fixed; inset: 0; z-index: 12000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,16,24,0.42);
  /* Frosted glass behind the window, like the site's other panels. */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 18px;
}
/* Same [hidden]-vs-display trap as the shop button: without this, a
   "closed" shop keeps dimming and swallowing every click on the page. */
.wpz-shop-overlay[hidden]{ display: none !important; }
.wpz-shop-card{
  width: min(460px, 94vw);
  max-height: 88vh; overflow-y: auto;
  border-radius: 20px;
  background: #f7fbff;
  border: 1px solid rgba(90,167,255,0.25);
  box-shadow: 0 30px 70px rgba(20,40,70,0.35);
  padding: 16px;
}
.wpz-shop-head{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.wpz-shop-title{ flex: 1 1 auto; font-size: 17px; font-weight: 900; color: #1a4d8a; }
.wpz-shop-balance{
  font-size: 12.5px; font-weight: 800; color: #92700a;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(184,134,11,0.12);
}
.wpz-shop-close{
  border: 0; background: transparent; cursor: pointer;
  font-size: 16px; color: #6d8195; padding: 4px 6px; border-radius: 8px;
}
.wpz-shop-close:hover{ background: rgba(90,167,255,0.12); color: #1a4d8a; }
.wpz-shop-items{ display: flex; flex-direction: column; gap: 10px; }
.wpz-shop-item{
  border-radius: 14px;
  border: 1px solid rgba(90,167,255,0.18);
  background: #fff;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.wpz-shop-item-head{ display: flex; gap: 10px; align-items: flex-start; }
/* The icon gets its OWN fixed column. Without a width it was sized by the
   glyph's advance, and wide emoji (👑 especially) painted outside that box
   and straight over the item name. */
.wpz-shop-item-icon{
  flex: 0 0 28px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
}
.wpz-shop-item-name{ font-size: 13.5px; font-weight: 900; color: #17334d; }
.wpz-shop-item-desc{ font-size: 11.5px; line-height: 1.45; color: #5b7a99; }
.wpz-shop-active{ display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 800; color: #16a34a; }
.wpz-shop-color{
  width: 64px; height: 30px; padding: 0;
  border: 1px solid rgba(90,167,255,0.3); border-radius: 8px;
  background: none; cursor: pointer;
}
.wpz-shop-flairs{ display: flex; flex-wrap: wrap; gap: 5px; }
.wpz-shop-flair{
  font-size: 16px; padding: 4px 7px;
  border-radius: 9px; border: 1px solid rgba(90,167,255,0.22);
  background: rgba(90,167,255,0.06); cursor: pointer;
}
.wpz-shop-flair:hover{ background: rgba(90,167,255,0.14); }
.wpz-shop-flair.is-picked, .wpz-shop-flair.is-active{
  border-color: #4a93ff; background: rgba(74,147,255,0.18);
  outline: 2px solid rgba(74,147,255,0.35);
}
/* Champagne-pop exclusive: visible but locked until the POP badge exists. */
.wpz-shop-flair.is-locked{
  position: relative;
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.6);
}
.wpz-shop-flair-lock{
  position: absolute; right: -3px; bottom: -3px;
  font-size: 10px; line-height: 1;
  filter: none; opacity: 1;
}
.wpz-shop-buy{
  align-self: flex-start;
  padding: 7px 14px; border-radius: 999px;
  border: 0; cursor: pointer;
  background: #4a93ff; color: #fff;
  font-size: 12px; font-weight: 900;
}
.wpz-shop-buy:hover{ filter: brightness(1.06); }
.wpz-shop-buy.is-poor{ background: #b6c6d6; cursor: not-allowed; }
.wpz-shop-buy:disabled{ opacity: 0.6; }
.wpz-shop-gift{
  margin-top: 14px; padding: 12px;
  border-radius: 14px;
  background: rgba(74,147,255,0.07);
  border: 1px solid rgba(74,147,255,0.22);
}
.wpz-shop-gift .wpz-shop-invite-head{ color: #2f6fae; }
.wpz-shop-gift .wpz-shop-invite-sub{ color: #5b7a99; }
.wpz-shop-gift .wpz-shop-invite-row input{ border-color: rgba(74,147,255,0.3); }
.wpz-shop-gift #wpzGiftAmt{ flex: 0 0 110px; }
.wpz-shop-invite{
  margin-top: 14px; padding: 12px;
  border-radius: 14px;
  background: rgba(22,163,74,0.07);
  border: 1px solid rgba(22,163,74,0.2);
}
/* Golden, like everything VIP/support — not warning-red. */
.wpz-shop-donate{
  margin-top: 14px; padding: 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 233, 184, 0.35), rgba(255, 212, 126, 0.25));
  border: 1px solid rgba(216, 164, 49, 0.45);
  box-shadow: 0 2px 12px rgba(216, 164, 49, 0.15);
}
.wpz-shop-donate:empty{ display: none; }
.wpz-shop-donate .wpz-shop-invite-head{ color: #92700a; }
.wpz-shop-donate .wpz-shop-invite-sub{ color: #8a6d2f; }
.wpz-shop-donate-boost{ color: #d97706; }
.wpz-shop-donate-row{ display: flex; gap: 8px; margin-top: 4px; }
.wpz-shop-donate-btn{
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 4px;
  border-radius: 12px;
  border: 1px solid rgba(216, 164, 49, 0.5);
  background: linear-gradient(135deg, #ffe9b8 0%, #ffd47e 100%);
  cursor: pointer;
  font-size: 14px; font-weight: 900; color: #6b4d0c;
}
.wpz-shop-donate-btn span{ font-size: 10px; font-weight: 800; color: #7a5c14; }
.wpz-shop-donate-btn:hover{ filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(216,164,49,0.3); }
.wpz-shop-invite:empty{ display: none; }
.wpz-shop-invite-head{ font-size: 13px; font-weight: 900; color: #15803d; }
.wpz-shop-invite-sub{ font-size: 11px; color: #4d7c5f; margin: 3px 0 8px; line-height: 1.45; }
.wpz-shop-invite-row{ display: flex; gap: 6px; }
.wpz-shop-invite-row input{
  flex: 1 1 auto; min-width: 0;
  padding: 6px 9px; border-radius: 9px;
  border: 1px solid rgba(22,163,74,0.3);
  font-size: 11px; color: #17334d; background: #fff;
}

/* Support button relocated under the roster legend. */
.support-btn-sidebar{
  display: block;
  width: calc(100% - 12px);
  margin: 8px 6px 4px;
  text-align: center;
}
.support-btn-sidebar.hidden{ display: none !important; }

/* ── 🪟 In-site floating browser — same design language as the WPZ Limited
      merch card: 24px liquid-glass, generous padding, springy rise-in. ── */
.wpz-fwin{
  /* Above the profile modal (2147483646) — the social chips live INSIDE that
     modal, so anything lower renders behind its blurred backdrop. */
  /* inset+margin centres it without a transform, leaving transform free for
     the rise-in; dragging sets left/top and clears right/bottom. */
  position: fixed; inset: 0; margin: auto; z-index: 2147483647;
  width: min(360px, calc(100vw - 40px));
  height: fit-content;
  max-height: calc(100vh - 120px);
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.99);
  border: 1px solid rgba(79, 149, 216, 0.22);
  box-shadow: 0 20px 48px rgba(8, 22, 39, 0.28);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  transition: opacity 150ms ease, transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wpz-fwin.is-in{ opacity: 1; transform: none; }
.wpz-fwin-head{
  display: flex; align-items: center; gap: 8px;
  cursor: grab;
  user-select: none;
}
.wpz-fwin-head:active{ cursor: grabbing; }
.wpz-fwin-ico{
  width: 28px; height: 28px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 900; flex: 0 0 auto;
  box-shadow: 0 6px 14px rgba(8, 22, 39, 0.2);
}
.wpz-fwin-ico svg{ width: 15px; height: 15px; }
.wpz-fwin-title{
  flex: 1 1 auto; min-width: 0;
  font-size: 13.5px; font-weight: 900; color: #17334d;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wpz-fwin-ext, .wpz-fwin-close{
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border: 0; cursor: pointer;
  border-radius: 50%;
  background: rgba(90, 167, 255, 0.1);
  font-size: 13px; color: #6d8195;
  display: flex; align-items: center; justify-content: center;
}
.wpz-fwin-ext:hover, .wpz-fwin-close:hover{ background: rgba(90, 167, 255, 0.22); color: #17334d; transform: scale(1.06); }
html[data-theme="dark"] .wpz-fwin{
  background: rgba(32, 32, 33, 0.97);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .wpz-fwin-title{ color: #e8f2ff; }
html[data-theme="dark"] .wpz-fwin-ext, html[data-theme="dark"] .wpz-fwin-close{
  background: rgba(255, 255, 255, 0.08); color: #93a7bb;
}
html[data-theme="dark"] .wpz-fwin-ext:hover, html[data-theme="dark"] .wpz-fwin-close:hover{
  background: rgba(255, 255, 255, 0.16); color: #e8f2ff;
}

/* ── 🔗 The link card that fills the floating window ── */
.wpz-fwin-panel{
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 18px 16px 10px;
}
.wpz-fwin-panel-ring{
  position: absolute; left: 50%; top: 18px;
  width: 58px; height: 58px;
  margin-left: -29px;
  border-radius: 20px;
  border: 2px solid var(--brand, #4a93ff);
  opacity: 0.5;
  animation: wpzPortalPulse 1.9s ease-out infinite;
  pointer-events: none;
}
@keyframes wpzPortalPulse{
  0%{ transform: scale(0.9); opacity: 0.5; }
  100%{ transform: scale(1.55); opacity: 0; }
}
.wpz-fwin-panel-ico{
  width: 58px; height: 58px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; font-weight: 900;
  box-shadow: 0 10px 26px rgba(8, 16, 32, 0.35);
}
.wpz-fwin-panel-ico svg{ width: 28px; height: 28px; }
.wpz-fwin-panel-handle{ font-size: 16px; font-weight: 900; color: #17334d; margin-top: 10px; }
.wpz-fwin-panel-host{ font-size: 11.5px; color: #6d8195; margin-bottom: 14px; }
.wpz-fwin-open{
  padding: 10px 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: #4a93ff; color: #fff; font-size: 13px; font-weight: 900;
  transition: filter 120ms ease, transform 120ms ease;
}
.wpz-fwin-open:hover{ filter: brightness(1.07); transform: translateY(-1px); }
.wpz-fwin-panel-note{
  margin-top: 12px; font-size: 10.5px; line-height: 1.5; color: #8ba3ba;
  max-width: 300px; text-wrap: balance;
}
html[data-theme="dark"] .wpz-fwin-panel-handle{ color: #e8f2ff; }
html[data-theme="dark"] .wpz-fwin-panel-host,
html[data-theme="dark"] .wpz-fwin-panel-note{ color: #93a7bb; }

/* ── 🖼️ Avatar lightbox — profile photos open full-size on click ── */
/* The overlay itself is styled once, further up (search .wpz-avatar-lightbox).
   A second block here used to re-declare it and drop z-index to 13000, which
   put the lightbox *underneath* the profile modal; only the cursors belong
   in this section. */
.wpz-avatar img{ cursor: zoom-in; }
/* Upload circles are buttons, not pictures — don't promise a zoom. */
#wpzProfileCardAvatar.is-editable .wpz-avatar img,
#wpzAvatarEditTrigger .wpz-avatar img,
#wpzPopoverAvatarEdit .wpz-avatar img{ cursor: pointer; }

/* ── ✨ Chat flair (next to usernames) ── */
.message-flair{
  display: inline-block;
  position: relative;
  margin-left: 4px;
  font-size: 1.05em;
  vertical-align: baseline;
  /* Soft golden aura so the flair reads as a little trophy, not a stray
     emoji. Static drop-shadow — animating filters is what melts laptops. */
  filter: drop-shadow(0 0 3px rgba(255, 217, 119, 0.45));
  /* A gentle waddle — transform-only so a screen full of flairs stays
     cheap, slow enough to charm instead of distract. */
  animation: wpzFlairWaddle 2.8s ease-in-out infinite;
  transform-origin: 50% 85%;
}
.message-flair:hover{ animation-duration: 0.7s; }
/* A tiny star that twinkles once per waddle cycle, riding the same
   transform so it dances along with the emoji. */
.message-flair::after{
  content: "✦";
  position: absolute;
  top: -5px; right: -6px;
  font-size: 8px;
  color: #ffd977;
  text-shadow: 0 0 4px rgba(255, 217, 119, 0.8);
  opacity: 0;
  animation: wpzFlairTwinkle 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wpzFlairWaddle{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  25%{ transform: translateY(-1.5px) rotate(-7deg); }
  50%{ transform: translateY(0) rotate(0deg); }
  75%{ transform: translateY(-1.5px) rotate(7deg); }
}
@keyframes wpzFlairTwinkle{
  0%, 55%, 100%{ opacity: 0; transform: scale(0.5) rotate(0deg); }
  68%{ opacity: 1; transform: scale(1.15) rotate(40deg); }
  82%{ opacity: 0.25; transform: scale(0.7) rotate(80deg); }
}
@media (prefers-reduced-motion: reduce){
  .message-flair, .message-flair::after{ animation: none; }
}

/* ── 🧠 Trivia Night card ── */
.wpz-tn-card{
  /* Top-right, NOT bottom-right: the toast stack owns that corner (max
     z-index, clickable toasts) and 9-second quest toasts were sitting on
     the answer buttons. */
  position: fixed; right: 20px; top: 84px; z-index: 11500;
  width: min(330px, calc(100vw - 40px));
  border-radius: 18px;
  background: linear-gradient(160deg, #1b2b45, #14203a);
  border: 1px solid rgba(124,192,255,0.35);
  box-shadow: 0 24px 60px rgba(8,16,32,0.5);
  padding: 14px;
  color: #e8f2ff;
  animation: wpzTnIn 300ms ease;
}
@keyframes wpzTnIn{ from{ transform: translateY(14px); opacity: 0; } to{ transform: none; opacity: 1; } }
.wpz-tn-head{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; font-weight: 900; letter-spacing: 0.09em;
  color: #7cc0ff; margin-bottom: 8px;
}
.wpz-tn-round{ font-size: 10.5px; color: #a9c6e8; letter-spacing: 0.04em; }
.wpz-tn-q{ font-size: 14.5px; font-weight: 800; line-height: 1.4; margin-bottom: 10px; }
.wpz-tn-opts{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.wpz-tn-opt{
  text-align: left;
  padding: 8px 11px; border-radius: 11px;
  border: 1px solid rgba(124,192,255,0.3);
  background: rgba(124,192,255,0.08);
  color: #e8f2ff; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
}
.wpz-tn-opt:hover{ background: rgba(124,192,255,0.18); }
.wpz-tn-opt.is-locked{ opacity: 0.55; cursor: default; }
.wpz-tn-opt.is-mine{
  opacity: 1;
  border-color: #ffd977; background: rgba(255,217,119,0.14); color: #ffd977;
}
.wpz-tn-bar{
  height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(124,192,255,0.15); margin-bottom: 7px;
}
.wpz-tn-fill{
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #4a93ff, #7cc0ff);
  transition: width 200ms linear;
}
.wpz-tn-foot{ font-size: 10.5px; color: #a9c6e8; }
.wpz-tn-answer{ font-size: 12.5px; line-height: 1.5; margin-bottom: 6px; }
.wpz-tn-answer b{ color: #ffd977; }
.wpz-tn-verdict{ font-size: 12.5px; font-weight: 900; margin-bottom: 6px; }
.wpz-tn-verdict.is-right{ color: #4ade80; }
.wpz-tn-verdict.is-wrong{ color: #f87171; }
.wpz-tn-board{
  list-style: none; margin: 4px 0 8px; padding: 6px 8px;
  border-radius: 10px; background: rgba(124,192,255,0.08);
  display: flex; flex-direction: column; gap: 3px;
}
.wpz-tn-board li{
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11.5px;
}
.wpz-tn-board li:first-child{ color: #ffd977; font-weight: 900; }
.wpz-tn-champ{
  font-size: 16px; font-weight: 900; color: #ffd977;
  margin-bottom: 8px;
}
.wpz-tn-champ span{ font-size: 12px; color: #4ade80; margin-left: 6px; }

/* ── 🔮 Prediction banner ── */
.wpz-pred-banner{
  margin: 8px 12px 2px;
  border-radius: 14px;
  border: 1px solid rgba(147,51,234,0.28);
  background: linear-gradient(135deg, rgba(147,51,234,0.08), rgba(79,70,229,0.08));
  padding: 9px 12px;
}
.wpz-pred-top{ display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.wpz-pred-q{ flex: 1 1 auto; font-size: 12.5px; font-weight: 900; color: #5b21b6; }
.wpz-pred-meta{ flex: 0 0 auto; font-size: 10px; font-weight: 700; color: #7c6ba8; }
.wpz-pred-x{
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  font-size: 12px; color: #7c6ba8; padding: 2px 5px; border-radius: 6px;
}
.wpz-pred-x:hover{ background: rgba(147,51,234,0.12); }
.wpz-pred-opts{ display: flex; flex-wrap: wrap; gap: 6px; }
.wpz-pred-opt{
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid rgba(147,51,234,0.3);
  background: #fff; cursor: pointer;
  font-size: 11.5px; font-weight: 800; color: #4c1d95;
}
.wpz-pred-opt:hover{ background: rgba(147,51,234,0.08); }
.wpz-pred-opt.is-mine{ border-color: #7c3aed; outline: 2px solid rgba(124,58,237,0.3); }
.wpz-pred-pct-fill{
  position: absolute; inset: 0 auto 0 0;
  background: rgba(147,51,234,0.14);
  pointer-events: none;
}
.wpz-pred-opt-label, .wpz-pred-pct{ position: relative; }
.wpz-pred-pct{ font-variant-numeric: tabular-nums; color: #7c3aed; }
.wpz-pred-foot{ margin-top: 6px; font-size: 10px; color: #7c6ba8; }

/* ── 🎫 Scratch-card reveal ── */
.wpz-scratch-overlay{
  position: fixed; inset: 0; z-index: 12500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,16,24,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wpz-scratch-card{
  width: 320px;
  border-radius: 18px;
  background: linear-gradient(160deg, #2a2416, #3a3118);
  border: 1px solid rgba(255,217,119,0.4);
  box-shadow: 0 24px 60px rgba(8,16,32,0.55);
  padding: 16px;
  text-align: center;
  animation: wpzTnIn 250ms ease;
}
.wpz-scratch-head{
  font-size: 14px; font-weight: 900; letter-spacing: 0.06em;
  color: #ffd977; margin-bottom: 10px;
}
.wpz-scratch-zone{
  position: relative;
  width: 280px; height: 120px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,217,119,0.3);
}
.wpz-scratch-prize{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(circle at 50% 40%, #4a3d12, #2b240d);
}
/* Third strike of the [hidden]-vs-display trap: the mystery prize starts
   hidden and was still intercepting the box's clicks. */
.wpz-scratch-prize[hidden]{ display: none !important; }
.wpz-scratch-prize b{ font-size: 26px; font-weight: 900; color: #ffd977; }
.wpz-scratch-prize span{ font-size: 11.5px; color: #d8c184; }
.wpz-scratch-prize.is-won b{ animation: wpzScratchWin 600ms ease; text-shadow: 0 0 18px rgba(255,217,119,0.8); }
@keyframes wpzScratchWin{
  0%{ transform: scale(0.6); }
  60%{ transform: scale(1.25); }
  100%{ transform: scale(1); }
}
.wpz-scratch-foil{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: grab;
  touch-action: none;
  transition: opacity 500ms ease;
}
.wpz-scratch-foil:active{ cursor: grabbing; }
.wpz-scratch-foil.is-revealed{ opacity: 0; pointer-events: none; }
.wpz-scratch-close{ margin-top: 12px; }

/* ── 🎁 Mystery-box reveal (shares the scratch card chrome) ── */
.wpz-mystery-stage{
  position: relative;
  width: 280px; height: 120px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.wpz-mystery-box{
  border: 0; background: transparent; cursor: pointer;
  font-size: 64px; line-height: 1;
  animation: wpzBoxRattle 1.1s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4));
}
.wpz-mystery-box.is-opening{
  animation: wpzBoxOpen 750ms ease-in forwards;
}
.wpz-mystery-prize{ position: absolute; inset: 0; border-radius: 12px; }
@keyframes wpzBoxRattle{
  0%, 100%{ transform: rotate(0deg) translateY(0); }
  20%{ transform: rotate(-6deg) translateY(-2px); }
  40%{ transform: rotate(5deg) translateY(0); }
  60%{ transform: rotate(-4deg) translateY(-1px); }
  80%{ transform: rotate(3deg) translateY(0); }
}
@keyframes wpzBoxOpen{
  0%{ transform: scale(1) rotate(0deg); }
  40%{ transform: scale(1.25) rotate(-8deg); }
  70%{ transform: scale(1.45) rotate(6deg); opacity: 1; }
  100%{ transform: scale(2.1) rotate(0deg); opacity: 0; }
}
/* CHARGE: the tap winds it up — violent jitter before the blast. */
.wpz-mystery-box.is-charging{
  animation: wpzBoxCharge 90ms linear infinite;
}
@keyframes wpzBoxCharge{
  0%{ transform: translate(-2px, 1px) rotate(-11deg) scale(1.08); }
  25%{ transform: translate(2px, -1px) rotate(9deg) scale(1.1); }
  50%{ transform: translate(-1px, -2px) rotate(-8deg) scale(1.12); }
  75%{ transform: translate(2px, 2px) rotate(12deg) scale(1.1); }
  100%{ transform: translate(-2px, 1px) rotate(-10deg) scale(1.08); }
}
/* The whole card feels the rumble, then kicks on the blast. */
.wpz-scratch-card.is-shaking{ animation: wpzCardRumble 110ms linear infinite; }
@keyframes wpzCardRumble{
  0%{ transform: translate(1px, 0); } 25%{ transform: translate(-1px, 1px); }
  50%{ transform: translate(1px, -1px); } 75%{ transform: translate(-1px, 0); }
  100%{ transform: translate(1px, 1px); }
}
.wpz-scratch-card.is-blasted{ animation: wpzCardKick 450ms cubic-bezier(0.22, 1.4, 0.36, 1); }
@keyframes wpzCardKick{
  0%{ transform: scale(0.96); }
  45%{ transform: scale(1.05); }
  100%{ transform: scale(1); }
}
.wpz-scratch-card.is-leaving{
  transition: transform 200ms ease, opacity 200ms ease;
  transform: scale(0.9);
  opacity: 0;
}
/* BLAST: white-gold flash + expanding shockwave ring. */
.wpz-mystery-flash{
  position: absolute; left: 50%; top: 55%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd977 45%, transparent 70%);
  pointer-events: none;
  animation: wpzFlash 500ms ease-out forwards;
}
@keyframes wpzFlash{
  0%{ transform: scale(0.4); opacity: 1; }
  60%{ transform: scale(9); opacity: 0.9; }
  100%{ transform: scale(13); opacity: 0; }
}
.wpz-mystery-wave{
  position: absolute; left: 50%; top: 55%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 3px solid rgba(255, 217, 119, 0.85);
  pointer-events: none;
  animation: wpzWave 700ms cubic-bezier(0.16, 0.8, 0.4, 1) forwards;
}
@keyframes wpzWave{
  0%{ transform: scale(0.3); opacity: 1; border-width: 4px; }
  100%{ transform: scale(11); opacity: 0; border-width: 1px; }
}
/* Collect bounces in and begs to be pressed. */
.wpz-scratch-close{
  animation: wpzCollectIn 420ms cubic-bezier(0.22, 1.5, 0.36, 1);
}
.wpz-scratch-close:hover{ transform: scale(1.06); }
.wpz-scratch-close:active{ transform: scale(0.94); }
@keyframes wpzCollectIn{
  0%{ transform: scale(0.4) translateY(8px); opacity: 0; }
  100%{ transform: scale(1) translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .wpz-mystery-box, .wpz-mystery-box.is-opening, .wpz-mystery-box.is-charging,
  .wpz-scratch-card.is-shaking, .wpz-scratch-card.is-blasted,
  .wpz-mystery-flash, .wpz-mystery-wave, .wpz-scratch-close{ animation: none; }
}

/* ── 🌟 One-shot message effects (XP shop) ── */
.message-bubble.is-fx-golden{
  background: linear-gradient(135deg, #fff3cf, #ffe08a) !important;
  border: 1px solid rgba(216, 164, 49, 0.55) !important;
  color: #4d3a08 !important;
  box-shadow: 0 0 18px rgba(255, 213, 106, 0.55), 0 4px 14px rgba(180, 130, 20, 0.25) !important;
  animation: wpzGoldenGlow 2.2s ease-in-out infinite;
}
@keyframes wpzGoldenGlow{
  0%, 100%{ box-shadow: 0 0 14px rgba(255,213,106,0.45), 0 4px 14px rgba(180,130,20,0.25); }
  50%{ box-shadow: 0 0 26px rgba(255,213,106,0.75), 0 4px 14px rgba(180,130,20,0.25); }
}
.message-bubble.is-fx-confetti{ position: relative; overflow: visible !important; }
/* Burst layer: a zero-size anchor OUTSIDE the bubble (the bubble's inner
   HTML gets rewritten asynchronously and would eat the particles). */
.wpz-fx-host{ position: relative; }
.wpz-confetti-layer{
  position: absolute;
  width: 0; height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 5;
}
.wpz-confetti-bit{
  position: absolute;
  left: 0; top: 0;
  font-size: 13px;
  pointer-events: none;
  opacity: 0;
  animation: wpzConfettiFly 1.9s cubic-bezier(0.22, 0.9, 0.4, 1) forwards;
}
.wpz-confetti-bit.is-paper{
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(255,255,255,0.25);
}
/* Up on a burst, drift sideways, tumble back down — cheap gravity. */
@keyframes wpzConfettiFly{
  0%{ opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }
  8%{ opacity: 1; }
  42%{ opacity: 1; transform: translate(calc(var(--cx, 40px) * 0.6), var(--up, -80px)) scale(1.05) rotate(calc(var(--cr, 180deg) * 0.45)); }
  100%{ opacity: 0; transform: translate(var(--cx, 40px), var(--fall, 50px)) scale(0.85) rotate(var(--cr, 180deg)); }
}
/* The bubble itself announces the pop: one golden shockwave ring. */
.message-bubble.is-fx-confetti{
  animation: wpzConfettiRing 900ms ease-out 1;
}
@keyframes wpzConfettiRing{
  0%{ box-shadow: 0 0 0 0 rgba(255, 217, 119, 0.75); }
  100%{ box-shadow: 0 0 0 28px rgba(255, 217, 119, 0); }
}
@media (prefers-reduced-motion: reduce){
  .message-bubble.is-fx-golden, .message-bubble.is-fx-confetti{ animation: none; }
  .wpz-confetti-bit{ display: none; }
}

/* ── 🏷️ Custom title ── */
.wpz-profile-title{
  margin-top: 5px;
  font-size: 12.5px;
  font-style: italic;
  font-weight: 700;
  color: #6d8195;
  letter-spacing: 0.01em;
}
.wpz-shop-title-input,
.wpz-shop-beer-input{
  width: 100%; box-sizing: border-box;
  padding: 7px 10px; border-radius: 9px;
  border: 1px solid rgba(90,167,255,0.3);
  font: inherit; font-size: 12px; color: #17334d;
  background: #fff;
}
/* Live character count for the custom title — sits under its own input so
   the cap is visible before you hit it, not after the field goes dead. */
.wpz-shop-count{
  display: block;
  margin: 3px 2px 0 0;
  text-align: right;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: #8ba0b3;
}
.wpz-shop-count.is-full{ color: #d08a2c; font-weight: 700; }

/* ── ⚙️ Profile prefs section (injected into the editor) ── */
.wpz-prefs-section{
  margin-top: 14px; padding: 12px;
  border-radius: 12px;
  background: rgba(90,167,255,0.07);
  border: 1px solid rgba(90,167,255,0.18);
}
.wpz-prefs-title{ font-size: 12.5px; font-weight: 900; color: #1a4d8a; margin-bottom: 8px; }
.wpz-prefs-toggle{
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #2c4a68; padding: 4px 0; cursor: pointer;
}
.wpz-prefs-note{ margin-top: 6px; font-size: 10px; color: #8ba3ba; }

/* ── ⏳ Lucky-spin countdown line ── */
.wpz-spin-next{
  margin-top: 8px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: #ffd977;
}

/* ── 🏅 Earned badge pills (profile "Badges:" row) ── */
.wpz-db-badge{
  background: rgba(109, 129, 149, 0.14);
  border: 1px solid rgba(109, 129, 149, 0.3);
  color: #47637e;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.wpz-champ-badge{
  background: linear-gradient(135deg, #ffe9b8 0%, #ffd47e 100%);
  border: 1px solid rgba(216, 164, 49, 0.45);
  color: #6b4d0c;
  font-weight: 900;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 8px rgba(216, 164, 49, 0.25);
}
html[data-theme="dark"] .wpz-db-badge{
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.3);
  color: #b6c6d6;
}
html[data-theme="dark"] .wpz-champ-badge{
  background: linear-gradient(135deg, #574413, #7a5c14);
  border-color: rgba(255, 217, 119, 0.5);
  color: #ffe9ad;
}

/* ── 🛠️ Admin extras ── */
.admin-xp-row{ display: flex; gap: 6px; margin-bottom: 8px; }
.admin-xp-history{
  max-height: 190px; overflow-y: auto;
  margin-bottom: 8px; padding: 8px 10px;
  border-radius: 10px;
  background: rgba(90,167,255,0.06);
  border: 1px solid rgba(90,167,255,0.16);
}
.admin-xp-history[hidden]{ display: none !important; }
.admin-xp-htitle{
  font-size: 10.5px; font-weight: 900; letter-spacing: 0.06em;
  text-transform: uppercase; color: #6d8195; margin-bottom: 6px;
}
.admin-xp-hrow{
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11.5px; padding: 2px 0;
}
.admin-xp-hrow.is-empty{ color: #8ba3ba; }
.admin-xp-hlabel{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2c4a68; }
.admin-xp-hamt{ flex: 0 0 auto; font-weight: 900; font-variant-numeric: tabular-nums; color: #16a34a; }
.admin-xp-hamt.is-neg{ color: #dc2626; }
.admin-xp-hwhen{ flex: 0 0 auto; font-size: 10px; color: #8ba3ba; }
.admin-xp-row input{ flex: 1 1 auto; min-width: 0; }
.admin-pred-list{ display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.admin-pred-list:empty{ display: none; }
.admin-pred-row{
  border-radius: 10px; padding: 8px 10px;
  background: rgba(147,51,234,0.06);
  border: 1px solid rgba(147,51,234,0.18);
}
.admin-pred-q{ font-size: 12px; font-weight: 800; color: #4c1d95; margin-bottom: 6px; }
.admin-pred-meta{ font-size: 10px; font-weight: 700; color: #7c6ba8; margin-left: 6px; }
.admin-pred-settle{ display: flex; gap: 6px; }
.admin-pred-settle select{ flex: 1 1 auto; min-width: 0; }
#adminSectionEvents #predQ, #adminSectionEvents #predOpts{
  width: 100%; box-sizing: border-box; margin-bottom: 8px;
  font: inherit; font-size: 12px;
  padding: 7px 9px; border-radius: 9px;
  border: 1px solid rgba(90,167,255,0.25);
}

@media (prefers-reduced-motion: reduce){
  .wpz-streak-pill.is-at-risk, .wpz-tn-card{ animation: none !important; }
}

/* ── Nav squeeze rescue ──
   .main-menu-row is a nowrap flex row that also shares its strip with the
   topbar tools (bell, dice, 🔥 pill). When width runs out (narrow window,
   wide "VIP MEMBER" chip, extra tools) the .session-links cluster used to
   get squeezed to less than one button wide and stack into a 1-wide
   VERTICAL column with mid-word chip wrapping ("whole design messed up",
   Aug 2026). These rules are NOT in a media query on purpose: flex-wrap
   only engages when space actually runs out, nowrap chips are correct at
   every width, and a breakpoint guess already missed once (the squeeze
   also happened above 1300px for accounts with wider chips). */
.main-menu-row{ flex-wrap: wrap !important; row-gap: 8px !important; }
.main-menu-left{ flex-wrap: wrap !important; flex: 1 1 auto !important; min-width: 0 !important; }
.session-links{ flex: 1 1 auto !important; min-width: 0 !important; flex-wrap: wrap !important; row-gap: 8px !important; }
.session-link, .main-menu-label{ white-space: nowrap !important; }
.main-menu-right{ margin-left: auto !important; }
/* Below ~1300px there is no honest way to fit six chips + VIP MEMBER +
   Book WPZ + the topbar tools on one line, and a wrapped second band read
   as broken. The MAIN MENU hover dropdown already contains Merchandise /
   WPZ Limited / Newsletter / Download — so the inline copies hide and the
   strip stays ONE tidy row: MAIN MENU · TOUR DATES · VIP · Book WPZ. */
@media (max-width: 1300px){
  /* Doubled-up selector on purpose: index.html's inline <style> blocks
     (v43-v48) come AFTER the styles.css <link> and set
     `.session-links{display:flex !important}` — equal specificity would
     lose the cascade, so this one outranks it. */
  .main-menu-left .session-links{ display: none !important; }
}

/* MAIN MENU trigger resurrection. The brand-home-link wrapper sets
   pointer-events:none on the whole title stack and only elements that
   explicitly re-enable themselves survive (session links, Book WPZ do —
   the MAIN MENU chip never did). Every mouseenter/click in the v53 menu
   wiring was therefore dead at EVERY width: the dropdown could not open
   at all. */
.main-menu-trigger-wrap, .main-menu-trigger{ pointer-events: auto !important; }

/* ══════════════════════════════════════════════════════════════════════════
   🐧🍺 DRUNKEN PENGUIN — the arcade window
   Same glass chrome as the WPZ Limited card, sized around the 480×640 stage.
   ══════════════════════════════════════════════════════════════════════════ */
.wpz-game-win{
  position: fixed; inset: 0; margin: auto; z-index: 2147483647;
  width: min(900px, calc(100vw - 32px));
  height: fit-content; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.99);
  border: 1px solid rgba(79, 149, 216, 0.22);
  box-shadow: 0 24px 60px rgba(8, 22, 39, 0.34);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0; transform: translateY(10px) scale(0.96);
  transition: opacity 160ms ease, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wpz-game-win.is-in{ opacity: 1; transform: none; }
.wpz-game-win.hidden{ display: none !important; }
.wpz-game-head{ display: flex; align-items: center; gap: 10px; padding: 0 4px 10px; }
.wpz-game-title{ flex: 1 1 auto; font-size: 15px; font-weight: 900; color: #17334d; }
.wpz-game-close{
  width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(90, 167, 255, 0.1); color: #6d8195; font-size: 13px;
}
.wpz-game-close:hover{ background: rgba(90, 167, 255, 0.22); color: #17334d; }
.wpz-game-body{ display: flex; gap: 14px; min-height: 0; }
.wpz-game-stage{
  position: relative; flex: 0 0 auto;
  width: min(480px, 56vw);
  border-radius: 18px; overflow: hidden;
  background: #123a63;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
  touch-action: none;
}
.wpz-game-canvas{ display: block; width: 100%; height: auto; cursor: pointer; }
.wpz-game-overlay{
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(6, 20, 36, 0.72);
  backdrop-filter: blur(3px);
}
.wpz-game-overlay.is-on{ display: flex; }
.wpz-game-card{
  width: min(320px, 86%); text-align: center; color: #fff;
  animation: wpzGameCardIn 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wpzGameCardIn{ from{ opacity:0; transform: translateY(12px) scale(0.94);} to{ opacity:1; transform:none; } }
.wpz-game-card-icon{ font-size: 40px; }
.wpz-game-card h3{ margin: 6px 0 8px; font-size: 17px; font-weight: 900; }
.wpz-game-card p{ margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.82); }
.wpz-game-keys{ font-size: 12px; color: rgba(255,255,255,0.8); margin-bottom: 12px; }
.wpz-game-keys kbd{
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: rgba(255,255,255,0.16); font-weight: 900;
}
.wpz-game-start{
  padding: 11px 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: #ffc439; color: #3b2a00; font-size: 14px; font-weight: 900;
  box-shadow: 0 8px 22px rgba(255, 196, 57, 0.32);
  transition: filter 120ms ease, transform 120ms ease;
}
.wpz-game-start:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.wpz-game-score{ font-size: 46px; font-weight: 900; line-height: 1.05; }
.wpz-game-substats{ font-size: 11.5px; color: rgba(255,255,255,0.7); margin-bottom: 10px; }
.wpz-game-record{
  margin: 4px 0 8px; padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 900; color: #3b2a00; background: #ffc439;
  animation: wpzGameRecordPulse 1.1s ease-in-out infinite;
}
@keyframes wpzGameRecordPulse{ 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.05);} }
.wpz-game-pb{ margin: 4px 0 8px; font-size: 12.5px; font-weight: 900; color: #ffe19a; }
.wpz-game-xp{ font-size: 13px; font-weight: 900; color: #7ee6a8; margin-bottom: 4px; }
.wpz-game-rank{ font-size: 11.5px; color: rgba(255,255,255,0.75); margin-bottom: 10px; }
.wpz-game-note{ font-size: 11px; color: #ffd0a0; margin: 6px 0 10px; }
.wpz-game-best{ margin-top: 10px; font-size: 11.5px; color: rgba(255,255,255,0.7); }
.wpz-game-side{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wpz-game-board-head{ display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; font-weight: 900; color: #17334d; }
.wpz-game-tabs{ display: flex; gap: 5px; }
.wpz-game-tabs button{
  flex: 1 1 auto; padding: 6px 4px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(90, 167, 255, 0.28); background: transparent;
  font-size: 11px; font-weight: 800; color: #6d8195;
}
.wpz-game-tabs button.is-on{ background: #4a93ff; border-color: #4a93ff; color: #fff; }
.wpz-game-board{ flex: 1 1 auto; overflow-y: auto; min-height: 180px; }
.wpz-game-board-empty{ padding: 20px 8px; text-align: center; font-size: 12px; color: #8ba3ba; }
.wpz-game-row{
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 10px; font-size: 12.5px;
}
.wpz-game-row:nth-child(odd){ background: rgba(90, 167, 255, 0.06); }
.wpz-game-row.is-me{ background: rgba(255, 196, 57, 0.2); font-weight: 900; }
.wpz-game-row.is-outside{ margin-top: 6px; border: 1px dashed rgba(214, 154, 32, 0.5); }
.wpz-game-rank-cell{ flex: 0 0 34px; font-weight: 900; color: #6d8195; }
.wpz-game-name{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #17334d; }
.wpz-game-pts{ flex: 0 0 auto; font-weight: 900; color: #2f6fae; }
.wpz-game-help{
  padding: 10px 12px; border-radius: 12px;
  background: rgba(90, 167, 255, 0.08);
  font-size: 11px; line-height: 1.6; color: #5b7794;
}
.wpz-game-btn{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  /* `width:100%` + zero side margin made this button 12px wider than the XP
     Shop above it and visibly out of line. In a flex column, stretching is
     the default — matching the shop's side margins matches its width. */
  margin: 0 6px; padding: 10px 14px;
  border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, #1d5c8f, #2b7fae);
  color: #fff; font-size: 13px; font-weight: 900;
  box-shadow: 0 8px 20px rgba(29, 92, 143, 0.28);
  transition: filter 120ms ease, transform 120ms ease;
}
.wpz-game-btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.wpz-game-btn[hidden]{ display: none !important; }

@media (max-width: 820px){
  .wpz-game-body{ flex-direction: column; }
  .wpz-game-stage{ width: 100%; }
  .wpz-game-side{ max-height: 34vh; }
}

html[data-theme="dark"] .wpz-game-win{
  background: rgba(32, 32, 33, 0.98);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.65);
}
html[data-theme="dark"] .wpz-game-title,
html[data-theme="dark"] .wpz-game-board-head,
html[data-theme="dark"] .wpz-game-name{ color: #e8f2ff; }
html[data-theme="dark"] .wpz-game-close{ background: rgba(255,255,255,0.08); color: #93a7bb; }
html[data-theme="dark"] .wpz-game-close:hover{ background: rgba(255,255,255,0.16); color: #e8f2ff; }
html[data-theme="dark"] .wpz-game-row:nth-child(odd){ background: rgba(255,255,255,0.04); }
html[data-theme="dark"] .wpz-game-row.is-me{ background: rgba(255, 196, 57, 0.16); }
html[data-theme="dark"] .wpz-game-rank-cell{ color: #93a7bb; }
html[data-theme="dark"] .wpz-game-pts{ color: #7cc0ff; }
html[data-theme="dark"] .wpz-game-help{ background: rgba(255,255,255,0.05); color: #93a7bb; }
html[data-theme="dark"] .wpz-game-tabs button{ color: #93a7bb; border-color: rgba(255,255,255,0.16); }
html[data-theme="dark"] .wpz-game-tabs button.is-on{ background: #4a93ff; border-color: #4a93ff; color: #fff; }

/* ── 👑 Penguin of the Month — the 250k XP pedestal banner ───────────────── */
.wpz-pedestal{
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 8px;
  padding: 9px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 196, 57, 0.24), rgba(255, 226, 150, 0.14));
  border: 1px solid rgba(214, 154, 32, 0.42);
  box-shadow: 0 6px 18px rgba(214, 154, 32, 0.16);
  font-size: 12.5px; color: #6a5320;
  animation: wpzPedestalIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* The hidden attribute must beat the flex display — the trap that has bitten
   every styled hideable in this codebase. */
.wpz-pedestal[hidden]{ display: none !important; }
@keyframes wpzPedestalIn{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: none; } }
.wpz-pedestal-crown{ font-size: 17px; animation: wpzPedestalShine 2.6s ease-in-out infinite; }
@keyframes wpzPedestalShine{ 0%,100%{ transform: rotate(-7deg) scale(1); } 50%{ transform: rotate(7deg) scale(1.13); } }
.wpz-pedestal-text{ flex: 1 1 auto; min-width: 0; }
.wpz-pedestal-name{
  cursor: pointer; color: #a4650b; font-weight: 900;
  text-decoration: underline; text-decoration-color: rgba(164, 101, 11, 0.35);
}
.wpz-pedestal-name:hover{ text-decoration-color: currentColor; }
.wpz-pedestal-days{
  flex: 0 0 auto; padding: 3px 10px; border-radius: 999px;
  background: rgba(214, 154, 32, 0.2);
  font-size: 10.5px; font-weight: 900; color: #8a6a15;
}
html[data-theme="dark"] .wpz-pedestal{
  background: linear-gradient(135deg, rgba(214, 154, 32, 0.22), rgba(214, 154, 32, 0.08));
  border-color: rgba(214, 154, 32, 0.4);
  color: #d8c79c;
}
html[data-theme="dark"] .wpz-pedestal-name{ color: #ffd479; }
html[data-theme="dark"] .wpz-pedestal-days{ background: rgba(214, 154, 32, 0.24); color: #ffe6a8; }

/* ── 👑 Penguin of the Month — staff card in Mod tools ───────────────────── */
.admin-ped-refund{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: #5b7794; white-space: nowrap;
}
.admin-ped-history{ margin-top: 10px; }
.admin-ped-history-head{
  font-size: 10.5px; font-weight: 900; letter-spacing: 0.06em;
  text-transform: uppercase; color: #8ba3ba; margin-bottom: 6px;
}
.admin-ped-empty{ font-size: 11.5px; color: #8ba3ba; padding: 6px 0; }
.admin-ped-row{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.3fr) minmax(0, 1.2fr);
  gap: 8px; align-items: center;
  padding: 6px 10px; border-radius: 9px;
  font-size: 11.5px; color: #5b7794;
}
.admin-ped-row:nth-child(odd){ background: rgba(90, 167, 255, 0.06); }
.admin-ped-row.is-live{
  background: rgba(255, 196, 57, 0.18);
  border: 1px solid rgba(214, 154, 32, 0.32);
}
.admin-ped-name{ font-weight: 900; color: #17334d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-ped-paid{ font-weight: 900; color: #a4650b; white-space: nowrap; }
.admin-ped-when{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-ped-why{ font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="dark"] .admin-ped-refund,
html[data-theme="dark"] .admin-ped-row{ color: #93a7bb; }
html[data-theme="dark"] .admin-ped-name{ color: #e8f2ff; }
html[data-theme="dark"] .admin-ped-paid{ color: #ffd479; }
html[data-theme="dark"] .admin-ped-row:nth-child(odd){ background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .admin-ped-row.is-live{ background: rgba(214, 154, 32, 0.16); }
html[data-theme="dark"] .admin-ped-history-head{ color: #7b8ea1; }

/* ── # Member-created channels in the rooms list ─────────────────────────── */
.channel-group-head{
  padding: 10px 10px 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8ba3ba;
}
.channel-vip-dot{ flex: 0 0 auto; font-size: 11px; }
.channel-del{
  flex: 0 0 auto;
  width: 20px; height: 20px;
  display: none;
  align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 11px; font-weight: 900;
  color: #d2564f;
  background: rgba(210, 86, 79, 0.12);
}
.channel-item:hover .channel-del,
.channel-item.active .channel-del{ display: flex; }
.channel-del:hover{ background: rgba(210, 86, 79, 0.26); }
.channel-new-btn{
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: calc(100% - 12px);
  margin: 8px 6px 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px dashed rgba(90, 167, 255, 0.42);
  background: rgba(90, 167, 255, 0.07);
  color: #2f6fae;
  font-size: 12px; font-weight: 900;
  cursor: pointer;
}
.channel-new-btn:hover{ background: rgba(90, 167, 255, 0.16); }
.channel-new-btn span{ font-size: 14px; }
html[data-theme="dark"] .channel-group-head{ color: #7b8ea1; }
html[data-theme="dark"] .channel-new-btn{
  border-color: rgba(124, 192, 255, 0.32);
  background: rgba(124, 192, 255, 0.08);
  color: #7cc0ff;
}
html[data-theme="dark"] .channel-new-btn:hover{ background: rgba(124, 192, 255, 0.16); }

/* ── # Channels card (admin panel → Mod tools) ───────────────────────────── */
.admin-chan-select{
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(90, 167, 255, 0.28);
  background: rgba(255, 255, 255, 0.7);
  font-size: 12px; font-weight: 700; color: #17334d;
}
.admin-chan-list{ margin-top: 10px; }
.admin-chan-head{
  font-size: 10.5px; font-weight: 900; letter-spacing: 0.06em;
  text-transform: uppercase; color: #8ba3ba; margin-bottom: 6px;
}
.admin-chan-row{
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr) auto auto;
  gap: 8px; align-items: center;
  padding: 6px 10px; border-radius: 9px; font-size: 11.5px; color: #5b7794;
}
.admin-chan-row:nth-child(odd){ background: rgba(90, 167, 255, 0.06); }
.admin-chan-name{ font-weight: 900; color: #17334d; }
.admin-chan-topic{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-chan-tag{ font-size: 10px; font-weight: 800; white-space: nowrap; }
.admin-chan-builtin{ font-size: 10px; font-style: italic; color: #8ba3ba; }
.admin-chan-del{
  padding: 4px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(210, 86, 79, 0.4);
  background: transparent; color: #d2564f;
  font-size: 10.5px; font-weight: 900;
}
.admin-chan-del:hover{ background: rgba(210, 86, 79, 0.14); }
html[data-theme="dark"] .admin-chan-select{ background: rgba(255,255,255,0.08); color: #e8f2ff; border-color: rgba(255,255,255,0.16); }
html[data-theme="dark"] .admin-chan-row{ color: #93a7bb; }
html[data-theme="dark"] .admin-chan-row:nth-child(odd){ background: rgba(255,255,255,0.04); }
html[data-theme="dark"] .admin-chan-name{ color: #e8f2ff; }
html[data-theme="dark"] .admin-chan-head{ color: #7b8ea1; }
html[data-theme="dark"] .admin-chan-del{ color: #ff8079; }

/* ══════════════════════════════════════════════════════════════════════════
   🎁 SALE DRAMA — escalating intensity while a gifting sale is LIVE
   ══════════════════════════════════════════════════════════════════════════
   Four elements, deliberately not equal. Each one is louder than the last so
   the eye is pulled along a path: notice the banner → glance at your VIP chip
   → land on the CTA → and the little composer 🎁 is the one screaming.

   Everything is gated on body.wpz-vip-sale-live, so the room is completely
   calm the rest of the time — which is the only reason the loud version
   reads as an event rather than as noise. Reduced-motion opt-out at the end.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. The banner: theatrical, not frantic ──────────────────────────────
   A slow breathing glow, a gold sheen travelling across the whole bar, and
   a border that cycles brightness. It's the widest element on screen, so
   movement here has to stay gentle or it makes the page feel unstable. */
body.wpz-vip-sale-live .wpz-vipsale-banner.is-live{
  background-image:
    linear-gradient(100deg, rgba(255,255,255,0) 18%, rgba(255,255,255,0.55) 40%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(255,233,168,0.95), rgba(246,193,60,0.92));
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation:
    wpzChampagneBannerIn 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
    wpzSaleBannerBreathe 2.4s ease-in-out infinite,
    wpzSaleSheen 3.2s linear infinite;
}
@keyframes wpzSaleBannerBreathe{
  0%, 100% {
    box-shadow: 0 6px 18px rgba(216,164,49,0.32), 0 0 0 0 rgba(255,214,102,0.5);
    border-color: rgba(216,164,49,0.55);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 10px 34px rgba(216,164,49,0.7), 0 0 0 6px rgba(255,214,102,0.16);
    border-color: rgba(255,226,140,0.95);
    transform: scale(1.006);
  }
}
/* The countdown itself ticks — a heartbeat on the number that's running out. */
body.wpz-vip-sale-live .wpz-vipsale-banner .wpz-dxp-clock{
  animation: wpzSaleTick 1s steps(1, end) infinite;
}
/* The ⭐ on the left of the banner spins up on every heartbeat. */
body.wpz-vip-sale-live .wpz-vipsale-banner .wpz-dxp-star{
  display: inline-block;
  animation: wpzSaleStarSpin 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes wpzSaleStarSpin{
  0%, 60%, 100% { transform: rotate(0deg) scale(1); }
  68%  { transform: rotate(22deg)  scale(1.35); }
  76%  { transform: rotate(-18deg) scale(1.2); }
  86%  { transform: rotate(6deg)   scale(1.1); }
}
@keyframes wpzSaleTick{
  0%, 60%, 100% { transform: scale(1); filter: none; }
  30%           { transform: scale(1.07); filter: brightness(1.25); }
}

/* ── 2. ⭐ VIP MEMBER: crazy — never still ───────────────────────────────
   Continuous shimmer plus a bounce every few seconds, and the star spins on
   the bounce. This chip is normally inert, so any life at all reads loudly. */
body.wpz-vip-sale-live #vipMenuBtn{
  position: relative;
  background-image:
    linear-gradient(100deg, rgba(255,255,255,0) 15%, rgba(255,255,255,0.85) 38%, rgba(255,255,255,0) 58%),
    linear-gradient(135deg, #f6d055, #d8a431);
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation:
    wpzSaleSheen 1.9s linear infinite,
    wpzVipChipBounce 2.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite,
    wpzVipChipGlow 1.5s ease-in-out infinite;
}
@keyframes wpzVipChipBounce{
  0%, 55%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  60% { transform: translateY(-5px) rotate(-4deg) scale(1.08); }
  66% { transform: translateY(1px)  rotate(3deg)  scale(0.97); }
  72% { transform: translateY(-3px) rotate(-2deg) scale(1.04); }
  80% { transform: translateY(0)    rotate(0deg)  scale(1); }
}
@keyframes wpzVipChipGlow{
  0%, 100% { box-shadow: 0 4px 14px rgba(216,164,49,0.35), 0 0 0 0 rgba(255,214,102,0.6); }
  50%      { box-shadow: 0 6px 22px rgba(216,164,49,0.75), 0 0 0 7px rgba(255,214,102,0.14); }
}

/* ── 3. 🎁 Gift VIP CTA: nuts — the loudest thing you're meant to CLICK ──
   Fast sheen, a hard wobble every 2s, and a rim that flashes white-hot. */
body.wpz-vip-sale-live .wpz-vipsale-cta{
  animation:
    wpzSaleSheen 1.4s linear infinite,
    wpzCtaGoNuts 2s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite,
    wpzCtaRim 1.1s ease-in-out infinite;
}
@keyframes wpzCtaGoNuts{
  0%, 42%, 100% { transform: rotate(0deg) scale(1); }
  46% { transform: rotate(-7deg) scale(1.14); }
  50% { transform: rotate(7deg)  scale(1.14); }
  54% { transform: rotate(-6deg) scale(1.12); }
  58% { transform: rotate(5deg)  scale(1.1); }
  62% { transform: rotate(-3deg) scale(1.06); }
  66% { transform: rotate(2deg)  scale(1.03); }
  70% { transform: rotate(0deg)  scale(1); }
}
@keyframes wpzCtaRim{
  0%, 100% { box-shadow: 0 4px 12px rgba(120,88,12,0.3), 0 0 0 0 rgba(255,255,255,0.9); }
  50%      { box-shadow: 0 6px 20px rgba(120,88,12,0.5), 0 0 0 4px rgba(255,245,200,0.55); }
}

/* ── 4. The composer 🎁: almost explodes ─────────────────────────────────
   The smallest element gets the biggest treatment, because it can move hard
   without disturbing the layout around it: a constant rumble, a violent
   scale burst every 1.8s, and TWO shockwave rings firing out of it. The %
   badge counter-rotates so the whole thing looks like it's rattling apart. */
body.wpz-vip-sale-live #giftVipToggle,
body.wpz-vip-sale-live .chan-window-gift-btn{
  position: relative;
  z-index: 2;
  animation:
    wpzGiftRumble 0.32s linear infinite,
    wpzGiftBurst 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes wpzGiftRumble{
  0%, 100% { translate: 0 0; }
  25%      { translate: -0.7px 0.5px; }
  50%      { translate: 0.7px -0.5px; }
  75%      { translate: -0.5px -0.6px; }
}
@keyframes wpzGiftBurst{
  0%, 55%, 100% { scale: 1; rotate: 0deg; }
  60% { scale: 1.42; rotate: -12deg; }
  64% { scale: 0.9;  rotate: 10deg; }
  68% { scale: 1.28; rotate: -8deg; }
  73% { scale: 0.96; rotate: 5deg; }
  78% { scale: 1.12; rotate: -3deg; }
  85% { scale: 1;    rotate: 0deg; }
}
/* Shockwaves: ::before is the ring, and the existing ::after "%" badge gets
   its own life so the two never fight over one pseudo-element. */
body.wpz-vip-sale-live #giftVipToggle::before,
body.wpz-vip-sale-live .chan-window-gift-btn::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(255, 214, 102, 0.9);
  animation: wpzGiftShockwave 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes wpzGiftShockwave{
  0%, 55% { transform: scale(0.9); opacity: 0; border-width: 3px; }
  60%     { transform: scale(1);   opacity: 1; border-width: 3px; }
  100%    { transform: scale(2.6); opacity: 0; border-width: 0.5px; }
}
body.wpz-vip-sale-live #giftVipToggle::after,
body.wpz-vip-sale-live .chan-window-gift-btn::after{
  animation: wpzGiftBadgeSpin 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes wpzGiftBadgeSpin{
  0%, 55%, 100% { transform: rotate(0deg) scale(1); }
  60%  { transform: rotate(18deg)  scale(1.5); }
  66%  { transform: rotate(-14deg) scale(1.25); }
  74%  { transform: rotate(8deg)   scale(1.35); }
  82%  { transform: rotate(0deg)   scale(1); }
}

/* Reduced motion: keep every gold cue, drop every movement. Somebody who
   asked their OS to stop animations should still see there's a sale on. */
@media (prefers-reduced-motion: reduce){
  body.wpz-vip-sale-live .wpz-vipsale-banner.is-live,
  body.wpz-vip-sale-live #vipMenuBtn,
  body.wpz-vip-sale-live .wpz-vipsale-cta,
  body.wpz-vip-sale-live #giftVipToggle,
  body.wpz-vip-sale-live .chan-window-gift-btn,
  body.wpz-vip-sale-live #giftVipToggle::before,
  body.wpz-vip-sale-live .chan-window-gift-btn::before,
  body.wpz-vip-sale-live #giftVipToggle::after,
  body.wpz-vip-sale-live .chan-window-gift-btn::after,
  body.wpz-vip-sale-live .wpz-vipsale-banner .wpz-dxp-clock,
  body.wpz-vip-sale-live .wpz-vipsale-banner .wpz-dxp-star{
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   🎁 GIFT CHECKOUT — entrance choreography + a CTA that stays alive
   ══════════════════════════════════════════════════════════════════════════
   The dialog appeared fully-formed and then sat perfectly still, which reads
   as a form rather than as an offer. Two layers now:

   • An ENTRANCE that plays once — backdrop fades, card springs in, then the
     contents cascade in top-to-bottom on a stagger. Movement that resolves
     is what makes something feel built rather than merely displayed.
   • A LOOP on the two things that matter after that: the sale pill and the
     pay button. Everything else settles and stays settled, so the eye keeps
     being handed back to the money.
   ═══════════════════════════════════════════════════════════════════════ */

.wpz-gift-overlay{ animation: wpzGiftFade 220ms ease both; }
@keyframes wpzGiftFade{ from { opacity: 0; } to { opacity: 1; } }

.wpz-gift-card{
  animation: wpzGiftCardIn 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  /* A gold rim that breathes — subtle, and it never moves the layout. */
  will-change: transform;
}
@keyframes wpzGiftCardIn{
  0%   { opacity: 0; transform: translateY(26px) scale(0.9)  rotate(-1.2deg); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.02) rotate(0.4deg); }
  100% { opacity: 1; transform: none; }
}

/* Contents cascade. Each child waits a little longer than the one above it,
   so the card assembles itself instead of arriving all at once. */
.wpz-gift-card > *{ animation: wpzGiftRise 380ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.wpz-gift-card > .wpz-gift-close{ animation-delay: 340ms; }
.wpz-gift-card > .wpz-gift-sale{ animation-delay: 120ms; }
.wpz-gift-card > .wpz-gift-title{ animation-delay: 170ms; }
.wpz-gift-card > .wpz-gift-sub{ animation-delay: 210ms; }
.wpz-gift-card > .wpz-gift-options{ animation-delay: 250ms; }
.wpz-gift-card > .wpz-gift-anon{ animation-delay: 320ms; }
.wpz-gift-card > .wpz-gift-go{ animation-delay: 360ms; }
.wpz-gift-card > .wpz-gift-note{ animation-delay: 420ms; }
@keyframes wpzGiftRise{
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Each price tile pops in on its own beat, left to right. */
.wpz-gift-options .wpz-gift-opt{
  animation: wpzGiftTilePop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.wpz-gift-options .wpz-gift-opt:nth-child(1){ animation-delay: 300ms; }
.wpz-gift-options .wpz-gift-opt:nth-child(2){ animation-delay: 360ms; }
.wpz-gift-options .wpz-gift-opt:nth-child(3){ animation-delay: 420ms; }
.wpz-gift-options .wpz-gift-opt:nth-child(4){ animation-delay: 480ms; }
@keyframes wpzGiftTilePop{
  0%   { opacity: 0; transform: translateY(10px) scale(0.86); }
  70%  { opacity: 1; transform: translateY(0)    scale(1.06); }
  100% { opacity: 1; transform: none; }
}
/* Picking a tier should feel like a decision landing. */
.wpz-gift-opt{ transition: transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 140ms ease; }
.wpz-gift-opt:hover{ transform: translateY(-2px); }
/* The tier that starts selected must still play its entrance — a bare
   `animation: wpzGiftPick` here replaced the pop instead of joining it, so
   the first tile arrived flat while its neighbours bounced in. */
.wpz-gift-opt.is-active{
  animation: wpzGiftTilePop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
             wpzGiftPick 320ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms;
}
@keyframes wpzGiftPick{
  0%   { transform: scale(1); }
  45%  { transform: scale(1.09); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* The red -50% flags snap in after their tile has landed, then keep a slow
   tilt so the discount never becomes wallpaper. */
.wpz-gift-opt.has-sale::after{
  animation: wpzGiftFlagIn 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 560ms both,
             wpzGiftFlagTilt 3s ease-in-out 1.1s infinite;
  transform-origin: 80% 80%;
}
@keyframes wpzGiftFlagIn{
  0%   { opacity: 0; transform: scale(0) rotate(-40deg); }
  60%  { opacity: 1; transform: scale(1.25) rotate(9deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes wpzGiftFlagTilt{
  0%, 82%, 100% { transform: rotate(0deg) scale(1); }
  86%  { transform: rotate(-9deg) scale(1.12); }
  92%  { transform: rotate(7deg)  scale(1.08); }
  96%  { transform: rotate(-3deg) scale(1.03); }
}

/* The GIFT SALE pill keeps a travelling shine — it's the promise the rest of
   the dialog is built on, so it never fully goes quiet. */
.wpz-gift-sale{
  background-size: 220% 100%;
  animation: wpzGiftRise 380ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both,
             wpzGiftSaleShine 2.6s linear 500ms infinite,
             wpzGiftSalePulse 2.2s ease-in-out 500ms infinite;
}
@keyframes wpzGiftSaleShine{
  0%   { background-position: 180% 0; }
  100% { background-position: -60% 0; }
}
@keyframes wpzGiftSalePulse{
  0%, 100% { box-shadow: 0 4px 14px rgba(216,164,49,0.42); }
  50%      { box-shadow: 0 6px 22px rgba(216,164,49,0.8), 0 0 0 5px rgba(255,214,102,0.15); }
}

/* The pay button: a heartbeat plus a sheen sweeping the gold. This is the one
   element allowed to keep asking for attention indefinitely. */
.wpz-gift-go{
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.7) 42%, rgba(255,255,255,0) 62%),
    linear-gradient(135deg, #ffd977, #f3a93c);
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: wpzGiftRise 380ms cubic-bezier(0.22, 1, 0.36, 1) 360ms both,
             wpzGiftGoSheen 2.4s linear 800ms infinite,
             wpzGiftGoBeat 2.4s ease-in-out 800ms infinite;
}
@keyframes wpzGiftGoSheen{
  0%   { background-position: 180% 0, 0 0; }
  100% { background-position: -70% 0, 0 0; }
}
@keyframes wpzGiftGoBeat{
  0%, 70%, 100% { transform: scale(1);    box-shadow: 0 8px 18px rgba(216,134,44,0.35); }
  76%           { transform: scale(1.035); box-shadow: 0 12px 28px rgba(216,134,44,0.6); }
  84%           { transform: scale(0.995); box-shadow: 0 8px 18px rgba(216,134,44,0.4); }
  90%           { transform: scale(1.015); box-shadow: 0 10px 22px rgba(216,134,44,0.5); }
}
.wpz-gift-go:hover{ transform: translateY(-1px) scale(1.02); animation-play-state: paused; }

/* Reduced motion: the dialog simply appears, and stays perfectly still. */
@media (prefers-reduced-motion: reduce){
  .wpz-gift-overlay,
  .wpz-gift-card,
  .wpz-gift-card > *,
  .wpz-gift-options .wpz-gift-opt,
  .wpz-gift-opt.is-active,
  .wpz-gift-opt.has-sale::after,
  .wpz-gift-sale,
  .wpz-gift-go{ animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   🚂 GIFT TRAIN — the shared meter and its ten celebrations
   ══════════════════════════════════════════════════════════════════════════ */
.wpz-train{
  flex: 0 0 auto;
  margin: 0 0 8px;
  padding: 9px 14px 10px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,196,57,0.18), rgba(255,122,69,0.12));
  border: 1px solid rgba(216,164,49,0.42);
  box-shadow: 0 6px 20px rgba(216,164,49,0.18);
  animation: wpzTrainIn 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wpzTrainIn{ from{ opacity:0; transform: translateY(-10px) scale(0.97);} to{ opacity:1; transform:none; } }
.wpz-train.is-levelup{ animation: wpzTrainLevelPop 900ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes wpzTrainLevelPop{
  0%{ transform: scale(1); }
  25%{ transform: scale(1.045); box-shadow: 0 12px 40px rgba(255,196,57,0.75); }
  55%{ transform: scale(0.99); }
  100%{ transform: scale(1); }
}
.wpz-train.is-ending{ animation: wpzTrainUrgent 0.9s ease-in-out infinite; }
@keyframes wpzTrainUrgent{
  0%,100%{ border-color: rgba(216,164,49,0.42); }
  50%{ border-color: rgba(255,90,78,0.95); box-shadow: 0 6px 26px rgba(255,90,78,0.4); }
}
.wpz-train-head{ display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 900; color: #6a5320; }
.wpz-train-loco{ font-size: 15px; animation: wpzTrainChug 1.6s ease-in-out infinite; }
@keyframes wpzTrainChug{ 0%,100%{ transform: translateX(0) rotate(0); } 50%{ transform: translateX(3px) rotate(-4deg); } }
.wpz-train-level{ padding: 1px 8px; border-radius: 999px; background: rgba(216,164,49,0.28); }
.wpz-train-level b{ font-size: 13px; }
.wpz-train-level small{ opacity: 0.65; }
.wpz-train-title{ letter-spacing: 0.09em; }
.wpz-train-count{ flex: 1 1 auto; text-align: right; opacity: 0.85; }
.wpz-train-clock{
  padding: 2px 9px; border-radius: 999px;
  background: rgba(20,14,2,0.75); color: #ffe19a;
  font-variant-numeric: tabular-nums;
}
.wpz-train-clock.is-urgent{ background: #d0342c; color: #fff; animation: wpzTrainTick 1s steps(1,end) infinite; }
@keyframes wpzTrainTick{ 0%,60%,100%{ transform: scale(1);} 30%{ transform: scale(1.12);} }
.wpz-train-track{
  position: relative; height: 12px; margin: 7px 0 5px;
  border-radius: 999px; background: rgba(20,14,2,0.35); overflow: visible;
}
.wpz-train-fill{
  height: 100%; border-radius: 999px;
  background-image:
    linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.6) 42%, rgba(255,255,255,0) 62%),
    linear-gradient(90deg, #ffc439, #ff7a45);
  background-size: 220% 100%, 100% 100%;
  transition: width 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: wpzGiftGoSheen 1.8s linear infinite;
  box-shadow: 0 0 14px rgba(255,180,60,0.75);
}
.wpz-train-pips{ position: absolute; inset: -5px 0; display: flex; justify-content: space-between; pointer-events: none; }
.wpz-train-pip{ font-size: 11px; opacity: 0.3; filter: grayscale(1); transition: all 300ms ease; }
.wpz-train-pip.is-done{ opacity: 1; filter: none; transform: scale(1.15); }
.wpz-train-pip.is-next{ opacity: 0.85; filter: none; animation: wpzTrainNextPip 1.4s ease-in-out infinite; }
@keyframes wpzTrainNextPip{ 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.3);} }
.wpz-train-foot{ font-size: 10.5px; color: #8a7440; }
.wpz-train.is-max .wpz-train-fill{ background-image: linear-gradient(90deg, #38e0ff, #7c6bff, #f24b8a, #ffc439); background-size: 300% 100%; animation: wpzTrainRainbow 2.5s linear infinite; }
@keyframes wpzTrainRainbow{ 0%{ background-position: 0 0; } 100%{ background-position: 300% 0; } }

/* ── The celebration stage: fixed, above everything, never clickable ────── */
.wpz-train-stage{ position: fixed; inset: 0; z-index: 2147483646; pointer-events: none; overflow: hidden; }
.wpz-tc{ position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: wpzTcFall linear forwards; }
@keyframes wpzTcFall{ to{ transform: translateY(105vh) rotate(720deg); opacity: 0.2; } }
.wpz-te{ position: absolute; top: -50px; animation: wpzTeFall linear forwards; }
@keyframes wpzTeFall{ to{ transform: translateY(108vh) rotate(180deg); opacity: 0.3; } }
.wpz-tf{ position: absolute; width: 7px; height: 7px; border-radius: 50%; animation: wpzTfBurst 1.1s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes wpzTfBurst{ 0%{ transform: translate(0,0) scale(1); opacity:1; } 100%{ transform: translate(var(--dx), var(--dy)) scale(0.2); opacity:0; } }
.wpz-tp{ position: absolute; left: -60px; animation: wpzTpRun linear forwards; }
@keyframes wpzTpRun{ 0%{ transform: translateX(0) rotate(-8deg);} 50%{ transform: translateX(50vw) rotate(8deg);} 100%{ transform: translateX(110vw) rotate(-8deg);} }
.wpz-tw{ position: absolute; left: 50%; top: 45%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 5px solid rgba(255,214,102,0.95); animation: wpzTwRing 1.05s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes wpzTwRing{ 0%{ transform: scale(0.2); opacity:1; } 100%{ transform: scale(22); opacity:0; border-width:1px; } }
.wpz-tsweep{ position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--c, #ffc439) 50%, transparent 70%); opacity: 0.55; animation: wpzTsweep 1.3s ease-out forwards; }
@keyframes wpzTsweep{ 0%{ transform: translateX(-100%);} 100%{ transform: translateX(100%);} }

/* The shout: what actually tells you which level just landed. */
.wpz-train-shout{
  position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%);
  text-align: center; color: #fff;
  text-shadow: 0 4px 26px rgba(0,0,0,0.75);
  animation: wpzShoutIn 3.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.wpz-train-shout-lvl{ font-size: clamp(38px, 9vw, 96px); font-weight: 900; letter-spacing: -0.02em; color: var(--c, #ffc439); }
.wpz-train-shout-label{ font-size: clamp(16px, 3vw, 34px); font-weight: 900; letter-spacing: 0.08em; }
.wpz-train-shout-sub{ margin-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.35em; opacity: 0.8; }
@keyframes wpzShoutIn{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(0.4) rotate(-6deg); }
  12%{ opacity:1; transform: translate(-50%,-50%) scale(1.15) rotate(2deg); }
  20%{ transform: translate(-50%,-50%) scale(0.98); }
  28%{ transform: translate(-50%,-50%) scale(1.04); }
  80%{ opacity:1; transform: translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform: translate(-50%,-58%) scale(1.08); }
}
.wpz-train-shout.is-max{ animation-duration: 6s; }
.wpz-train-shout.is-max .wpz-train-shout-lvl{
  background: linear-gradient(90deg, #38e0ff, #7c6bff, #f24b8a, #ffc439, #38e0ff);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: wpzTrainRainbow 1.6s linear infinite;
}

/* Screen quake — applied to .window so fixed overlays stay put. */
.wpz-quake{ animation: wpzQuake 0.42s cubic-bezier(0.36,0.07,0.19,0.97) 2; }
.wpz-quake-hard{ animation: wpzQuakeHard 0.36s cubic-bezier(0.36,0.07,0.19,0.97) 4; }
@keyframes wpzQuake{ 0%,100%{ transform: translate(0,0);} 25%{ transform: translate(-4px,2px);} 50%{ transform: translate(4px,-3px);} 75%{ transform: translate(-3px,-2px);} }
@keyframes wpzQuakeHard{ 0%,100%{ transform: translate(0,0) rotate(0);} 20%{ transform: translate(-9px,5px) rotate(-0.5deg);} 40%{ transform: translate(9px,-6px) rotate(0.5deg);} 60%{ transform: translate(-7px,-5px) rotate(-0.3deg);} 80%{ transform: translate(6px,4px) rotate(0.3deg);} }

/* Level 10 dims the whole app so nothing competes with the takeover. */
body.wpz-train-takeover .window{ filter: brightness(0.55) saturate(1.3); transition: filter 400ms ease; }
body.wpz-train-takeover .wpz-train-stage{ background: radial-gradient(circle at 50% 35%, rgba(255,196,57,0.22), rgba(10,6,0,0.55) 70%); }

html[data-theme="dark"] .wpz-train{ background: linear-gradient(135deg, rgba(255,196,57,0.14), rgba(255,122,69,0.08)); }
html[data-theme="dark"] .wpz-train-head{ color: #ffd479; }
html[data-theme="dark"] .wpz-train-foot{ color: #b09a6a; }

@media (prefers-reduced-motion: reduce){
  .wpz-train, .wpz-train-loco, .wpz-train-fill, .wpz-train-pip.is-next,
  .wpz-train.is-levelup, .wpz-train.is-ending, .wpz-train-clock.is-urgent{ animation: none !important; }
  .wpz-quake, .wpz-quake-hard{ animation: none !important; }
  .wpz-train-shout{ animation: wpzShoutFadeOnly 3s ease forwards; }
  @keyframes wpzShoutFadeOnly{ 0%{opacity:0;} 10%,80%{opacity:1;} 100%{opacity:0;} }
}

/* ── The meter itself: much more alive ──────────────────────────────────── */
/* Barber-pole stripes travelling inside the fill. */
.wpz-train-fill::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: 999px;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,0.35) 0 8px,
    rgba(255,255,255,0) 8px 18px);
  animation: wpzTrainStripes 0.9s linear infinite;
}
@keyframes wpzTrainStripes{ 0%{ background-position: 0 0; } 100%{ background-position: 36px 0; } }
.wpz-train-fill{ position: relative; overflow: hidden; }
/* A hot spark riding the leading edge of the fill. */
.wpz-train-fill::after{
  content: "";
  position: absolute; right: -3px; top: 50%;
  width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd977 45%, rgba(255,196,57,0) 70%);
  animation: wpzTrainSpark 1.1s ease-in-out infinite;
}
@keyframes wpzTrainSpark{
  0%, 100% { transform: scale(1);   opacity: 0.9; }
  50%      { transform: scale(1.55); opacity: 1; }
}
/* The level badge counts its own heartbeat. */
.wpz-train-level{ animation: wpzTrainLevelBeat 1.8s ease-in-out infinite; }
@keyframes wpzTrainLevelBeat{
  0%, 100% { transform: scale(1);    background: rgba(216,164,49,0.28); }
  50%      { transform: scale(1.08); background: rgba(216,164,49,0.5); }
}
/* Cleared milestones keep a slow shimmer so the ladder never looks dead. */
.wpz-train-pip.is-done{ animation: wpzTrainPipShine 2.6s ease-in-out infinite; }
@keyframes wpzTrainPipShine{
  0%, 100% { filter: none;                    transform: scale(1.15); }
  50%      { filter: drop-shadow(0 0 6px rgba(255,214,102,0.95)); transform: scale(1.28); }
}
/* The whole bar breathes, and the border cycles. */
.wpz-train{ animation: wpzTrainIn 420ms cubic-bezier(0.34,1.56,0.64,1), wpzTrainBreathe 3s ease-in-out 420ms infinite; }
@keyframes wpzTrainBreathe{
  0%, 100% { box-shadow: 0 6px 20px rgba(216,164,49,0.18); border-color: rgba(216,164,49,0.42); }
  50%      { box-shadow: 0 10px 32px rgba(255,196,57,0.42); border-color: rgba(255,214,102,0.85); }
}
/* Higher levels burn hotter — the bar itself changes temperature as you climb. */
.wpz-train[data-level="4"] .wpz-train-fill,
.wpz-train[data-level="5"] .wpz-train-fill{ background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.3) 0 8px, rgba(255,255,255,0) 8px 18px), linear-gradient(90deg, #ffb703, #ff7a45); }
.wpz-train[data-level="6"] .wpz-train-fill,
.wpz-train[data-level="7"] .wpz-train-fill{ background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.3) 0 8px, rgba(255,255,255,0) 8px 18px), linear-gradient(90deg, #ff7a45, #f24b8a); }
.wpz-train[data-level="8"] .wpz-train-fill,
.wpz-train[data-level="9"] .wpz-train-fill{ background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.35) 0 8px, rgba(255,255,255,0) 8px 18px), linear-gradient(90deg, #c86bff, #7c6bff); }

@media (prefers-reduced-motion: reduce){
  .wpz-tstripe{ display: none !important; }
  .wpz-train-fill::before, .wpz-train-fill::after,
  .wpz-train-level, .wpz-train-pip.is-done, .wpz-train{ animation: none !important; }
}

/* The locomotive rides the front of the fill, travelling the whole banner as
   the ladder is climbed — the pips it passes are the levels already cleared. */
.wpz-train-runner{
  position: absolute;
  top: 50%;
  font-size: 17px;
  line-height: 1;
  transform: translate(-55%, -58%);
  transition: left 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 2px 6px rgba(255, 180, 60, 0.9));
  pointer-events: none;
  z-index: 3;
}
.wpz-train-runner.is-chugging{ animation: wpzRunnerChug 700ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes wpzRunnerChug{
  0%   { transform: translate(-55%, -58%) scale(1)    rotate(0deg); }
  30%  { transform: translate(-55%, -78%) scale(1.35) rotate(-9deg); }
  60%  { transform: translate(-55%, -50%) scale(0.95) rotate(6deg); }
  100% { transform: translate(-55%, -58%) scale(1)    rotate(0deg); }
}
/* The head loco is now redundant as a mover — keep it as a static label mark. */
.wpz-train-head .wpz-train-loco{ animation: none; }
@media (prefers-reduced-motion: reduce){
  .wpz-train-runner{ transition: none; animation: none !important; }
}

/* ── 🎰 The gift-train frame — a swept light border around the viewport ───
   Replaced a row of radial-gradient "bulbs", which read as a fairground
   sign. This is four light BARS: a soft rim that fades inward, plus a bright
   highlight travelling along each one, running clockwise so the four read as
   a single circuit. Corner glints appear as the level climbs.

   Everything scales off custom properties set per level in engagement.js:
   --w (thickness), --lap (sweep speed), --rim (rim brightness), --glow /
   --glowA (inward spill), --sweep (highlight strength), --corner (glint
   opacity). They're a continuous curve, so the frame GROWS with the train
   instead of jumping between hard-coded looks. */
.wpz-vegas{
  position: fixed; inset: 0;
  z-index: 2147483645;
  pointer-events: none;
  --w: 5px; --lap: 3s; --rim: 0.3; --glow: 14px; --glowA: 0.12; --sweep: 0.6; --corner: 0;
  --gold: 255, 205, 92;
}
/* The frame itself: a thin bright line hugging the viewport edge. */
.wpz-vegas-rim{
  position: absolute; inset: 0;
  box-shadow:
    inset 0 0 0 1px rgba(var(--gold), calc(var(--rim) * 0.9)),
    inset 0 0 var(--glow) rgba(var(--gold), var(--glowA)),
    inset 0 0 calc(var(--glow) * 3) rgba(255, 150, 30, calc(var(--glowA) * 0.5));
}
/* Light bars. The base is a gradient fading INTO the page, so the edge has
   depth rather than looking like a taped-on strip. */
.wpz-vegas-edge{ position: absolute; overflow: hidden; }
.wpz-vegas-edge::before,
.wpz-vegas-edge::after{ content: ""; position: absolute; inset: 0; }
.wpz-vegas-edge::before{ opacity: var(--rim); }
/* ::after is the travelling highlight. */
.wpz-vegas-edge::after{
  opacity: var(--sweep);
  mix-blend-mode: screen;
}
.wpz-vegas-edge.is-top, .wpz-vegas-edge.is-bottom{ left: 0; right: 0; height: var(--w); }
.wpz-vegas-edge.is-left, .wpz-vegas-edge.is-right{ top: 0; bottom: 0; width: var(--w); }
.wpz-vegas-edge.is-top{ top: 0; }
.wpz-vegas-edge.is-bottom{ bottom: 0; }
.wpz-vegas-edge.is-left{ left: 0; }
.wpz-vegas-edge.is-right{ right: 0; }

.wpz-vegas-edge.is-top::before{ background: linear-gradient(to bottom, rgba(var(--gold), 0.95), rgba(var(--gold), 0)); }
.wpz-vegas-edge.is-bottom::before{ background: linear-gradient(to top, rgba(var(--gold), 0.95), rgba(var(--gold), 0)); }
.wpz-vegas-edge.is-left::before{ background: linear-gradient(to right, rgba(var(--gold), 0.95), rgba(var(--gold), 0)); }
.wpz-vegas-edge.is-right::before{ background: linear-gradient(to left, rgba(var(--gold), 0.95), rgba(var(--gold), 0)); }

.wpz-vegas-edge.is-top::after,
.wpz-vegas-edge.is-bottom::after{
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 30%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.15) 70%, transparent 100%);
  background-size: 42% 100%;
  background-repeat: no-repeat;
}
.wpz-vegas-edge.is-left::after,
.wpz-vegas-edge.is-right::after{
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.15) 30%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.15) 70%, transparent 100%);
  background-size: 100% 42%;
  background-repeat: no-repeat;
}
/* Clockwise circuit: top → right → bottom → left, each starting a quarter of
   a lap after the one before, so one highlight appears to travel the ring. */
.wpz-vegas-edge.is-top::after   { animation: wpzRimX  var(--lap) linear infinite; }
.wpz-vegas-edge.is-right::after { animation: wpzRimY  var(--lap) linear infinite; animation-delay: calc(var(--lap) * -0.75); }
.wpz-vegas-edge.is-bottom::after{ animation: wpzRimXr var(--lap) linear infinite; animation-delay: calc(var(--lap) * -0.5); }
.wpz-vegas-edge.is-left::after  { animation: wpzRimYr var(--lap) linear infinite; animation-delay: calc(var(--lap) * -0.25); }
@keyframes wpzRimX  { from { background-position: -45% 0; } to { background-position: 145% 0; } }
@keyframes wpzRimXr { from { background-position: 145% 0; } to { background-position: -45% 0; } }
@keyframes wpzRimY  { from { background-position: 0 -45%; } to { background-position: 0 145%; } }
@keyframes wpzRimYr { from { background-position: 0 145%; } to { background-position: 0 -45%; } }

/* Corner glints — they fade in with the level, which is most of what makes
   the high end feel like a different object rather than the same one louder. */
.wpz-vegas-corner{
  position: absolute;
  width: calc(var(--w) * 9); height: calc(var(--w) * 9);
  opacity: var(--corner);
  background: radial-gradient(circle at var(--cx, 0%) var(--cy, 0%), rgba(255,255,255,0.9), rgba(var(--gold), 0.55) 35%, rgba(var(--gold), 0) 70%);
  animation: wpzRimCorner 2.2s ease-in-out infinite;
}
.wpz-vegas-corner.is-tl{ top: 0; left: 0; --cx: 0%; --cy: 0%; }
.wpz-vegas-corner.is-tr{ top: 0; right: 0; --cx: 100%; --cy: 0%; animation-delay: 0.55s; }
.wpz-vegas-corner.is-br{ bottom: 0; right: 0; --cx: 100%; --cy: 100%; animation-delay: 1.1s; }
.wpz-vegas-corner.is-bl{ bottom: 0; left: 0; --cx: 0%; --cy: 100%; animation-delay: 1.65s; }
@keyframes wpzRimCorner{ 0%, 100% { transform: scale(0.9); opacity: calc(var(--corner) * 0.55); } 50% { transform: scale(1.12); opacity: var(--corner); } }

/* Inner spill so the frame lights the room. */
.wpz-vegas-glow{
  position: absolute; inset: 0;
  box-shadow: inset 0 0 calc(var(--glow) * 4) rgba(var(--gold), calc(var(--glowA) * 0.7));
  animation: wpzRimBreathe 2.6s ease-in-out infinite;
}
@keyframes wpzRimBreathe{ 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

/* Level 7+: a SECOND highlight running the other way, so the circuit reads
   as busy rather than merely fast. */
.wpz-vegas.is-hot .wpz-vegas-edge.is-top::before,
.wpz-vegas.is-hot .wpz-vegas-edge.is-bottom::before{
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%),
    linear-gradient(to bottom, rgba(var(--gold), 0.95), rgba(var(--gold), 0));
  background-size: 30% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  animation: wpzRimXr calc(var(--lap) * 1.6) linear infinite;
}
.wpz-vegas.is-hot .wpz-vegas-edge.is-left::before,
.wpz-vegas.is-hot .wpz-vegas-edge.is-right::before{
  background-image:
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%),
    linear-gradient(to right, rgba(var(--gold), 0.95), rgba(var(--gold), 0));
  background-size: 100% 30%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  animation: wpzRimYr calc(var(--lap) * 1.6) linear infinite;
}

/* Colour temperature climbs with the level — gold, to amber, to rose, and
   finally the cyan/violet of the level-10 takeover. */
.wpz-vegas[data-level="5"], .wpz-vegas[data-level="6"]{ --gold: 255, 170, 70; }
.wpz-vegas[data-level="7"], .wpz-vegas[data-level="8"]{ --gold: 255, 120, 90; }
.wpz-vegas[data-level="9"]{ --gold: 242, 110, 160; }
.wpz-vegas.is-max{ --gold: 120, 210, 255; }
.wpz-vegas.is-max .wpz-vegas-rim{ animation: wpzRimMax 1.2s ease-in-out infinite; }
@keyframes wpzRimMax{
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(120,210,255,0.9), inset 0 0 var(--glow) rgba(120,210,255,0.5), inset 0 0 calc(var(--glow) * 4) rgba(124,107,255,0.35); }
  50%      { box-shadow: inset 0 0 0 3px rgba(255,255,255,1),   inset 0 0 calc(var(--glow) * 2) rgba(56,224,255,0.8), inset 0 0 calc(var(--glow) * 6) rgba(242,75,138,0.45); }
}

@media (prefers-reduced-motion: reduce){
  .wpz-vegas-edge::after, .wpz-vegas-edge::before,
  .wpz-vegas-corner, .wpz-vegas-glow, .wpz-vegas-rim{ animation: none !important; }
}

/* ── 🚂 Ambient chaos while a gift train runs ────────────────────────────
   Short, violent, and always self-cancelling — every class below is removed
   within ~260ms, so nothing can leave the app stuck in a broken transform.
   Applied to .window (never <body>) so fixed overlays and the light frame
   stay exactly where they are while the room shakes underneath them. */
.wpz-twitch{ animation: wpzTwitch 140ms steps(2, end); }
@keyframes wpzTwitch{
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-6px, 3px); }
  50%  { transform: translate(5px, -4px); }
  75%  { transform: translate(-3px, -2px); }
  100% { transform: translate(0,0); }
}
.wpz-glitch{ animation: wpzGlitch 180ms steps(3, end); }
@keyframes wpzGlitch{
  0%   { transform: none; filter: none; }
  20%  { transform: translate(-9px, 0) skewX(-2.5deg); filter: hue-rotate(-28deg) saturate(1.6); }
  45%  { transform: translate(8px, 2px) skewX(2deg);   filter: hue-rotate(24deg) saturate(1.4); }
  70%  { transform: translate(-4px, -3px) skewX(-1deg); filter: contrast(1.3); }
  100% { transform: none; filter: none; }
}
.wpz-slam{ animation: wpzSlam 260ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes wpzSlam{
  0%   { transform: scale(1); }
  30%  { transform: scale(1.022) rotate(0.35deg); }
  60%  { transform: scale(0.992) rotate(-0.25deg); }
  100% { transform: scale(1); }
}

/* One-shot particles fired by the chaos loop. */
.wpz-chaos-flash{
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,240,190,0.55), rgba(255,196,57,0.12) 55%, transparent 75%);
  animation: wpzChaosFlash 300ms ease-out forwards;
}
@keyframes wpzChaosFlash{ 0%{ opacity: 0; } 15%{ opacity: 1; } 100%{ opacity: 0; } }
.wpz-chaos-scan{
  position: absolute; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,240,190,0.95), transparent);
  box-shadow: 0 0 22px rgba(255,214,102,0.9);
  animation: wpzChaosScan 880ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes wpzChaosScan{ 0%{ top: -4px; opacity: 0; } 12%{ opacity: 1; } 90%{ opacity: 1; } 100%{ top: 100%; opacity: 0; } }
.wpz-chaos-glint{
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 4px rgba(255,214,102,0.95);
  animation: wpzChaosGlint 680ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes wpzChaosGlint{ 0%{ transform: scale(0); opacity: 0; } 30%{ transform: scale(2.4); opacity: 1; } 100%{ transform: scale(0.4); opacity: 0; } }
.wpz-chaos-invert{
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.9);
  mix-blend-mode: difference;
  animation: wpzChaosInvert 200ms steps(2, end) forwards;
}
@keyframes wpzChaosInvert{ 0%{ opacity: 0; } 40%{ opacity: 0.85; } 100%{ opacity: 0; } }

@media (prefers-reduced-motion: reduce){
  .wpz-twitch, .wpz-glitch, .wpz-slam{ animation: none !important; }
  .wpz-chaos-flash, .wpz-chaos-scan, .wpz-chaos-glint, .wpz-chaos-invert{ display: none !important; }
}

/* ── 🎁 THE GIFTER'S MOMENT — centre stage, no interaction ───────────────
   Front and centre, one at a time, held long enough to actually read. The
   name is built from three stacked copies of the same letters: a blurred
   glow BED underneath, the chrome FACE on top, and a fading REFLECTION
   below — that layering is what stops it looking like plain bold text.
   Hold time comes in as --hold-ms so a backlog can shorten it. */
.wpz-gifter{
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  padding: 26px 54px 22px;
  border-radius: 26px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(70,45,4,0.72), rgba(18,12,2,0.88) 70%);
  border: 2px solid rgba(255,214,102,0.7);
  box-shadow:
    0 30px 90px rgba(0,0,0,0.65),
    0 0 70px rgba(255,196,57,0.4),
    inset 0 0 40px rgba(255,196,57,0.14);
  backdrop-filter: blur(10px);
  animation:
    wpzGifterIn 520ms cubic-bezier(0.34, 1.56, 0.64, 1),
    wpzGifterHold 900ms ease-in-out 520ms infinite alternate,
    wpzGifterOut 560ms cubic-bezier(0.5, 0, 0.75, 0) forwards;
  animation-delay: 0ms, 520ms, var(--hold-ms, 4600ms);
}
@keyframes wpzGifterIn{
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(-4deg); filter: blur(10px); }
  55%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(1.2deg); filter: blur(0); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
/* A slow breath while it holds, so it never freezes into a screenshot. */
@keyframes wpzGifterHold{
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -50%) scale(1.022); }
}
@keyframes wpzGifterOut{
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(2deg); filter: blur(14px); }
}
.wpz-gifter-tag{
  font-size: 13px; font-weight: 900; letter-spacing: 0.3em;
  color: #ffd479; text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(255,180,60,0.8);
  animation: wpzGifterTagIn 420ms cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes wpzGifterTagIn{ 0%{ opacity:0; transform: translateY(-12px); letter-spacing: 0.8em; } 100%{ opacity:1; transform:none; letter-spacing: 0.3em; } }

/* ── The name ────────────────────────────────────────────────────────── */
.wpz-gifter-namewrap{ position: relative; margin: 6px 0 8px; }
.wpz-gifter-name{
  font-size: clamp(44px, 7.5vw, 96px);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.02;
  white-space: nowrap;
}
.wpz-gifter.is-big .wpz-gifter-name{ font-size: clamp(54px, 9vw, 116px); }
.wpz-gifter.is-huge .wpz-gifter-name{ font-size: clamp(62px, 11vw, 140px); }
/* Layer 1 — the glow bed. */
.wpz-gifter-name.is-bed{
  position: absolute; inset: 0;
  color: #ffb703;
  filter: blur(16px) saturate(1.6);
  opacity: 0.9;
  animation: wpzNameBed 1.8s ease-in-out infinite;
}
@keyframes wpzNameBed{ 0%,100%{ opacity: 0.55; filter: blur(16px); } 50%{ opacity: 1; filter: blur(24px); } }
/* Layer 2 — the chrome face, with a hard dark outline so it reads on any
   background and a highlight sweeping through the metal. */
.wpz-gifter-name.is-face{
  position: relative;
  background: linear-gradient(180deg,
    #fffdf2 0%, #ffe9a8 26%, #f0b429 48%, #b3760a 52%, #ffd977 72%, #fff7dc 100%);
  background-size: 100% 240%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px rgba(60,36,0,0.85);
  paint-order: stroke fill;
  filter: drop-shadow(0 6px 0 rgba(90,52,0,0.55)) drop-shadow(0 14px 26px rgba(0,0,0,0.6));
  animation: wpzNameChrome 2.6s linear infinite;
}
@keyframes wpzNameChrome{ 0%{ background-position: 0 0; } 100%{ background-position: 0 240%; } }
/* Layer 3 — the reflection. */
.wpz-gifter-name.is-reflect{
  position: absolute; left: 0; right: 0; top: 100%;
  transform: scaleY(-0.55) translateY(6px);
  transform-origin: top;
  background: linear-gradient(180deg, rgba(255,214,102,0.5), rgba(255,214,102,0));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: blur(1.5px);
  opacity: 0.5;
  pointer-events: none;
}
/* Every letter lands on its own beat: dropped in, over-rotated, snapped. */
.wpz-gname-ch{
  display: inline-block;
  animation: wpzGnameDrop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes wpzGnameDrop{
  0%   { opacity: 0; transform: translateY(-70px) rotate(-24deg) scale(2.1); }
  50%  { opacity: 1; transform: translateY(10px)  rotate(7deg)  scale(0.88); }
  72%  { transform: translateY(-4px) rotate(-3deg) scale(1.06); }
  100% { opacity: 1; transform: none; }
}
.wpz-gifter-sub{
  font-size: 14px; font-weight: 800;
  color: rgba(255,226,160,0.85);
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
/* Light rays behind the card — the thing that makes it feel like a payout
   rather than a notification. */
.wpz-gifter-rays{
  position: absolute; left: 50%; top: 50%;
  width: 190%; height: 190%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg,
    rgba(255,214,102,0.16) 0deg 7deg, rgba(255,214,102,0) 7deg 20deg);
  animation: wpzRaysSpin 9s linear infinite, wpzRaysFade 900ms ease-out both;
  pointer-events: none;
  z-index: -2;
}
@keyframes wpzRaysSpin{ to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes wpzRaysFade{ 0%{ opacity: 0; } 100%{ opacity: 1; } }
.wpz-gifter.is-huge .wpz-gifter-rays{ background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.2) 0deg 6deg, rgba(255,214,102,0) 6deg 16deg); }
.wpz-gifter-burst{
  position: absolute; inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,190,0.5), rgba(255,196,57,0) 68%);
  animation: wpzGifterBurst 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none; z-index: -1;
}
@keyframes wpzGifterBurst{
  0%   { opacity: 0; transform: scale(0.3); }
  30%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.8); }
}
@media (max-width: 980px){
  .wpz-gifter{ padding: 18px 22px 14px; width: min(92vw, 520px); }
  .wpz-gifter-tag{ font-size: 11px; letter-spacing: 0.2em; }
}
@media (prefers-reduced-motion: reduce){
  .wpz-gifter, .wpz-gname-ch, .wpz-gifter-burst, .wpz-gifter-rays,
  .wpz-gifter-name.is-bed, .wpz-gifter-name.is-face, .wpz-gifter-tag{ animation: none !important; }
  .wpz-gifter-name.is-face{ color: #ffd479; -webkit-text-fill-color: #ffd479; }
}
/* ── 🚂 Ambient chaos while a gift train runs ────────────────────────────
   Short, violent, and always self-cancelling — every class below is removed
   within ~260ms, so nothing can leave the app stuck in a broken transform.
   Applied to .window (never <body>) so fixed overlays and the light frame
   stay exactly where they are while the room shakes underneath them. */
.wpz-twitch{ animation: wpzTwitch 140ms steps(2, end); }
@keyframes wpzTwitch{
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-6px, 3px); }
  50%  { transform: translate(5px, -4px); }
  75%  { transform: translate(-3px, -2px); }
  100% { transform: translate(0,0); }
}
.wpz-glitch{ animation: wpzGlitch 180ms steps(3, end); }
@keyframes wpzGlitch{
  0%   { transform: none; filter: none; }
  20%  { transform: translate(-9px, 0) skewX(-2.5deg); filter: hue-rotate(-28deg) saturate(1.6); }
  45%  { transform: translate(8px, 2px) skewX(2deg);   filter: hue-rotate(24deg) saturate(1.4); }
  70%  { transform: translate(-4px, -3px) skewX(-1deg); filter: contrast(1.3); }
  100% { transform: none; filter: none; }
}
.wpz-slam{ animation: wpzSlam 260ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes wpzSlam{
  0%   { transform: scale(1); }
  30%  { transform: scale(1.022) rotate(0.35deg); }
  60%  { transform: scale(0.992) rotate(-0.25deg); }
  100% { transform: scale(1); }
}

/* One-shot particles fired by the chaos loop. */
.wpz-chaos-flash{
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,240,190,0.55), rgba(255,196,57,0.12) 55%, transparent 75%);
  animation: wpzChaosFlash 300ms ease-out forwards;
}
@keyframes wpzChaosFlash{ 0%{ opacity: 0; } 15%{ opacity: 1; } 100%{ opacity: 0; } }
.wpz-chaos-scan{
  position: absolute; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,240,190,0.95), transparent);
  box-shadow: 0 0 22px rgba(255,214,102,0.9);
  animation: wpzChaosScan 880ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes wpzChaosScan{ 0%{ top: -4px; opacity: 0; } 12%{ opacity: 1; } 90%{ opacity: 1; } 100%{ top: 100%; opacity: 0; } }
.wpz-chaos-glint{
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 4px rgba(255,214,102,0.95);
  animation: wpzChaosGlint 680ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes wpzChaosGlint{ 0%{ transform: scale(0); opacity: 0; } 30%{ transform: scale(2.4); opacity: 1; } 100%{ transform: scale(0.4); opacity: 0; } }
.wpz-chaos-invert{
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.9);
  mix-blend-mode: difference;
  animation: wpzChaosInvert 200ms steps(2, end) forwards;
}
@keyframes wpzChaosInvert{ 0%{ opacity: 0; } 40%{ opacity: 0.85; } 100%{ opacity: 0; } }

@media (prefers-reduced-motion: reduce){
  .wpz-twitch, .wpz-glitch, .wpz-slam{ animation: none !important; }
  .wpz-chaos-flash, .wpz-chaos-scan, .wpz-chaos-glint, .wpz-chaos-invert{ display: none !important; }
}


/* ── 🚂 Winding down — the room returns to normal over a few seconds ─────
   An instant cut at the end of a train reads as something breaking. The
   chaos stops at once (a twitch after the party is over is just a glitch),
   but the light frame, its glow and the meter ease out together. */
.wpz-vegas.is-fading{
  animation: wpzVegasFade 3.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes wpzVegasFade{
  0%   { opacity: 1; filter: saturate(1); }
  35%  { opacity: 0.75; }
  100% { opacity: 0; filter: saturate(0.4); }
}
/* Slow the circuit to a stop rather than freezing it mid-lap. */
.wpz-vegas.is-fading .wpz-vegas-edge::after,
.wpz-vegas.is-fading .wpz-vegas-edge::before{ animation-duration: 5s !important; }
.wpz-vegas.is-fading .wpz-vegas-corner,
.wpz-vegas.is-fading .wpz-vegas-glow{ animation-duration: 4s !important; }

.wpz-train.is-leaving{
  animation: wpzTrainLeave 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  pointer-events: none;
}
@keyframes wpzTrainLeave{
  0%   { opacity: 1; transform: none; filter: none; }
  40%  { opacity: 0.85; transform: scale(0.995); }
  100% { opacity: 0; transform: translateY(-14px) scale(0.96); filter: saturate(0.3) blur(2px); }
}
/* While the room is settling, hold the ambient wash but let it drain away. */
body.wpz-train-fading .wpz-train-stage{ transition: background 3s ease; background: transparent !important; }
@media (prefers-reduced-motion: reduce){
  .wpz-vegas.is-fading, .wpz-train.is-leaving{ animation: none !important; opacity: 0; }
}

/* ── 🍾 A champagne pop outranks everything else on screen ────────────────
   The €1000 tier was rendering in the same slim strip as an ordinary €25
   support message and sitting UNDER the VIP sale bar in visual weight. It's
   the biggest thing that can happen on this server, so it now reads that way:
   taller, heavier type, a brighter frame and a permanent shimmer. Only the
   champagne variant gets this — `.is-support` (ordinary donations) keeps the
   slim strip, which is what makes the contrast mean something. */
.wpz-champagne-banner:not(.is-support){
  gap: 14px;
  margin: 8px 10px 8px;
  padding: 18px 24px;
  border-radius: 20px;
  border-width: 2px;
  border-color: rgba(255, 214, 102, 0.95);
  font-size: 18px;
  font-weight: 900;
  box-shadow:
    0 14px 44px rgba(255, 195, 66, 0.5),
    0 0 60px rgba(255, 180, 60, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation:
    wpzChampagneBannerIn 460ms cubic-bezier(0.34, 1.56, 0.64, 1),
    wpzPopBannerPulse 2.1s ease-in-out 460ms infinite;
}
@keyframes wpzPopBannerPulse{
  0%, 100% { box-shadow: 0 14px 44px rgba(255,195,66,0.45), 0 0 50px rgba(255,180,60,0.28), inset 0 1px 0 rgba(255,255,255,0.9); }
  50%      { box-shadow: 0 18px 60px rgba(255,195,66,0.75), 0 0 90px rgba(255,180,60,0.5),  inset 0 1px 0 rgba(255,255,255,0.95); }
}
.wpz-champagne-banner:not(.is-support) .wpz-champagne-banner-icon{
  font-size: 32px;
  animation: wpzPopIconTilt 2.4s ease-in-out infinite;
}
@keyframes wpzPopIconTilt{
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(10deg) scale(1.16); }
}
.wpz-champagne-banner:not(.is-support) .wpz-champagne-banner-text{
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.wpz-champagne-banner:not(.is-support) .wpz-champagne-banner-thanks{
  font-size: 14px;
  padding: 9px 18px;
}
@media (max-width: 980px){
  .wpz-champagne-banner:not(.is-support){ padding: 13px 15px; font-size: 15px; }
  .wpz-champagne-banner:not(.is-support) .wpz-champagne-banner-text{ font-size: 15px; }
  .wpz-champagne-banner:not(.is-support) .wpz-champagne-banner-icon{ font-size: 24px; }
}
@media (prefers-reduced-motion: reduce){
  .wpz-champagne-banner:not(.is-support),
  .wpz-champagne-banner:not(.is-support) .wpz-champagne-banner-icon{ animation: none !important; }
}

/* ══ 🍻 "Buy the room a round" celebration ═══════════════════════════════════
   Full-screen and unmissable, because the purchase is a public gesture. The
   stage never takes pointer events — the room keeps chatting underneath. */
.wpz-round-stage{
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2147483600;          /* above the profile modal — nothing outranks a round */
  overflow: hidden;
  contain: layout paint;
}
.wpz-round-stage:not(.is-live){ display: none; }

/* Amber wash — the room turns the colour of a pub at closing time. */
.wpz-rn-wash{
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,196,57,0.34), rgba(255,150,30,0.14) 42%, transparent 70%),
    linear-gradient(180deg, rgba(120,66,0,0.20), rgba(60,30,0,0.30));
  animation: wpzRnWash 7.4s ease-out forwards;
}
@keyframes wpzRnWash{
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* The mugs. They swing in, hang for a beat, then CLINK. */
.wpz-rn-scene{
  position: absolute; left: 50%; top: 40%;
  width: 1px; height: 1px;
}
.wpz-rn-mug{
  position: absolute; top: -70px;
  font-size: 130px; line-height: 1;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,0.45));
  will-change: transform;
}
.wpz-rn-mug.is-left { right: 8px;  transform-origin: 100% 100%; animation: wpzRnInL 0.72s cubic-bezier(.2,.9,.3,1.35) both; }
.wpz-rn-mug.is-right{ left: 8px;   transform-origin: 0% 100%;   animation: wpzRnInR 0.72s cubic-bezier(.2,.9,.3,1.35) both; }
@keyframes wpzRnInL{
  0%   { transform: translateX(-70vw) rotate(-46deg) scale(0.7); opacity: 0; }
  70%  { opacity: 1; }
  100% { transform: translateX(0) rotate(-16deg) scale(1); opacity: 1; }
}
@keyframes wpzRnInR{
  0%   { transform: translateX(70vw) rotate(46deg) scale(0.7) scaleX(-1); opacity: 0; }
  70%  { opacity: 1; }
  100% { transform: translateX(0) rotate(16deg) scale(1) scaleX(-1); opacity: 1; }
}
/* The impact: they snap together, recoil, then part. */
.wpz-rn-scene.is-clink .wpz-rn-mug.is-left { animation: wpzRnClinkL 1.5s cubic-bezier(.3,1.6,.4,1) both; }
.wpz-rn-scene.is-clink .wpz-rn-mug.is-right{ animation: wpzRnClinkR 1.5s cubic-bezier(.3,1.6,.4,1) both; }
@keyframes wpzRnClinkL{
  0%   { transform: translateX(0) rotate(-16deg) scale(1); }
  12%  { transform: translateX(34px) rotate(10deg) scale(1.14); }
  30%  { transform: translateX(-26px) rotate(-24deg) scale(1.04); }
  50%  { transform: translateX(6px) rotate(-12deg) scale(1); }
  100% { transform: translateX(-30px) rotate(-20deg) scale(0.96); }
}
@keyframes wpzRnClinkR{
  0%   { transform: translateX(0) rotate(16deg) scale(1) scaleX(-1); }
  12%  { transform: translateX(-34px) rotate(-10deg) scale(1.14) scaleX(-1); }
  30%  { transform: translateX(26px) rotate(24deg) scale(1.04) scaleX(-1); }
  50%  { transform: translateX(-6px) rotate(12deg) scale(1) scaleX(-1); }
  100% { transform: translateX(30px) rotate(20deg) scale(0.96) scaleX(-1); }
}

/* White flash + expanding rings at the point of impact. */
.wpz-rn-flash{
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.92), rgba(255,214,120,0.35) 22%, transparent 46%);
  animation: wpzRnFlash 0.85s ease-out forwards;
}
@keyframes wpzRnFlash{ 0%{opacity:0} 10%{opacity:1} 100%{opacity:0} }
.wpz-rn-ring{
  position: absolute; left: 50%; top: 40%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 5px solid rgba(255,205,90,0.85);
  box-shadow: 0 0 34px rgba(255,190,60,0.8), inset 0 0 22px rgba(255,220,140,0.55);
  animation: wpzRnRing 1.1s cubic-bezier(.15,.75,.3,1) forwards;
}
@keyframes wpzRnRing{
  0%   { transform: scale(0.2); opacity: 0.95; border-width: 8px; }
  100% { transform: scale(15); opacity: 0; border-width: 1px; }
}

/* Foam thrown off the impact. */
.wpz-rn-foam{
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffdf3, #ffe9ad 60%, #f0c86a);
  box-shadow: 0 0 10px rgba(255,235,180,0.75);
  animation: wpzRnFoam 1.2s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes wpzRnFoam{
  0%   { transform: translate(0,0) scale(0.4); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 190px)) scale(1); opacity: 0; }
}

/* Beer raining down the room. */
.wpz-rn-drop{
  position: absolute; top: -70px;
  animation: wpzRnDrop linear forwards;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.35));
  will-change: transform;
}
@keyframes wpzRnDrop{
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(112vh) rotate(var(--spin)); opacity: 0; }
}

/* The headline card. */
.wpz-rn-card{
  position: absolute; left: 50%; top: 56%;
  transform: translate(-50%, -50%);
  padding: 20px 40px 22px;
  text-align: center;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(38,22,2,0.93), rgba(20,11,0,0.95));
  border: 2px solid rgba(255,199,79,0.6);
  box-shadow: 0 26px 70px rgba(0,0,0,0.6), 0 0 70px rgba(255,180,50,0.42), inset 0 1px 0 rgba(255,235,180,0.28);
  animation: wpzRnCardIn 0.62s cubic-bezier(.2,1.5,.35,1) both;
  max-width: min(92vw, 640px);
}
@keyframes wpzRnCardIn{
  0%   { transform: translate(-50%, -50%) scale(0.55) rotate(-4deg); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.06) rotate(1.5deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}
.wpz-rn-card.is-out{ animation: wpzRnCardOut 1.1s ease-in forwards; }
@keyframes wpzRnCardOut{
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); }
  100% { transform: translate(-50%, -34%) scale(0.9); opacity: 0; filter: blur(6px); }
}
.wpz-rn-kicker{
  font-size: 13px; font-weight: 900; letter-spacing: 0.24em;
  color: #ffd977; text-transform: uppercase;
  animation: wpzRnPulse 1.5s ease-in-out infinite;
}
@keyframes wpzRnPulse{ 0%,100%{opacity:0.75} 50%{opacity:1} }
.wpz-rn-who{
  margin-top: 6px;
  font-size: clamp(26px, 5.4vw, 52px); font-weight: 900; line-height: 1.05;
  letter-spacing: 0.01em;
  background: linear-gradient(100deg, #fff6d8 0%, #ffc94a 28%, #fff6d8 46%, #f0a92f 68%, #fff6d8 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 10px rgba(255,170,40,0.55));
  animation: wpzRnShine 2.6s linear infinite;
  overflow-wrap: anywhere;
}
@keyframes wpzRnShine{ 0%{background-position:0% 50%} 100%{background-position:260% 50%} }
.wpz-rn-sub{
  margin-top: 5px; font-size: 14.5px; font-weight: 700;
  color: rgba(255,236,198,0.9);
}
.wpz-rn-xp{
  margin-top: 12px; display: inline-block;
  padding: 7px 20px; border-radius: 999px;
  font-size: 26px; font-weight: 900; letter-spacing: 0.02em;
  color: #2a1600;
  background: linear-gradient(180deg, #ffe093, #ffb52e);
  box-shadow: 0 8px 22px rgba(255,160,30,0.5), inset 0 1px 0 rgba(255,255,255,0.75);
  animation: wpzRnStamp 0.5s cubic-bezier(.2,2,.4,1) 0.24s both;
}
@keyframes wpzRnStamp{
  0%   { transform: scale(2.4) rotate(-11deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.wpz-rn-cheers{
  margin-top: 9px; font-size: 15px; font-weight: 900;
  letter-spacing: 0.18em; color: #ffd977;
}
.wpz-rn-card.is-mine{ border-color: rgba(120,220,255,0.65); box-shadow: 0 26px 70px rgba(0,0,0,0.6), 0 0 70px rgba(90,190,255,0.4); }
.wpz-rn-card.is-mine .wpz-rn-who{
  background: linear-gradient(100deg, #eaf9ff 0%, #7fd6ff 28%, #eaf9ff 46%, #35a8e0 68%, #eaf9ff 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text;
}

/* The window itself takes the hit. */
.wpz-rn-quake{ animation: wpzRnQuake 0.5s ease-in-out 2; }
.wpz-rn-quake-hard{ animation: wpzRnQuakeHard 0.19s ease-in-out 4; }
@keyframes wpzRnQuake{
  0%,100%{ transform: translate(0,0) }
  25%{ transform: translate(-4px, 2px) rotate(-0.25deg) }
  75%{ transform: translate(4px, -2px) rotate(0.25deg) }
}
@keyframes wpzRnQuakeHard{
  0%,100%{ transform: translate(0,0) rotate(0) }
  20%{ transform: translate(-11px, 6px) rotate(-0.7deg) }
  50%{ transform: translate(9px, -7px) rotate(0.6deg) }
  80%{ transform: translate(-6px, 4px) rotate(-0.35deg) }
}

@media (max-width: 620px){
  .wpz-rn-mug{ font-size: 84px; }
  .wpz-rn-card{ padding: 16px 22px 18px; }
  .wpz-rn-xp{ font-size: 21px; }
}
@media (prefers-reduced-motion: reduce){
  .wpz-rn-mug, .wpz-rn-drop, .wpz-rn-foam, .wpz-rn-ring, .wpz-rn-who{ animation: none !important; }
  .wpz-rn-who{ color: #ffc94a; -webkit-text-fill-color: #ffc94a; }
}