/* ══════════════════════════════════════════════════════════
   ChatMess 2.5 — Premium UI
   Light: Ivory + Electric Violet  |  Dark: Deep Slate + Neon
   ══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;1,14..32,400&family=Sora:wght@700;800&display=swap');

/* ══ LIGHT THEME ══ */
:root {
  --primary:       #7C3AED;
  --primary-light: #9F67F8;
  --primary-dark:  #6025C9;
  --primary-glow:  rgba(124,58,237,0.28);
  --accent:        #06B6D4;
  --danger:        #EF4444;
  --success:       #10B981;
  --warning:       #F59E0B;

  --bg-app:      #F4F0FF;
  --bg-sidebar:  #FFFFFF;
  --bg-chat:     #FAF8FF;
  --bg-card:     #FFFFFF;
  --bg-input:    #F8F6FF;
  --bg-hover:    rgba(124,58,237,0.06);
  --bg-system:   rgba(124,58,237,0.07);
  --bg-msg-mine: linear-gradient(145deg, #7C3AED 0%, #9F67F8 100%);
  --bg-msg-other:#FFFFFF;

  --text-primary:   #18103A;
  --text-secondary: #4B4570;
  --text-muted:     #9490B5;

  --border:        rgba(124,58,237,0.10);
  --border-strong: rgba(124,58,237,0.18);

  --shadow-xs:      0 1px 3px rgba(124,58,237,0.07);
  --shadow-sm:      0 2px 10px rgba(124,58,237,0.09);
  --shadow-md:      0 4px 20px rgba(124,58,237,0.12);
  --shadow-lg:      0 8px 36px rgba(124,58,237,0.15);
  --shadow-xl:      0 20px 60px rgba(124,58,237,0.18);
  --shadow-plastic: 0 2px 12px rgba(124,58,237,0.10), inset 0 1px 0 rgba(255,255,255,0.95);
  --shadow-glass:   0 8px 32px rgba(124,58,237,0.10), inset 0 1px 0 rgba(255,255,255,0.90);
  --shadow-glow:    0 0 28px rgba(124,58,237,0.40);
  --shadow-btn:     0 2px 10px rgba(124,58,237,0.14), inset 0 1px 0 rgba(255,255,255,0.80);
  --shadow-btn-hover: 0 6px 22px rgba(124,58,237,0.22), inset 0 1px 0 rgba(255,255,255,0.90);

  --radius-xs:       6px;
  --radius-sm:       10px;
  --radius-md:       14px;
  --radius-lg:       20px;
  --radius-xl:       26px;
  --radius-full:     999px;
  --radius-msg:      20px;
  --radius-msg-tail: 5px;

  --transition:        all 0.22s cubic-bezier(0.4,0,0.2,1);
  --transition-fast:   all 0.14s ease;
  --transition-bounce: all 0.36s cubic-bezier(0.34,1.56,0.64,1);
  --sidebar-width:     300px;

  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Sora', sans-serif;
}

/* ══ DARK THEME ══ */
body.dark-mode {
  --primary:       #A78BFA;
  --primary-light: #C4B5FD;
  --primary-dark:  #7C3AED;
  --primary-glow:  rgba(167,139,250,0.35);
  --accent:        #22D3EE;

  --bg-app:      #0A0812;
  --bg-sidebar:  #0F0D1A;
  --bg-chat:     #0C0A18;
  --bg-card:     #16132A;
  --bg-input:    #1E1A30;
  --bg-hover:    rgba(167,139,250,0.08);
  --bg-system:   rgba(167,139,250,0.09);
  --bg-msg-mine: linear-gradient(145deg, #7C3AED 0%, #A78BFA 100%);
  --bg-msg-other:#1E1A30;

  --text-primary:   #EDE9FF;
  --text-secondary: #9E98C8;
  --text-muted:     #6560A0;

  --border:        rgba(167,139,250,0.13);
  --border-strong: rgba(167,139,250,0.22);

  --shadow-xs:      0 1px 3px rgba(0,0,0,0.40);
  --shadow-sm:      0 2px 10px rgba(0,0,0,0.45);
  --shadow-md:      0 4px 20px rgba(0,0,0,0.50);
  --shadow-lg:      0 8px 36px rgba(0,0,0,0.55);
  --shadow-xl:      0 20px 60px rgba(0,0,0,0.60);
  --shadow-plastic: 0 2px 12px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.05);
  --shadow-glass:   0 8px 32px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-glow:    0 0 32px rgba(167,139,250,0.45);
  --shadow-btn:     0 2px 10px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-btn-hover: 0 6px 22px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ══ RESET ══ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;font-family:var(--font-body);font-size:14px;color:var(--text-primary);background:var(--bg-app);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.hidden{display:none!important}

/* ══════════════════════════════════════════════════════════
   🚪 AUTH
   ══════════════════════════════════════════════════════════ */
.auth-overlay{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(145deg,#0A0812 0%,#180E38 40%,#3B1D8E 70%,#7C3AED 100%);
}
.auth-overlay::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 600px 500px at 15% 25%, rgba(124,58,237,0.4) 0%,transparent 65%),
    radial-gradient(ellipse 500px 400px at 85% 75%, rgba(6,182,212,0.25) 0%,transparent 65%),
    radial-gradient(ellipse 300px 300px at 60% 10%, rgba(167,139,250,0.2) 0%,transparent 65%);
  animation:auroraShift 10s ease-in-out infinite alternate;
}
@keyframes auroraShift{from{transform:scale(1) rotate(0deg)}to{transform:scale(1.12) rotate(4deg)}}

.auth-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.particle{position:absolute;border-radius:50%;background:rgba(255,255,255,0.22);animation:pFloat linear infinite}
@keyframes pFloat{0%{transform:translateY(105vh) rotate(0deg);opacity:0}8%{opacity:1}92%{opacity:0.7}100%{transform:translateY(-8vh) rotate(540deg);opacity:0}}

.auth-card{
  position:relative;z-index:10;
  width:430px;max-width:93vw;
  padding:42px 38px;border-radius:28px;
  background:rgba(255,255,255,0.10);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 32px 80px rgba(0,0,0,0.40),0 0 0 1px rgba(255,255,255,0.08),inset 0 1px 0 rgba(255,255,255,0.25);
  animation:authCardIn .65s cubic-bezier(.34,1.56,.64,1);
}
@keyframes authCardIn{from{opacity:0;transform:scale(.82) translateY(36px)}to{opacity:1;transform:scale(1) translateY(0)}}

.auth-logo{width:80px;height:80px;margin:0 auto 16px}
.logo-bubble{
  width:80px;height:80px;border-radius:22px;
  background:linear-gradient(145deg,#7C3AED,#A78BFA,#06B6D4);
  display:flex;align-items:center;justify-content:center;font-size:34px;color:#fff;
  box-shadow:0 16px 48px rgba(124,58,237,0.55),inset 0 2px 0 rgba(255,255,255,0.30);
  animation:logoBob 4s ease-in-out infinite;
}
@keyframes logoBob{0%,100%{transform:translateY(0) rotate(0deg)}40%{transform:translateY(-5px) rotate(-3deg)}70%{transform:translateY(-3px) rotate(2deg)}}

.auth-title{
  text-align:center;font-family:var(--font-heading);
  font-size:30px;font-weight:800;margin-bottom:5px;
  color:#fff;text-shadow:0 2px 20px rgba(124,58,237,0.5);
  letter-spacing:-.3px;
}
.auth-sub{text-align:center;color:rgba(255,255,255,0.52);font-size:13px;margin-bottom:26px;letter-spacing:.2px}

.auth-form{display:flex;flex-direction:column;gap:12px}

/* Input Groups */
.input-group{
  display:flex;align-items:center;
  background:rgba(255,255,255,0.10);
  border:1.5px solid rgba(255,255,255,0.20);
  border-radius:13px;overflow:hidden;
  transition:var(--transition);backdrop-filter:blur(10px);
}
.input-group:focus-within{
  border-color:rgba(255,255,255,0.55);
  background:rgba(255,255,255,0.16);
  box-shadow:0 0 0 4px rgba(255,255,255,0.08);
}
.input-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.45);font-size:14px;flex-shrink:0;transition:var(--transition)}
.input-group:focus-within .input-icon{color:rgba(255,255,255,0.90)}
.auth-input{flex:1;height:46px;border:none;outline:none;background:transparent;color:#fff;font-size:14px;font-family:inherit;padding-right:12px}
.auth-input::placeholder{color:rgba(255,255,255,0.33)}
.toggle-pw{width:40px;height:46px;border:none;background:transparent;color:rgba(255,255,255,0.38);cursor:pointer;font-size:14px;transition:var(--transition)}
.toggle-pw:hover{color:rgba(255,255,255,0.82)}

/* Name check */
.name-check{font-size:12px;padding:5px 12px;border-radius:8px;transition:var(--transition)}
.name-check.available{color:#6EF0CA;background:rgba(16,185,129,0.15)}
.name-check.taken{color:#FCA5A5;background:rgba(239,68,68,0.15)}
.name-check.checking{color:rgba(255,255,255,0.45)}

/* PW strength */
.pw-strength{display:flex;align-items:center;gap:10px}
.pw-bar{flex:1;height:5px;background:rgba(255,255,255,0.14);border-radius:3px;overflow:hidden}
.pw-fill{height:100%;border-radius:3px;transition:var(--transition);width:0}
.pw-fill.weak{width:33%;background:#EF4444}
.pw-fill.medium{width:66%;background:#F59E0B}
.pw-fill.strong{width:100%;background:#10B981}
.pw-label{font-size:11px;color:rgba(255,255,255,0.45);min-width:52px}

/* Avatar picks */
.avatar-pick-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pick-label{font-size:12px;color:rgba(255,255,255,0.50)}
.color-picks{display:flex;gap:6px;flex-wrap:wrap}
.color-pick{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;transition:var(--transition-bounce);box-shadow:0 2px 8px rgba(0,0,0,0.25)}
.color-pick:hover{transform:scale(1.22)}
.color-pick.active{border-color:rgba(255,255,255,0.9);transform:scale(1.16);box-shadow:0 4px 14px rgba(0,0,0,0.35)}

.avatar-preview-sm{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(255,255,255,0.08);border-radius:13px;border:1px solid rgba(255,255,255,0.13)}
.preview-av{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;background:var(--primary);box-shadow:0 4px 14px rgba(124,58,237,0.45);transition:var(--transition-bounce)}
#regPreviewName{font-size:14px;font-weight:600;color:rgba(255,255,255,0.85)}

.auth-error{padding:9px 14px;border-radius:10px;font-size:13px;background:rgba(239,68,68,0.18);color:#FCA5A5;border-left:3px solid #EF4444;animation:shake .3s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.auth-success{padding:9px 14px;border-radius:10px;font-size:13px;background:rgba(16,185,129,0.15);color:#6EF0CA;border-left:3px solid #10B981;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}

/* Auth Button */
.auth-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:50px;border:none;border-radius:13px;
  background:rgba(255,255,255,0.16);color:#fff;
  font-size:15px;font-weight:700;font-family:inherit;
  cursor:pointer;transition:var(--transition-bounce);
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,0.28);
  box-shadow:0 8px 32px rgba(0,0,0,0.22),inset 0 1px 0 rgba(255,255,255,0.22);
  backdrop-filter:blur(10px);
}
.auth-btn:hover{transform:translateY(-3px);box-shadow:0 14px 44px rgba(0,0,0,0.30),inset 0 1px 0 rgba(255,255,255,0.28)}
.auth-btn:active{transform:translateY(0)}
.auth-btn.loading{opacity:.65;pointer-events:none}
.auth-btn.loading i{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.btn-shine{position:absolute;top:0;left:-100%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.20),transparent);transform:skewX(-20deg);animation:shine 3.5s ease-in-out infinite}
@keyframes shine{0%,100%{left:-100%}50%{left:160%}}

.auth-switch{text-align:center;font-size:13px;color:rgba(255,255,255,0.48)}
.auth-switch a{color:rgba(255,255,255,0.90);font-weight:600;text-decoration:none}
.auth-switch a:hover{text-decoration:underline}
.auth-footer{text-align:center;font-size:11px;color:rgba(255,255,255,0.32);margin-top:10px;display:flex;align-items:center;justify-content:center;gap:6px}

/* ══════════════════════════════════════════════════════════
   📱 APP LAYOUT
   ══════════════════════════════════════════════════════════ */
.app-container{
  display:flex;height:100vh;height:100dvh;
  background:var(--bg-app);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

/* ══ SIDEBAR ══ */
.sidebar{
  width:var(--sidebar-width);flex-shrink:0;
  background:var(--bg-sidebar);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:20;
  box-shadow:2px 0 20px rgba(124,58,237,0.06);
}
body.dark-mode .sidebar{
  background:var(--bg-sidebar);
  box-shadow:2px 0 24px rgba(0,0,0,0.30),inset -1px 0 0 var(--border);
}

/* Sidebar Header */
.sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px 13px;border-bottom:1px solid var(--border);
}
.sidebar-logo{display:flex;align-items:center;gap:10px}
.sidebar-logo-icon{
  width:36px;height:36px;border-radius:11px;
  background:linear-gradient(135deg,#7C3AED,#9F67F8);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;
  box-shadow:0 4px 16px rgba(124,58,237,0.40);
}
.sidebar-logo-text{
  font-family:var(--font-heading);font-size:17px;font-weight:800;
  background:linear-gradient(135deg,#7C3AED,#06B6D4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sidebar-actions{display:flex;gap:5px;align-items:center}

.sidebar-btn{
  width:34px;height:34px;border:none;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  transition:var(--transition-bounce);position:relative;
  background:linear-gradient(135deg,#7C3AED,#9F67F8);color:#fff;
  box-shadow:0 3px 12px rgba(124,58,237,0.35);
}
.sidebar-btn:hover{transform:scale(1.12) translateY(-1px);box-shadow:var(--shadow-glow)}

.notif-dot{
  position:absolute;top:-3px;right:-3px;width:11px;height:11px;
  background:var(--danger);border-radius:50%;
  border:2px solid var(--bg-sidebar);
  box-shadow:0 0 8px rgba(239,68,68,0.60);
  animation:dotPulse 2s infinite;
}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.7}}

.icon-btn{width:32px;height:32px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;transition:var(--transition-bounce)}
.icon-btn:hover{background:var(--bg-hover);color:var(--primary);transform:scale(1.08)}

/* Sidebar Search */
.sidebar-search{padding:10px 12px}
.search-box{
  display:flex;align-items:center;gap:8px;padding:0 13px;height:37px;
  background:var(--bg-hover);border-radius:var(--radius-full);
  border:1.5px solid var(--border);transition:var(--transition);
}
.search-box:focus-within{border-color:var(--primary);background:var(--bg-input);box-shadow:0 0 0 3px var(--primary-glow)}
.search-box i{color:var(--text-muted);font-size:12px}
.search-box input{flex:1;border:none;outline:none;background:transparent;font-size:13px;font-family:inherit;color:var(--text-primary)}
.search-box input::placeholder{color:var(--text-muted)}

/* Sidebar Tabs */
.sidebar-tabs{display:flex;padding:0 8px;border-bottom:1px solid var(--border);gap:2px}
.sidebar-tab{
  flex:1;padding:10px 5px;border:none;background:transparent;
  font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer;
  border-bottom:2px solid transparent;transition:var(--transition);
  font-family:inherit;display:flex;align-items:center;justify-content:center;gap:5px;
  border-radius:9px 9px 0 0;
}
.sidebar-tab:hover{color:var(--text-primary);background:var(--bg-hover)}
.sidebar-tab.active{color:var(--primary);border-bottom-color:var(--primary);background:var(--bg-hover)}
.tab-badge{min-width:18px;height:18px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 4px}

.tab-content{flex:1;overflow-y:auto;padding:6px}
.tab-content::-webkit-scrollbar{width:3px}
.tab-content::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}

/* Room section label */
.room-section-label{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.8px;color:var(--text-muted);
  padding:10px 12px 5px;display:flex;align-items:center;gap:6px;
}

/* Room items */
.room-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);margin-bottom:2px}
.room-item:hover{background:var(--bg-hover)}
.room-item.active{
  background:linear-gradient(135deg,rgba(124,58,237,0.12),rgba(124,58,237,0.05));
  box-shadow:inset 0 0 0 1.5px rgba(124,58,237,0.22);
}
.room-icon-box{
  width:38px;height:38px;border-radius:var(--radius-md);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:17px;
  background:linear-gradient(135deg,rgba(124,58,237,0.11),rgba(124,58,237,0.04));
  border:1px solid var(--border);transition:var(--transition-bounce);
}
.room-item.active .room-icon-box{background:linear-gradient(135deg,#7C3AED,#9F67F8);border-color:transparent;box-shadow:0 4px 16px rgba(124,58,237,0.38)}
.room-details{flex:1;min-width:0}
.room-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-last-msg{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.room-unread{min-width:20px;height:20px;background:linear-gradient(135deg,#7C3AED,#9F67F8);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;box-shadow:0 2px 8px rgba(124,58,237,0.40);padding:0 5px}
.room-owner-badge{font-size:9px;padding:2px 5px;background:linear-gradient(135deg,#F59E0B,#FBBF24);color:#fff;border-radius:var(--radius-full);font-weight:700}
.room-private-badge{font-size:9px;padding:2px 5px;background:rgba(124,58,237,0.14);color:var(--primary);border-radius:var(--radius-full);font-weight:600}

/* DM items */
.dm-list{display:flex;flex-direction:column}
.dm-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);margin-bottom:2px}
.dm-item:hover{background:var(--bg-hover)}
.dm-item.active{background:linear-gradient(135deg,rgba(124,58,237,0.10),rgba(124,58,237,0.04))}
.dm-avatar-box{width:38px;height:38px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;box-shadow:var(--shadow-sm);flex-shrink:0;position:relative}
.dm-avatar-box .online-badge{position:absolute;bottom:-2px;right:-2px;width:11px;height:11px;background:var(--success);border-radius:50%;border:2.5px solid var(--bg-sidebar);box-shadow:0 0 6px rgba(16,185,129,0.60)}
.dm-avatar-box .offline-badge{position:absolute;bottom:-2px;right:-2px;width:11px;height:11px;background:var(--text-muted);border-radius:50%;border:2.5px solid var(--bg-sidebar)}

/* Online section */
.sidebar-section{padding:8px 12px;border-top:1px solid var(--border)}
.section-header{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px}
.online-dot{color:#10B981;font-size:7px;animation:glow 2s ease-in-out infinite}
@keyframes glow{0%,100%{text-shadow:0 0 4px #10B981}50%{text-shadow:0 0 10px #10B981}}
.online-list{display:flex;flex-direction:column;gap:2px;max-height:130px;overflow-y:auto}
.online-user{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:8px;cursor:pointer;transition:var(--transition-fast)}
.online-user:hover{background:var(--bg-hover)}
.online-av{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;position:relative}
.online-av::after{content:'';position:absolute;bottom:-2px;right:-2px;width:9px;height:9px;background:#10B981;border-radius:50%;border:2px solid var(--bg-sidebar)}
.online-name{font-size:12.5px;font-weight:500}

/* Sidebar Footer */
.sidebar-footer{border-top:1px solid var(--border);padding:8px 10px}
.user-card{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-md);background:var(--bg-hover);border:1px solid var(--border)}
.user-avatar-sm{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;background:linear-gradient(135deg,#7C3AED,#9F67F8);box-shadow:0 3px 10px rgba(124,58,237,0.35)}
.user-info{flex:1;min-width:0}
.user-name-sm{font-size:13px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-status-sm{font-size:10.5px;color:var(--text-muted)}

/* ══ CHAT AREA ══ */
.chat-area{flex:1;display:flex;flex-direction:column;background:var(--bg-chat);min-width:0}

.chat-header{
  height:62px;display:flex;align-items:center;padding:0 18px;
  background:var(--bg-card);border-bottom:1px solid var(--border);
  box-shadow:0 2px 14px rgba(124,58,237,0.07);z-index:10;gap:12px;flex-shrink:0;
}
body.dark-mode .chat-header{box-shadow:0 2px 14px rgba(0,0,0,0.25)}

.mobile-menu-btn{display:none;width:34px;height:34px;border:none;background:var(--bg-hover);border-radius:9px;cursor:pointer;color:var(--text-primary);font-size:15px;align-items:center;justify-content:center}
.chat-header-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.chat-room-icon{width:38px;height:38px;background:linear-gradient(135deg,rgba(124,58,237,0.12),rgba(124,58,237,0.04));border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;border:1px solid var(--border);flex-shrink:0}
.dm-header-avatar{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;box-shadow:var(--shadow-sm);flex-shrink:0}
.chat-room-details{min-width:0}
.chat-room-name{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-room-desc{font-size:11.5px;color:var(--text-muted)}
.chat-header-actions{display:flex;gap:4px;flex-shrink:0}

.header-btn{
  width:36px;height:36px;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  color:var(--text-secondary);transition:var(--transition-bounce);
  background:var(--bg-card);box-shadow:var(--shadow-btn);
}
.header-btn:hover{transform:translateY(-2px) scale(1.06);color:var(--primary);border-color:var(--primary);box-shadow:0 4px 16px rgba(124,58,237,0.20)}

/* Access denied */
.access-denied{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--text-muted);text-align:center;padding:40px}
.access-icon{font-size:62px;margin-bottom:4px}
.access-denied h2{font-size:20px;font-weight:700;color:var(--text-primary)}
.access-denied p{font-size:14px;max-width:300px;line-height:1.65}

/* Messages */
.messages-container{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;padding:18px 22px;scroll-behavior:smooth}
.messages-container::-webkit-scrollbar{width:5px}
.messages-container::-webkit-scrollbar-track{background:transparent}
.messages-container::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
.messages-wrapper{display:flex;flex-direction:column;gap:4px;min-height:100%;justify-content:flex-end}

.message{display:flex;gap:10px;max-width:72%;animation:msgIn .32s cubic-bezier(.34,1.56,.64,1);position:relative;padding:2px 0}
@keyframes msgIn{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.message.mine{align-self:flex-end;flex-direction:row-reverse}
.message.other{align-self:flex-start}

.msg-avatar{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:var(--shadow-sm);align-self:flex-end}
.msg-content{display:flex;flex-direction:column;gap:3px;min-width:0}
.msg-name{font-size:11.5px;font-weight:700;padding:0 8px;display:flex;align-items:center;gap:6px}
.msg-name .msg-time{font-weight:400;font-size:10.5px;color:var(--text-muted)}
.message.mine .msg-name{justify-content:flex-end;color:rgba(124,58,237,0.55)}
body.dark-mode .message.mine .msg-name{color:rgba(167,139,250,0.55)}

.msg-bubble{padding:10px 16px;border-radius:var(--radius-msg);font-size:13.5px;line-height:1.55;position:relative;word-wrap:break-word;overflow-wrap:break-word}
.message.other .msg-bubble{
  background:var(--bg-msg-other);color:var(--text-primary);
  border-bottom-left-radius:var(--radius-msg-tail);
  box-shadow:0 2px 12px rgba(124,58,237,0.07),inset 0 1px 0 rgba(255,255,255,0.70);
  border:1px solid var(--border);
}
body.dark-mode .message.other .msg-bubble{box-shadow:0 2px 12px rgba(0,0,0,0.30);border-color:var(--border)}
.message.mine .msg-bubble{
  background:var(--bg-msg-mine);color:#fff;
  border-bottom-right-radius:var(--radius-msg-tail);
  box-shadow:0 4px 18px rgba(124,58,237,0.30),inset 0 1px 0 rgba(255,255,255,0.18);
}
.message.mine .msg-bubble::before{content:'';position:absolute;top:0;left:0;right:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,0.13),transparent);border-radius:var(--radius-msg) var(--radius-msg) 0 0;pointer-events:none}

/* Reply */
.msg-reply-box{padding:6px 10px;background:rgba(124,58,237,0.08);border-left:3px solid var(--primary);border-radius:6px;margin-bottom:5px;font-size:12px;color:var(--text-secondary)}
.message.mine .msg-reply-box{background:rgba(255,255,255,0.12);border-left-color:rgba(255,255,255,0.45);color:rgba(255,255,255,0.68)}
.msg-reply-name{font-weight:700;font-size:10.5px;margin-bottom:2px;color:var(--primary)}
.message.mine .msg-reply-name{color:rgba(255,255,255,0.82)}

/* Media */
.msg-image{max-width:280px;max-height:280px;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm);object-fit:cover;display:block}
.msg-image:hover{transform:scale(1.02);box-shadow:var(--shadow-md)}
.msg-censored{padding:8px 12px;background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.18);border-radius:var(--radius-sm);font-size:12px;color:var(--danger);font-style:italic}
.msg-video-wrap{position:relative;display:inline-block;cursor:pointer;border-radius:var(--radius-md);overflow:hidden;max-width:280px}
.msg-video{display:block;max-width:280px;max-height:200px;border-radius:var(--radius-md);object-fit:cover;pointer-events:none}
.msg-video-play-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.28);color:#fff;font-size:32px;transition:background .2s;pointer-events:none;border-radius:var(--radius-md)}
.msg-video-wrap:hover .msg-video-play-hint{background:rgba(0,0,0,0.48)}

/* Msg actions */
.msg-actions{position:absolute;top:-10px;right:0;display:none;gap:2px;background:var(--bg-card);border-radius:var(--radius-sm);padding:3px 4px;box-shadow:var(--shadow-md);border:1px solid var(--border);z-index:5}
.message.other .msg-actions{right:auto;left:44px}
.message:hover .msg-actions{display:flex}
.msg-action-btn{width:26px;height:26px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:var(--transition-fast)}
.msg-action-btn:hover{background:var(--bg-hover);color:var(--primary)}

.system-msg{text-align:center;padding:8px 0}
.system-msg span{display:inline-block;padding:4px 16px;background:var(--bg-system);border-radius:var(--radius-full);font-size:11.5px;color:var(--text-muted);border:1px solid var(--border)}

.scroll-bottom-btn{position:absolute;bottom:20px;right:22px;width:38px;height:38px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);border-radius:50%;cursor:pointer;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;font-size:14px;transition:var(--transition-bounce);z-index:5}
.scroll-bottom-btn:hover{transform:scale(1.12);color:var(--primary);border-color:var(--primary)}

/* Typing */
.typing-indicator{display:flex;align-items:center;gap:9px;padding:5px 22px;font-size:12px;color:var(--text-muted);flex-shrink:0}
.typing-dots{display:flex;gap:4px}
.typing-dots span{width:5px;height:5px;background:var(--text-muted);border-radius:50%;animation:typeBounce 1.4s ease-in-out infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typeBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}

/* Censor */
.censor-warning{display:flex;align-items:center;gap:10px;padding:8px 20px;background:rgba(239,68,68,0.06);border-top:1px solid rgba(239,68,68,0.14);font-size:13px;color:var(--danger);animation:fadeUp .2s ease;flex-shrink:0}
.censor-warning button{margin-left:auto;border:none;background:transparent;color:var(--danger);cursor:pointer;font-size:15px}

/* ══ INPUT AREA ══ */
.message-input-area{
  padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px));
  background:var(--bg-card);border-top:1px solid var(--border);
  position:relative;flex-shrink:0;
}
.reply-preview{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:8px;background:var(--bg-hover);border-radius:var(--radius-sm);border:1px solid var(--border);animation:fadeUp .2s ease}
.reply-bar{width:3px;height:30px;background:var(--primary);border-radius:2px;flex-shrink:0}
.reply-content{flex:1;min-width:0}
.reply-to{font-size:11.5px;font-weight:700;color:var(--primary);display:block}
.reply-text{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.reply-close{width:26px;height:26px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.reply-close:hover{color:var(--danger);background:rgba(239,68,68,0.08)}

.input-row{display:flex;align-items:flex-end;gap:7px}
.input-wrapper{
  flex:1;background:var(--bg-input);
  border:1.5px solid var(--border-strong);border-radius:var(--radius-lg);
  padding:0 4px;transition:var(--transition);
  box-shadow:0 2px 10px rgba(124,58,237,0.06),inset 0 1px 0 rgba(255,255,255,0.60);
}
body.dark-mode .input-wrapper{box-shadow:0 2px 10px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.03)}
.input-wrapper:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-glow),0 2px 10px rgba(124,58,237,0.10)}
.message-textarea{width:100%;border:none;outline:none;font-size:14px;font-family:inherit;background:transparent;color:var(--text-primary);padding:10px 14px;resize:none;max-height:120px;line-height:1.45}
.message-textarea::placeholder{color:var(--text-muted)}
.message-textarea.spammed{border-color:var(--danger)!important;animation:shake .3s ease}

.input-action-btn{
  width:40px;height:40px;border:1.5px solid var(--border);border-radius:var(--radius-md);
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:17px;
  color:var(--text-secondary);transition:var(--transition-bounce);flex-shrink:0;
  background:var(--bg-card);box-shadow:var(--shadow-btn);
}
.input-action-btn:hover{transform:translateY(-2px) scale(1.08);color:var(--primary);border-color:var(--primary)}
.send-btn{
  width:44px;height:44px;border:none;border-radius:var(--radius-md);flex-shrink:0;
  background:linear-gradient(135deg,#7C3AED,#9F67F8);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:17px;
  cursor:pointer;transition:var(--transition-bounce);position:relative;overflow:hidden;
  box-shadow:0 6px 22px rgba(124,58,237,0.42),inset 0 1px 0 rgba(255,255,255,0.20);
}
.send-btn:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 10px 34px rgba(124,58,237,0.52)}
.send-btn:active{transform:scale(.95)}

/* Emoji picker */
.emoji-picker{position:absolute;bottom:calc(100% + 8px);right:60px;width:330px;background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);overflow:hidden;animation:popIn .22s cubic-bezier(.34,1.56,.64,1);z-index:100}
@keyframes popIn{from{opacity:0;transform:scale(.88) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.emoji-cats{display:flex;padding:7px 8px;gap:2px;border-bottom:1px solid var(--border);background:var(--bg-hover)}
.ecat{width:34px;height:30px;border:none;background:transparent;font-size:16px;cursor:pointer;border-radius:7px;transition:var(--transition-fast)}
.ecat:hover{background:var(--border)}
.ecat.active{background:rgba(124,58,237,0.13)}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;max-height:200px;overflow-y:auto}
.emoji-grid::-webkit-scrollbar{width:4px}
.emoji-grid::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:2px}
.emoji-item{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:19px;cursor:pointer;border-radius:7px;transition:var(--transition-fast)}
.emoji-item:hover{background:var(--bg-hover);transform:scale(1.20)}

/* Attach menu */
.attach-wrap{position:relative}
.attach-menu{position:absolute;bottom:calc(100% + 8px);left:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);overflow:hidden;z-index:100;min-width:130px;animation:fadeUp .15s ease}
.attach-opt{display:flex;align-items:center;gap:9px;width:100%;padding:10px 16px;background:none;border:none;color:var(--text-primary);font-size:13px;font-family:inherit;cursor:pointer;transition:background .15s;white-space:nowrap}
.attach-opt:hover{background:var(--bg-hover)}
.attach-opt i{width:16px;text-align:center;color:var(--primary)}

/* Voice */
.voice-btn{color:var(--text-muted)!important}
.voice-btn.recording{color:var(--danger)!important;animation:voicePulse 1s ease infinite}
@keyframes voicePulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.40)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
.voice-recording-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(239,68,68,0.07);border-top:1px solid rgba(239,68,68,0.16);font-size:13px;color:var(--danger);font-weight:500}
.voice-rec-pulse{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:recPulse .8s ease infinite;flex-shrink:0}
@keyframes recPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.voice-cancel-btn{margin-left:auto;background:transparent;border:1px solid var(--danger);color:var(--danger);border-radius:8px;padding:4px 10px;font-size:12px;cursor:pointer;transition:var(--transition)}
.voice-cancel-btn:hover{background:var(--danger);color:#fff}
.msg-voice-wrap{display:flex;align-items:center;gap:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-full);padding:8px 14px;min-width:200px;max-width:280px}
.voice-icon{color:var(--primary);font-size:15px;flex-shrink:0}
.msg-audio{flex:1;height:30px;outline:none}
.voice-dur{font-size:11px;color:var(--text-muted);flex-shrink:0}

/* Link card */
.msg-link-card{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;background:var(--bg-hover);border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:9px;padding:7px 11px;margin:3px 0;text-decoration:none!important;color:var(--text-primary)!important;font-size:13px;max-width:280px;overflow:hidden;transition:background .15s}
.msg-link-card:hover{background:rgba(124,58,237,0.09)}
.link-top{display:flex;align-items:center;gap:6px}
.msg-link-card i{color:var(--primary)}
.link-domain{color:var(--primary);font-weight:600;font-size:12.5px}
.link-url{color:var(--text-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px;display:block}

/* ══════════════════════════════════════════════════════════
   🗂 DIALOGS
   ══════════════════════════════════════════════════════════ */
.dialog-overlay{position:fixed;inset:0;background:rgba(10,8,18,0.65);display:flex;align-items:center;justify-content:center;z-index:3000;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:bgIn .2s ease}
@keyframes bgIn{from{opacity:0}to{opacity:1}}
.dialog-card{
  background:var(--bg-card);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl),0 0 0 1px var(--border);
  width:460px;max-width:94vw;overflow:hidden;
  animation:cardIn .32s cubic-bezier(.34,1.56,.64,1);
  max-height:88vh;display:flex;flex-direction:column;
}
.dialog-lg{width:520px}
@keyframes cardIn{from{opacity:0;transform:scale(.88) translateY(22px)}to{opacity:1;transform:scale(1) translateY(0)}}
.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.dialog-header h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.dialog-close-btn{width:30px;height:30px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;transition:var(--transition-bounce)}
.dialog-close-btn:hover{background:var(--danger);color:#fff;transform:rotate(90deg) scale(1.10)}
.dialog-body{padding:20px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:14px}
.dialog-footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border);background:var(--bg-hover)}
.dialog-btn{padding:9px 22px;border:1.5px solid var(--border-strong);border-radius:var(--radius-md);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:var(--transition-bounce);background:var(--bg-card);color:var(--text-primary)}
.dialog-btn:hover{transform:translateY(-1px);border-color:var(--primary)}
.create-btn{background:linear-gradient(135deg,#7C3AED,#9F67F8)!important;color:#fff!important;border-color:var(--primary-dark)!important;box-shadow:0 4px 16px rgba(124,58,237,0.32)!important}
.create-btn:hover{box-shadow:var(--shadow-glow)!important}
.danger-confirm-btn{padding:9px 22px;border:1px solid var(--danger);border-radius:var(--radius-md);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;background:linear-gradient(135deg,#EF4444,#F87171);color:#fff;transition:var(--transition-bounce);box-shadow:0 4px 14px rgba(239,68,68,0.32)}
.danger-confirm-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(239,68,68,0.44)}

/* Icon picks */
.icon-picks{display:flex;gap:5px;flex-wrap:wrap}
.icon-pick{width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:18px;border:2px solid var(--border);border-radius:9px;cursor:pointer;transition:var(--transition-bounce)}
.icon-pick:hover{border-color:var(--primary);transform:scale(1.10)}
.icon-pick.active{border-color:var(--primary);background:rgba(124,58,237,0.09)}

/* Room type radio */
.room-type-pick{display:flex;gap:10px}
.radio-card{flex:1;cursor:pointer}
.radio-card input{display:none}
.radio-body{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 10px;border:2px solid var(--border);border-radius:var(--radius-md);transition:var(--transition-bounce);text-align:center;background:var(--bg-card)}
.radio-body i{font-size:22px;color:var(--text-muted);transition:var(--transition)}
.radio-body span{font-size:13px;font-weight:600}
.radio-body small{font-size:11px;color:var(--text-muted)}
.radio-card input:checked + .radio-body{border-color:var(--primary);background:rgba(124,58,237,0.06);box-shadow:0 0 0 3px rgba(124,58,237,0.14)}
.radio-card input:checked + .radio-body i{color:var(--primary)}
.radio-card:hover .radio-body{border-color:var(--primary-light);transform:translateY(-2px)}

/* Friend tabs */
.friend-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:4px}
.ftab{flex:1;padding:8px;border:none;background:var(--bg-hover);font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer;border-radius:9px;transition:var(--transition);font-family:inherit;display:flex;align-items:center;justify-content:center;gap:4px}
.ftab:hover{background:var(--border-strong);color:var(--text-primary)}
.ftab.active{background:linear-gradient(135deg,rgba(124,58,237,0.14),rgba(124,58,237,0.06));color:var(--primary)}
.ftab-badge{min-width:16px;height:16px;background:var(--danger);color:#fff;font-size:9px;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 3px}
.ftab-content{min-height:180px;max-height:50vh;overflow-y:auto}
.search-user-results,.friend-req-list,.friends-list{display:flex;flex-direction:column;gap:6px;padding:4px 0}

/* User cards */
.user-result-card{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius-md);border:1px solid var(--border);transition:var(--transition);background:var(--bg-card)}
.user-result-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-xs)}
.ur-avatar{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;box-shadow:var(--shadow-sm);flex-shrink:0}
.ur-info{flex:1;min-width:0}
.ur-name{font-size:14px;font-weight:600;display:block}
.ur-username{font-size:11.5px;color:var(--text-muted)}
.ur-actions{display:flex;gap:4px}

.action-btn{padding:6px 14px;border:1.5px solid var(--border-strong);border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:var(--transition-bounce);font-family:inherit;display:flex;align-items:center;gap:4px;background:var(--bg-card);color:var(--text-primary)}
.action-btn.primary{background:linear-gradient(135deg,#7C3AED,#9F67F8);color:#fff;border-color:var(--primary-dark);box-shadow:0 3px 12px rgba(124,58,237,0.32)}
.action-btn.primary:hover{box-shadow:var(--shadow-glow)}
.action-btn.success{background:linear-gradient(135deg,#10B981,#34D399);color:#fff;border-color:#059669}
.action-btn.danger{background:linear-gradient(135deg,#EF4444,#F87171);color:#fff;border-color:#DC2626}
.action-btn.secondary{background:var(--bg-card);color:var(--text-primary)}
.action-btn:hover{transform:translateY(-1px)}
.action-btn:disabled,.action-btn.pending{opacity:.5;pointer-events:none;background:var(--bg-hover);color:var(--text-muted);border-color:var(--border)}

.empty-state{text-align:center;padding:28px;color:var(--text-muted)}
.empty-state.small{padding:18px}
.empty-state i{font-size:30px;margin-bottom:8px;opacity:.35;display:block}
.empty-state p{font-size:13px}

/* Settings */
.setting-section-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:4px 0 10px}
.setting-divider{border:none;border-top:1px solid var(--border);margin:14px 0}
.setting-item{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border);font-size:14px}
.toggle{position:relative;width:44px;height:24px;flex-shrink:0}
.toggle input{display:none}
.toggle-s{position:absolute;inset:0;background:var(--border-strong);border-radius:var(--radius-full);cursor:pointer;transition:var(--transition)}
.toggle-s::after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:var(--transition-bounce);box-shadow:0 2px 6px rgba(0,0,0,0.18)}
.toggle input:checked + .toggle-s{background:linear-gradient(135deg,#7C3AED,#9F67F8)}
.toggle input:checked + .toggle-s::after{transform:translateX(20px)}
.setting-danger{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.danger-btn{padding:10px;border:1px solid rgba(239,68,68,0.22);background:rgba(239,68,68,0.06);color:var(--danger);border-radius:var(--radius-sm);cursor:pointer;font-size:13px;font-weight:500;font-family:inherit;transition:var(--transition)}
.danger-btn:hover{background:var(--danger);color:#fff}

/* Profile */
.profile-edit-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:4px}
.profile-av-edit{position:relative;width:64px;height:64px;border-radius:50%;cursor:pointer;flex-shrink:0;overflow:hidden}
.profile-av-preview{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:#fff;background:var(--primary);background-size:cover;background-position:center}
.profile-av-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.46);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;opacity:0;border-radius:50%;transition:.2s}
.profile-av-edit:hover .profile-av-overlay{opacity:1}
.profile-fields{flex:1;display:flex;flex-direction:column;gap:9px}
.small-btn{height:40px!important;font-size:13px!important}

/* Admin */
.admin-header{background:linear-gradient(135deg,#DC2626,#B91C1C)!important}
.admin-header h3,.admin-header .dialog-close-btn{color:#fff!important}
.admin-tabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:8px;flex-wrap:wrap}
.atab{padding:7px 13px;border:none;background:transparent;border-radius:9px;font-size:13px;cursor:pointer;color:var(--text-muted);transition:var(--transition);font-weight:500;font-family:inherit}
.atab:hover{background:var(--bg-hover);color:var(--text-primary)}
.atab.active{background:linear-gradient(135deg,#7C3AED,#9F67F8);color:#fff;box-shadow:0 3px 12px rgba(124,58,237,0.32)}
.atab-content{animation:fadeUp .2s ease}
.admin-textarea{width:100%;min-height:90px;padding:10px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-size:14px;resize:vertical;font-family:inherit;box-sizing:border-box;outline:none;transition:border-color .2s}
.admin-textarea:focus{border-color:var(--primary)}

/* Reports */
.report-card{background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px;margin-bottom:10px}
.report-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;gap:8px;flex-wrap:wrap}
.report-from{font-size:13px}
.report-time{font-size:11px;color:var(--text-muted);flex-shrink:0}
.report-reason{font-size:13px;color:var(--text-muted);margin-bottom:8px}
.report-actions{display:flex;gap:8px}
.report-reasons{display:flex;flex-direction:column;gap:8px}
.report-reason-opt{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-sm);cursor:pointer;border:1.5px solid var(--border);font-size:14px;transition:var(--transition);background:var(--bg-card)}
.report-reason-opt:hover{border-color:var(--primary);background:var(--bg-hover)}
.report-reason-opt input{accent-color:var(--primary)}

/* Image viewer */
.image-viewer{position:fixed;inset:0;background:rgba(10,8,18,0.92);display:flex;align-items:center;justify-content:center;z-index:5000;cursor:pointer;backdrop-filter:blur(10px)}
.image-viewer img{max-width:90%;max-height:90%;border-radius:var(--radius-md);box-shadow:0 8px 50px rgba(0,0,0,0.50)}
.viewer-close{position:absolute;top:20px;right:20px;width:42px;height:42px;border:1px solid rgba(255,255,255,0.20);background:rgba(255,255,255,0.10);color:#fff;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:var(--transition-bounce);backdrop-filter:blur(8px)}
.viewer-close:hover{background:rgba(255,255,255,0.24);transform:scale(1.10) rotate(90deg)}
#videoViewer{position:fixed;inset:0;background:rgba(10,8,18,0.92);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(10px)}
#videoViewer video{max-width:92vw;max-height:88vh;border-radius:var(--radius-md);outline:none;box-shadow:0 8px 50px rgba(0,0,0,0.50)}

/* Search results */
.search-results{max-height:250px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.search-result-item{padding:9px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);border:1px solid var(--border);background:var(--bg-card)}
.search-result-item:hover{background:var(--bg-hover)}

/* Toast */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:6000;display:flex;flex-direction:column;gap:8px}
.toast{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;background:var(--bg-card);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);
  border:1px solid var(--border);font-size:13px;font-weight:500;
  animation:toastIn .38s cubic-bezier(.34,1.56,.64,1);
  min-width:240px;color:var(--text-primary);position:relative;overflow:hidden;
}
.toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px}
.toast.success::before{background:var(--success)}
.toast.error::before{background:var(--danger)}
.toast.warning::before{background:var(--warning)}
.toast.info::before{background:#3B82F6}
.toast i{font-size:17px}
.toast.success i{color:var(--success)}
.toast.error i{color:var(--danger)}
.toast.warning i{color:var(--warning)}
.toast.info i{color:#3B82F6}
@keyframes toastIn{from{opacity:0;transform:translateX(52px) scale(.90)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translateX(62px)}}

/* Admin notification banner */
.admin-notif-banner{position:fixed;top:0;left:0;right:0;z-index:9999;background:linear-gradient(90deg,#DC2626,#B91C1C);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;box-shadow:0 4px 24px rgba(220,38,38,0.50);gap:12px;min-height:52px}
.admin-notif-banner.banner-slide-in{animation:bannerIn .40s cubic-bezier(.22,1,.36,1) forwards}
.admin-notif-banner.banner-slide-out{animation:bannerOut .35s ease forwards}
@keyframes bannerIn{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes bannerOut{from{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}
.admin-notif-content{display:flex;align-items:center;gap:10px;flex:1;font-size:14px;font-weight:500}
.admin-notif-content i{animation:buzz .5s ease infinite}
@keyframes buzz{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.admin-notif-close{background:rgba(255,255,255,0.20);border:none;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:background .15s}
.admin-notif-close:hover{background:rgba(255,255,255,0.36)}
.admin-notif-banner:not(.hidden) ~ .app-container,
body:has(.admin-notif-banner:not(.hidden)) .app-container{margin-top:52px}

/* Room list container */
.room-list{display:flex;flex-direction:column}
.dm-item .dm-details{flex:1;min-width:0}
.dm-item .dm-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-item .dm-last{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

/* Mobile */
@media (max-width:768px){
  .sidebar{position:fixed;left:-100%;top:0;bottom:0;z-index:100;transition:var(--transition);width:85vw;max-width:320px;padding-bottom:env(safe-area-inset-bottom,0px)}
  .sidebar.open{left:0;box-shadow:var(--shadow-xl)}
  .mobile-menu-btn{display:flex}
  .emoji-picker{right:8px;width:calc(100vw - 16px)}
  .message{max-width:88%}
  .toast-container{bottom:16px;right:10px;left:10px}
  .toast{min-width:unset}
}