:root{
  /* Modern Dark Cinema palette — deep neutral base + a warm gold "prize" primary and a
     cool violet secondary, chosen to read as premium fintech/competitive-gaming rather
     than a generic neon template. Variable NAMES are kept from the earlier theme so every
     existing rule across the app inherits the new look automatically. */
  --bg1:#05060a;
  --bg2:#0a0b14;
  --bg3:#0d0c18;
  --neon-pink:#8B5CF6;    /* secondary accent — violet */
  --neon-cyan:#F0B429;    /* primary accent — warm gold ("prize" color) */
  --neon-yellow:#FBBF24;  /* pending / warn / current-round highlight */
  --neon-orange:#FB7185;  /* duel "VS" flavor accent */
  --result-win:#22C55E;
  --result-lose:#EF4444;
  --result-draw:#38BDF8;
  --glass: rgba(255,255,255,0.035);
  --glass-border: rgba(255,255,255,0.08);
  --card-radius: 16px;
  --font-mono: 'JetBrains Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html, body{ height:100%; }

body{
  height:100vh;
  height:100dvh;
  height:var(--app-vh, 100dvh);
  display:flex;
  flex-direction:column;
  font-family:'Inter',sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(139,92,246,0.10), transparent 42%),
    radial-gradient(circle at 90% 78%, rgba(240,180,41,0.08), transparent 48%),
    linear-gradient(160deg, var(--bg1), var(--bg2) 55%, var(--bg3));
  color:#F5F6FA;
  overflow:hidden;
}

/* .app is the scrollable content region between the (optional) header and the (optional)
   bottom nav — this is what makes the bottom nav a normal flex item instead of a
   position:fixed overlay, so it can never mask content underneath it again. */
.app{
  width:100%; max-width:900px; margin:0 auto;
  flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:10px;
  padding:10px;
}

.header{
  text-align:center;
  padding:14px 10px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--card-radius);
  backdrop-filter: blur(20px);
  box-shadow:0 8px 28px rgba(0,0,0,0.35);
}
.header h1{
  font-family:'Inter',sans-serif;
  font-size:clamp(1rem, 5vw, 1.3rem);
  font-weight:700;
  letter-spacing:-0.2px;
  color:#fff;
}
.header h1 .accent{ color:var(--neon-cyan); }
.header .subtitle{ font-size:0.78rem; color:#9aa2e0; margin-top:4px; }

.panel{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--card-radius);
  padding:14px;
  backdrop-filter: blur(20px);
  box-shadow:0 8px 28px rgba(0,0,0,0.35);
}

.panel-title{
  font-family:'Inter',sans-serif;
  font-size:0.7rem;
  letter-spacing:1px;
  color:#9aa2e0;
  margin-bottom:10px;
  text-transform:uppercase;
}

