/* ═══════════════════════════════════════════════════════════════
   Discord V2 — Global Theme  ·  Next-Gen Messaging
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Backgrounds */
  --bg-void:       #07070a;
  --bg-primary:    #0d0e14;
  --bg-secondary:  #12131c;
  --bg-tertiary:   #181924;
  --bg-elevated:   #1e2030;
  --bg-hover:      rgba(255,255,255,0.05);
  --bg-active:     rgba(255,255,255,0.09);
  --glass:         rgba(255,255,255,0.04);
  --glass-border:  rgba(255,255,255,0.08);

  /* Text */
  --text-primary:   #e8eaf6;
  --text-secondary: #9fa3c0;
  --text-muted:     #4a4d6a;
  --text-dim:       #2e3050;

  /* Accent — violet/indigo */
  --accent:        #7c6ff7;
  --accent-2:      #a78bfa;
  --accent-hover:  #9580ff;
  --accent-dim:    rgba(124,111,247,0.15);
  --accent-glow:   rgba(124,111,247,0.4);
  --grad-accent:   linear-gradient(135deg, #7c6ff7 0%, #a78bfa 50%, #c084fc 100%);

  /* Status */
  --green:   #22d3a0;
  --green-bg:rgba(34,211,160,0.12);
  --yellow:  #fbbf24;
  --yellow-bg:rgba(251,191,36,0.12);
  --red:     #f87171;
  --red-bg:  rgba(248,113,113,0.12);
  --blue:    #60a5fa;
  --blue-bg: rgba(96,165,250,0.12);
  --orange:  #fb923c;

  /* Online dots */
  --online:  #22d3a0;
  --idle:    #fbbf24;
  --dnd:     #f87171;
  --offline: #3a3d55;

  /* Borders */
  --border:        rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.13);

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl:24px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
  --shadow:     0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.7);
  --shadow-glow:0 0 40px rgba(124,111,247,0.25);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-void);
  color: var(--text-primary);
  line-height: 1.55;
  overflow: hidden;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* ── Typography ── */
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
input, textarea, button, select { font-family: inherit; }

/* ── Layout utils ── */
.hidden    { display: none !important; }
.flex      { display: flex; }
.flex-col  { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-1    { flex: 1; min-width: 0; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }.gap-4 { gap: 16px; }
.truncate  { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.text-muted{ color:var(--text-muted); }
.text-sm   { font-size:12px; }
.bold      { font-weight:700; }

/* ── Avatar ── */
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  color: #fff; flex-shrink: 0;
  position: relative; overflow: visible;
  user-select: none;
  letter-spacing: 0;
}
.avatar img { width:100%;height:100%;object-fit:cover;border-radius:50%; }
.avatar.sm  { width:28px;height:28px;font-size:11px; }
.avatar.lg  { width:44px;height:44px;font-size:17px; }
.avatar.xl  { width:80px;height:80px;font-size:30px; }
.avatar .inner {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* ── Status dot ── */
.status-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2.5px solid var(--bg-secondary);
  background: var(--offline); z-index: 2;
  flex-shrink: 0;
}
.status-dot.online  { background: var(--online); }
.status-dot.idle    { background: var(--idle); }
.status-dot.dnd     { background: var(--dnd); box-shadow: 0 0 6px var(--dnd); }
.status-dot.gaming  { background: #a78bfa; box-shadow: 0 0 6px #a78bfa; }

/* ── Badge ── */
.badge {
  background: var(--red);
  color: #fff; font-size: 10px; font-weight: 800;
  border-radius: 20px; padding: 2px 7px;
  min-width: 20px; text-align: center; line-height: 1.4;
}
.badge.accent { background: var(--accent); }

/* ── Icon button ── */
.icon-btn {
  width: 32px; height: 32px; border: none;
  background: transparent; color: var(--text-muted);
  border-radius: var(--r-sm); display: flex;
  align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, color .15s;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.icon-btn.active { color: var(--accent-2); }
.icon-btn svg { width: 18px; height: 18px; }

/* ── Pill button ── */
.pill-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px; border: none;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: opacity .15s, transform .1s;
  font-family: inherit;
}
.pill-btn:hover  { opacity: .85; }
.pill-btn:active { transform: scale(.96); }
.pill-btn.primary { background: var(--grad-accent); color: #fff; }
.pill-btn.ghost   { background: var(--glass); border: 1px solid var(--glass-border); color: var(--text-secondary); }
.pill-btn.danger  { background: var(--red-bg); border: 1px solid rgba(248,113,113,.25); color: var(--red); }
.pill-btn.green   { background: var(--green-bg); border: 1px solid rgba(34,211,160,.25); color: var(--green); }

/* ── Glass card ── */
.glass-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px);
}

/* ── Tooltip ── */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-primary); padding: 5px 10px;
  border-radius: var(--r-sm); font-size: 12px; font-weight: 600;
  white-space: nowrap; z-index: 500; pointer-events: none;
  box-shadow: var(--shadow-sm);
}

/* ── Animations ── */
@keyframes fadeIn    { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes popIn     { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }
@keyframes slideUp   { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes shimmer   { 0%,100% { opacity:.4; } 50% { opacity:1; } }
@keyframes pulse     { 0%,100% { transform:scale(1); } 50% { transform:scale(1.12); } }
@keyframes floatIn   { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:none; } }
@keyframes reactionPop { 0% { transform:scale(0) rotate(-20deg); opacity:0; } 70% { transform:scale(1.3) rotate(5deg); } 100% { transform:scale(1) rotate(0); opacity:1; } }
@keyframes msgFlash  { 0% { background:rgba(124,111,247,.18); } 100% { background:transparent; } }
@keyframes neonPulse { 0%,100% { box-shadow:0 0 8px var(--accent-glow); } 50% { box-shadow:0 0 24px var(--accent-glow), 0 0 48px rgba(124,111,247,.2); } }

.anim-fade  { animation: fadeIn .2s ease both; }
.anim-pop   { animation: popIn .18s cubic-bezier(.34,1.56,.64,1) both; }
.anim-slide { animation: slideUp .2s ease both; }