/* Custom scrollbar styles - works with all themes via CSS variables */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 40%, transparent) transparent;
}

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--muted) 55%, transparent);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
  background: color-mix(in srgb, var(--accent) 50%, transparent);
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Specific scrollable containers - show scrollbar on hover */
.chat-list,
.messages,
.settings-content,
.select-options,
.invite-list,
.group-members-list,
.group-add-list,
.profile-modal-messages,
.modal-body {
  scrollbar-gutter: stable;
}

/* Make scrollbar more visible when actively scrolling */
.chat-list::-webkit-scrollbar-thumb,
.messages::-webkit-scrollbar-thumb,
.settings-content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 30%, transparent);
  background-clip: padding-box;
}

.chat-list:hover::-webkit-scrollbar-thumb,
.messages:hover::-webkit-scrollbar-thumb,
.settings-content:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 50%, transparent);
  background-clip: padding-box;
}

/* Thin scrollbar for smaller containers */
.select-options::-webkit-scrollbar,
.group-members-list::-webkit-scrollbar,
.group-add-list::-webkit-scrollbar {
  width: 6px;
}