/* ═══════════════════════════════════════════════════════════
   三角洲护航指挥中心 - 优化版 CSS
   Mobile-First · Font Awesome · My Profile Page
═══════════════════════════════════════════════════════════ */

/* ─── CSS Variables ─── */
:root {
  --bg-void:        #060809;
  --bg-base:        #0a0d11;
  --bg-surface:     #0f1419;
  --bg-panel:       #131b22;
  --bg-card:        #1a2433;
  --bg-hover:       #1f2d3d;
  --bg-active:      #243344;

  --border-dim:     rgba(0,212,160,0.12);
  --border-mid:     rgba(0,212,160,0.25);
  --border-bright:  rgba(0,212,160,0.5);

  --accent:         #00d4a0;
  --accent-dim:     rgba(0,212,160,0.15);
  --accent-glow:    rgba(0,212,160,0.4);
  --amber:          #f5a623;
  --amber-dim:      rgba(245,166,35,0.15);
  --amber-glow:     rgba(245,166,35,0.4);
  --red:            #e74c3c;
  --red-dim:        rgba(231,76,60,0.15);
  --blue:           #3498db;
  --purple:         #9b59b6;

  --text-primary:   #e8f0f7;
  --text-secondary: #8da3b5;
  --text-muted:     #4a6070;
  --text-accent:    #00d4a0;

  --font-display:   'Orbitron', monospace;
  --font-body:      'Rajdhani', sans-serif;
  --font-mono:      'Share Tech Mono', monospace;

  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      12px;
  --radius-xl:      20px;

  --shadow-panel:   0 4px 24px rgba(0,0,0,0.6);
  --transition:     0.2s ease;

  /* Mobile nav height */
  --bottom-nav-h:   60px;
  --top-nav-h:      56px;
}

/* ─── Light Mode ─── */
[data-theme="light"] {
  --bg-void:        #f2f2f7;
  --bg-base:        #ffffff;
  --bg-surface:     #f2f2f7;
  --bg-panel:       #ffffff;
  --bg-card:        #f2f2f7;
  --bg-hover:       #e5e5ea;
  --bg-active:      #d1d1d6;

  --border-dim:     rgba(60,60,67,0.12);
  --border-mid:     rgba(60,60,67,0.22);
  --border-bright:  rgba(60,60,67,0.4);

  --accent:         #007aff;
  --accent-dim:     rgba(0,122,255,0.1);
  --accent-glow:    rgba(0,122,255,0.25);
  --amber:          #ff9500;
  --amber-dim:      rgba(255,149,0,0.12);
  --amber-glow:     rgba(255,149,0,0.3);
  --red:            #ff3b30;
  --red-dim:        rgba(255,59,48,0.12);
  --blue:           #007aff;
  --purple:         #af52de;

  --text-primary:   #1c1c1e;
  --text-secondary: #3a3a3c;
  --text-muted:     #8e8e93;
  --text-accent:    #007aff;

  --shadow-panel:   0 2px 12px rgba(0,0,0,0.08);
}

/* 浅色模式下扫描线和噪点隐藏 */
[data-theme="light"] .scanlines,
[data-theme="light"] .noise-overlay { opacity: 0; }

/* 浅色模式下登录页网格颜色 */
[data-theme="light"] .auth-grid {
  background-image:
    linear-gradient(rgba(0,122,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,122,255,0.05) 1px, transparent 1px);
}

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg-void);
  color: var(--text-primary);
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ─── Scan Lines ─── */
.scanlines {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
}
.noise-overlay {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

.screen { position: fixed; inset: 0; display: none; opacity: 0; transition: opacity 0.4s ease; }
.screen.active { display: flex; opacity: 1; }
.hidden { display: none !important; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }


/* ══════════════════════════════════════════════════════════
   AUTH SCREEN
══════════════════════════════════════════════════════════ */

.auth-bg { position: absolute; inset: 0; overflow: hidden; }
.auth-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,212,160,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,160,0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridDrift 30s linear infinite;
}
@keyframes gridDrift { from { background-position: 0 0,0 0; } to { background-position: 50px 50px,50px 50px; } }

.auth-container {
  position: relative; z-index: 10; display: flex; width: 100%;
  min-height: 100vh; align-items: center; justify-content: center;
  gap: 60px; padding: 40px;
}

/* Brand Panel */
.auth-brand { flex: 0 0 420px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

.logo-hex { width: 90px; height: 104px; filter: drop-shadow(0 0 20px rgba(245,166,35,0.6)); animation: hexPulse 3s ease-in-out infinite; }
@keyframes hexPulse { 0%,100% { filter: drop-shadow(0 0 20px rgba(245,166,35,0.6)); } 50% { filter: drop-shadow(0 0 40px rgba(245,166,35,0.9)); } }
.hex-svg { width: 100%; height: 100%; }

.brand-title { display: flex; flex-direction: column; gap: 4px; }
.title-delta { font-family: var(--font-display); font-size: 2.6rem; font-weight: 900; color: var(--amber); text-shadow: 0 0 30px var(--amber-glow); line-height: 1; letter-spacing: 0.05em; }
.title-escort { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text-primary); letter-spacing: 0.15em; }
.brand-subtitle { font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent); letter-spacing: 0.3em; border-left: 2px solid var(--accent); padding-left: 12px; }

.brand-stats { display: flex; background: var(--bg-panel); border: 1px solid var(--border-dim); border-radius: var(--radius-md); overflow: hidden; width: 100%; }
.stat-item { flex: 1; padding: 12px 16px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.stat-num { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--accent); }
.stat-label { font-size: 0.67rem; color: var(--text-muted); font-family: var(--font-mono); letter-spacing: 0.08em; }
.stat-divider { width: 1px; background: var(--border-dim); margin: 8px 0; }

