/* =====================================================================
 * IGAXMING CASINO — CHAT WIDGET v2.0
 * Paleta del casino: --cyan #00E5FF · --green #00D084 · --gold #F7931A · --bg #0B1020
 * Layout: panel deslizable derecha (estilo BC.Game/Stake)
 *         Desktop → empuja la página (push mode)
 *         Mobile  → ocupa 100vw (full screen)
 * ===================================================================== */
:root {
  --chat-w: 360px;
  --chat-bg-1: #111622;
  --chat-bg-2: #171A2B;
  --chat-bg-3: #233152;
  --chat-line: rgba(255,255,255,0.06);
  --chat-line-2: rgba(255,255,255,0.12);
  --chat-text: #EEEEF0;
  --chat-text-dim: #9DA0A5;
  --chat-cyan: #00E5FF;
  --chat-green: #00D084;
  --chat-gold: #F7931A;
  --chat-red: #FF4D4D;
}

/* ---------- Topbar trigger (responsive) ---------- */
.chat-trigger {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--chat-text);
  transition: background .15s ease, transform .15s ease;
  flex-shrink: 0;
}
.chat-trigger:hover { background: rgba(255,255,255,0.07); }
.chat-trigger:active { transform: scale(0.96); }
.chat-trigger .chat-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--chat-green);
  box-shadow: 0 0 0 2px var(--chat-bg-1), 0 0 8px var(--chat-green);
}
.chat-trigger .chat-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--chat-red); color: #fff;
  font-size: 10px; font-weight: 800;
  display: none; align-items: center; justify-content: center;
  border: 2px solid var(--chat-bg-1);
}
.chat-trigger[data-unread="1"] .chat-badge { display: inline-flex; }
@media (max-width: 480px) {
  .chat-trigger { width: 36px; height: 36px; }
  .chat-trigger .chat-dot { top: 5px; right: 5px; width: 7px; height: 7px; }
}

/* ---------- Drawer panel ---------- */
.chat-overlay {
  position: fixed; inset: 0;
  background: rgba(11, 16, 32,0.55); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 90;
}
/* En push mode el overlay no se muestra (desktop) */
body.chat-push .chat-overlay { display: none; }

.chat-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--chat-w); max-width: 100vw;
  background: linear-gradient(180deg, var(--chat-bg-1) 0%, #050a1a 100%);
  border-left: 1px solid var(--chat-line);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,.0,.2,1);
  z-index: 100;
  color: var(--chat-text);
  box-shadow: -20px 0 60px rgba(0,0,0,.45);
}
.chat-open .chat-overlay { opacity: 1; visibility: visible; }
.chat-open .chat-panel   { transform: translateX(0); }

/* ---------- PUSH MODE: empuja la página, no la cubre ---------- */
body { transition: padding-right .28s cubic-bezier(.4,.0,.2,1); }
body.chat-push { padding-right: var(--chat-w); }
/* Si tu app usa fixed/topbar, también empuja ese: */
body.chat-push .topbar,
body.chat-push header.topbar,
body.chat-push .mobile-bottom-nav { right: var(--chat-w); }

/* ---------- MOBILE: panel a pantalla completa, no push ---------- */
@media (max-width: 720px) {
  :root { --chat-w: 100vw; }
  body.chat-push { padding-right: 0 !important; }
  body.chat-push .topbar,
  body.chat-push header.topbar,
  body.chat-push .mobile-bottom-nav { right: 0 !important; }
  .chat-panel { border-left: none; }
  .chat-head .chat-icon-btn { width: 38px; height: 38px; }
  .chat-composer input { font-size: 16px; }   /* evita zoom iOS */
}

/* ---------- Header ---------- */
.chat-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px; border-bottom: 1px solid var(--chat-line);
  background: linear-gradient(180deg, rgba(0, 229, 255,0.04), transparent);
}
.chat-head .chat-channel-btn {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--chat-line);
  font-weight: 700; font-size: 14px; color: var(--chat-text);
  min-width: 0;
}
.chat-head .chat-channel-btn span:first-child {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
}
.chat-head .chat-channel-btn:hover { background: rgba(255,255,255,0.07); }
.chat-head .chat-channel-btn i { font-size: 10px; color: var(--chat-text-dim); flex-shrink: 0; }
.chat-head .chat-icon-btn {
  position: relative;
  width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--chat-text-dim);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--chat-line);
  flex-shrink: 0;
}
.chat-head .chat-icon-btn:hover { color: var(--chat-text); background: rgba(255,255,255,0.06); }
.chat-head .chat-icon-btn.chat-close:hover { color: var(--chat-red); }
.chat-head .chat-icon-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--chat-red); color: #fff;
  font-size: 9px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--chat-bg-1);
}

