/**
 * RSForm Sprachaufnahme – styles. Follows the Bootstrap 5.3 variables of the
 * template, so dark and light mode are both covered.
 *
 * © 2026 Jan Crone / Crone-IT with support from AI
 * @version 1.0.0
 * @license GNU General Public License version 2 or later
 */
.rsfa {
    --rsfa-accent: var(--bs-primary, #008ac1);
    --rsfa-accent-rgb: var(--bs-primary-rgb, 0, 138, 193);
    --rsfa-ink-rgb: var(--bs-emphasis-color-rgb, 255, 255, 255);
    --rsfa-danger: #e5484d;
    font-family: inherit;
}

.rsfa [hidden],
.rsform-block.rsfa-hidden {
    display: none !important;
}

/* Switch ------------------------------------------------------------- */
.rsfa-switch {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}

.rsfa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    min-height: 44px;
    padding: .55rem 1.25rem;
    border: 1px solid rgba(var(--rsfa-ink-rgb), .14);
    border-radius: 32px;
    background: rgba(var(--rsfa-ink-rgb), .08);
    color: var(--bs-emphasis-color, #fff);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, box-shadow .2s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}

.rsfa-btn:hover {
    background: rgba(var(--rsfa-ink-rgb), .14);
    border-color: rgba(var(--rsfa-accent-rgb), .7);
}

.rsfa-btn:active {
    transform: scale(.98);
}

.rsfa-btn:focus-visible {
    outline: 2px solid var(--rsfa-accent);
    outline-offset: 2px;
}

.rsfa-mode {
    flex: 1 1 12rem;
}

.rsfa-mode.rsfa-mode-active {
    border-color: var(--rsfa-accent);
    background: rgba(var(--rsfa-accent-rgb), .22);
    box-shadow: 0 0 0 1px rgba(var(--rsfa-accent-rgb), .35) inset;
}

/* Panel -------------------------------------------------------------- */
.rsfa-panel {
    padding: 1rem;
    border: .5px solid var(--rsfa-accent);
    border-radius: 6px;
}

.rsfa-status {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
    font-variant-numeric: tabular-nums;
}

.rsfa-dot {
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--rsfa-danger);
    box-shadow: 0 0 0 0 rgba(229, 72, 77, .6);
}

.rsfa[data-state="recording"] .rsfa-dot {
    animation: rsfa-pulse 1.2s ease-out infinite;
}

.rsfa-timer {
    font-weight: 600;
}

.rsfa-limit {
    opacity: .6;
}

.rsfa-meter {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 1.6rem;
    margin-left: auto;
}

.rsfa-meter i {
    display: block;
    width: 4px;
    height: 100%;
    border-radius: 2px;
    background: var(--rsfa-accent);
    transform: scaleY(.12);
    transition: transform .08s linear;
}

.rsfa-controls {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.rsfa-btn-stop {
    border-color: rgba(229, 72, 77, .7);
    background: rgba(229, 72, 77, .18);
}

.rsfa-player {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: .75rem;
}

.rsfa-msg {
    margin: .75rem 0 0;
    font-size: .9rem;
}

.rsfa-msg:empty {
    display: none;
}

.rsfa-msg-error {
    color: var(--rsfa-danger);
    font-weight: 600;
}

.rsfa-btn-file {
    position: relative;
    margin: 0;
    background: transparent;
    border-style: dashed;
    border-color: rgba(var(--rsfa-accent-rgb), .7);
}

.rsfa-btn-file input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.rsfa-btn-file:focus-within {
    outline: 2px solid var(--rsfa-accent);
    outline-offset: 2px;
}

.rsfa-privacy {
    margin: .5rem 0 0;
    font-size: .8rem;
    opacity: .7;
}

@keyframes rsfa-pulse {
    0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .6); }
    70% { box-shadow: 0 0 0 .6rem rgba(229, 72, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}

@media (max-width: 575.98px) {
    .rsfa-controls .rsfa-btn {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rsfa[data-state="recording"] .rsfa-dot {
        animation: none;
    }

    .rsfa-meter i {
        transition: none;
    }
}