/* ═══════════════════════════════════════════════════════════════════
   LIQUID GLASS UI — Chat-Only Effects (Performance-Optimized)
   Glass effects ONLY on chat UI where visual premium feel matters.
   All other components use standard lightweight styles.
   ═══════════════════════════════════════════════════════════════════ */

/* ── LIQUID GLASS DESIGN TOKENS ── */
:root {
  /* Glass Core */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-hover: rgba(255, 255, 255, 0.10);
  --glass-bg-active: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-hover: rgba(255, 255, 255, 0.22);
  --glass-highlight: rgba(255, 255, 255, 0.15);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);

  /* Depth Blur Layers */
  --depth-2: blur(16px) saturate(200%);
  --depth-3: blur(24px) saturate(220%);

  /* Ambient Glow Colors */
  --glow-primary: rgba(79, 70, 229, 0.35);
}

/* Dark theme adjustments */
[data-theme="dark"] {
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.10);
}

/* Telegram theme adjustments */
[data-theme="telegram"] {
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-hover: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glow-primary: rgba(91, 155, 213, 0.25);
}


/* ═══════════════════════════════════════════════
   CHAT SCREEN — Glass Bubbles & Input (KEPT)
   ═══════════════════════════════════════════════ */
/* Chat header */
.cc-chat-header, .chat-header {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--depth-2) !important;
  -webkit-backdrop-filter: var(--depth-2) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

/* Sent bubble — gradient glass */
.cc-sent, .msg-sent {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.65) 0%, rgba(124, 58, 237, 0.55) 100%) !important;
  border: 1px solid rgba(124, 58, 237, 0.4) !important;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.3), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Received bubble — frosted glass */
.cc-recv, .msg-received {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1), inset 0 1px 0 var(--glass-highlight);
}

/* Date separators */
.cc-date-sep, .msg-date {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border);
}

/* Input bar */
.cc-input-bar, .chat-input-bar {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--depth-2) !important;
  -webkit-backdrop-filter: var(--depth-2) !important;
  border-top: 1px solid var(--glass-border) !important;
}

.cc-input-wrap, .chat-input-wrapper {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  transition: all 0.3s ease !important;
}

.cc-input-wrap:focus-within, .chat-input-wrapper:focus-within {
  background: var(--glass-bg-hover) !important;
  border-color: rgba(79, 70, 229, 0.4) !important;
  box-shadow: 0 0 20px var(--glow-primary) !important;
}

/* Send button */
.cc-send-btn, .send-btn {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.9), rgba(124, 58, 237, 0.8)) !important;
  box-shadow: 0 4px 16px var(--glow-primary) !important;
}

/* Scroll to bottom */
.cc-scroll-bottom {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* Context menu */
.cc-context-menu {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--depth-3) !important;
  -webkit-backdrop-filter: var(--depth-3) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), inset 0 1px 0 var(--glass-highlight) !important;
}

.cc-context-menu button:hover {
  background: var(--glass-bg-hover) !important;
}

/* Emoji picker */
.cc-emoji-picker {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--depth-3) !important;
  -webkit-backdrop-filter: var(--depth-3) !important;
  border: 1px solid var(--glass-border) !important;
}

/* Typing indicator */
.cc-typing {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border);
}

/* Chat fullscreen (mobile) */
.cc-chat-page {
  background: var(--bg-app) !important;
}


/* ═══════════════════════════════════════════════
   DESKTOP CHAT — WhatsApp Glass Panel (KEPT)
   ═══════════════════════════════════════════════ */
@media (min-width: 768px) {
  .wa-sidebar {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--depth-2) !important;
    -webkit-backdrop-filter: var(--depth-2) !important;
    border-right: 1px solid var(--glass-border) !important;
  }

  .wa-sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid var(--glass-border);
  }

  .wa-search-bar .wa-search-input-wrap {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border);
  }

  .wa-search-bar .wa-search-input-wrap:focus-within {
    border-color: rgba(79, 70, 229, 0.4);
    box-shadow: 0 0 16px var(--glow-primary);
  }

  .wa-filter-tab.active {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.7), rgba(124, 58, 237, 0.6)) !important;
    border-color: rgba(124, 58, 237, 0.45) !important;
  }

  .wa-chat-item.active {
    background: rgba(79, 70, 229, 0.18) !important;
    border: 1px solid rgba(79, 70, 229, 0.3);
  }

  .wa-unread-badge {
    background: linear-gradient(135deg, var(--primary), rgba(124, 58, 237, 1)) !important;
  }
}


/* ═══════════════════════════════════════════════
   CHAT SEARCH BARS — Glass (KEPT)
   ═══════════════════════════════════════════════ */
.cc-search-bar input {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
}

.cc-search-bar input:focus {
  border-color: rgba(79, 70, 229, 0.4) !important;
  box-shadow: 0 0 16px var(--glow-primary) !important;
}


/* ═══════════════════════════════════════════════
   MESSAGES TABS — Glass (KEPT)
   ═══════════════════════════════════════════════ */
.cc-tab-bar {
  border-bottom: 1px solid var(--glass-border) !important;
}

.cc-tab.active {
  box-shadow: inset 0 -2px 0 var(--primary);
}

.cc-unread-badge {
  background: linear-gradient(135deg, var(--primary), rgba(124, 58, 237, 1)) !important;
}


/* ═══════════════════════════════════════════════
   MODAL — Keep glass for overlay feel
   ═══════════════════════════════════════════════ */
#modal-overlay {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(6px) !important;
}

.modal {
  background: var(--bg-surface) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 24px 24px 0 0 !important;
}


/* ═══════════════════════════════════════════════
   PERFORMANCE & ACCESSIBILITY
   ═══════════════════════════════════════════════ */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
  }
}