/* ---------- Channels dropdown ---------- */
.chat-channels {
  position: absolute; top: 56px; left: 10px;
  width: calc(var(--chat-w) - 20px);
  background: var(--chat-bg-2); border: 1px solid var(--chat-line-2);
  border-radius: 12px; padding: 6px;
  z-index: 5; display: none;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  max-height: 60vh; overflow-y: auto;
}
.chat-channels.show { display: block; }
.chat-channel-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
  color: var(--chat-text); font-size: 13.5px;
}
.chat-channel-item:hover { background: rgba(255,255,255,0.05); }
.chat-channel-item.active { background: rgba(0, 229, 255,0.10); color: var(--chat-cyan); }
.chat-channel-item .flag { font-size: 16px; }
.chat-channel-item .online {
  margin-left: auto; font-size: 11px; color: var(--chat-text-dim);
  display: inline-flex; align-items: center; gap: 4px;
}
.chat-channel-item .online::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--chat-green); box-shadow: 0 0 6px var(--chat-green);
}
.chat-channel-item.locked { opacity: .55; cursor: not-allowed; }

/* ---------- Status ---------- */
.chat-status {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; font-size: 11px; color: var(--chat-text-dim);
  background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--chat-line);
}
.chat-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chat-text-dim); }
.chat-status[data-state="connected"]    .dot { background: var(--chat-green); box-shadow: 0 0 6px var(--chat-green); }
.chat-status[data-state="reconnecting"] .dot { background: var(--chat-gold);  animation: chat-pulse 1s infinite; }
.chat-status[data-state="offline"]      .dot { background: var(--chat-red); }
.chat-status[data-state="polling"]      .dot { background: var(--chat-cyan); }
@keyframes chat-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.chat-status .count { margin-left: auto; font-weight: 700; color: var(--chat-text); }

/* ---------- Messages ---------- */
.chat-body { flex: 1; overflow-y: auto; padding: 8px 8px 4px; scroll-behavior: smooth; position: relative; }
.chat-msg {
  display: grid; grid-template-columns: 36px 1fr; gap: 8px;
  padding: 6px 6px; border-radius: 10px;
  animation: chat-in .18s ease;
}
.chat-msg:hover { background: rgba(255,255,255,0.02); }
.chat-msg:hover .chat-msg-menu { opacity: 1; }
@keyframes chat-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.chat-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--chat-bg-3); object-fit: cover;
  border: 1px solid var(--chat-line-2); cursor: pointer;
}
.chat-avatar.small { width: 28px; height: 28px; }
.chat-msg-main { min-width: 0; }
.chat-msg-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--chat-text-dim); margin-bottom: 2px; }
.chat-name { color: var(--chat-text); font-weight: 700; font-size: 13px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.chat-name:hover { color: var(--chat-cyan); }
.chat-time { color: var(--chat-text-dim); font-size: 11px; font-variant-numeric: tabular-nums; margin-left: auto; }
.chat-msg-menu { color: var(--chat-text-dim); width: 22px; height: 22px; border-radius: 6px; opacity: 0; transition: opacity .15s ease; background: transparent; margin-left: 4px; }
.chat-msg-menu:hover { background: rgba(255,255,255,0.08); color: var(--chat-text); }

.chat-lv { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,0.05); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.chat-lv .roman { color: var(--chat-cyan); }
.chat-rank-mod    { color: var(--chat-green); }
.chat-rank-admin  { color: var(--chat-gold);  }
.chat-rank-support{ color: var(--chat-cyan);  }

.chat-bubble { background: rgba(255,255,255,0.04); border: 1px solid var(--chat-line); border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.45; color: var(--chat-text); word-wrap: break-word; overflow-wrap: anywhere; }
.chat-bubble.chat-bubble-gif { padding: 4px; background: transparent; border: 0; }
.chat-bubble a.chat-link { color: var(--chat-cyan); text-decoration: underline; }
.chat-bubble .chat-mention { color: var(--chat-green); font-weight: 700; cursor: pointer; }
.chat-bubble .chat-gif { max-width: 260px; max-height: 260px; border-radius: 8px; display: block; }
.chat-bubble.emoji-only { font-size: 30px; line-height: 1.1; background: transparent; border: none; padding: 4px 0; }

/* Reactions */
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-react-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--chat-line);
  font-size: 12px; color: var(--chat-text);
  transition: background .12s ease, transform .1s ease;
}
.chat-react-chip:hover { background: rgba(0, 229, 255,0.10); border-color: rgba(0, 229, 255,0.3); transform: translateY(-1px); }
.chat-react-add {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
  color: var(--chat-text-dim);
  opacity: 0; transition: opacity .15s;
}
.chat-msg:hover .chat-react-add { opacity: 1; }
.chat-react-add:hover { color: var(--chat-text); background: rgba(255,255,255,0.08); }