.brand-tagline { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-secondary); min-height: 1.2em; }
.cursor-blink { animation: blink 1s step-end infinite; color: var(--accent); }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* Auth Panel */
.auth-panel {
  flex: 0 0 400px; background: var(--bg-panel); border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg); padding: 28px; position: relative;
  box-shadow: var(--shadow-panel), 0 0 40px rgba(0,212,160,0.05);
}
.panel-corner { position: absolute; width: 16px; height: 16px; border-color: var(--amber); border-style: solid; }
.panel-corner.tl { top:-1px;left:-1px;border-width:2px 0 0 2px;border-radius:2px 0 0 0; }
.panel-corner.tr { top:-1px;right:-1px;border-width:2px 2px 0 0;border-radius:0 2px 0 0; }
.panel-corner.bl { bottom:-1px;left:-1px;border-width:0 0 2px 2px;border-radius:0 0 0 2px; }
.panel-corner.br { bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-radius:0 0 2px 0; }

.panel-header { display: flex; margin-bottom: 24px; border-bottom: 1px solid var(--border-dim); }
.tab-btn {
  flex: 1; padding: 12px 8px; text-align: center; cursor: pointer;
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
  color: var(--text-muted); letter-spacing: 0.04em; position: relative;
  transition: color var(--transition); user-select: none;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active { color: var(--accent); }
.tab-indicator { position: absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--accent); transform:scaleX(0); transition:transform 0.3s ease; box-shadow:0 0 8px var(--accent-glow); }
.tab-btn.active .tab-indicator { transform: scaleX(1); }

.auth-form { display: none; flex-direction: column; gap: 16px; }
.auth-form.active { display: flex; }

/* ─── Form Elements ─── */
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-label { font-size: 0.75rem; font-family: var(--font-mono); color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.label-icon { color: var(--accent); }
.input-wrapper { position: relative; }
.input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.85rem; pointer-events: none; z-index: 1; }

.form-input {
  width: 100%; background: var(--bg-base); border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text-primary);
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 500;
  outline: none; transition: all var(--transition);
}
.form-input.has-icon { padding-left: 38px; }
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.form-input:focus + .input-line { transform: scaleX(1); }

.input-line { position: absolute; bottom:0; left:0; right:0; height:1px; background:var(--accent); transform:scaleX(0); transition:transform 0.3s ease; }

.pwd-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 4px; font-size: 0.85rem; transition: color var(--transition);
}
.pwd-toggle:hover { color: var(--accent); }

.form-error { font-size: 0.78rem; color: var(--red); font-family: var(--font-mono); min-height: 1em; padding: 2px 0; }
.form-success { font-size: 0.78rem; color: var(--accent); font-family: var(--font-mono); min-height: 1em; padding: 2px 0; }

.role-notice {
  background: var(--amber-dim); border: 1px solid rgba(245,166,35,0.3); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 0.78rem; color: var(--amber);
  display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-mono);
}
.notice-icon { flex-shrink: 0; margin-top: 2px; }

/* ─── Buttons ─── */
.btn-primary {
  position: relative; background: transparent; border: 1px solid var(--accent);
  border-radius: var(--radius-sm); padding: 13px 20px; color: var(--accent);
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.15em; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 8px; overflow: hidden; transition: all var(--transition);
  text-transform: uppercase; width: 100%; min-height: 46px;
}
.btn-primary::before { content:''; position:absolute; inset:0; background:var(--accent-dim); transform:translateX(-100%); transition:transform 0.3s ease; }
.btn-primary:hover::before { transform: translateX(0); }
.btn-primary:hover { box-shadow: 0 0 20px var(--accent-glow); color: #fff; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary.small { width:auto; padding:8px 14px; font-size:0.72rem; margin-bottom:10px; }
.btn-glow { position:absolute; inset:0; background:radial-gradient(ellipse at center,var(--accent-glow),transparent 70%); opacity:0; transition:opacity 0.3s; pointer-events:none; }
.btn-primary:hover .btn-glow { opacity: 0.3; }
.btn-text { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; }

.btn-danger-outline {
  width: 100%; padding: 12px; background: transparent; border: 1px solid var(--red);
  border-radius: var(--radius-sm); color: var(--red); font-family: var(--font-body);
  font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px;
}
.btn-danger-outline:hover { background: var(--red-dim); }

.form-footer { text-align: center; font-size: 0.85rem; color: var(--text-muted); }
.footer-link { color: var(--accent); cursor: pointer; margin-left: 6px; }
.footer-link:hover { color: #fff; text-decoration: underline; }


/* ══════════════════════════════════════════════════════════
   CHAT SCREEN LAYOUT
══════════════════════════════════════════════════════════ */
/* 在全局样式里找到 #active-chat-view，加上 */
#active-chat-view { display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden; }

#chat-screen { flex-direction: column; background: var(--bg-void); }

/* ─── Top Nav ─── */
.top-nav {
  height: var(--top-nav-h); background: var(--bg-panel); border-bottom: 1px solid var(--border-dim);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; flex-shrink: 0; position: relative; z-index: 200;
}
.top-nav::after { content:''; position:absolute; bottom:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:0.5; }

.mobile-menu-btn { display: none; background:none; border:none; color:var(--text-secondary); font-size:1.1rem; cursor:pointer; padding:8px; margin-right:4px; border-radius:var(--radius-sm); transition:color var(--transition); }
.mobile-menu-btn:hover { color: var(--accent); }

.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-logo { font-family: var(--font-display); font-size: 1.4rem; font-weight: 900; color: var(--amber); text-shadow: 0 0 15px var(--amber-glow); }
.nav-title { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: var(--text-primary); letter-spacing: 0.1em; }
.nav-status { display: flex; align-items: center; gap: 5px; background: var(--bg-base); padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border-dim); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.status-dot.pulse { animation: statusPulse 2s ease-in-out infinite; }
@keyframes statusPulse { 0%,100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 4px transparent; } }
.status-text { font-family: var(--font-mono); font-size: 0.67rem; color: var(--accent); letter-spacing: 0.06em; }

.nav-center { display: flex; flex-direction: column; align-items: center; }
.nav-time { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--amber); letter-spacing: 0.1em; line-height: 1; }
.nav-date { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.08em; }

