/* ═══════════════════════════════════════════════════════════
   MagLink — BlackGlass Design Tokens
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ═══ BlackGlass Palette ═══ */
  --bg-app: #03060c;
  --bg-primary: #07101d;
  --bg-secondary: #0b1424;
  --bg-chat: #03060c;
  --bg-sidebar: #03060c;
  --bg-header: rgba(10,14,23,0.56);
  --bg-composer: transparent;
  --bg-hover: rgba(255,255,255,0.04);
  --bg-active: rgba(141,150,255,0.12);
  --bg-modal: rgba(11,20,36,0.98);
  --bg-input: rgba(255,255,255,0.05);
  --bg-glass: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));

  /* Bubbles */
  --bg-bubble-out: linear-gradient(135deg, rgba(111,126,255,.20), rgba(133,111,255,.12));
  --bg-bubble-out-solid: rgba(111,126,255,.20);
  --bg-bubble-in: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  --bubble-in-border: rgba(255,255,255,.11);
  --bubble-out-time: rgba(255,255,255,0.6);
  --bubble-out-status: rgba(255,255,255,0.5);
  --bubble-out-status-read: rgba(255,255,255,0.9);
  --bubble-out-text: #f5f8ff;
  --bubble-in-text: #f5f8ff;
  --chat-area-bg: #03060c;
  --chat-bg: #03060c;
  --chat-bg-image: url('/assets/backgrounds/chat-night-mobile.jpg');
  --bubble-in-bg: var(--bg-bubble-in);
  --bubble-out-bg: var(--bg-bubble-out);
  --profile-bg: var(--bg-primary);

  /* Composer */
  --composer-bg: transparent;
  --composer-input-bg: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  --composer-input-border: rgba(255,255,255,.11);
  --composer-input-focus: rgba(141,150,255,0.4);
  --composer-placeholder: #6f7b93;

  /* Voice */
  --voice-btn-bg: rgba(255,255,255,.07);
  --voice-bar: #8d96ff;
  --voice-bar-out: rgba(255,255,255,0.4);
  --voice-bar-played: rgba(255,255,255,0.8);
  --voice-duration: #98a3bb;
  --voice-duration-out: rgba(255,255,255,0.55);

  /* Reply */
  --reply-bg: rgba(141,150,255,0.1);
  --reply-border: #8d96ff;
  --reply-name: #8d96ff;
  --reply-text: #98a3bb;
  --reply-out-bg: rgba(255,255,255,0.12);
  --reply-out-border: rgba(255,255,255,0.6);
  --reply-out-name: rgba(255,255,255,0.85);
  --reply-out-text: rgba(255,255,255,0.55);

  /* Reactions */
  --reaction-bg: rgba(255,255,255,0.08);
  --reaction-out-bg: rgba(255,255,255,0.15);
  --reaction-count: rgba(255,255,255,0.5);
  --reaction-count-out: rgba(255,255,255,0.65);

  /* Text */
  --text-primary: #f5f8ff;
  --text-secondary: #98a3bb;
  --text-time: rgba(255,255,255,0.6);
  --text-link: #8d96ff;
  --text-white: #ffffff;
  --text-on-accent: #ffffff;

  /* Accents — BlackGlass blue-violet */
  --accent: #8d96ff;
  --accent-hover: #6f7cff;
  --accent-light: rgba(141,150,255,0.12);
  --accent-dim: #6f7cff;
  --accent-purple: #8d96ff;
  --accent-gradient: linear-gradient(135deg, #8d96ff, #6f7cff);
  --accent-gradient-btn: linear-gradient(135deg, #8d96ff, #6f7cff);
  --accent-glow: rgba(141,150,255,0.4);
  --neon-glow: 0 0 20px rgba(141,150,255,0.2), 0 0 40px rgba(141,150,255,0.08);

  /* Utility */
  --danger: #ff596a;
  --online: #34d27f;
  --unread-badge: #8d96ff;

  /* Borders */
  --border: rgba(255,255,255,0.06);
  --border-light: rgba(255,255,255,0.03);
  --border-input: rgba(255,255,255,0.11);

  /* Shadows */
  --shadow: rgba(0,0,0,0.26);
  --shadow-lg: rgba(0,0,0,0.46);

  /* Glass */
  --glass-bg: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  --glass-border: rgba(255,255,255,.11);
  --glass-border-hover: rgba(255,255,255,.18);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(255,255,255,.015), 0 18px 34px rgba(0,0,0,.26);
  --glass-blur: blur(18px) saturate(1.14);

  /* Sidebar */
  --sidebar-bg: #03060c;
  --sidebar-border: rgba(255,255,255,0.06);
  --sidebar-item-active-bg: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  --sidebar-item-active-border: #8d96ff;
  --sidebar-item-hover: rgba(255,255,255,0.04);

  /* Auth — always dark glass */
  --auth-bg: #03060c;
  --auth-card-bg: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  --auth-input-bg: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  --auth-input-border: rgba(255,255,255,.11);
  --auth-text: #f5f8ff;
  --auth-text-mute: #6f7b93;
  --auth-btn-gradient: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));

  /* Filter pills */
  --pill-bg: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  --pill-border: rgba(255,255,255,.11);
  --pill-text: #6f7b93;
  --pill-active-bg: linear-gradient(180deg, rgba(255,255,255,.115), rgba(255,255,255,.045));
  --pill-active-text: #ffffff;
  --pill-active-border: rgba(255,255,255,.15);

  /* Tab bar */
  --tab-bg: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  --tab-text: #6f7b93;
  --tab-active: #8d96ff;

  /* Search */
  --search-bg: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  --search-border: rgba(255,255,255,.11);
  --search-focus-border: rgba(141,150,255,0.4);
  --search-placeholder: #6f7b93;

  /* Icons */
  --icon-color: #98a3bb;
  --icon-hover: #8d96ff;

  /* Online dot */
  --online-dot: #34d27f;
  --online-dot-border: rgba(3,6,12,0.95);
  --online-dot-glow: rgba(52,210,127,0.3);

  /* Unread */
  --unread-gradient: linear-gradient(135deg, rgba(141,150,255,.8), rgba(111,124,255,.6));
  --unread-glow: rgba(141,150,255,0.3);

  /* Empty state */
  --empty-icon-gradient: linear-gradient(135deg, #8d96ff, #6f7cff);
  --empty-text: #6f7b93;

  /* Layout */
  --sidebar-width: 340px;
  --header-height: 56px;
  --composer-height: 54px;
  --profile-width: 400px;
  --max-bubble-width: 78%;
  --messages-max-width: 920px;

  /* Typography */
  --font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 19px;
  --font-size-xxl: 24px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-xxl: 22px;
  --radius-bubble: 18px;
  --radius-full: 50%;

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-normal: 220ms ease;
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══ Dark Theme override — same as root (always dark) ═══ */
[data-theme="dark"] {
  /* Already dark by default — no overrides needed */
}

/* ═══ Light Theme ═══ */
[data-theme="light"] {
  --bg-app: #eef1f5;
  --bg-primary: #ffffff;
  --bg-secondary: #f5f7fa;
  --bg-chat: #eef1f5;
  --bg-sidebar: #ffffff;
  --bg-header: rgba(255,255,255,0.85);
  --bg-composer: transparent;
  --bg-hover: rgba(0,0,0,0.04);
  --bg-active: rgba(141,150,255,0.10);
  --bg-modal: rgba(255,255,255,0.98);
  --bg-input: rgba(0,0,0,0.04);
  --bg-glass: linear-gradient(180deg, rgba(255,255,255,1), rgba(245,247,250,1));

  /* Bubbles */
  --bg-bubble-out: linear-gradient(135deg, rgba(141,150,255,0.18), rgba(111,124,255,0.10));
  --bg-bubble-out-solid: rgba(141,150,255,0.18);
  --bg-bubble-in: linear-gradient(180deg, #ffffff, #f5f7fa);
  --bubble-in-border: rgba(0,0,0,0.08);
  --bubble-out-time: rgba(0,0,0,0.45);
  --bubble-out-status: rgba(0,0,0,0.35);
  --bubble-out-status-read: rgba(141,150,255,0.8);
  --bubble-out-text: #1a1a2e;
  --bubble-in-text: #1a1a2e;
  --chat-area-bg: #eef1f5;
  --chat-bg: #eef1f5;
  --chat-bg-image: url('/assets/backgrounds/chat-day-mobile.jpg');
  --bubble-in-bg: var(--bg-bubble-in);
  --bubble-out-bg: var(--bg-bubble-out);
  --profile-bg: var(--bg-primary);

  /* Composer */
  --composer-bg: transparent;
  --composer-input-bg: #ffffff;
  --composer-input-border: rgba(0,0,0,0.10);
  --composer-input-focus: rgba(141,150,255,0.35);
  --composer-placeholder: #8a94a6;

  /* Voice */
  --voice-btn-bg: rgba(0,0,0,0.05);
  --voice-bar: #8d96ff;
  --voice-bar-out: rgba(0,0,0,0.35);
  --voice-bar-played: rgba(141,150,255,0.7);
  --voice-duration: #6b7a8d;
  --voice-duration-out: rgba(0,0,0,0.45);

  /* Reply */
  --reply-bg: rgba(141,150,255,0.08);
  --reply-border: #8d96ff;
  --reply-name: #8d96ff;
  --reply-text: #6b7a8d;
  --reply-out-bg: rgba(255,255,255,0.6);
  --reply-out-border: rgba(0,0,0,0.15);
  --reply-out-name: rgba(0,0,0,0.7);
  --reply-out-text: rgba(0,0,0,0.45);

  /* Reactions */
  --reaction-bg: rgba(0,0,0,0.06);
  --reaction-out-bg: rgba(255,255,255,0.8);
  --reaction-count: rgba(0,0,0,0.45);
  --reaction-count-out: rgba(0,0,0,0.55);

  /* Text */
  --text-primary: #1a1a2e;
  --text-secondary: #6b7a8d;
  --text-time: rgba(0,0,0,0.45);
  --text-link: #6f7cff;
  --text-white: #ffffff;
  --text-on-accent: #ffffff;

  /* Borders */
  --border: rgba(0,0,0,0.08);
  --border-light: rgba(0,0,0,0.04);
  --border-input: rgba(0,0,0,0.12);

  /* Shadows */
  --shadow: rgba(0,0,0,0.08);
  --shadow-lg: rgba(0,0,0,0.15);

  /* Glass */
  --glass-bg: linear-gradient(180deg, rgba(255,255,255,1), rgba(245,247,250,1));
  --glass-border: rgba(0,0,0,0.08);
  --glass-border-hover: rgba(0,0,0,0.14);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(0,0,0,0.02), 0 8px 24px rgba(0,0,0,0.08);
  --glass-blur: blur(12px) saturate(1.2);

  /* Sidebar */
  --sidebar-bg: #ffffff;
  --sidebar-border: rgba(0,0,0,0.08);
  --sidebar-item-active-bg: linear-gradient(90deg, rgba(141,150,255,0.08), rgba(141,150,255,0));
  --sidebar-item-active-border: #8d96ff;
  --sidebar-item-hover: rgba(0,0,0,0.04);

  /* Auth */
  --auth-bg: #eef1f5;
  --auth-card-bg: #ffffff;
  --auth-input-bg: #ffffff;
  --auth-input-border: rgba(0,0,0,0.12);
  --auth-text: #1a1a2e;
  --auth-text-mute: #8a94a6;
  --auth-btn-gradient: linear-gradient(180deg, #f5f7fa, #eef1f5);

  /* Filter pills */
  --pill-bg: #f5f7fa;
  --pill-border: rgba(0,0,0,0.08);
  --pill-text: #6b7a8d;
  --pill-active-bg: #8d96ff;
  --pill-active-text: #ffffff;
  --pill-active-border: #8d96ff;

  /* Tab bar */
  --tab-bg: #f5f7fa;
  --tab-text: #6b7a8d;
  --tab-active: #8d96ff;

  /* Search */
  --search-bg: #f5f7fa;
  --search-border: rgba(0,0,0,0.08);
  --search-focus-border: rgba(141,150,255,0.35);
  --search-placeholder: #8a94a6;

  /* Icons */
  --icon-color: #6b7a8d;
  --icon-hover: #8d96ff;

  /* Online dot */
  --online-dot: #34d27f;
  --online-dot-border: #ffffff;
  --online-dot-glow: rgba(52,210,127,0.25);

  /* Unread */
  --unread-gradient: linear-gradient(135deg, rgba(141,150,255,0.85), rgba(111,124,255,0.65));
  --unread-glow: rgba(141,150,255,0.2);

  /* Empty state */
  --empty-icon-gradient: linear-gradient(135deg, #8d96ff, #6f7cff);
  --empty-text: #8a94a6;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --chat-bg: #eef1f5;
    --chat-bg-image: url('/assets/backgrounds/chat-day-mobile.jpg');
  }
}