/* System / Wow / Tip / Rain */
.chat-system { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; margin: 6px 6px; border-radius: 10px; background: linear-gradient(90deg, rgba(0, 208, 132,0.08), rgba(0, 229, 255,0.04)); border: 1px solid rgba(0, 208, 132,0.18); font-size: 12.5px; color: var(--chat-text); line-height: 1.5; }
.chat-system .ico { width: 16px; color: var(--chat-green); padding-top: 2px; }
.chat-system.tip   { background: linear-gradient(90deg, rgba(247, 147, 26,0.12), rgba(247, 147, 26,0.04)); border-color: rgba(247, 147, 26,.25); }
.chat-system.rain  { background: linear-gradient(90deg, rgba(0, 229, 255,0.10), rgba(0, 229, 255,0.03)); border-color: rgba(0, 229, 255,.25); }
.chat-system.tip   .ico { color: var(--chat-gold); }
.chat-system.rain  .ico { color: var(--chat-cyan); }
.chat-system.tip .tip-from   { color: var(--chat-cyan); font-weight: 700; }
.chat-system.tip .tip-to     { color: var(--chat-green); font-weight: 700; }
.chat-system.tip .tip-amount { color: var(--chat-gold); font-weight: 800; margin-left: 4px; font-variant-numeric: tabular-nums; }
.chat-system.tip .tip-note,
.chat-system.rain .rain-note { display: block; margin-top: 4px; padding-top: 4px; font-size: 11.5px; color: var(--chat-text-dim); border-top: 1px dashed rgba(255,255,255,0.08); }
.chat-system.rain .rain-from { color: var(--chat-cyan); font-weight: 700; }
.chat-system.rain .rain-amount { color: var(--chat-cyan); font-weight: 800; font-variant-numeric: tabular-nums; }

