/* ==============================================================================
   XIVIZLEY CHAT — OBSIDIAN VIOLET (MICUP.GG EDITION)
   High-performance Dark Theme with Gaming UI Aesthetics
   ============================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  /* Core Brand Tokens */
  --font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  --bg-primary: #090514 !important;
  --bg-secondary: #120A21 !important;
  --bg-tertiary: #190F2E !important;
  --bg-card: #150D26 !important;
  --bg-hover: rgba(139, 92, 246, 0.12) !important;
  --bg-active: rgba(139, 92, 246, 0.22) !important;

  --accent-color: #8B5CF6 !important;
  --accent-gradient: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%) !important;
  --accent-glow: 0 0 20px rgba(139, 92, 246, 0.35) !important;
  --border-subtle: rgba(139, 92, 246, 0.18) !important;
  --border-focus: rgba(139, 92, 246, 0.45) !important;

  /* Revite Theme Variable Overrides */
  --primary-background: #090514 !important;
  --primary-background-rgb: 9, 5, 20 !important;
  --secondary-background: #120A21 !important;
  --secondary-background-rgb: 18, 10, 33 !important;
  --tertiary-background: #190F2E !important;
  --tertiary-background-rgb: 25, 15, 46 !important;

  --background: #090514 !important;
  --foreground: #F8FAFC !important;
  --secondary-foreground: #CBD5E1 !important;
  --tertiary-foreground: #94A3B8 !important;

  --accent: #8B5CF6 !important;
  --accent-rgb: 139, 92, 246 !important;
  --primary-header: #120A21 !important;
  --secondary-header: #090514 !important;

  --block: #150D26 !important;
  --message-box: #120A21 !important;
  --tooltip: #090514 !important;
  --titlebar-logo-color: #8B5CF6 !important;

  --status-online: #10B981 !important;
  --status-away: #F59E0B !important;
  --status-busy: #EF4444 !important;
  --status-focus: #8B5CF6 !important;

  --scrollbar-thumb: #6D28D9 !important;
  --scrollbar-track: transparent !important;
}

/* Global Font & Body */
html, body, #app {
  font-family: var(--font-family) !important;
  background-color: var(--bg-primary) !important;
  color: var(--foreground) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ---------------------------------------------------------------------------
   1. Left Server Rail & Navigation (Micup.gg Style)
   --------------------------------------------------------------------------- */
nav[class*="Navigation"], [class*="serverList"], [class*="ServerList"] {
  background-color: #05020A !important;
  border-right: 1px solid var(--border-subtle) !important;
  padding: 10px 4px !important;
}

/* Server Icons with smooth hover */
[class*="ServerList"] [class*="entry"], [class*="server_"] {
  border-radius: 14px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
[class*="ServerList"] [class*="entry"]:hover, [class*="server_"]:hover {
  border-radius: 12px !important;
  box-shadow: var(--accent-glow) !important;
  transform: scale(1.04) !important;
}

/* ---------------------------------------------------------------------------
   2. Channels Sidebar
   --------------------------------------------------------------------------- */
aside[class*="sidebar"], [class*="Sidebar"], [class*="channels_"] {
  background-color: var(--bg-secondary) !important;
  border-right: 1px solid var(--border-subtle) !important;
}

/* Category Headers */
[class*="category"], [class*="Category"] {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #A78BFA !important;
  padding: 12px 10px 6px 12px !important;
}

/* Channel Items */
[class*="channel_"], a[class*="entry_"], [class*="Channel"] {
  border-radius: 8px !important;
  margin: 2px 8px !important;
  padding: 6px 10px !important;
  color: var(--secondary-foreground) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

[class*="channel_"]:hover, a[class*="entry_"]:hover {
  background-color: var(--bg-hover) !important;
  color: #FFFFFF !important;
  transform: translateX(3px) !important;
}

/* Active Channel */
[class*="channel_"][class*="active"], a[class*="entry_"][class*="active"], [class*="selected"] {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.25) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--accent-color) !important;
}

/* ---------------------------------------------------------------------------
   3. Micup.gg Voice Room Cards & Call Bar
   --------------------------------------------------------------------------- */
