/* =============================================================================
 * vsuite — vdiktat.css (Diktier-Knopf, siehe vdiktat.js)
 * Brand-neutral über Bootstrap-Tokens; der Knopf sitzt in der rechten unteren
 * Ecke des Feldes, die Leiste wächst von dort nach links.
 * ========================================================================== */

.vdiktat-feld { padding-right: 2.6rem !important; }

/* Hülle für Felder in Flex-/Grid-Zeilen (siehe huelle() in vdiktat.js). */
.vdiktat-huelle { position: relative; min-width: 0; }
.vdiktat-in-huelle { width: 100%; }

.vdiktat-anker {
    position: relative;
    height: 0;
    z-index: 5;
}

.vdiktat-knopf {
    position: absolute;
    right: .35rem;
    bottom: .35rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1rem;
    color: var(--bs-secondary-color, #6c757d);
    background: transparent;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    transition: background-color .15s, color .15s, transform .08s;
    z-index: 2;
}
.vdiktat-knopf:hover { color: var(--bs-primary, #1568b4); background: var(--bs-tertiary-bg, #f1f3f5); }
.vdiktat-knopf:focus-visible { outline: 2px solid var(--bs-primary, #1568b4); outline-offset: 1px; }

.vdiktat-knopf.is-halten {
    color: #fff;
    background: var(--bs-danger, #dc3545);
    transform-origin: center;
    box-shadow: 0 0 0 .4rem rgba(220, 53, 69, .18);
    width: 2.6rem;
    height: 2.6rem;
    right: .05rem;
    bottom: .05rem;
    transition: background-color .15s, color .15s;
}
.vdiktat-knopf.is-fest {
    color: #fff;
    background: var(--bs-primary, #1568b4);
}

/* Leiste links neben dem Knopf */
.vdiktat-leiste {
    position: absolute;
    right: 3rem;
    bottom: .3rem;
    max-width: calc(100% - 3.4rem);
    min-height: 2.1rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .2rem .6rem;
    border-radius: 1.05rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    font-size: .85rem;
    white-space: nowrap;
    color: var(--bs-body-color, #212529);
}
.vdiktat-leiste.is-weg { border-color: var(--bs-danger, #dc3545); color: var(--bs-danger, #dc3545); }
.vdiktat-hinweis { overflow: hidden; text-overflow: ellipsis; color: var(--bs-secondary-color, #6c757d); }
.vdiktat-leiste.is-weg .vdiktat-hinweis { color: inherit; }
.vdiktat-wisch { animation: vdiktat-wisch 1.4s ease-in-out infinite; }
.vdiktat-zeit { font-variant-numeric: tabular-nums; font-weight: 600; }
.vdiktat-punkt {
    width: .6rem; height: .6rem; border-radius: 50%;
    background: var(--bs-danger, #dc3545);
    animation: vdiktat-puls 1s ease-in-out infinite;
    flex: 0 0 auto;
}
.vdiktat-warn { color: var(--bs-warning, #ffc107); }
.vdiktat-spin { color: var(--bs-primary, #1568b4); flex: 0 0 auto; }

.vdiktat-btn {
    border: 0;
    background: transparent;
    padding: .15rem .3rem;
    border-radius: .5rem;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}
.vdiktat-btn:hover { background: var(--bs-tertiary-bg, #f1f3f5); color: var(--bs-body-color, #212529); }
.vdiktat-weg:hover { color: var(--bs-danger, #dc3545); }

/* Schloss über dem Knopf, solange gehalten wird */
.vdiktat-schloss {
    position: absolute;
    right: .45rem;
    bottom: 3.1rem;
    width: 1.8rem;
    padding: .35rem 0 .25rem;
    border-radius: .9rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    font-size: .8rem;
    color: var(--bs-secondary-color, #6c757d);
    pointer-events: none;
    animation: vdiktat-hoch 1.4s ease-in-out infinite;
}
.vdiktat-schloss.is-nah { color: var(--bs-primary, #1568b4); border-color: var(--bs-primary, #1568b4); }

@keyframes vdiktat-puls { 50% { opacity: .25; } }
@keyframes vdiktat-wisch { 50% { transform: translateX(-4px); } }
@keyframes vdiktat-hoch { 50% { transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
    .vdiktat-wisch, .vdiktat-schloss, .vdiktat-punkt { animation: none; }
}

/* ---- ✨ Mit KI überarbeiten (links neben dem Mikrofon) -------------------- */
.vdiktat-feld-ki { padding-right: 4.6rem !important; }
.vdiktat-feld-ki.vdiktat-ohne-mikro { padding-right: 2.6rem !important; }

.vdiktat-ki {
    position: absolute;
    right: 2.45rem;
    bottom: .35rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1rem;
    color: var(--bs-secondary-color, #6c757d);
    background: transparent;
    cursor: pointer;
    z-index: 2;
    transition: background-color .15s, color .15s;
}
.vdiktat-ki.is-allein { right: .35rem; }
.vdiktat-ki:hover, .vdiktat-ki.is-offen { color: var(--bs-primary, #1568b4); background: var(--bs-tertiary-bg, #f1f3f5); }
.vdiktat-ki:focus-visible { outline: 2px solid var(--bs-primary, #1568b4); outline-offset: 1px; }
.vdiktat-ki.is-laeuft { color: var(--bs-primary, #1568b4); cursor: progress; }
.vdiktat-ki .spinner-border { width: .9rem; height: .9rem; border-width: .15em; }
/* Ein laufendes Diktat verdeckt den ✨ nicht halb, sondern ganz. */
.vdiktat-anker.is-aktiv .vdiktat-ki { visibility: hidden; }

/* Meldung nach ✨ (Überarbeitet, Original zurück, Fehler): unter dem Feld im
   Fluss, rechtsbündig. Verdeckt nichts, schiebt nur kurz nach unten. */
.vdiktat-leiste.vdiktat-ki-meldung {
    position: static;
    width: fit-content;
    max-width: 100%;
    margin: .3rem 0 .1rem auto;
    min-height: 1.9rem;
    white-space: normal;
    box-shadow: none;
}
.vdiktat-ok { color: var(--bs-success, #198754); flex: 0 0 auto; }

.vdiktat-menue {
    position: fixed;
    z-index: 2100;              /* über Bootstrap-Modal (1055) und Rückmelde-Fenster (2000) */
    width: 16.5rem;
    padding: .35rem;
    border-radius: .6rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    border: 1px solid var(--bs-border-color, #dee2e6);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
    font-size: .9rem;
}
.vdiktat-menue-kopf { padding: .25rem .5rem .35rem; font-size: .8rem; color: var(--bs-secondary-color, #6c757d); }
.vdiktat-menue-kopf .bi { color: var(--bs-primary, #1568b4); }
.vdiktat-menue-trenner { height: 1px; margin: .3rem .25rem; background: var(--bs-border-color, #dee2e6); }
.vdiktat-menue-leer { padding: 0 .5rem .35rem; font-size: .8rem; color: var(--bs-secondary-color, #6c757d); }
.vdiktat-menue-punkt {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    min-height: 2.4rem;          /* Finger */
    padding: .3rem .55rem;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.vdiktat-menue-punkt:hover:not(:disabled), .vdiktat-menue-punkt:focus-visible { background: var(--bs-tertiary-bg, #f1f3f5); outline: none; }
.vdiktat-menue-punkt:disabled { opacity: .45; cursor: default; }
.vdiktat-menue-punkt .bi { color: var(--bs-primary, #1568b4); width: 1rem; text-align: center; }
.vdiktat-menue-frei { display: flex; gap: .25rem; align-items: center; padding: .25rem .25rem .1rem; }
.vdiktat-menue-frei[hidden] { display: none; }
.vdiktat-menue-frei input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .4rem .55rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .4rem;
    font-size: 1rem;             /* iOS zoomt unter 16 px beim Fokus */
    background: var(--bs-body-bg, #fff);
    color: inherit;
}
.vdiktat-menue-frei .vdiktat-btn { font-size: 1.4rem; color: var(--bs-primary, #1568b4); }