/* ═══ «نوشتن با صدا» — استایلِ کامپوننت‌های VoiceMicButton و VoiceDictationTextarea ═══
   چرا یک فایلِ جدا و نه <style> داخلِ خودِ کامپوننت:
     ۱. این دکمه کنارِ بیش از صد فیلدِ متنی می‌نشیند؛ استایلِ درون‌خطی یعنی تکرارِ همین CSS
        به‌ازای هر فیلد در یک صفحه (فرمِ «تنظیمات» به‌تنهایی ۱۹ فیلد دارد).
     ۲. سه چیدمانِ مختلف در برنامه هست (MainLayout، AdminLayout و EmptyLayoutِ صفحاتِ ورود و
        ثبت‌نام و معرفی) و هیچ‌کدام استایلِ دیگری را به ارث نمی‌برد. اول این CSS فقط در دو
        چیدمانِ اول گذاشته شده بود و نتیجه‌اش این شد که در صفحه‌ی ورود آیکن به‌جای داخلِ کادر،
        زیرِ آن می‌افتاد — با اندازه‌گیری پیدا شد، نه با نگاه‌کردن به کد.
   پس هر جا این کامپوننت استفاده می‌شود، همین فایل باید در <head> لینک شده باشد. */

.voice-mic-btn-wrap {
    margin-top: 4px;
}

.voice-mic-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(105, 108, 255, .25);
    background-color: var(--bs-card-bg, #fff);
    color: #696cff;
    border-radius: 20px;
    font-size: .75rem;
    line-height: 1;
    padding: 4px 10px;
}

    .voice-mic-btn.is-recording {
        background-color: #ff3e1d;
        border-color: #ff3e1d;
        color: #fff;
        animation: voice-mic-btn-pulse 1.2s infinite;
    }

@keyframes voice-mic-btn-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 62, 29, .5); }
    70% { box-shadow: 0 0 0 6px rgba(255, 62, 29, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 62, 29, 0); }
}

.voice-mic-live {
    margin-top: 4px;
    padding: 5px 9px;
    border: 1px dashed rgba(105, 108, 255, .35);
    border-radius: 8px;
    background: rgba(105, 108, 255, .06);
    font-size: .78rem;
    line-height: 1.8;
    color: #566a7f;
    max-height: 90px;
    overflow-y: auto;
}

.dark-style .voice-mic-live {
    background: rgba(105, 108, 255, .12);
    color: #d7dae3;
}

/* ————— حالتِ فشرده: میکروفونِ ریز داخلِ خودِ کادرِ متن —————
   والدِ فیلد باید کلاسِ voice-field داشته باشد (و اگر چندخطی است voice-field-area).
   در چیدمانِ راست‌به‌چپ، inline-start یعنی **راست** — آیکن ابتدایِ خطِ متن می‌نشیند، مثلِ
   ذره‌بینِ کادرهای جستجو. با متن تداخل نمی‌کند چون padding-inline-start همان‌قدر فضا کنار
   می‌گذارد؛ این دو عدد به هم وابسته‌اند و باید با هم عوض شوند. */
.voice-field {
    position: relative;
}

    .voice-field .voice-mic-btn-wrap.is-compact {
        position: absolute;
        top: 50%;
        inset-inline-start: 6px;
        transform: translateY(-50%);
        margin-top: 0;
        z-index: 3;
        line-height: 0;
    }

    /* در فیلدِ چندخطی وسط‌چین بی‌معنی‌ست: با بلندشدنِ متن، دکمه وسطِ نوشته شناور می‌شد */
    .voice-field.voice-field-area .voice-mic-btn-wrap.is-compact {
        top: 8px;
        transform: none;
    }

    /* جا باز کردن برایِ آیکن تا روی متنِ کاربر نیفتد */
    .voice-field .form-control,
    .voice-field .form-select {
        padding-inline-start: 34px;
    }

.voice-mic-btn.is-icon {
    padding: 3px 6px;
    font-size: .8rem;
    border-radius: 50%;
    opacity: .55;
}

    /* کم‌رنگ است تا فرم شلوغ نشود، ولی با نزدیک‌شدنِ ماوس و حینِ ضبط کاملاً پیدا می‌شود */
    .voice-mic-btn.is-icon:hover,
    .voice-mic-btn.is-icon:focus,
    .voice-mic-btn.is-icon.is-recording {
        opacity: 1;
    }