.chat-wow { margin: 8px 6px; background: linear-gradient(180deg, rgba(247, 147, 26,0.10), rgba(247, 147, 26,0.02)); border: 1px solid rgba(247, 147, 26,0.30); border-radius: 14px; overflow: hidden; }
.chat-wow-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid rgba(247, 147, 26,0.18); }
.chat-wow-head .crown { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #FFE085, #F7931A 70%, #B8860B); display: inline-grid; place-items: center; color: #2a1a00; box-shadow: 0 0 12px rgba(247, 147, 26,.5); }
.chat-wow-head .title { font-weight: 800; font-size: 13px; color: #FFE085; }
.chat-wow-body { padding: 10px 12px; }
.chat-wow-amount { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: var(--chat-green); font-variant-numeric: tabular-nums; }
.chat-wow-amount img { width: 22px; height: 22px; }
.chat-wow-meta { color: var(--chat-text-dim); font-size: 11.5px; margin-top: 4px; display: flex; gap: 10px; }
.chat-wow-meta strong { color: var(--chat-text); }

/* Pinned banner */
.chat-pinned { margin: 6px; padding: 8px 10px; border-radius: 10px; background: linear-gradient(90deg, rgba(0, 229, 255,0.10), transparent); border: 1px solid rgba(0, 229, 255,0.25); font-size: 12px; color: var(--chat-text); display: flex; gap: 8px; align-items: flex-start; }
.chat-pinned .pin-ico { color: var(--chat-cyan); flex-shrink: 0; padding-top: 2px; }

/* Typing */
.chat-typing { padding: 4px 14px 0; font-size: 11.5px; color: var(--chat-text-dim); min-height: 18px; }
.chat-typing .dots { display: inline-flex; gap: 2px; vertical-align: -2px; margin-left: 4px; }
.chat-typing .dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--chat-text-dim); animation: chat-bounce 1.2s infinite; }
.chat-typing .dots span:nth-child(2) { animation-delay: .15s; }
.chat-typing .dots span:nth-child(3) { animation-delay: .30s; }
@keyframes chat-bounce { 0%,80%,100% { transform: scale(0.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* Composer */
.chat-foot { padding: 8px 8px 10px; border-top: 1px solid var(--chat-line); background: rgba(255,255,255,0.02); }
.chat-composer { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.04); border: 1px solid var(--chat-line-2); border-radius: 14px; padding: 4px 4px 4px 12px; }
.chat-composer:focus-within { border-color: rgba(0, 229, 255,0.35); box-shadow: 0 0 0 3px rgba(0, 229, 255,0.08); }
.chat-composer input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--chat-text); font-size: 13.5px; padding: 8px 0; min-width: 0; }
.chat-composer input::placeholder { color: var(--chat-text-dim); }
.chat-composer .send-btn { width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center; background: linear-gradient(135deg,#1F7DFF 0%,#5D61F1 55%,#7A5FFF 100%); color: #fff; font-size: 14px; transition: transform .15s ease, filter .15s ease; }
.chat-composer .send-btn:hover  { filter: brightness(1.1); }
.chat-composer .send-btn:active { transform: scale(.95); }
.chat-composer .send-btn:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }
.chat-composer .icon-btn { width: 30px; height: 30px; border-radius: 8px; color: var(--chat-text-dim); flex-shrink: 0; }
.chat-composer .icon-btn:hover { color: var(--chat-text); background: rgba(255,255,255,0.07); }
.chat-composer .gif-label { font-weight: 800; font-size: 10px; }

/* New-msgs toast */
.chat-newmsgs { position: absolute; left: 50%; transform: translateX(-50%); bottom: 70px; padding: 6px 12px; border-radius: 20px; background: linear-gradient(135deg,#1F7DFF 0%,#5D61F1 55%,#7A5FFF 100%); color: #fff; font-weight: 800; font-size: 12px; display: none; align-items: center; gap: 6px; box-shadow: 0 6px 18px rgba(0, 208, 132,.25); cursor: pointer; user-select: none; z-index: 4; }
.chat-newmsgs.show { display: inline-flex; animation: chat-in .2s ease; }

.chat-loginprompt { margin: 8px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px dashed var(--chat-line-2); font-size: 12.5px; color: var(--chat-text-dim); text-align: center; }
.chat-loginprompt a { color: var(--chat-cyan); font-weight: 700; }

.chat-body::-webkit-scrollbar { width: 6px; }
.chat-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.chat-body::-webkit-scrollbar-track { background: transparent; }

/* ---------- Toasts globales ---------- */
.chat-toast {
  position: fixed; top: 80px; right: 20px;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(17, 22, 34,0.95);
  color: #fff; font-size: 13px; font-weight: 600;
  border: 1px solid var(--chat-cyan);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  z-index: 300; opacity: 0; transform: translateX(20px);
  transition: opacity .2s ease, transform .2s ease;
}
.chat-toast.show { opacity: 1; transform: translateX(0); }
.chat-toast-error { border-color: var(--chat-red); }
.chat-toast-warn { border-color: var(--chat-gold); }

/* ---------- Modal overlay base (Tip/Rain/Rules/Profile) ---------- */
.tip-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(11, 16, 32,.72); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 16px;
  animation: chat-in .15s ease;
}
.tip-modal {
  width: 420px; max-width: 100%;
  background: linear-gradient(180deg, #111622 0%, #050a1a 100%);
  border: 1px solid var(--chat-line-2);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  overflow: hidden;
  animation: tip-pop .18s cubic-bezier(.4,0,.2,1.2);
  max-height: calc(100vh - 32px); display: flex; flex-direction: column;
}
.tip-modal.rules-modal { width: 500px; }
@keyframes tip-pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.tip-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), transparent);
  border-bottom: 1px solid var(--chat-line);
  color: var(--chat-text); font-weight: 800; font-size: 15px;
}
.tip-modal-close { width: 30px; height: 30px; border-radius: 8px; color: var(--chat-text-dim); background: rgba(255,255,255,0.04); }
.tip-modal-close:hover { color: var(--chat-red); background: rgba(255, 77, 77,0.08); }

.tip-modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.tip-label { display: block; font-size: 11px; color: var(--chat-text-dim); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin: 14px 0 6px; }
.tip-label:first-child { margin-top: 0; }
.tip-input-row { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.04); border: 1px solid var(--chat-line-2); border-radius: 10px; padding: 4px 12px; transition: border-color .15s ease, box-shadow .15s ease; }
.tip-input-row:focus-within { border-color: rgba(247, 147, 26,0.45); box-shadow: 0 0 0 3px rgba(247, 147, 26,0.10); }
.tip-input-prefix { color: var(--chat-text-dim); font-weight: 700; font-size: 14px; }
.tip-modal input[type="text"], .tip-modal input[type="number"] { flex: 1; background: transparent; border: 0; outline: 0; color: var(--chat-text); font-size: 14px; padding: 10px 0; min-width: 0; font-variant-numeric: tabular-nums; }
.tip-modal input[type="text"]#tipNote, .tip-modal input[type="text"]#rainNote { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--chat-line-2); border-radius: 10px; padding: 10px 12px; color: var(--chat-text); font-size: 13.5px; }
.tip-modal input[type="text"]#tipNote:focus, .tip-modal input[type="text"]#rainNote:focus { border-color: rgba(247, 147, 26,0.45); box-shadow: 0 0 0 3px rgba(247, 147, 26,0.10); }
.tip-modal select { background: rgba(255,255,255,0.06); border: 1px solid var(--chat-line-2); color: var(--chat-text); font-weight: 700; font-size: 13px; padding: 8px 10px; border-radius: 8px; outline: 0; cursor: pointer; }

