/* Target your scrollable container */
#chatWindow {
    overflow-y: auto;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: transparent transparent; /* Firefox */
}

    /* WebKit browsers (Chrome, Edge, Safari) */
    #chatWindow::-webkit-scrollbar {
        width: 8px;
        background-color: transparent;
    }

    #chatWindow::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.05); /* Very transparent */
        border-radius: 4px;
        transition: background-color 0.3s ease;
    }

    #chatWindow:hover::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.3); /* More visible on hover */
    }

    /* Optional: smooth transition for Firefox */
    #chatWindow:hover {
        scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
    }