/* public/app/css/dash-tts.css
 * Synopsis: Sélecteur voix TTS une ligne.
 * Objectif: Lecture nette drapeau · langue · genre · prénom.
 */

.dash .dash-panel--tts {
    gap: .4rem;
}

.dash .dash-tts-row {
    align-items: center;
    display: grid;
    gap: .4rem;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
}

.dash .dash-tts-select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--dash-text) 50%),
        linear-gradient(135deg, var(--dash-text) 50%, transparent 50%);
    background-position:
        calc(100% - 1.05rem) calc(50% + .12rem),
        calc(100% - .72rem) calc(50% + .12rem);
    background-repeat: no-repeat;
    background-size: .34rem .34rem, .34rem .34rem;
    field-sizing: fixed;
    font-size: .86rem;
    font-variant-emoji: emoji;
    letter-spacing: .01em;
    line-height: 1.35;
    margin: 0;
    min-height: 2.65rem;
    min-width: 0;
    overflow: hidden;
    padding: .55rem 1.85rem .55rem .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.dash .dash-tts-row .dash-act--thin {
    field-sizing: fixed;
    margin: 0;
    min-height: 2.65rem;
    padding: .45rem .55rem;
    white-space: nowrap;
    width: auto;
    word-break: normal;
}

.dash .dash-tts-select:focus {
    border-color: color-mix(in srgb, var(--dash-accent) 55%, transparent);
    outline: none;
}

.dash .dash-tts-select option {
    font-size: .86rem;
    letter-spacing: .01em;
    line-height: 1.4;
    padding: .35rem .5rem;
}