/* ══════════════════════════════════════════════════════════
   VARIABLES & RESET
══════════════════════════════════════════════════════════ */
:root {
  --brand:#F97B3B; --brand-dark:#e06628; --brand-light:#ffa06e;
  --brand-glow:rgba(249,123,59,0.18);
  --bg-deep:#0e1117; --bg-base:#141921; --bg-card:#1c2333;
  --bg-input:#111827; --bg-hover:#1e2a3a; --bg-active:#243040;
  --border:#2a3448; --border-light:#1e2a3a;
  --text-primary:#e8ecf0; --text-secondary:#8a9bb0; --text-muted:#5a6a80;
  --msg-sent:#1a3a5c; --msg-sent-border:#1e4570; --msg-recv:#1c2333;
  --online:#43b581; --offline:#74777e; --danger:#ed4245;
  --vip-gold:#ffd166; --vip-glow:rgba(255,209,102,0.15);
  --star:#f5c518;
  --sidebar-w:340px; --header-h:58px;
  --radius:12px; --radius-sm:8px; --radius-msg:18px;
  --shadow:0 4px 24px rgba(0,0,0,0.4);
  --transition:0.2s cubic-bezier(0.4,0,0.2,1);
  --safe-top:5px;
  --safe-bottom:5px;
  --safe-left:0px;
  --safe-right:0px;
  --bnav-h:calc(56px + var(--safe-bottom));
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%;height:-webkit-fill-available}
body{
  font-family:'Nunito',sans-serif;
  background:var(--bg-deep);
  color:var(--text-primary);
  height:100dvh;
  overflow:hidden;
  position:fixed;width:100%;
}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* ══════════════════════════════════════════════════════════
   APP LAYOUT
══════════════════════════════════════════════════════════ */
#app{display:flex;flex-direction:row;height:100dvh;overflow:hidden}

/* ── TOPBAR (desktop only) ── */
#topbar{
  height:var(--header-h);
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;flex-shrink:0;z-index:100;
  padding-left:calc(16px + var(--safe-left));
  padding-right:calc(16px + var(--safe-right));
}
.topbar-logo{display:flex;align-items:center;gap:10px}
.topbar-logo-icon{width:32px;height:32px;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.topbar-logo-icon img{width:100%;height:100%;object-fit:cover}
.topbar-title{font-size:20px;font-weight:800;color:white;letter-spacing:-.5px}
.topbar-actions{display:flex;gap:8px}
.topbar-btn{
  background:transparent;border:1px solid var(--border);
  color:var(--text-secondary);padding:6px 12px;border-radius:8px;
  cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;
  display:flex;align-items:center;gap:6px;transition:var(--transition)
}
.topbar-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--brand)}
.topbar-btn.danger:hover{background:rgba(237,66,69,.15);color:var(--danger);border-color:var(--danger)}

/* ── MAIN ── */
#main{flex:1;display:flex;overflow:hidden;position:relative}

/* ══════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════ */
#sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:var(--bg-base);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform var(--transition);z-index:50;
}
.sidebar-header{
  padding:12px 14px;background:var(--bg-card);
  border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;gap:10px
}
.search-wrap{position:relative;display:flex;align-items:center}
.search-icon{position:absolute;left:10px;color:var(--text-muted);width:16px;height:16px}
#searchConv,#searchConvMobile{
  width:100%;padding:9px 12px 9px 34px;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:24px;color:var(--text-primary);
  font-size:14px;font-family:inherit;transition:var(--transition)
}
#searchConv::placeholder,#searchConvMobile::placeholder{color:var(--text-muted)}
#searchConv:focus,#searchConvMobile:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
.sidebar-actions-row{display:flex;gap:8px}
#addContactBtn{
  flex:1;background:var(--brand);color:white;border:none;
  border-radius:10px;padding:9px 14px;cursor:pointer;
  font-size:13px;font-weight:700;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:var(--transition)
}
#addContactBtn:hover{background:var(--brand-dark);transform:translateY(-1px)}
#newGroupBtn{
  background:var(--bg-input);color:var(--text-secondary);
  border:1px solid var(--border);border-radius:10px;
  padding:9px 12px;cursor:pointer;font-size:13px;font-weight:700;
  font-family:inherit;display:flex;align-items:center;gap:6px;
  transition:var(--transition)
}
#newGroupBtn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--brand)}

/* ── PENDING ── */
#pendingContainer{background:rgba(249,123,59,.06);border-bottom:1px solid var(--border);display:none}
#pendingHeader{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:var(--transition)}
#pendingHeader:hover{background:var(--brand-glow)}
#pendingHeader-left{display:flex;align-items:center;gap:8px}
.pending-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
#pendingHeader-title{font-size:13px;font-weight:700;color:var(--brand)}
#pendingHeader-count{font-size:12px;color:var(--text-muted)}
#pendingToggleIcon{font-size:12px;color:var(--text-muted);transition:var(--transition)}
#pendingList{display:none}
.pending-item{padding:10px 14px;border-top:1px solid var(--border-light);transition:var(--transition)}
.pending-item-header{display:flex;justify-content:space-between;margin-bottom:3px}
.pending-item-name{font-size:13px;font-weight:700;color:var(--text-primary)}
.pending-item-time{font-size:11px;color:var(--text-muted)}
.pending-item-text{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pending-item-actions{display:flex;gap:6px;margin-top:6px}
.pending-accept-btn{background:var(--online);color:white;border:none;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.pending-decline-btn{background:transparent;color:var(--danger);border:1px solid var(--danger);border-radius:6px;padding:4px 10px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}

/* ── SIDEBAR FOOTER ── */
.sidebar-footer{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  border-top:1px solid var(--border);
  background:var(--bg-card);
  flex-shrink:0
}
.user-info{
  display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  cursor:pointer;border-radius:8px;padding:2px;
  transition:background .15s
}
.user-info:hover{background:var(--bg-hover)}
.sidebar-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  display:flex;align-items:center;justify-content:center;
  color:white;font-size:14px;font-weight:800;
  position:relative;overflow:hidden
}
.sidebar-avatar img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.sidebar-avatar img[src=""]{display:none}
.sidebar-pseudo{
  font-size:14px;font-weight:700;color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.sidebar-logout{
  background:transparent;border:none;color:var(--text-muted);
  width:36px;height:36px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .15s
}
.sidebar-logout:hover{background:rgba(237,66,69,.15);color:var(--danger)}
.sidebar-install{
  background:transparent;border:none;color:var(--text-muted);
  width:36px;height:36px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .15s
}
.sidebar-install:hover{background:rgba(249,123,59,.15);color:var(--brand)}

/* ── CONV LIST ── */
#convList{flex:1;overflow-y:auto;border-radius:10px;margin:10px;padding:4px;display:flex;flex-direction:column;gap:2px}
.conv-item{display:flex;align-items:center;padding:11px 12px;cursor:pointer;border-radius:10px;transition:background var(--transition);position:relative;user-select:none}
.conv-item:hover{background:var(--bg-hover)}
.conv-item.active{background:var(--bg-active);border-left:3px solid var(--brand);padding-left:9px}
.conv-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:white;flex-shrink:0;margin-right:12px;position:relative;overflow:visible}
.conv-avatar img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.conv-avatar.group-avatar{background:transparent}
.status-dot{position:absolute;bottom:1px;right:1px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg-base)}
.status-dot.online{background:var(--online)}
.status-dot.offline{background:var(--offline)}
.conv-info{flex:1;min-width:0}
.conv-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.conv-name{font-size:14px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:4px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-time{font-size:11px;color:var(--text-muted);flex-shrink:0}
.conv-preview{font-size:13px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread-badge{background:var(--brand);color:white;font-size:11px;font-weight:800;padding:2px 6px;border-radius:10px;flex-shrink:0;margin-left:4px}
.group-icon{font-size:10px;color:var(--text-muted);background:var(--bg-input);border:1px solid var(--border);border-radius:4px;padding:1px 4px;margin-left:4px}
.inline-badge{display:inline-flex;align-items:center;width:16px;height:16px;vertical-align:middle}
.inline-badge img{width:100%;height:100%;object-fit:contain}
.conv-section-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);padding:8px 10px 4px;display:flex;align-items:center;gap:6px}

/* ── CROQUETTE BADGE ── */
.croquette-badge-mini{
  display:inline-flex;align-items:center;gap:3px;
  padding:1px 6px;border-radius:10px;font-size:10px;font-weight:700;
  margin-left:4px;flex-shrink:0;
}

/* ══════════════════════════════════════════════════════════
   CHAT AREA
══════════════════════════════════════════════════════════ */
#chatArea{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-deep);position:relative}
#chatArea::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 20% 20%,rgba(249,123,59,.03) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(249,123,59,.02) 0%,transparent 50%);pointer-events:none;z-index:0}
#chatHeader{height:var(--header-h);background:var(--bg-card);border-bottom:1px solid var(--border);display:none;align-items:center;padding:0 16px;gap:12px;flex-shrink:0;z-index:10}
#chatHeader.visible{display:flex}
.chat-back-btn{display:none;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:6px;border-radius:8px;transition:var(--transition)}
.chat-back-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
#chatAvatarHeader{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:white;cursor:pointer;flex-shrink:0;position:relative;overflow:hidden}
#chatAvatarHeader img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.chat-info{flex:1;min-width:0;cursor:pointer}
#chatName{font-size:15px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:5px}
#chatStatus{font-size:12px;color:var(--text-muted)}
#chatStatus.online{color:var(--online)}
.chat-header-actions{display:flex;gap:4px}
.icon-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.icon-btn:hover{background:var(--bg-hover);color:var(--text-primary)}

/* ── PROFILE PANEL (right sidebar) ── */
#profilePanel{
  width:320px;min-width:320px;background:var(--bg-card);
  border-left:1px solid var(--border);display:none;
  flex-direction:column;overflow:hidden;flex-shrink:0;
  animation:slideInRight .2s ease;z-index:40
}
#profilePanel.open{display:flex}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
.pp-banner{
  height:120px;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
  background-size:cover;background-position:center;flex-shrink:0;position:relative
}
.pp-close-btn{
  position:absolute;top:10px;right:10px;background:rgba(0,0,0,.3);border:none;
  color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;
  font-size:15px;display:flex;align-items:center;justify-content:center;
  transition:var(--transition)
}
.pp-close-btn:hover{background:rgba(0,0,0,.5)}
.pp-scroll{flex:1;overflow-y:auto;padding:0 16px 16px}
.pp-avatar-wrap{display:flex;justify-content:center;margin-top:8px;position:relative;z-index:1}
.pp-avatar{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:800;color:white;
  border:4px solid var(--bg-card);position:relative;overflow:hidden
}
.pp-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.pp-body{text-align:center;padding-top:8px}
.pp-name-row{font-size:18px;font-weight:800;color:var(--text-primary);display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.pp-id{font-size:12px;color:var(--text-muted);margin:2px 0 8px}
.pp-status{font-size:13px;color:var(--text-muted);margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:5px}
.pp-section{text-align:left;background:var(--bg-input);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px}
.pp-section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--brand);margin-bottom:4px}
.pp-section-val{font-size:13px;color:var(--text-primary);line-height:1.5}
.pp-badges-row{display:flex;flex-wrap:wrap;gap:5px}
.pp-action-btn{
  width:100%;padding:10px;border-radius:8px;border:none;
  background:var(--brand);color:var(--bg-deep);font-size:14px;
  font-weight:700;cursor:pointer;margin-top:4px;transition:var(--transition)
}
.pp-action-btn:hover{background:var(--brand-dark)}
@media(max-width:900px){#profilePanel{position:fixed;right:0;top:0;bottom:0;z-index:5000;width:300px;box-shadow:-4px 0 20px rgba(0,0,0,.4)}}
@media(max-width:500px){#profilePanel{width:100%;border-left:none}}

/* Empty state */
#emptyChat{
  user-select:none;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  color:var(--text-muted);z-index:1;padding:40px;text-align:center;
  background-image:url("/assets/logo/background_black.png");
  background-size:cover;background-position:center;background-repeat:no-repeat
}
.empty-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;font-size:36px}
#emptyChat h3{font-size:18px;font-weight:700;color:var(--text-secondary)}
#emptyChat p{font-size:14px;line-height:1.6;max-width:280px}