.nav-user { display: flex; align-items: center; gap: 12px; }
.user-info { display: flex; align-items: center; gap: 9px; }
.user-avatar-sm {
  width: 34px; height: 34px; border-radius: 50%; background: var(--bg-active);
  border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; color: var(--accent);
  text-transform: uppercase; flex-shrink: 0; overflow: hidden; cursor: pointer;
}
.user-avatar-sm img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.user-details { display: flex; flex-direction: column; gap: 2px; }
.user-name-sm { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); line-height: 1; }
.user-role-badge { font-family: var(--font-mono); font-size: 0.62rem; padding: 1px 6px; border-radius: 3px; letter-spacing: 0.04em; width: fit-content; }
.nav-actions { display: flex; gap: 6px; }
.nav-btn { width: 34px; height: 34px; background: var(--bg-base); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition); font-size: 0.9rem; }
.nav-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.nav-btn.danger:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }

/* ─── Theme Toggle Button ─── */
#theme-toggle-btn i { transition: transform 0.4s ease; }
#theme-toggle-btn:hover i { transform: rotate(20deg); }

/* ─── Layout ─── */
.chat-layout { flex: 1; display: flex; overflow: hidden; position: relative; }

/* Sidebar overlay (mobile) */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 199; backdrop-filter: blur(2px); }


/* ══════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════ */

.sidebar {
  width: 450px; flex-shrink: 0; background: var(--bg-surface);
  border-right: 1px solid var(--border-dim); display: flex; flex-direction: column;
  overflow: hidden; transition: transform 0.3s ease; z-index: 200;
}

.sidebar-search { padding: 10px; border-bottom: 1px solid var(--border-dim); }
.search-input-wrap { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: 9px; color: var(--text-muted); font-size: 0.8rem; pointer-events: none; }
.search-input { width: 100%; background: var(--bg-base); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); padding: 8px 10px 8px 30px; color: var(--text-primary); font-family: var(--font-body); font-size: 0.85rem; outline: none; transition: border-color var(--transition); }
.search-input:focus { border-color: var(--accent); }
.search-input::placeholder { color: var(--text-muted); }

.sidebar-tabs { display: flex; border-bottom: 1px solid var(--border-dim); }
.sidebar-tab { flex:1; padding:10px 4px; background:none; border:none; color:var(--text-muted); cursor:pointer; font-family:var(--font-body); font-size:0.72rem; font-weight:600; display:flex; align-items:center; justify-content:center; gap:5px; transition:all var(--transition); position:relative; }
.sidebar-tab:hover { color: var(--text-secondary); background: var(--bg-hover); }
.sidebar-tab.active { color: var(--accent); background: var(--accent-dim); }
.sidebar-tab.active::after { content:''; position:absolute; bottom:0;left:0;right:0;height:2px;background:var(--accent); }

.sidebar-content { flex:1; overflow-y:auto; padding:6px 0; }
.section-header { display:flex; align-items:center; justify-content:space-between; padding:7px 13px 3px; font-family:var(--font-mono); font-size:0.65rem; font-weight:700; color:var(--text-muted); letter-spacing:0.14em; text-transform:uppercase; }
.create-btn { width:20px;height:20px;background:none;border:1px solid var(--border-dim);border-radius:3px;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.75rem;transition:all var(--transition); }
.create-btn:hover { border-color:var(--accent); color:var(--accent); }

/* Channel / Private items */
.channel-item { display:flex;align-items:center;gap:9px;padding:8px 13px;cursor:pointer;transition:background var(--transition);border-left:2px solid transparent; }
.channel-item:hover { background: var(--bg-hover); }
.channel-item.active { background:var(--accent-dim);border-left-color:var(--accent); }
.channel-hash { font-family:var(--font-mono);font-size:0.95rem;color:var(--text-muted);flex-shrink:0;width:15px;text-align:center; }
.channel-info { flex:1;min-width:0; }
.channel-name { font-size:0.88rem;font-weight:600;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--transition); }
.channel-item:hover .channel-name,.channel-item.active .channel-name { color: var(--text-primary); }
.channel-desc { font-size:0.7rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.channel-badge { background:var(--red);color:#fff;font-size:0.62rem;font-weight:700;border-radius:10px;padding:1px 6px;min-width:17px;text-align:center;flex-shrink:0; }

.private-item { display:flex;align-items:center;gap:9px;padding:8px 13px;cursor:pointer;transition:background var(--transition);border-left:2px solid transparent; }
.private-item:hover { background: var(--bg-hover); }
.private-item.active { background:var(--accent-dim);border-left-color:var(--accent); }
.private-avatar { width:36px;height:36px;border-radius:50%;background:var(--bg-active);border:2px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:0.72rem;font-weight:700;color:var(--accent);flex-shrink:0;text-transform:uppercase;position:relative;overflow:hidden; }
.private-avatar img { width:100%;height:100%;object-fit:cover;border-radius:50%; }
.online-dot { position:absolute;bottom:0;right:0;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-surface); }
.private-info { flex:1;min-width:0; }
.private-name { font-size:0.88rem;font-weight:600;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.private-item:hover .private-name,.private-item.active .private-name { color:var(--text-primary); }
.private-last { font-size:0.7rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

/* Online users */
.online-list .user-item { display:flex;align-items:center;gap:9px;padding:8px 13px;cursor:pointer;transition:background var(--transition); }
.online-list .user-item:hover { background: var(--bg-hover); }
.online-avatar { width:32px;height:32px;border-radius:50%;background:var(--bg-active);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:0.68rem;font-weight:700;text-transform:uppercase;flex-shrink:0;position:relative;overflow:hidden; }
.online-avatar img { width:100%;height:100%;object-fit:cover;border-radius:50%; }
.online-badge { background:var(--accent);color:var(--bg-void);font-size:0.62rem;font-weight:700;border-radius:10px;padding:1px 8px; }

.loading-shimmer { height:42px;margin:3px 10px;background:linear-gradient(90deg,var(--bg-hover),var(--bg-active),var(--bg-hover));background-size:200% 100%;border-radius:var(--radius-sm);animation:shimmer 1.5s infinite; }
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

.empty-state { display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 16px;color:var(--text-muted);font-size:0.82rem;text-align:center; }
/* ══════════════════════════════════════════════════════════
   SIDEBAR PROFILE TAB
══════════════════════════════════════════════════════════ */

/* Hero Card */
.sp-hero-card {
  display: flex; align-items: center; gap: 13px;
  padding: 18px 14px 14px;
  background: linear-gradient(135deg, var(--bg-panel), var(--bg-card));
  border-bottom: 1px solid var(--border-dim);
  position: relative;
}
.sp-avatar-wrap { position: relative; cursor: pointer; flex-shrink: 0; }
.sp-avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--bg-active); border: 2.5px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
  color: var(--accent); text-transform: uppercase; overflow: hidden;
  box-shadow: 0 0 16px var(--accent-glow); transition: filter var(--transition);
}
.sp-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.sp-avatar-wrap:hover .sp-avatar { filter: brightness(0.75); }
.sp-avatar-edit {
  position: absolute; inset:0; border-radius:50%; background:rgba(0,0,0,0.45);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:0.8rem; opacity:0; transition:opacity var(--transition);
}
.sp-avatar-wrap:hover .sp-avatar-edit { opacity:1; }

.sp-hero-info { flex:1; min-width:0; }
.sp-hero-name {
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 700;
  color: var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom: 3px;
}
.sp-hero-id {
  font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted);
  letter-spacing: 0.04em; margin-bottom: 6px;
}
.sp-role { font-size: 0.6rem !important; padding: 2px 8px !important; }

