/**
 * VoiceReader Pro - Stylesheet
 *
 * WCAG 2.1 AAA compliant styling.
 * High contrast, keyboard focus visible, reduced motion support.
 *
 * @author made in nature Projektagentur
 * @version 0.1.0
 */

/* Variables */
:root {
    --voicereader-primary: #0066cc;
    --voicereader-primary-hover: #0052a3;
    --voicereader-bg: #f5f5f5;
    --voicereader-text: #1a1a1a;
    --voicereader-border: #d1d1d1;
    --voicereader-progress-bg: #e0e0e0;
    --voicereader-progress-fill: var(--voicereader-primary);
    --voicereader-focus: #0066cc;
    --voicereader-error: #cc0000;
    --voicereader-success: #008800;
    --voicereader-radius: 4px;
    --voicereader-spacing: 1rem;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --voicereader-primary: #66b3ff;
        --voicereader-primary-hover: #99ccff;
        --voicereader-bg: #2a2a2a;
        --voicereader-text: #f0f0f0;
        --voicereader-border: #444444;
        --voicereader-progress-bg: #444444;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --voicereader-primary: #0000ff;
        --voicereader-bg: #ffffff;
        --voicereader-text: #000000;
        --voicereader-border: #000000;
    }
}

/* Container */
.voicereader-pro {
    background: var(--voicereader-bg);
    border: 1px solid var(--voicereader-border);
    border-radius: var(--voicereader-radius);
    padding: var(--voicereader-spacing);
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--voicereader-text);
}

/* Controls Layout */
.voicereader-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Buttons */
.voicereader-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--voicereader-primary);
    color: #ffffff;
    border: 2px solid transparent;
    border-radius: var(--voicereader-radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
    min-height: 44px; /* WCAG touch target */
    min-width: 44px;
}

.voicereader-btn:hover {
    background: var(--voicereader-primary-hover);
}

.voicereader-btn:focus {
    outline: 3px solid var(--voicereader-focus);
    outline-offset: 2px;
}

.voicereader-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.voicereader-btn--stop,
.voicereader-btn--download {
    padding: 0.5rem;
}

/* Icons (CSS-only) */
.voicereader-icon {
    display: block;
    width: 20px;
    height: 20px;
    position: relative;
}

.voicereader-icon--play::before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent currentColor;
}

.voicereader-icon--pause::before,
.voicereader-icon--pause::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 16px;
    background: currentColor;
    top: 2px;
}

.voicereader-icon--pause::before {
    left: 3px;
}

.voicereader-icon--pause::after {
    right: 3px;
}

.voicereader-icon--stop::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: currentColor;
    top: 3px;
    left: 3px;
}

.voicereader-icon--download::before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 10px 8px 0 8px;
    border-color: currentColor transparent transparent transparent;
    top: 8px;
    left: 2px;
}

.voicereader-icon--download::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 8px;
    background: currentColor;
    top: 0;
    left: 8px;
}

/* Progress Bar */
.voicereader-progress {
    flex: 1;
    min-width: 150px;
    height: 8px;
    background: var(--voicereader-progress-bg);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.voicereader-progress__bar {
    height: 100%;
    background: var(--voicereader-progress-fill);
    width: 0;
    transition: width 0.1s linear;
}

.voicereader-progress__time {
    display: flex;
    gap: 0.25rem;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Speed Control */
.voicereader-speed {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.voicereader-speed__label {
    font-size: 0.875rem;
    font-weight: 500;
}

.voicereader-speed__select {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--voicereader-border);
    border-radius: var(--voicereader-radius);
    background: #ffffff;
    color: var(--voicereader-text);
    font-size: 0.875rem;
    min-height: 36px;
}

.voicereader-speed__select:focus {
    outline: 3px solid var(--voicereader-focus);
    outline-offset: 2px;
}

/* Loading State */
.voicereader-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    margin-top: 0.5rem;
}

.voicereader-loading__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--voicereader-border);
    border-top-color: var(--voicereader-primary);
    border-radius: 50%;
    animation: voicereader-spin 1s linear infinite;
}

@keyframes voicereader-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Error State */
.voicereader-error {
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: #ffe6e6;
    border: 1px solid var(--voicereader-error);
    border-radius: var(--voicereader-radius);
    color: var(--voicereader-error);
}

/* Hidden elements */
[hidden] {
    display: none !important;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .voicereader-loading__spinner {
        animation: none;
    }

    .voicereader-btn,
    .voicereader-progress__bar {
        transition: none;
    }
}

/* Print */
@media print {
    .voicereader-pro {
        display: none;
    }
}

/* ============================================
   AI FEATURES (KI-01 to KI-10)
   ============================================ */

/* Secondary Button Style */
.voicereader-btn--secondary {
    background: transparent;
    color: var(--voicereader-primary);
    border: 2px solid var(--voicereader-primary);
}

.voicereader-btn--secondary:hover {
    background: var(--voicereader-primary);
    color: #ffffff;
}

