/* voice-prefs.css — favourites ⭐ / recent voices 🕘 / voice name in history
   Deliberately cheap to render: no blur, no shadows that animate, no loops. */

/* ---------- quick bar above each voice picker ---------- */
.dv-quick { margin: 0 0 .75rem; }
.dv-quick[hidden] { display: none !important; }
.dv-quick-scroll {
    display: flex; align-items: center; gap: 6px;
    overflow-x: auto; overflow-y: hidden; padding: 2px 2px 6px;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
.dv-quick-scroll::-webkit-scrollbar { height: 4px; }
.dv-quick-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.dv-quick-label {
    flex: 0 0 auto; font-size: .75rem; font-weight: 700; color: #64748b;
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding-inline-end: 2px;
}
.dv-quick-label .fa-star { color: #f59e0b; }
.dv-quick-sep { flex: 0 0 1px; align-self: stretch; background: #e2e8f0; margin: 2px 4px; }

.dv-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    height: 34px; max-width: 170px; padding: 0 12px 0 4px;
    border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #1e293b;
    font: 600 .82rem/1 'Cairo', 'Tajawal', sans-serif; cursor: pointer;
    min-width: 0 !important; min-height: 0 !important;   /* beat the global 44px tap rule on .btn-like elements */
    transition: border-color .15s, background-color .15s;
    -webkit-tap-highlight-color: transparent;
}
html[dir="rtl"] .dv-chip { padding: 0 4px 0 12px; }
.dv-chip:hover { border-color: #a5b4fc; background: #f8fafc; }
.dv-chip:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.dv-chip.is-selected { border-color: #4f46e5; background: #eef2ff; color: #3730a3; }
.dv-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-chip-av {
    width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 26px;
    background: #eef2ff; border: 1px solid #e2e8f0;
}
.dv-chip-initial {
    display: inline-flex; align-items: center; justify-content: center;
    color: #4f46e5; font-weight: 800; font-size: .8rem;
}

/* ---------- star button (on voice cards) ---------- */
.dv-fav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; flex: 0 0 30px;
    border: 1px solid #e2e8f0; border-radius: 50%; background: #fff; color: #94a3b8;
    font-size: .85rem; line-height: 1; cursor: pointer;
    min-width: 0 !important; min-height: 0 !important;
    transition: color .15s, border-color .15s, background-color .15s;
    -webkit-tap-highlight-color: transparent;
}
.dv-fav-btn:hover { color: #f59e0b; border-color: #fcd34d; }
.dv-fav-btn:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }
.dv-fav-btn.is-on { color: #f59e0b; border-color: #fcd34d; background: #fffbeb; }

/* tiny star in the corner of the small V1 slider cards */
.voice-card .dv-fav-btn {
    position: absolute; top: 4px; left: 4px; z-index: 6;
    width: 22px; height: 22px; flex-basis: 22px; font-size: .68rem;
    background: rgba(255, 255, 255, .92);
}
html[dir="rtl"] .voice-card .dv-fav-btn { left: 4px; right: auto; }

/* V1 "all voices" modal cards */
.modern-voice-card .dv-fav-btn { margin-inline-start: auto; }

/* V2 library cards: star sits next to the "use this voice" bar */
.dv-vl2-foot { display: flex; align-items: stretch; gap: 8px; margin-top: auto; width: 100%; }
#v2VoiceListModal .dv-vl2-foot .vl2-use { flex: 1 1 auto; width: auto; min-width: 0; margin-top: 0; }
.dv-vl2-foot .dv-fav-btn { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; }
@media (max-width: 575.98px) {               /* cards turn into rows on phones */
    .dv-vl2-foot { width: auto; flex: 0 0 auto; margin-top: 0; align-items: center; }
    #v2VoiceListModal .dv-vl2-foot .vl2-use { flex: 0 0 auto; }
    .dv-vl2-foot .dv-fav-btn { width: 36px; height: 36px; flex-basis: 36px; }
}

/* ---------- V1 modal: favourites-only filter ---------- */
.dv-fav-filter {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px;
    border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #475569;
    font: 700 .85rem/1 'Cairo', 'Tajawal', sans-serif; cursor: pointer; white-space: nowrap;
}
.dv-fav-filter .fa-star { color: #f59e0b; }
.dv-fav-filter.is-on { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
#modalVoiceListContainer.dv-fav-only .voice-item-wrapper:not(.dv-fav) { display: none !important; }
#modalVoiceListContainer.dv-fav-only .no-results { display: none !important; }
.dv-fav-empty { text-align: center; color: #64748b; padding: 2.5rem 1rem; font-size: .92rem; }
.dv-fav-empty .fa-star { color: #f59e0b; margin-inline-end: 4px; }

/* ---------- history: voice used for each clip ---------- */
.history-item .dv-hist-main {
    flex: 1 1 auto; min-width: 0; margin-left: 1rem;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.history-item .dv-hist-main .history-text { margin: 0; max-width: 100%; display: block; }
.dv-hist-voice {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
    padding: 2px 8px; border: 1px solid #e0e7ff; border-radius: 999px;
    background: #f5f7ff; color: #4338ca; cursor: pointer;
    font: 600 .72rem/1.5 'Cairo', 'Tajawal', sans-serif;
    min-width: 0 !important; min-height: 0 !important;
    transition: background-color .15s, border-color .15s;
}
.dv-hist-voice:hover { background: #e0e7ff; border-color: #c7d2fe; }
.dv-hist-voice:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.dv-hist-voice .fa-microphone { font-size: .68rem; opacity: .8; }
.dv-hist-voice span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-hist-voice em {
    font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .02em;
    padding: 0 5px; border-radius: 4px; background: #4f46e5; color: #fff;
}
.dv-hist-voice.is-v1 em { background: #0ea5e9; }