/* Messages */
#messages{
  flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:2px;
  z-index:1;background-image:url("/assets/logo/background_black.png");
  background-size:cover;background-position:center;background-repeat:no-repeat;
  position:relative;transition:filter .3s ease,opacity .3s ease
}
#messages.locked{filter:blur(18px);opacity:.5;pointer-events:none;user-select:none}
.system-msg{text-align:center;font-size:.75rem;color:rgba(255,255,255,.4);padding:6px 12px;margin:4px 0;line-height:1.4}
.msg-wrapper{display:flex;flex-direction:column;max-width:72%;position:relative}
.msg-wrapper.sent{align-self:flex-end;align-items:flex-end}
.msg-wrapper.recv{align-self:flex-start;flex-direction:row;align-items:flex-end;gap:8px}
.msg-wrapper.sent.grouped{margin-top:1px}
.msg-wrapper.recv.grouped{margin-top:1px}
.msg-wrapper.sent .msg-bubble{border-bottom-right-radius:4px}
.msg-wrapper.sent.grouped .msg-bubble{border-bottom-right-radius:var(--radius-msg);border-top-right-radius:var(--radius-msg)}
.msg-wrapper.sent.group-start .msg-bubble{border-bottom-right-radius:4px;border-top-right-radius:var(--radius-msg)}
.msg-wrapper.sent.group-middle .msg-bubble{border-top-right-radius:4px;border-bottom-right-radius:4px}
.msg-wrapper.sent.group-end .msg-bubble{border-top-right-radius:4px;border-bottom-right-radius:var(--radius-msg)}
.msg-wrapper.recv .msg-bubble{border-bottom-left-radius:4px}
.msg-wrapper.recv.grouped .msg-bubble{border-bottom-left-radius:var(--radius-msg);border-top-left-radius:var(--radius-msg)}
.msg-wrapper.recv.group-start .msg-bubble{border-bottom-left-radius:4px;border-top-left-radius:var(--radius-msg)}
.msg-wrapper.recv.group-middle .msg-bubble{border-top-left-radius:4px;border-bottom-left-radius:4px}
.msg-wrapper.recv.group-end .msg-bubble{border-top-left-radius:4px;border-bottom-left-radius:var(--radius-msg)}
.msg-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:white;flex-shrink:0;overflow:visible}
.msg-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.msg-avatar-placeholder{width:36px;height:36px;flex-shrink:0}
.msg-bubble{padding:11px 16px;border-radius:var(--radius-msg);cursor:pointer;word-break:break-word;transition:filter .15s;flex-direction:column}
.msg-bubble:hover{filter:brightness(1.1)}
.msg-bubble:active{filter:brightness(.9)}
.msg-wrapper.sent .msg-bubble{background:var(--msg-sent);border:1px solid var(--msg-sent-border)}
.msg-wrapper.recv .msg-bubble{background:var(--msg-recv);border:1px solid var(--border)}
.msg-sender-name{font-size:11px;font-weight:700;color:var(--brand);margin-bottom:3px;cursor:pointer}
.reply-quote{background:rgba(0,0,0,.25);border-left:3px solid var(--brand);border-radius:6px;padding:6px 8px;margin-bottom:6px;font-size:12px}
.reply-quote-name{color:var(--brand);font-weight:700;margin-bottom:2px}
.reply-quote-text{color:var(--text-secondary)}
.msg-text{font-size:16px;line-height:1.55;color:var(--text-primary)}
.msg-text.deleted{font-style:italic;color:var(--text-muted)}
.mention{
  color:var(--brand);
  font-weight:600;
  cursor:pointer;
  background:rgba(249,123,59,0.1);
  padding:2px 4px;
  border-radius:4px;
  transition:var(--transition);
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.mention::before{
  content:'';
  display:inline-block;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--bg-hover);
  background-size:cover;
  background-position:center;
}
.mention[data-uid]::before{
  background-image:var(--mention-avatar, none);
}
.mention:hover{
  background:rgba(249,123,59,0.2);
  text-decoration:underline;
}

/* ── MESSAGE THEMES (VIP) ── */
@keyframes roseGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes confettiFall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(10px) rotate(360deg); opacity: 0; }
}
@keyframes neonPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0,255,127,0.3), inset 0 0 10px rgba(0,255,127,0.1); }
  50% { box-shadow: 0 0 35px rgba(0,255,127,0.5), inset 0 0 20px rgba(0,255,127,0.2); }
}
@keyframes auroraShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes flameFlicker {
  0%, 100% { background-position: 0% 50%; box-shadow: 0 0 20px rgba(255,69,0,0.4); }
  25% { background-position: 25% 50%; box-shadow: 0 0 30px rgba(255,140,0,0.5); }
  50% { background-position: 50% 50%; box-shadow: 0 0 25px rgba(255,69,0,0.45); }
  75% { background-position: 75% 50%; box-shadow: 0 0 35px rgba(255,140,0,0.55); }
}
@keyframes swingRight {
  0%, 100% { transform: skewX(0deg) rotate(0deg); }
  25% { transform: skewX(2deg) rotate(1deg); }
  50% { transform: skewX(0deg) rotate(0deg); }
}
@keyframes swingLeft {
  0%, 100% { transform: skewX(0deg) rotate(0deg); }
  25% { transform: skewX(-2deg) rotate(-1deg); }
  50% { transform: skewX(0deg) rotate(0deg); }
}
@keyframes swingSequence {
  0%, 100% { transform: skewX(0deg) rotate(0deg); }
  12.5% { transform: skewX(5deg) rotate(3deg); }
  25% { transform: skewX(0deg) rotate(0deg); }
  37.5% { transform: skewX(-5deg) rotate(-3deg); }
  50% { transform: skewX(0deg) rotate(0deg); }
  62.5% { transform: skewX(5deg) rotate(3deg); }
  75% { transform: skewX(0deg) rotate(0deg); }
  87.5% { transform: skewX(-5deg) rotate(-3deg); }
}
@keyframes swingFast {
  0%, 100% { transform: skewX(0deg) rotate(0deg); }
  5% { transform: skewX(12deg) rotate(8deg); }
  10% { transform: skewX(0deg) rotate(0deg); }
  15% { transform: skewX(-12deg) rotate(-8deg); }
  20% { transform: skewX(0deg) rotate(0deg); }
  25% { transform: skewX(12deg) rotate(8deg); }
  30% { transform: skewX(0deg) rotate(0deg); }
  35% { transform: skewX(-12deg) rotate(-8deg); }
  40% { transform: skewX(0deg) rotate(0deg); }
  45% { transform: skewX(12deg) rotate(8deg); }
  50% { transform: skewX(0deg) rotate(0deg); }
  55% { transform: skewX(-12deg) rotate(-8deg); }
  60% { transform: skewX(0deg) rotate(0deg); }
  65% { transform: skewX(12deg) rotate(8deg); }
  70% { transform: skewX(0deg) rotate(0deg); }
  75% { transform: skewX(-12deg) rotate(-8deg); }
  80% { transform: skewX(0deg) rotate(0deg); }
  85% { transform: skewX(12deg) rotate(8deg); }
  90% { transform: skewX(0deg) rotate(0deg); }
  95% { transform: skewX(-12deg) rotate(-8deg); }
}
@keyframes swingLoop {
  0%, 50% { transform: skewX(0deg) rotate(0deg); }
  100% { transform: skewX(0deg) rotate(0deg); }
}
@keyframes swingCombined {
  0%, 50% { transform: skewX(0deg) rotate(0deg); }
  2.5% { transform: skewX(12deg) rotate(8deg); }
  5% { transform: skewX(0deg) rotate(0deg); }
  7.5% { transform: skewX(-12deg) rotate(-8deg); }
  10% { transform: skewX(0deg) rotate(0deg); }
  12.5% { transform: skewX(12deg) rotate(8deg); }
  15% { transform: skewX(0deg) rotate(0deg); }
  17.5% { transform: skewX(-12deg) rotate(-8deg); }
  20% { transform: skewX(0deg) rotate(0deg); }
  22.5% { transform: skewX(12deg) rotate(8deg); }
  25% { transform: skewX(0deg) rotate(0deg); }
  27.5% { transform: skewX(-12deg) rotate(-8deg); }
  30% { transform: skewX(0deg) rotate(0deg); }
  32.5% { transform: skewX(12deg) rotate(8deg); }
  35% { transform: skewX(0deg) rotate(0deg); }
  37.5% { transform: skewX(-12deg) rotate(-8deg); }
  40% { transform: skewX(0deg) rotate(0deg); }
  42.5% { transform: skewX(12deg) rotate(8deg); }
  45% { transform: skewX(0deg) rotate(0deg); }
  47.5% { transform: skewX(-12deg) rotate(-8deg); }
  100% { transform: skewX(0deg) rotate(0deg); }
}
@keyframes rgbGlitch {
  0%, 100% { text-shadow: 2px 0 rgba(255,0,0,0.8), -2px 0 rgba(0,0,255,0.8); }
  25% { text-shadow: -2px 0 rgba(0,255,0,0.8), 2px 0 rgba(255,0,0,0.8); }
  50% { text-shadow: 2px 0 rgba(0,0,255,0.8), -2px 0 rgba(0,255,0,0.8); }
  75% { text-shadow: -2px 0 rgba(255,0,0,0.8), 2px 0 rgba(0,0,255,0.8); }
}
@keyframes rgbBorder {
  0%, 100% { border-color: rgba(255,0,0,0.6); box-shadow: 0 0 15px rgba(255,0,0,0.3); }
  33% { border-color: rgba(0,255,0,0.6); box-shadow: 0 0 15px rgba(0,255,0,0.3); }
  66% { border-color: rgba(0,0,255,0.6); box-shadow: 0 0 15px rgba(0,0,255,0.3); }
}
@keyframes rgbColorShift {
  0%, 100% { background-color: rgba(255, 0, 0, 0.2); border-color: rgba(255, 0, 0, 0.6); box-shadow: 0 0 20px rgba(255, 0, 0, 0.4); }
  33% { background-color: rgba(0, 255, 0, 0.2); border-color: rgba(0, 255, 0, 0.6); box-shadow: 0 0 20px rgba(0, 255, 0, 0.4); }
  66% { background-color: rgba(0, 0, 255, 0.2); border-color: rgba(0, 0, 255, 0.6); box-shadow: 0 0 20px rgba(0, 0, 255, 0.4); }
}
@keyframes glitchEffect {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}
@keyframes glitchBackground {
  0%, 100% { background-position: 0 0; }
  25% { background-position: -5px -5px; }
  50% { background-position: 5px 5px; }
  75% { background-position: -5px 5px; }
}

.msg-bubble.theme-rose{
  background:linear-gradient(270deg,rgba(255,105,180,0.15),rgba(255,182,193,0.25),rgba(255,105,180,0.15));
  background-size: 200% 200%;
  border:1px solid rgba(255,105,180,0.4);
  box-shadow:0 0 20px rgba(255,105,180,0.2);
  animation: roseGradient 3s ease infinite
}
.msg-bubble.theme-rose.sent{
  background:linear-gradient(270deg,rgba(255,105,180,0.25),rgba(255,182,193,0.35),rgba(255,105,180,0.25));
  background-size: 200% 200%;
  border-color:rgba(255,105,180,0.6);
  animation: roseGradient 3s ease infinite
}
.msg-bubble.theme-confetti{
  background:linear-gradient(135deg,rgba(255,215,0,0.15) 0%,rgba(255,105,180,0.1) 100%);
  border:1px solid rgba(255,215,0,0.4);
  box-shadow:0 0 20px rgba(255,215,0,0.2);
  position:relative;
  overflow:hidden
}
.msg-bubble.theme-confetti::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle at 20% 30%,rgba(255,0,0,0.4) 2px,transparent 2px),
    radial-gradient(circle at 80% 20%,rgba(0,255,0,0.4) 2px,transparent 2px),
    radial-gradient(circle at 40% 70%,rgba(0,0,255,0.4) 2px,transparent 2px),
    radial-gradient(circle at 70% 80%,rgba(255,255,0,0.4) 2px,transparent 2px),
    radial-gradient(circle at 50% 50%,rgba(255,0,255,0.4) 2px,transparent 2px);
  background-size:40px 40px;
  opacity:0.6;
  pointer-events:none;
  animation: confettiFall 3s ease-in-out infinite
}
.msg-bubble.theme-confetti.sent{
  background:linear-gradient(135deg,rgba(255,215,0,0.25) 0%,rgba(255,105,180,0.2) 100%);
  border-color:rgba(255,215,0,0.6)
}
.msg-bubble.theme-neon{
  background:linear-gradient(135deg,rgba(0,255,127,0.15) 0%,rgba(0,255,255,0.1) 100%);
  border:1px solid rgba(0,255,127,0.6);
  animation: neonPulse 2s ease-in-out infinite
}
.msg-bubble.theme-neon.sent{
  background:linear-gradient(135deg,rgba(0,255,127,0.25) 0%,rgba(0,255,255,0.2) 100%);
  border-color:rgba(0,255,127,0.8);
  animation: neonPulse 2s ease-in-out infinite
}
.msg-bubble.theme-fire{
  background:linear-gradient(270deg,rgba(255,69,0,0.2),rgba(255,140,0,0.3),rgba(255,69,0,0.2));
  background-size:200% 200%;
  border:1px solid rgba(255,69,0,0.5);
  box-shadow:0 0 20px rgba(255,69,0,0.3);
  animation: flameFlicker 1s ease-in-out infinite
}
.msg-bubble.theme-fire.sent{
  background:linear-gradient(270deg,rgba(255,69,0,0.3),rgba(255,140,0,0.4),rgba(255,69,0,0.3));
  background-size:200% 200%;
  border-color:rgba(255,69,0,0.7);
  box-shadow:0 0 25px rgba(255,69,0,0.4);
  animation: flameFlicker 1s ease-in-out infinite
}
.msg-bubble.theme-aurora{
  background:linear-gradient(270deg,rgba(0,255,136,0.15),rgba(0,168,255,0.2),rgba(138,43,226,0.15),rgba(0,255,136,0.15));
  background-size: 300% 300%;
  border:1px solid rgba(0,255,136,0.4);
  box-shadow:0 0 20px rgba(0,255,136,0.2);
  animation: auroraShift 4s ease infinite
}
.msg-bubble.theme-aurora.sent{
  background:linear-gradient(270deg,rgba(0,255,136,0.25),rgba(0,168,255,0.3),rgba(138,43,226,0.25),rgba(0,255,136,0.25));
  background-size: 300% 300%;
  border-color:rgba(0,255,136,0.6);
  box-shadow:0 0 25px rgba(0,255,136,0.3);
  animation: auroraShift 4s ease infinite
}
.msg-bubble.theme-rgb{
  background:rgba(255, 0, 0, 0.2);
  border:2px solid rgba(255, 0, 0, 0.6);
  animation: rgbColorShift 2s linear infinite
}
.msg-bubble.theme-rgb.sent{
  background:rgba(255, 0, 0, 0.3);
  border:2px solid rgba(255, 0, 0, 0.8);
  animation: rgbColorShift 2s linear infinite
}
.msg-bubble.theme-glitch{
  background:linear-gradient(135deg,rgba(20,20,20,0.9) 0%,rgba(30,30,30,0.9) 100%);
  border:2px solid rgba(255,0,0,0.6);
  animation: glitchEffect 0.1s linear infinite, glitchBackground 0.5s linear infinite
}
.msg-bubble.theme-glitch.sent{
  background:linear-gradient(135deg,rgba(30,30,30,0.95) 0%,rgba(40,40,40,0.95) 100%);
  border:2px solid rgba(255,0,0,0.8);
  animation: glitchEffect 0.1s linear infinite, glitchBackground 0.5s linear infinite
}
.msg-bubble.theme-glitch .msg-text{
  animation: rgbGlitch 0.15s linear infinite
}
.msg-bubble.theme-swing{
  background:linear-gradient(135deg,rgba(255,99,71,0.15) 0%,rgba(255,165,0,0.1) 100%);
  border:1px solid rgba(255,99,71,0.4);
  box-shadow:0 0 20px rgba(255,99,71,0.2);
  animation: swingCombined 4s linear infinite
}
.msg-bubble.theme-swing.sent{
  background:linear-gradient(135deg,rgba(255,99,71,0.25) 0%,rgba(255,165,0,0.2) 100%);
  border-color:rgba(255,99,71,0.6);
  box-shadow:0 0 25px rgba(255,99,71,0.3);
  animation: swingCombined 4s linear infinite
}