.sp-edit-btn {
  background: none; border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer; padding: 6px 8px;
  font-size: 0.85rem; transition: all var(--transition); flex-shrink:0;
}
.sp-edit-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* Stats Row */
.sp-stats-row {
  display: flex; align-items: stretch;
  background: var(--bg-panel); border-bottom: 1px solid var(--border-dim);
}
.sp-stat-card {
  flex: 1; padding: 12px 8px; display: flex; flex-direction: column;
  align-items: center; gap: 4px; cursor: pointer; transition: background var(--transition);
}
.sp-stat-card:hover { background: var(--bg-hover); }
.sp-stat-num {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  color: var(--text-primary); line-height:1;
}
.sp-stat-label { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-muted); letter-spacing: 0.06em; }
.sp-stat-sep { width: 1px; background: var(--border-dim); margin: 8px 0; }

/* Quick Actions */
.sp-actions-section {
  background: var(--bg-panel); border-bottom: 1px solid var(--border-dim);
  padding: 14px 10px 10px;
}
.sp-actions-grid {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.sp-action-item {
  flex: 0 0 calc(25% - 3px); display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding: 10px 4px 8px;
  cursor: pointer; border-radius: var(--radius-md);
  transition: background var(--transition); text-align: center;
}
.sp-action-item:nth-child(5) { flex: 0 0 calc(25% - 3px); }
.sp-action-item:hover { background: var(--bg-hover); }
.sp-action-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-dim); border: 1px solid var(--border-mid);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 1rem;
  transition: all var(--transition);
}
.sp-action-item:hover .sp-action-icon { background: var(--accent); color: var(--bg-void); }
.sp-action-item span {
  font-size: 0.65rem; color: var(--text-secondary); font-weight: 600;
  letter-spacing: 0.02em; line-height: 1.2;
}

/* Menu List */
.sp-menu-list {
  background: var(--bg-panel); margin-top: 8px;
  border-top: 1px solid var(--border-dim); border-bottom: 1px solid var(--border-dim);
}
.sp-menu-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px; cursor: pointer; transition: background var(--transition);
  border-bottom: 1px solid var(--border-dim);
}
.sp-menu-item:last-child { border-bottom: none; }
.sp-menu-item:hover { background: var(--bg-hover); }
.sp-menu-item.danger-item:hover { background: var(--red-dim); }
.sp-menu-item.danger-item .sp-menu-left { color: var(--red); }
.sp-menu-item.danger-item .sp-menu-icon { color: var(--red); }
.sp-menu-left {
  display: flex; align-items: center; gap: 11px;
  font-size: 0.88rem; font-weight: 600; color: var(--text-primary);
}
.sp-menu-icon { width:18px; text-align:center; color: var(--accent); font-size: 0.9rem; }
.sp-menu-arrow { font-size: 0.7rem; color: var(--text-muted); }

/* Edit Modal Field */
.sp-edit-field { display: flex; flex-direction: column; gap: 6px; }
.sp-edit-label {
  font-size: 0.75rem; font-family: var(--font-mono); color: var(--text-muted);
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
}


/* ══════════════════════════════════════════════════════════
   CHAT MAIN
══════════════════════════════════════════════════════════ */

.chat-main { flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative; }
.chat-view { display:none;flex-direction:column;height:100%; }
.chat-view.active { display:flex; }

/* Welcome */
#welcome-view { align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(0,212,160,0.03) 0%,transparent 70%); }
.welcome-content { text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px; }
.welcome-hex { font-family:var(--font-display);font-size:5rem;font-weight:900;color:var(--amber);opacity:0.2;line-height:1; }
.welcome-title { font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--text-secondary);letter-spacing:0.1em; }
.welcome-sub { font-size:0.88rem;color:var(--text-muted); }
.welcome-tips { display:flex;gap:16px;margin-top:20px;flex-wrap:wrap;justify-content:center; }
.tip-item { display:flex;align-items:flex-start;gap:10px;background:var(--bg-panel);border:1px solid var(--border-dim);border-radius:var(--radius-md);padding:14px;max-width:170px;text-align:left; }
.tip-icon { font-size:1.3rem;flex-shrink:0;color:var(--accent);margin-top:2px; }
.tip-item strong { display:block;font-size:0.82rem;color:var(--accent);margin-bottom:3px; }
.tip-item p { font-size:0.75rem;color:var(--text-muted); }

