/* stt-plugin.css */
/* Styles for the microphone button and wrappers */

/* Wrapper for inline inputs (text, search) */
.stt-input-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    /* Let the wrapper take the full width, so the input inside can be 100% */
    width: 100%; 
}

/* Make the input inside the wrapper grow to fill space */
.stt-input-wrapper input[type="text"],
.stt-input-wrapper input[type="search"] {
    width: 100%;
    flex-grow: 1;
}

/* Wrapper for textareas */
.stt-textarea-wrapper {
    display: block;
    position: relative;
}

/* Position the button inside the textarea wrapper */
.stt-textarea-wrapper .stt-microphone-button {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 10;
}

/* The microphone button itself */
.stt-microphone-button {
    cursor: pointer;
    border: none;
    background: #f0f0f0;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
    padding: 0;
    vertical-align: middle;
    transition: all 0.2s ease;
    flex-shrink: 0; /* Prevents button from shrinking */
}

.stt-microphone-button:hover {
    background: #e0e0e0;
}

/* SVG icon style */
.stt-microphone-button svg {
    width: 16px;
    height: 16px;
    fill: #333;
}

/* Recording state: pulse animation */
.stt-microphone-button.stt-recording {
    background: #f44336; /* Red when recording */
    animation: stt-pulse 1.5s infinite ease-in-out;
}
.stt-microphone-button.stt-recording svg {
    fill: #fff;
}

/* Loading state: spinner animation */
.stt-microphone-button.stt-loading {
    background: #f0f0f0;
    cursor: not-allowed;
    /* Use border to create a spinner */
    border: 4px solid #e0e0e0;
    border-top-color: #3498db;
    animation: stt-spin 1s linear infinite;
}

.stt-microphone-button.stt-loading svg {
    display: none; /* Hide mic icon when spinning */
}

/* Error state */
.stt-microphone-button.stt-error {
    background: #f44336;
    cursor: not-allowed;
}
.stt-microphone-button.stt-error svg {
    fill: #fff;
}


/* Animations */
@keyframes stt-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
    }
}

@keyframes stt-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}