/* AI Features Container */
.voicereader-ai-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--voicereader-spacing);
    margin-top: var(--voicereader-spacing);
}

/* KI-01: Smart Summary */
.voicereader-summary {
    background: #f0f7ff;
    border: 1px solid var(--voicereader-primary);
    border-radius: var(--voicereader-radius);
    padding: var(--voicereader-spacing);
    margin-bottom: var(--voicereader-spacing);
}

@media (prefers-color-scheme: dark) {
    .voicereader-summary { background: #1a2a3a; }
}

.voicereader-summary__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--voicereader-primary);
}

.voicereader-summary__content {
    font-size: 0.9375rem;
    line-height: 1.6;
}

.voicereader-summary__placeholder {
    color: #666;
    font-style: italic;
}

/* KI-03: Auto-Translate */
.voicereader-translate {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.voicereader-translate__header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.voicereader-translate__target {
    font-weight: 600;
    color: var(--voicereader-primary);
}

/* KI-06: Keyword Navigator */
.voicereader-keywords {
    background: var(--voicereader-bg);
    border: 1px solid var(--voicereader-border);
    border-radius: var(--voicereader-radius);
    padding: var(--voicereader-spacing);
}

.voicereader-keywords__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.voicereader-keywords__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.voicereader-keywords__list a {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--voicereader-primary);
    color: #ffffff;
    text-decoration: none;
    border-radius: 1rem;
    font-size: 0.8125rem;
}

.voicereader-keywords__list a:hover {
    background: var(--voicereader-primary-hover);
}

.voicereader-keywords__list a:focus {
    outline: 3px solid var(--voicereader-focus);
    outline-offset: 2px;
}

/* KI-07: Chapter Navigation */
.voicereader-chapters {
    background: var(--voicereader-bg);
    border: 1px solid var(--voicereader-border);
    border-radius: var(--voicereader-radius);
    padding: var(--voicereader-spacing);
}

.voicereader-chapters__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.voicereader-chapters__list {
    margin: 0;
    padding: 0 0 0 1.5rem;
}

.voicereader-chapters__list li { margin: 0.375rem 0; }

.voicereader-chapters__list a {
    color: var(--voicereader-primary);
    text-decoration: none;
}

.voicereader-chapters__list a:hover { text-decoration: underline; }

/* KI-08: Q&A / FAQ Section */
.voicereader-faq {
    background: var(--voicereader-bg);
    border: 1px solid var(--voicereader-border);
    border-radius: var(--voicereader-radius);
    padding: var(--voicereader-spacing);
    margin-top: var(--voicereader-spacing);
}

.voicereader-faq__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.voicereader-faq__list { margin: 0; padding: 0; }

.voicereader-faq__list dt {
    font-weight: 600;
    margin: 0.75rem 0 0.25rem 0;
}

.voicereader-faq__list dd {
    margin: 0 0 0.75rem 0;
    padding-left: 1rem;
    border-left: 3px solid var(--voicereader-primary);
}

/* FAQ Accordion */
.voicereader-faq__accordion details {
    border-bottom: 1px solid var(--voicereader-border);
}

.voicereader-faq__accordion summary {
    padding: 0.75rem 0;
    cursor: pointer;
    font-weight: 500;
}

.voicereader-faq__accordion summary:focus {
    outline: 3px solid var(--voicereader-focus);
    outline-offset: 2px;
}

.voicereader-faq__accordion .qa-answer {
    padding: 0 0 0.75rem 1.5rem;
}

.voicereader-faq__placeholder {
    color: #666;
    font-style: italic;
}

/* ============================================
   HEADER + AI MODE (v0.4.0)
   Added by voicereader.js for mode switching
   ============================================ */

/* Player header row */
.voicereader-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.voicereader-header__icon {
    display: flex;
    align-items: center;
    color: var(--voicereader-primary);
    flex-shrink: 0;
}

.voicereader-header__label {
    font-weight: 600;
    flex: 1;
    font-size: 0.9375rem;
}

/* AI mode select — injected by JS */
.voicereader-mode {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.voicereader-mode__label {
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.voicereader-mode__select {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--voicereader-border);
    border-radius: var(--voicereader-radius);
    background: #ffffff;
    color: var(--voicereader-text);
    font-size: 0.8125rem;
    cursor: pointer;
    min-height: 36px;
}

@media (prefers-color-scheme: dark) {
    .voicereader-mode__select {
        background: #333;
    }
}

.voicereader-mode__select:focus {
    outline: 3px solid var(--voicereader-focus);
    outline-offset: 2px;
}

/* Active mode indicator injected after mode select by JS */
.voicereader-mode__active {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    background: var(--voicereader-primary);
    color: #ffffff;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Provider badge — shown after successful generation */
.voicereader-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    opacity: 0.55;
}

.voicereader-meta__provider::before {
    content: 'via ';
}

/* Icon-only button variant */
.voicereader-btn--icon {
    padding: 0.4rem;
}