.tip-hint { margin-top: 14px; padding: 10px 12px; background: rgba(0, 229, 255,0.06); border: 1px solid rgba(0, 229, 255,0.18); border-radius: 8px; color: var(--chat-text-dim); font-size: 11.5px; line-height: 1.5; }
.tip-hint i { color: var(--chat-cyan); margin-right: 4px; }
.tip-hint.rain { background: rgba(0, 229, 255,0.08); border-color: rgba(0, 229, 255,0.22); }

.tip-modal-foot { display: flex; gap: 10px; padding: 12px 18px 16px; border-top: 1px solid var(--chat-line); background: rgba(255,255,255,0.02); flex-shrink: 0; }
.tip-btn-cancel, .tip-btn-send { flex: 1; padding: 11px 16px; border-radius: 10px; font-weight: 800; font-size: 13.5px; transition: transform .15s ease, filter .15s ease; }
.tip-btn-cancel { background: rgba(255,255,255,0.05); color: var(--chat-text-dim); border: 1px solid var(--chat-line-2); }
.tip-btn-cancel:hover { color: var(--chat-text); background: rgba(255,255,255,0.08); }
.tip-btn-send { background: linear-gradient(135deg, var(--chat-gold) 0%, #FF8C00 100%); color: #1a0d00; box-shadow: 0 6px 18px rgba(247, 147, 26,.25); }
.tip-btn-send:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.tip-btn-send:active { transform: scale(.97); }
.tip-btn-send:disabled { opacity: .6; cursor: not-allowed; }
.tip-btn-rain { background: linear-gradient(135deg, var(--chat-cyan) 0%, #1A65F6 100%); color: #00111c; box-shadow: 0 6px 18px rgba(0, 229, 255,.25); }

/* ---------- Rules modal ---------- */
.rules-body { font-size: 13.5px; line-height: 1.6; }
.rules-section { margin-bottom: 16px; }
.rules-section h4 { font-size: 13px; font-weight: 800; color: var(--chat-cyan); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.rules-section ul { list-style: none; padding: 0; margin: 0; }
.rules-section li { padding: 4px 0 4px 18px; position: relative; color: var(--chat-text); }
.rules-section li::before { content: '→'; position: absolute; left: 0; color: var(--chat-green); font-weight: 800; }
.rules-section code { background: rgba(0, 229, 255,0.10); border: 1px solid rgba(0, 229, 255,0.18); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; color: var(--chat-cyan); }

/* ---------- Profile modal ---------- */
.profile-modal { width: 360px; }
.profile-body { text-align: center; padding-bottom: 8px; }
.profile-avatar { width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--chat-line-2); margin: 6px auto 10px; display: block; }
.profile-name { font-size: 18px; font-weight: 800; color: var(--chat-text); }
.profile-meta { font-size: 12.5px; color: var(--chat-text-dim); margin-top: 4px; }
.profile-meta strong { color: var(--chat-cyan); }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; padding: 12px; background: rgba(255,255,255,0.03); border-radius: 10px; }
.profile-stats strong { display: block; color: var(--chat-text); font-size: 16px; }
.profile-stats span { color: var(--chat-text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.profile-actions { display: flex; gap: 8px; margin-top: 12px; }
.profile-actions .tip-btn-send { flex: 1; padding: 9px 12px; font-size: 12.5px; }

/* ---------- GIF picker ---------- */
.gif-picker { position: absolute; bottom: 64px; right: 8px; left: 8px; height: 320px; background: var(--chat-bg-1); border: 1px solid var(--chat-line-2); border-radius: 12px; display: flex; flex-direction: column; z-index: 6; box-shadow: 0 12px 40px rgba(0,0,0,.5); overflow: hidden; }
.gif-picker-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--chat-line); }
.gif-picker-head input { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid var(--chat-line-2); border-radius: 8px; padding: 6px 10px; color: var(--chat-text); font-size: 13px; outline: 0; }
.gif-picker-head input:focus { border-color: rgba(0, 229, 255,0.35); }
.gif-picker-head .icon-btn { width: 26px; height: 26px; border-radius: 6px; }
.gif-grid { flex: 1; overflow-y: auto; padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.gif-tile { width: 100%; height: 90px; object-fit: cover; border-radius: 6px; cursor: pointer; transition: transform .12s ease; background: var(--chat-bg-3); }
.gif-tile:hover { transform: scale(1.04); }
.gif-loading, .gif-empty { grid-column: 1 / -1; padding: 30px; text-align: center; color: var(--chat-text-dim); font-size: 13px; }

/* ---------- Emoji picker ---------- */
.emoji-picker { position: absolute; bottom: 64px; right: 8px; background: var(--chat-bg-1); border: 1px solid var(--chat-line-2); border-radius: 12px; padding: 6px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; z-index: 6; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.emoji-tile { font-size: 18px; padding: 4px; width: 30px; height: 30px; background: transparent; border-radius: 6px; }
.emoji-tile:hover { background: rgba(255,255,255,0.08); }

/* ---------- Reaction picker (flota sobre el mensaje) ---------- */
.react-picker { position: fixed; background: var(--chat-bg-1); border: 1px solid var(--chat-line-2); border-radius: 24px; padding: 4px 8px; display: flex; gap: 2px; z-index: 250; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: chat-in .12s ease; }
.react-picker button { font-size: 20px; padding: 4px; width: 32px; height: 32px; background: transparent; border-radius: 50%; transition: transform .1s ease, background .12s ease; }
.react-picker button:hover { transform: scale(1.25); background: rgba(255,255,255,0.05); }

/* ---------- Msg context menu ---------- */
.msg-menu { position: fixed; min-width: 180px; background: var(--chat-bg-1); border: 1px solid var(--chat-line-2); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; z-index: 250; box-shadow: 0 12px 40px rgba(0,0,0,.55); }
.msg-menu button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; color: var(--chat-text); font-size: 13px; text-align: left; background: transparent; }
.msg-menu button i { width: 16px; color: var(--chat-text-dim); }
.msg-menu button:hover { background: rgba(255,255,255,0.05); }
.msg-menu button.danger { color: var(--chat-red); }
.msg-menu button.danger i { color: var(--chat-red); }
.msg-menu-sep { height: 1px; margin: 5px 4px; background: var(--chat-line-2); }
.msg-menu { max-height: 80vh; overflow-y: auto; }

/* ── Moderation modal (Mute / Ban / Report …) ───────────────────────── */
.mod-overlay {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(2,6,16,0.72); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  animation: modFade .18s ease;
}
@keyframes modFade { from { opacity: 0; } to { opacity: 1; } }
.mod-modal {
  width: 100%; max-width: 380px;
  background: linear-gradient(180deg, #121a2c, #0c1320);
  border: 1px solid var(--chat-line-2); border-radius: 18px;
  padding: 20px; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  animation: modPop .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modPop { from { transform: translateY(10px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.mod-modal-head { display: flex; align-items: center; justify-content: space-between; }
.mod-modal-title { font-size: 16px; font-weight: 800; color: var(--chat-text); }
.mod-modal-x { background: transparent; color: var(--chat-text-dim); font-size: 16px; width: 28px; height: 28px; border-radius: 8px; }
.mod-modal-x:hover { background: rgba(255,255,255,0.06); color: #fff; }
.mod-modal-sub { font-size: 12.5px; color: #25e6c8; font-weight: 700; margin: 2px 0 12px; }
.mod-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--chat-text-dim); margin: 10px 0 6px; }
.mod-input {
  width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--chat-line-2);
  border-radius: 10px; padding: 10px 12px; color: var(--chat-text); font-size: 13px; outline: none;
}
.mod-input:focus { border-color: #25e6c8; }
textarea.mod-input { resize: vertical; min-height: 64px; }
.mod-confirm-text { font-size: 13px; color: var(--chat-text); margin: 6px 0 2px; }
.mod-modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.mod-btn { flex: 1; padding: 11px; border-radius: 11px; font-weight: 700; font-size: 13px; transition: filter .15s, transform .1s; }
.mod-btn:active { transform: translateY(1px); }
.mod-btn.ghost { background: rgba(255,255,255,0.06); color: var(--chat-text); }
.mod-btn.primary { background: linear-gradient(135deg,#22d3ee,#0ea5e9); color: #05131c; }
.mod-btn.danger { background: linear-gradient(135deg,#ff5a7a,#e11d48); color: #fff; }
.mod-btn:hover { filter: brightness(1.08); }
.mod-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- DM list & thread ---------- */
.dm-list { padding: 6px 6px 0; }
.dm-back-row { padding: 4px 6px 8px; }
.dm-back { padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--chat-line); color: var(--chat-text); font-size: 12.5px; font-weight: 700; }
.dm-back:hover { background: rgba(255,255,255,0.08); }
.dm-empty { padding: 40px 24px; text-align: center; color: var(--chat-text-dim); font-size: 13.5px; }
.dm-thread-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer; transition: background .12s ease; }
.dm-thread-row:hover { background: rgba(255,255,255,0.04); }
.dm-thread-meta { flex: 1; min-width: 0; }
.dm-thread-name { font-weight: 700; font-size: 13.5px; color: var(--chat-text); }
.dm-thread-last { font-size: 12px; color: var(--chat-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-unread-chip { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--chat-cyan); color: #00111c; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

.dm-thread-header { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; border-bottom: 1px solid var(--chat-line); margin: 0 -8px 8px; background: rgba(255,255,255,0.02); }
.dm-thread-header .dm-back { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; }
.dm-peer-name { font-weight: 800; font-size: 14px; color: var(--chat-text); }

.dm-msg-list { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.dm-msg { display: flex; flex-direction: column; max-width: 80%; }
.dm-msg.mine { align-self: flex-end; align-items: flex-end; }
.dm-msg.theirs { align-self: flex-start; align-items: flex-start; }
.dm-bubble { padding: 8px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; color: var(--chat-text); word-wrap: break-word; overflow-wrap: anywhere; }
.dm-msg.mine .dm-bubble { background: linear-gradient(135deg, rgba(0, 229, 255,0.18), rgba(0, 208, 132,0.10)); border: 1px solid rgba(0, 229, 255,0.25); border-bottom-right-radius: 4px; }
.dm-msg.theirs .dm-bubble { background: rgba(255,255,255,0.05); border: 1px solid var(--chat-line); border-bottom-left-radius: 4px; }
.dm-meta { font-size: 10.5px; color: var(--chat-text-dim); margin: 2px 4px 0; font-variant-numeric: tabular-nums; }

/* ---------- Leaderboard view ---------- */
.lb-view { padding: 6px 6px 12px; }
.lb-wrap { padding: 0 4px 10px; display:flex; flex-direction:column; gap:2px; }
.lb-wrap .dm-back-row { display:flex; align-items:center; justify-content:space-between; padding:4px 6px 8px; }
.lb-wrap .lb-period { font-size:10.5px; font-weight:800; color:var(--chat-text-dim); padding:2px 8px; border-radius:999px; background:rgba(255,255,255,0.04); border:1px solid var(--chat-line); }
.lb-title { font-size:12px; font-weight:800; color:var(--chat-cyan); text-transform:uppercase; letter-spacing:.08em; margin:6px 6px 6px; display:flex; align-items:center; gap:6px; }
.lb-section { margin-top: 12px; }
.lb-section h4 { font-size: 12px; font-weight: 800; color: var(--chat-cyan); text-transform: uppercase; letter-spacing: .08em; margin: 0 6px 8px; display: flex; align-items: center; gap: 8px; }
.lb-row { display: grid; grid-template-columns: 32px 36px 1fr auto; gap: 8px; align-items: center; padding: 8px 6px; border-radius: 10px; transition: background .12s ease; }
.lb-row:hover { background: rgba(255,255,255,0.03); }
.lb-rank { font-weight: 800; color: var(--chat-text-dim); font-size: 12.5px; text-align: center; }
.lb-rank.top { color: var(--chat-gold); font-size: 14px; }
.lb-row .chat-avatar { width: 32px; height: 32px; border-radius:50%; object-fit:cover; }
.lb-meta { min-width: 0; }
.lb-name { font-weight: 700; font-size: 13.5px; color: var(--chat-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-sub { font-size: 11.5px; color: var(--chat-text-dim); }
.lb-amount { font-weight: 800; font-size: 12.5px; color: var(--chat-green); font-variant-numeric: tabular-nums; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.lb-amount img { width:14px; height:14px; }

/* ============================================================
   TOPBAR · Balance pill MÓVIL — diseño profesional (v2.6)
   chat.css carga al final del <body>, por eso ES la hoja autoritativa
   del topbar. Aquí dejamos el saldo legible CON su flechita (caret),
   el botón depósito SOLO icono (compacto) y el logo más pequeño.
   Mismos breakpoints/valores que casino.css → sin "salto" al cargar.
   ============================================================ */
@media (max-width: 900px) {
  /* Logo más pequeño en móvil (el logo real usa .topbar-brand-img) */
  header.topbar .topbar-brand-img { height: 26px !important; }
  header.topbar .topbar-brand { padding: 0 4px !important; }
  /* Trigger del chat compacto */
  .chat-trigger { width: 36px !important; height: 36px !important; }
  .chat-trigger i { font-size: 15px !important; }

  /* Pill del saldo: contenedor limpio */
  header.topbar .balance-pill,
  header.topbar [data-testid="balance-pill"] {
    height: 38px !important;
    border-radius: 11px !important;
    overflow: hidden !important;
  }
  /* Selector de moneda: icono + saldo + flechita */
  header.topbar .currency-tab { gap: 7px !important; padding: 0 9px !important; }
  header.topbar .currency-tab .crypto-icon { width: 20px !important; height: 20px !important; }
  header.topbar .balance-pill .amount,
  header.topbar [data-testid="balance-pill"] .amount,
  header.topbar #topbarBalance,
  header.topbar [data-testid="topbar-balance"] {
    font-size: 13px !important;
    padding: 0 2px !important;
    max-width: 124px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
    letter-spacing: -0.2px;
  }
  /* La flechita (caret) SIEMPRE visible */
  header.topbar .currency-tab > span.text-white\/40,
  header.topbar .currency-tab > span:last-child {
    display: inline-flex !important;
    opacity: 0.65 !important;
  }
  /* Botón depósito: SOLO icono wallet, compacto y centrado */
  header.topbar .deposit-btn,
  header.topbar .balance-pill .deposit-btn {
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
  }
  header.topbar .deposit-btn span,
  header.topbar .deposit-btn span.whitespace-nowrap { display: none !important; }
  /* User pill compacto */
  header.topbar .user-pill,
  header.topbar [data-testid="user-pill"] { padding: 0 8px !important; }
  header.topbar .user-pill span.font-semibold,
  header.topbar [data-testid="user-pill"] span.font-semibold { max-width: 64px !important; font-size: 12px !important; }
  /* Gap reducido entre items */
  header.topbar { gap: 6px !important; }
}

@media (max-width: 600px) {
  header.topbar .topbar-brand-img { height: 24px !important; }
  header.topbar .balance-pill .amount,
  header.topbar #topbarBalance,
  header.topbar [data-testid="topbar-balance"] { font-size: 12px !important; max-width: 100px !important; }
  header.topbar .currency-tab { padding: 0 8px !important; gap: 6px !important; }
  header.topbar .deposit-btn,
  header.topbar .balance-pill .deposit-btn { width: 40px !important; min-width: 40px !important; }
  /* Oculta solo el nombre de usuario (deja avatar) — NO el saldo */
  header.topbar .user-pill .font-semibold,
  header.topbar [data-testid="user-pill"] .font-semibold,
  header.topbar .user-pill .truncate { display: none !important; }
  /* Oculta el caret del user-pill (NO el del saldo) */
  header.topbar .user-pill svg,
  header.topbar [data-testid="user-pill"] svg { display: none !important; }
}

@media (max-width: 380px) {
  header.topbar .topbar-brand-img { height: 22px !important; }
  header.topbar .balance-pill .amount,
  header.topbar #topbarBalance,
  header.topbar [data-testid="topbar-balance"] { max-width: 78px !important; }
  header.topbar .currency-tab { padding: 0 6px !important; }
}

/* ===== FAUSINO v3 — identidad de marca para el Chat ===== */
.chat-head{
  background: linear-gradient(135deg, rgba(31,125,255,0.16), rgba(122,95,255,0.16)) !important;
  border-bottom:1px solid rgba(122,95,255,0.22) !important;
}
.chat-trigger{ border:1px solid rgba(122,95,255,0.25) !important; }
.chat-trigger:hover{ background: rgba(122,95,255,0.16) !important; box-shadow:0 0 16px -6px rgba(0,229,255,0.5) !important; }
.chat-send-btn, .chat-send, button.chat-send{
  background: linear-gradient(135deg,#1F7DFF,#7A5FFF) !important;
  color:#fff !important;
  box-shadow:0 6px 18px -8px rgba(93,97,241,0.7) !important;
}
.chat-msg-own .chat-bubble, .chat-bubble.own, .msg-own .bubble{
  background: linear-gradient(135deg, rgba(31,125,255,0.28), rgba(122,95,255,0.28)) !important;
  border:1px solid rgba(122,95,255,0.3) !important;
  color:#fff !important;
}
.chat-channel-btn{ border:1px solid rgba(122,95,255,0.22) !important; }
.chat-input-wrap, .chat-composer{ border-top:1px solid rgba(122,95,255,0.18) !important; }
.chat-input:focus, .chat-composer textarea:focus{
  border-color: rgba(0,229,255,0.55) !important;
  box-shadow:0 0 0 3px rgba(0,229,255,0.14) !important;
}

/* ===== FAUSINO v4 — botón del chat (trigger) estilo rainbet ===== */
.chat-trigger{
  background: linear-gradient(135deg,#1F7DFF 0%,#5D61F1 60%,#7A5FFF 100%) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color:#fff !important;
  box-shadow: 0 8px 22px -8px rgba(93,97,241,0.75), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
.chat-trigger:hover{
  filter: brightness(1.08) !important;
  box-shadow: 0 12px 28px -8px rgba(122,95,255,0.85), 0 0 18px -6px rgba(0,229,255,0.45) !important;
}
.chat-trigger .chat-dot{ background:#00FF99 !important; box-shadow:0 0 0 2px #141B30, 0 0 8px #00FF99 !important; }