/* Chat interface ko laagi enhanced scrollbar styling */

/* Main scrollbar class */
.chat-scrollbar {
  --scrollbar-size: 10px;
  --scrollbar-thumb: hsl(var(--primary) / 0.5);
  --scrollbar-thumb-hover: hsl(var(--primary) / 0.8);
  --scrollbar-track: transparent;
}

/* Hover garda scrollbar dekhaune */
.chat-scrollbar:hover {
  --scrollbar-size: 10px;
}

/* Webkit browsers ko laagi custom scrollbar styling */
.chat-scrollbar::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

.chat-scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 100px;
}

.chat-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.chat-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Firefox ko laagi */
.chat-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Scrolling behavior smooth hunuparcha */
.chat-scrollbar {
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* Scrollbar muni content nalukaune garnu parne padding right ma */
.chat-scrollbar > div {
  padding-right: calc(var(--scrollbar-size) + 4px);
}

/* shadcn/ui ScrollArea ko laagi specific styling */
.chat-scrollbar [data-radix-scroll-area-viewport] {
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

.chat-scrollbar [data-radix-scroll-area-thumb] {
  background: var(--scrollbar-thumb);
  border-radius: 100px;
  transition: background 0.2s ease;
}

.chat-scrollbar [data-radix-scroll-area-thumb]:hover {
  background: var(--scrollbar-thumb-hover);
}

.chat-scrollbar [data-radix-scroll-area-scrollbar] {
  width: var(--scrollbar-size);
  padding: 0 2px;
  transition: width 0.2s ease;
}

/* Messages container ma ramro padding hunuparcha */
.chat-scrollbar .flex.flex-col.space-y-4 {
  padding-bottom: 20px; /* Comfortable scrolling ko laagi bottom ma extra padding */
} 