/* Custom mobile-style scrollbar overlay - Theme-aware */
.custom-scrollbar {
    position: fixed;
    right: 6px;
    top: 12px;
    width: 5px;
    height: calc(100vh - 24px);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-scrollbar.visible {
    opacity: 1;
}

.custom-scrollbar-thumb {
    position: absolute;
    right: 0;
    width: 5px;
    background: var(--text-primary);
    opacity: 0.35;
    border-radius: 2.5px;
    transition: background 0.2s ease, opacity 0.2s ease;
}

/* Slightly more visible on hover */
.custom-scrollbar:hover .custom-scrollbar-thumb {
    opacity: 0.55;
}

/* Dark mode adjustments */
[data-theme="dark"] .custom-scrollbar-thumb {
    background: var(--text-secondary);
    opacity: 0.5;
}

[data-theme="dark"] .custom-scrollbar:hover .custom-scrollbar-thumb {
    opacity: 0.7;
}

/* Modal scrollbars - make them visible with custom styling */
.modal-content,
.modal-body,
.profile-modal-content {
    scrollbar-width: thin !important;
    scrollbar-color: var(--text-secondary) transparent !important;
}

.modal-content::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.profile-modal-content::-webkit-scrollbar {
    display: block !important;
    width: 6px !important;
    height: 6px !important;
}

.modal-content::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.profile-modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.profile-modal-content::-webkit-scrollbar-thumb {
    background: var(--text-secondary);
    opacity: 0.5;
    border-radius: 3px;
}

.modal-content::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.profile-modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-primary);
    opacity: 0.7;
}

/* Dark mode modal scrollbars */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .profile-modal-content {
    scrollbar-color: var(--text-tertiary) transparent !important;
}

[data-theme="dark"] .modal-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .modal-body::-webkit-scrollbar-thumb,
[data-theme="dark"] .profile-modal-content::-webkit-scrollbar-thumb {
    background: var(--text-tertiary);
    opacity: 0.6;
}

[data-theme="dark"] .modal-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .modal-body::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .profile-modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
    opacity: 0.8;
}