.msg-footer{display:flex;align-items:center;gap:5px;margin-top:4px}
.msg-time{font-size:10px;color:var(--text-muted)}
.msg-edited{font-size:10px;color:var(--text-muted);font-style:italic}
.msg-status{display:inline-flex;align-items:center;color:var(--text-muted);line-height:1}
.msg-status.seen{color:var(--brand)}
.msg-status .check2{margin-left:-4px}
.msg-reactions{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.reaction-chip{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:2px 7px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:3px;transition:var(--transition)}
.reaction-chip:hover{border-color:var(--brand)}
.reaction-chip.mine{background:var(--brand-glow);border-color:var(--brand)}
.date-sep{display:flex;align-items:center;gap:12px;margin:12px 0}
.date-sep-line{flex:1;height:1px;background:var(--border)}
.date-sep-text{font-size:12px;color:var(--text-muted);white-space:nowrap;padding:4px 12px;background:var(--bg-card);border-radius:12px;border:1px solid var(--border)}

/* ── VIP EMBED ── */
.vip-embed{
  background:linear-gradient(135deg,#1a1500 0%,#2a1f00 100%);
  border:1px solid rgba(255,209,102,0.35);
  border-radius:14px;overflow:hidden;max-width:320px;
  margin:4px 0;box-shadow:0 0 20px rgba(255,209,102,0.08)
}
.vip-embed-header{
  background:linear-gradient(90deg,#ffd166,#f4a261);
  padding:10px 14px;display:flex;align-items:center;gap:8px
}
.vip-embed-logo{width:20px;height:20px;border-radius:4px}
.vip-embed-badge{font-size:11px;font-weight:900;color:#1a0e00;letter-spacing:1px;text-transform:uppercase}
.vip-embed-body{padding:14px 14px 10px}
.vip-embed-title{font-size:15px;font-weight:800;color:#ffd166;margin-bottom:8px}
.vip-embed-desc{font-size:13px;color:#c8a060;line-height:1.5;margin-bottom:10px}
.vip-embed-perks{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.vip-embed-perks span{background:rgba(255,209,102,0.08);border:1px solid rgba(255,209,102,0.2);border-radius:20px;padding:3px 8px;font-size:11px;color:#ffd166;font-weight:600}
.vip-embed-btn{
  width:100%;padding:12px;
  background:linear-gradient(135deg,#ffd166,#f4a261);
  border:none;color:#1a0e00;font-weight:800;font-size:14px;
  font-family:inherit;cursor:pointer;transition:opacity 0.2s
}
.vip-embed-btn:disabled{opacity:.45;cursor:not-allowed;background:var(--bg-hover);color:var(--text-muted)}
.vip-embed-btn:hover:not(:disabled){opacity:.88}

/* ── CROQUETTE EMBED ── */
.croq-embed{
  background:linear-gradient(135deg,#0d1a0d 0%,#1a2a0d 100%);
  border:1px solid rgba(134,197,74,0.35);border-radius:14px;
  overflow:hidden;max-width:260px;margin:4px 0;
  box-shadow:0 0 16px rgba(134,197,74,0.06)
}
.croq-embed-header{background:linear-gradient(90deg,#86c54a,#4caf50);padding:8px 12px;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:900;color:#0d1a0d;letter-spacing:1px;text-transform:uppercase}
.croq-embed-body{padding:12px 14px}
.croq-embed-amount{font-size:24px;font-weight:900;color:#86c54a;margin-bottom:4px}
.croq-embed-desc{font-size:12px;color:#6a9048;line-height:1.5}

/* ── TYPING ── */
#typingBar{padding:4px 16px;font-size:12px;color:var(--text-muted);font-style:italic;min-height:20px;display:flex;align-items:center;gap:8px}
.typing-dots{display:flex;gap:3px}
.typing-dot{width:5px;height:5px;background:var(--brand);border-radius:50%;animation:typingBounce 1.2s infinite}
.typing-dot:nth-child(2){animation-delay:.2s}
.typing-dot:nth-child(3){animation-delay:.4s}
@keyframes typingBounce{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}}

/* ── INPUT AREA ── */
#inputArea{
  background:var(--bg-card);border-top:1px solid var(--border);
  padding:10px 14px;display:none;flex-direction:column;gap:8px;
  z-index:10;flex-shrink:0;
  padding-bottom:calc(10px + var(--safe-bottom))
}
#inputArea.visible{display:flex}
#replyPreview{background:var(--bg-input);border-radius:8px;border-left:3px solid var(--brand);padding:8px 10px;display:none;align-items:center;gap:8px}
#replyPreview.active{display:flex}
.reply-prev-content{flex:1;min-width:0}
.reply-prev-name{font-size:12px;color:var(--brand);font-weight:700}
.reply-prev-text{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#editPreview{background:var(--bg-input);border-radius:8px;border-left:3px solid var(--brand-light);padding:8px 10px;display:none;align-items:center;gap:8px}
#editPreview.active{display:flex}
.edit-prev-label{font-size:12px;color:var(--brand-light);font-weight:700;flex:1}
.close-preview-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;line-height:1;padding:2px;transition:var(--transition)}
.close-preview-btn:hover{color:var(--text-primary)}
.paste-preview{flex:1;animation:slideUp .15s ease}
.paste-preview-inner{
  display:flex;align-items:center;gap:10px;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:12px;padding:6px 10px;
  height:52px;overflow:hidden
}
.paste-preview img{height:36px;width:auto;border-radius:6px;object-fit:contain;flex-shrink:0}
.paste-preview-label{font-size:12px;color:var(--text-muted);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.input-row{display:flex;gap:10px;align-items:flex-end}
#msgInput{
  flex:1;padding:10px 16px;background:var(--bg-input);
  border:1px solid var(--border);border-radius:24px;
  color:var(--text-primary);font-size:14px;font-family:inherit;
  resize:none;max-height:120px;line-height:1.5;transition:var(--transition)
}
#msgInput::placeholder{color:var(--text-muted)}
#msgInput:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
#sendBtn{
  background:var(--brand);border:none;color:white;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:var(--transition)
}
#sendBtn:hover{background:var(--brand-dark);transform:scale(1.05)}
#sendBtn:active{transform:scale(.95)}
#sendBtn:disabled{opacity:.5;cursor:default;transform:none}

/* ── MEDIA BUTTON ── */
.media-btn-wrap{position:relative}
#mediaBtn{
  background:transparent;border:1px solid var(--border);color:var(--text-secondary);
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:var(--transition)
}
#mediaBtn:hover{background:var(--bg-hover);color:var(--brand);border-color:var(--brand)}
.media-menu{
  position:absolute;bottom:100%;left:0;margin-bottom:8px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:6px;z-index:9000;
  min-width:170px;box-shadow:var(--shadow);
  display:none;flex-direction:column;gap:2px;
  animation:scaleIn .12s ease
}
.media-menu.open{display:flex}
.media-menu button{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border:none;background:transparent;
  color:var(--text-secondary);font-size:13px;font-weight:600;
  font-family:inherit;cursor:pointer;border-radius:6px;
  transition:background .15s,color .15s;white-space:nowrap
}
.media-menu button:hover{background:var(--bg-hover);color:var(--text-primary)}
.media-menu button svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}

/* ── VOICE RECORDING ── */
.voice-btn{
  background:transparent;border:1px solid var(--border);color:var(--text-secondary);
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .2s
}
.voice-btn:hover{background:var(--bg-hover);color:var(--brand);border-color:var(--brand)}
.voice-btn.recording{background:rgba(237,66,69,.15);color:var(--danger);border-color:var(--danger);animation:pulse-red 1s infinite}
@keyframes pulse-red{0%,100%{box-shadow:0 0 0 0 rgba(237,66,69,.4)}50%{box-shadow:0 0 0 6px rgba(237,66,69,0)}}
.voice-bar{flex:1;animation:slideUp .15s ease}
.voice-bar-inner{
  display:flex;align-items:center;gap:8px;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:24px;padding:6px 10px;
  height:44px
}
.voice-cancel-btn,.voice-send-btn{
  background:transparent;border:none;color:var(--text-muted);
  width:32px;height:32px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .15s
}
.voice-cancel-btn:hover{background:rgba(237,66,69,.15);color:var(--danger)}
.voice-send-btn:hover{background:rgba(67,181,129,.15);color:var(--online)}
.voice-rec-indicator{display:flex;align-items:center;gap:6px;white-space:nowrap}
.voice-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:blink-red 1s infinite}
@keyframes blink-red{0%,100%{opacity:1}50%{opacity:.3}}
#voiceTimer{font-size:13px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;min-width:36px}
.voice-wave{display:flex;align-items:center;gap:2px;flex:1;height:28px}
.voice-wave span{
  display:block;width:3px;border-radius:2px;background:var(--brand);
  height:10px;animation:voice-wave .8s ease-in-out infinite
}
.voice-wave span:nth-child(2){height:18px;animation-delay:.1s}
.voice-wave span:nth-child(3){height:24px;animation-delay:.2s}
.voice-wave span:nth-child(4){height:14px;animation-delay:.3s}
.voice-wave span:nth-child(5){height:20px;animation-delay:.4s}
@keyframes voice-wave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}

/* ── VOICE MESSAGE RENDERING ── */
.msg-voice{display:flex;align-items:center;gap:10px;padding:8px 12px;min-width:180px}
.voice-play-btn{
  width:36px;height:36px;border-radius:50%;border:none;
  background:var(--brand);color:white;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:transform .15s
}
.voice-play-btn:hover{transform:scale(1.1)}
.voice-play-btn.playing{background:var(--danger)}
.voice-play-btn svg{margin-left:2px}
.voice-track{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.voice-track-progress{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;border-radius:2px;
  background:var(--bg-active);outline:none;cursor:pointer
}
.voice-track-progress::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:12px;height:12px;border-radius:50%;
  background:var(--brand);cursor:pointer
}
.voice-track-time{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums}

/* ── MEDIA MESSAGE RENDERING ── */
.msg-image{display:flex;margin-top:4px}
.msg-file{display:flex;margin-top:4px}
.file-link{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:var(--bg-hover);
  border-radius:8px;text-decoration:none;
  color:var(--text-primary);transition:background .15s;
  word-break:break-all;cursor:pointer
}
.file-link:hover{background:var(--bg-active)}
.file-link svg{flex-shrink:0}
.file-name{font-size:13px;font-weight:600}
.msg-contact{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;margin-top:4px;
  background:var(--bg-hover);border-radius:8px
}
.msg-contact svg{flex-shrink:0;margin-top:2px}
.contact-details{display:flex;flex-direction:column;gap:2px}
.contact-name{font-weight:700;font-size:14px;color:var(--text-primary)}
.contact-tel,.contact-email{font-size:13px;color:var(--text-secondary)}
.contact-tel{font-size:13px;color:var(--text-secondary)}

/* ── CONTEXT MENU ── */
.ctx-menu{position:fixed;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:6px 0;z-index:9000;min-width:180px;box-shadow:var(--shadow);animation:scaleIn .12s ease}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.ctx-reactions{display:flex;justify-content:center;gap:6px;padding:8px 10px;flex-wrap:wrap}
.ctx-emoji{font-size:20px;cursor:pointer;padding:4px 6px;border-radius:6px;transition:transform .15s;user-select:none}
.ctx-emoji:hover{transform:scale(1.15);background:var(--bg-hover)}
.ctx-divider{height:1px;background:var(--border);margin:6px 0}
.ctx-item{padding:9px 16px;font-size:13px;font-weight:600;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;gap:10px;font-family:inherit;transition:background .1s}
.ctx-item:hover{background:var(--bg-hover)}
.ctx-item.danger{color:var(--danger)}

/* ══════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:5000;display:none;justify-content:center;align-items:center;padding:20px;backdrop-filter:blur(4px)}
.modal-overlay.active{display:flex}
.modal-box{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:24px;width:100%;max-width:420px;box-shadow:var(--shadow);animation:slideUp .2s ease;max-height:90dvh;overflow-y:auto}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.modal-box h3{font-size:18px;font-weight:800;margin-bottom:6px}
.modal-subtitle{font-size:13px;color:var(--text-muted);margin-bottom:18px}
.modal-input{width:100%;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);font-size:14px;font-family:inherit;margin-bottom:14px;transition:var(--transition)}
.modal-input:focus{outline:none;border-color:var(--brand)}
.modal-feedback{font-size:13px;margin-bottom:14px;min-height:18px}
.modal-feedback.error{color:var(--danger)}
.modal-feedback.success{color:var(--online)}
.modal-file-info{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:10px;margin-bottom:14px}
.modal-checkbox{display:flex;align-items:center;gap:10px;margin-bottom:18px;cursor:pointer;font-size:13px;color:var(--text-secondary)}
.modal-checkbox input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:var(--brand)}
.modal-actions{display:flex;gap:10px}
.btn-secondary{flex:1;padding:10px;background:transparent;border:1px solid var(--border);color:var(--text-secondary);border-radius:10px;cursor:pointer;font-size:14px;font-weight:700;font-family:inherit;transition:var(--transition)}
.btn-secondary:hover{background:var(--bg-hover);color:var(--text-primary)}
.btn-primary{flex:1;padding:10px;background:var(--brand);border:none;color:white;border-radius:10px;cursor:pointer;font-size:14px;font-weight:700;font-family:inherit;transition:var(--transition)}
.btn-primary:hover{background:var(--brand-dark)}
.btn-danger{flex:1;padding:10px;background:var(--danger);border:none;color:white;border-radius:10px;cursor:pointer;font-size:14px;font-weight:700;font-family:inherit;transition:var(--transition)}

/* ── PROFILE MODAL ── */
#profileModal{z-index:6000;user-select:none}
.profile-box{background:var(--bg-card);border-radius:20px;border:1px solid var(--border);width:100%;max-width:420px;max-height:90dvh;overflow-y:auto;box-shadow:var(--shadow);animation:slideUp .2s ease}
.profile-banner{height:150px;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);background-size:cover;background-position:center;border-radius:20px 20px 0 0;position:relative}
.profile-close-btn{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.3);border:none;color:white;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.profile-close-btn:hover{background:rgba(0,0,0,.5)}
.profile-avatar-wrap{display:flex;justify-content:center;margin-top:-36px;position:relative;z-index:1}
.profile-avatar-lg{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:white;border:4px solid var(--bg-card);position:relative;overflow:hidden}
.profile-avatar-lg img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.profile-body-content{padding:14px 20px 20px;text-align:center}
.profile-name-row{font-size:20px;font-weight:800;color:var(--text-primary);display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.profile-wouaff-id{font-size:13px;color:var(--text-muted);margin-bottom:12px}
.profile-badges-row{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.badge-chip{background:var(--bg-input);border:1px solid var(--border);border-radius:20px;padding:4px 10px;font-size:12px;display:flex;align-items:center;gap:5px;color:var(--text-secondary)}
.badge-chip img{width:14px;height:14px;object-fit:contain}
.profile-section{text-align:left;background:var(--bg-input);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:10px}
.profile-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--brand);margin-bottom:6px}
.profile-section-val{font-size:14px;color:var(--text-primary);line-height:1.6}
.profile-action-row{display:flex;gap:10px;padding:0 20px 20px;flex-wrap:wrap}
.profile-status-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:middle}

/* ── CROQUETTES modal ── */
#croqModal .modal-box{max-width:360px}
.croq-remaining-bar{background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.croq-remaining-label{font-size:12px;color:var(--text-muted);font-weight:600}
.croq-remaining-val{font-size:18px;font-weight:900;color:#86c54a}
.croq-tier-preview{background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:13px;color:var(--text-muted);display:flex;align-items:center;gap:8px}
.croq-amount-btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.croq-amount-btn{
  flex:1;min-width:50px;padding:8px;
  background:var(--bg-input);border:1px solid var(--border);
  color:var(--text-secondary);border-radius:8px;
  cursor:pointer;font-size:14px;font-weight:700;font-family:inherit;
  transition:var(--transition)
}
.croq-amount-btn:hover,.croq-amount-btn.selected{background:rgba(134,197,74,0.1);border-color:#86c54a;color:#86c54a}

/* ── VIP INVITE Modal ── */
#vipInviteModal .modal-box{max-width:380px;padding:0;overflow:hidden;border-radius:16px}

/* ── GROUP MODALS ── */
.group-member-list{display:flex;flex-direction:column;gap:6px;max-height:200px;overflow-y:auto;margin-bottom:14px}
.group-member-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:var(--bg-input);border:1px solid var(--border)}
.group-member-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-dark));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:white;flex-shrink:0;overflow:hidden}
.group-member-avatar img{width:100%;height:100%;object-fit:cover}
.group-member-info{flex:1;min-width:0}
.group-member-name{font-size:13px;font-weight:700;color:var(--text-primary)}
.group-member-role{font-size:11px;color:var(--text-muted)}
.contact-checkbox-list{display:flex;flex-direction:column;gap:6px;max-height:200px;overflow-y:auto;margin-bottom:14px}
.contact-checkbox-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:var(--bg-input);border:1px solid var(--border);cursor:pointer;transition:var(--transition)}
.contact-checkbox-item:hover{border-color:var(--brand)}
.contact-checkbox-item input{accent-color:var(--brand);width:16px;height:16px}
.group-info-box{background:var(--bg-card);border-radius:20px;border:1px solid var(--border);width:100%;max-width:480px;max-height:90dvh;overflow-y:auto;box-shadow:var(--shadow);animation:slideUp .2s ease}
.group-banner{height:120px;background:linear-gradient(135deg,#5b3dce,#3d1f8f);background-size:cover;background-position:center;border-radius:20px 20px 0 0;position:relative;display:flex;align-items:center;justify-content:center;font-size:48px}
.group-info-content{padding:16px 20px 20px}
.group-info-name{font-size:20px;font-weight:800;color:var(--text-primary);margin-bottom:4px}
.group-info-desc{font-size:13px;color:var(--text-muted);margin-bottom:16px}
.group-members-section{margin-top:12px}
.group-members-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--brand);margin-bottom:8px}
.group-member-entry{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-light)}
.group-member-entry:last-child{border-bottom:none}
.gme-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-dark));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:white;flex-shrink:0;overflow:hidden}
.gme-avatar img{width:100%;height:100%;object-fit:cover}
.gme-info{flex:1;min-width:0}
.gme-name{font-size:13px;font-weight:700;color:var(--text-primary)}
.gme-role{font-size:11px;color:var(--text-muted)}
.role-badge{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:6px;margin-left:4px}
.role-badge.owner{background:rgba(95,112,180,.2);color:#5f70b4}
.role-badge.admin{background:rgba(67,181,129,.2);color:var(--online)}
.gme-actions{display:flex;gap:4px}
.gme-action-btn{background:transparent;border:1px solid var(--border);color:var(--text-secondary);border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:var(--transition)}
.gme-action-btn:hover{border-color:var(--brand);color:var(--brand)}
.gme-action-btn.danger:hover{border-color:var(--danger);color:var(--danger)}
.invite-link-box{background:var(--bg-input);border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:8px;margin-top:10px}
.invite-link-text{flex:1;font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.invite-copy-btn{background:var(--brand);color:white;border:none;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}

/* ── JOIN GROUP ── */
#joinGroupOverlay{position:fixed;inset:0;background:var(--bg-deep);z-index:99999;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px;background-image:url("/assets/logo/background_black.png");background-size:cover;background-position:center}
#joinGroupOverlay.active{display:flex}
.join-card{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:32px 28px;max-width:400px;width:100%;text-align:center;box-shadow:var(--shadow)}
.join-group-banner{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#5b3dce,#3d1f8f);display:flex;align-items:center;justify-content:center;font-size:36px;margin:0 auto 16px}
.join-group-banner img{width:100%;height:100%;border-radius:50%;object-fit:cover}

/* ── TOAST ── */
.toast{position:fixed;bottom:calc(24px + var(--bnav-h));left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);padding:10px 20px;border-radius:10px;font-size:13px;font-weight:600;z-index:99999;opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap;max-width:calc(100vw - 40px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{border-color:var(--online);color:var(--online)}
.toast.error{border-color:var(--danger);color:var(--danger)}

/* ══════════════════════════════════════════════════════════
   STORIES BAR
══════════════════════════════════════════════════════════ */
#storiesBar{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;overflow-x:auto;overflow-y:hidden;
  flex-shrink:0;border-bottom:1px solid var(--border);
  background:var(--bg-base);scrollbar-width:none;
  -ms-overflow-style:none;
}
#storiesBar::-webkit-scrollbar{display:none}
.story-avatar-wrap{
  display:flex;flex-direction:column;align-items:center;
  gap:4px;cursor:pointer;flex-shrink:0;
  min-width:64px;max-width:72px;
  transition:opacity .15s;user-select:none;
  position:relative;
}
.story-avatar-wrap:hover{opacity:.8}
.story-avatar-wrap:active{opacity:.6}
.story-avatar{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;color:white;
  position:relative;overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
}
.story-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.story-avatar.story-ring{
  padding:3px;
  background:conic-gradient(#F97B3B, #FF6B35, #F97B3B, #e06628, #F97B3B);
}
.story-avatar.story-ring::before{
  content:'';position:absolute;inset:3px;border-radius:50%;
  background:var(--bg-base);z-index:0
}
.story-avatar.story-ring img,.story-avatar.story-ring span{
  position:relative;z-index:1;border-radius:50%;
  width:100%;height:100%;object-fit:cover;
}
.story-avatar.story-ring span{
  display:flex;align-items:center;justify-content:center;
  background:var(--brand);
}
.story-avatar.story-ring.viewed{
  background:var(--text-muted);
}
.story-add-avatar{
  border:2px dashed var(--brand);
  background:transparent;cursor:pointer;
  transition:all .15s;
}
.story-add-avatar:hover{background:var(--brand-glow)}
.story-add-icon{
  font-size:24px;font-weight:300;color:var(--brand);
  line-height:1;
}
.story-name{
  font-size:11px;color:var(--text-secondary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:64px;text-align:center;
}
@media(max-width:700px){
  #storiesBar{padding:8px 12px}
  .story-avatar{width:52px;height:52px;font-size:18px}
  .story-name{font-size:10px;max-width:60px}
  .story-add-icon{font-size:22px}
}

/* ══════════════════════════════════════════════════════════
   STORY VIEWER
══════════════════════════════════════════════════════════ */
#storyViewer{
  position:fixed;inset:0;z-index:99999;
  background:#000;display:none;
  flex-direction:column;user-select:none;
  -webkit-user-select:none;
}
#storyViewer.active{display:flex}
.story-viewer-top{
  position:absolute;top:0;left:0;right:0;z-index:10;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,transparent 100%);
  padding:calc(12px + var(--safe-top)) 12px 20px;
}
.story-progress-row{
  display:flex;gap:3px;margin-bottom:10px;
}
.story-progress-segment{
  flex:1;height:2px;border-radius:2px;
  background:rgba(255,255,255,.3);overflow:hidden;
}
.story-progress-fill{
  height:100%;width:0%;border-radius:2px;
  background:#fff;transition:none;
}
.story-progress-fill.done{width:100%}
.story-viewer-info{
  display:flex;align-items:center;justify-content:space-between;
}
.story-viewer-user{display:flex;align-items:center;gap:10px}
.story-viewer-avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--brand);display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:800;
  color:white;overflow:hidden;flex-shrink:0;
}
.story-viewer-avatar img{width:100%;height:100%;object-fit:cover}
.story-viewer-details{display:flex;flex-direction:column;gap:1px}
.story-viewer-name{font-size:13px;font-weight:700;color:#fff}
.story-viewer-time{font-size:11px;color:rgba(255,255,255,.6)}
.story-viewer-close{
  background:rgba(255,255,255,.15);border:none;color:#fff;
  width:32px;height:32px;border-radius:50%;
  cursor:pointer;font-size:18px;display:flex;
  align-items:center;justify-content:center;
  transition:background .15s;flex-shrink:0;
}
.story-viewer-close:hover{background:rgba(255,255,255,.25)}
.story-viewer-media{
  flex:1;display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.story-viewer-media img{
  width:100%;height:100%;object-fit:contain;
}
.story-viewer-tap-left,.story-viewer-tap-right{
  position:absolute;top:0;bottom:80px;width:30%;
  z-index:5;cursor:pointer;
}
.story-viewer-tap-left{left:0}
.story-viewer-tap-right{right:0}

/* ══════════════════════════════════════════════════════════
   STORY PREVIEW MODAL
══════════════════════════════════════════════════════════ */
.story-preview-box{
  background:var(--bg-card);border-radius:16px;
  border:1px solid var(--border);width:100%;max-width:420px;
  overflow:hidden;box-shadow:var(--shadow);animation:slideUp .2s ease;
}
.story-preview-img-wrap{
  width:100%;max-height:60vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#000;
}
.story-preview-img-wrap img{
  width:100%;height:auto;max-height:60vh;object-fit:contain;
}
.story-preview-actions{
  display:flex;gap:10px;padding:16px 20px;
}

/* ══════════════════════════════════════════════════════════
   BOTTOM NAV (mobile)
══════════════════════════════════════════════════════════ */
#bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  height:var(--bnav-h);
  padding-bottom:var(--safe-bottom);
  background:rgba(28,35,51,0.96);
  border-top:1px solid var(--border);
  z-index:300;
  flex-direction:row;align-items:stretch;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.bnav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;background:transparent;border:none;
  color:var(--text-muted);font-size:10px;font-weight:700;font-family:inherit;
  cursor:pointer;padding:8px 0 0;transition:color 0.15s;
  -webkit-tap-highlight-color:transparent;position:relative;
}
.bnav-item svg{width:22px;height:22px;fill:currentColor}
.bnav-item.active{color:var(--brand)}
.bnav-item.active::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--brand);border-radius:0 0 2px 2px}
.bnav-badge{position:absolute;top:4px;right:calc(50% - 18px);background:var(--danger);color:white;font-size:9px;font-weight:800;padding:1px 4px;border-radius:6px;display:none}
.bnav-badge.show{display:block}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE MOBILE
══════════════════════════════════════════════════════════ */
@media(max-width:700px){
  :root{--sidebar-w:100vw}
  #bottom-nav{display:flex}
  #topbar{display:none !important}
  #app{padding-bottom:var(--bnav-h)}
  #sidebar{
    position:absolute;inset:0;
    transform:translateX(0);
    transition:transform .28s cubic-bezier(0.4,0,0.2,1);
    z-index:200;width:100%;
    padding-top:calc(var(--safe-top) + 10px)
  }
  #sidebar.hidden{transform:translateX(-100%)}
  #chatArea{
    position:absolute;inset:0;
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(0.4,0,0.2,1);
    z-index:200;
    padding-top:var(--safe-top)
  }
  #chatArea.visible{transform:translateX(0)}
  .chat-back-btn{display:flex}
  #main{height:100dvh}
  .msg-wrapper{max-width:85%}
  .ctx-menu{min-width:160px;max-width:calc(100vw - 32px)}
  .toast{bottom:calc(var(--bnav-h) + 16px)}
  .sidebar-actions-row{display:none}
  .sidebar-header{display:none}
  #bottom-nav.search-visible{
    border-top:none;
    padding-bottom:0;
  }
  #inputArea.visible{
    padding-bottom:calc(10px + var(--safe-bottom));
  }
  #app.no-bnav{
    padding-bottom:0;
  }
}
@media(min-width:701px){
  #sendBtn{display:flex}
}
@media(min-width:1200px){
  .msg-text{font-size:17px}
  .msg-bubble{padding:13px 18px}
  .msg-wrapper{max-width:65%}
  .msg-avatar{width:40px;height:40px;font-size:18px}
  .msg-avatar-placeholder{width:40px;height:40px}
  #msgInput{padding:12px 18px;font-size:15px}
  .chat-topbar{height:calc(var(--header-h) + 4px)}
  .topbar-name{font-size:17px}
}

