/* ── PUBLIC CHAT SYSTEM STYLES ─────────────────────────────────────────── */

#chat-messages-box {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

#chat-messages-box::-webkit-scrollbar {
  width: 4px;
}
#chat-messages-box::-webkit-scrollbar-track {
  background: transparent;
}
#chat-messages-box::-webkit-scrollbar-thumb {
  background: var(--border, #1c1c2a);
  border-radius: 2px;
}
#chat-messages-box::-webkit-scrollbar-thumb:hover {
  background: var(--muted, #4a4a6a);
}

#chat-message-input::placeholder {
  color: var(--muted, #4a4a6a);
  font-size: 12.5px;
}

/* User Popover Stylings (Chess.com inspired) */
.chat-popover {
  animation: popoverFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top left;
}

@keyframes popoverFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-5px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.chat-popover hr {
  opacity: 0.3;
}

.chat-popover .drawer-btn {
  justify-content: center;
  gap: 6px;
}

.chat-popover .drawer-btn:hover {
  transform: translateY(-1px);
}