/* ============================================
   CRYPTEX VIP - Trading Signal + Chat Platform
   Full visual merge from cryptexsite.html
   ============================================ */

/* Splash Screen */
#splash-screen{position:fixed;inset:0;z-index:99999;background:#050508;display:flex;align-items:center;justify-content:center;overflow:hidden}
#splash-screen.hide{animation:splashOut .6s ease forwards}
@keyframes splashOut{to{opacity:0;visibility:hidden}}
.splash-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,212,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.03) 1px,transparent 1px);background-size:40px 40px;animation:gridMove 8s linear infinite}
@keyframes gridMove{to{transform:translate(40px,40px)}}
.splash-scanline{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.4),transparent);animation:scanDown 2s ease-in-out infinite;z-index:2}
@keyframes scanDown{0%{top:-2px}100%{top:100%}}
.splash-center{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;animation:splashFadeIn .8s ease}
@keyframes splashFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.splash-hex{position:absolute;top:50%;left:50%;width:180px;height:180px;transform:translate(-50%,-55%);border:1px solid rgba(0,212,255,.15);border-radius:50%;animation:hexSpin 6s linear infinite}
.splash-hex::before{content:'';position:absolute;inset:15px;border:1px solid rgba(228,184,74,.1);border-radius:50%;animation:hexSpin 4s linear infinite reverse}
.splash-hex::after{content:'';position:absolute;inset:30px;border:1px dashed rgba(0,212,255,.08);border-radius:50%;animation:hexSpin 8s linear infinite}
@keyframes hexSpin{to{transform:translate(-50%,-55%) rotate(360deg)}}
.splash-logo{width:auto;height:auto;max-width:70%;max-height:80px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(0,212,255,.5));animation:logoPulse 2s ease-in-out infinite;position:relative;z-index:1}
@keyframes logoPulse{0%,100%{filter:drop-shadow(0 0 20px rgba(0,212,255,.5))}50%{filter:drop-shadow(0 0 35px rgba(0,212,255,.8))}}
.splash-sub{font-size:.55rem;letter-spacing:3px;color:rgba(228,184,74,.6);text-transform:uppercase;font-weight:600}
.splash-loader{width:140px;height:2px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;margin-top:12px}
.splash-bar{width:30%;height:100%;background:linear-gradient(90deg,transparent,#00d4ff,#e4b84a,transparent);border-radius:2px;animation:splashLoad 1.5s ease-in-out infinite}
@keyframes splashLoad{0%{transform:translateX(-150%)}100%{transform:translateX(450%)}}
.splash-status{font-size:.6rem;color:rgba(255,255,255,.3);letter-spacing:2px;font-family:'JetBrains Mono',monospace;margin-top:4px;animation:statusBlink 1s step-end infinite}
@keyframes statusBlink{50%{opacity:.3}}
.splash-particles{position:absolute;inset:0;z-index:1;overflow:hidden}
.splash-particle{position:absolute;width:2px;height:2px;background:#00d4ff;border-radius:50%;opacity:0;animation:particleFloat 3s ease-in-out infinite}
@keyframes particleFloat{0%{opacity:0;transform:translateY(0)}30%{opacity:.6}100%{opacity:0;transform:translateY(-100vh)}}

/* Download App Button */
.download-app-btn{display:flex;align-items:center;gap:12px;margin:20px auto 0;padding:12px 24px 12px 18px;background:linear-gradient(135deg,#1a1a2e,#0f3460);border:1px solid rgba(0,212,255,.3);border-radius:12px;color:#fff;text-decoration:none;transition:all .3s;cursor:pointer;width:fit-content}
.download-app-btn:hover{border-color:rgba(0,212,255,.6);box-shadow:0 0 20px rgba(0,212,255,.15);transform:translateY(-1px);text-decoration:none}
.download-app-btn:active{transform:scale(.97)}
.gp-icon{flex-shrink:0;width:28px;height:28px}
.gp-text{display:flex;flex-direction:column;line-height:1.2}
.gp-label{font-size:.6rem;font-weight:500;letter-spacing:.5px;color:rgba(255,255,255,.6)}
.gp-title{font-size:1rem;font-weight:700;color:#fff}
@media(display-mode:standalone){.download-app-btn{display:none!important}}

:root{
  --gold:#2563eb;--gold-dim:#1d4ed8;--gold-subtle:rgba(37,99,235,.07);
  --bg-deep:#f0f5fc;--bg-elevated:#ffffff;--bg-surface:#e4eefb;--bg-glass:rgba(240,245,252,.94);
  --border-subtle:rgba(37,99,235,.12);--border-glass:rgba(37,99,235,.15);--border-gold:rgba(37,99,235,.25);
  --neon-green:#16a34a;--neon-green-dim:rgba(22,163,74,.1);
  --neon-red:#dc2626;--neon-red-dim:rgba(220,38,38,.08);
  --neon-blue:#2563eb;--neon-orange:#ea580c;--neon-purple:#7c3aed;
  --text-primary:#0c1a2e;--text-secondary:#3b5068;--text-muted:#7088a0;
  --text-on-accent:#ffffff;--text-inverse:#0c1a2e;
  --header-bg:rgba(255,255,255,.92);--header-shadow:rgba(37,99,235,.08);
  --sidebar-bg:linear-gradient(180deg,#f8fbff 0%,#f0f5fc 40%,#e4eefb 100%);
  --sidebar-header-bg:linear-gradient(135deg,rgba(37,99,235,.05),rgba(37,99,235,.01));
  --signal-bg:linear-gradient(170deg,#f4f8ff,#e8f1fd 50%,#f0f5fc);
  --modal-bg:linear-gradient(160deg,#f8fbff,#ffffff 50%,#f0f5fc);
  --bubble-user-bg:rgba(37,99,235,.07);--bubble-user-border:rgba(37,99,235,.15);
  --bubble-mentor-bg:rgba(37,99,235,.04);--bubble-mentor-border:rgba(37,99,235,.12);
  --bubble-warden-bg:rgba(220,38,38,.06);--bubble-warden-border:rgba(220,38,38,.15);
  --dm-msg-mine-bg:linear-gradient(135deg,rgba(37,99,235,.1),rgba(37,99,235,.05));
  --dm-msg-mine-border:rgba(37,99,235,.15);
  --input-shadow:rgba(37,99,235,.06);
  --overlay-bg:rgba(12,26,46,.7);--overlay-light:rgba(12,26,46,.35);
  --emoji-bar-bg:rgba(255,255,255,.97);--emoji-bar-border:rgba(37,99,235,.12);
  --hover-overlay:rgba(37,99,235,.04);--hover-overlay-strong:rgba(37,99,235,.08);
  --notif-banner-bg:linear-gradient(135deg,#ffffff,#e8f1fd);
  --dm-system-bg:rgba(37,99,235,.04);
  --header-height:clamp(30px,5vh,36px);
  --signal-panel-height:clamp(78px,12vh,96px);
  --input-bar-height:clamp(68px,14vh,82px);
  --sidebar-width:clamp(260px,72vw,320px);
  --grid-line:rgba(37,99,235,.045);
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-full:9999px;
  --px:clamp(12px,3vw,18px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  background:var(--bg-deep);
  background-image:none;
  font-family:'Inter',sans-serif;color:var(--text-primary);
  height:100vh;height:100dvh;width:100vw;overflow:hidden;position:fixed;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body.auth-mode{position:static;overflow-y:auto;height:auto;min-height:100vh;min-height:100dvh}
::-webkit-scrollbar-thumb{background:rgba(37,99,235,.15)}
::-webkit-scrollbar-thumb:hover{background:rgba(37,99,235,.28)}
.send-btn svg,.dm-send-btn svg{color:#fff}
.sidebar-avatar{color:#fff}
.mentor-badge{color:#fff}
.sound-toggle-btn{background:rgba(22,163,74,.08);color:#16a34a;border-color:rgba(22,163,74,.2)}
.sound-toggle-btn.sound-off{background:rgba(100,116,139,.06);color:var(--text-muted);border-color:rgba(100,116,139,.15)}
.toggle-slider{background:rgba(100,116,139,.22)}
.toggle-slider::before{background:#fff}
.dm-menu-dropdown{background:var(--bg-elevated);border:1px solid var(--border-glass)}
a{color:var(--gold);text-decoration:none}a:hover{text-decoration:underline}
button{cursor:pointer;border:none;background:none;color:inherit;font-family:inherit}
input,textarea{font-family:inherit;color:inherit}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.14)}
.hidden{display:none!important}

/* ========== AUTH SCREEN ========== */
#app-auth{
  display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;
  background:linear-gradient(160deg,#0a1628 0%,#0d1f3c 25%,#122a4e 50%,#0f2240 75%,#091726 100%);
  padding:40px 16px;
  position:relative;overflow:hidden;
}
#app-auth::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,180,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,180,255,.04) 1px,transparent 1px);
  background-size:50px 50px;pointer-events:none;
}
#app-auth::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(0,150,255,.08),transparent 60%),
    radial-gradient(ellipse 50% 40% at 30% 80%,rgba(0,120,220,.05),transparent),
    radial-gradient(ellipse 40% 30% at 80% 60%,rgba(0,180,255,.04),transparent);
}
#neuron-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.auth-container{width:100%;max-width:400px;padding:0;position:relative;z-index:1}
.auth-logo{text-align:center;margin-bottom:32px;position:relative}
.auth-logo-glow{
  position:absolute;top:50%;left:50%;width:140px;height:140px;
  transform:translate(-50%,-60%);
  background:radial-gradient(circle,rgba(0,160,255,.15) 0%,rgba(0,120,220,.06) 50%,transparent 70%);
  border-radius:50%;pointer-events:none;filter:blur(25px);
}
.auth-logo .logo-img{height:42px;max-width:260px;margin:0 auto;display:block;object-fit:contain;position:relative;z-index:1;
  filter:drop-shadow(0 0 20px rgba(0,160,255,.35));
}
.auth-divider{display:flex;align-items:center;justify-content:center;margin:16px auto 0;width:60%}
.auth-divider span{display:block;height:1px;width:100%;background:linear-gradient(90deg,transparent,rgba(0,160,255,.3),rgba(100,180,255,.2),transparent)}
.auth-subtitle{color:#e0e8f0;margin-top:12px;font-size:1rem;font-weight:800;letter-spacing:4px;text-transform:uppercase;
  background:linear-gradient(135deg,#e0e8f0 30%,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.auth-warning{
  color:#e4b84a;margin-top:10px;font-size:.7rem;font-weight:600;letter-spacing:.3px;
  padding:6px 14px;border-radius:20px;display:inline-block;
  background:rgba(228,184,74,.08);border:1px solid rgba(228,184,74,.18);
}
.auth-form{
  background:linear-gradient(160deg,rgba(13,28,52,.9),rgba(10,22,40,.95));
  border:1px solid rgba(0,150,255,.1);
  border-radius:20px;padding:28px 24px;
  backdrop-filter:blur(20px);
  box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 0 1px rgba(0,150,255,.05) inset;
}
.auth-form h2{font-size:1.2rem;margin-bottom:20px;font-weight:700;color:#e0e8f0;letter-spacing:.5px}
.auth-form .form-group label{color:rgba(180,200,225,.7)}
.auth-form .form-group input{
  background:rgba(0,20,50,.4);border-color:rgba(0,150,255,.12);color:#e0e8f0;
}
.auth-form .form-group input::placeholder{color:rgba(150,175,210,.4)}
.auth-form .form-group input:focus{border-color:rgba(0,160,255,.5);box-shadow:0 0 0 3px rgba(0,150,255,.1);background:rgba(0,30,70,.4)}
.auth-form .btn-primary{
  background:linear-gradient(135deg,#1a6dd4,#2488e8);color:#fff;
  box-shadow:0 4px 16px rgba(0,120,255,.25);border:1px solid rgba(100,180,255,.2);
}
.auth-form .btn-primary:hover{background:linear-gradient(135deg,#2488e8,#1a6dd4);box-shadow:0 4px 20px rgba(0,120,255,.35)}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.72rem;font-weight:600;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.8px}
.form-group input{
  width:100%;padding:12px 16px;background:var(--bg-surface);
  border:1px solid var(--border-subtle);border-radius:10px;
  font-size:.93rem;transition:border-color .2s,box-shadow .2s,background .2s;outline:none;
  color:var(--text-primary);
}
.form-group input::placeholder{color:var(--text-muted)}
.form-group input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-subtle);background:var(--bg-elevated)}
.btn-primary{
  width:100%;padding:13px;
  background:linear-gradient(135deg,#1a6dd4,#2488e8);
  color:#fff;
  border-radius:10px;font-size:.95rem;font-weight:700;
  transition:all .2s;margin-top:8px;letter-spacing:.3px;
  box-shadow:0 4px 16px rgba(0,120,255,.25);
  border:1px solid rgba(100,180,255,.2);
}
.btn-primary:hover{background:linear-gradient(135deg,#2488e8,#1a6dd4);box-shadow:0 4px 20px rgba(0,120,255,.35)}
.btn-primary:active{transform:scale(.98)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

/* Password Change Section */
.password-change-section{margin-top:20px}
.password-change-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin-bottom:18px}
.password-change-title{font-size:.8rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:14px}
.btn-password-change{
  width:100%;padding:12px;background:transparent;color:var(--gold);
  border:1px solid var(--gold);border-radius:var(--r-sm);
  font-size:.88rem;font-weight:700;cursor:pointer;
  transition:all .2s;margin-top:8px;letter-spacing:.3px;
}
.btn-password-change:hover{background:rgba(228,184,74,.1)}
.btn-password-change:active{transform:scale(.98)}

/* AI Bot Section */
.ai-bot-section{margin-top:20px}
.ai-bot-section select{
  width:100%;padding:10px 12px;background:var(--bg-tertiary);color:var(--text-primary);
  border:1px solid var(--border);border-radius:var(--r-sm);font-size:.88rem;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  cursor:pointer;
}
.ai-bot-section select:focus{border-color:var(--gold);outline:none}
.ai-bot-section code{background:rgba(0,212,255,.1);color:#00d4ff;padding:1px 5px;border-radius:3px;font-size:.8rem}

.auth-switch{text-align:center;margin-top:20px;font-size:.88rem;color:rgba(160,185,220,.6)}
.auth-switch a{color:#60a5fa;font-weight:600;cursor:pointer}
#admin-codes-toggle:hover{border-color:rgba(228,184,74,.3);color:var(--text-secondary)}
#admin-codes-toggle.open{border-color:rgba(228,184,74,.25);color:var(--gold);background:rgba(228,184,74,.05)}
#admin-codes-toggle.open #admin-chevron{transform:rotate(180deg)}

/* ========== HEADER (slim) ========== */
header#app-header{
  height:var(--header-height);background:var(--header-bg);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(8px,2.5vw,14px);border-bottom:1px solid var(--border-glass);
  z-index:100;position:fixed;top:0;left:0;right:0;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 2px 12px var(--header-shadow);
}
.header-left{display:flex;align-items:center;gap:clamp(8px,2vw,12px);min-width:0;flex:1}
.menu-icon{font-size:clamp(16px,3.6vw,18px);color:var(--text-secondary);cursor:pointer;padding:4px;margin:-4px;user-select:none;position:relative;flex-shrink:0}
.header-group-name{
  font-size:clamp(.7rem,2.1vw,.82rem);font-weight:700;color:var(--text-primary);
  letter-spacing:.4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.header-group-name:empty::before{content:'CRYPTEX';color:var(--text-muted);font-weight:600;letter-spacing:1.5px}
.header-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.member-count{display:flex;align-items:center;gap:4px;font-size:clamp(.62rem,1.85vw,.7rem);color:var(--text-muted);font-weight:600;white-space:nowrap}
.member-count .dot{width:5px;height:5px;background:var(--neon-green);border-radius:50%;box-shadow:0 0 4px var(--neon-green)}

/* ========== SIGNAL PANEL ========== */
.signal-panel{
  position:fixed;top:var(--header-height);left:0;right:0;
  height:var(--signal-panel-height);z-index:99;overflow:hidden;
  background:radial-gradient(ellipse 80% 50% at 15% 10%,rgba(228,184,74,.07) 0%,transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 90%,rgba(0,232,123,.04) 0%,transparent 50%),
    var(--signal-bg);
  transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .4s,height .4s ease;transform:translateY(0);
  border-bottom:1px solid var(--border-gold);
}
.signal-panel.hidden{transform:translateY(calc(var(--signal-panel-height)*-1));opacity:0;pointer-events:none}
.signal-panel::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);opacity:.5}
/* signal-group-label moved into header; this rule is a safety fallback if anything still inserts the element inside the panel */
.signal-panel .signal-group-label{display:none}
.signal-content{padding:clamp(4px,1vw,6px) var(--px);height:100%;display:flex;flex-direction:column;gap:clamp(3px,.9vh,5px);position:relative;z-index:1}
.signal-top-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.signal-title-area{display:flex;align-items:center;gap:6px;min-width:0;flex:1}
.signal-title{display:flex;align-items:center;gap:6px;font-size:clamp(.72rem,2.2vw,.82rem);font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-primary)}
.signal-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(0,232,123,.1);border:1px solid rgba(0,232,123,.25);padding:1px 6px;border-radius:var(--r-full);font-size:clamp(.5rem,1.4vw,.56rem);color:var(--neon-green);font-weight:700}
.signal-badge::before{content:'';width:4px;height:4px;background:var(--neon-green);border-radius:50%;animation:liveDot 1.5s ease-in-out infinite}
@keyframes liveDot{0%,100%{opacity:1}50%{opacity:.25}}
.signal-mentor{display:none}

/* "NEXT HH:MM" pill shown beside WAITING during free hours */
.next-session-hint{
  display:inline-flex;align-items:center;
  font-size:clamp(.5rem,1.4vw,.56rem);font-weight:700;letter-spacing:.6px;
  color:var(--gold);background:rgba(245,200,66,.1);
  border:1px solid rgba(245,200,66,.25);
  padding:1px 6px;border-radius:var(--r-full);
  font-family:'JetBrains Mono',monospace;
}
.next-session-hint.hidden{display:none}

/* Auto-collapse ROUND/SIGNAL/BET/RESULT cards during off-session hours.
   Schedule (Manila): 17:00-18, 19:00-20, 20:30-21, 00:00-01, 02:00-03, 03:30-04.
   Outside those windows (and when no game is actively running), body gets .cards-collapsed. */
body.cards-collapsed{
  --signal-panel-height:clamp(40px,5.8vh,52px);
}
body.cards-collapsed .signal-panel .signal-data,
body.cards-collapsed .signal-panel .signal-badge{display:none}
body.cards-collapsed .signal-panel .prize-pool-strip{display:none}

/* Timer (text-only, ring removed) */
.timer-area{display:flex;align-items:baseline;gap:4px;flex-shrink:0}
.timer-num{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(.95rem,3vw,1.15rem);font-weight:800;
  color:var(--neon-green);text-shadow:0 0 8px rgba(0,232,123,.35);
  letter-spacing:.5px;
}
.timer-sub{font-size:clamp(.5rem,1.4vw,.58rem);color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;font-weight:600}

/* Signal data cards (compact) */
.signal-data{display:flex;gap:clamp(3px,.9vw,5px);flex:1;min-height:0}
.glass-card{
  flex:1;background:var(--bg-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border-glass);border-radius:var(--r-sm);
  padding:clamp(2px,.6vw,4px) clamp(2px,.6vw,4px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  position:relative;overflow:hidden;min-width:0;
}
.glass-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border-glass),transparent)}
.glass-card.card-signal{border-color:rgba(228,184,74,.15);background:rgba(228,184,74,.03)}
.glass-card.card-result.rw{border-color:rgba(0,232,123,.2);background:rgba(0,232,123,.04)}
.glass-card.card-result.rl{border-color:rgba(255,56,96,.2);background:rgba(255,56,96,.04)}
.card-label{font-size:clamp(.46rem,1.2vw,.52rem);color:var(--text-muted);text-transform:uppercase;letter-spacing:.7px;font-weight:700;line-height:1.1}
.card-value{font-size:clamp(.62rem,2vw,.78rem);font-weight:800;color:var(--text-primary);font-family:'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:all .4s;line-height:1.15}
.card-value.v-blue{color:var(--neon-blue);text-shadow:0 0 8px rgba(56,189,248,.3)}
.card-value.v-orange{color:var(--neon-orange);text-shadow:0 0 8px rgba(251,146,60,.3)}
.card-value.v-red{color:var(--neon-red);text-shadow:0 0 8px rgba(255,56,96,.3)}
.card-value.v-green{color:var(--neon-green);text-shadow:0 0 8px rgba(0,232,123,.3)}
.card-value.v-purple{color:var(--neon-purple);text-shadow:0 0 8px rgba(167,139,250,.3)}
.card-value.pending{color:var(--text-muted);font-size:clamp(.65rem,2.1vw,.75rem)}
.card-value.win{color:var(--neon-green);text-shadow:0 0 10px rgba(0,232,123,.4)}
.card-value.lose{color:var(--neon-red);text-shadow:0 0 10px rgba(255,56,96,.4)}
.card-value.analyzing{color:var(--gold);font-size:clamp(.6rem,1.9vw,.7rem)}
/* Prize Pool Strip — Base */
.prize-pool-strip{
  display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vw,10px);
  padding:clamp(2px,.6vh,4px) var(--px);
  background:linear-gradient(90deg,transparent,rgba(228,184,74,.06),rgba(212,175,55,.1),rgba(228,184,74,.06),transparent);
  position:relative;overflow:hidden;transition:all .5s ease;
}
.prize-pool-strip.hidden{display:none}
.prize-pool-strip::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(228,184,74,.25),transparent);transition:all .5s;
}
.prize-pool-strip-label{
  font-size:clamp(.5rem,1.5vw,.6rem);font-weight:800;letter-spacing:1.5px;
  color:var(--gold);opacity:.7;transition:all .4s;
}
.prize-pool-strip-value{
  font-family:'JetBrains Mono',monospace;font-weight:900;
  font-size:clamp(.75rem,2.5vw,.95rem);
  background:linear-gradient(135deg,#fff5cc,#d4af37,#aa771c);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 4px rgba(212,175,55,.4));
  transition:font-size .4s,filter .4s;
}
/* Shimmer overlay (shared by all growing tiers) */
.prize-pool-strip::after{
  content:'';position:absolute;inset:0;opacity:0;
  background:linear-gradient(90deg,transparent 30%,rgba(255,245,204,.08) 50%,transparent 70%);
  transition:opacity .4s;pointer-events:none;
}

/* ── TIER 1: Warm ($0.30 bet — 1 loss) ── */
.prize-pool-strip.pp-t1{
  background:linear-gradient(90deg,transparent,rgba(228,184,74,.08),rgba(212,175,55,.14),rgba(228,184,74,.08),transparent);
}
.prize-pool-strip.pp-t1::before{left:8%;right:8%;background:linear-gradient(90deg,transparent,rgba(228,184,74,.35),transparent)}
.prize-pool-strip.pp-t1 .prize-pool-strip-label{opacity:.85}
.prize-pool-strip.pp-t1 .prize-pool-strip-value{
  font-size:clamp(.78rem,2.6vw,.98rem);
  filter:drop-shadow(0 0 5px rgba(212,175,55,.5));
  animation:ppPulse1 2s ease-in-out infinite;
}
.prize-pool-strip.pp-t1::after{opacity:1;animation:ppShimmer 4s ease-in-out infinite}

/* ── TIER 2: Hot ($0.90 bet — 2 losses) ── */
.prize-pool-strip.pp-t2{
  background:linear-gradient(90deg,transparent,rgba(228,184,74,.12),rgba(212,175,55,.22),rgba(228,184,74,.12),transparent);
}
.prize-pool-strip.pp-t2::before{left:5%;right:5%;background:linear-gradient(90deg,transparent,rgba(228,184,74,.5),transparent)}
.prize-pool-strip.pp-t2 .prize-pool-strip-label{opacity:1;color:#e8c84a}
.prize-pool-strip.pp-t2 .prize-pool-strip-value{
  font-size:clamp(.82rem,2.8vw,1.02rem);
  filter:drop-shadow(0 0 6px rgba(212,175,55,.6));
  animation:ppPulse2 1.6s ease-in-out infinite;
}
.prize-pool-strip.pp-t2::after{opacity:1;animation:ppShimmer 3s ease-in-out infinite}

/* ── TIER 3: Blazing ($2.70 bet — 3 losses) ── */
.prize-pool-strip.pp-t3{
  background:linear-gradient(90deg,transparent,rgba(228,184,74,.16),rgba(255,200,50,.28),rgba(228,184,74,.16),transparent);
  box-shadow:0 0 10px rgba(228,184,74,.1);
}
.prize-pool-strip.pp-t3::before{left:2%;right:2%;background:linear-gradient(90deg,transparent,rgba(255,215,0,.6),transparent)}
.prize-pool-strip.pp-t3 .prize-pool-strip-label{opacity:1;color:#ffd700;text-shadow:0 0 6px rgba(255,215,0,.3)}
.prize-pool-strip.pp-t3 .prize-pool-strip-value{
  font-size:clamp(.86rem,3vw,1.08rem);
  background:linear-gradient(135deg,#fffde0,#ffd700,#e8a800);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 8px rgba(255,215,0,.6)) drop-shadow(0 0 16px rgba(228,184,74,.3));
  animation:ppPulse3 1.3s ease-in-out infinite;
}
.prize-pool-strip.pp-t3::after{opacity:1;animation:ppShimmer 2.5s ease-in-out infinite}

/* ── TIER 4: Inferno ($8.10 bet — 4 losses) ── */
.prize-pool-strip.pp-t4{
  background:linear-gradient(90deg,transparent,rgba(255,160,50,.12),rgba(255,200,50,.3),rgba(255,160,50,.12),transparent);
  box-shadow:0 0 16px rgba(255,180,50,.15),0 0 32px rgba(228,184,74,.08);
}
.prize-pool-strip.pp-t4::before{left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,200,50,.7),rgba(255,160,50,.9),rgba(255,200,50,.7),transparent)}
.prize-pool-strip.pp-t4 .prize-pool-strip-label{opacity:1;color:#ffb833;text-shadow:0 0 8px rgba(255,180,50,.4);letter-spacing:2px}
.prize-pool-strip.pp-t4 .prize-pool-strip-value{
  font-size:clamp(.9rem,3.2vw,1.14rem);
  background:linear-gradient(135deg,#fff,#ffd700,#ff9500);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 10px rgba(255,180,50,.7)) drop-shadow(0 0 22px rgba(255,150,0,.4));
  animation:ppPulse4 1s ease-in-out infinite;
}
.prize-pool-strip.pp-t4::after{opacity:1;animation:ppShimmer 2s ease-in-out infinite}

/* ── TIER 5: LEGENDARY ($24.30+ bet — 5+ losses) ── */
.prize-pool-strip.pp-t5{
  background:linear-gradient(90deg,rgba(255,100,0,.06),rgba(255,180,50,.15),rgba(255,215,0,.35),rgba(255,180,50,.15),rgba(255,100,0,.06));
  box-shadow:0 0 20px rgba(255,180,50,.2),0 0 40px rgba(255,140,0,.1),inset 0 0 20px rgba(255,200,50,.05);
}
.prize-pool-strip.pp-t5::before{left:0;right:0;height:2px;background:linear-gradient(90deg,rgba(255,100,0,.5),rgba(255,215,0,.9),#fff,rgba(255,215,0,.9),rgba(255,100,0,.5));animation:ppBorderGlow 2s ease-in-out infinite}
.prize-pool-strip.pp-t5 .prize-pool-strip-label{opacity:1;color:#ff9500;text-shadow:0 0 10px rgba(255,150,0,.5);letter-spacing:2.5px;animation:ppLabelFlicker 3s ease-in-out infinite}
.prize-pool-strip.pp-t5 .prize-pool-strip-value{
  font-size:clamp(.95rem,3.5vw,1.2rem);
  background:linear-gradient(135deg,#fff,#ffe066,#ffa500,#ff6600);background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 12px rgba(255,160,0,.8)) drop-shadow(0 0 28px rgba(255,120,0,.5)) drop-shadow(0 0 40px rgba(255,80,0,.2));
  animation:ppPulse5 .8s ease-in-out infinite,ppGradientShift 3s ease-in-out infinite;
}
.prize-pool-strip.pp-t5::after{opacity:1;animation:ppShimmer 1.5s ease-in-out infinite}

/* ── Animations ── */
@keyframes ppPulse1{
  0%,100%{filter:drop-shadow(0 0 5px rgba(212,175,55,.5));transform:scale(1)}
  50%{filter:drop-shadow(0 0 8px rgba(212,175,55,.6));transform:scale(1.02)}
}
@keyframes ppPulse2{
  0%,100%{filter:drop-shadow(0 0 6px rgba(212,175,55,.6));transform:scale(1)}
  50%{filter:drop-shadow(0 0 10px rgba(212,175,55,.7)) drop-shadow(0 0 16px rgba(228,184,74,.3));transform:scale(1.03)}
}
@keyframes ppPulse3{
  0%,100%{filter:drop-shadow(0 0 8px rgba(255,215,0,.6)) drop-shadow(0 0 16px rgba(228,184,74,.3));transform:scale(1)}
  50%{filter:drop-shadow(0 0 12px rgba(255,215,0,.8)) drop-shadow(0 0 24px rgba(228,184,74,.4));transform:scale(1.04)}
}
@keyframes ppPulse4{
  0%,100%{filter:drop-shadow(0 0 10px rgba(255,180,50,.7)) drop-shadow(0 0 22px rgba(255,150,0,.4));transform:scale(1)}
  50%{filter:drop-shadow(0 0 14px rgba(255,180,50,.9)) drop-shadow(0 0 30px rgba(255,140,0,.5));transform:scale(1.05)}
}
@keyframes ppPulse5{
  0%,100%{filter:drop-shadow(0 0 12px rgba(255,160,0,.8)) drop-shadow(0 0 28px rgba(255,120,0,.5)) drop-shadow(0 0 40px rgba(255,80,0,.2));transform:scale(1)}
  50%{filter:drop-shadow(0 0 16px rgba(255,160,0,1)) drop-shadow(0 0 35px rgba(255,120,0,.7)) drop-shadow(0 0 50px rgba(255,80,0,.3));transform:scale(1.06)}
}
@keyframes ppShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes ppBorderGlow{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes ppLabelFlicker{0%,100%{opacity:1}50%{opacity:.8}}
@keyframes ppGradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.signal-panel-border{position:absolute;bottom:0;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent,var(--border-gold),transparent)}

@keyframes signalPop{0%{transform:scale(.7);opacity:0}50%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.signal-pop{animation:signalPop .5s cubic-bezier(.22,1,.36,1)}

/* Game Master Pinned Screenshot */
.gm-pin{background:linear-gradient(135deg,rgba(0,255,136,.06),rgba(245,200,66,.06));border-top:1px solid var(--border-gold);padding:8px 12px;animation:gmPinSlide .3s ease}
.gm-pin.hidden{display:none}
.gm-pin-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.gm-pin-badge{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--neon-green);background:rgba(0,255,136,.12);padding:3px 10px;border-radius:10px;border:1px solid rgba(0,255,136,.25)}
.gm-pin-unpin{font-size:.65rem;font-weight:700;color:var(--neon-red);background:rgba(255,68,102,.12);padding:3px 10px;border-radius:8px;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;border:1px solid rgba(255,68,102,.25);margin-left:auto}
.gm-pin-unpin:hover{background:rgba(255,68,102,.25)}
.gm-pin-unpin.hidden{display:none}
.gm-pin-close{color:var(--text-muted);font-size:1.2rem;cursor:pointer;padding:0 4px;line-height:1}
.gm-pin-close:hover{color:#fff}
.gm-pin-img{width:100%;max-height:220px;object-fit:contain;border-radius:8px;cursor:pointer;border:1px solid rgba(255,255,255,.08)}
.gm-pin-caption{font-size:.8rem;color:var(--text);font-weight:600;margin-top:6px;padding:4px 8px;background:rgba(0,0,0,.3);border-radius:6px;line-height:1.4}
.gm-pin-caption.hidden{display:none}
@keyframes gmPinSlide{from{opacity:0;max-height:0;padding:0 12px}to{opacity:1;max-height:300px;padding:8px 12px}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 16px rgba(228,184,74,.15)}}
.glow-pulse{animation:glowPulse 2s ease-in-out infinite}

/* ========== BREAK BAR ========== */
.break-bar{
  position:fixed;top:var(--header-height);left:0;right:0;z-index:98;
  background:linear-gradient(135deg,rgba(167,139,250,.06),rgba(56,189,248,.04));
  border-bottom:1px solid rgba(167,139,250,.12);
  padding:clamp(10px,2.5vw,14px) var(--px);display:flex;align-items:center;justify-content:space-between;
  transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .4s;transform:translateY(0);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.break-bar.hidden{transform:translateY(-100%);opacity:0;pointer-events:none}
.break-info{display:flex;flex-direction:column;gap:2px}
.break-title{font-size:clamp(.7rem,2.3vw,.82rem);font-weight:800;color:var(--neon-purple);text-transform:uppercase;letter-spacing:1px}
.break-sub{font-size:clamp(.55rem,1.7vw,.64rem);color:var(--text-muted);font-weight:500}
.break-timer{font-family:'JetBrains Mono',monospace;font-size:clamp(1.1rem,4vw,1.4rem);font-weight:900;color:var(--neon-blue);text-shadow:0 0 12px rgba(56,189,248,.3)}

/* ========== MAIN CONTAINER / CHAT ========== */
.main-container{
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;right:0;bottom:0;
  padding-top:calc(var(--header-height) + var(--signal-panel-height));
  padding-bottom:var(--input-bar-height);
  transition:padding-top .6s cubic-bezier(.22,1,.36,1);
}
.main-container.break-mode{padding-top:calc(var(--header-height) + 52px)}
.main-container.lto-active{padding-top:calc(var(--header-height) + var(--signal-panel-height) + 38px)}

#chat-window{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:clamp(10px,2vh,16px) var(--px) clamp(10px,2vh,16px);
  display:flex;flex-direction:column;gap:clamp(5px,1vw,7px);
  background:var(--bg-deep);-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  position:relative;
}
#chat-window::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;
  background-image:linear-gradient(var(--grid-line,rgba(37,99,235,.045)) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line,rgba(37,99,235,.045)) 1px,transparent 1px);
  background-size:48px 48px;pointer-events:none;z-index:0;
}
.main-container.has-custom-bg #chat-window::before{display:none}
#chat-window::after{content:'';display:block;min-height:8px;flex-shrink:0}

/* ========== MESSAGES ========== */
.msg-container{display:flex;gap:clamp(7px,1.8vw,9px);max-width:min(88%,680px);animation:msgIn .35s cubic-bezier(.22,1,.36,1);flex-shrink:0}
.msg-user{align-self:flex-end;flex-direction:row-reverse}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Avatars */
.avatar{width:clamp(28px,7vw,34px);height:clamp(28px,7vw,34px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(9px,2.2vw,11px);font-weight:700;flex-shrink:0;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
/* Mentor rainbow glow avatar */
.avatar-mentor{position:relative;overflow:visible!important;border:2px solid transparent;background-clip:padding-box}
.avatar-mentor::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(#ff4466,#ff8844,#f5c842,#00ff88,#4488ff,#aa44ff,#ff4466);z-index:-1;animation:mentorGlow 3s linear infinite}
.avatar-mentor img{border-radius:50%}
@keyframes mentorGlow{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
/* VIP golden glow avatar */
.avatar-vip{position:relative;overflow:visible!important;border:2px solid transparent;background-clip:padding-box}
.avatar-vip::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(#f5c842,#e0a800,#ffd700,#f5c842,#e0a800,#ffd700,#f5c842);z-index:-1;animation:vipGlow 4s linear infinite}
.avatar-vip::after{content:'VIP';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);font-size:6px;font-weight:900;letter-spacing:.5px;color:#000;background:linear-gradient(135deg,#ffd700,#f5c842);padding:1px 5px;border-radius:4px;z-index:2;white-space:nowrap;line-height:1.2;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.avatar-vip img{border-radius:50%}
@keyframes vipGlow{0%{filter:brightness(1) drop-shadow(0 0 3px rgba(245,200,66,.5))}50%{filter:brightness(1.2) drop-shadow(0 0 8px rgba(245,200,66,.8))}100%{filter:brightness(1) drop-shadow(0 0 3px rgba(245,200,66,.5))}}
.av-ml{background:linear-gradient(135deg,#e4b84a,#c9872e);color:#000;box-shadow:0 0 8px rgba(228,184,74,.25)}
.av-wd{background:linear-gradient(135deg,#ff4466,#cc0033);color:#fff;box-shadow:0 0 10px rgba(255,68,102,.4);animation:wardenPulse 2s ease-in-out infinite}
@keyframes wardenPulse{0%,100%{box-shadow:0 0 8px rgba(255,68,102,.3)}50%{box-shadow:0 0 16px rgba(255,68,102,.6)}}
.av-me{background:linear-gradient(135deg,#38bdf8,#2563eb);color:#fff}
.av-real{background:linear-gradient(135deg,var(--gold),var(--gold-dim));color:#050507}
.av-0{background:linear-gradient(135deg,#6366f1,#4338ca);color:#fff}
.av-1{background:linear-gradient(135deg,#ec4899,#be185d);color:#fff}
.av-2{background:linear-gradient(135deg,#14b8a6,#0f766e);color:#fff}
.av-3{background:linear-gradient(135deg,#f59e0b,#b45309);color:#fff}
.av-4{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff}
.av-5{background:linear-gradient(135deg,#22d3ee,#0e7490);color:#fff}
.av-6{background:linear-gradient(135deg,#a78bfa,#6d28d9);color:#fff}
.av-7{background:linear-gradient(135deg,#34d399,#047857);color:#fff}
.av-8{background:linear-gradient(135deg,#fb923c,#c2410c);color:#fff}
.av-9{background:linear-gradient(135deg,#f472b6,#db2777);color:#fff}

/* Bubbles */
.bubble{
  background:var(--bg-elevated);padding:clamp(8px,2vw,10px) clamp(12px,3vw,15px);
  border-radius:18px;border:1px solid var(--border-subtle);
  font-size:clamp(.82rem,3vw,.9rem);line-height:1.55;
  color:var(--text-primary);word-wrap:break-word;max-width:100%;position:relative;
}
.msg-user .bubble{background:var(--bubble-user-bg);border-color:var(--bubble-user-border);border-bottom-right-radius:6px}
.msg-container:not(.msg-user) .bubble{border-bottom-left-radius:6px}
.bub-ml{background:var(--bubble-mentor-bg);border-color:var(--bubble-mentor-border)}
.bub-wd{background:var(--bubble-warden-bg);border-color:var(--bubble-warden-border)}
.bub-real{background:var(--bg-elevated);border-color:var(--border-glass)}

/* Labels */
.user-label{display:block;font-size:clamp(.56rem,1.6vw,.62rem);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.lb-ml{color:var(--gold)}.lb-wd{color:#ff4466;font-weight:800}.lb-bot{color:var(--text-muted)}.lb-me{color:var(--neon-blue)}.lb-real{color:var(--neon-purple)}
.mentor-badge{display:inline-flex;align-items:center;font-size:.55rem;font-weight:800;letter-spacing:.8px;color:#fff;background:linear-gradient(135deg,#ff4466,#ff8844,#f5c842,#00cc66,#4488ff,#aa44ff);padding:2px 7px;border-radius:6px;margin-left:6px;vertical-align:middle;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 0 8px rgba(255,68,102,.25),0 0 4px rgba(68,136,255,.2)}
.gm-badge{display:inline-flex;align-items:center;font-size:.55rem;font-weight:800;letter-spacing:.8px;color:#000;background:linear-gradient(135deg,#00ff88,#00cc66);padding:2px 7px;border-radius:6px;margin-left:5px;vertical-align:middle;text-transform:uppercase;box-shadow:0 0 8px rgba(0,255,136,.3)}
.vip-badge{display:inline-flex;align-items:center;font-size:.55rem;font-weight:800;letter-spacing:.8px;color:#000;background:linear-gradient(135deg,#ffd700,#f5c842,#e0a800);padding:2px 7px;border-radius:6px;margin-left:5px;vertical-align:middle;text-transform:uppercase;box-shadow:0 0 8px rgba(245,200,66,.4);text-shadow:none}
.mentor-note-badge{display:inline-flex;align-items:center;font-size:.55rem;font-weight:600;color:var(--text-muted,#8a8a9a);background:rgba(255,255,255,.06);padding:2px 7px;border-radius:6px;margin-left:6px;vertical-align:middle;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(255,255,255,.08)}
.mentor-mute-btn{background:none;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:3px 6px;cursor:pointer;color:var(--text-muted);transition:all .2s;display:flex;align-items:center}
.mentor-mute-btn:hover{border-color:var(--neon-orange);color:var(--neon-orange)}
.mentor-mute-btn.muted{border-color:var(--neon-red);color:var(--neon-red)}
.mentor-mute-btn.muted svg{stroke:var(--neon-red)}
.msg-text{white-space:pre-line}

/* Chat images */
.chat-img{max-width:100%;max-height:220px;border-radius:var(--r-md);margin-top:4px;display:block;cursor:pointer;object-fit:cover}
.chat-img-full{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;cursor:pointer;animation:msgIn .2s ease}
.chat-img-full img{max-width:95vw;max-height:90vh;border-radius:var(--r-md);object-fit:contain}
.chat-img-full .chat-video-full{max-width:95vw;max-height:90vh;border-radius:var(--r-md);object-fit:contain}
.chat-video-wrap{position:relative;display:inline-block;cursor:pointer}
.chat-video-expand{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;pointer-events:none;opacity:.8;backdrop-filter:blur(4px)}

/* Media reply button overlay */
.media-reply-wrap{position:relative;display:inline-block}
.media-reply-btn{position:absolute;bottom:10px;right:10px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.7;transition:opacity .2s,background .2s,transform .15s;backdrop-filter:blur(4px);z-index:2}
.media-reply-btn:hover{opacity:1;background:rgba(0,232,123,.7);transform:scale(1.1)}
.media-reply-btn:active{transform:scale(.95)}
.gif-save-wrap .media-reply-btn{bottom:10px;right:10px}
.chat-video-wrap .media-reply-btn{bottom:10px;left:10px;right:auto;pointer-events:auto}

/* Result notifications */
.result-notification{
  align-self:center;background:var(--neon-green-dim);border:1px solid rgba(0,232,123,.2);
  padding:clamp(6px,1.5vw,8px) clamp(16px,4vw,24px);border-radius:var(--r-full);
  color:var(--neon-green);font-size:clamp(.72rem,2.5vw,.82rem);font-weight:700;
  text-transform:uppercase;text-align:center;margin:clamp(3px,.8vw,5px) 0;
  letter-spacing:.5px;animation:resultPop .5s cubic-bezier(.22,1,.36,1);flex-shrink:0;
}
.result-notification.lose{background:var(--neon-red-dim);border-color:rgba(255,56,96,.2);color:var(--neon-red)}
@keyframes resultPop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}

/* Session divider */
.session-divider{align-self:center;text-align:center;padding:clamp(12px,3vw,18px) clamp(20px,5vw,30px);margin:8px 0;flex-shrink:0;animation:msgIn .5s ease}
.session-divider .sd-line{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);margin:0 auto 8px}
.session-divider .sd-emoji{font-size:clamp(1.4rem,5vw,1.8rem);display:block;margin-bottom:4px}
.session-divider .sd-title{font-size:clamp(.8rem,2.8vw,.92rem);font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-primary)}
.session-divider .sd-game{font-size:clamp(.65rem,2.2vw,.75rem);color:var(--neon-blue);font-weight:700;margin-top:2px}
.session-divider .sd-mentor{font-size:clamp(.58rem,1.8vw,.66rem);color:var(--gold);font-weight:600;margin-top:2px}
.session-divider .sd-sub{font-size:clamp(.52rem,1.6vw,.6rem);color:var(--text-muted);margin-top:3px}

/* Session end */
.session-end{align-self:center;text-align:center;padding:clamp(12px,3vw,18px) clamp(20px,5vw,30px);margin:8px 0;flex-shrink:0;animation:msgIn .5s ease}
.session-end .se-emoji{font-size:clamp(1.6rem,6vw,2rem);display:block;margin-bottom:4px}
.session-end .se-title{font-size:clamp(.75rem,2.6vw,.88rem);font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--neon-green)}
.session-end .se-sub{font-size:clamp(.55rem,1.8vw,.64rem);color:var(--text-muted);margin-top:4px}

/* ========== INPUT BAR ========== */
.input-bar{
  position:fixed;bottom:0;left:0;right:0;
  min-height:var(--input-bar-height);
  padding:8px var(--px);
  padding-bottom:max(8px,env(safe-area-inset-bottom));
  background:var(--bg-elevated);
  border-top:1px solid var(--border-glass);
  display:flex;gap:clamp(8px,2vw,10px);z-index:101;
  align-items:flex-end;
  box-shadow:0 -4px 20px var(--input-shadow);
}
.input-wrapper{flex:1;min-width:0}
#chat-input{
  width:100%;background:var(--bg-surface);border:1px solid var(--border-subtle);
  padding:clamp(12px,3vw,15px) clamp(16px,4vw,20px);border-radius:20px;
  color:var(--text-primary);outline:none;font-size:clamp(14px,3.5vw,16px);font-family:'Inter',sans-serif;
  transition:border-color .2s,box-shadow .2s;
  resize:none;overflow-y:auto;max-height:150px;min-height:0;
  line-height:1.4;display:block;box-sizing:border-box;
}
#chat-input:focus{border-color:var(--gold-dim);box-shadow:0 0 0 3px var(--gold-subtle)}
#chat-input::placeholder{color:var(--text-muted)}
.img-btn{
  width:clamp(38px,9vw,44px);height:clamp(38px,9vw,44px);min-width:38px;
  background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:border-color .2s,transform .1s;
}
.img-btn:hover{border-color:var(--text-muted)}
.img-btn:active{border-color:var(--gold);transform:scale(.9)}
.img-btn svg{width:18px;height:18px}

/* GIF Button */
.gif-btn{
  width:clamp(38px,9vw,44px);height:clamp(38px,9vw,44px);min-width:38px;
  background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:border-color .2s,transform .1s;
}
.gif-btn:hover{border-color:var(--gold-dim)}
.gif-btn:active{border-color:var(--gold);transform:scale(.9)}
.gif-btn-label{
  font-size:11px;font-weight:800;color:#888;letter-spacing:-.5px;
  font-family:'Inter',sans-serif;
}
.gif-btn:hover .gif-btn-label{color:var(--gold)}

/* GIF Arsenal Panel */
.gif-arsenal-panel{
  position:absolute;bottom:calc(var(--input-bar-height) + 4px);left:var(--px);right:var(--px);
  max-height:280px;background:var(--bg-elevated);border:1px solid var(--border-glass);
  border-radius:16px;z-index:200;overflow:hidden;
  box-shadow:0 -8px 32px rgba(0,0,0,.5);
  animation:gifPanelSlide .2s ease-out;
}
.gif-arsenal-dm{
  position:relative;bottom:auto;left:auto;right:auto;
  border-radius:12px 12px 0 0;border-bottom:none;
  max-height:240px;
}
@keyframes gifPanelSlide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.gif-arsenal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--border-subtle);
}
.gif-arsenal-title{
  font-size:.85rem;font-weight:700;color:var(--gold);
  letter-spacing:.5px;text-transform:uppercase;
}
.gif-arsenal-close{
  background:none;border:none;color:var(--text-muted);font-size:1.2rem;
  cursor:pointer;padding:2px 6px;border-radius:6px;
}
.gif-arsenal-close:hover{color:var(--text-primary);background:var(--bg-surface)}
.gif-arsenal-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:6px;padding:10px;overflow-y:auto;max-height:220px;
}
.gif-arsenal-dm .gif-arsenal-grid{max-height:180px}
.gif-arsenal-item{
  position:relative;border-radius:8px;overflow:hidden;cursor:pointer;
  aspect-ratio:1;background:var(--bg-surface);
}
.gif-arsenal-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .15s;
}
.gif-arsenal-item:hover img{transform:scale(1.05)}
.gif-arsenal-item .gif-remove{
  position:absolute;top:4px;right:4px;
  width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.7);border:none;color:#ff6b6b;
  font-size:14px;cursor:pointer;display:none;
  align-items:center;justify-content:center;line-height:1;
}
.gif-arsenal-item:hover .gif-remove{display:flex}
.gif-arsenal-empty{
  grid-column:1/-1;text-align:center;padding:30px 10px;
  color:var(--text-muted);font-size:.85rem;
}

/* Save GIF overlay button on chat images */
.gif-save-wrap{position:relative;display:inline-block}
.gif-save-btn{
  position:absolute;bottom:8px;right:8px;
  padding:4px 10px;border-radius:20px;
  background:rgba(0,0,0,.75);border:1px solid var(--gold-dim);
  color:var(--gold);font-size:11px;font-weight:700;
  cursor:pointer;opacity:0;transition:opacity .2s;
  backdrop-filter:blur(8px);letter-spacing:.3px;
  z-index:5;
}
.gif-save-wrap:hover .gif-save-btn{opacity:1}
.gif-save-btn:hover{background:var(--gold);color:#000}
.gif-save-btn.saved{background:rgba(0,0,0,.75);border-color:#4ade80;color:#4ade80;pointer-events:none}

/* GIF Arsenal header actions */
.gif-arsenal-header-actions{display:flex;align-items:center;gap:8px}
.gif-arsenal-count{font-size:.75rem;color:var(--text-muted);font-weight:600}
.gif-arsenal-upload-btn{
  padding:4px 12px;border-radius:16px;
  background:var(--gold);border:none;color:#000;
  font-size:.75rem;font-weight:700;cursor:pointer;
  transition:background .2s,transform .1s;
  font-family:'Inter',sans-serif;
}
.gif-arsenal-upload-btn:hover{background:var(--gold-dim)}
.gif-arsenal-upload-btn:active{transform:scale(.95)}
.gif-arsenal-upload-btn.disabled{opacity:.5;pointer-events:none}

/* Emoji Button */
.emoji-btn{
  width:clamp(38px,9vw,44px);height:clamp(38px,9vw,44px);min-width:38px;
  background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:border-color .2s,transform .1s;
}
.emoji-btn:hover{border-color:var(--gold-dim)}
.emoji-btn:active{border-color:var(--gold);transform:scale(.9)}
.emoji-btn-label{font-size:18px;line-height:1}

/* Emoji Picker Panel */
.emoji-picker-panel{
  position:absolute;bottom:calc(var(--input-bar-height) + 4px);left:var(--px);right:var(--px);
  max-height:320px;background:var(--bg-elevated);border:1px solid var(--border-glass);
  border-radius:16px;z-index:200;overflow:hidden;
  box-shadow:0 -8px 32px rgba(0,0,0,.5);
  animation:gifPanelSlide .2s ease-out;
  display:flex;flex-direction:column;
}
.emoji-picker-dm{
  position:relative;bottom:auto;left:auto;right:auto;
  border-radius:12px 12px 0 0;border-bottom:none;
  max-height:280px;
}
.emoji-picker-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-bottom:1px solid var(--border-subtle);
  flex-shrink:0;
}
.emoji-picker-tabs{display:flex;gap:4px;overflow-x:auto;flex:1}
.emoji-picker-tabs::-webkit-scrollbar{display:none}
.emoji-tab{
  padding:4px 8px;border-radius:8px;border:none;
  background:transparent;cursor:pointer;font-size:16px;
  transition:background .15s;flex-shrink:0;
}
.emoji-tab:hover{background:var(--bg-surface)}
.emoji-tab.active{background:var(--gold);border-radius:8px}
.emoji-picker-search{padding:6px 12px;flex-shrink:0}
.emoji-picker-search input{
  width:100%;padding:7px 12px;background:var(--bg-surface);
  border:1px solid var(--border-subtle);border-radius:var(--r-full);
  color:var(--text-primary);outline:none;font-size:.8rem;
  font-family:'Inter',sans-serif;
}
.emoji-picker-search input:focus{border-color:var(--gold-dim)}
.emoji-picker-search input::placeholder{color:var(--text-muted)}
.emoji-picker-grid{
  display:grid;grid-template-columns:repeat(8,1fr);
  gap:2px;padding:6px 10px;overflow-y:auto;flex:1;
}
.emoji-picker-grid .emoji-cat-label{
  grid-column:1/-1;font-size:.7rem;font-weight:700;
  color:var(--text-muted);padding:6px 2px 2px;text-transform:uppercase;
  letter-spacing:.5px;
}
.emoji-pick-item{
  display:flex;align-items:center;justify-content:center;
  font-size:22px;padding:6px;border-radius:8px;cursor:pointer;
  transition:background .1s,transform .1s;border:none;background:none;
}
.emoji-pick-item:hover{background:var(--bg-surface);transform:scale(1.15)}
.emoji-pick-item:active{transform:scale(.9)}

.send-btn{
  width:clamp(42px,10vw,48px);height:clamp(42px,10vw,48px);min-width:42px;
  background:var(--gold);border:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .2s,transform .1s;
  box-shadow:0 2px 10px rgba(228,184,74,.3);
}
.send-btn svg{width:18px;height:18px}
.send-btn:hover{background:var(--gold-dim)}
.send-btn:active{transform:scale(.9);background:var(--gold-dim)}

/* ========== SIDEBAR ========== */
.sidebar{
  position:fixed;left:0;top:0;width:var(--sidebar-width);
  height:100vh;height:100dvh;z-index:200;
  background:var(--sidebar-bg);
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  will-change:transform;
  border-right:1px solid var(--border-glass);
  overflow-y:auto;display:flex;flex-direction:column;
  box-shadow:4px 0 20px rgba(0,0,0,.4);
}
.sidebar.active{transform:translateX(0)}

/* Sidebar header / profile */
.sidebar-header{
  padding:clamp(20px,4vh,28px) var(--px) clamp(16px,3vh,20px);
  border-bottom:1px solid var(--border-glass);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--sidebar-header-bg);
}
.sidebar-profile{display:flex;align-items:center;gap:12px;flex:1;min-width:0;cursor:pointer;transition:opacity .2s}
.sidebar-profile:hover{opacity:.85}
.sidebar-avatar{
  width:46px;height:46px;min-width:46px;border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--gold),var(--gold-dim));
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:var(--text-on-accent);overflow:hidden;
  border:2px solid rgba(228,184,74,.3);box-shadow:0 0 12px rgba(228,184,74,.15);
}
.sidebar-avatar img{width:100%;height:100%;object-fit:cover}
.sidebar-user-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#sidebar-user-name{font-weight:700;font-size:.95rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}
#sidebar-user-handle{font-size:.75rem;color:var(--text-muted);display:block}
.sidebar-user-status{font-size:.65rem;color:var(--neon-green);font-weight:600;display:flex;align-items:center;gap:4px}
.status-dot{width:5px;height:5px;border-radius:50%;background:var(--neon-green);box-shadow:0 0 4px var(--neon-green)}
.sidebar-close-btn{
  width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;
  justify-content:center;transition:all .2s;color:var(--text-secondary);
}
.sidebar-close-btn:hover{background:var(--bg-surface);color:var(--text-primary)}

/* Sidebar divider */
.sidebar-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-glass),transparent);margin:4px var(--px)}

/* Section titles */
.sidebar-section-title{
  padding:clamp(14px,3vw,18px) var(--px) clamp(6px,1.2vw,8px);
  color:var(--text-muted);font-size:clamp(.58rem,1.8vw,.65rem);
  text-transform:uppercase;letter-spacing:1.5px;font-weight:700;
  display:flex;align-items:center;gap:6px;
}
.sidebar-section-title svg{opacity:.5}

/* Sidebar items */
.sidebar-item{
  padding:clamp(11px,2.5vw,13px) var(--px);color:var(--text-secondary);font-weight:500;
  font-size:clamp(.85rem,3vw,.92rem);cursor:pointer;transition:all .2s;
  border-left:3px solid transparent;
  display:flex;align-items:center;gap:10px;
  margin:1px 0;
}
.sidebar-item svg{opacity:.5;flex-shrink:0;transition:opacity .2s}
.sidebar-item span{flex:1}
.sidebar-item:hover,.sidebar-item:active{
  background:var(--gold-subtle);border-left-color:var(--gold-dim);color:var(--text-primary);
}
.sidebar-item:hover svg{opacity:.8}
.sidebar-item.active-room{
  background:linear-gradient(90deg,var(--gold-subtle),transparent);
  border-left-color:var(--gold);color:var(--gold);font-weight:600;
}
.sidebar-item.active-room svg{opacity:1;stroke:var(--gold)}

/* Live badge */
.sidebar-badge{
  font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  background:rgba(0,232,123,.1);color:var(--neon-green);
  padding:2px 7px;border-radius:var(--r-full);border:1px solid rgba(0,232,123,.2);
  display:flex;align-items:center;gap:3px;
}
.sidebar-badge::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--neon-green);animation:liveDot 1.5s ease-in-out infinite}

/* API section */
.sidebar-api{
  padding:clamp(12px,2.5vw,16px) var(--px);
  margin:4px 8px;border-radius:var(--r-md);
  background:rgba(255,255,255,.02);border:1px solid var(--border-subtle);
}
.sidebar-api-header{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.sidebar-api-header svg{opacity:.4}
.sidebar-api-header label{
  font-size:clamp(.58rem,1.8vw,.65rem);color:var(--text-muted);
  text-transform:uppercase;letter-spacing:1px;font-weight:700;
}
.api-input{
  width:100%;background:var(--bg-deep);border:1px solid var(--border-subtle);
  padding:9px 12px;border-radius:var(--r-sm);color:var(--text-primary);
  font-size:11px;font-family:'JetBrains Mono',monospace;outline:none;
  transition:border-color .2s;
}
.api-input:focus{border-color:var(--gold-dim);box-shadow:0 0 0 2px var(--gold-subtle)}
.api-input::placeholder{color:var(--text-muted)}
.api-status{font-size:.65rem;margin-top:6px;color:var(--text-muted);display:flex;align-items:center;gap:5px}
.api-dot{width:5px;height:5px;border-radius:50%;background:var(--text-muted);display:inline-block}
.api-status.on{color:var(--neon-green)}
.api-status.on .api-dot{background:var(--neon-green);box-shadow:0 0 4px var(--neon-green)}

/* Update App button */
.sidebar-item.update-app-btn{color:#e4b84a;margin-top:8px}
.sidebar-item.update-app-btn:hover{background:rgba(228,184,74,.06);border-left-color:#e4b84a}
.sidebar-item.update-app-btn svg{stroke:#e4b84a;opacity:.7}

/* Sidebar footer */
.sidebar-footer{margin-top:auto;border-top:1px solid var(--border-glass);padding-top:4px}
.sidebar-footer .sidebar-item.logout{
  color:var(--neon-red);margin-top:0;border-top:none;
}
.sidebar-footer .sidebar-item.logout:hover{
  background:rgba(255,56,96,.06);border-left-color:var(--neon-red);
}
.sidebar-footer .sidebar-item.logout svg{stroke:var(--neon-red);opacity:.7}
.sidebar-version{
  text-align:center;padding:8px;
  font-size:.6rem;color:var(--text-muted);letter-spacing:.5px;opacity:.5;
}

/* Overlay */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:150}
.overlay.active{display:block}

/* Scroll to bottom */
.scroll-to-bottom{
  position:fixed;bottom:calc(var(--input-bar-height)+12px);right:var(--px);
  width:36px;height:36px;background:var(--bg-elevated);border:1px solid var(--border-subtle);
  border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:101;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.scroll-to-bottom.visible{display:flex}

/* Mention Notification */
.mention-notif{
  position:fixed;top:80px;right:-340px;width:300px;
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  border:1px solid rgba(228,184,74,.3);border-radius:12px;
  padding:12px 14px;display:flex;align-items:center;gap:10px;
  cursor:pointer;z-index:9999;
  box-shadow:0 4px 20px rgba(0,0,0,.5),0 0 15px rgba(228,184,74,.1);
  transition:right .4s cubic-bezier(.25,.8,.25,1);
}
.mention-notif.visible{right:16px}
.mention-notif:hover{border-color:rgba(228,184,74,.6)}
.mention-notif-icon{
  width:36px;height:36px;min-width:36px;border-radius:50%;
  background:linear-gradient(135deg,#e4b84a,#d4af37);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px;color:#0a0a1a;
}
.mention-notif-body{flex:1;overflow:hidden}
.mention-notif-sender{font-size:13px;font-weight:600;color:#e4b84a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mention-notif-preview{font-size:11px;color:#8888aa;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mention-notif-close{
  color:#666;font-size:18px;padding:0 4px;cursor:pointer;line-height:1;
}
.mention-notif-close:hover{color:#fff}

/* Update Notice Modal */
.update-notice-overlay{
  position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.85);
  display:flex;align-items:center;justify-content:center;padding:16px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fadeIn .3s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.update-notice-modal{
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  border:1px solid rgba(228,184,74,.3);border-radius:16px;
  padding:24px;max-width:400px;width:100%;max-height:85vh;overflow-y:auto;
  box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 20px rgba(228,184,74,.1);
}
.update-notice-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.update-notice-icon{font-size:28px}
.update-notice-header h3{color:#e4b84a;font-size:1.1rem;margin:0}
.update-notice-desc{color:#aaa;font-size:.85rem;margin-bottom:16px;line-height:1.5}
.update-notice-section{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:10px;padding:12px;margin-bottom:10px;
}
.update-notice-label{font-weight:700;font-size:.85rem;color:#e4b84a;margin-bottom:8px}
.update-notice-step{color:#ccc;font-size:.8rem;line-height:1.7;padding-left:4px}
.update-notice-step strong{color:#fff}
.update-notice-footer{text-align:center;font-size:.9rem;color:#e4b84a;margin:14px 0 12px;font-weight:600}
.update-notice-btn{
  width:100%;padding:14px;border:none;border-radius:10px;
  background:linear-gradient(135deg,#e4b84a,#d4af37);color:#0a0a1a;
  font-weight:700;font-size:1rem;cursor:pointer;
  transition:all .2s;
}
.update-notice-btn:hover{box-shadow:0 0 20px rgba(228,184,74,.4);transform:scale(1.02)}
.update-notice-btn:active{transform:scale(.98)}
.update-notice-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.update-now-btn{font-size:1.1rem;padding:16px;margin-bottom:0}
.update-skip-btn{background:transparent;color:#666;font-size:.8rem;padding:10px;margin-top:8px}
.update-skip-btn:hover{color:#aaa;box-shadow:none}
.update-notice-divider{
  text-align:center;margin:16px 0 12px;position:relative;
}
.update-notice-divider::before{
  content:'';position:absolute;top:50%;left:0;right:0;height:1px;
  background:rgba(255,255,255,.08);
}
.update-notice-divider span{
  position:relative;background:#1a1a2e;padding:0 12px;
  font-size:.75rem;color:#666;
}

/* Promo Bookmark */
/* ========== LIMITED TIME OFFER BAR ========== */
.lto-bar{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;
  background:linear-gradient(90deg,#1a1200 0%,#2a1f00 30%,#3d2e00 50%,#2a1f00 70%,#1a1200 100%);
  border:1px solid rgba(245,200,66,.4);border-top:none;
  border-radius:0 0 10px 10px;
  cursor:pointer;position:fixed;left:0;right:0;
  top:calc(var(--header-height) + var(--signal-panel-height));
  z-index:98;
  animation:ltoSlideIn .6s ease-out,ltoGlow 2s ease-in-out infinite;
  transition:top .3s ease;
}
.lto-bar.hidden{display:none}
.lto-bar::before{
  content:'';position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(245,200,66,.08),transparent);
  animation:ltoShimmer 3s linear infinite;
}
@keyframes ltoSlideIn{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes ltoGlow{
  0%,100%{box-shadow:0 0 8px rgba(245,200,66,.2),0 0 0 rgba(245,200,66,0)}
  50%{box-shadow:0 0 16px rgba(245,200,66,.5),0 0 30px rgba(245,200,66,.15)}
}
@keyframes ltoShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.lto-fire{font-size:1.1rem;z-index:1;animation:ltoBounce 1s ease-in-out infinite}
@keyframes ltoBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.lto-content{flex:1;z-index:1;min-width:0}
.lto-text{
  font-size:.72rem;font-weight:700;color:#f5c842;
  text-transform:uppercase;letter-spacing:.5px;
  white-space:nowrap;overflow:hidden;
  animation:ltoScroll 25s linear infinite;
}
@keyframes ltoScroll{0%,15%{text-indent:0}100%{text-indent:-100%}}
.lto-timer{
  font-family:'JetBrains Mono',monospace;
  font-size:1.05rem;font-weight:800;
  color:#fff;text-shadow:0 0 10px rgba(245,200,66,.6);
  letter-spacing:1.5px;
}
.lto-ends-label{
  font-family:inherit;font-size:.6rem;font-weight:600;
  color:rgba(245,200,66,.55);letter-spacing:.5px;
  text-transform:uppercase;vertical-align:middle;
}
.lto-badge{
  background:linear-gradient(135deg,#f5c842,#ff8c00);
  color:#000;font-size:.55rem;font-weight:800;
  padding:3px 8px;border-radius:10px;
  text-transform:uppercase;letter-spacing:1px;
  white-space:nowrap;z-index:1;flex-shrink:0;
  animation:ltoPulse 1.5s ease-in-out infinite;
}
@keyframes ltoPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}
.lto-bar:active{transform:scale(.98)}
.lto-bar.lto-urgent{
  border-color:rgba(255,60,60,.5);
  background:linear-gradient(90deg,#1a0000 0%,#2a0a0a 30%,#3d1010 50%,#2a0a0a 70%,#1a0000 100%);
  animation:ltoSlideIn .6s ease-out,ltoUrgentGlow 1s ease-in-out infinite !important;
}
.lto-bar.lto-urgent .lto-text{color:#ff6b6b}
.lto-bar.lto-urgent .lto-timer{color:#ff4444;text-shadow:0 0 12px rgba(255,60,60,.7)}
.lto-bar.lto-urgent .lto-badge{background:linear-gradient(135deg,#ff4444,#cc0000)}
.lto-bar.lto-urgent::before{background:linear-gradient(90deg,transparent,rgba(255,60,60,.1),transparent)}
@keyframes ltoUrgentGlow{
  0%,100%{box-shadow:0 0 8px rgba(255,60,60,.3),0 0 0 rgba(255,60,60,0)}
  50%{box-shadow:0 0 20px rgba(255,60,60,.6),0 0 40px rgba(255,60,60,.2)}
}
@media(max-width:600px){
  .lto-bar{gap:5px;padding:5px 8px}
  .lto-fire{font-size:.9rem}
  .lto-text{font-size:.62rem}
  .lto-timer{font-size:.85rem}
  .lto-badge{font-size:.5rem;padding:2px 6px;letter-spacing:.5px}
}

/* Floating Scam Warning button (replaces old promo bookmark icon) */
.scam-warn-fab{
  position:fixed;top:50%;right:8px;transform:translateY(-50%);
  width:40px;height:40px;
  background:linear-gradient(135deg,#dc2626,#b91c1c);
  border:1.5px solid rgba(255,180,180,.55);
  border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:100;
  color:#fff;padding:0;
  box-shadow:0 4px 14px rgba(220,38,38,.45),0 0 0 0 rgba(220,38,38,.6);
  transition:transform .2s,box-shadow .25s ease;
  animation:scamFabPulse 2.4s ease-in-out infinite;
}
@keyframes scamFabPulse{
  0%,100%{box-shadow:0 4px 14px rgba(220,38,38,.45),0 0 0 0 rgba(220,38,38,.55)}
  50%{box-shadow:0 4px 18px rgba(220,38,38,.6),0 0 0 10px rgba(220,38,38,0)}
}
.scam-warn-fab:hover{transform:translateY(-50%) scale(1.1)}
.scam-warn-fab:active{transform:translateY(-50%) scale(.92)}
.scam-warn-fab svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}

/* Promo Poster Overlay */
.promo-poster-overlay{
  position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.85);
  display:flex;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fadeIn .3s;
}
.promo-poster-wrap{position:relative;max-width:420px;width:100%}
.promo-poster-wrap img{
  width:100%;border-radius:12px;
  border:1px solid rgba(228,184,74,.2);
  box-shadow:0 8px 40px rgba(0,0,0,.6);
}
.promo-poster-close{
  position:absolute;top:-14px;right:-14px;
  width:32px;height:32px;border-radius:50%;
  background:#1a1a2e;border:1px solid rgba(228,184,74,.3);
  color:#e4b84a;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;z-index:1;
}
.promo-poster-close:hover{background:#e4b84a;color:#0a0a1a}
.promo-poster-label{
  text-align:center;margin-top:10px;font-size:.8rem;color:#888;font-weight:600;
}
.promo-poster-counter{
  text-align:center;margin-top:6px;font-size:.7rem;color:#555;
}

/* ========== POSTER AD OVERLAY ========== */
.poster-ad-overlay{
  position:fixed;inset:0;z-index:10000;
  background:rgba(0,0,0,.88);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:fadeIn .5s ease;overflow:hidden;
}
.poster-ad-sunray{
  position:absolute;top:50%;left:50%;
  width:200vmax;height:200vmax;
  transform:translate(-50%,-50%);
  background:conic-gradient(
    from 0deg,
    transparent 0deg,rgba(245,200,66,.06) 10deg,transparent 20deg,
    transparent 30deg,rgba(245,200,66,.06) 40deg,transparent 50deg,
    transparent 60deg,rgba(245,200,66,.06) 70deg,transparent 80deg,
    transparent 90deg,rgba(245,200,66,.06) 100deg,transparent 110deg,
    transparent 120deg,rgba(245,200,66,.06) 130deg,transparent 140deg,
    transparent 150deg,rgba(245,200,66,.06) 160deg,transparent 170deg,
    transparent 180deg,rgba(245,200,66,.06) 190deg,transparent 200deg,
    transparent 210deg,rgba(245,200,66,.06) 220deg,transparent 230deg,
    transparent 240deg,rgba(245,200,66,.06) 250deg,transparent 260deg,
    transparent 270deg,rgba(245,200,66,.06) 280deg,transparent 290deg,
    transparent 300deg,rgba(245,200,66,.06) 310deg,transparent 320deg,
    transparent 330deg,rgba(245,200,66,.06) 340deg,transparent 360deg
  );
  animation:posterSunSpin 12s linear infinite;
  pointer-events:none;
}
@keyframes posterSunSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.poster-ad-content{
  position:relative;z-index:1;max-width:400px;width:90%;
  animation:posterPopIn .6s cubic-bezier(.22,1,.36,1);
}
@keyframes posterPopIn{
  0%{transform:scale(.3) rotate(-10deg);opacity:0}
  60%{transform:scale(1.05) rotate(2deg);opacity:1}
  100%{transform:scale(1) rotate(0deg);opacity:1}
}
.poster-ad-badge{
  text-align:center;font-size:.6rem;font-weight:800;letter-spacing:2px;
  color:#f5c842;margin-bottom:10px;
  text-shadow:0 0 20px rgba(245,200,66,.5);
  animation:posterBadgePulse 2s ease-in-out infinite;
}
@keyframes posterBadgePulse{0%,100%{opacity:.7}50%{opacity:1}}
.poster-ad-img{
  width:100%;border-radius:14px;
  border:2px solid rgba(245,200,66,.35);
  box-shadow:0 0 40px rgba(245,200,66,.15),0 12px 50px rgba(0,0,0,.6);
  cursor:pointer;transition:transform .2s;
}
.poster-ad-img:hover{transform:scale(1.02)}
.poster-ad-label{
  text-align:center;margin-top:12px;font-size:.9rem;color:#e4b84a;
  font-weight:700;text-shadow:0 0 12px rgba(245,200,66,.4);
}
.poster-ad-close{
  position:absolute;top:-16px;right:-16px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(20,20,40,.9);border:1px solid rgba(245,200,66,.3);
  color:#e4b84a;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;z-index:2;
}
.poster-ad-close:hover{background:#e4b84a;color:#0a0a1a;transform:scale(1.1)}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}

/* Clear Chat Button */
.clear-chat-btn{
  position:fixed;bottom:calc(var(--input-bar-height)+56px);right:var(--px);
  width:36px;height:36px;background:var(--bg-elevated);border:1px solid var(--border-subtle);
  border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:100;
  color:#666;box-shadow:0 2px 8px rgba(0,0,0,.4);transition:all .2s;padding:0;
}
.clear-chat-btn:hover{color:#e4b84a;border-color:#e4b84a55;background:rgba(228,184,74,.1)}
.clear-chat-btn:active{transform:scale(.9)}

/* ========== CONFETTI ========== */
.celeb{position:fixed;inset:0;pointer-events:none;z-index:300}
.conf{position:absolute;border-radius:1px;animation:cFall 2.5s ease-in forwards}
@keyframes cFall{0%{transform:translateY(-10px) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

/* ========== AI TYPING ========== */
.ai-typing{display:flex;gap:7px;max-width:min(88%,680px);animation:msgIn .3s ease;flex-shrink:0}
.typing-dots{display:flex;gap:3px;padding:9px 13px;background:var(--bg-elevated);border-radius:var(--r-lg);border:1px solid var(--border-subtle);align-items:center}
.typing-dots span{width:4px;height:4px;background:var(--text-muted);border-radius:50%;animation:tBounce 1.2s ease-in-out infinite}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes tBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* ========== HYPE OVERLAY ========== */
.hype-overlay{position:fixed;inset:0;z-index:250;pointer-events:none;display:flex;align-items:center;justify-content:center}
.hype-banner{
  padding:clamp(10px,3vw,16px) clamp(20px,6vw,36px);border-radius:var(--r-lg);
  font-family:'JetBrains Mono',monospace;font-weight:900;font-size:clamp(1rem,4.5vw,1.5rem);
  text-transform:uppercase;letter-spacing:2px;text-align:center;
  animation:hypeDrop .6s cubic-bezier(.22,1,.36,1) forwards,hypeOut .4s ease-in 2s forwards;line-height:1.4;
}
.hype-banner.gold{background:rgba(20,16,5,.92);border:2px solid var(--gold);color:var(--gold);box-shadow:0 0 40px rgba(228,184,74,.25),inset 0 0 40px rgba(228,184,74,.08);text-shadow:0 0 20px rgba(228,184,74,.5)}
.hype-banner.red{background:rgba(20,5,8,.92);border:2px solid var(--neon-red);color:var(--neon-red);box-shadow:0 0 40px rgba(255,56,96,.25),inset 0 0 40px rgba(255,56,96,.08);text-shadow:0 0 20px rgba(255,56,96,.5)}
.hype-banner.green{background:rgba(5,20,10,.92);border:2px solid var(--neon-green);color:var(--neon-green);box-shadow:0 0 40px rgba(0,232,123,.25),inset 0 0 40px rgba(0,232,123,.08);text-shadow:0 0 20px rgba(0,232,123,.5)}
.hype-banner.blue{background:rgba(5,12,20,.92);border:2px solid var(--neon-blue);color:var(--neon-blue);box-shadow:0 0 40px rgba(56,189,248,.25),inset 0 0 40px rgba(56,189,248,.08);text-shadow:0 0 20px rgba(56,189,248,.5)}
.hype-banner.purple{background:rgba(12,5,20,.92);border:2px solid var(--neon-purple);color:var(--neon-purple);box-shadow:0 0 40px rgba(167,139,250,.25),inset 0 0 40px rgba(167,139,250,.08);text-shadow:0 0 20px rgba(167,139,250,.5)}
.hype-banner .sub{display:block;font-size:clamp(.55rem,2vw,.7rem);font-weight:600;opacity:.7;letter-spacing:1px;margin-top:2px}
@keyframes hypeDrop{0%{transform:scale(.3) translateY(-30px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes hypeOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8) translateY(10px)}}

/* ========== COUNTDOWN NUMBERS ========== */
.countdown-num{
  position:fixed;inset:0;z-index:260;pointer-events:none;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-weight:900;font-size:clamp(3rem,15vw,5rem);
  color:var(--neon-blue);text-shadow:0 0 40px rgba(56,189,248,.6),0 0 80px rgba(56,189,248,.3);
  animation:countPop .7s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes countPop{0%{transform:scale(2);opacity:0}30%{transform:scale(1);opacity:1}100%{transform:scale(.6);opacity:0}}

/* ========== SCREEN FLASH ========== */
.screen-flash{position:fixed;inset:0;z-index:280;pointer-events:none;animation:flash .4s ease-out forwards}
@keyframes flash{0%{background:rgba(228,184,74,.15)}100%{background:transparent}}
.screen-flash.win{animation-name:flashG}
.screen-flash.lose{animation-name:flashR}
@keyframes flashG{0%{background:rgba(0,232,123,.12)}100%{background:transparent}}
@keyframes flashR{0%{background:rgba(255,56,96,.12)}100%{background:transparent}}

/* ========== EDGE GLOW ========== */
.edge-glow{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;transition:opacity .5s}
.edge-glow.active{opacity:1}
.edge-glow::before{content:'';position:absolute;inset:0;box-shadow:inset 0 0 60px rgba(56,189,248,.15),inset 0 0 120px rgba(56,189,248,.05)}

/* ========== RESULT GLOW ========== */
.result-glow{position:fixed;inset:0;z-index:91;pointer-events:none;opacity:0;animation:rGT 3s ease-in-out forwards}
.result-glow::before{content:'';position:absolute;inset:0}
.result-glow.win{opacity:1}.result-glow.win::before{box-shadow:inset 0 0 80px rgba(0,232,123,.18),inset 0 0 160px rgba(0,232,123,.06)}
.result-glow.lose{opacity:1}.result-glow.lose::before{box-shadow:inset 0 0 80px rgba(255,56,96,.18),inset 0 0 160px rgba(255,56,96,.06)}
@keyframes rGT{0%{opacity:0}10%{opacity:1}30%{opacity:.4}50%{opacity:1}70%{opacity:.4}85%{opacity:.8}100%{opacity:0}}

/* ========== BET POPUP ========== */
.bet-popup-overlay{position:fixed;inset:0;z-index:270;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);animation:bBgIn .3s ease forwards}
.bet-popup{
  background:var(--modal-bg);
  border:2px solid var(--gold);border-radius:20px;
  padding:clamp(18px,4.5vw,28px) clamp(24px,6vw,40px);text-align:center;
  box-shadow:0 0 60px rgba(228,184,74,.2);animation:bIn .5s cubic-bezier(.22,1,.36,1) forwards;
  position:relative;overflow:hidden;max-width:88vw;
}
.bet-popup::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(228,184,74,.4),transparent)}
.bet-popup-round{font-size:clamp(.6rem,2vw,.7rem);color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;font-weight:700;margin-bottom:6px}
.bet-popup-label{font-size:clamp(.75rem,2.5vw,.85rem);color:var(--text-secondary);font-weight:600;margin-bottom:4px}
.bet-popup-signal{font-family:'JetBrains Mono',monospace;font-size:clamp(1.6rem,7vw,2.4rem);font-weight:900;letter-spacing:2px;margin:4px 0 8px;word-break:break-all;animation:bGlow 1.5s ease-in-out infinite alternate}
.bet-popup-amount{font-size:clamp(.65rem,2vw,.75rem);color:var(--gold);font-weight:700;background:rgba(228,184,74,.08);border:1px solid rgba(228,184,74,.15);display:inline-block;padding:3px 14px;border-radius:var(--r-full);margin-top:4px}
.bet-popup-mg{font-size:clamp(.5rem,1.6vw,.6rem);color:var(--text-muted);margin-top:6px}
.bet-popup-timer{font-size:clamp(.55rem,1.8vw,.65rem);color:var(--text-muted);margin-top:6px}
@keyframes bIn{0%{transform:scale(.5) translateY(20px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes bBgIn{0%{background:rgba(0,0,0,0)}100%{background:rgba(0,0,0,.5)}}
@keyframes bOut{0%{transform:scale(1);opacity:1}100%{transform:scale(.8) translateY(-10px);opacity:0}}
@keyframes bBgOut{0%{background:rgba(0,0,0,.5)}100%{background:rgba(0,0,0,0)}}
@keyframes bGlow{0%{filter:brightness(1)}100%{filter:brightness(1.3)}}

/* ========== GAME GUIDE POPUP ========== */
.guide-overlay{position:fixed;inset:0;z-index:290;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:bBgIn .4s ease forwards}
.guide-popup{
  background:var(--modal-bg);
  border:2px solid var(--gold);border-radius:20px;
  padding:clamp(16px,4vw,24px);text-align:center;
  box-shadow:0 0 80px rgba(228,184,74,.2),0 0 160px rgba(228,184,74,.06);
  animation:bIn .5s cubic-bezier(.22,1,.36,1) forwards;position:relative;
  max-width:92vw;width:clamp(300px,85vw,400px);
}
.guide-popup::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(228,184,74,.4),transparent)}
.guide-title{font-size:clamp(.7rem,2.3vw,.82rem);font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px}
.guide-game{font-size:clamp(.9rem,3.2vw,1.1rem);font-weight:900;color:var(--text-primary);margin-bottom:8px}
.guide-sub{font-size:clamp(.55rem,1.8vw,.65rem);color:var(--text-secondary);margin-bottom:10px;line-height:1.5}
.guide-img{width:100%;max-height:45vh;object-fit:contain;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.08);margin-bottom:10px}
.guide-timer-bar{height:4px;background:var(--bg-surface);border-radius:4px;overflow:hidden;margin-bottom:8px}
.guide-timer-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--neon-green));border-radius:4px;transition:width 1s linear}
.guide-timer-text{font-family:'JetBrains Mono',monospace;font-size:clamp(.65rem,2.2vw,.78rem);font-weight:700;color:var(--neon-blue)}
.guide-dismiss{font-size:clamp(.5rem,1.6vw,.58rem);color:var(--text-muted);margin-top:6px;cursor:pointer}
.guide-dismiss:active{color:var(--gold)}

/* ========== MODALS ========== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .15s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:24px;
  width:90%;max-width:400px;max-height:85vh;overflow-y:auto;padding:28px;animation:modalIn .2s ease;
}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.modal-header h3{font-size:1.15rem;font-weight:700}
.modal-close{width:32px;height:32px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;transition:background .15s;color:var(--text-secondary)}
.modal-close:hover{background:var(--bg-surface)}

/* Profile modal */
.profile-avatar-section{text-align:center;margin-bottom:24px}
#profile-avatar-large{
  width:80px;height:80px;border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--gold),var(--gold-dim));
  display:inline-flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;
  color:#050507;overflow:hidden;cursor:pointer;transition:opacity .2s;border:2px solid var(--border-gold);
}
#profile-avatar-large:hover{opacity:.8}
#profile-avatar-large img{width:100%;height:100%;object-fit:cover}
#avatar-input{display:none}
.profile-avatar-section p{font-size:.78rem;color:var(--text-muted);margin-top:8px}

/* ========== TOAST ========== */
#toast-container{position:fixed;top:16px;right:16px;z-index:3000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
  padding:12px 20px;border-radius:var(--r-sm);font-size:.88rem;font-weight:500;color:#fff;
  transform:translateX(120%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  max-width:320px;backdrop-filter:blur(8px);pointer-events:auto;
}
.toast.show{transform:translateX(0)}
.toast-success{background:rgba(0,232,123,.9);color:var(--text-on-accent)}
.toast-error{background:rgba(255,56,96,.9)}
.toast-info{background:rgba(228,184,74,.9);color:var(--text-on-accent)}

/* ========== REPLY SYSTEM ========== */

/* Reply preview bar above input */
.reply-preview{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;background:rgba(255,255,255,.05);
  border-top:1px solid rgba(255,255,255,.06);
}
.reply-preview.hidden{display:none}
.reply-preview-bar{width:3px;height:32px;border-radius:2px;background:var(--gold);flex-shrink:0}
.reply-preview-body{flex:1;min-width:0;overflow:hidden}
.reply-preview-name{display:block;font-size:.7rem;font-weight:800;color:var(--gold);letter-spacing:.3px}
.reply-preview-text{display:block;font-size:.72rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-preview-close{
  width:28px;height:28px;border-radius:50%;border:none;background:var(--hover-overlay-strong);
  color:var(--text-muted);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.reply-preview-close:hover{background:var(--hover-overlay-strong)}

/* Message action popup (reply button on tap) */
.msg-actions{
  position:absolute;top:-34px;right:8px;z-index:50;
  display:flex;gap:4px;
  animation:msgActFade .15s ease;
}
.msg-container:not(.msg-user) .msg-actions{right:auto;left:8px}
.msg-action-btn{
  padding:4px 10px;border-radius:12px;border:none;
  background:rgba(30,30,40,.95);color:var(--text-light);
  font-size:.68rem;cursor:pointer;display:flex;align-items:center;gap:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.4);backdrop-filter:blur(6px);
}
.msg-action-btn:hover{background:rgba(50,50,60,.95)}
/* Light theme overrides for action buttons (Arctic Frost + Cherry Blossom) */
body:not([class*="theme-"]) .msg-action-btn,
body.theme-cherry-blossom .msg-action-btn{
  background:rgba(255,255,255,.95);color:#1e293b;
  box-shadow:0 2px 8px rgba(0,0,0,.12);border:1px solid rgba(0,0,0,.08);
}
body:not([class*="theme-"]) .msg-action-btn:hover,
body.theme-cherry-blossom .msg-action-btn:hover{background:rgba(240,244,248,.98)}
body:not([class*="theme-"]) .msg-recall-btn,
body.theme-cherry-blossom .msg-recall-btn{color:var(--neon-red)}
body:not([class*="theme-"]) .msg-seen-btn,
body.theme-cherry-blossom .msg-seen-btn{color:var(--neon-blue)}
.msg-action-btn svg{width:12px;height:12px;fill:currentColor}
@keyframes msgActFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.msg-seen-btn{color:var(--neon-blue)}
.msg-seen-btn svg{stroke:var(--neon-blue)}
.msg-recall-btn{color:var(--neon-red)}
.msg-recall-btn svg{fill:none;stroke:var(--neon-red)}
.mentor-power{color:#ff8844!important}
.mentor-power svg{stroke:#ff8844!important}

/* Pending file preview bar */
.pending-preview{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  background:var(--bg-surface);
  border-top:1px solid var(--border-subtle);
}
.pending-preview-thumb{
  width:48px;height:48px;border-radius:8px;overflow:hidden;flex-shrink:0;
  background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;
}
.pending-preview-thumb img,.pending-preview-thumb video{
  width:100%;height:100%;object-fit:cover;
}
.pending-preview-info{flex:1;min-width:0;overflow:hidden}
.pending-preview-name{
  display:block;font-size:.72rem;font-weight:600;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pending-preview-hint{display:block;font-size:.65rem;color:var(--text-muted);margin-top:1px}
.pending-preview-close{
  width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--text-secondary);cursor:pointer;flex-shrink:0;
  border:none;
}
.pending-preview-close:hover{background:rgba(255,255,255,.15)}

/* Message footer (time + seen) */
.msg-footer{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;
  margin-top:2px;
}
.msg-time{
  font-size:clamp(.48rem,1.3vw,.54rem);color:var(--text-muted);
}
.msg-time[title]:hover,.dm-msg-time[title]:hover{cursor:help;}
.msg-seen-status{
  font-size:clamp(.44rem,1.1vw,.5rem);color:var(--text-muted);
  display:none;
}
.msg-seen-status.seen{
  display:inline;
  color:var(--neon-blue);
  cursor:pointer;
}
.msg-seen-status.seen:hover{text-decoration:underline}

/* Seen popup */
/* ── Edit Inline + Edited Tag ── */
.edited-tag{font-size:.65rem;color:var(--text-muted);opacity:.7;font-style:italic;margin-left:4px}
.translate-tag{font-size:.65rem;color:var(--neon-cyan,#00d4ff);opacity:.8;margin-top:4px;font-style:italic}
.translate-page-btn{background:none;border:none;color:var(--text-secondary,#aaa);padding:10px;cursor:pointer;display:flex;align-items:center;border-radius:6px;transition:color .2s;position:relative;z-index:10;-webkit-tap-highlight-color:rgba(0,212,255,.2);min-width:38px;min-height:38px;justify-content:center}
.translate-page-btn svg,.translate-page-btn *{pointer-events:none}
.translate-page-btn:hover,.translate-page-btn:active{color:var(--neon-cyan,#00d4ff)}
.translate-picker-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s}
.translate-picker{background:var(--bg-card,#1a1a2e);border-radius:16px 16px 0 0;padding:16px;width:100%;max-width:480px;max-height:60vh;overflow-y:auto;display:flex;flex-wrap:wrap;gap:8px}
.translate-picker-title{width:100%;font-size:.85rem;font-weight:600;color:var(--text-primary,#fff);margin-bottom:4px}
.translate-lang-btn{background:var(--bg-secondary,#252540);border:1px solid var(--border,#333);color:var(--text-primary,#fff);padding:8px 14px;border-radius:8px;font-size:.8rem;cursor:pointer;transition:all .2s}
.translate-lang-btn:active{transform:scale(.95)}
.translate-lang-active{background:var(--neon-cyan,#00d4ff);color:#000;border-color:var(--neon-cyan,#00d4ff);font-weight:600}
.translate-lang-off{background:var(--neon-red,#ff4757);color:#fff;border-color:var(--neon-red,#ff4757);width:100%}
.translate-search{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border,#333);background:var(--bg-secondary,#252540);color:var(--text-primary,#fff);font-size:.85rem;outline:none;margin-bottom:4px}
.translate-search:focus{border-color:var(--neon-cyan,#00d4ff)}
.translate-lang-list{display:flex;flex-wrap:wrap;gap:8px;max-height:45vh;overflow-y:auto;padding:4px 0}.edit-inline{display:flex;flex-direction:column;gap:6px;width:100%}
.edit-inline-input{width:100%;min-height:40px;max-height:120px;padding:8px 10px;border-radius:var(--r-sm);border:1px solid var(--gold);background:var(--bg-input);color:var(--text);font-size:.85rem;font-family:inherit;resize:vertical}
.edit-inline-input:focus{outline:none;border-color:var(--neon-green);box-shadow:0 0 6px rgba(0,255,128,.2)}
.edit-inline-btns{display:flex;gap:6px;justify-content:flex-end}
.edit-save-btn,.edit-cancel-btn{padding:4px 14px;border-radius:var(--r-sm);border:none;font-size:.75rem;font-weight:600;cursor:pointer}
.edit-save-btn{background:var(--neon-green);color:#000}
.edit-cancel-btn{background:var(--border);color:var(--text)}

.seen-popup{
  position:fixed;bottom:80px;right:16px;left:16px;max-width:300px;margin-left:auto;
  background:var(--bg-surface);border:1px solid var(--border-glass);
  border-radius:var(--r-md);box-shadow:0 8px 32px rgba(0,0,0,.5);
  z-index:9999;overflow:hidden;
  animation:seenPopIn .2s ease;
}
@keyframes seenPopIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.seen-popup-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--border-subtle);
  font-size:.78rem;font-weight:700;color:var(--text-primary);
}
.seen-popup-close{
  width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--text-secondary);cursor:pointer;border:none;
}
.seen-popup-list{
  max-height:240px;overflow-y:auto;padding:6px 0;
}
.seen-popup-item{
  display:flex;align-items:center;gap:10px;padding:8px 14px;
}
.seen-avatar{
  width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;
}
.seen-avatar-initial{
  background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;color:var(--text-secondary);
}
.seen-info{display:flex;flex-direction:column;min-width:0}
.seen-name{font-size:.75rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seen-time{font-size:.6rem;color:var(--text-muted)}
.seen-popup-empty,.seen-popup-loading{
  padding:16px;text-align:center;font-size:.75rem;color:var(--text-muted);
}

/* Reply quote inside message bubble */
.reply-quote{
  padding:7px 10px;margin-bottom:5px;border-radius:8px;
  background:var(--gold-subtle);border-left:3px solid var(--gold);
  cursor:pointer;transition:background .2s;
}
.reply-quote:active{background:var(--gold-subtle)}
.reply-quote-name{font-size:.68rem;font-weight:800;color:var(--gold);display:block;margin-bottom:2px;letter-spacing:.3px}
.reply-quote-text{font-size:.68rem;color:var(--text-secondary);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.msg-user .reply-quote{background:var(--gold-subtle);border-left-color:var(--gold)}
.msg-user .reply-quote-name{color:var(--gold)}

/* ========== AVATAR CROP MODAL (Telegram-style) ========== */
.crop-overlay{position:fixed;inset:0;z-index:2000;background:#000;display:flex;flex-direction:column}
.crop-overlay.hidden{display:none!important}

.crop-top-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;background:rgba(0,0,0,.9);flex-shrink:0;z-index:10;
}
.crop-top-title{font-size:.88rem;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:.3px}
.crop-btn-cancel,.crop-btn-save{
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s;background:none;border:none;
}
.crop-btn-cancel{color:rgba(255,255,255,.6)}
.crop-btn-cancel:hover{background:rgba(255,255,255,.08)}
.crop-btn-save{color:var(--gold)}
.crop-btn-save:hover{background:rgba(228,184,74,.12)}
.crop-btn-save:active{transform:scale(.9)}

.crop-body{
  flex:1;position:relative;overflow:hidden;touch-action:none;
  cursor:grab;user-select:none;display:flex;align-items:center;justify-content:center;
}
.crop-body:active{cursor:grabbing}

.crop-img-wrap{position:absolute;top:0;left:0;z-index:1}
.crop-img-wrap img{display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}

/* Dark overlay with circular cutout — JS sets radial-gradient with px values */
.crop-dark-overlay{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  --crop-circle:250px;
}
/* Circle border ring — uses --crop-circle variable set by JS */
.crop-dark-overlay::after{
  content:'';position:absolute;top:50%;left:50%;
  width:var(--crop-circle);height:var(--crop-circle);
  transform:translate(-50%,-50%);border-radius:50%;
  border:2px solid rgba(255,255,255,.5);
  box-sizing:border-box;
}

.crop-bottom-bar{
  display:flex;align-items:center;gap:14px;
  padding:16px 28px 24px;padding-bottom:calc(20px + env(safe-area-inset-bottom));
  background:rgba(0,0,0,.9);flex-shrink:0;justify-content:center;z-index:10;
}
.crop-slider{
  flex:1;max-width:240px;height:3px;
  -webkit-appearance:none;appearance:none;
  background:rgba(255,255,255,.15);border-radius:3px;outline:none;
}
.crop-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--gold);cursor:pointer;box-shadow:0 0 8px rgba(228,184,74,.3);border:2px solid rgba(255,255,255,.12);
}
.crop-slider::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:var(--gold);cursor:pointer;border:none;
}

/* ========== RESPONSIVE ========== */

/* Very small phones (iPhone SE, Galaxy A series) */
@media(max-width:360px){
  :root{--signal-panel-height:106px;--header-height:40px;--input-bar-height:62px;--px:10px}
  .signal-data{gap:2px}
  .glass-card{padding:2px 1px}
  .card-label{font-size:.44rem}
  .card-value{font-size:.72rem}
  .prize-pool-strip{padding:1px var(--px);gap:4px}
  .prize-pool-strip-label{font-size:.44rem;letter-spacing:1px}
  .prize-pool-strip-value{font-size:.62rem}
  .prize-pool-strip.pp-t1 .prize-pool-strip-value{font-size:.64rem}
  .prize-pool-strip.pp-t2 .prize-pool-strip-value{font-size:.66rem}
  .prize-pool-strip.pp-t3 .prize-pool-strip-value{font-size:.7rem}
  .prize-pool-strip.pp-t4 .prize-pool-strip-value{font-size:.74rem}
  .prize-pool-strip.pp-t5 .prize-pool-strip-value{font-size:.78rem}
  .signal-top-row{gap:3px}
  .signal-title{font-size:.7rem;letter-spacing:1px}
  .signal-badge{padding:1px 5px;font-size:.5rem}
  .timer-ring{width:34px;height:34px}
  .timer-num{font-size:.65rem}
  #chat-input{padding:10px 14px;font-size:13px}
  .send-btn{width:38px;height:38px;min-width:38px}
  .img-btn{width:34px;height:34px;min-width:34px}
  .gif-btn{width:34px;height:34px;min-width:34px}
  .gif-btn-label{font-size:10px}
  .emoji-btn{width:34px;height:34px;min-width:34px}
  .emoji-btn-label{font-size:15px}
  .bubble{padding:6px 10px;font-size:.8rem}
  .avatar{width:26px;height:26px}
  .header-left .logo-img{height:18px}
}

/* Small phones */
@media(min-width:361px) and (max-width:420px){
  :root{--signal-panel-height:112px;--input-bar-height:66px}
  .signal-data{gap:3px}
  .glass-card{padding:3px 2px}
  .card-label{font-size:.48rem}
  .card-value{font-size:.78rem}
  .prize-pool-strip{padding:2px var(--px);gap:5px}
  .prize-pool-strip-label{font-size:.48rem}
  .prize-pool-strip-value{font-size:.68rem}
  .prize-pool-strip.pp-t1 .prize-pool-strip-value{font-size:.7rem}
  .prize-pool-strip.pp-t2 .prize-pool-strip-value{font-size:.72rem}
  .prize-pool-strip.pp-t3 .prize-pool-strip-value{font-size:.76rem}
  .prize-pool-strip.pp-t4 .prize-pool-strip-value{font-size:.8rem}
  .prize-pool-strip.pp-t5 .prize-pool-strip-value{font-size:.84rem}
}

/* Standard phones (iPhone 12/13/14, Pixel, Galaxy S) */
@media(min-width:421px) and (max-width:480px){
  :root{--signal-panel-height:122px;--input-bar-height:70px}
}

/* Large phones / phablets (iPhone Plus/Max, Galaxy Ultra) */
@media(min-width:481px) and (max-width:640px){
  :root{--signal-panel-height:128px;--input-bar-height:72px}
  .msg-container{max-width:min(85%,560px)}
}

/* Small tablets */
@media(min-width:641px) and (max-width:768px){
  :root{--signal-panel-height:132px;--input-bar-height:72px;--px:20px}
  .msg-container{max-width:min(82%,600px)}
  .auth-container{max-width:420px}
  .bubble{font-size:.92rem}
}

/* Tablets (iPad, etc) */
@media(min-width:769px) and (max-width:1024px){
  :root{--signal-panel-height:138px;--input-bar-height:74px;--px:24px;--sidebar-width:320px}
  .msg-container{max-width:min(75%,650px)}
  .auth-container{max-width:440px}
  #chat-input{font-size:15px;padding:13px 20px}
  .bubble{font-size:.93rem;padding:10px 16px}
  .avatar{width:36px;height:36px}
}

/* Desktop / laptop */
/* ── Split View Toggle Switch ── */
.sidebar-split-toggle{display:none;padding:8px var(--px);align-items:center;justify-content:space-between}
@media(min-width:768px){.sidebar-split-toggle{display:flex}}
.split-toggle-label{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:.82rem}
.toggle-switch{position:relative;width:40px;height:22px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:22px;cursor:pointer;transition:background .2s}
.toggle-slider::before{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.toggle-switch input:checked+.toggle-slider{background:var(--neon-green)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(18px)}

@media(min-width:1025px){
  :root{--signal-panel-height:140px;--input-bar-height:76px;--px:28px;--sidebar-width:340px;--header-height:52px}
  .msg-container{max-width:min(65%,720px)}
  .auth-container{max-width:460px}
  #chat-input{font-size:15px;padding:14px 22px}
  .bubble{font-size:.95rem;padding:10px 18px}
  .avatar{width:38px;height:38px}
  .signal-data{gap:8px}
  .glass-card{padding:8px 10px;border-radius:var(--r-md)}
  .card-label{font-size:.58rem}
  .card-value{font-size:1rem}
  .send-btn{width:48px;height:48px;min-width:48px}
  .send-btn svg{width:20px;height:20px}

  /* Center the app on wide screens (default mode) */
  .main-container{max-width:900px;margin:0 auto;border-left:1px solid var(--border-subtle);border-right:1px solid var(--border-subtle)}
  .signal-panel{max-width:900px;margin:0 auto;left:50%;transform:translateX(-50%)}
  .signal-panel.hidden{transform:translateX(-50%) translateY(calc(var(--signal-panel-height)*-1))}
  .input-bar{max-width:900px;left:50%;transform:translateX(-50%)}
  .gif-arsenal-panel:not(.gif-arsenal-dm){max-width:900px;left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 2 * var(--px))}
  .emoji-picker-panel:not(.emoji-picker-dm){max-width:900px;left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 2 * var(--px))}
  header#app-header{max-width:900px;left:50%;transform:translateX(-50%)}
  .break-bar{max-width:900px;left:50%;transform:translateX(-50%)}
  .break-bar.hidden{transform:translateX(-50%) translateY(-100%)}
  .lto-bar{max-width:900px;left:50%;transform:translateX(-50%)}
  .lto-bar.hidden{display:none}

}

/* ── SPLIT VIEW MODE (768px+ screens) ── */
@media(min-width:768px){
  body.split-view .sidebar{transform:translateX(0);box-shadow:none}
  body.split-view .overlay{display:none!important}
  body.split-view .sidebar .sidebar-close-btn{display:none}
  body.split-view .menu-icon{display:none}

  body.split-view .main-container{max-width:none;margin:0;margin-left:var(--sidebar-width);border-left:none;border-right:none}
  body.split-view header#app-header{max-width:none;left:var(--sidebar-width);right:0;transform:none;width:auto}
  body.split-view .signal-panel{max-width:none;left:var(--sidebar-width);right:0;transform:none;width:auto}
  body.split-view .signal-panel.hidden{transform:translateY(calc(var(--signal-panel-height)*-1))}
  body.split-view .input-bar{max-width:none;left:var(--sidebar-width);right:0;transform:none;width:auto}
  body.split-view .break-bar{max-width:none;left:var(--sidebar-width);right:0;transform:none;width:auto}
  body.split-view .break-bar.hidden{transform:translateY(-100%)}
  body.split-view .gif-arsenal-panel:not(.gif-arsenal-dm){max-width:none;left:var(--sidebar-width);right:0;transform:none;width:auto}
  body.split-view .emoji-picker-panel:not(.emoji-picker-dm){max-width:none;left:var(--sidebar-width);right:0;transform:none;width:auto}
  body.split-view .dm-overlay{left:var(--sidebar-width);width:auto}
  body.split-view .lto-bar{max-width:none;left:var(--sidebar-width);right:0;transform:none;width:auto}
}

/* ── CUSTOM CHAT BACKGROUNDS ── */
.main-container.has-custom-bg{
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-origin:content-box;
}
.main-container.has-custom-bg #chat-window{background:transparent}
.dm-modal.has-custom-bg .dm-chat-window{background:transparent}
.dm-modal.has-custom-bg{
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.main-container.has-custom-bg .bubble,
.dm-modal.has-custom-bg .dm-msg{
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.main-container.has-custom-bg .bubble,
.main-container.has-custom-bg .msg-user .bubble,
.main-container.has-custom-bg .bub-ml,
.main-container.has-custom-bg .bub-wd,
.main-container.has-custom-bg .bub-real{background:rgba(0,0,0,.65);border-color:rgba(255,255,255,.12);color:#f0f0f5}
.main-container.has-custom-bg .user-label{color:#fff}
.main-container.has-custom-bg .lb-ml{color:var(--gold)}
.main-container.has-custom-bg .msg-time{color:rgba(255,255,255,.5)}
.main-container.has-custom-bg .reply-quote{background:rgba(0,0,0,.35);border-left-color:var(--gold)}
.main-container.has-custom-bg .reply-quote-text{color:rgba(255,255,255,.6)}
.dm-modal.has-custom-bg .dm-msg-mine,
.dm-modal.has-custom-bg .dm-msg-other{background:rgba(0,0,0,.65);border-color:rgba(255,255,255,.12);color:#f0f0f5}
.dm-modal.has-custom-bg .dm-msg-time{color:rgba(255,255,255,.5)}
.dm-modal.has-custom-bg .dm-msg-system{background:rgba(0,0,0,.5);color:rgba(255,255,255,.7)}
/* Light theme custom bg - use white glass bubbles (default + cherry blossom) */
body:not([class*="theme-"]) .main-container.has-custom-bg .bubble,
body:not([class*="theme-"]) .main-container.has-custom-bg .msg-user .bubble,
body:not([class*="theme-"]) .main-container.has-custom-bg .bub-ml,
body:not([class*="theme-"]) .main-container.has-custom-bg .bub-wd,
body:not([class*="theme-"]) .main-container.has-custom-bg .bub-real,
body.theme-cherry-blossom .main-container.has-custom-bg .bubble,
body.theme-cherry-blossom .main-container.has-custom-bg .msg-user .bubble,
body.theme-cherry-blossom .main-container.has-custom-bg .bub-ml,
body.theme-cherry-blossom .main-container.has-custom-bg .bub-wd,
body.theme-cherry-blossom .main-container.has-custom-bg .bub-real{background:rgba(255,255,255,.8);border-color:rgba(0,0,0,.08);color:#0f172a}
body:not([class*="theme-"]) .main-container.has-custom-bg .user-label,
body.theme-cherry-blossom .main-container.has-custom-bg .user-label{color:#0f172a}
body:not([class*="theme-"]) .main-container.has-custom-bg .msg-time,
body.theme-cherry-blossom .main-container.has-custom-bg .msg-time{color:rgba(0,0,0,.45)}
body:not([class*="theme-"]) .main-container.has-custom-bg .reply-quote,
body.theme-cherry-blossom .main-container.has-custom-bg .reply-quote{background:rgba(255,255,255,.45)}
body:not([class*="theme-"]) .main-container.has-custom-bg .reply-quote-text,
body.theme-cherry-blossom .main-container.has-custom-bg .reply-quote-text{color:rgba(0,0,0,.55)}
body:not([class*="theme-"]) .dm-modal.has-custom-bg .dm-msg-mine,
body:not([class*="theme-"]) .dm-modal.has-custom-bg .dm-msg-other,
body.theme-cherry-blossom .dm-modal.has-custom-bg .dm-msg-mine,
body.theme-cherry-blossom .dm-modal.has-custom-bg .dm-msg-other{background:rgba(255,255,255,.8);border-color:rgba(0,0,0,.08);color:#0f172a}
body:not([class*="theme-"]) .dm-modal.has-custom-bg .dm-msg-time,
body.theme-cherry-blossom .dm-modal.has-custom-bg .dm-msg-time{color:rgba(0,0,0,.45)}
body:not([class*="theme-"]) .dm-modal.has-custom-bg .dm-msg-system,
body.theme-cherry-blossom .dm-modal.has-custom-bg .dm-msg-system{background:rgba(255,255,255,.6);color:rgba(0,0,0,.55)}
.bg-remove-btn{color:var(--neon-red)!important}
.bg-remove-btn svg{stroke:var(--neon-red);opacity:.7}

/* ── THEME PICKER ── */
.sidebar-theme-picker{padding:0 0 4px}
.theme-toggle-btn{justify-content:flex-start;position:relative}
.theme-toggle-btn .theme-chevron{margin-left:auto;transition:transform .2s;opacity:.5}
.theme-toggle-btn .theme-chevron.open{transform:rotate(180deg);opacity:1}
.theme-picker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:8px var(--px) 12px}
.theme-swatch{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;background:var(--bg-elevated);border:1px solid var(--border-subtle);cursor:pointer;transition:all .2s}
.theme-swatch:hover{border-color:var(--gold);background:var(--bg-surface)}
.theme-swatch.active{border-color:var(--gold);box-shadow:0 0 8px rgba(228,184,74,.25)}
.swatch-color{width:18px;height:18px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.12)}
.swatch-name{font-size:.65rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── THEME SKINS ── */

/* 1. Midnight Abyss — default, no overrides needed */

/* 2. Cyber Blue — dark navy futuristic */
body.theme-cyber-blue{
  --grid-line:rgba(59,130,246,.04);
  --gold:#3b82f6;--gold-dim:#2563eb;--gold-subtle:rgba(59,130,246,.07);
  --bg-deep:#0a1628;--bg-elevated:#0f1f3a;--bg-surface:#152a4a;--bg-glass:rgba(10,22,40,.75);
  --border-subtle:rgba(59,130,246,.1);--border-glass:rgba(59,130,246,.14);--border-gold:rgba(59,130,246,.22);
  --neon-green:#00e87b;--neon-green-dim:rgba(0,232,123,.12);
  --neon-red:#ff3860;--neon-red-dim:rgba(255,56,96,.12);
  --neon-blue:#60a5fa;--neon-orange:#fb923c;--neon-purple:#a78bfa;
  --text-primary:#e0e8f0;--text-secondary:#8ab4d8;--text-muted:#3d6a8e;
  --text-on-accent:#ffffff;--text-inverse:#fff;
  --header-bg:rgba(10,22,40,.95);--header-shadow:rgba(0,0,0,.4);
  --sidebar-bg:linear-gradient(180deg,#0d1f38 0%,#0a1628 40%,#0c1c34 100%);
  --sidebar-header-bg:linear-gradient(135deg,rgba(59,130,246,.06),rgba(59,130,246,.02));
  --signal-bg:linear-gradient(170deg,#0d1f38,#081422 50%,#0b1a30);
  --modal-bg:linear-gradient(160deg,#0d1f38,#0f1f3a 50%,#0a1628);
  --bubble-user-bg:rgba(59,130,246,.08);--bubble-user-border:rgba(59,130,246,.2);
  --bubble-mentor-bg:rgba(59,130,246,.05);--bubble-mentor-border:rgba(59,130,246,.15);
  --bubble-warden-bg:rgba(255,68,102,.08);--bubble-warden-border:rgba(255,68,102,.2);
  --dm-msg-mine-bg:linear-gradient(135deg,rgba(59,130,246,.2),rgba(59,130,246,.1));
  --dm-msg-mine-border:rgba(59,130,246,.18);
  --input-shadow:rgba(0,0,0,.5);
  --overlay-bg:rgba(0,0,0,.85);--overlay-light:rgba(0,0,0,.5);
  --emoji-bar-bg:rgba(10,22,40,.95);--emoji-bar-border:rgba(59,130,246,.12);
  --hover-overlay:rgba(59,130,246,.04);--hover-overlay-strong:rgba(59,130,246,.08);
  --notif-banner-bg:linear-gradient(135deg,#0f1f3a,#152a4a);
  --dm-system-bg:rgba(59,130,246,.04);
  background-image:radial-gradient(ellipse 60% 50% at 20% 10%,rgba(59,130,246,.04) 0%,transparent 50%),radial-gradient(ellipse 50% 40% at 80% 90%,rgba(0,150,255,.03) 0%,transparent 50%);
}

/* 3. Ocean Depths — deep navy & teal */
body.theme-ocean-depths{
  --grid-line:rgba(34,211,238,.035);
  --gold:#22d3ee;--gold-dim:#06b6d4;--gold-subtle:rgba(34,211,238,.06);
  --bg-deep:#0a1628;--bg-elevated:#0f1f3a;--bg-surface:#142847;--bg-glass:rgba(10,22,40,.75);
  --border-subtle:rgba(34,211,238,.1);--border-glass:rgba(34,211,238,.14);--border-gold:rgba(34,211,238,.22);
  --neon-green:#2dd4bf;--neon-green-dim:rgba(45,212,191,.12);
  --neon-red:#f87171;--neon-red-dim:rgba(248,113,113,.12);
  --neon-blue:#38bdf8;--neon-orange:#fb923c;--neon-purple:#818cf8;
  --text-primary:#e0f2fe;--text-secondary:#7dd3fc;--text-muted:#3b82a0;
  --header-bg:rgba(10,22,40,.95);--header-shadow:rgba(0,0,0,.4);
  --sidebar-bg:linear-gradient(180deg,#0c1e35 0%,#0a1628 40%,#0d1f38 100%);
  --sidebar-header-bg:linear-gradient(135deg,rgba(34,211,238,.06),rgba(34,211,238,.02));
  --signal-bg:linear-gradient(170deg,#0c1e35,#081422 50%,#0b1a30);
  --modal-bg:linear-gradient(160deg,#0c1e35,#0f1f3a 50%,#0a1628);
  --bubble-user-bg:rgba(34,211,238,.08);--bubble-user-border:rgba(34,211,238,.18);
  --bubble-mentor-bg:rgba(34,211,238,.05);--bubble-mentor-border:rgba(34,211,238,.15);
  --dm-msg-mine-bg:linear-gradient(135deg,rgba(34,211,238,.2),rgba(34,211,238,.1));
  --dm-msg-mine-border:rgba(34,211,238,.2);
  --emoji-bar-bg:rgba(10,22,40,.95);
  --notif-banner-bg:linear-gradient(135deg,#0f1f3a,#142847);
}

/* 4. Galactic Nebula — cosmic purple & pink */
body.theme-galactic-nebula{
  --grid-line:rgba(192,132,252,.035);
  --gold:#c084fc;--gold-dim:#a855f7;--gold-subtle:rgba(192,132,252,.06);
  --bg-deep:#1a0a2e;--bg-elevated:#231244;--bg-surface:#2e1a55;--bg-glass:rgba(26,10,46,.75);
  --border-subtle:rgba(192,132,252,.1);--border-glass:rgba(192,132,252,.14);--border-gold:rgba(192,132,252,.22);
  --neon-green:#4ade80;--neon-green-dim:rgba(74,222,128,.12);
  --neon-red:#fb7185;--neon-red-dim:rgba(251,113,133,.12);
  --neon-blue:#a78bfa;--neon-orange:#f472b6;--neon-purple:#e879f9;
  --text-primary:#f3e8ff;--text-secondary:#c4b5fd;--text-muted:#7c5daa;
  --header-bg:rgba(26,10,46,.95);--header-shadow:rgba(0,0,0,.4);
  --sidebar-bg:linear-gradient(180deg,#1e0e38 0%,#1a0a2e 40%,#1c0c34 100%);
  --sidebar-header-bg:linear-gradient(135deg,rgba(192,132,252,.06),rgba(192,132,252,.02));
  --signal-bg:linear-gradient(170deg,#1e0e38,#150828 50%,#1a0a2e);
  --modal-bg:linear-gradient(160deg,#1e0e38,#231244 50%,#1a0a2e);
  --bubble-user-bg:rgba(192,132,252,.08);--bubble-user-border:rgba(192,132,252,.18);
  --bubble-mentor-bg:rgba(192,132,252,.05);--bubble-mentor-border:rgba(192,132,252,.15);
  --dm-msg-mine-bg:linear-gradient(135deg,rgba(192,132,252,.2),rgba(192,132,252,.1));
  --dm-msg-mine-border:rgba(192,132,252,.2);
  --emoji-bar-bg:rgba(26,10,46,.95);
  --notif-banner-bg:linear-gradient(135deg,#231244,#2e1a55);
}

/* 5. Rose Gold Luxe — warm blush & gold */
body.theme-rose-gold-luxe{
  --grid-line:rgba(232,160,180,.035);
  --gold:#e8a0b4;--gold-dim:#d4849c;--gold-subtle:rgba(232,160,180,.06);
  --bg-deep:#1c1016;--bg-elevated:#2a1820;--bg-surface:#35202b;--bg-glass:rgba(28,16,22,.75);
  --border-subtle:rgba(232,160,180,.1);--border-glass:rgba(232,160,180,.14);--border-gold:rgba(232,160,180,.22);
  --neon-green:#86efac;--neon-green-dim:rgba(134,239,172,.12);
  --neon-red:#fda4af;--neon-red-dim:rgba(253,164,175,.12);
  --neon-blue:#f9a8d4;--neon-orange:#fbbf24;--neon-purple:#f0abfc;
  --text-primary:#fdf2f8;--text-secondary:#d4a0b0;--text-muted:#8a5a6a;
  --header-bg:rgba(28,16,22,.95);--header-shadow:rgba(0,0,0,.4);
  --sidebar-bg:linear-gradient(180deg,#201218 0%,#1c1016 40%,#1e1118 100%);
  --sidebar-header-bg:linear-gradient(135deg,rgba(232,160,180,.06),rgba(232,160,180,.02));
  --signal-bg:linear-gradient(170deg,#201218,#180e14 50%,#1c1016);
  --modal-bg:linear-gradient(160deg,#201218,#2a1820 50%,#1c1016);
  --bubble-user-bg:rgba(232,160,180,.08);--bubble-user-border:rgba(232,160,180,.18);
  --bubble-mentor-bg:rgba(232,160,180,.05);--bubble-mentor-border:rgba(232,160,180,.15);
  --dm-msg-mine-bg:linear-gradient(135deg,rgba(232,160,180,.2),rgba(232,160,180,.1));
  --dm-msg-mine-border:rgba(232,160,180,.2);
  --emoji-bar-bg:rgba(28,16,22,.95);
  --notif-banner-bg:linear-gradient(135deg,#2a1820,#35202b);
}

/* 6. Emerald Shadow — dark with rich green */
body.theme-emerald-shadow{
  --grid-line:rgba(52,211,153,.035);
  --gold:#34d399;--gold-dim:#10b981;--gold-subtle:rgba(52,211,153,.06);
  --bg-deep:#071a12;--bg-elevated:#0d2818;--bg-surface:#143622;--bg-glass:rgba(7,26,18,.75);
  --border-subtle:rgba(52,211,153,.1);--border-glass:rgba(52,211,153,.14);--border-gold:rgba(52,211,153,.22);
  --neon-green:#4ade80;--neon-green-dim:rgba(74,222,128,.12);
  --neon-red:#f87171;--neon-red-dim:rgba(248,113,113,.12);
  --neon-blue:#6ee7b7;--neon-orange:#fbbf24;--neon-purple:#a78bfa;
  --text-primary:#ecfdf5;--text-secondary:#86efac;--text-muted:#4a7a5a;
  --header-bg:rgba(7,26,18,.95);--header-shadow:rgba(0,0,0,.4);
  --sidebar-bg:linear-gradient(180deg,#0a2016 0%,#071a12 40%,#091e14 100%);
  --sidebar-header-bg:linear-gradient(135deg,rgba(52,211,153,.06),rgba(52,211,153,.02));
  --signal-bg:linear-gradient(170deg,#0a2016,#051510 50%,#081c13);
  --modal-bg:linear-gradient(160deg,#0a2016,#0d2818 50%,#071a12);
  --bubble-user-bg:rgba(52,211,153,.08);--bubble-user-border:rgba(52,211,153,.18);
  --bubble-mentor-bg:rgba(52,211,153,.05);--bubble-mentor-border:rgba(52,211,153,.15);
  --dm-msg-mine-bg:linear-gradient(135deg,rgba(52,211,153,.2),rgba(52,211,153,.1));
  --dm-msg-mine-border:rgba(52,211,153,.2);
  --emoji-bar-bg:rgba(7,26,18,.95);
  --notif-banner-bg:linear-gradient(135deg,#0d2818,#143622);
}

/* 7. Solar Flare — fiery orange & amber */
body.theme-solar-flare{
  --grid-line:rgba(251,146,60,.035);
  --gold:#fb923c;--gold-dim:#f97316;--gold-subtle:rgba(251,146,60,.06);
  --bg-deep:#1a0f00;--bg-elevated:#2a1a08;--bg-surface:#3a2410;--bg-glass:rgba(26,15,0,.75);
  --border-subtle:rgba(251,146,60,.1);--border-glass:rgba(251,146,60,.14);--border-gold:rgba(251,146,60,.22);
  --neon-green:#a3e635;--neon-green-dim:rgba(163,230,53,.12);
  --neon-red:#ef4444;--neon-red-dim:rgba(239,68,68,.12);
  --neon-blue:#fbbf24;--neon-orange:#fb923c;--neon-purple:#f97316;
  --text-primary:#fff7ed;--text-secondary:#fdba74;--text-muted:#9a6a30;
  --header-bg:rgba(26,15,0,.95);--header-shadow:rgba(0,0,0,.4);
  --sidebar-bg:linear-gradient(180deg,#1e1200 0%,#1a0f00 40%,#1c1100 100%);
  --sidebar-header-bg:linear-gradient(135deg,rgba(251,146,60,.06),rgba(251,146,60,.02));
  --signal-bg:linear-gradient(170deg,#1e1200,#140c00 50%,#1a0f00);
  --modal-bg:linear-gradient(160deg,#1e1200,#2a1a08 50%,#1a0f00);
  --bubble-user-bg:rgba(251,146,60,.08);--bubble-user-border:rgba(251,146,60,.18);
  --bubble-mentor-bg:rgba(251,146,60,.05);--bubble-mentor-border:rgba(251,146,60,.15);
  --dm-msg-mine-bg:linear-gradient(135deg,rgba(251,146,60,.2),rgba(251,146,60,.1));
  --dm-msg-mine-border:rgba(251,146,60,.2);
  --emoji-bar-bg:rgba(26,15,0,.95);
  --notif-banner-bg:linear-gradient(135deg,#2a1a08,#3a2410);
}

/* 8. Cherry Blossom — light pink pastel */
body.theme-cherry-blossom{
  --grid-line:rgba(236,72,153,.035);
  --gold:#ec4899;--gold-dim:#db2777;--gold-subtle:rgba(236,72,153,.08);
  --bg-deep:#fdf2f8;--bg-elevated:#ffffff;--bg-surface:#fce7f3;--bg-glass:rgba(253,242,248,.92);
  --border-subtle:rgba(244,114,182,.3);--border-glass:rgba(244,114,182,.4);--border-gold:rgba(236,72,153,.3);
  --neon-green:#16a34a;--neon-green-dim:rgba(22,163,74,.1);
  --neon-red:#e11d48;--neon-red-dim:rgba(225,29,72,.08);
  --neon-blue:#ec4899;--neon-orange:#f43f5e;--neon-purple:#a855f7;
  --text-primary:#1f0413;--text-secondary:#831843;--text-muted:#be4d7a;
  --text-on-accent:#ffffff;--text-inverse:#1f0413;
  --header-bg:rgba(255,255,255,.95);--header-shadow:rgba(244,114,182,.15);
  --sidebar-bg:linear-gradient(180deg,#fff5fa 0%,#fdf2f8 40%,#fce7f3 100%);
  --sidebar-header-bg:linear-gradient(135deg,rgba(236,72,153,.06),rgba(236,72,153,.02));
  --signal-bg:linear-gradient(170deg,#fdf2f8,#fce7f3 50%,#fdf2f8);
  --modal-bg:linear-gradient(160deg,#fff5fa,#ffffff 50%,#fdf2f8);
  --bubble-user-bg:rgba(236,72,153,.08);--bubble-user-border:rgba(236,72,153,.2);
  --bubble-mentor-bg:rgba(236,72,153,.05);--bubble-mentor-border:rgba(236,72,153,.15);
  --bubble-warden-bg:rgba(225,29,72,.06);--bubble-warden-border:rgba(225,29,72,.18);
  --dm-msg-mine-bg:linear-gradient(135deg,rgba(236,72,153,.12),rgba(236,72,153,.06));
  --dm-msg-mine-border:rgba(236,72,153,.2);
  --input-shadow:rgba(244,114,182,.12);
  --overlay-bg:rgba(31,4,19,.7);--overlay-light:rgba(31,4,19,.4);
  --emoji-bar-bg:rgba(255,255,255,.95);--emoji-bar-border:rgba(244,114,182,.35);
  --hover-overlay:rgba(236,72,153,.04);--hover-overlay-strong:rgba(236,72,153,.08);
  --notif-banner-bg:linear-gradient(135deg,#ffffff,#fce7f3);
  --dm-system-bg:rgba(236,72,153,.04);
  background-image:none;
}
body.theme-cherry-blossom ::-webkit-scrollbar-thumb{background:rgba(236,72,153,.18)}
body.theme-cherry-blossom ::-webkit-scrollbar-thumb:hover{background:rgba(236,72,153,.3)}
body.theme-cherry-blossom .send-btn svg,
body.theme-cherry-blossom .dm-send-btn svg{color:#fff}
body.theme-cherry-blossom .sidebar-avatar{color:#fff}
body.theme-cherry-blossom .mentor-badge{color:#fff}
body.theme-cherry-blossom .sound-toggle-btn{background:rgba(22,163,74,.08);color:#16a34a;border-color:rgba(22,163,74,.2)}
body.theme-cherry-blossom .sound-toggle-btn.sound-off{background:rgba(190,77,122,.06);color:var(--text-muted);border-color:rgba(190,77,122,.15)}
body.theme-cherry-blossom .toggle-slider{background:rgba(190,77,122,.25)}
body.theme-cherry-blossom .toggle-slider::before{background:#fff}
body.theme-cherry-blossom .dm-menu-dropdown{background:var(--bg-elevated);border:1px solid var(--border-glass)}

/* 9. Titanium Steel — sleek gunmetal grey */
body.theme-titanium-steel{
  --grid-line:rgba(148,163,184,.035);
  --gold:#94a3b8;--gold-dim:#64748b;--gold-subtle:rgba(148,163,184,.06);
  --bg-deep:#0f172a;--bg-elevated:#1e293b;--bg-surface:#283548;--bg-glass:rgba(15,23,42,.75);
  --border-subtle:rgba(148,163,184,.12);--border-glass:rgba(148,163,184,.16);--border-gold:rgba(148,163,184,.22);
  --neon-green:#4ade80;--neon-green-dim:rgba(74,222,128,.12);
  --neon-red:#f87171;--neon-red-dim:rgba(248,113,113,.12);
  --neon-blue:#60a5fa;--neon-orange:#fb923c;--neon-purple:#a78bfa;
  --text-primary:#e2e8f0;--text-secondary:#94a3b8;--text-muted:#475569;
  --header-bg:rgba(15,23,42,.95);--header-shadow:rgba(0,0,0,.4);
  --sidebar-bg:linear-gradient(180deg,#131d30 0%,#0f172a 40%,#111b2e 100%);
  --sidebar-header-bg:linear-gradient(135deg,rgba(148,163,184,.06),rgba(148,163,184,.02));
  --signal-bg:linear-gradient(170deg,#131d30,#0c1424 50%,#0f172a);
  --modal-bg:linear-gradient(160deg,#131d30,#1e293b 50%,#0f172a);
  --bubble-user-bg:rgba(96,165,250,.08);--bubble-user-border:rgba(96,165,250,.18);
  --bubble-mentor-bg:rgba(148,163,184,.05);--bubble-mentor-border:rgba(148,163,184,.15);
  --dm-msg-mine-bg:linear-gradient(135deg,rgba(148,163,184,.2),rgba(148,163,184,.1));
  --dm-msg-mine-border:rgba(148,163,184,.2);
  --emoji-bar-bg:rgba(15,23,42,.95);
  --notif-banner-bg:linear-gradient(135deg,#1e293b,#283548);
}

/* 10. Golden Dynasty — rich black & gold */
body.theme-golden-dynasty{
  --grid-line:rgba(251,191,36,.035);
  --gold:#fbbf24;--gold-dim:#f59e0b;--gold-subtle:rgba(251,191,36,.08);
  --bg-deep:#0a0800;--bg-elevated:#1a1400;--bg-surface:#2a2008;--bg-glass:rgba(10,8,0,.8);
  --border-subtle:rgba(251,191,36,.12);--border-glass:rgba(251,191,36,.16);--border-gold:rgba(251,191,36,.28);
  --neon-green:#a3e635;--neon-green-dim:rgba(163,230,53,.12);
  --neon-red:#ef4444;--neon-red-dim:rgba(239,68,68,.12);
  --neon-blue:#fbbf24;--neon-orange:#f59e0b;--neon-purple:#eab308;
  --text-primary:#fef9c3;--text-secondary:#fbbf24;--text-muted:#8a7a20;
  --header-bg:rgba(10,8,0,.95);--header-shadow:rgba(0,0,0,.5);
  --sidebar-bg:linear-gradient(180deg,#120e00 0%,#0a0800 40%,#100c00 100%);
  --sidebar-header-bg:linear-gradient(135deg,rgba(251,191,36,.08),rgba(251,191,36,.03));
  --signal-bg:linear-gradient(170deg,#120e00,#080600 50%,#0a0800);
  --modal-bg:linear-gradient(160deg,#120e00,#1a1400 50%,#0a0800);
  --bubble-user-bg:rgba(251,191,36,.08);--bubble-user-border:rgba(251,191,36,.18);
  --bubble-mentor-bg:rgba(251,191,36,.05);--bubble-mentor-border:rgba(251,191,36,.15);
  --dm-msg-mine-bg:linear-gradient(135deg,rgba(251,191,36,.2),rgba(251,191,36,.1));
  --dm-msg-mine-border:rgba(251,191,36,.2);
  --emoji-bar-bg:rgba(10,8,0,.95);
  --notif-banner-bg:linear-gradient(135deg,#1a1400,#2a2008);
}

/* 11. Midnight Abyss — original dark with gold accents */
body.theme-midnight-abyss{
  --grid-line:rgba(228,184,74,.03);
  --gold:#e4b84a;--gold-dim:#c9a033;--gold-subtle:rgba(228,184,74,.06);
  --bg-deep:#050507;--bg-elevated:#111116;--bg-surface:#1a1a22;--bg-glass:rgba(16,16,22,.6);
  --border-subtle:rgba(255,255,255,.06);--border-glass:rgba(255,255,255,.09);--border-gold:rgba(228,184,74,.18);
  --neon-green:#00e87b;--neon-green-dim:rgba(0,232,123,.12);
  --neon-red:#ff3860;--neon-red-dim:rgba(255,56,96,.12);
  --neon-blue:#38bdf8;--neon-orange:#fb923c;--neon-purple:#a78bfa;
  --text-primary:#f0f0f5;--text-secondary:#8a8a9a;--text-muted:#55556a;
  --text-on-accent:#050507;--text-inverse:#fff;
  --header-bg:rgba(5,5,7,.95);--header-shadow:rgba(0,0,0,.3);
  --sidebar-bg:linear-gradient(180deg,#0d0d14 0%,#090910 40%,#0b0b12 100%);
  --sidebar-header-bg:linear-gradient(135deg,rgba(228,184,74,.04),rgba(228,184,74,.01));
  --signal-bg:linear-gradient(170deg,#0b0b10,#06060a 50%,#09090e);
  --modal-bg:linear-gradient(160deg,#0d0d14,#111118 50%,#0a0a10);
  --bubble-user-bg:rgba(56,189,248,.08);--bubble-user-border:rgba(56,189,248,.18);
  --bubble-mentor-bg:rgba(228,184,74,.05);--bubble-mentor-border:rgba(228,184,74,.15);
  --bubble-warden-bg:rgba(255,68,102,.08);--bubble-warden-border:rgba(255,68,102,.2);
  --dm-msg-mine-bg:linear-gradient(135deg,rgba(228,184,74,.2),rgba(228,184,74,.1));
  --dm-msg-mine-border:rgba(228,184,74,.15);
  --input-shadow:rgba(0,0,0,.4);
  --overlay-bg:rgba(0,0,0,.85);--overlay-light:rgba(0,0,0,.5);
  --emoji-bar-bg:rgba(25,25,35,.95);--emoji-bar-border:rgba(255,255,255,.1);
  --hover-overlay:rgba(255,255,255,.04);--hover-overlay-strong:rgba(255,255,255,.08);
  --notif-banner-bg:linear-gradient(135deg,#1a1a2e,#16213e);
  --dm-system-bg:rgba(255,255,255,.03);
  background-image:radial-gradient(ellipse 60% 50% at 20% 10%,rgba(167,139,250,.015) 0%,transparent 50%),radial-gradient(ellipse 50% 40% at 80% 90%,rgba(56,189,248,.01) 0%,transparent 50%);
}

/* Landscape phones */
@media(max-height:500px) and (orientation:landscape){
  :root{--signal-panel-height:94px;--header-height:38px;--input-bar-height:56px}
  .signal-content{padding:3px var(--px);gap:2px}
  .signal-top-row{gap:4px}
  .glass-card{padding:2px 3px}
  .card-label{font-size:.42rem}
  .card-value{font-size:.7rem}
  .timer-ring{width:32px;height:32px}
  #chat-input{padding:8px 14px}
  .prize-pool-strip{padding:1px var(--px);gap:4px}
  .prize-pool-strip-label{font-size:.42rem}
  .prize-pool-strip-value{font-size:.58rem}
  .prize-pool-strip.pp-t3 .prize-pool-strip-value,.prize-pool-strip.pp-t4 .prize-pool-strip-value,.prize-pool-strip.pp-t5 .prize-pool-strip-value{font-size:.66rem}
}

/* ═══ @Mention Dropdown ═══ */
.mention-dropdown{
  position:absolute;bottom:calc(var(--input-bar-height) + 4px);left:8px;right:8px;
  max-height:180px;overflow-y:auto;
  background:rgba(25,25,35,.97);border:1px solid rgba(255,255,255,.1);border-radius:10px;
  z-index:50;padding:4px 0;backdrop-filter:blur(12px);
}
.mention-dropdown.hidden{display:none}
.mention-item{
  display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;
  font-size:.8rem;color:var(--text-primary);transition:background .15s;
}
.mention-item:hover,.mention-item.active{background:rgba(228,184,74,.15)}
.mention-item .mention-avatar{
  width:28px;height:28px;border-radius:50%;background:rgba(228,184,74,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;color:var(--gold);flex-shrink:0;
}
.mention-item .mention-name{font-weight:600}
.mention-item .mention-handle{color:var(--text-muted);font-size:.72rem}
.msg-mention{
  color:#ff69b4;font-weight:700;cursor:pointer;
  background:rgba(255,105,180,.12);border-radius:3px;padding:0 2px;
}
.msg-mention-all{
  background:linear-gradient(135deg,rgba(255,68,102,.18),rgba(170,68,255,.18));
  color:#ff69b4;font-weight:800;letter-spacing:.3px;
  padding:1px 5px;border-radius:4px;
}
.mention-avatar-all{
  background:linear-gradient(135deg,rgba(255,68,102,.25),rgba(170,68,255,.25))!important;
  font-size:1rem!important;
}

/* Drag & drop overlay */
.main-container.drag-over{position:relative}
.main-container.drag-over::after{
  content:'Drop image or video here';
  position:absolute;inset:0;z-index:999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,20,.85);
  border:2px dashed rgba(68,136,255,.6);border-radius:12px;
  color:#4488ff;font-family:'Inter',sans-serif;font-size:1.1rem;font-weight:600;
  letter-spacing:.5px;pointer-events:none;
  animation:dragPulse 1.5s ease-in-out infinite;
}
@keyframes dragPulse{
  0%,100%{border-color:rgba(68,136,255,.4);color:rgba(68,136,255,.7)}
  50%{border-color:rgba(68,136,255,.9);color:#4488ff}
}

/* Members list */
.members-list{display:flex;flex-direction:column;gap:2px;max-height:55vh;overflow-y:auto}
.member-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:10px;transition:background .15s;
}
.member-item:hover{background:var(--hover-overlay)}
.member-avatar{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;background:rgba(228,184,74,.2);color:var(--gold);
  overflow:hidden;
}
.member-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.member-info{flex:1;min-width:0}
.member-name{font-weight:600;font-size:.85rem;color:var(--text-primary);display:block}
.member-handle{font-size:.72rem;color:var(--text-muted);display:block}
.member-status{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.member-status.online{background:#00e87b}
.member-status.offline{background:var(--text-muted)}
.member-mute-btn{background:none;border:1px solid var(--border-subtle);border-radius:6px;padding:4px 6px;cursor:pointer;color:var(--text-muted);flex-shrink:0;display:flex;align-items:center}
.member-mute-btn:hover{border-color:var(--neon-orange);color:var(--neon-orange)}
.member-mute-btn.muted{border-color:var(--neon-red);color:var(--neon-red)}
.member-mute-btn.muted svg{stroke:var(--neon-red)}
.member-kick-btn{background:none;border:1px solid rgba(255,68,102,.3);border-radius:6px;padding:4px 6px;cursor:pointer;color:var(--neon-red);flex-shrink:0;display:flex;align-items:center}
.member-kick-btn:hover{border-color:var(--neon-red);background:rgba(255,68,102,.1)}
.member-kick-btn svg{stroke:var(--neon-red)}
.member-delete-btn{background:none;border:1px solid rgba(200,30,30,.4);border-radius:6px;padding:4px 6px;cursor:pointer;color:#c81e1e;flex-shrink:0;display:flex;align-items:center}
.member-delete-btn:hover{border-color:#c81e1e;background:rgba(200,30,30,.15)}
.member-delete-btn svg{stroke:#c81e1e}
.member-readmit-btn{background:none;border:1px solid rgba(0,255,136,.3);border-radius:6px;padding:4px 6px;cursor:pointer;color:#00ff88;flex-shrink:0;display:flex;align-items:center}
.member-readmit-btn:hover{border-color:#00ff88;background:rgba(0,255,136,.1)}
.member-readmit-btn svg{stroke:#00ff88}
.member-vip-btn{background:none;border:1px solid rgba(245,200,66,.3);border-radius:6px;padding:4px 6px;cursor:pointer;color:var(--text-muted);flex-shrink:0;display:flex;align-items:center;font-size:.7rem;font-weight:700;transition:all .2s;gap:2px}
.member-vip-btn:hover{border-color:var(--gold);color:var(--gold)}
.member-vip-btn.active{border-color:var(--gold);color:var(--gold);background:rgba(245,200,66,.1)}
.member-vip-btn .vip-star{font-size:12px}
.member-item.member-kicked{opacity:.55}
.member-item.member-kicked:hover{opacity:.8}
.kicked-badge{background:linear-gradient(135deg,#cc2244,#ff4466);color:#fff;font-size:.55rem;padding:1px 5px;border-radius:4px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.member-status.kicked{background:#ff4466;box-shadow:0 0 4px rgba(255,68,102,.5)}
.member-avatar.avatar-mentor{position:relative;overflow:visible!important}
.member-avatar.avatar-mentor::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(#ff4466,#ff8844,#f5c842,#00ff88,#4488ff,#aa44ff,#ff4466);z-index:-1;animation:mentorGlow 3s linear infinite}

/* Avatar preview overlay */
#avatar-preview-overlay{z-index:400;flex-direction:column;gap:16px}
#avatar-preview-overlay.hidden{display:none}
.profile-card-modal{
  background:var(--card);border:1px solid var(--border);border-radius:20px;
  padding:28px 24px 20px;width:min(340px,88vw);text-align:center;position:relative;
  box-shadow:0 16px 60px rgba(0,0,0,.7);animation:msgIn .25s ease;
}
.profile-card-close{
  position:absolute;top:10px;right:14px;background:none;border:none;color:var(--text-muted);
  font-size:1.5rem;cursor:pointer;line-height:1;padding:4px 8px;
}
.profile-card-close:hover{color:var(--text-primary)}
.profile-card-avatar{display:flex;justify-content:center}
.profile-card-avatar img{
  width:110px;height:110px;border-radius:50%;object-fit:cover;
  border:3px solid rgba(228,184,74,.4);box-shadow:0 4px 24px rgba(0,0,0,.5);
  display:block;
}
.profile-card-avatar .no-avatar{
  width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;font-weight:800;color:#fff;margin:0 auto;
  background:linear-gradient(135deg,var(--neon-purple),var(--neon-blue));
  border:3px solid rgba(228,184,74,.4);box-shadow:0 4px 24px rgba(0,0,0,.5);
}
.profile-card-name{
  margin-top:12px;font-size:1.2rem;font-weight:800;color:var(--text-primary);
}
.profile-card-role{
  margin-top:4px;font-size:.75rem;font-weight:700;
}
.profile-card-role .role-mentor{color:var(--gold);background:rgba(228,184,74,.12);padding:3px 10px;border-radius:8px;display:inline-block}
.profile-card-role .role-gm{color:var(--neon-green);background:rgba(0,255,136,.1);padding:3px 10px;border-radius:8px;display:inline-block}
.profile-card-role .role-member{color:var(--neon-blue);background:rgba(68,136,255,.1);padding:3px 10px;border-radius:8px;display:inline-block}
.profile-card-role .role-vip{color:#ffd700;background:rgba(245,200,66,.15);padding:3px 10px;border-radius:8px;display:inline-block;font-weight:700;text-shadow:0 0 8px rgba(245,200,66,.3)}
.profile-card-bio{
  margin-top:10px;font-size:.8rem;color:var(--text-muted);font-style:italic;
  max-height:60px;overflow:hidden;
}
.profile-card-info{
  margin-top:16px;text-align:left;font-size:.78rem;
}
.profile-card-info .pci-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);
}
.profile-card-info .pci-row:last-child{border-bottom:none}
.profile-card-info .pci-label{color:var(--text-muted);font-weight:600}
.profile-card-info .pci-value{color:var(--text-primary);font-weight:500;text-align:right}
.profile-card-info .pci-value.group-vip{color:var(--gold)}
.profile-card-info .pci-value.group-learning{color:var(--neon-purple)}
.profile-card-info .pci-value.group-official{color:var(--neon-blue)}
.profile-card-info .pci-value.mentor-name{color:var(--gold)}
.profile-card-info .pci-value.graduated{color:var(--neon-green)}
.profile-card-loading{text-align:center;color:var(--text-muted);padding:16px 0}

/* Profile Gallery (edit modal) */
.profile-gallery{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.profile-gallery .gallery-thumb{position:relative;width:80px;height:80px;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.profile-gallery .gallery-thumb img{width:100%;height:100%;object-fit:cover;cursor:pointer}
.profile-gallery .gallery-thumb .gallery-remove{
  position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;
  background:rgba(255,50,50,.85);color:#fff;border:none;font-size:.7rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.profile-gallery .gallery-add{
  width:80px;height:80px;border-radius:10px;border:2px dashed var(--border);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--text-muted);font-size:1.5rem;transition:all .2s;
}
.profile-gallery .gallery-add:hover{border-color:var(--gold);color:var(--gold)}

/* Profile Card Gallery (view) */
.profile-card-gallery{margin-top:14px;display:flex;gap:6px;justify-content:center}
.profile-card-gallery img{
  width:90px;height:90px;border-radius:10px;object-fit:cover;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);transition:transform .2s;
}
.profile-card-gallery img:hover{transform:scale(1.05)}

/* Clickable avatar in chat */
.msg-container .avatar img,.msg-container .avatar{cursor:pointer}

/* Sound toggle buttons in sidebar */
.sidebar-sound-controls{
  display:flex;gap:6px;padding:8px 14px;
}
.sound-toggle-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 10px;border-radius:10px;font-size:.75rem;font-weight:600;
  background:var(--neon-green-dim);color:var(--neon-green);border:1px solid rgba(0,232,123,.2);
  cursor:pointer;transition:all .2s;
}
.sound-toggle-btn:hover{background:rgba(0,232,123,.2)}
.sound-toggle-btn.sound-off{
  background:var(--hover-overlay);color:var(--text-muted);
  border-color:var(--border-subtle);
}
.sound-toggle-btn.sound-off:hover{background:var(--hover-overlay-strong)}
.sound-toggle-btn svg{flex-shrink:0}

.msg-actions{
  display:flex;flex-direction:column;gap:4px;
}

/* ========== DIRECT MESSAGES ========== */

/* DM list in sidebar */
.dm-search-wrap{
  display:flex;align-items:center;gap:8px;padding:6px 14px;margin:2px 6px 4px;
  background:var(--hover-overlay);border:1px solid var(--border-subtle);border-radius:10px;
}
.dm-search-wrap svg{color:var(--text-muted);flex-shrink:0}
.dm-search-input{
  flex:1;background:none;border:none;outline:none;color:var(--text);
  font-size:.8rem;font-family:inherit;padding:4px 0;
}
.dm-search-input::placeholder{color:var(--text-muted);opacity:.6}
.dm-list{
  padding:0 6px;
}
.dm-empty{
  padding:8px 14px;font-size:.78rem;color:var(--text-muted);font-style:italic;
}
.dm-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:10px;cursor:pointer;transition:background .15s;
}
.dm-item:hover{background:var(--gold-subtle)}
.dm-item-avatar{
  width:34px;height:34px;min-width:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.78rem;background:rgba(228,184,74,.2);color:var(--gold);
  overflow:hidden;position:relative;
}
.dm-item-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.dm-item-info{flex:1;min-width:0}
.dm-item-name{font-weight:600;font-size:.82rem;color:var(--text-primary);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-item-note{font-weight:400;font-size:.68rem;color:var(--gold);opacity:.8;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;min-width:0}
.dm-item-preview{font-size:.7rem;color:var(--text-muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.dm-item-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.dm-item-time{font-size:.6rem;color:var(--text-muted)}
.dm-unread-badge{
  min-width:18px;height:18px;border-radius:9px;
  background:var(--gold);color:#050507;font-size:.6rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
}
.dm-item-pinned{background:rgba(228,184,74,.06);border:1px solid rgba(228,184,74,.12)}
.dm-pin-btn{background:none;border:none;cursor:pointer;padding:2px;color:var(--text-muted);opacity:0;transition:all .15s;display:flex;align-items:center}
.dm-item:hover .dm-pin-btn{opacity:.6}
.dm-pin-btn:hover{opacity:1!important;color:var(--gold)}
.dm-pin-btn.pinned{opacity:1;color:var(--gold)}

/* DM badge on hamburger */
.menu-icon{position:relative}
.dm-hamburger-badge{
  position:absolute;top:-2px;right:-4px;
  width:10px;height:10px;border-radius:50%;
  background:var(--neon-red);
  box-shadow:0 0 6px var(--neon-red);
  animation:dmPulse 1.5s ease-in-out infinite;
}
@keyframes dmPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}

/* DM total badge in sidebar section title */
.dm-badge-total{
  min-width:16px;height:16px;border-radius:8px;
  background:var(--neon-red);color:#fff;font-size:.55rem;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;padding:0 4px;
  margin-left:auto;
}

/* Member list message button */
.member-msg-btn{
  background:none;border:1px solid rgba(56,189,248,.2);border-radius:6px;
  padding:4px 8px;cursor:pointer;color:var(--neon-blue);flex-shrink:0;
  display:flex;align-items:center;gap:4px;font-size:.68rem;font-weight:600;
  transition:all .15s;
}
.member-msg-btn:hover{border-color:var(--neon-blue);background:rgba(56,189,248,.08)}
.member-msg-btn svg{width:12px;height:12px}

/* DM Chat Modal */
.dm-overlay{
  position:fixed;inset:0;z-index:1100;
  background:var(--bg-deep);
  display:flex;flex-direction:column;
  animation:fadeIn .15s ease;
}
.dm-modal{
  display:flex;flex-direction:column;height:100%;
}
.dm-header{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:var(--header-bg);
  border-bottom:1px solid var(--border-glass);
  backdrop-filter:blur(20px);
  position:relative;z-index:50;
  min-height:52px;
}
.dm-back-btn{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;color:var(--text-secondary);
}
.dm-back-btn:hover{background:var(--bg-surface)}
.dm-header-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.dm-header-avatar{
  width:36px;height:36px;min-width:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;background:rgba(228,184,74,.2);color:var(--gold);
  overflow:hidden;
}
.dm-header-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.dm-header-text{display:flex;flex-direction:column;min-width:0}
#dm-header-name{font-weight:700;font-size:.95rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Inline note input in DM header (mentor only) */
.dm-header-note-input{
  flex-shrink:1;min-width:0;max-width:160px;
  padding:3px 8px;border-radius:6px;
  border:1px solid transparent;background:transparent;
  color:var(--gold);font-size:.72rem;font-family:'Inter',sans-serif;
  font-style:italic;outline:none;
  transition:all .2s;
}
.dm-header-note-input::placeholder{color:var(--text-muted);opacity:.5;font-style:italic}
.dm-header-note-input:hover{border-color:rgba(228,184,74,.25);background:rgba(228,184,74,.05)}
.dm-header-note-input:focus{border-color:var(--gold);background:rgba(228,184,74,.08)}
.dm-header-status{font-size:.7rem;color:var(--text-muted)}
.dm-header-status.online{color:var(--neon-green)}

.dm-chat-window{
  flex:1;overflow-y:auto;padding:14px;
  display:flex;flex-direction:column;gap:4px;
}
.dm-input-bar{
  display:flex;align-items:flex-end;gap:8px;
  padding:10px 14px;
  border-top:1px solid var(--border-glass);
  background:var(--header-bg);
  backdrop-filter:blur(20px);
}
.dm-input-wrapper{
  flex:1;
}
.dm-input-wrapper textarea{
  width:100%;padding:11px 16px;
  background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:20px;font-size:.9rem;outline:none;
  transition:border-color .2s;color:var(--text-primary);
  resize:none;overflow-y:auto;max-height:150px;min-height:0;
  line-height:1.4;display:block;box-sizing:border-box;
  font-family:'Inter',sans-serif;
}
.dm-input-wrapper textarea:focus{border-color:var(--gold-dim);box-shadow:0 0 0 2px var(--gold-subtle)}
.dm-input-wrapper textarea::placeholder{color:var(--text-muted)}
.dm-send-btn{
  width:40px;height:40px;min-width:40px;
}

/* DM message bubbles */
.dm-msg{
  max-width:80%;padding:10px 14px;border-radius:16px;
  font-size:.88rem;line-height:1.4;word-wrap:break-word;
  animation:msgIn .2s ease;
}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.dm-msg-mine{
  align-self:flex-end;
  background:var(--dm-msg-mine-bg);
  border:1px solid var(--dm-msg-mine-border);
  border-bottom-right-radius:4px;
}
.dm-msg-other{
  align-self:flex-start;
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-bottom-left-radius:4px;
}
.dm-msg-footer{
  display:flex;align-items:center;gap:6px;margin-top:4px;
}
.dm-msg-mine .dm-msg-footer{justify-content:flex-end}
.dm-msg-time{
  font-size:.6rem;color:var(--text-muted);
}
.dm-msg-mine .dm-msg-time{text-align:right}

/* DM seen indicator */
.dm-seen-status{
  font-size:clamp(.44rem,1.1vw,.5rem);color:var(--text-muted);
  display:none;cursor:pointer;
}
.dm-seen-status.seen{
  display:inline;color:var(--neon-blue);
}
.dm-seen-status.seen:hover{text-decoration:underline}

/* DM message actions popup */
.dm-msg-actions{
  position:absolute;top:-34px;right:8px;z-index:50;
  display:flex;flex-direction:column;gap:4px;
  animation:msgActFade .15s ease;
}
.dm-msg-other .dm-msg-actions{right:auto;left:8px}

/* DM reply quote inside messages */
.dm-reply-quote{
  padding:4px 8px;margin-bottom:4px;border-radius:6px;
  background:rgba(255,255,255,.05);border-left:2px solid var(--gold);
  cursor:pointer;
}
.dm-reply-quote-name{
  display:block;font-size:.6rem;font-weight:700;color:var(--gold);
}
.dm-reply-quote-text{
  display:block;font-size:.65rem;color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;
}

/* DM media */
.dm-media-img{
  max-width:220px;width:100%;border-radius:10px;margin-bottom:4px;
  cursor:pointer;display:block;
}
video.dm-media-img{max-height:300px}

/* DM pending preview (reuses group chat styles) */
#dm-pending-preview{
  margin:0 8px;
}

.dm-msg-system{
  align-self:center;font-size:.72rem;color:var(--text-muted);
  padding:4px 12px;background:var(--dm-system-bg);border-radius:12px;
}
.dm-typing{
  align-self:flex-start;font-size:.75rem;color:var(--text-muted);
  padding:4px 0;font-style:italic;
}

/* DM header actions menu */
.dm-header-actions{margin-left:auto;position:relative;z-index:1200}
.dm-menu-btn{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;color:var(--text-secondary);
}
.dm-menu-btn:hover{background:var(--bg-surface)}
.dm-menu-dropdown{
  position:absolute;top:100%;right:0;margin-top:4px;
  background:var(--bg-elevated);border:1px solid var(--border-glass);
  border-radius:12px;overflow:hidden;min-width:180px;
  box-shadow:0 8px 30px rgba(0,0,0,.5);z-index:1200;
  animation:modalIn .15s ease;
}
.dm-menu-dropdown button{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:12px 16px;font-size:.85rem;font-weight:500;
  color:var(--text-secondary);transition:all .15s;text-align:left;
}
.dm-menu-dropdown button:hover{background:var(--hover-overlay);color:var(--text-primary)}
.dm-menu-dropdown button svg{flex-shrink:0;opacity:.6}
.dm-menu-dropdown .dm-menu-danger{color:var(--neon-red)}
.dm-menu-dropdown .dm-menu-danger:hover{background:rgba(255,56,96,.08)}
.dm-menu-dropdown .dm-menu-danger svg{stroke:var(--neon-red);opacity:.8}

/* DM sidebar item delete button */
.dm-item-delete{
  position:absolute;top:50%;right:4px;transform:translateY(-50%);
  width:24px;height:24px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  background:rgba(255,56,96,.15);color:var(--neon-red);
  transition:all .15s;
}
.dm-item:hover .dm-item-delete{display:flex}
.dm-item-delete:hover{background:rgba(255,56,96,.3)}
.dm-item{position:relative}

/* ── Group Header ── */
.group-header-name{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--gold);padding:8px 16px;text-align:center;background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle)}

/* ── Mentor Group Picker ── */
#mentor-group-picker{font-family:'Inter',sans-serif}

/* ── Sidebar Active Room ── */
.sidebar-item.active-room{background:rgba(245,200,66,.1);border-left:3px solid var(--gold)}
.sidebar-item.active-room span{color:var(--gold);font-weight:700}

/* ── VIP Gold Shimmer ── */
.sidebar-vip{position:relative;overflow:hidden}
.sidebar-vip span:nth-child(2){background:linear-gradient(90deg,#f5c842,#ffe082,#f5c842);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700;animation:vipShimmer 2s linear infinite;background-size:200% 100%}
@keyframes vipShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── German flag (Offizielle Gruppe sidebar room) ──
   CSS gradient element, NOT an svg: .active-room's `stroke:var(--gold)`
   rule smothers tiny-viewBox svg flags, gradients are immune. */
.de-flag{
  display:inline-block;width:18px;height:11px;border-radius:2px;
  vertical-align:-1px;margin-left:4px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#000 0 33.4%,#dd0000 33.4% 66.7%,#ffce00 66.7% 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
  transform-origin:left center;
  animation:deFlagWave 3.2s ease-in-out infinite;
}
.de-flag::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  transform:translateX(-100%);
  animation:deFlagShine 4.5s ease-in-out infinite;
}
@keyframes deFlagWave{0%,100%{transform:perspective(60px) rotateY(0deg)}50%{transform:perspective(60px) rotateY(-16deg)}}
@keyframes deFlagShine{0%,55%{transform:translateX(-100%)}75%,100%{transform:translateX(100%)}}

/* ── Forward Message Modal ── */
.forward-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;padding:16px}
.forward-overlay.hidden{display:none}
.forward-modal{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:16px;width:100%;max-width:420px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
.forward-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-subtle)}
.forward-title{font-size:1.05rem;font-weight:700;color:var(--gold)}
.forward-close{background:none;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;padding:0 4px}
.forward-close:hover{color:var(--text-primary)}
.forward-select-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;border-bottom:1px solid var(--border-subtle)}
.forward-select-all-btn{background:rgba(68,136,255,.15);color:var(--neon-blue);border:1px solid rgba(68,136,255,.3);border-radius:8px;padding:5px 12px;font-size:.78rem;font-weight:600;cursor:pointer}
.forward-select-all-btn:hover{background:rgba(68,136,255,.25)}
.forward-selected-count{font-size:.78rem;color:var(--text-muted)}
.forward-search-bar{display:flex;align-items:center;gap:8px;padding:8px 20px;border-bottom:1px solid var(--border-subtle);color:var(--text-muted)}
.forward-search-bar input{flex:1;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:8px;padding:7px 12px;font-size:.82rem;color:var(--text-primary);outline:none;transition:border-color .15s}
.forward-search-bar input::placeholder{color:var(--text-muted);opacity:.6}
.forward-search-bar input:focus{border-color:var(--neon-blue)}
.forward-member-list{flex:1;overflow-y:auto;padding:8px 12px;min-height:120px;max-height:50vh}
.forward-member-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .15s}
.forward-member-item:hover{background:var(--hover-overlay)}
.forward-member-item.selected{background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.2)}
.forward-member-item .forward-avatar{width:38px;height:38px;border-radius:50%;background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--gold);font-size:.9rem;overflow:hidden;flex-shrink:0}
.forward-member-item .forward-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.forward-member-item .forward-name-wrap{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.forward-member-item .forward-name{font-size:.9rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.forward-member-item .forward-note{font-size:.68rem;color:var(--gold);opacity:.8;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.forward-member-item .forward-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.forward-member-item.selected .forward-check{background:var(--neon-green);border-color:var(--neon-green);color:#000}
.forward-preview{padding:10px 20px;border-top:1px solid var(--border-subtle);max-height:80px;overflow:hidden}
.forward-preview-text{font-size:.78rem;color:var(--text-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.forward-preview-media{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--text-muted)}
.forward-preview-thumb{width:50px;height:50px;object-fit:cover;border-radius:6px;flex-shrink:0;border:1px solid var(--border-subtle)}
.forward-send-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 20px 16px;padding:12px;border-radius:10px;background:linear-gradient(135deg,var(--neon-green),#00cc6a);color:var(--text-on-accent);font-weight:700;font-size:.95rem;border:none;cursor:pointer;transition:opacity .15s}
.forward-send-btn:disabled{opacity:.35;cursor:not-allowed}
.forward-send-btn:not(:disabled):hover{opacity:.85}
.forward-loading{text-align:center;color:var(--text-muted);padding:24px;font-size:.85rem}

/* ── Notification Permission Banner ── */
.notif-banner{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--notif-banner-bg);border:1px solid var(--gold);border-radius:12px;padding:14px 20px;z-index:9998;display:flex;align-items:center;gap:12px;max-width:380px;animation:slideUp .3s ease}
.notif-banner.hidden{display:none}
.notif-banner-text{font-size:.82rem;color:var(--text);line-height:1.4}
.notif-banner-actions{display:flex;gap:8px;flex-shrink:0}
.notif-banner-allow{background:var(--neon-green);color:var(--text-on-accent);border:none;border-radius:8px;padding:6px 14px;font-weight:700;font-size:.78rem;cursor:pointer}
.notif-banner-dismiss{background:none;color:var(--text-muted);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:.78rem;cursor:pointer}
@keyframes slideUp{from{transform:translateX(-50%) translateY(30px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}

/* ── Members List Search ── */
.members-search-wrap{
  display:flex;align-items:center;gap:8px;padding:8px 14px;margin-bottom:10px;
  background:var(--hover-overlay);border:1px solid var(--border-subtle);border-radius:10px;
}
.members-search-wrap svg{color:var(--text-muted);flex-shrink:0}
.members-search-input{
  flex:1;background:none;border:none;outline:none;color:var(--text);
  font-size:.85rem;font-family:inherit;padding:4px 0;
}
.members-search-input::placeholder{color:var(--text-muted);opacity:.6}

/* ============================================
   CUSTOMER SERVICE (in-DM support)
   ============================================ */
.cs-avatar{background:rgba(0,212,255,.15)!important;color:#00d4ff!important;border:1px solid rgba(0,212,255,.3)!important}
.cs-header{border-bottom-color:rgba(0,212,255,.15)!important}

/* DM list CS entry */
.dm-item-cs{position:relative;border:1px solid rgba(0,212,255,.12);background:rgba(0,212,255,.04);border-radius:10px;margin-bottom:4px}
.dm-item-cs:hover{background:rgba(0,212,255,.08);border-color:rgba(0,212,255,.2)}
.dm-item-cs .dm-item-avatar{background:rgba(0,212,255,.15);color:#00d4ff}
.dm-item-cs .dm-item-name{color:#00d4ff}
.dm-item-cs .cs-badge{font-size:.55rem;font-weight:800;background:rgba(0,212,255,.15);color:#00d4ff;padding:1px 6px;border-radius:4px;margin-left:4px;letter-spacing:.5px}

/* CS Home */
.cs-home{flex:1;overflow-y:auto;padding:0}
.cs-welcome{text-align:center;padding:28px 20px 16px}
.cs-welcome-icon{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.15);display:flex;align-items:center;justify-content:center}
.cs-welcome h3{font-size:1.05rem;font-weight:700;margin-bottom:4px}
.cs-welcome p{font-size:.78rem;color:var(--text-muted)}

/* Quick question grid */
.cs-quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 14px 16px}
.cs-quick-btn{background:var(--surface-secondary,rgba(255,255,255,.03));border:1px solid var(--border-subtle,rgba(255,255,255,.06));border-radius:12px;padding:14px 12px;cursor:pointer;transition:all .2s;text-align:left}
.cs-quick-btn:hover{border-color:rgba(0,212,255,.3);background:rgba(0,212,255,.05);transform:translateY(-1px)}
.cs-quick-btn:active{transform:translateY(0)}
.cs-quick-icon{width:28px;height:28px;margin-bottom:6px;color:#00d4ff}
.cs-quick-icon svg{width:22px;height:22px}
.cs-quick-title{display:block;font-size:.78rem;font-weight:700;margin-bottom:2px;color:var(--text)}
.cs-quick-desc{display:block;font-size:.62rem;color:var(--text-muted);line-height:1.3}

/* CS ticket list in home */
.cs-section-label{font-size:.68rem;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;padding:12px 16px 6px}
.cs-ticket-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:background .15s;border-bottom:1px solid rgba(255,255,255,.03)}
.cs-ticket-item:hover{background:rgba(255,255,255,.03)}
.cs-ticket-item .cs-t-subject{font-size:.8rem;font-weight:600;flex:1}
.cs-ticket-item .cs-t-status{font-size:.58rem;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:10px;letter-spacing:.3px}
.cs-t-status.open{background:rgba(0,232,123,.1);color:#00e87b}
.cs-t-status.resolved{background:rgba(91,138,255,.1);color:#5b8aff}
.cs-t-status.closed{background:rgba(136,136,170,.1);color:var(--text-muted)}
.cs-ticket-item .cs-t-time{font-size:.6rem;color:var(--text-muted);font-family:'JetBrains Mono',monospace}
.cs-ticket-item .cs-t-preview{font-size:.68rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}

/* CS Chat */
.cs-chat-view{flex:1;display:flex;flex-direction:column;overflow:hidden}
.cs-messages{flex:1;overflow-y:auto}
.cs-input-bar{border-top:1px solid var(--border-subtle,rgba(255,255,255,.06))}

/* CS message styling */
.cs-msg{max-width:80%;padding:10px 14px;border-radius:14px;font-size:.85rem;line-height:1.5;word-wrap:break-word;margin-bottom:4px}
.cs-msg.cs-member{background:var(--surface-secondary,rgba(255,255,255,.05));border:1px solid var(--border-subtle,rgba(255,255,255,.06));align-self:flex-start;border-bottom-left-radius:4px}
.cs-msg.cs-mentor{background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.12);align-self:flex-end;border-bottom-right-radius:4px}
.cs-msg .cs-msg-sender{font-size:.62rem;font-weight:800;margin-bottom:2px;text-transform:uppercase;letter-spacing:.5px}
.cs-msg.cs-member .cs-msg-sender{color:#5b8aff}
.cs-msg.cs-mentor .cs-msg-sender{color:#00d4ff}
.cs-msg .cs-msg-time{font-size:.58rem;text-align:right;margin-top:4px;opacity:.4}

/* CS credential card (mentor view in CS) */
.cs-cred-card{background:rgba(245,200,66,.04);border:1px solid rgba(245,200,66,.12);border-radius:10px;padding:10px 14px;margin:8px 12px;font-size:.75rem}
.cs-cred-card .cs-cred-title{font-size:.62rem;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.cs-cred-card .cs-cred-row{display:flex;align-items:center;justify-content:space-between;padding:3px 0}
.cs-cred-card .cs-cred-label{color:var(--text-muted);font-size:.68rem}
.cs-cred-card .cs-cred-val{font-family:'JetBrains Mono',monospace;font-size:.78rem;user-select:all}
.cs-cred-card .cs-cred-hidden{color:var(--text-muted);letter-spacing:2px}
.cs-cred-card .cs-cred-toggle{background:none;border:1px solid rgba(245,200,66,.2);color:var(--gold);padding:2px 8px;border-radius:4px;cursor:pointer;font-size:.58rem;font-weight:700;margin-left:6px}

/* Unread badge on CS entry in DM list */
.cs-unread-dot{width:8px;height:8px;border-radius:50%;background:#00e87b;box-shadow:0 0 6px #00e87b;flex-shrink:0;display:none}
.cs-unread-dot.visible{display:block}

@media(max-width:480px){
  .cs-quick-grid{grid-template-columns:repeat(2,1fr);gap:6px;padding:0 10px 12px}
  .cs-quick-btn{padding:10px 8px}
  .cs-quick-title{font-size:.72rem}
  .cs-quick-desc{font-size:.58rem}
  .cs-welcome{padding:20px 16px 12px}
  .cs-welcome h3{font-size:.95rem}
}
@media(max-width:360px){
  .cs-quick-grid{gap:4px}
  .cs-quick-btn{padding:8px 6px}
  .cs-quick-icon svg{width:18px;height:18px}
}

/* ========== SCAM WARNING BAR & MODAL ========== */
/* --scam-warn-height doubles as the shared "ticker slot" height for LTO + scam rotation */
:root{
  --scam-warn-height:38px;
}
.scam-warn-bar{
  display:flex;align-items:center;gap:8px;
  padding:5px 12px;
  min-height:var(--scam-warn-height);
  background:linear-gradient(90deg,rgba(60,12,12,.96) 0%,rgba(80,20,16,.96) 50%,rgba(60,12,12,.96) 100%);
  border-top:1px solid rgba(220,38,38,.5);
  border-bottom:1px solid rgba(220,38,38,.5);
  color:#fff;
  cursor:pointer;
  position:fixed;left:0;right:0;
  top:calc(var(--header-height) + var(--signal-panel-height));
  z-index:97;
  animation:scamPulse 3s ease-in-out infinite;
  transition:top .3s ease,opacity .5s ease;
  white-space:nowrap;overflow:hidden;
}
.scam-warn-bar.hidden{display:none}
/* Scam bar stacks BELOW the LTO bar when LTO is active. Otherwise sits at the same slot as LTO. */
.main-container.break-mode .scam-warn-bar{top:calc(var(--header-height) + 52px)}
.main-container.lto-active .scam-warn-bar{top:calc(var(--header-height) + var(--signal-panel-height) + 38px)}
.main-container.break-mode.lto-active .scam-warn-bar{top:calc(var(--header-height) + 52px + 38px)}
/* Smooth slide-in/out when scam appears/disappears on its random schedule */
.scam-warn-bar{animation:scamSlideIn .45s cubic-bezier(.22,1,.36,1)}
@keyframes scamSlideIn{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
/* Padding-top: account for whichever bars are visible */
.main-container.lto-active{padding-top:calc(var(--header-height) + var(--signal-panel-height) + 38px)}
.main-container.break-mode.lto-active{padding-top:calc(var(--header-height) + 52px + 38px)}
.main-container:has(> .scam-warn-bar:not(.hidden)){padding-top:calc(var(--header-height) + var(--signal-panel-height) + var(--scam-warn-height))}
.main-container.break-mode:has(> .scam-warn-bar:not(.hidden)){padding-top:calc(var(--header-height) + 52px + var(--scam-warn-height))}
.main-container.lto-active:has(> .scam-warn-bar:not(.hidden)){padding-top:calc(var(--header-height) + var(--signal-panel-height) + 38px + var(--scam-warn-height))}
.main-container.break-mode.lto-active:has(> .scam-warn-bar:not(.hidden)){padding-top:calc(var(--header-height) + 52px + 38px + var(--scam-warn-height))}
.scam-warn-bar:hover{background:linear-gradient(90deg,rgba(80,16,16,.98) 0%,rgba(100,28,20,.98) 50%,rgba(80,16,16,.98) 100%)}
.scam-warn-bar:active{transform:scale(.995)}
.scam-warn-icon{
  font-size:1rem;line-height:1;color:#ff6b6b;
  text-shadow:0 0 8px rgba(255,68,68,.7);
  flex-shrink:0;animation:scamBlink 1.6s ease-in-out infinite;
}
@keyframes scamBlink{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes scamPulse{
  0%,100%{box-shadow:0 0 0 rgba(220,38,38,0)}
  50%{box-shadow:0 0 14px rgba(220,38,38,.35)}
}
.scam-warn-text{
  flex:1;min-width:0;font-size:.7rem;line-height:1.3;color:#f5e6e6;
  font-weight:500;
  white-space:nowrap;overflow:hidden;
  animation:scamScroll 28s linear infinite;
}
.scam-warn-text strong{color:#ff6b6b;font-weight:800;letter-spacing:.3px}
.scam-warn-link{
  color:#ffd966;font-weight:700;font-size:.68rem;
  text-decoration:underline;text-underline-offset:2px;
  margin-left:8px;
}
@keyframes scamScroll{0%,15%{text-indent:0}100%{text-indent:-100%}}
.scam-warn-close{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  background:rgba(255,68,68,.18);color:#ff8888;
  font-size:1.05rem;line-height:1;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.scam-warn-close:hover{background:rgba(255,68,68,.32);color:#fff}

@media(max-width:600px){
  :root{--scam-warn-height:34px}
  .scam-warn-bar{padding:4px 10px;gap:6px}
  .scam-warn-text{font-size:.62rem}
  .scam-warn-link{font-size:.6rem}
  .scam-warn-close{width:20px;height:20px;font-size:.95rem}
}

/* Wide-screen layout (matches LTO/break-bar centering) */
@media(min-width:769px) and (max-width:1024px){
  .scam-warn-bar{max-width:900px;left:50%;transform:translateX(-50%)}
}
@media(min-width:768px){
  body.split-view .scam-warn-bar{max-width:none;left:var(--sidebar-width);right:0;transform:none;width:auto}
}

/* ========== SCAM MODAL (redesigned) ========== */
.scam-modal-overlay{background:rgba(8,4,4,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.scam-modal{
  max-width:540px;width:94vw;
  padding:0;            /* override generic .modal padding */
  background:linear-gradient(180deg,#ffffff 0%,#fff5f5 100%);
  border-radius:20px;
  border:1px solid rgba(220,38,38,.18);
  box-shadow:0 30px 70px -10px rgba(220,38,38,.35),0 0 0 1px rgba(220,38,38,.05),inset 0 1px 0 rgba(255,255,255,.6);
  overflow:hidden;
  position:relative;
  animation:scamModalIn .35s cubic-bezier(.22,1,.36,1);
  max-height:92vh;
  display:flex;flex-direction:column;
}
@keyframes scamModalIn{
  from{opacity:0;transform:translateY(20px) scale(.94)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
/* Top diagonal hazard stripe — purely decorative */
.scam-hazard-stripe{
  height:6px;flex-shrink:0;
  background:repeating-linear-gradient(135deg,#dc2626 0 14px,#0c0c0c 14px 28px);
}
/* Hero header */
.scam-modal-hero{
  position:relative;
  background:
    radial-gradient(ellipse 90% 100% at 50% 0%,rgba(255,200,200,.4) 0%,transparent 60%),
    linear-gradient(180deg,#fef2f2 0%,#ffffff 100%);
  padding:22px 24px 18px;
  text-align:center;
  border-bottom:1px solid rgba(220,38,38,.12);
}
.scam-modal-close{
  position:absolute;top:10px;right:10px;
  width:30px;height:30px;border-radius:50%;
  background:rgba(220,38,38,.08);color:#dc2626;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,transform .15s ease;
}
.scam-modal-close:hover{background:rgba(220,38,38,.18);transform:rotate(90deg)}
.scam-hero-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:78px;height:78px;border-radius:50%;
  background:linear-gradient(135deg,#dc2626,#991b1b);
  color:#fff;
  margin:0 auto 12px;
  box-shadow:0 14px 30px -6px rgba(220,38,38,.55),inset 0 -2px 8px rgba(0,0,0,.18),inset 0 2px 4px rgba(255,255,255,.18);
  animation:scamHeroPulse 2.2s ease-in-out infinite;
}
@keyframes scamHeroPulse{
  0%,100%{transform:scale(1);box-shadow:0 14px 30px -6px rgba(220,38,38,.55),inset 0 -2px 8px rgba(0,0,0,.18),inset 0 2px 4px rgba(255,255,255,.18)}
  50%{transform:scale(1.04);box-shadow:0 18px 38px -4px rgba(220,38,38,.65),inset 0 -2px 8px rgba(0,0,0,.18),inset 0 2px 4px rgba(255,255,255,.22)}
}
.scam-hero-title{
  font-size:1.4rem;font-weight:900;letter-spacing:1.5px;
  background:linear-gradient(135deg,#991b1b,#dc2626 55%,#b91c1c);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:4px;
}
.scam-hero-sub{
  font-size:.78rem;color:#7f1d1d;font-weight:600;
  max-width:380px;margin:0 auto;line-height:1.4;
  opacity:.85;
}

/* Body scroll */
.scam-modal-body{
  padding:18px 20px 20px;
  overflow-y:auto;
  flex:1;
}
.scam-modal-body::-webkit-scrollbar{width:6px}
.scam-modal-body::-webkit-scrollbar-thumb{background:rgba(220,38,38,.25);border-radius:8px}

/* Rule cards */
.scam-rule-card{
  background:#fff;
  border:1px solid rgba(220,38,38,.12);
  border-left:3px solid #dc2626;
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:10px;
  box-shadow:0 1px 3px rgba(220,38,38,.06);
  transition:transform .15s ease,box-shadow .2s ease;
}
.scam-rule-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(220,38,38,.12)}
.scam-rule-head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:6px;
}
.scam-rule-badge{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,#dc2626,#b91c1c);
  color:#fff;font-size:.8rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(220,38,38,.4),inset 0 -1px 2px rgba(0,0,0,.15);
}
.scam-rule-title{
  flex:1;
  font-size:.85rem;font-weight:800;color:#7f1d1d;
  line-height:1.3;letter-spacing:.2px;
}
.scam-rule-body{
  font-size:.78rem;line-height:1.55;color:#3b3b3b;
  padding-left:36px;
}
.scam-rule-body em{color:#dc2626;font-weight:600;font-style:normal}
.scam-rule-body strong{color:#7f1d1d;font-weight:800}

/* Do / Don't grid */
.scam-do-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-top:14px;
}
.scam-do-col{
  border-radius:12px;padding:12px 12px 10px;
  border:1px solid;
}
.scam-do-dont{background:linear-gradient(180deg,#fef2f2,#fee2e2);border-color:rgba(220,38,38,.25)}
.scam-do-do{background:linear-gradient(180deg,#f0fdf4,#dcfce7);border-color:rgba(22,163,74,.25)}
.scam-do-col-title{
  font-size:.7rem;font-weight:900;letter-spacing:1.2px;
  margin-bottom:8px;text-align:center;
  padding:3px 0;border-radius:6px;
}
.scam-do-dont .scam-do-col-title{color:#fff;background:linear-gradient(135deg,#dc2626,#b91c1c)}
.scam-do-do .scam-do-col-title{color:#fff;background:linear-gradient(135deg,#16a34a,#15803d)}
.scam-do-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.scam-do-col li{
  display:flex;align-items:flex-start;gap:6px;
  font-size:.72rem;line-height:1.35;color:#3b3b3b;
}
.scam-mark{
  flex-shrink:0;width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:800;line-height:1;
}
.scam-x{background:#dc2626;color:#fff}
.scam-check{background:#16a34a;color:#fff}

/* Final callout */
.scam-final-callout{
  display:flex;gap:10px;align-items:flex-start;
  margin-top:16px;padding:12px 14px;
  background:linear-gradient(135deg,#7f1d1d,#991b1b);
  border-radius:12px;
  color:#fee2e2;
  box-shadow:0 6px 16px -4px rgba(127,29,29,.4),inset 0 1px 0 rgba(255,255,255,.08);
}
.scam-final-icon{
  flex-shrink:0;color:#fef08a;
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.18);
}
.scam-final-text{
  flex:1;
  font-size:.78rem;line-height:1.5;font-weight:500;
}
.scam-final-text strong{color:#fef08a;font-weight:900;letter-spacing:.3px}

/* OK button */
.scam-modal-ok{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin-top:16px;
  padding:13px 16px;
  background:linear-gradient(135deg,#dc2626,#991b1b);
  color:#fff;font-weight:900;font-size:.9rem;letter-spacing:1px;
  border-radius:12px;
  box-shadow:0 6px 16px -4px rgba(220,38,38,.45),inset 0 -2px 0 rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;
  text-transform:uppercase;
}
.scam-modal-ok:hover{transform:translateY(-1px);box-shadow:0 10px 22px -4px rgba(220,38,38,.55),inset 0 -2px 0 rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.18);filter:brightness(1.05)}
.scam-modal-ok:active{transform:translateY(0)}
.scam-modal-ok svg{flex-shrink:0}

/* Mobile tweaks */
@media(max-width:540px){
  .scam-modal{width:96vw;border-radius:16px}
  .scam-modal-hero{padding:18px 18px 14px}
  .scam-hero-icon{width:64px;height:64px}
  .scam-hero-icon svg{width:46px;height:46px}
  .scam-hero-title{font-size:1.15rem;letter-spacing:1.2px}
  .scam-hero-sub{font-size:.72rem}
  .scam-modal-body{padding:14px 14px 16px}
  .scam-rule-card{padding:10px 12px}
  .scam-rule-title{font-size:.78rem}
  .scam-rule-body{font-size:.72rem;padding-left:0;margin-top:2px}
  .scam-do-grid{grid-template-columns:1fr;gap:8px}
  .scam-do-col li{font-size:.7rem}
}