/* swipe hint */
.swipe-hint{position:fixed;bottom:calc(80px + var(--bnav-h));left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);color:white;font-size:12px;padding:6px 14px;border-radius:20px;pointer-events:none;opacity:0;transition:opacity .3s;z-index:9999}
.swipe-hint.show{opacity:1}

/* Loading spinner */
.spinner{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--brand);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Loading overlay */
.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-card);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10000}
.loading-overlay.hidden{display:none}
.loading-logo{width:60px;height:60px;margin-bottom:20px;animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:0.8}}
.loading-text{color:var(--text-muted);font-size:14px;margin-top:10px}

/* Skeleton loading */
.skeleton{background:linear-gradient(90deg,var(--bg-input) 25%,var(--border) 50%,var(--bg-input) 75%);background-size:200% 100%;animation:skeleton 1.5s ease-in-out infinite;border-radius:4px}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-text{height:14px;margin-bottom:8px}
.skeleton-avatar{width:40px;height:40px;border-radius:50%}
.skeleton-message{height:40px;margin-bottom:8px;border-radius:8px}

/* Loading states for lists */
.loading-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.loading-item .skeleton-avatar{flex-shrink:0}
.loading-item .skeleton-content{flex:1}
.loading-item .skeleton-text{width:60%}
.loading-item .skeleton-text:last-child{width:40%}

