/**
 * IP CHAYKA TTS — Frontend Styles (Layer 1: External Stylesheet)
 *
 * IMPORTANT: These rules MUST be identical to the critical CSS
 * injected inline by Frontend::inject_critical_styles() (Layer 2).
 * Both layers are required for TagDiv Newspaper theme compatibility.
 *
 * Layer 1: This file (loaded via wp_enqueue_style)
 * Layer 2: Inline <style> at footer priority 9999 (class-frontend.php)
 *
 * @package Chayka_TTS
 */

/* ── Default Mode ───────────────────────────────────────────────── */

.chayka-tts {
    --ct-bg: #f8f9fa;
    --ct-border: #137cb9;
    --ct-text: inherit;
    --ct-icon: #137cb9;
    --ct-footer: rgba(0, 0, 0, 0.4);
    margin: 20px 0;
    padding: 0;
    border: 0;
    font-size: inherit;
}

.chayka-tts-player {
    background: var(--ct-bg);
    border-left: 3px solid var(--ct-border);
    padding: 14px 16px;
    border-radius: 0 4px 4px 0;
    color: var(--ct-text);
}

.chayka-tts-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 0.95em;
}

.chayka-tts-icon {
    color: var(--ct-icon);
    font-size: 1.1em;
}

.chayka-tts-title {
    color: var(--ct-text);
}

.chayka-tts-audio {
    display: block;
    width: 100%;
    margin: 0;
}

.chayka-tts-footer {
    margin-top: 8px;
}

.chayka-tts-disclaimer {
    font-size: 0.75em;
    opacity: 0.6;
    color: var(--ct-footer);
}

/* ── Dark Mode ──────────────────────────────────────────────────── */

[data-ipca-mode="dark"] .chayka-tts {
    --ct-bg: #2a2a2a;
    --ct-border: #4a9eda;
    --ct-text: #e0e0e0;
    --ct-icon: #4a9eda;
    --ct-footer: rgba(255, 255, 255, 0.4);
}

/* ── High Contrast Mode ─────────────────────────────────────────── */

[data-ipca-mode="high-contrast"] .chayka-tts {
    --ct-bg: #000000;
    --ct-border: #ffff00;
    --ct-text: #ffffff;
    --ct-icon: #ffff00;
    --ct-footer: #ffffff;
}

/* ── Sepia Mode ─────────────────────────────────────────────────── */

[data-ipca-mode="sepia"] .chayka-tts {
    --ct-bg: #f4ecd8;
    --ct-border: #8b7355;
    --ct-text: #3e2c1c;
    --ct-icon: #8b7355;
    --ct-footer: rgba(62, 44, 28, 0.5);
}

/* ── TagDiv Newspaper Overrides ─────────────────────────────────── */

.tagdiv-type .chayka-tts-player {
    background: var(--ct-bg);
    border-left: 3px solid var(--ct-border);
    color: var(--ct-text);
}

.tagdiv-type .chayka-tts-audio {
    width: 100%;
}

/* ── Mobile Adjustments ─────────────────────────────────────────── */

@media (max-width: 767px) {
    .chayka-tts-player {
        padding: 12px 14px;
    }

    .chayka-tts-header {
        font-size: 0.9em;
    }
}