.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh; /* Default height for larger screens */
    background-color: #f0f0f0;
    padding: 20px;
    border-left: 1px solid #ccc;
    overflow-y: auto; /* Enable vertical scrolling if content overflows */
    z-index: 1000;
}

#session-history-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#session-history-list li {
    margin-bottom: 10px;
    position: relative;
}

#session-history-list li .question {
    font-weight: bold;
}

#session-history-list li .answer {
    color: #666;
}

.thumbs-down-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #2c2c2c;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.thumbs-down-button:hover {
    background-color: #aaa;
    transform: translateY(-50%);
}

.thumbs-down-button.clicked {
    display: block !important;
}

.thumbs-down-button {
    display: none;
}

.character-revealed #session-history-list li:hover .thumbs-down-button {
    display: block;
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed; /* Keep it fixed at the bottom */
        bottom: 0; /* Position at the bottom */
        top: auto; /* Reset top */
        left: 0; /* Align to the left */
        right: auto; /* Reset right */
        width: 100%; /* Full width */
        /* Set the height to roughly half of the viewport height */
        height: 50vh; /* 50% of the viewport height */
        max-height: none; /* Remove the fixed maximum height */
        border-left: none;
        border-top: 1px solid #ccc;
        padding: 10px; /* Adjust padding for mobile */
        overflow-y: auto; /* Add scroll if content overflows */
    }
}