.dre-mute-btn {
    background-color: #800080; /* Purple */
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    transition: background-color 0.2s;
    vertical-align: middle;
    margin-left: 10px;
}

.dre-mute-btn:hover {
    background-color: #6a0dad; /* Darker purple on hover */
}

.dre-mute-btn svg {
    width: 18px;
    height: 18px;
    fill: white;
    pointer-events: none; /* Makes the icon unclickable */
}

.dre-mute-btn .slash {
    position: absolute;
    width: 2px;
    height: 22px; /* Adjust length to cover the circle */
    background-color: #dc3545; /* Red */
    border-radius: 2px;
    transform: rotate(45deg);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}

.dre-mute-btn.muted .slash {
    opacity: 1; /* Show when muted */
}

.confetti-piece {
    position: absolute;
    width: 8px;
    height: 16px;
    background-color: #28a745;
    opacity: 0;
    z-index: 10;
    pointer-events: none;
    animation: fadeAndFly 1.5s ease-out forwards;
}

@keyframes fadeAndFly {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(0.2); opacity: 0; }
}