.btn-circle
{
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    border-radius: 25px;
    text-align: center;
    font-size: 18px;
    line-height: 1.33;
}

.mic-disabled {
    background-color: #6c757d;
    color: white;
    cursor: not-allowed;
}

.mic-available {
    background-color: #28a745;
    color: white;
}

.mic-recording {
    background-color: #dc3545;
    color: white;
    animation: pulse 1.5s infinite;
    position: relative;
}

/* Timeout indicator styling */
.timeout-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through to the button */
}

.timeout-indicator-circle {
    fill: none;
    stroke-width: 5; /* Increased thickness for better visibility */
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: stroke-dashoffset 0.3s ease-out;
}

.timeout-bg {
    stroke: rgba(255, 255, 255, 0.4); /* Slightly increased opacity for better visibility */
}

.timeout-progress {
    stroke: #ffffff; /* Start with white */
}

/* We'll use white-to-green gradient for the progress circle for better visibility */
.timeout-progress.p0 {
    stroke: #ffffff; /* 100% white (0% green) */
}

.timeout-progress.p10 {
    stroke: #e6f5e6; /* 90% white, 10% green */
}

.timeout-progress.p30 {
    stroke: #c6e6c6; /* 70% white, 30% green */
}

.timeout-progress.p50 {
    stroke: #99d699; /* 50% white, 50% green */
}

.timeout-progress.p60 {
    stroke: #80cc80; /* 40% white, 60% green */
}

.timeout-progress.p70 {
    stroke: #66c266; /* 30% white, 70% green */
}

.timeout-progress.p80 {
    stroke: #4db84d; /* 20% white, 80% green */
}

.timeout-progress.p90 {
    stroke: #33ad33; /* 10% white, 90% green */
}

.timeout-progress.p100 {
    stroke: #4CAF50; /* 0% white, 100% green */
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}