/* =========================================================
   MASTER CONVERTER SUITE — Text to Speech styles (.tts-*)
   ========================================================= */

.tts-input-area {
    flex-direction: column;
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-4, 16px);
}

.tts-textarea {
    width: 100%;
    min-height: 160px;
    resize: vertical;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    font-size: 15px;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
    color: var(--color-text-primary, #f1f5f9);
    background: var(--glass-bg, rgba(15,22,40,0.75));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-lg, 16px);
    outline: none;
    transition: border-color 0.2s;
}
.tts-textarea:focus {
    border-color: #a855f7;
    box-shadow: 0 0 0 3px color-mix(in srgb, #a855f7 18%, transparent);
}
.tts-textarea::placeholder { color: var(--color-text-secondary, #94a3b8); }

.tts-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4, 16px);
}

.tts-controls .control-group { min-width: 200px; }

.tts-controls .control-select {
    background-color: #1a2236; /* solid for readable native dropdown popup */
    color: #f1f5f9;
}
.tts-controls .control-select option,
.tts-controls .control-select optgroup { background-color: #1a2236; color: #f1f5f9; }

.tts-speed-wrap { display: flex; align-items: center; gap: var(--space-2, 8px); }
.tts-speed-wrap input[type=range] { width: 140px; accent-color: #a855f7; }
.tts-speed-val {
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--color-text-secondary, #94a3b8);
    min-width: 38px;
}

.tts-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid rgba(168,85,247,0.4);
    background: color-mix(in srgb, #a855f7 12%, transparent);
    color: #e9d5ff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.tts-preview-btn:hover { background: color-mix(in srgb, #a855f7 22%, transparent); }
.tts-preview-btn.tts-speaking {
    background: #a855f7; color: #fff; border-color: #a855f7;
    animation: ttsPulse 1.4s ease-in-out infinite;
}
@keyframes ttsPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(168,85,247,0.5); }
    50% { box-shadow: 0 0 0 10px rgba(168,85,247,0); }
}

.tts-hint {
    font-size: 12.5px;
    color: var(--color-text-secondary, #94a3b8);
    line-height: 1.5;
    margin: 0;
}

/* ---- Results ---- */
.tts-results-list { display: flex; flex-direction: column; gap: var(--space-3, 12px); }

.tts-result-card {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-radius: var(--radius-lg, 16px);
    background: var(--glass-bg, rgba(15,22,40,0.75));
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}
.tts-result-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--color-text-secondary, #94a3b8);
}
.tts-result-voice { font-weight: 600; color: #c4b5fd; font-size: 13px; }
.tts-result-text { font-size: 13px; font-style: italic; opacity: 0.85; }
.tts-result-card audio { width: 100%; height: 38px; }
.tts-dl-btn { align-self: flex-start; }

@media (max-width: 640px) {
    .tts-controls { flex-direction: column; align-items: stretch; }
    .tts-preview-btn { width: 100%; justify-content: center; }
}