/*
 * whisper-dictation.css — Visual states for tap-to-record voice dictation.
 *
 * Loaded globally from base.html. Driven by static/js/whisper-dictation.js,
 * which toggles classes on the mic button, the target textarea, and a
 * shimmer overlay sibling div.
 */

/* Spinning icon while transcript upload is in flight */
@keyframes whisper-spin {
    to { transform: rotate(360deg); }
}
.whisper-spin {
    display: inline-block;
    animation: whisper-spin 0.9s linear infinite;
}

/* Pulsing blue border on the textarea while transcribing */
@keyframes whisper-pulse-border {
    0%, 100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(13, 110, 253, 0); }
}
.whisper-transcribing {
    animation: whisper-pulse-border 1.2s ease-in-out infinite;
    border-color: #0d6efd !important;
}

/* "Transcribing..." label sitting inside the position-relative wrapper */
.whisper-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0.5rem 0.75rem;
    pointer-events: none;
    color: #6c757d;
    font-size: 0.95em;
}

/* Shimmer wash across the textarea */
@keyframes whisper-shimmer-bg {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.whisper-overlay-shimmer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(13, 110, 253, 0.12) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: whisper-shimmer-bg 1.4s linear infinite;
}

/* Bouncing dots after the "Transcribing" label */
@keyframes whisper-dot {
    0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
    40%           { opacity: 1;   transform: translateY(-2px); }
}
.whisper-dots {
    display: inline-flex;
    gap: 3px;
    margin-left: 6px;
}
.whisper-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0d6efd;
    animation: whisper-dot 1.2s ease-in-out infinite;
}
.whisper-dots span:nth-child(2) { animation-delay: 0.15s; }
.whisper-dots span:nth-child(3) { animation-delay: 0.3s; }