/* ══════════════════════════════════════════════════════════
   CLASS ALIASES FOR REACT COMPONENTS
   (old HTML used IDs, new React uses class names)
══════════════════════════════════════════════════════════ */

/* ── Sidebar ── */
.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--bg-base);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:transform var(--transition);z-index:50}
.sidebar-search{position:relative;padding:12px 14px;background:var(--bg-card);border-bottom:1px solid var(--border)}
.sidebar-search input{width:100%;padding:9px 12px 9px 34px;background:var(--bg-input);border:1px solid var(--border);border-radius:24px;color:var(--text-primary);font-size:14px;font-family:inherit;transition:var(--transition)}
.sidebar-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
.sidebar-actions{display:flex;gap:6px;padding:0 14px 10px}
.sidebar-icon-btn{background:transparent;border:1px solid var(--border);color:var(--text-secondary);width:36px;height:36px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition)}
.sidebar-icon-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--brand)}
.sidebar-user{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;border-radius:8px;padding:2px;transition:background .15s}
.sidebar-user:hover{background:var(--bg-hover)}
.sidebar-user-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--brand),var(--brand-dark));display:flex;align-items:center;justify-content:center;color:white;font-size:14px;font-weight:800;position:relative;overflow:hidden}
.sidebar-user-avatar img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.sidebar-user-info{flex:1;min-width:0;display:flex;flex-direction:column}
.sidebar-user-name{font-size:14px;font-weight:700;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Pending (class aliases for IDs) ── */
.pending-container{background:rgba(249,123,59,.06);border-bottom:1px solid var(--border);overflow:hidden}
.pending-header{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:var(--transition)}
.pending-header:hover{background:var(--brand-glow)}
.pending-list{overflow:hidden}
.pending-item-header{display:flex;justify-content:space-between;margin-bottom:3px}
.pending-item-name{font-size:13px;font-weight:700;color:var(--text-primary)}
.pending-item-text{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Stories bar ── */
.stories-bar{display:flex;gap:10px;overflow-x:auto;padding:12px 14px 8px;border-bottom:1px solid var(--border);flex-shrink:0;scrollbar-width:none}
.stories-bar::-webkit-scrollbar{display:none}

/* ── Conversations list ── */
.conversations-list{flex:1;overflow-y:auto;border-radius:10px;margin:10px;padding:4px;display:flex;flex-direction:column;gap:2px}

/* ── Chat area (class alias for #chatArea) ── */
.chat-area{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-deep);position:relative}
.chat-area::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 20% 20%,rgba(249,123,59,.03) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(249,123,59,.02) 0%,transparent 50%);pointer-events:none;z-index:0}
.chat-area.visible{display:flex}
.chat-placeholder{user-select:none;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--text-muted);z-index:1;padding:40px;text-align:center;background-image:url("/assets/logo/background_black.png");background-size:cover;background-position:center;background-repeat:no-repeat}
.chat-placeholder-content{display:flex;flex-direction:column;align-items:center;gap:12px}
.chat-topbar{height:var(--header-h);background:var(--bg-card);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:12px;flex-shrink:0;z-index:10}
.topbar-name{font-size:15px;font-weight:700;color:var(--text-primary);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Messages (class alias for #messages) ── */
.messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:2px;z-index:1;background-image:url("/assets/logo/background_black.png");background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;transition:filter .3s ease,opacity .3s ease}
.msg-input-area{background:var(--bg-card);border-top:1px solid var(--border);padding:10px 14px;display:flex;flex-direction:row;gap:10px;align-items:flex-end;z-index:10;flex-shrink:0;padding-bottom:calc(10px + var(--safe-bottom))}

/* ── Send button ── */
.send-btn{background:var(--brand);border:none;color:white;width:42px;height:42px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition)}
.send-btn:hover{background:var(--brand-dark);transform:scale(1.05)}
.send-btn:active{transform:scale(.95)}
.send-btn:disabled{opacity:.5;cursor:default;transform:none}

/* ── Typing indicator ── */
.typing-indicator{padding:4px 16px 8px;font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px;z-index:1}

/* ── Reply preview (class aliases for #replyPreview / #editPreview) ── */
.reply-preview{background:var(--bg-input);border-radius:8px;border-left:3px solid var(--brand);padding:8px 10px;display:none;align-items:center;gap:8px}
.reply-preview.active{display:flex}
.reply-preview-content{flex:1;min-width:0}
.reply-preview-name{font-size:11px;font-weight:700;color:var(--brand);margin-bottom:2px}
.reply-preview-text{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-preview-close{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:2px;border-radius:4px;font-size:16px;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.reply-preview-close:hover{color:var(--danger)}
.edit-preview{background:var(--bg-input);border-radius:8px;border-left:3px solid var(--brand-light);padding:8px 10px;display:none;align-items:center;gap:8px}
.edit-preview.active{display:flex}

/* ── Check marks for sent/seen ── */
.check1{width:14px;height:14px;color:var(--text-muted);flex-shrink:0}

/* ── Profile panel (class aliases for #profilePanel / .pp-*) ── */
.profile-panel{width:320px;min-width:320px;background:var(--bg-card);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;animation:slideInRight .2s ease;z-index:40}
@media(max-width:900px){.profile-panel{position:fixed;right:0;top:0;bottom:0;z-index:5000;width:300px;box-shadow:-4px 0 20px rgba(0,0,0,.4)}}
@media(max-width:500px){.profile-panel{width:100%;border-left:none}}
.profile-panel-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:15px;color:var(--text-primary)}
.profile-panel-close{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.profile-panel-close:hover{background:var(--bg-hover);color:var(--text-primary)}
.profile-panel-body{flex:1;overflow-y:auto;text-align:center}
.profile-panel-banner{height:120px;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);background-size:cover;background-position:center;flex-shrink:0;position:relative}
.profile-panel-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:white;border:4px solid var(--bg-card);position:relative;overflow:hidden;margin:0 auto 8px}
.profile-panel-name{font-size:18px;font-weight:800;color:var(--text-primary);display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:0 14px}
.profile-panel-id{font-size:12px;color:var(--text-muted);margin:2px 0 8px}
.profile-panel-status{font-size:13px;color:var(--text-muted);margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:5px}
.profile-panel-bio{font-size:13px;color:var(--text-primary);line-height:1.5;padding:0 14px;margin-top:8px}
.profile-panel-email{font-size:13px;color:var(--text-muted);margin-top:8px;padding:0 14px}

/* ── Logout button ── */
.logout-btn{background:transparent;border:1px solid transparent;color:var(--text-muted);padding:10px 12px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:700;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;transition:var(--transition);width:100%;margin-top:8px}
.logout-btn:hover{background:rgba(237,66,69,.12);color:var(--danger);border-color:var(--danger)}