/* Chat Header */
.chat-header { padding:10px 16px;border-bottom:1px solid var(--border-dim);background:var(--bg-panel);display:flex;align-items:center;justify-content:space-between;flex-shrink:0; }
.chat-header-info { display:flex;align-items:center;gap:10px; }
.back-btn { display:none;background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:6px;font-size:1rem;transition:color var(--transition);border-radius:var(--radius-sm); }
.back-btn:hover { color:var(--accent); }
.chat-avatar { width:38px;height:38px;border-radius:var(--radius-sm);background:var(--bg-active);border:1px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:0.85rem;font-weight:700;color:var(--accent);text-transform:uppercase;flex-shrink:0;overflow:hidden; }
.chat-avatar img { width:100%;height:100%;object-fit:cover; }
.chat-name { font-family:var(--font-body);font-size:0.95rem;font-weight:700;color:var(--text-primary); }
.chat-meta { font-family:var(--font-mono);font-size:0.68rem;color:var(--text-muted);letter-spacing:0.04em; }
.chat-header-actions { display:flex;gap:7px; }
.header-btn { width:34px;height:34px;background:var(--bg-base);border:1px solid var(--border-dim);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);font-size:0.85rem; }
.header-btn:hover { border-color:var(--accent);color:var(--accent);background:var(--accent-dim); }
.header-btn.danger:hover { border-color:var(--red);color:var(--red);background:var(--red-dim); }

/* Messages */
.messages-area { flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:2px;min-height:0;-webkit-overflow-scrolling:touch; }
#messages-list { display:flex;flex-direction:column;gap:1px;min-height:100%;/*justify-content:flex-end;*/ margin-top: auto}


.message-item { display:flex;gap:10px;padding:4px 6px;border-radius:var(--radius-sm);transition:background 0.15s;position:relative; }
.message-item:hover { background:rgba(255,255,255,0.02); }
.message-item.own { flex-direction:row-reverse; }
.msg-avatar { width:34px;height:34px;border-radius:50%;background:var(--bg-active);border:2px solid var(--border-dim);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:0.65rem;font-weight:700;text-transform:uppercase;flex-shrink:0;align-self:flex-start;cursor:pointer;overflow:hidden; }
.msg-avatar img { width:100%;height:100%;object-fit:cover;border-radius:50%; }
.msg-avatar:hover { border-color:var(--accent); }
.msg-content { flex:1;min-width:0;max-width:78%;display:flex;flex-direction:column;align-items:flex-start; }
.message-item.own .msg-content { align-items:flex-end;display:flex;flex-direction:column; }
.msg-header { display:flex;align-items:baseline;gap:7px;margin-bottom:3px; }
.message-item.own .msg-header { flex-direction:row-reverse; }
.msg-author { font-size:0.8rem;font-weight:700;cursor:pointer; }
.msg-author:hover { text-decoration:underline; }
.msg-time { font-family:var(--font-mono);font-size:0.62rem;color:var(--text-muted); }
.msg-bubble { display:inline-block;width:fit-content;max-width:100%;background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--radius-md);padding:8px 12px;font-size:0.88rem;line-height:1.55;color:var(--text-primary);word-break:break-word; }
.message-item.own .msg-bubble { background:var(--accent-dim);border-color:var(--border-bright); }
.msg-image { max-width:280px;max-height:180px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--border-dim);transition:opacity var(--transition); }
.msg-image:hover { opacity:0.85; }

.system-message { text-align:center;padding:6px 16px;font-family:var(--font-mono);font-size:0.68rem;color:var(--text-muted);border-top:1px solid var(--border-dim);border-bottom:1px solid var(--border-dim);background:rgba(0,212,160,0.02);margin:6px 0;letter-spacing:0.04em; }
.message-item.consecutive { padding-top:1px; }
.message-item.consecutive .msg-avatar { opacity:0; }
.message-item.consecutive .msg-header { display:none; }

.scroll-bottom-btn { position:absolute;bottom:14px;right:14px;width:32px;height:32px;background:var(--bg-panel);border:1px solid var(--border-mid);border-radius:50%;color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,0.4);transition:all var(--transition);z-index:10;font-size:0.8rem; }
.scroll-bottom-btn:hover { background:var(--accent-dim); }

/* Typing */
.typing-indicator { padding:5px 20px;display:flex;align-items:center;gap:5px;font-size:0.78rem;color:var(--text-muted);font-family:var(--font-mono); }
.typing-dots { display:flex;gap:3px;align-items:center; }
.typing-dots span { width:5px;height:5px;border-radius:50%;background:var(--accent);animation:typingDot 1.2s infinite; }
.typing-dots span:nth-child(2) { animation-delay:0.2s; }
.typing-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes typingDot { 0%,100%{opacity:0.3;transform:scale(1);} 50%{opacity:1;transform:scale(1.2);} }

