/* ============================================================
   Audio to Text — Styles
   ============================================================ */

/* === Mode Tabs === */
.mode-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.mode-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 0.3rem; padding: 0.8rem 0.5rem;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); color: var(--text-secondary);
    font-size: 0.82rem; font-weight: 500; cursor: pointer;
    transition: all var(--transition); font-family: var(--font-body);
    text-align: center;
}
.mode-tab i { font-size: 1.2rem; }
.mode-tab:hover { border-color: var(--text-muted); color: var(--text-primary); }
.mode-tab.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }
.mode-badge {
    font-size: 0.6rem; font-weight: 600; padding: 0.1rem 0.5rem;
    border-radius: 20px; text-transform: uppercase; letter-spacing: 0.3px;
}
.mode-badge.good { background: rgba(63,185,80,0.15); color: var(--accent-green); }
.mode-badge.warn { background: rgba(240,136,62,0.15); color: var(--accent-orange); }

/* === Lib Status === */
.lib-status { margin-bottom: 1rem; }
.lib-loading {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.8rem 1rem; background: rgba(88,166,255,0.06);
    border: 1px solid rgba(88,166,255,0.15); border-radius: var(--radius-md);
    font-size: 0.82rem; color: var(--text-secondary);
}
.lib-ready {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.8rem 1rem; background: rgba(63,185,80,0.06);
    border: 1px solid rgba(63,185,80,0.15); border-radius: var(--radius-md);
    font-size: 0.82rem; color: var(--accent-green);
}
.lib-error {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.8rem 1rem; background: rgba(248,81,73,0.06);
    border: 1px solid rgba(248,81,73,0.15); border-radius: var(--radius-md);
    font-size: 0.82rem; color: var(--accent-red);
}
.mini-spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border-color); border-top-color: var(--accent);
    border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0;
}

/* === Progress Overlay === */
.progress-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(6,8,15,0.9); backdrop-filter: blur(8px);
    z-index: 9999; display: none; align-items: center; justify-content: center; padding: 1rem;
}
.progress-overlay.active { display: flex; }
.progress-box {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); padding: 2rem; text-align: center;
    max-width: 420px; width: 100%; box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.progress-spinner {
    width: 48px; height: 48px; border: 3px solid var(--border-color);
    border-top-color: var(--accent); border-radius: 50%;
    animation: spin 0.8s linear infinite; margin: 0 auto 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
.progress-box h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.progress-box p { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 1rem; }
.progress-bar-wrap { height: 6px; background: var(--bg-surface); border-radius: 3px; overflow: hidden; margin-bottom: 0.5rem; }
.progress-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s ease; }
.progress-percent { font-size: 0.8rem; color: var(--text-secondary); font-family: var(--font-mono); }

/* === Language Buttons === */
.lang-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.lang-btn, .wlang-btn {
    padding: 0.45rem 0.8rem; background: var(--bg-surface);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;
    cursor: pointer; transition: all var(--transition); font-family: var(--font-body);
}
.lang-btn:hover, .wlang-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
.lang-btn.active, .wlang-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* === Record Area === */
.record-area { text-align: center; padding: 2rem 0; }
.record-btn-large {
    width: 80px; height: 80px; border-radius: 50%;
    background: var(--bg-surface); border: 3px solid var(--accent-red);
    color: var(--accent-red); font-size: 2rem;
    cursor: pointer; transition: all var(--transition);
    display: inline-flex; align-items: center; justify-content: center;
}
.record-btn-large:hover { background: rgba(248,81,73,0.1); transform: scale(1.05); }
.record-btn-large.recording {
    background: var(--accent-red); color: #fff;
    animation: pulse-record 1.5s ease-in-out infinite;
}
@keyframes pulse-record {
    0%,100% { box-shadow: 0 0 0 0 rgba(248,81,73,0.5); }
    50% { box-shadow: 0 0 0 15px rgba(248,81,73,0); }
}
.record-status { color: var(--text-secondary); font-size: 0.85rem; margin-top: 0.8rem; }
.record-timer {
    font-family: var(--font-mono); font-size: 1.5rem;
    color: var(--accent-red); font-weight: 600; margin-top: 0.5rem;
}

/* === Live Transcript === */
.live-transcript { margin-top: 1rem; }
.interim-text { font-size: 0.82rem; color: var(--text-muted); font-style: italic; display: block; margin-top: 0.3rem; }

/* === Drop Zone === */
.drop-zone {
    border: 2px dashed var(--border-color); border-radius: var(--radius-lg);
    padding: 2rem; text-align: center; cursor: pointer;
    transition: all var(--transition); background: var(--bg-surface);
}
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent); background: var(--accent-glow); }
.drop-content i { font-size: 2rem; color: var(--text-muted); display: block; margin-bottom: 0.5rem; }
.drop-zone:hover .drop-content i { color: var(--accent); }
.drop-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.2rem; }
.drop-sub { font-size: 0.82rem; color: var(--text-muted); }
.pick-btn {
    background: none; border: none; color: var(--accent); text-decoration: underline;
    cursor: pointer; font-size: inherit; font-family: inherit; padding: 0;
}
.drop-formats { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.4rem; font-family: var(--font-mono); }

/* === Audio Preview === */
.audio-info { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.audio-info > i { font-size: 1.4rem; color: var(--accent); flex-shrink: 0; }
.audio-meta { flex: 1; min-width: 0; }
.audio-name { font-size: 0.85rem; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-detail { font-size: 0.72rem; color: var(--text-muted); font-family: var(--font-mono); display: block; }
.audio-player { width: 100%; border-radius: var(--radius-sm); }

/* === Transcript Box === */
.transcript-box {
    background: var(--bg-surface); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); padding: 1rem;
    min-height: 100px; max-height: 400px; overflow-y: auto;
    font-size: 0.9rem; line-height: 1.7; color: var(--text-primary);
    white-space: pre-wrap; outline: none;
}
.transcript-box:focus { border-color: var(--accent); }

/* === Result === */
.result-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.8rem; flex-wrap: wrap; gap: 0.5rem;
}
.section-title { font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.result-actions { display: flex; gap: 0.4rem; }
.btn-sm { padding: 0.35rem 0.7rem !important; font-size: 0.75rem !important; }
.result-meta { margin-top: 0.5rem; }
.info-meta { font-size: 0.78rem; color: var(--text-secondary); font-family: var(--font-mono); }

/* === Info Banner === */
.info-banner {
    display: flex; gap: 0.8rem; padding: 1rem 1.2rem; margin-top: 1.5rem;
    background: rgba(63,185,80,0.06); border: 1px solid rgba(63,185,80,0.15);
    border-radius: var(--radius-md); font-size: 0.82rem; line-height: 1.6; color: var(--text-secondary);
}
.info-banner > i { color: var(--accent-green); font-size: 1.1rem; flex-shrink: 0; }
.warn-banner { background: rgba(240,136,62,0.06); border-color: rgba(240,136,62,0.15); }
.warn-banner > i { color: var(--accent-orange); }

/* === Responsive === */
@media (max-width: 600px) {
    .mode-tabs { flex-direction: column; }
    .result-header { flex-direction: column; align-items: flex-start; }
    .lang-btns { flex-wrap: wrap; }
}