/* ── Story viewer ── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.story-viewer-overlay{position:fixed;inset:0;background:#000;z-index:10000;display:flex;flex-direction:column;animation:fadeIn .2s ease}
.story-viewer-header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:14px 16px;z-index:10;background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,transparent 100%)}
.story-viewer-close{background:transparent;border:none;color:#fff;cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;transition:var(--transition)}
.story-viewer-image{flex:1;background-size:contain;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center}
.story-tap-hint-left,.story-tap-hint-right{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:40%;height:100%;cursor:pointer}
.story-tap-hint-left{left:0}
.story-tap-hint-right{right:0}

/* ── Auth / Login page ── */
.auth-page{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:20px;background:var(--bg-deep);background-image:url("/assets/logo/background_black.png");background-size:cover;background-position:center;background-repeat:no-repeat}
.auth-page .card{background:var(--bg-card);border-radius:12px;border:1px solid var(--border);padding:24px 28px;width:100%;max-width:380px}
.auth-page .header-container{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:4px}
.auth-page .logo{width:32px;height:32px}
.auth-page h1{font-size:30px;font-weight:800;margin-bottom:0;color:var(--text-primary);font-family:'Arial',sans-serif}
.auth-page .subtitle{font-size:13px;color:var(--text-muted);margin-bottom:20px;text-align:center;margin-top:10px}
.auth-page .field{margin-bottom:14px}
.auth-page label{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px}
.auth-page input{width:100%;padding:10px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-size:14px}
.auth-page input:focus{outline:none;border-color:var(--brand)}
.auth-page input:disabled{opacity:.6;cursor:not-allowed}
.auth-page .password-wrapper{position:relative}
.auth-page .password-wrapper input{padding-right:40px}
.auth-page .toggle-password{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-muted);padding:0;display:flex;align-items:center;justify-content:center}
.auth-page .toggle-password:hover{color:var(--text-primary)}
.auth-page .toggle-password svg{width:18px;height:18px}
.auth-page .password-requirements{font-size:11px;color:var(--text-muted);margin-top:6px;padding:8px;background:var(--bg-input);border-radius:4px;border:1px solid var(--border)}
.auth-page .password-requirements ul{list-style:none;padding:0;margin:0}
.auth-page .password-requirements li{margin-bottom:3px;display:flex;align-items:center;gap:6px}
.auth-page .password-requirements li:last-child{margin-bottom:0}
.auth-page .password-requirements li.valid{color:#4ade80}
.auth-page .password-requirements li.invalid{color:var(--text-muted)}
.auth-page .password-requirements li::before{content:"○";font-size:10px}
.auth-page .password-requirements li.valid::before{content:"●"}
.auth-page .forgot-password{text-align:right;margin-top:8px}
.auth-page .forgot-password button{background:none;border:none;color:var(--brand);cursor:pointer;font-size:12px;text-decoration:underline;padding:0}
.auth-page .forgot-password button:hover{color:var(--brand-light)}
.auth-page .btn{width:100%;padding:10px;border-radius:6px;border:none;cursor:pointer;font-size:14px;font-weight:600;margin-top:4px}
.auth-page .btn-primary{background:var(--brand);color:var(--bg-deep)}
.auth-page .btn-primary:hover{background:var(--brand-dark)}
.auth-page .btn-primary:disabled{opacity:.6;cursor:not-allowed}
.auth-page .btn-secondary{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}
.auth-page .btn-secondary:hover{background:var(--bg-hover);color:var(--text-primary)}
.auth-page .divider{display:flex;align-items:center;margin:20px 0;color:var(--text-muted);font-size:12px}
.auth-page .divider::before,.auth-page .divider::after{content:"";flex:1;height:1px;background:var(--border)}
.auth-page .divider span{padding:0 10px}
.auth-page .btn-google{width:100%;padding:10px;border-radius:6px;border:1px solid #dadce0;cursor:pointer;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#333}
.auth-page .btn-google:hover{background:#f8f9fa;border-color:#c2c8d0}
.auth-page .btn-google:disabled{opacity:.6;cursor:not-allowed}
.auth-page .btn-google svg{width:18px;height:18px}
.auth-page .toggle{margin-top:12px;text-align:center;font-size:13px;color:var(--text-muted)}
.auth-page .toggle button{background:none;border:none;color:var(--brand);cursor:pointer;font-size:13px;text-decoration:underline}
.auth-page #loginError{display:none}
.auth-page #loginError.visible{display:block}
.auth-page #resetModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;align-items:center;justify-content:center;padding:20px}
.auth-page #resetModal.active{display:flex}
.auth-page .modal-card{background:var(--bg-card);border-radius:12px;border:1px solid var(--border);padding:24px 28px;width:100%;max-width:380px}
.auth-page .modal-title{font-size:20px;font-weight:600;margin-bottom:8px;color:var(--text-primary)}
.auth-page .modal-desc{font-size:13px;color:var(--text-muted);margin-bottom:16px;line-height:1.5}
.auth-page .modal-actions{display:flex;gap:10px;margin-top:16px}
.auth-page #resetError{display:none;margin-top:12px;font-size:13px;color:#ea4335;padding:10px 12px;background:rgba(234,67,53,.1);border:1px solid #ea4335;border-radius:6px;animation:shake .3s ease-in-out}
.auth-page #resetError.visible{display:block}
.auth-page #resetSuccess{display:none;margin-top:12px;font-size:13px;color:#4ade80;padding:10px 12px;background:rgba(74,222,128,.1);border:1px solid #4ade80;border-radius:6px}
.auth-page #resetSuccess.visible{display:block}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ── Settings page ── */
.settings-page{display:flex;height:100dvh;background:var(--bg-deep);background-image:url("/assets/logo/background_black.png");background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden}
.settings-layout{display:flex;flex:1;overflow:hidden}
.settings-sidebar{width:260px;min-width:260px;background:var(--bg-card);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;overflow:hidden;z-index:100;transition:transform var(--transition)}
.settings-sidebar .sidebar-top{padding:22px 20px 16px;border-bottom:1px solid var(--border-light,var(--border));flex-shrink:0}
.settings-sidebar .sidebar-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.settings-sidebar .sidebar-brand-icon{width:34px;height:34px;border-radius:10px;overflow:hidden;flex-shrink:0}
.settings-sidebar .sidebar-brand-icon img{width:100%;height:100%;object-fit:cover}
.settings-sidebar .sidebar-brand-name{font-size:19px;font-weight:900;color:var(--text-primary);letter-spacing:-0.4px}
.settings-sidebar .sidebar-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted)}
.settings-menu{flex:1;overflow-y:auto;padding:10px}
.menu-group-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);padding:10px 10px 6px}
.settings-menu-item{padding:10px 12px;cursor:pointer;display:flex;align-items:center;gap:11px;color:var(--text-secondary);font-size:14px;font-weight:600;transition:all var(--transition);border-radius:var(--radius-sm);margin-bottom:2px;position:relative}
.settings-menu-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.settings-menu-item.active{background:var(--brand-glow);color:var(--brand)}
.settings-menu-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--brand);border-radius:0 3px 3px 0}
.settings-menu-item .menu-icon{width:18px;height:18px;fill:currentColor;flex-shrink:0;opacity:.85}
.settings-footer{padding:14px 10px;border-top:1px solid var(--border-light,var(--border));flex-shrink:0;display:flex;flex-direction:column;gap:8px}
.settings-footer .back-btn-settings,.settings-footer .support-btn{width:100%;padding:10px 12px;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;font-size:13px;font-weight:700;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;transition:all var(--transition)}
.settings-footer .back-btn-settings:hover,.settings-footer .support-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--brand)}
.settings-footer .logout-btn-settings{width:100%;padding:10px 12px;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:700;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;transition:all var(--transition)}
.settings-footer .logout-btn-settings:hover{background:rgba(237,66,69,.12);color:var(--danger);border-color:var(--danger)}
.settings-content{flex:1;display:flex}
.settings-main{flex:1;overflow-y:auto;padding:28px 24px;min-width:0}
.settings-preview{width:340px;min-width:340px;background:var(--bg-card);border-left:1px solid var(--border);padding:24px 20px;overflow-y:auto;position:sticky;top:0;height:100dvh;align-self:flex-start}
.preview-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted);margin-bottom:18px;text-align:center}
.settings-panel{display:none}
.settings-panel.active{display:block;animation:panelIn .2s ease}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.panel-header{margin-bottom:24px}
.panel-header h2{font-size:22px;font-weight:900;color:var(--text-primary);letter-spacing:-0.4px;margin-bottom:4px}
.panel-header p{font-size:13px;color:var(--text-muted)}
.settings-section{background:var(--bg-card);border-radius:var(--radius,14px);border:1px solid var(--border);padding:22px;margin-bottom:16px;box-shadow:0 1px 12px rgba(0,0,0,.15)}
.section-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;color:var(--brand);margin-bottom:18px;display:flex;align-items:center;gap:8px}
.section-title svg{width:14px;height:14px;fill:currentColor;opacity:.8}
.settings-item{margin-bottom:18px}
.settings-item:last-child{margin-bottom:0}
.settings-item label{display:block;color:var(--text-secondary);font-size:12px;font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:.6px}
.settings-item input,.settings-item textarea{width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text-primary);font-size:14px;font-family:inherit;font-weight:500;transition:border-color var(--transition),box-shadow var(--transition);outline:none}
.settings-item textarea{resize:vertical;min-height:90px;line-height:1.5}
.settings-item input:focus,.settings-item textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
.settings-item input[readonly],.settings-item input:disabled{background:var(--bg-input);cursor:not-allowed;color:var(--text-muted);opacity:.7}
.input-with-icon{position:relative}
.input-with-icon input{padding-right:44px}
.input-copy-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:5px;display:flex;align-items:center;transition:color var(--transition)}
.input-copy-btn:hover{color:var(--brand)}
.input-copy-btn svg{width:16px;height:16px;fill:currentColor}
.info-text{color:var(--text-muted);font-size:12px;margin-top:6px;line-height:1.6;display:flex;align-items:flex-start;gap:6px}
.info-text svg{width:13px;height:13px;fill:currentColor;flex-shrink:0;margin-top:1px}
.save-btn{width:100%;padding:13px 24px;background:var(--brand);border:none;border-radius:var(--radius-sm);color:#fff;font-size:14px;font-weight:800;font-family:inherit;cursor:pointer;transition:background var(--transition),transform var(--transition),box-shadow var(--transition);display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:.2px}
.save-btn:hover{background:var(--brand-dark, #e06628);transform:translateY(-1px);box-shadow:0 4px 18px rgba(249,123,59,.3)}
.save-btn:active{transform:translateY(0)}
.save-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.save-btn .btn-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:white;border-radius:50%;animation:spin .7s linear infinite;display:none}
.save-btn.loading .btn-spinner{display:block}
.save-btn.loading .btn-text{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
#settingsMsg{margin-top:12px;font-size:13px;font-weight:600;text-align:center;padding:10px 14px;border-radius:var(--radius-xs, 6px);display:none}
#settingsMsg.success{display:block;background:rgba(62,207,126,.1);color:var(--online);border:1px solid rgba(62,207,126,.2)}
#settingsMsg.error{display:block;background:rgba(237,66,69,.1);color:var(--danger);border:1px solid rgba(237,66,69,.25)}
.vip-badge{background:linear-gradient(135deg,#ffd166,#f4a261);color:#1a0e00;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;display:inline-flex;align-items:center;gap:4px}
.vip-locked{position:relative;border-radius:var(--radius-sm);overflow:hidden}
.vip-locked input,.vip-locked textarea{opacity:.25;pointer-events:none;filter:blur(1.5px)}
.vip-locked::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,209,102,.06) 50%,transparent 100%);animation:shimmer 3s infinite;pointer-events:none;z-index:2;border-radius:var(--radius-sm)}
.vip-locked::after{content:'';position:absolute;inset:0;background:rgba(10,13,20,.55);backdrop-filter:blur(2px);border-radius:var(--radius-sm);pointer-events:none;z-index:3}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.vip-lock-overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;z-index:10;pointer-events:none;padding:10px}
.vip-locked .vip-lock-overlay{display:flex}
.vip-lock-text{color:var(--vip-gold);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;text-shadow:0 0 12px rgba(255,209,102,.6);display:flex;align-items:center;gap:6px}
.vip-lock-badge{width:20px;height:20px;object-fit:contain;animation:vpulse 2s infinite;filter:drop-shadow(0 0 8px rgba(255,209,102,.5))}
@keyframes vpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.message-theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;margin-top:8px}
.theme-option{cursor:pointer;border-radius:var(--radius-sm);overflow:hidden;transition:var(--transition);border:2px solid transparent}
.theme-option:hover{transform:translateY(-2px)}
.theme-option.selected{border-color:var(--brand);box-shadow:0 0 0 3px rgba(249,123,59,.2)}
.theme-preview{padding:12px;display:flex;align-items:flex-start;gap:8px;min-height:70px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm)}
.theme-avatar{width:32px;height:32px;border-radius:50%;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text-secondary);flex-shrink:0}
.theme-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.theme-bubble{flex:1;max-width:150px}
.theme-bubble.msg-bubble{padding:10px 14px;border-radius:16px;background:var(--bg-input)}
.theme-bubble .msg-text{font-size:13px;line-height:1.4}
.theme-bubble.msg-bubble.theme-rose{background:linear-gradient(270deg,rgba(255,105,180,.15),rgba(255,182,193,.25),rgba(255,105,180,.15));background-size:200% 200%;border:1px solid rgba(255,105,180,.4);box-shadow:0 0 20px rgba(255,105,180,.2);animation:roseGradient 3s ease infinite}
.theme-bubble.msg-bubble.theme-confetti{background:linear-gradient(135deg,rgba(255,215,0,.15) 0%,rgba(255,105,180,.1) 100%);border:1px solid rgba(255,215,0,.4);box-shadow:0 0 20px rgba(255,215,0,.2);position:relative;overflow:hidden}
.theme-bubble.msg-bubble.theme-confetti::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 20% 30%,rgba(255,0,0,.4) 2px,transparent 2px),radial-gradient(circle at 80% 20%,rgba(0,255,0,.4) 2px,transparent 2px),radial-gradient(circle at 40% 70%,rgba(0,0,255,.4) 2px,transparent 2px),radial-gradient(circle at 70% 80%,rgba(255,255,0,.4) 2px,transparent 2px),radial-gradient(circle at 50% 50%,rgba(255,0,255,.4) 2px,transparent 2px);background-size:40px 40px;opacity:.6;pointer-events:none;animation:confettiFall 3s ease-in-out infinite}
.theme-bubble.msg-bubble.theme-neon{background:linear-gradient(135deg,rgba(0,255,127,.15) 0%,rgba(0,255,255,.1) 100%);border:1px solid rgba(0,255,127,.6);animation:neonPulse 2s ease-in-out infinite}
.theme-bubble.msg-bubble.theme-fire{background:linear-gradient(270deg,rgba(255,69,0,.2),rgba(255,140,0,.3),rgba(255,69,0,.2));background-size:200% 200%;border:1px solid rgba(255,69,0,.5);box-shadow:0 0 20px rgba(255,69,0,.3);animation:flameFlicker 1s ease-in-out infinite}
.theme-bubble.msg-bubble.theme-aurora{background:linear-gradient(270deg,rgba(0,255,136,.15),rgba(0,168,255,.2),rgba(138,43,226,.15),rgba(0,255,136,.15));background-size:300% 300%;border:1px solid rgba(0,255,136,.4);box-shadow:0 0 20px rgba(0,255,136,.2);animation:auroraShift 4s ease infinite}
.theme-bubble.msg-bubble.theme-rgb{background:rgba(255,0,0,.2);border:2px solid rgba(255,0,0,.6);animation:rgbColorShift 2s linear infinite}
.theme-bubble.msg-bubble.theme-glitch{background:linear-gradient(135deg,rgba(20,20,20,.9) 0%,rgba(30,30,30,.9) 100%);background-size:10px 10px;border:2px solid rgba(255,0,0,.6);animation:glitchEffect .1s linear infinite,glitchBackground .5s linear infinite}
.theme-bubble.msg-bubble.theme-glitch .msg-text{animation:rgbGlitch .15s linear infinite}
.theme-bubble.msg-bubble.theme-swing{background:linear-gradient(135deg,rgba(255,99,71,.15) 0%,rgba(255,165,0,.1) 100%);border:1px solid rgba(255,99,71,.4);box-shadow:0 0 20px rgba(255,99,71,.2);animation:swingCombined 4s linear infinite}
.theme-name{padding:8px;text-align:center;font-size:12px;font-weight:600;color:var(--text-secondary);background:var(--bg-card)}
@keyframes roseGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes confettiFall{0%{transform:translateY(-10px) rotate(0deg);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(10px) rotate(360deg);opacity:0}}
@keyframes neonPulse{0%,100%{box-shadow:0 0 20px rgba(0,255,127,.3),inset 0 0 10px rgba(0,255,127,.1)}50%{box-shadow:0 0 35px rgba(0,255,127,.5),inset 0 0 20px rgba(0,255,127,.2)}}
@keyframes auroraShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes flameFlicker{0%,100%{background-position:0% 50%;box-shadow:0 0 20px rgba(255,69,0,.4)}25%{background-position:25% 50%;box-shadow:0 0 30px rgba(255,140,0,.5)}50%{background-position:50% 50%;box-shadow:0 0 25px rgba(255,69,0,.45)}75%{background-position:75% 50%;box-shadow:0 0 35px rgba(255,140,0,.55)}}
@keyframes swingCombined{0%,50%{transform:skewX(0deg) rotate(0deg)}2.5%{transform:skewX(12deg) rotate(8deg)}5%{transform:skewX(0deg) rotate(0deg)}7.5%{transform:skewX(-12deg) rotate(-8deg)}10%{transform:skewX(0deg) rotate(0deg)}12.5%{transform:skewX(12deg) rotate(8deg)}15%{transform:skewX(0deg) rotate(0deg)}17.5%{transform:skewX(-12deg) rotate(-8deg)}20%{transform:skewX(0deg) rotate(0deg)}22.5%{transform:skewX(12deg) rotate(8deg)}25%{transform:skewX(0deg) rotate(0deg)}27.5%{transform:skewX(-12deg) rotate(-8deg)}30%{transform:skewX(0deg) rotate(0deg)}32.5%{transform:skewX(12deg) rotate(8deg)}35%{transform:skewX(0deg) rotate(0deg)}37.5%{transform:skewX(-12deg) rotate(-8deg)}40%{transform:skewX(0deg) rotate(0deg)}42.5%{transform:skewX(12deg) rotate(8deg)}45%{transform:skewX(0deg) rotate(0deg)}47.5%{transform:skewX(-12deg) rotate(-8deg)}100%{transform:skewX(0deg) rotate(0deg)}}
@keyframes rgbGlitch{0%,100%{text-shadow:2px 0 rgba(255,0,0,.8),-2px 0 rgba(0,0,255,.8)}25%{text-shadow:-2px 0 rgba(0,255,0,.8),2px 0 rgba(255,0,0,.8)}50%{text-shadow:2px 0 rgba(0,0,255,.8),-2px 0 rgba(0,255,0,.8)}75%{text-shadow:-2px 0 rgba(255,0,0,.8),2px 0 rgba(0,0,255,.8)}}
@keyframes rgbColorShift{0%,100%{background-color:rgba(255,0,0,.2);border-color:rgba(255,0,0,.6);box-shadow:0 0 20px rgba(255,0,0,.4)}33%{background-color:rgba(0,255,0,.2);border-color:rgba(0,255,0,.6);box-shadow:0 0 20px rgba(0,255,0,.4)}66%{background-color:rgba(0,0,255,.2);border-color:rgba(0,0,255,.6);box-shadow:0 0 20px rgba(0,0,255,.4)}}
@keyframes glitchEffect{0%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}100%{transform:translate(0)}}
@keyframes glitchBackground{0%,100%{background-position:0 0}25%{background-position:-5px -5px}50%{background-position:5px 5px}75%{background-position:-5px 5px}}
.badge-selector{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:10px;margin-top:14px}
.badge-option{aspect-ratio:1;padding:14px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:border-color var(--transition),background var(--transition),transform var(--transition);cursor:default}
.badge-option:hover{border-color:var(--brand);background:var(--brand-glow);transform:translateY(-2px)}
.badge-option-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.badge-option-icon img{width:100%;height:100%;object-fit:contain}
.badge-option-name{font-size:10px;font-weight:700;color:var(--text-muted);text-align:center;line-height:1.3}
.no-badges{text-align:center;padding:32px 20px;color:var(--text-muted);font-size:13px}
.no-badges-icon{font-size:32px;margin-bottom:10px}
.account-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.account-stat{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;text-align:center}
.account-stat-val{font-size:20px;font-weight:900;color:var(--text-primary);display:block}
.account-stat-lbl{font-size:11px;color:var(--text-muted);font-weight:600;margin-top:2px;display:block}
.danger-zone-section{border-color:rgba(237,66,69,.3)!important}
.danger-zone-section .section-title{color:var(--danger)!important}
.danger-zone-section .save-btn.danger-btn{background:var(--danger)!important}
.danger-zone-section .save-btn.danger-btn:hover{box-shadow:0 4px 18px rgba(237,66,69,.4)!important}
.delete-modal{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center}
.delete-modal.visible{display:flex}
.delete-modal-box{background:var(--bg-card);border:1px solid rgba(237,66,69,.3);border-radius:var(--radius);padding:28px;max-width:400px;width:90%;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.delete-modal-box h3{font-size:18px;font-weight:900;color:var(--danger);margin-bottom:8px}
.delete-modal-box p{font-size:13px;color:var(--text-secondary);line-height:1.6;margin-bottom:16px}
.delete-modal-box input{width:100%;padding:11px 14px;border:1px solid rgba(237,66,69,.4);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text-primary);font-size:14px;font-weight:700;text-align:center;outline:none;margin-bottom:16px;font-family:inherit}
.delete-modal-box input:focus{border-color:var(--danger);box-shadow:0 0 0 3px rgba(237,66,69,.15)}
.delete-modal-actions{display:flex;gap:10px}
.delete-modal-actions button{flex:1;padding:11px;border-radius:var(--radius-sm);font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:var(--transition)}
.delete-modal-actions .cancel-btn{border:1px solid var(--border);background:transparent;color:var(--text-secondary)}
.delete-modal-actions .cancel-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.delete-modal-actions .confirm-btn{border:none;background:var(--danger);color:#fff}
.delete-modal-actions .confirm-btn:disabled{opacity:.5;cursor:not-allowed}
.delete-modal-actions .confirm-btn .btn-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:white;border-radius:50%;animation:spin .7s linear infinite;display:none}
.delete-modal-actions .confirm-btn.loading .btn-spinner{display:inline-block}
.delete-modal-actions .confirm-btn.loading .btn-text{display:none}
#deleteError{color:var(--danger);font-size:12px;font-weight:600;margin-top:10px;display:none}
#deleteError.visible{display:block}
.img-preview-chip{display:none;align-items:center;gap:8px;margin-top:8px;padding:6px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs, 6px);font-size:12px;color:var(--text-secondary)}
.img-preview-chip.visible{display:flex}
.img-preview-chip img{width:28px;height:28px;border-radius:4px;object-fit:cover}
.img-preview-chip.avatar-preview img{border-radius:50%}
.cooldown-message{margin-top:8px;display:none;align-items:center;gap:7px;background:rgba(249,123,59,.08);border:1px solid rgba(249,123,59,.2);border-radius:var(--radius-xs, 6px);padding:7px 10px;font-size:12px;font-weight:600;color:var(--brand-light)}
.cooldown-message.visible{display:flex}
.cooldown-message svg{width:13px;height:13px;stroke:var(--brand);flex-shrink:0}
.mfa-status-dot{width:12px;height:12px;border-radius:50%;background:var(--text-muted);flex-shrink:0}
.mfa-status-dot.on{background:var(--online);box-shadow:0 0 8px rgba(62,207,126,.4)}
.mfa-factor-item{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs, 6px);padding:8px 12px;font-size:13px;display:flex;align-items:center;gap:8px;color:var(--text-primary)}
.mfa-factor-item svg{width:16px;height:16px;fill:var(--online);flex-shrink:0}
.mfa-action-btn{padding:8px 16px;border:none;border-radius:var(--radius-xs, 6px);font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:background var(--transition),transform var(--transition)}
.mfa-action-btn:hover{transform:translateY(-1px)}
.mfa-action-btn.enable{background:var(--brand);color:#fff}
.mfa-action-btn.enable:hover{background:var(--brand-dark)}
.mfa-action-btn.disable{background:rgba(237,66,69,.12);color:var(--danger);border:1px solid var(--danger)}
.mfa-action-btn.disable:hover{background:rgba(237,66,69,.2)}
#mfaEnrollFlow{padding:8px 0}
#mfaEnrollLoading{text-align:center;padding:20px}
#mfaEnrollLoading .btn-spinner{display:inline-block;width:24px;height:24px;border-width:3px}
#mfaTotpSetup{display:none}
#mfaTotpSetup.visible{display:block}
#mfaQrCode{width:180px;height:180px;border-radius:var(--radius-sm);background:#fff;padding:8px;display:block;margin:0 auto 16px}
#mfaSecretKey{font-family:monospace;font-size:12px}
.mfa-error{color:var(--danger);font-size:12px;font-weight:600;margin-top:8px;display:none}
.mfa-error.visible{display:block}
.toast-settings{position:fixed;top:20px;right:20px;z-index:99999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast-settings .toast-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 18px;font-size:13px;font-weight:600;color:var(--text-primary);box-shadow:0 4px 24px rgba(0,0,0,.4);display:flex;align-items:center;gap:10px;animation:toastInSettings .25s ease forwards;max-width:320px}
.toast-settings .toast-item.success{border-color:var(--online);color:var(--online)}
.toast-settings .toast-item.error{border-color:var(--danger);color:var(--danger)}
.toast-settings .toast-item.info{border-color:var(--brand);color:var(--brand)}
.toast-settings .toast-item.out{animation:toastOutSettings .25s ease forwards}
@keyframes toastInSettings{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOutSettings{to{opacity:0;transform:translateY(-8px) scale(.96)}}
#mobile-nav-toggle,#sidebar-backdrop{display:none}
@media (max-width:1100px){.settings-preview{width:290px;min-width:290px;padding:20px 14px}}
@media (max-width:900px){.settings-preview{display:none}.settings-sidebar{width:230px;min-width:230px}}
@media (max-width:680px){.settings-sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);z-index:150;width:78%;max-width:300px;min-width:0}.settings-sidebar.open{transform:translateX(0)}#sidebar-backdrop.visible{display:block}#mobile-nav-toggle{display:flex}.settings-main{padding:60px 16px 24px}.panel-header h2{font-size:18px}}
@media (max-width:400px){.badge-selector{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.account-stat-row{grid-template-columns:1fr}}

/* ── Admin page ── */
.admin-page{display:flex;flex-direction:column;height:100dvh;background:var(--bg-deep);background-image:url("/assets/logo/background_black.png");background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden}
.admin-layout{display:flex;flex:1;overflow:hidden}
.admin-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100dvh;padding:20px;text-align:center}
.admin-spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--brand);border-radius:50%;animation:adminSpin .8s linear infinite}
@keyframes adminSpin{to{transform:rotate(360deg)}}
.admin-muted{font-size:13px;color:var(--text-muted)}
.admin-forbidden-icon{font-size:48px;margin-bottom:4px}
.admin-forbidden-title{font-size:22px;font-weight:900;color:var(--text-primary);letter-spacing:-.4px;margin:0}

