/* Audio / video translator (template-parts/tools/audio-translator.php).
   Site tokens only, so light and dark follow the page. Logical properties
   (inline-start/end) so right-to-left languages mirror without extra rules. */

.at { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.at-langs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}
.at-lang { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.at-lang .tool-select { width: 100%; min-width: 0; }
.at-swap {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    cursor: pointer;
    font-size: 1.25rem;
}
.at-swap:hover { border-color: var(--color-accent); }
.at-swap:focus-visible, .at-mode:focus-visible, .at-mic:focus-visible, .at-drop:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.at-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.at-mode {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    font: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer;
}
.at-mode[aria-selected="true"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.at-panel[hidden] { display: none; }
.at-panel { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

.at-mic {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 0 22px;
    border: 0; border-radius: 999px;
    background: linear-gradient(135deg, #1a6b6a, #2a9d8f);
    color: #fff;
    font: inherit; font-weight: 600; font-size: 15px;
    cursor: pointer;
}
.at-mic iconify-icon { font-size: 1.375rem; }
.at-mic__ring {
    position: absolute; inset: -4px; border-radius: inherit;
    border: 2px solid transparent; pointer-events: none;
}
.at-mic[aria-pressed="true"] { background: linear-gradient(135deg, #b3261e, #e0533f); }
.at-mic[aria-pressed="true"] .at-mic__ring { border-color: rgba(224, 83, 63, .55); animation: at-pulse 1.4s ease-out infinite; }
@keyframes at-pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.12); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .at-mic[aria-pressed="true"] .at-mic__ring { animation: none; } }

.at-drop {
    position: relative;
    width: 100%;
    padding: 22px 16px;
    border: 2px dashed var(--color-border);
    border-radius: 14px;
    text-align: center;
    cursor: pointer;
    background: var(--color-bg-elevated);
}
.at-drop--over { border-color: var(--color-accent); }
.at-drop__icon { font-size: 2rem; color: var(--color-text-muted); }
.at-drop__lead { font-weight: 500; color: var(--color-text-primary); margin: 4px 0; }
.at-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.at-field { display: flex; flex-direction: column; gap: 4px; }
.at-src { width: 100%; min-height: 108px; resize: vertical; }

.at-go-row .tool-btn-primary { min-height: 48px; }
.at-ts { margin: 4px 0; }

.at-progress { height: 4px; border-radius: 4px; background: var(--color-border); overflow: hidden; }
.at-progress__bar { display: block; height: 100%; width: 0; background: var(--color-accent); transition: width .25s; }

.at-result { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.at-result[hidden] { display: none; }
.at-h { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.at-out {
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    font-size: 1.0625rem; line-height: 1.6;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.at-actions .tool-btn-sm { min-height: 40px; }

.at-cta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg-secondary, var(--color-bg-elevated));
}
.at-cta[hidden] { display: none; }
.at-cta__text { font-weight: 600; color: var(--color-text-primary); margin: 0; }

.at-notes {
    margin: 4px 0 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 6px;
    font-size: 13px; line-height: 1.5; color: var(--color-text-muted);
}
.at-notes li { padding-inline-start: 14px; position: relative; }
.at-notes li::before { content: ''; position: absolute; inset-inline-start: 0; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent); }

@media (max-width: 480px) {
    .at-langs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
    .at-mode { padding: 0 12px; font-size: 13px; }
    .at-mic { width: 100%; justify-content: center; }
}