/* Input Area */
.chat-input-area { padding:10px 16px 14px;background:var(--bg-panel);border-top:1px solid var(--border-dim);flex-shrink:0;position:relative; }
.input-toolbar { display:flex;gap:2px;margin-bottom:7px; }
.toolbar-btn { background:none;border:none;color:var(--text-muted);cursor:pointer;padding:5px 9px;border-radius:var(--radius-sm);font-size:1rem;transition:all var(--transition);display:flex;align-items:center;min-height:36px;min-width:36px;justify-content:center; }
.toolbar-btn:hover { background:var(--bg-hover);color:var(--text-primary); }
.input-row { display:flex;gap:9px;align-items:flex-end; }
.message-input-wrap { flex:1;position:relative; }
.message-input { width:100%;background:var(--bg-base);border:1px solid var(--border-mid);border-radius:var(--radius-md);padding:10px 13px;color:var(--text-primary);font-family:var(--font-body);font-size:0.92rem;line-height:1.5;resize:none;outline:none;min-height:42px;max-height:140px;transition:all var(--transition);overflow-y:auto; }
.message-input:focus { border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim); }
.message-input::placeholder { color:var(--text-muted); }
.send-btn { width:42px;height:42px;background:var(--accent);border:none;border-radius:var(--radius-md);color:var(--bg-void);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);flex-shrink:0;font-size:1rem; }
.send-btn:hover { background:#00f0b5;box-shadow:0 0 15px var(--accent-glow);transform:translateY(-1px); }
.send-btn:active { transform:translateY(0); }

/* Emoji Picker */
.emoji-picker { position:absolute;bottom:calc(100% + 8px);left:16px;background:var(--bg-panel);border:1px solid var(--border-mid);border-radius:var(--radius-md);padding:10px;box-shadow:var(--shadow-panel);z-index:50; }
.emoji-grid { display:grid;grid-template-columns:repeat(8,1fr);gap:3px;max-width:268px; }
.emoji-btn { width:28px;height:28px;background:none;border:none;cursor:pointer;font-size:1.1rem;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:background var(--transition); }
.emoji-btn:hover { background:var(--bg-hover); }


/* ══════════════════════════════════════════════════════════
   MEMBER PANEL
══════════════════════════════════════════════════════════ */

.member-panel { width:210px;flex-shrink:0;background:var(--bg-surface);border-left:1px solid var(--border-dim);overflow-y:auto;padding:0; }
.member-panel-header { padding:12px 14px;border-bottom:1px solid var(--border-dim);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg-surface);z-index:5; }
.member-panel-header h4 { font-family:var(--font-mono);font-size:0.72rem;font-weight:700;color:var(--text-secondary);letter-spacing:0.12em;text-transform:uppercase;display:flex;align-items:center;gap:7px; }
.close-btn { background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:0.9rem;padding:3px;transition:color var(--transition);line-height:1; }
.close-btn:hover { color:var(--red); }
.member-groups { padding:6px 0; }
.member-group { margin-bottom:6px; }
.member-group-title { display:flex;align-items:center;gap:5px;padding:5px 14px 3px;font-family:var(--font-mono);font-size:0.62rem;font-weight:700;color:var(--text-muted);letter-spacing:0.1em;text-transform:uppercase; }
.role-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; }
.role-dot.admin { background:var(--amber); }
.role-dot.escort { background:#9b59b6; }
.role-dot.service { background:var(--blue); }
.role-dot.customer { background:var(--text-muted); }
.member-count { margin-left:auto;background:var(--bg-active);border-radius:10px;padding:1px 6px;font-size:0.62rem; }
.member-item { display:flex;align-items:center;gap:7px;padding:5px 14px;cursor:pointer;transition:background var(--transition); }
.member-item:hover { background:var(--bg-hover); }
.member-item-avatar { width:26px;height:26px;border-radius:50%;background:var(--bg-active);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:0.58rem;font-weight:700;text-transform:uppercase;flex-shrink:0;overflow:hidden; }
.member-item-avatar img { width:100%;height:100%;object-fit:cover;border-radius:50%; }
.member-item-name { font-size:0.82rem;font-weight:600;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }


/* ══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION
══════════════════════════════════════════════════════════ */

.mobile-bottom-nav {
  display: none;
  height: var(--bottom-nav-h);
  background: var(--bg-panel);
  border-top: 1px solid var(--border-dim);
  flex-shrink: 0;
  position: relative;
  z-index: 150;
}

.mobile-bottom-nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.4;
}

.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-family: var(--font-body); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.04em; transition: all var(--transition); position: relative;
  padding: 6px 4px;
}
.bottom-nav-item i { font-size: 1.1rem; transition: all var(--transition); }
.bottom-nav-item.active { color: var(--accent); }
.bottom-nav-item.active i { text-shadow: 0 0 10px var(--accent-glow); }
.bottom-nav-item:active { transform: scale(0.95); }

.bnav-badge {
  position: absolute; top: 6px; right: calc(50% - 16px);
  background: var(--red); color: #fff; font-size: 0.58rem; font-weight: 700;
  border-radius: 10px; padding: 1px 5px; min-width: 16px; text-align: center;
}


/* ══════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s ease; padding: 16px;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.modal {
  background: var(--bg-panel); border: 1px solid var(--border-mid); border-radius: var(--radius-lg);
  width: 420px; max-width: 100%; max-height: calc(100vh - 40px);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-panel), 0 0 40px rgba(0,0,0,0.5); animation: modalSlide 0.25s ease;
}
@keyframes modalSlide { from{transform:translateY(-10px) scale(0.98);opacity:0;} to{transform:translateY(0) scale(1);opacity:1;} }
.modal.admin-modal { width: 560px; }
.modal.small-modal { width: 300px; }

/* Full-screen profile modal on mobile */
.modal.profile-modal-full { width: 500px; }

.modal-header { padding:16px 20px;border-bottom:1px solid var(--border-dim);display:flex;align-items:center;justify-content:space-between;flex-shrink:0; }
.modal-header h3 { font-family:var(--font-display);font-size:0.85rem;font-weight:700;color:var(--text-primary);letter-spacing:0.08em;display:flex;align-items:center;gap:8px; }
.modal-body { padding:20px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:14px; }
.modal-desc { font-size:0.88rem;color:var(--text-secondary); }


/* ═══ MY PROFILE MODAL ═══ */
.profile-body { gap: 16px; }

.my-profile-hero {
  display: flex; align-items: center; gap: 20px; padding: 20px;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-active));
  border-radius: var(--radius-lg); border: 1px solid var(--border-mid);
}

.my-avatar-wrap {
  position: relative; cursor: pointer; flex-shrink: 0;
  width: 80px; height: 80px; border-radius: 50%;
}
.my-avatar-display {
  width: 80px; height: 80px; border-radius: 50%; background: var(--bg-active);
  border: 3px solid var(--accent); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--accent);
  text-transform: uppercase; overflow: hidden; transition: filter var(--transition);
  box-shadow: 0 0 20px var(--accent-glow);
}
.my-avatar-display img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.my-avatar-wrap:hover .my-avatar-display { filter: brightness(0.7); }
.avatar-upload-overlay {
  position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,0.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: #fff; font-size: 0.65rem; font-weight: 600;
  opacity: 0; transition: opacity var(--transition); letter-spacing: 0.04em;
}
.avatar-upload-overlay i { font-size: 1.1rem; }
.my-avatar-wrap:hover .avatar-upload-overlay { opacity: 1; }

.my-profile-info { flex: 1; min-width: 0; }
.my-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.my-username { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); margin-bottom: 8px; }
.my-role-badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.68rem; padding: 3px 10px; border-radius: 20px; }

.profile-section { background: var(--bg-base); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 14px; }
.section-title { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.section-title i { color: var(--accent); }

.bio-input { resize: none; min-height: 72px; font-size: 0.88rem; line-height: 1.5; }
.bio-count { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); text-align: right; margin-top: 4px; }