/* Sidebar */
.admin-sidebar{width:250px;min-width:250px;background:var(--bg-card);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.admin-sidebar-top{padding:20px 18px 12px;border-bottom:1px solid var(--border-light,var(--border));flex-shrink:0}
.admin-sidebar-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.admin-sidebar-icon{width:30px;height:30px;border-radius:8px;overflow:hidden;flex-shrink:0}
.admin-sidebar-icon img{width:100%;height:100%;object-fit:cover}
.admin-sidebar-name{font-size:17px;font-weight:900;color:var(--text-primary);letter-spacing:-.3px}
.admin-sidebar-title{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.1px;color:var(--text-muted);margin-bottom:12px}
.admin-self-card{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);margin-top:4px}
.admin-self-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,var(--brand),#c084fc);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff}
.admin-self-avatar img{width:100%;height:100%;object-fit:cover}
.admin-self-info{flex:1;min-width:0}
.admin-self-name{font-size:13px;font-weight:700;color:var(--text-primary);line-height:1.2}
.admin-self-uid{font-size:10px;color:var(--text-muted)}
.admin-self-badge{font-size:9px;font-weight:800;color:var(--brand);background:var(--brand-glow);padding:2px 8px;border-radius:20px;letter-spacing:.3px}
.admin-menu{flex:1;overflow-y:auto;padding:8px}
.admin-menu-item{padding:10px 12px;cursor:pointer;display:flex;align-items:center;gap:11px;color:var(--text-secondary);font-size:14px;font-weight:600;transition:all var(--transition);border-radius:var(--radius-sm);margin-bottom:2px;position:relative}
.admin-menu-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.admin-menu-item.active{background:var(--brand-glow);color:var(--brand)}
.admin-menu-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--brand);border-radius:0 3px 3px 0}
.admin-menu-icon{width:18px;height:18px;flex-shrink:0;opacity:.85;font-size:16px;line-height:1}
.admin-sidebar-footer{padding:12px 10px;border-top:1px solid var(--border-light,var(--border));flex-shrink:0;display:flex;flex-direction:column;gap:6px}
.admin-back-btn,.admin-logout-btn{width:100%;padding:9px 12px;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;font-size:12px;font-weight:700;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px;transition:all var(--transition)}
.admin-back-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--brand)}
.admin-logout-btn{border-color:transparent;color:var(--text-muted)}
.admin-logout-btn:hover{background:rgba(237,66,69,.12);color:var(--danger);border-color:var(--danger)}