/* Balance display — centered "hero" style, shared by Home and Wallet */
.balance-chip{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:6px;
  background:linear-gradient(135deg, rgba(240,180,41,0.08), rgba(139,92,246,0.08));
  border:1px solid rgba(240,180,41,0.22);
  border-radius:var(--card-radius);
  padding:22px 18px;
}
.balance-chip .label{ font-size:0.72rem; color:#9aa2e0; letter-spacing:1.5px; text-transform:uppercase;}
.balance-chip .value{
  font-family:var(--font-mono); font-size:2.1rem; font-weight:600;
  color:var(--neon-cyan); line-height:1.15;
}
.balance-chip .usdt{ font-size:0.95rem; color:#9aa2e0; margin-inline-start:6px; font-family:'Inter',sans-serif;}

/* Buttons */
.btn{
  padding:12px 20px; border-radius:12px; border:none; cursor:pointer;
  font-family:'Inter',sans-serif; font-weight:600; font-size:0.87rem;
  letter-spacing:0.1px; transition:transform .15s, box-shadow .15s, opacity .15s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{
  background:linear-gradient(90deg,var(--neon-cyan),#e0a52a);
  color:#161207; box-shadow:0 6px 20px rgba(240,180,41,0.22);
}
.btn-primary:hover{ box-shadow:0 6px 26px rgba(240,180,41,0.35); }
.btn-secondary{
  background:rgba(255,255,255,0.06); color:#fff; border:1px solid var(--glass-border);
}
.btn-danger{ background:rgba(239,68,68,0.15); color:var(--result-lose); border:1px solid rgba(239,68,68,0.4);}
.btn-success{ background:rgba(34,197,94,0.12); color:var(--result-win); border:1px solid rgba(34,197,94,0.4);}
.btn-block{ width:100%; }
.btn:disabled{ opacity:0.4; cursor:not-allowed; }
.btn-sm{ padding:9px 14px; font-size:0.78rem; border-radius:10px; }
.btn-icon-sm{ padding:0; width:26px; height:26px; min-width:26px; border-radius:8px; font-size:0.85rem; line-height:1; flex:0 0 auto; }

/* Inputs */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.field label{ font-size:0.75rem; color:#9aa2e0; letter-spacing:0.5px; }
.field input, .field select, .field textarea{
  background:rgba(255,255,255,0.05);
  border:1px solid var(--glass-border);
  border-radius:10px;
  padding:11px 12px;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:0.95rem;
  outline:none;
  transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--neon-cyan); }
.field select option{ background:var(--bg2); color:#fff; } /* keeps the native dropdown popup dark, not browser-default white */
.field .hint{ font-size:0.72rem; color:#7c82b8; }
.field .error{ font-size:0.72rem; color:var(--result-lose); }

/* Bottom nav — a normal flex-flow item (see body/.app above), never an overlay,
   so it can never cover content underneath it. */
.bottom-nav{
  flex-shrink:0;
  display:flex; justify-content:space-around;
  background:rgba(10,6,20,0.85);
  backdrop-filter: blur(16px);
  border-top:1px solid var(--glass-border);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  width:100%; max-width:900px; margin:0 auto;
}
/* Telegram's (and other) in-app WebViews show a native "open/copy/share link" sheet on a
   long-press of a link or image, which reveals the mini app's actual hosting URL — something the
   app has no way to opt out of at the browser-chrome level, but suppressing the long-press context
   menu itself on the elements most likely to trigger it (nav links, buttons, images) removes the
   gesture that summons it in the first place on the platforms that respect this. */
a, button, .nav-item, .mode-card, .chat-bubble-img, .chat-bubble-row{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

.nav-item{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:#7c82b8; text-decoration:none; font-size:0.65rem;
  padding:4px 10px; border-radius:8px; transition:color .2s;
  background:none; border:none; cursor:pointer; font-family:'Inter',sans-serif;
}
.nav-item .icon{ display:flex; align-items:center; justify-content:center; }
.nav-item.active{ color:var(--neon-cyan); }
.nav-icon-badge{ position:relative; }
.nav-badge{
  position:absolute; top:-6px; right:-9px; min-width:16px; height:16px; padding:0 4px;
  border-radius:9px; background:var(--result-lose); color:#fff; font-size:0.58rem; font-weight:700;
  align-items:center; justify-content:center; line-height:1; border:1.5px solid var(--bg1, #0a0614);
}

/* Maintenance banner — shown above the mode picker on Home and above Open Games in the Lobby */
.maintenance-banner{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; margin-bottom:10px;
  background:rgba(251,191,36,0.10); border:1px solid rgba(251,191,36,0.35); color:#ffe8ab; font-size:0.8rem;
}
.maintenance-banner .icon{ flex-shrink:0; color:var(--neon-yellow); }
.maintenance-banner-text{ display:flex; flex-direction:column; gap:2px; line-height:1.3; }
.maintenance-banner b{ font-family:var(--font-mono); }

/* Transaction list */
.tx-list{ display:flex; flex-direction:column; gap:8px; }
.tx-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 13px; border-radius:12px;
  background:rgba(255,255,255,0.03); border:1px solid var(--glass-border);
}
.tx-item .tx-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tx-item .tx-type{ font-size:0.85rem; font-weight:600; }
.tx-item .tx-note{ font-size:0.7rem; color:#7c82b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px;}
.tx-item .tx-date{ font-size:0.65rem; color:#5c6296; }
.tx-item .tx-amount{ font-family:var(--font-mono); font-weight:600; font-size:0.92rem; flex-shrink:0; }
.tx-amount.positive{ color:var(--result-win); }
.tx-amount.negative{ color:var(--result-lose); }
.tx-amount.pending{ color:var(--neon-yellow); }
.tx-status{ font-size:0.62rem; padding:2px 6px; border-radius:20px; margin-inline-start:6px; }
.tx-status.pending{ background:rgba(251,191,36,0.12); color:var(--neon-yellow); }
.tx-status.completed{ background:rgba(34,197,94,0.12); color:var(--result-win); }
.tx-status.rejected{ background:rgba(239,68,68,0.12); color:var(--result-lose); }

.empty-state{ text-align:center; padding:30px 10px; color:#7c82b8; font-size:0.85rem; }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:90px; transform:translateX(-50%) translateY(20px);
  background:rgba(20,10,35,0.95); border:1px solid var(--glass-border);
  padding:12px 18px; border-radius:10px; font-size:0.85rem; z-index:500;
  opacity:0; pointer-events:none; transition:all .25s ease; max-width:90vw; text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,0.5);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error{ border-color:rgba(239,68,68,0.5); color:#ffb3b3; }
.toast.success{ border-color:rgba(34,197,94,0.5); color:#b3ffce; }

/* Modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display:none; align-items:flex-end; justify-content:center; z-index:200;
}
.modal-backdrop.show{ display:flex; }
.modal-sheet{
  width:100%; max-width:520px; background:linear-gradient(180deg, var(--bg3), var(--bg2));
  border:1px solid var(--glass-border); border-bottom:none;
  border-radius:18px 18px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  max-height:85vh; overflow-y:auto;
  animation: slideUp .25s ease;
}
@keyframes slideUp{ from{ transform:translateY(30px); opacity:0;} to{ transform:translateY(0); opacity:1;} }
.modal-title{ font-family:'Inter',sans-serif; font-size:1rem; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; }
.modal-close{ background:none; border:none; color:#9aa2e0; font-size:1.3rem; cursor:pointer; }
.modal-sheet-lg{ max-width:640px; }
.modal-backdrop-top{ align-items:flex-start; }
.modal-sheet-full{
  height:92vh; height:92dvh; height:calc(var(--app-vh, 100dvh) * 0.92); max-height:92dvh; display:flex; flex-direction:column;
  border-radius:0 0 18px 18px; margin-top:env(safe-area-inset-top, 0);
}
.admin-user-picker-list{ flex:1; min-height:0; overflow-y:auto; margin:0 -18px; padding:0 18px; }
.broadcast-composer{ align-items:stretch; }
.broadcast-composer .broadcast-input{ min-height:110px; border-radius:14px; }
.broadcast-image-preview{ align-items:flex-start; padding:10px; }
.broadcast-image-preview img{ max-height:120px; max-width:160px; border-radius:8px; object-fit:cover; }

.loader{
  width:36px; height:36px; border-radius:50%;
  border:4px solid rgba(255,255,255,0.12);
  border-top-color:var(--neon-cyan); border-right-color:var(--neon-pink);
  animation:spin 1s linear infinite; margin:30px auto;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.center-screen{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:70vh; gap:14px; text-align:center; padding:20px; }

.avatar{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  border:2px solid var(--neon-cyan);
  background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-weight:700; font-size:1.3rem; flex-shrink:0;
}

.badge{ display:inline-block; padding:3px 9px; border-radius:20px; font-size:0.68rem; letter-spacing:0.5px; }
.badge-cyan{ background:rgba(240,180,41,0.12); color:var(--neon-cyan); }
.badge-pink{ background:rgba(139,92,246,0.12); color:var(--neon-pink); }
.badge-yellow{ background:rgba(251,191,36,0.12); color:var(--neon-yellow); }

/* ===== Chat widget (shared by chat.html and the admin Messages tab) ===== */
.chat-widget{ display:flex; flex-direction:column; flex:1; min-height:0; }
.chat-messages{
  flex:1; min-height:0; overflow-y:auto; padding:10px 4px; display:flex; flex-direction:column; gap:8px;
}
.chat-bubble-row{ display:flex; position:relative; touch-action:pan-y; }
.chat-bubble-row.mine{ justify-content:flex-end; }
.chat-bubble-row.theirs{ justify-content:flex-start; }
.chat-bubble-row.swiping .chat-swipe-hint{ opacity:1; }
.chat-swipe-hint{
  position:absolute; right:6px; top:50%; transform:translateY(-50%); opacity:0; transition:opacity .15s;
  color:var(--neon-cyan); pointer-events:none;
}
.chat-bubble{
  max-width:78%; padding:8px 11px; border-radius:14px; font-size:0.85rem; line-height:1.4;
  background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); transition:transform .12s ease-out;
}
.chat-bubble.mine{ background:linear-gradient(135deg, rgba(240,180,41,0.18), rgba(139,92,246,0.14)); border-color:rgba(240,180,41,0.3); border-bottom-right-radius:4px; }
.chat-bubble.theirs{ border-bottom-left-radius:4px; }
.chat-bubble.chat-bubble-deleted{ font-style:italic; color:#7c82b8; background:rgba(255,255,255,0.03); }
.chat-bubble-text{ white-space:pre-wrap; word-break:break-word; }
.chat-bubble-img{ max-width:100%; max-height:220px; border-radius:9px; display:block; margin-bottom:4px; cursor:zoom-in; }
.chat-bubble-img-wrap{
  position:relative; margin-bottom:4px; background:rgba(255,255,255,0.04); border-radius:9px;
  display:block; width:fit-content; max-width:100%; min-width:160px; min-height:120px; overflow:hidden;
}
.chat-bubble-img-wrap.loaded{ min-width:0; min-height:0; }
.chat-bubble-img-wrap .chat-bubble-img{
  margin-bottom:0; opacity:0; transition:opacity .15s ease-out; display:block; max-width:100%; max-height:220px;
}
.chat-bubble-img-wrap.loaded .chat-bubble-img{ opacity:1; }
.chat-bubble-img-spinner{
  position:absolute; inset:0; background:rgba(0,0,0,0.4); border-radius:9px;
  display:flex; align-items:center; justify-content:center;
}
/* Hidden only once the real image has actually finished loading AND it isn't still mid-send —
   so a first-time chat open shows a visible placeholder instead of blank space per photo, and a
   just-sent photo keeps showing "sending" for as long as it's actually still unconfirmed, even
   though its own local blob preview loads virtually instantly. */
.chat-bubble-img-wrap.loaded:not(.pending) .chat-bubble-img-spinner{ display:none; }
.chat-mini-spinner{
  width:22px; height:22px; border-radius:50%; border:2.5px solid rgba(255,255,255,0.25);
  border-top-color:#fff; animation:chatSpin .7s linear infinite;
}
@keyframes chatSpin{ to{ transform:rotate(360deg); } }
.chat-bubble-reply{
  font-size:0.7rem; color:#9aa2e0; border-left:2px solid var(--neon-cyan); padding:3px 7px; margin-bottom:5px;
  background:rgba(255,255,255,0.04); border-radius:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-bubble-meta{ font-size:0.6rem; color:#7c82b8; margin-top:3px; text-align:right; display:flex; align-items:center; justify-content:flex-end; gap:3px; }
.chat-tick{ display:inline-flex; align-items:center; color:#7c82b8; }
.chat-tick.read{ color:var(--neon-cyan); }
.chat-tick.pending{ opacity:0.6; }
.chat-bubble-broadcast-tag{
  display:flex; align-items:center; gap:4px; font-size:0.62rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.4px; color:var(--neon-yellow); margin-bottom:4px;
}
.chat-reply-bar, .chat-image-preview{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 10px; background:rgba(255,255,255,0.05); border-radius:9px; margin:0 4px 6px; font-size:0.75rem;
}
.chat-reply-text{ min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-image-preview img{ max-height:44px; border-radius:6px; flex-shrink:0; }
.chat-image-preview.loading img{ opacity:0.5; }
.chat-image-progress-wrap{ display:none; flex:1; min-width:0; flex-direction:column; gap:3px; }
.chat-image-preview.loading .chat-image-progress-wrap{ display:flex; }
.chat-image-progress-track{ height:4px; border-radius:2px; background:rgba(255,255,255,0.1); overflow:hidden; }
.chat-image-progress-bar{ height:100%; width:0%; background:var(--neon-cyan); transition:width .15s ease-out; }
.chat-image-progress-label{ font-size:0.65rem; color:#9aa2e0; }
.chat-reply-cancel{ background:none; border:none; color:#9aa2e0; cursor:pointer; display:flex; padding:2px; flex-shrink:0; }
.chat-composer{ display:flex; align-items:flex-end; gap:6px; padding:6px 4px 2px; border-top:1px solid var(--glass-border); }
.chat-attach-btn, .chat-send-btn{
  width:36px; height:36px; border-radius:50%; border:none; flex-shrink:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.06); color:#cfd2ff;
}
.chat-send-btn{ background:var(--neon-cyan); color:#1a1200; }
.chat-input{
  flex:1; resize:none; background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:18px;
  padding:8px 13px; color:#fff; font-family:'Inter',sans-serif; font-size:0.85rem; outline:none; max-height:110px;
}
.chat-image-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.9); display:none; align-items:center; justify-content:center;
  z-index:400; padding:20px;
}
.chat-image-overlay.show{ display:flex; }
.chat-image-overlay-viewport{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  overflow:hidden; touch-action:none; z-index:1;
}
.chat-image-overlay-viewport img{ touch-action:none; will-change:transform; }
.chat-image-close-btn{
  position:absolute; top:calc(16px + env(safe-area-inset-top)); right:16px; width:38px; height:38px; border-radius:50%;
  background:rgba(20,16,32,0.85); border:1px solid rgba(255,255,255,0.15); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.chat-image-save-btn{
  position:absolute; bottom:24px; right:24px; width:48px; height:48px; border-radius:50%;
  background:var(--neon-cyan); border:none; color:#1a1200; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,0.5); z-index:2;
}

/* Tap-and-hold message action menu (Reply / Copy / Delete for me / Delete for everyone) */
.chat-action-menu{
  position:fixed; z-index:410; background:#181229; border:1px solid var(--glass-border);
  border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,0.5); overflow:hidden; min-width:180px;
}
.chat-action-item{
  display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px; background:none; border:none;
  color:#e8e9ff; font-size:0.83rem; text-align:left; cursor:pointer; border-bottom:1px solid rgba(255,255,255,0.05);
}
.chat-action-item:last-child{ border-bottom:none; }
.chat-action-item:hover{ background:rgba(255,255,255,0.06); }
.chat-action-item.danger{ color:var(--result-lose, #ff6b6b); }
.chat-image-overlay img{ max-width:100%; max-height:100%; border-radius:8px; }

.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.stat-box{ text-align:center; background:rgba(255,255,255,0.03); border:1px solid var(--glass-border); border-radius:12px; padding:12px 6px; }
.stat-box .num{ font-family:var(--font-mono); font-weight:600; font-size:1.15rem; }
.stat-box .lbl{ font-size:0.65rem; color:#9aa2e0; margin-top:2px; }

.network-tabs{ display:flex; gap:8px; margin-bottom:14px; }
.network-tab{
  flex:1; padding:10px; text-align:center; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,0.04); border:1px solid var(--glass-border); font-size:0.85rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.network-tab.active{ border-color:var(--neon-cyan); background:rgba(240,180,41,0.08); color:var(--neon-cyan); }

.address-box{
  display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.04);
  border:1px dashed var(--glass-border); border-radius:10px; padding:10px 12px;
  font-family:var(--font-mono); font-size:0.76rem; word-break:break-all;
}
.copy-btn{ flex-shrink:0; background:rgba(240,180,41,0.12); border:none; color:var(--neon-cyan); border-radius:8px; padding:6px 10px; cursor:pointer; font-size:0.75rem; transition:background .2s, color .2s; }
.copy-btn.copied{ background:rgba(34,197,94,0.16); color:var(--result-win); }

a{ color:inherit; }

.mode-badge{
  font-size:0.62rem; padding:2px 7px; border-radius:20px; font-weight:600; letter-spacing:0.2px;
}
.mode-badge.quick{ background:rgba(240,180,41,0.14); color:var(--neon-cyan); }
.mode-badge.custom{ background:rgba(139,92,246,0.14); color:var(--neon-pink); }

/* Collapsible accordion (used for the Rules panel) */
.accordion-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; color:#fff; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:0.85rem; font-weight:600;
  padding:2px;
}
.accordion-arrow{ transition:transform .2s; color:#9aa2e0; }
.accordion-arrow.open{ transform:rotate(180deg); }
.accordion-body{ display:none; margin-top:12px; }
.accordion-body.open{ display:block; }

.rules-tabs{ display:flex; gap:6px; margin-bottom:12px; }
.rules-tab{
  flex:1; text-align:center; padding:8px 6px; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,0.04); border:1px solid var(--glass-border); font-size:0.75rem; font-weight:600;
  color:#9aa2e0;
  display:flex; align-items:center; justify-content:center;
}
.rules-tab.active{ border-color:var(--neon-cyan); background:rgba(240,180,41,0.08); color:var(--neon-cyan); }
.rules-tab.disabled{ opacity:0.5; cursor:not-allowed; }

/* ----- Upload states on image bubbles ----- */
.chat-bubble-img-spinner{ flex-direction:column; gap:6px; }
.chat-upload-pct{ font-size:0.72rem; font-weight:700; color:#fff; font-family:var(--font-mono, monospace); text-shadow:0 1px 3px rgba(0,0,0,0.6); }
.chat-img-done{
  position:absolute; left:6px; bottom:6px; display:flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:10px; background:rgba(34,197,94,0.9); color:#fff;
  font-size:0.66rem; font-weight:700; animation:chatDoneIn .2s ease-out;
}
@keyframes chatDoneIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.chat-failed{ color:#ff8a8a; font-weight:700; margin-left:4px; }
.chat-bubble.failed{ border-color:rgba(239,68,68,0.55) !important; }
.chat-bubble-img-wrap.failed .chat-bubble-img{ opacity:0.55; }

/* Full-page loading state: pages that start with <body class="page-loading"> show only a spinner
   until their script calls App.pageReady() (after login and the first data load). */
body.page-loading > *:not(.page-loader){ visibility:hidden; }
.page-loader{ position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#c2c8ff; font-size:0.9rem; }
body:not(.page-loading) .page-loader{ display:none; }
/* Overridable copy (data-text) stays hidden until any overrides have been applied. */
body:not(.texts-ready) [data-text]{ visibility:hidden; }