/*
 * Fett Dark Theme
 * Custom theme for The Fett Chat
 * Matches the cyan/blue glow from the logo
 */

:root {
  /* Background colors - dark with blue tint */
  --cpd-color-bg-canvas-default: #0a0f1a !important;
  --cpd-color-bg-subtle-primary: #141b2b !important;
  --cpd-color-bg-subtle-secondary: #1a2438 !important;
  
  /* Sidebar background */
  --cpd-color-bg-action-primary-rest: #0d1420 !important;
  
  /* Text colors */
  --cpd-color-text-primary: #e8f0ff !important;
  --cpd-color-text-secondary: #b8d0f0 !important;
  --cpd-color-text-disabled: #6b7f9a !important;
  
  /* Accent color - your logo's cyan */
  --accent: #50b4ff !important;
  --cpd-color-text-action-accent: #50b4ff !important;
  --cpd-color-icon-accent-tertiary: #50b4ff !important;
  
  /* Active/hover states with cyan glow */
  --cpd-color-bg-action-primary-hovered: rgba(80, 180, 255, 0.15) !important;
  --cpd-color-bg-action-primary-pressed: rgba(80, 180, 255, 0.25) !important;
  
  /* Borders */
  --cpd-color-border-interactive-primary: rgba(80, 180, 255, 0.3) !important;
  --cpd-color-border-interactive-secondary: rgba(255, 255, 255, 0.1) !important;
}

/* Left sidebar - dark blue to match logo background */
.mx_LeftPanel,
.mx_RoomSearch,
.mx_LeftPanel_wrapper {
  background-color: #0d1420 !important;
}

/* Room list tiles */
.mx_RoomTile {
  border-radius: 8px !important;
}

/* Selected room - cyan glow */
.mx_RoomTile_selected,
.mx_RoomTile[aria-selected="true"] {
  background: linear-gradient(90deg, rgba(80, 180, 255, 0.2), rgba(80, 180, 255, 0.1)) !important;
  border-left: 3px solid #50b4ff !important;
}

/* Room hover state */
.mx_RoomTile:hover {
  background-color: rgba(80, 180, 255, 0.08) !important;
}

/* Unread message badge - cyan */
.mx_NotificationBadge_2char,
.mx_NotificationBadge {
  background-color: #50b4ff !important;
  color: #0a0f1a !important;
  font-weight: 700 !important;
}

/* Buttons - cyan accent */
.mx_AccessibleButton_kind_primary,
.mx_AccessibleButton_kind_primary_sm {
  background-color: #50b4ff !important;
  color: #0a0f1a !important;
  font-weight: 600 !important;
}

.mx_AccessibleButton_kind_primary:hover {
  background-color: #6bc4ff !important;
  box-shadow: 0 0 12px rgba(80, 180, 255, 0.4) !important;
}

/* Message composer */
.mx_MessageComposer_wrapper {
  background-color: #141b2b !important;
  border-radius: 12px !important;
  border: 1px solid rgba(80, 180, 255, 0.15) !important;
}

/* Message bubbles - subtle blue tint */
.mx_EventTile_line {
  background-color: transparent !important;
}

.mx_EventTile:hover .mx_EventTile_line {
  background-color: rgba(80, 180, 255, 0.05) !important;
}

/* Own messages - slightly highlighted */
.mx_EventTile_mine .mx_EventTile_line {
  background-color: rgba(80, 180, 255, 0.08) !important;
}

/* Links - cyan */
a {
  color: #50b4ff !important;
}

a:hover {
  color: #6bc4ff !important;
  text-decoration: underline !important;
}

/* User pills/mentions - cyan */
.mx_Pill {
  background-color: rgba(80, 180, 255, 0.2) !important;
  color: #6bc4ff !important;
  border-radius: 4px !important;
}

/* Scrollbars - cyan accent */
::-webkit-scrollbar-thumb {
  background-color: rgba(80, 180, 255, 0.3) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(80, 180, 255, 0.5) !important;
}

/* Top bar */
.mx_RoomHeader {
  background-color: #0d1420 !important;
  border-bottom: 1px solid rgba(80, 180, 255, 0.15) !important;
}

/* Context menus */
.mx_ContextualMenu {
  background-color: #1a2438 !important;
  border: 1px solid rgba(80, 180, 255, 0.2) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.mx_ContextualMenu_option:hover {
  background-color: rgba(80, 180, 255, 0.15) !important;
}

/* Input fields */
.mx_Field input,
.mx_Field textarea {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(80, 180, 255, 0.2) !important;
  color: #e8f0ff !important;
}

.mx_Field input:focus,
.mx_Field textarea:focus {
  border-color: #50b4ff !important;
  box-shadow: 0 0 0 2px rgba(80, 180, 255, 0.2) !important;
}

/* Toggles/switches - cyan when active */
.mx_ToggleSwitch_on .mx_ToggleSwitch_ball {
  background-color: #50b4ff !important;
}

.mx_ToggleSwitch_on {
  background-color: rgba(80, 180, 255, 0.3) !important;
}

/* Dialogs */
.mx_Dialog {
  background-color: #1a2438 !important;
  border: 1px solid rgba(80, 180, 255, 0.2) !important;
}

/* Room directory tiles */
.mx_RoomDirectory_tile {
  border: 1px solid rgba(80, 180, 255, 0.15) !important;
  background-color: #141b2b !important;
}

.mx_RoomDirectory_tile:hover {
  background-color: rgba(80, 180, 255, 0.08) !important;
}

/* Voice call buttons - cyan glow */
.mx_CallView {
  background: linear-gradient(180deg, #0a0f1a, #0d1420) !important;
}

.mx_CallView_button_on {
  background-color: #50b4ff !important;
  box-shadow: 0 0 16px rgba(80, 180, 255, 0.5) !important;
}