/* Profile Stats */
.profile-stats-row {
  display: flex; gap: 0; background: var(--bg-base); border: 1px solid var(--border-dim);
  border-radius: var(--radius-md); overflow: hidden;
}
.pstat-item { flex: 1; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; border-right: 1px solid var(--border-dim); }
.pstat-item:last-child { border-right: none; }
.pstat-num { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--accent); }
.pstat-label { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.08em; }


/* Admin Panel */
.admin-tabs { display:flex;gap:0;border-bottom:1px solid var(--border-dim);margin-bottom:14px; }
.admin-tab { flex:1;padding:10px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);font-family:var(--font-body);font-size:0.83rem;font-weight:600;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;justify-content:center;gap:6px; }
.admin-tab:hover { color:var(--text-secondary); }
.admin-tab.active { color:var(--accent);border-bottom-color:var(--accent); }
.admin-search { margin-bottom:10px; }
.admin-user-list,.admin-channel-list { display:flex;flex-direction:column;gap:4px;max-height:340px;overflow-y:auto; }
.admin-user-item { display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--bg-base);border:1px solid var(--border-dim);border-radius:var(--radius-sm);transition:border-color var(--transition); }
.admin-user-item:hover { border-color:var(--border-mid); }
.admin-user-info { flex:1;min-width:0; }
.admin-user-name { font-size:0.88rem;font-weight:600;color:var(--text-primary); }
.admin-user-meta { font-family:var(--font-mono);font-size:0.67rem;color:var(--text-muted); }
.admin-role-select { background:var(--bg-surface);border:1px solid var(--border-mid);border-radius:var(--radius-sm);padding:4px 7px;color:var(--text-primary);font-family:var(--font-body);font-size:0.78rem;cursor:pointer;outline:none; }

