/* ═══════════════════════════════════════════════════════
   Tenord Messenger — Premium Design System & Animations
   ═══════════════════════════════════════════════════════ */

/* ─── CSS Variables (Light Theme) ──────────────────── */
:root {
  /* Primary */
  --primary: #6c5ce7;
  --primary-light: #a29bfe;
  --primary-dark: #5341d6;
  --primary-bg: rgba(108, 92, 231, 0.08);
  --primary-bg-hover: rgba(108, 92, 231, 0.14);
  --primary-glow: rgba(108, 92, 231, 0.25);

  /* Background */
  --bg-main: #f0f2f5;
  --bg-sidebar: #ffffff;
  --bg-chat: #e8ecf1;
  --bg-input: #ffffff;
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-active: rgba(108, 92, 231, 0.1);
  --bg-modal: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.45);
  --bg-tooltip: #333;
  --bg-ripple: rgba(0, 0, 0, 0.08);

  /* Messages */
  --msg-in: #ffffff;
  --msg-out: #effdde;
  --msg-out-hover: #e2faca;
  --text-primary: #000000;
  --text-secondary: #707579;
  --text-tertiary: #aaaaaa;
  --text-danger: #e53935;
  --text-link: #6c5ce7;
  --border: #dfe1e5;
  --border-input: #dfe1e5;
  --border-light: rgba(0,0,0,0.06);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.15);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.2);
  --shadow-glow: 0 0 20px var(--primary-glow);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 50%;

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);

  /* Layout */
  --sidebar-width: 360px;
  --header-height: 60px;
  --input-height: 56px;
  --avatar-sm: 36px;
  --avatar-md: 48px;
  --avatar-lg: 80px;
  --avatar-xl: 96px;

  /* Z-index */
  --z-sidebar: 100;
  --z-modal: 1000;
  --z-dropdown: 500;
  --z-context: 600;
  --z-toast: 9999;

  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* ─── Dark Theme ───────────────────────────────────── */
[data-theme="dark"] {
  --primary: #3390ec;
  --primary-light: #5fa8f5;
  --primary-dark: #2b7cd1;
  --primary-bg: rgba(51, 144, 236, 0.15);
  --primary-glow: rgba(51, 144, 236, 0.3);
  --bg-main: #0e1621;
  --bg-sidebar: #17212b;
  --bg-chat: #0e1621;
  --bg-hover: #232e3c;
  --bg-active: #2b5278;
  --bg-modal: #17212b;
  --bg-input: #242f3d;
  --bg-ripple: rgba(255, 255, 255, 0.08);
  --text-primary: #ffffff;
  --text-secondary: #7f91a4;
  --text-tertiary: #6c7883;
  --text-danger: #e53935;
  --text-link: #5fa8f5;
  --msg-in: #18222d;
  --msg-out: #2b5278;
  --border: #101921;
  --border-input: #2a3540;
  --border-light: rgba(255,255,255,0.06);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.4);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.5);
}

/* Verified Badge */
.verified-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  background: #3b82f6;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-sidebar);
  z-index: 2;
}

.verified-badge svg {
  width: 8px;
  height: 8px;
}

.avatar-lg .verified-badge {
  width: 20px;
  height: 20px;
  bottom: 0;
  right: 0;
}

.avatar-lg .verified-badge svg {
  width: 12px;
  height: 12px;
}

.avatar-xl .verified-badge {
  width: 24px;
  height: 24px;
  bottom: 2px;
  right: 2px;
}

.avatar-xl .verified-badge svg {
  width: 16px;
  height: 16px;
}