/* Main area */
.admin-main{flex:1;overflow-y:auto;padding:28px 24px;min-width:0;max-width:800px}
.admin-panel{display:none}
.admin-panel.active{display:block;animation:panelIn .2s ease}
.admin-panel-header{margin-bottom:20px}
.admin-panel-header h2{font-size:20px;font-weight:900;color:var(--text-primary);letter-spacing:-.3px;margin:0 0 3px}
.admin-panel-header p{font-size:13px;color:var(--text-muted);margin:0}

/* Stats grid */
.admin-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.admin-stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:18px;text-align:center}
.admin-stat-value{font-size:28px;font-weight:900;color:var(--text-primary);line-height:1.1}
.admin-stat-online{color:var(--online)}
.admin-stat-label{font-size:12px;color:var(--text-muted);font-weight:600;margin-top:6px}

/* Buttons */
.admin-actions-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.admin-btn{padding:10px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;border:none;transition:all var(--transition);display:inline-flex;align-items:center;gap:6px}
.admin-btn-primary{background:var(--brand);color:var(--bg-deep)}
.admin-btn-primary:hover{background:var(--brand-dark);transform:translateY(-1px);box-shadow:0 4px 14px rgba(249,123,59,.25)}
.admin-btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.admin-btn-secondary{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}
.admin-btn-secondary:hover{background:var(--bg-hover);color:var(--text-primary)}
.admin-btn-warning{background:rgba(255,209,102,.15);color:#ffd166;border:1px solid rgba(255,209,102,.3)}
.admin-btn-warning:hover{background:rgba(255,209,102,.25)}
.admin-btn-danger{background:rgba(237,66,69,.15);color:var(--danger);border:1px solid rgba(237,66,69,.3)}
.admin-btn-danger:hover{background:rgba(237,66,69,.25)}
.admin-btn-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:adminSpin .7s linear infinite}

/* User list */
.admin-user-list{display:flex;flex-direction:column;gap:6px;max-height:500px;overflow-y:auto}
.admin-user-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all var(--transition)}
.admin-user-item:hover{background:var(--bg-hover);border-color:var(--brand)}
.admin-user-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,var(--brand),#c084fc);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff}
.admin-user-avatar img{width:100%;height:100%;object-fit:cover}
.admin-user-info{flex:1;min-width:0}
.admin-user-name{font-size:13px;font-weight:700;color:var(--text-primary)}
.admin-user-id{font-size:11px;color:var(--text-muted)}
.admin-user-uid{font-size:10px;color:var(--text-muted);font-family:monospace}

/* Search */
.admin-search-row{display:flex;gap:8px;margin-bottom:16px}
.admin-input{padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text-primary);font-size:14px;font-family:inherit;font-weight:500;transition:border-color var(--transition);outline:none;flex:1}
.admin-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
.admin-textarea{resize:vertical;min-height:70px;line-height:1.5}
.admin-field{margin-bottom:14px}
.admin-field label{display:block;color:var(--text-secondary);font-size:11px;font-weight:700;margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}

/* Messages / Alerts */
.admin-msg{font-size:13px;font-weight:600;padding:10px 14px;border-radius:8px;margin-top:10px;background:rgba(62,207,126,.1);color:var(--online);border:1px solid rgba(62,207,126,.2)}
.admin-msg-error{background:rgba(237,66,69,.1);color:var(--danger);border-color:rgba(237,66,69,.25)}

/* Cards */
.admin-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:14px}
.admin-card-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--brand);margin-bottom:14px;display:flex;align-items:center;gap:7px}
.admin-card-danger{border-color:rgba(237,66,69,.25)}

/* Profile result card */
.admin-profile-section{animation:panelIn .2s ease}
.admin-profile-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:14px}
.admin-profile-banner{height:80px;background-size:cover;background-position:center}
.admin-profile-card-body{padding:20px;display:flex;flex-direction:column;align-items:center;gap:6px}
.admin-profile-avatar-wrap{width:68px;height:68px;border-radius:50%;overflow:hidden;flex-shrink:0;margin-top:-44px;border:3px solid var(--bg-card);background:var(--bg-card)}
.admin-profile-avatar-img{width:100%;height:100%;object-fit:cover;display:block}
.admin-profile-avatar-fallback{width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,var(--brand),#c084fc);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#fff}
.admin-profile-name{font-size:18px;font-weight:800;color:var(--text-primary);line-height:1.2}
.admin-profile-handle{font-size:12px;color:var(--text-muted);font-weight:600}
.admin-profile-uid{font-size:10px;color:var(--text-muted);font-family:monospace;background:var(--bg-input);padding:2px 8px;border-radius:4px}
.admin-profile-bio{font-size:13px;color:var(--text-secondary);text-align:center;line-height:1.5;margin:4px 0;word-break:break-word;white-space:pre-wrap}
.admin-profile-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.admin-badge-chip{display:flex;align-items:center;gap:4px;padding:3px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:20px;font-size:11px;font-weight:600;color:var(--text-secondary)}
.admin-badge-chip img{width:16px;height:16px;border-radius:50%;object-fit:cover}
.staff-chip{background:var(--brand-glow);border-color:var(--brand);color:var(--brand)}

/* Badge selector grid */
.admin-badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.admin-badge-opt{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all var(--transition);font-size:13px;font-weight:600;color:var(--text-secondary)}
.admin-badge-opt:hover{border-color:var(--brand);background:var(--bg-hover)}
.admin-badge-opt.selected{border-color:var(--brand);background:var(--brand-glow);color:var(--brand)}
.admin-badge-opt img{width:20px;height:20px;border-radius:50%;object-fit:cover}

/* Toasts */
.admin-toasts{position:fixed;top:20px;right:20px;z-index:99999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.admin-toast{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 18px;font-size:13px;font-weight:600;color:var(--text-primary);box-shadow:0 4px 24px rgba(0,0,0,.4);display:flex;align-items:center;gap:10px;animation:adminToastIn .25s ease forwards;max-width:320px}
.admin-toast-success{border-color:var(--online);color:var(--online)}
.admin-toast-error{border-color:var(--danger);color:var(--danger)}
.admin-toast-info{border-color:var(--brand);color:var(--brand)}
@keyframes adminToastIn{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Responsive */
@media (max-width:800px){.admin-sidebar{width:220px;min-width:220px}.admin-main{padding:20px 14px}}
@media (max-width:600px){.admin-layout{flex-direction:column}.admin-sidebar{width:100%;min-width:0;height:auto;max-height:56px;overflow:hidden;border-right:none;border-bottom:1px solid var(--border)}.admin-sidebar-top{padding:10px 14px;display:flex;align-items:center;gap:12px;flex-direction:row;border-bottom:none}.admin-sidebar-brand{margin-bottom:0}.admin-sidebar-title,.admin-self-card,.admin-menu,.admin-sidebar-footer{display:none}.admin-main{padding:16px}.admin-stats-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:400px){.admin-stats-grid{grid-template-columns:1fr}.admin-badge-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Public Profile Page (@username) ── */
.profile-page{display:flex;align-items:center;justify-content:center;min-height:100dvh;background:var(--bg-deep);background-image:url("/assets/logo/background_black.png");background-size:cover;background-position:center;background-repeat:no-repeat;padding:20px}
.profile-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;width:100%;max-width:380px}
.profile-spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--brand);border-radius:50%;animation:profileSpin .8s linear infinite}
@keyframes profileSpin{to{transform:rotate(360deg)}}
.profile-state-text{font-size:13px;color:var(--text-muted);text-align:center}
.profile-error-code{font-size:48px;font-weight:800;color:var(--brand)}
.profile-error-link{color:var(--brand);text-decoration:none;font-weight:600;font-size:14px;margin-top:4px}
.profile-error-link:hover{text-decoration:underline}
.profile-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:28px 24px;width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}
.pp-avatar-wrap{position:relative;width:80px;height:80px;border-radius:50%;overflow:hidden;flex-shrink:0;margin:0 auto}
.pp-avatar{width:100%;height:100%;object-fit:cover;display:block}
.pp-avatar-fallback{display:none;width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,var(--brand),#c084fc);align-items:center;justify-content:center;font-size:32px;font-weight:800;color:#fff}
.pp-avatar-fallback.active{display:flex}
.profile-name{font-size:20px;font-weight:800;text-align:center;line-height:1.2;color:var(--text-primary)}
.profile-handle{font-size:13px;color:var(--text-muted);font-weight:600;margin-top:-10px}
.profile-bio{font-size:13px;color:var(--text-secondary);text-align:center;line-height:1.5;word-break:break-word;white-space:pre-wrap}
.profile-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.profile-badge-icon{width:24px;height:24px;border-radius:50%;object-fit:cover}
.profile-actions{display:flex;gap:8px;width:100%;margin-top:4px}
.profile-btn{flex:1;padding:10px;border-radius:6px;font-size:13px;font-weight:700;text-align:center;text-decoration:none;transition:all .15s;font-family:inherit;cursor:pointer;border:none}
.profile-btn-primary{background:var(--brand);color:var(--bg-deep)}
.profile-btn-primary:hover{background:var(--brand-dark)}
.profile-btn-secondary{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}
.profile-btn-secondary:hover{background:var(--bg-input)}
.profile-login-note{font-size:12px;color:var(--text-muted);text-align:center}
.profile-login-note a{color:var(--brand);text-decoration:none;font-weight:600}
.profile-footer{font-size:11px;color:var(--text-muted);text-align:center;width:100%}
.profile-footer a{color:var(--brand);text-decoration:none;font-weight:600}
.profile-footer a:hover{text-decoration:underline}

.text-muted{color:var(--text-muted)}