/* Role Options */
.role-options { display:grid;grid-template-columns:1fr 1fr;gap:9px; }
.role-option { display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px;background:var(--bg-base);border:1px solid var(--border-dim);border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-body);font-size:0.82rem;font-weight:600;color:var(--text-secondary);transition:all var(--transition); }
.role-icon { font-size:1.3rem; }
.role-option:hover { color:var(--text-primary);transform:translateY(-2px); }
.role-option.admin:hover  { border-color:var(--amber);background:var(--amber-dim);color:var(--amber); }
.role-option.escort:hover { border-color:#9b59b6;background:rgba(155,89,182,0.15);color:#9b59b6; }
.role-option.service:hover{ border-color:var(--blue);background:rgba(52,152,219,0.15);color:var(--blue); }
.role-option.customer:hover{ border-color:var(--accent);background:var(--accent-dim);color:var(--accent); }

/* Search Results */
.user-search-results { max-height:260px;overflow-y:auto;border:1px solid var(--border-dim);border-radius:var(--radius-md);background:var(--bg-base); }
.search-user-item { display:flex;align-items:center;gap:9px;padding:11px 13px;cursor:pointer;transition:background var(--transition);border-bottom:1px solid var(--border-dim); }
.search-user-item:last-child { border-bottom:none; }
.search-user-item:hover { background:var(--bg-hover); }

/* Radio Group */
.radio-group { display:flex;gap:14px; }
.radio-item { display:flex;align-items:center;gap:7px;cursor:pointer;font-size:0.88rem;color:var(--text-secondary); }
.radio-item input[type="radio"] { display:none; }
.radio-custom { width:16px;height:16px;border-radius:50%;border:2px solid var(--border-mid);display:flex;align-items:center;justify-content:center;transition:all var(--transition);flex-shrink:0; }
.radio-item input:checked + .radio-custom { border-color:var(--accent);background:var(--accent);box-shadow:0 0 8px var(--accent-glow); }


/* ══════════════════════════════════════════════════════════
   CONTEXT MENU
══════════════════════════════════════════════════════════ */

.context-menu { position:fixed;background:var(--bg-panel);border:1px solid var(--border-mid);border-radius:var(--radius-md);padding:5px 0;min-width:155px;z-index:2000;box-shadow:var(--shadow-panel);animation:fadeIn 0.15s ease; }
.ctx-item { padding:9px 14px;font-size:0.85rem;cursor:pointer;color:var(--text-secondary);transition:all var(--transition);display:flex;align-items:center;gap:8px; }
.ctx-item:hover { background:var(--accent-dim);color:var(--text-primary); }
.ctx-item.danger-ctx:hover { background:var(--red-dim);color:var(--red); }


/* ══════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
══════════════════════════════════════════════════════════ */

.toast-container { position:fixed;top:66px;right:16px;z-index:9000;display:flex;flex-direction:column;gap:7px;max-width:320px;pointer-events:none; }
.toast { background:var(--bg-panel);border:1px solid var(--border-mid);border-radius:var(--radius-md);padding:11px 14px;display:flex;align-items:flex-start;gap:9px;box-shadow:var(--shadow-panel);animation:toastIn 0.3s ease;pointer-events:all; }
@keyframes toastIn { from{transform:translateX(100%);opacity:0;} to{transform:translateX(0);opacity:1;} }
@keyframes toastOut { from{transform:translateX(0);opacity:1;} to{transform:translateX(100%);opacity:0;} }
.toast.success { border-left:3px solid var(--accent); }
.toast.error   { border-left:3px solid var(--red); }
.toast.warn    { border-left:3px solid var(--amber); }
.toast.info    { border-left:3px solid var(--blue); }
.toast-icon { font-size:0.95rem;flex-shrink:0;margin-top:1px; }
.toast-text { font-size:0.82rem;color:var(--text-secondary);line-height:1.4; }
.toast-title { font-weight:700;color:var(--text-primary);display:block;margin-bottom:1px; }


/* ══════════════════════════════════════════════════════════
   ROLE COLORS
══════════════════════════════════════════════════════════ */

.role-admin    { background:rgba(245,166,35,0.15);color:var(--amber);border:1px solid rgba(245,166,35,0.3); }
.role-escort   { background:rgba(155,89,182,0.15);color:#c39bd3;border:1px solid rgba(155,89,182,0.3); }
.role-service  { background:rgba(52,152,219,0.15);color:#7fb3d3;border:1px solid rgba(52,152,219,0.3); }
.role-customer { background:rgba(0,212,160,0.1);color:var(--accent);border:1px solid rgba(0,212,160,0.2); }
.author-admin   { color:var(--amber); }
.author-escort  { color:#c39bd3; }
.author-service { color:#7fb3d3; }
.author-customer{ color:var(--accent); }
.avatar-admin   { border-color:var(--amber) !important;color:var(--amber) !important; }
.avatar-escort  { border-color:#9b59b6 !important;color:#c39bd3 !important; }
.avatar-service { border-color:var(--blue) !important;color:#7fb3d3 !important; }
.avatar-customer{ border-color:var(--accent) !important;color:var(--accent) !important; }


/* ══════════════════════════════════════════════════════════
   PARTICLES & DATE SEPARATOR
══════════════════════════════════════════════════════════ */

.particle { position:absolute;border-radius:50%;pointer-events:none;background:var(--accent);opacity:0;animation:particleFloat linear infinite; }
@keyframes particleFloat { 0%{opacity:0;transform:translateY(0) scale(0);} 10%{opacity:0.6;} 90%{opacity:0.3;} 100%{opacity:0;transform:translateY(-100vh) scale(1);} }

.date-separator { display:flex;align-items:center;gap:10px;padding:14px 0 6px;color:var(--text-muted);font-family:var(--font-mono);font-size:0.67rem;letter-spacing:0.08em; }
.date-separator::before,.date-separator::after { content:'';flex:1;height:1px;background:var(--border-dim); }

/* Image Preview */
.image-preview-overlay { background:rgba(0,0,0,0.92);cursor:zoom-out; }
.image-preview-full { max-width:92vw;max-height:92vh;object-fit:contain;border-radius:var(--radius-md); }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE - TABLET
══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .auth-brand { flex: 0 0 360px; }
  .auth-panel { flex: 0 0 380px; }
  .auth-container { gap: 40px; }
  .member-panel { display: none; }
}

@media (max-width: 800px) {
  .auth-container { flex-direction: column; padding: 20px; overflow-y: auto; align-items: center; }
  .auth-brand { flex: none; width: 100%; max-width: 420px; align-items: center; text-align: center;}
  .brand-subtitle { align-self: center; }
  .auth-panel { flex: none; width: 100%; max-width: 420px; }
  .sidebar { width: 240px; }
  .nav-center { display: none; }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE - MOBILE (≤ 640px)
══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    #theme-toggle-btn { display: flex; }
    /* 隐藏侧边栏 Tab，底部菜单已覆盖 */
.sidebar-tabs { display: none; }
  /* Auth */
  .auth-container { padding: 16px; gap: 20px; }
  .auth-brand { gap: 14px; }
  .title-delta { font-size: 2rem; }
  .logo-hex { width: 70px; height: 80px; }
  .brand-stats { display: none; }

  /* Top Nav */
  .top-nav { padding: 0 12px; }
  .mobile-menu-btn { display: none; }   /* 隐藏汉堡菜单 */
  .nav-title { display: none; }
  .nav-status { display: none; }
  .user-details { display: none; }
  .nav-actions { display: none; }

  /* ── WeChat 风格：列表/聊天 全屏切换 ── */
  
  .chat-layout {
  position: relative;
  height: calc(100vh - var(--top-nav-h) - var(--bottom-nav-h));
  overflow: hidden;   /* 保留，用于侧边栏/聊天区滑动动画 */
}
/* active-chat-view 需要能在内部滚动 */
.chat-layout.chat-active .chat-main { overflow: hidden; }

  /* 侧边栏：占满左侧，默认可见 */
  .sidebar {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform: translateX(0);
    transition: transform 0.3s ease;
    z-index: 10;
    box-shadow: none;
  }

  /* 聊天区：默认在右侧隐藏 */
.chat-main {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 20;
  display: flex;          /* ← 新增 */
  flex-direction: column; /* ← 新增 */
  overflow: hidden;       /* ← 新增 */
}

  /* 进入聊天时：侧边栏左滑隐藏，聊天区滑入 */
  .chat-layout.chat-active .sidebar { transform: translateX(-100%); }
  .chat-layout.chat-active .chat-main { transform: translateX(0); }

  /* 覆盖层不再需要 */
  .sidebar-overlay { display: none !important; }

  /* Bottom Nav 始终显示 */
  .mobile-bottom-nav { display: flex; }

  /* Back button 显示 */
  .back-btn { display: flex; }

  /* Welcome tips */
  .welcome-tips { flex-direction: column; gap: 10px; align-items: center; }
  .tip-item { max-width: 280px; width: 100%; }

  /* Messages area padding */
  .messages-area { padding: 12px 12px; }

  /* Input area */
  .chat-input-area { padding: 8px 12px 12px; }
  .emoji-picker { left: 12px; }
  .emoji-grid { grid-template-columns: repeat(7,1fr); max-width: 240px; }

  /* Profile modal full screen */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal { width: 100%; max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 92vh; }
  .modal.admin-modal { width: 100%; }

  /* Hero section in profile */
  .my-profile-hero { flex-direction: column; align-items: center; text-align: center; }
  .my-profile-info { text-align: center; }
  .my-username { justify-content: center; }
  .my-role-badge { margin: 0 auto; }

  /* Toast */
  .toast-container { left: 12px; right: 12px; max-width: none; top: 70px; }
  
  
  /* ── 手机端个人中心全屏 ── */
.mobile-profile-view {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg-void);
  flex-direction: column;
  overflow: hidden;
}
.mobile-profile-view.active { display: flex; }
.profile-page-header {
  height: var(--top-nav-h);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  flex-shrink: 0;
}
.profile-page-header .back-btn { display: flex; }
.profile-page-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.08em;
}
.profile-page-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
}
}
@media (max-width: 380px) {
  .title-delta { font-size: 1.7rem; }
  .emoji-grid { grid-template-columns: repeat(6,1fr); }
}