/**
 * Scrollbar dọc nhỏ gọn — vùng cuộn Y (sidebar, main, modal, danh sách…).
 * Thêm class .app-scroll-y cho ô cuộn tùy chỉnh.
 */
:root {
    --app-scrollbar-y-size: 6px;
    --app-scrollbar-track: transparent;
    --app-scrollbar-thumb: rgba(100, 116, 139, 0.38);
    --app-scrollbar-thumb-hover: rgba(79, 70, 229, 0.52);
    --app-scrollbar-thumb-active: rgba(79, 70, 229, 0.72);
}

/* Vùng cuộn dọc phổ biến (Tailwind + class riêng trong app) */
.overflow-y-auto,
.overflow-y-scroll,
.overflow-x-auto,
.app-scroll-y,
.app-email-marketing-scroll,
.app-shell-main,
.enroll-picker-table-scroll,
.create-slots-day-list,
.img-guide-content-scroll,
.modal-body,
.imc-day-sheet-list,
.speech-input-overlay__preview {
    scrollbar-width: thin;
    scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
}

.overflow-y-auto::-webkit-scrollbar,
.overflow-y-scroll::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar,
.app-scroll-y::-webkit-scrollbar,
.app-email-marketing-scroll::-webkit-scrollbar,
.app-shell-main::-webkit-scrollbar,
.enroll-picker-table-scroll::-webkit-scrollbar,
.create-slots-day-list::-webkit-scrollbar,
.img-guide-content-scroll::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.imc-day-sheet-list::-webkit-scrollbar,
.speech-input-overlay__preview::-webkit-scrollbar {
    width: var(--app-scrollbar-y-size);
    height: var(--app-scrollbar-y-size);
}

.overflow-y-auto::-webkit-scrollbar-track,
.overflow-y-scroll::-webkit-scrollbar-track,
.overflow-x-auto::-webkit-scrollbar-track,
.app-scroll-y::-webkit-scrollbar-track,
.app-email-marketing-scroll::-webkit-scrollbar-track,
.app-shell-main::-webkit-scrollbar-track,
.enroll-picker-table-scroll::-webkit-scrollbar-track,
.create-slots-day-list::-webkit-scrollbar-track,
.img-guide-content-scroll::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.imc-day-sheet-list::-webkit-scrollbar-track,
.speech-input-overlay__preview::-webkit-scrollbar-track {
    background: var(--app-scrollbar-track);
}

.overflow-y-auto::-webkit-scrollbar-thumb,
.overflow-y-scroll::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb,
.app-scroll-y::-webkit-scrollbar-thumb,
.app-email-marketing-scroll::-webkit-scrollbar-thumb,
.app-shell-main::-webkit-scrollbar-thumb,
.enroll-picker-table-scroll::-webkit-scrollbar-thumb,
.create-slots-day-list::-webkit-scrollbar-thumb,
.img-guide-content-scroll::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.imc-day-sheet-list::-webkit-scrollbar-thumb,
.speech-input-overlay__preview::-webkit-scrollbar-thumb {
    background-color: var(--app-scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover,
.overflow-y-scroll::-webkit-scrollbar-thumb:hover,
.overflow-x-auto::-webkit-scrollbar-thumb:hover,
.app-scroll-y::-webkit-scrollbar-thumb:hover,
.app-email-marketing-scroll::-webkit-scrollbar-thumb:hover,
.app-shell-main::-webkit-scrollbar-thumb:hover,
.enroll-picker-table-scroll::-webkit-scrollbar-thumb:hover,
.create-slots-day-list::-webkit-scrollbar-thumb:hover,
.img-guide-content-scroll::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.imc-day-sheet-list::-webkit-scrollbar-thumb:hover,
.speech-input-overlay__preview::-webkit-scrollbar-thumb:hover {
    background-color: var(--app-scrollbar-thumb-hover);
}

.overflow-y-auto::-webkit-scrollbar-thumb:active,
.overflow-y-scroll::-webkit-scrollbar-thumb:active,
.overflow-x-auto::-webkit-scrollbar-thumb:active,
.app-scroll-y::-webkit-scrollbar-thumb:active,
.app-email-marketing-scroll::-webkit-scrollbar-thumb:active,
.app-shell-main::-webkit-scrollbar-thumb:active,
.enroll-picker-table-scroll::-webkit-scrollbar-thumb:active,
.create-slots-day-list::-webkit-scrollbar-thumb:active,
.img-guide-content-scroll::-webkit-scrollbar-thumb:active,
.modal-body::-webkit-scrollbar-thumb:active,
.imc-day-sheet-list::-webkit-scrollbar-thumb:active,
.speech-input-overlay__preview::-webkit-scrollbar-thumb:active {
    background-color: var(--app-scrollbar-thumb-active);
}

/* Sidebar / menu tối — thumb nhạt hơn một chút */
.app-sidebar-shell .overflow-y-auto {
    scrollbar-color: rgba(148, 163, 184, 0.45) var(--app-scrollbar-track);
}

.app-sidebar-shell .overflow-y-auto::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.45);
}

.app-sidebar-shell .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background-color: rgba(99, 102, 241, 0.55);
}