/* Highlight Voice Channels */
[class*="channel_"][href*="voice"], a[class*="entry_"][href*="voice"], [data-voice="true"] {
  background-color: rgba(25, 15, 46, 0.7) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 10px !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

[class*="channel_"][href*="voice"]:hover, a[class*="entry_"][href*="voice"]:hover {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.2) !important;
}

/* Active Call Bar (Top / Bottom) */
[class*="Call_"], [class*="callContainer"], [class*="voiceContainer"] {
  background: linear-gradient(180deg, #160D2C 0%, #0F0820 100%) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Micup.gg Floating Voice Control Bar */
[class*="callControls"], [class*="VoiceControls"] {
  background: rgba(18, 10, 33, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
  padding: 8px 16px !important;
}

/* Voice Action Buttons */
[class*="callControls"] button, [class*="VoiceControls"] button {
  border-radius: 12px !important;
  background-color: var(--bg-tertiary) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--border-subtle) !important;
  transition: all 0.2s ease !important;
}

[class*="callControls"] button:hover, [class*="VoiceControls"] button:hover {
  background: var(--accent-gradient) !important;
  box-shadow: var(--accent-glow) !important;
  transform: translateY(-2px) !important;
}

/* Disconnect / Leave Call Button */
button[class*="leave"], button[class*="hangup"], [data-action="disconnect"] {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}
button[class*="leave"]:hover, button[class*="hangup"]:hover {
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.5) !important;
}

/* ---------------------------------------------------------------------------
   4. Chat Canvas & Messages
   --------------------------------------------------------------------------- */
main[class*="chat"], [class*="Chat"], [class*="messages_"] {
  background-color: var(--bg-primary) !important;
}

/* Individual Messages with Subtle Card Styling */
[class*="Message_"], [class*="message_"] {
  margin: 2px 8px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  transition: background-color 0.15s ease !important;
}

[class*="Message_"]:hover, [class*="message_"]:hover {
  background-color: rgba(18, 10, 33, 0.5) !important;
}

/* User Avatars: Perfectly Circular with status ring */
img[class*="avatar_"], [class*="Avatar_"] img {
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}
img[class*="avatar_"]:hover {
  border-color: var(--accent-color) !important;
  transform: scale(1.05) !important;
}

/* Username Header */
[class*="username_"], [class*="author_"] {
  font-weight: 700 !important;
  color: #FFFFFF !important;
}

/* Mention Pill */
[class*="mention_"] {
  background-color: rgba(139, 92, 246, 0.2) !important;
  color: #DDD6FE !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  font-weight: 600 !important;
}

/* ---------------------------------------------------------------------------
   5. Modern Micup.gg Chat Input Field
   --------------------------------------------------------------------------- */
[class*="MessageBox"], [class*="messageBox"] {
  background: transparent !important;
  padding: 12px 16px !important;
}

[class*="MessageBox"] textarea, [class*="MessageBox"] input[type="text"] {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  color: #FFFFFF !important;
  padding: 12px 16px !important;
  font-family: var(--font-family) !important;
  font-size: 14px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s ease !important;
}

[class*="MessageBox"] textarea:focus, [class*="MessageBox"] input[type="text"]:focus {
  border-color: var(--accent-color) !important;
  box-shadow: var(--accent-glow) !important;
  outline: none !important;
}

/* ---------------------------------------------------------------------------
   6. Primary Buttons & Controls
   --------------------------------------------------------------------------- */
button[class*="primary"], button[class*="Button_accent"] {
  background: var(--accent-gradient) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3) !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

button[class*="primary"]:hover, button[class*="Button_accent"]:hover {
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5) !important;
  transform: translateY(-2px) !important;
}

/* ---------------------------------------------------------------------------
   7. Top Header Bar
   --------------------------------------------------------------------------- */
header[class*="header"], [class*="Header_"] {
  background-color: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* ---------------------------------------------------------------------------
   8. Custom Scrollbar
   --------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: #4C1D95 !important;
  border-radius: 3px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: #7C3AED !important;
}

/* ---------------------------------------------------------------------------
   9. Speaking Animation (Micup.gg Pulse Effect)
   --------------------------------------------------------------------------- */
@keyframes speakingPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

[class*="speaking"], [data-speaking="true"] {
  border-color: #10B981 !important;
  animation: speakingPulse 1.5s infinite !important;
}