{% extends "base.html" %}
{% block title %}KI Arena Player – {{ debate.config.topic[:40] }}{% endblock %}

{% block head %}
<style>
    /* Hide default container padding – we need full viewport */
    .container { max-width: 100%; padding: 0; }
    .topbar { display: none; }
    body { overflow: hidden; }

    /* === LAYOUT === */
    .arena {
        display: grid;
        grid-template-rows: auto 1fr auto;
        height: 100vh;
        position: relative;
    }

    /* === HEADER === */
    .arena-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 14px 24px;
        border-bottom: 1px solid var(--border);
        background: rgba(10, 10, 15, 0.85);
        backdrop-filter: blur(20px);
    }
    .arena-header h1 {
        font-family: 'Space Mono', monospace;
        font-size: 13px;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    .arena-header h1 .fire {
        background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
    }
    .round-badge {
        font-family: 'Space Mono', monospace;
        font-size: 11px;
        color: var(--text-muted);
        border: 1px solid var(--border);
        padding: 3px 12px;
        border-radius: 20px;
        letter-spacing: 2px;
    }

    /* === BATTLE AREA === */
    .battle-area {
        display: grid;
        grid-template-columns: 220px 1fr 220px;
        overflow: hidden;
    }

    /* === AVATAR PANELS === */
    .avatar-panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px 16px;
        position: relative;
        overflow: hidden;
        transition: opacity 0.4s;
    }
    .avatar-panel.side-a {
        background: linear-gradient(180deg, rgba(124, 58, 237, 0.12) 0%, var(--bg) 100%);
        border-right: 1px solid var(--border);
    }
    .avatar-panel.side-b {
        background: linear-gradient(180deg, rgba(239, 68, 68, 0.12) 0%, var(--bg) 100%);
        border-left: 1px solid var(--border);
    }

    /* Avatar */
    .avatar-container {
        position: relative;
        width: 130px;
        height: 130px;
        margin-bottom: 16px;
    }
    .avatar-ring {
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        border: 2px solid transparent;
        transition: all 0.5s ease;
    }
    .side-a .avatar-ring { border-color: rgba(124, 58, 237, 0.25); }
    .side-b .avatar-ring { border-color: rgba(239, 68, 68, 0.25); }

    .avatar-ring.speaking {
        animation: ringPulse 1.5s ease-in-out infinite;
    }
    .side-a .avatar-ring.speaking {
        border-color: var(--accent-a);
        box-shadow: 0 0 30px rgba(124, 58, 237, 0.35), inset 0 0 30px rgba(124, 58, 237, 0.1);
    }
    .side-b .avatar-ring.speaking {
        border-color: var(--accent-b);
        box-shadow: 0 0 30px rgba(239, 68, 68, 0.35), inset 0 0 30px rgba(239, 68, 68, 0.1);
    }
    @keyframes ringPulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.08); opacity: 0.7; }
    }

    .avatar-face {
        width: 130px;
        height: 130px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    .side-a .avatar-face { background: radial-gradient(circle at 40% 40%, #1a0f2e, #0d0718); }
    .side-b .avatar-face { background: radial-gradient(circle at 40% 40%, #2a1010, #150707); }
    .face-svg { width: 100%; height: 100%; }

    /* Avatar info */
    .avatar-name {
        font-family: 'Space Mono', monospace;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-bottom: 6px;
        text-align: center;
    }
    .side-a .avatar-name { color: var(--accent-a); }
    .side-b .avatar-name { color: var(--accent-b); }

    .avatar-position {
        font-family: 'Outfit', sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.5px;
        padding: 3px 14px;
        border-radius: 20px;
        margin-bottom: 6px;
    }
    .side-a .avatar-position {
        color: var(--accent-a);
        background: rgba(124, 58, 237, 0.12);
        border: 1px solid rgba(124, 58, 237, 0.25);
    }
    .side-b .avatar-position {
        color: var(--accent-b);
        background: rgba(239, 68, 68, 0.12);
        border: 1px solid rgba(239, 68, 68, 0.25);
    }

    .avatar-model {
        font-size: 10px;
        color: var(--text-muted);
        letter-spacing: 1px;
    }

    .status-indicator {
        margin-top: 12px;
        display: flex;
        align-items: center;
        gap: 7px;
        font-family: 'Space Mono', monospace;
        font-size: 10px;
        color: var(--text-muted);
        letter-spacing: 1px;
        text-transform: uppercase;
    }
    .status-dot {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--text-muted);
        transition: all 0.3s;
    }
    .status-dot.active { animation: dotPulse 1s ease-in-out infinite; }
    .side-a .status-dot.active { background: var(--accent-a); box-shadow: 0 0 10px var(--accent-a); }
    .side-b .status-dot.active { background: var(--accent-b); box-shadow: 0 0 10px var(--accent-b); }
    @keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

    /* Sound wave */
    .sound-wave {
        display: flex;
        gap: 3px;
        align-items: center;
        height: 28px;
        margin-top: 12px;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .sound-wave.active { opacity: 1; }
    .sw-bar {
        width: 3px; height: 4px;
        border-radius: 2px;
        transition: height 0.1s;
    }
    .side-a .sw-bar { background: var(--accent-a); }
    .side-b .sw-bar { background: var(--accent-b); }
    .sound-wave.active .sw-bar { animation: waveAnim 0.8s ease-in-out infinite; }
    .sw-bar:nth-child(1) { animation-delay: 0s; }
    .sw-bar:nth-child(2) { animation-delay: 0.1s; }
    .sw-bar:nth-child(3) { animation-delay: 0.2s; }
    .sw-bar:nth-child(4) { animation-delay: 0.15s; }
    .sw-bar:nth-child(5) { animation-delay: 0.05s; }
    .sw-bar:nth-child(6) { animation-delay: 0.25s; }
    .sw-bar:nth-child(7) { animation-delay: 0.12s; }
    @keyframes waveAnim {
        0%, 100% { height: 4px; }
        50% { height: 22px; }
    }

    /* === MODERATOR OVERLAY === */
    .mod-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 60px;
        background: rgba(10, 10, 15, 0.88);
        backdrop-filter: blur(8px);
        z-index: 10;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
    }
    .mod-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }
    .mod-avatar-container {
        position: relative;
        width: 100px;
        height: 100px;
        margin-bottom: 12px;
    }
    .mod-avatar-ring {
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 2px solid rgba(200, 200, 220, 0.2);
        transition: all 0.5s ease;
    }
    .mod-avatar-ring.speaking {
        border-color: rgba(200, 200, 220, 0.7);
        box-shadow: 0 0 25px rgba(200, 200, 220, 0.2), inset 0 0 25px rgba(200, 200, 220, 0.05);
        animation: ringPulse 1.5s ease-in-out infinite;
    }
    .mod-avatar-face {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at 40% 40%, #1a1a24, #0d0d14);
        overflow: hidden;
    }
    .mod-avatar-face .face-svg { width: 100%; height: 100%; }
    .mod-name {
        font-family: 'Space Mono', monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(200, 200, 220, 0.8);
        margin-bottom: 4px;
    }
    .mod-role {
        font-size: 10px;
        color: var(--text-muted);
        letter-spacing: 1px;
        margin-bottom: 16px;
    }
    .mod-wave {
        display: flex;
        gap: 3px;
        align-items: center;
        height: 24px;
        margin-bottom: 20px;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .mod-wave.active { opacity: 1; }
    .mod-wave .sw-bar { background: rgba(200, 200, 220, 0.6); }
    .mod-wave.active .sw-bar { animation: waveAnim 0.8s ease-in-out infinite; }
    .mod-text-display {
        max-width: 600px;
        width: 90%;
        max-height: 45vh;
        overflow-y: auto;
        padding: 20px 24px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--border);
        border-radius: 12px;
        font-size: 15px;
        line-height: 1.75;
        color: var(--text-primary);
        font-weight: 300;
    }
    .mod-text-display::-webkit-scrollbar { width: 4px; }
    .mod-text-display::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .mod-text-display:has(.summary-sections) {
        background: transparent;
        border: none;
        padding: 0;
        max-width: 650px;
    }

    /* === SUMMARY SECTIONS === */
    .summary-sections {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
    }
    .summary-section {
        padding: 14px 18px;
        border-radius: 10px;
        border-left: 3px solid var(--border);
        background: rgba(255, 255, 255, 0.02);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .summary-section.side-a {
        border-left-color: var(--accent-a);
        background: rgba(124, 58, 237, 0.06);
    }
    .summary-section.side-b {
        border-left-color: var(--accent-b);
        background: rgba(239, 68, 68, 0.06);
    }
    .summary-section.fazit {
        border-left-color: rgba(200, 200, 220, 0.5);
        background: rgba(200, 200, 220, 0.05);
    }
    .summary-section-header {
        font-family: 'Space Mono', monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 8px;
    }
    .summary-section.side-a .summary-section-header { color: var(--accent-a); }
    .summary-section.side-b .summary-section-header { color: var(--accent-b); }
    .summary-section.fazit .summary-section-header { color: rgba(200, 200, 220, 0.8); }
    .summary-section-body {
        font-size: 14px;
        line-height: 1.7;
        color: var(--text-primary);
        font-weight: 300;
    }

    /* Summary in chat bubble */
    .msg-bubble .summary-sections { gap: 10px; }
    .msg-bubble .summary-section {
        animation-delay: 0s;
        opacity: 1;
        transform: none;
    }

    /* === CHAT ZONE === */
    .chat-zone {
        display: flex;
        flex-direction: column;
        background: var(--surface-1);
        position: relative;
        overflow: hidden;
    }
    .chat-zone::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 50px;
        background: linear-gradient(to bottom, var(--surface-1), transparent);
        z-index: 2;
        pointer-events: none;
    }

    .topic-banner {
        padding: 16px 24px;
        text-align: center;
        border-bottom: 1px solid var(--border);
        background: rgba(18, 18, 26, 0.9);
        backdrop-filter: blur(10px);
        position: relative;
        z-index: 3;
    }
    .topic-label {
        font-family: 'Space Mono', monospace;
        font-size: 10px;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 4px;
    }
    .topic-text {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.4;
    }

    .messages {
        flex: 1;
        overflow-y: auto;
        padding: 24px 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        scroll-behavior: smooth;
    }
    .messages::-webkit-scrollbar { width: 4px; }
    .messages::-webkit-scrollbar-track { background: transparent; }
    .messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    /* Message bubbles */
    .message {
        max-width: 88%;
        opacity: 0;
        transform: translateY(16px);
        animation: msgAppear 0.4s ease forwards;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .message.msg-a { align-self: flex-start; }
    .message.msg-b { align-self: flex-end; }
    .message.msg-mod { align-self: center; max-width: 92%; }

    .msg-sender {
        font-family: 'Space Mono', monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 0 4px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .msg-sender .msg-position {
        font-family: 'Outfit', sans-serif;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        opacity: 0.7;
    }
    .msg-a .msg-sender { color: var(--accent-a); }
    .msg-b .msg-sender { color: var(--accent-b); flex-direction: row-reverse; }
    .msg-mod .msg-sender { color: var(--text-muted); justify-content: center; }

    .msg-bubble {
        padding: 14px 18px;
        border-radius: 14px;
        font-size: 15px;
        line-height: 1.7;
        font-weight: 300;
        position: relative;
    }
    .msg-a .msg-bubble {
        background: rgba(124, 58, 237, 0.08);
        border: 1px solid rgba(124, 58, 237, 0.18);
        border-bottom-left-radius: 4px;
    }
    .msg-b .msg-bubble {
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.18);
        border-bottom-right-radius: 4px;
    }
    .msg-mod .msg-bubble {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--border);
        font-style: italic;
    }

    .typing-cursor {
        display: inline-block;
        width: 2px; height: 14px;
        background: currentColor;
        margin-left: 2px;
        vertical-align: middle;
        animation: blink 0.8s step-end infinite;
    }
    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
    @keyframes msgAppear { to { opacity: 1; transform: translateY(0); } }

    /* === CONTROLS === */
    .controls {
        padding: 12px 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        border-top: 1px solid var(--border);
        background: rgba(10, 10, 15, 0.9);
        backdrop-filter: blur(20px);
    }
    .ctrl-btn {
        font-family: 'Space Mono', monospace;
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
        border: 1px solid var(--border);
        background: transparent;
        color: var(--text-muted);
        padding: 8px 20px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s;
        text-decoration: none;
    }
    .ctrl-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
    .ctrl-btn.primary {
        background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
        border: none;
        color: #fff;
        font-weight: 700;
        padding: 10px 28px;
    }
    .ctrl-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3); }
    .ctrl-btn.primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

    .turn-counter {
        font-family: 'Space Mono', monospace;
        font-size: 11px;
        color: var(--text-muted);
        letter-spacing: 1px;
    }
    .keyboard-hint-bar {
        font-family: 'Space Mono', monospace;
        font-size: 10px;
        color: var(--text-dim);
        display: flex;
        gap: 12px;
        margin-left: auto;
    }
    .keyboard-hint-bar kbd {
        padding: 1px 5px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 3px;
        font-size: 9px;
    }

    /* === RESPONSIVE === */
    @media (max-width: 900px) {
        .battle-area {
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
        }
        .avatar-panel { display: none; }
        .chat-zone { min-height: 70vh; }
        .keyboard-hint-bar { display: none; }
    }
</style>
{% endblock %}

{% block content %}
<div class="arena">
    <!-- HEADER -->
    <div class="arena-header">
        <h1><span class="fire">KI Arena</span></h1>
        <span class="round-badge" id="roundBadge">BEREIT</span>
        <span class="turn-counter" id="turnCounter"></span>
    </div>

    <!-- BATTLE AREA -->
    <div class="battle-area">

        <!-- DEBATER A AVATAR -->
        <div class="avatar-panel side-a">
            <div class="avatar-container">
                <div class="avatar-ring" id="ringA"></div>
                <div class="avatar-face">
                    <svg class="face-svg" viewBox="0 0 140 140">
                        <defs>
                            <radialGradient id="glowA" cx="50%" cy="45%" r="50%">
                                <stop offset="0%" stop-color="#7c3aed" stop-opacity="0.15"/>
                                <stop offset="100%" stop-color="#7c3aed" stop-opacity="0"/>
                            </radialGradient>
                        </defs>
                        <circle cx="70" cy="70" r="60" fill="url(#glowA)"/>
                        <ellipse cx="50" cy="58" rx="8" ry="9" fill="#7c3aed" opacity="0.9"/>
                        <ellipse cx="90" cy="58" rx="8" ry="9" fill="#7c3aed" opacity="0.9"/>
                        <circle cx="52" cy="57" r="3" fill="#0a0a0f"/>
                        <circle cx="92" cy="57" r="3" fill="#0a0a0f"/>
                        <circle cx="54" cy="55" r="1.5" fill="white" opacity="0.8"/>
                        <circle cx="94" cy="55" r="1.5" fill="white" opacity="0.8"/>
                        <path id="mouthA" d="M 52 88 Q 70 95 88 88" stroke="#7c3aed" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.8"/>
                        <circle cx="70" cy="28" r="4" fill="none" stroke="#7c3aed" stroke-width="1.5" opacity="0.4"/>
                        <line x1="70" y1="32" x2="70" y2="42" stroke="#7c3aed" stroke-width="1" opacity="0.3"/>
                    </svg>
                </div>
            </div>
            <div class="avatar-name">{{ debate.config.debater_a.name }}</div>
            <div class="avatar-position">{{ debate.config.debater_a.position }}</div>
            <div class="avatar-model">{{ debate.config.debater_a.model }}</div>
            <div class="status-indicator">
                <div class="status-dot" id="dotA"></div>
                <span id="statusA">Bereit</span>
            </div>
            <div class="sound-wave" id="waveA">
                <div class="sw-bar"></div><div class="sw-bar"></div><div class="sw-bar"></div>
                <div class="sw-bar"></div><div class="sw-bar"></div><div class="sw-bar"></div><div class="sw-bar"></div>
            </div>
        </div>

        <!-- CHAT ZONE -->
        <div class="chat-zone">
            <div class="topic-banner">
                <div class="topic-label">Debatte</div>
                <div class="topic-text">{{ debate.config.topic }}</div>
            </div>
            <div class="messages" id="messages"></div>

            <!-- MODERATOR OVERLAY -->
            <div class="mod-overlay" id="modOverlay">
                <div class="mod-avatar-container">
                    <div class="mod-avatar-ring" id="modRing"></div>
                    <div class="mod-avatar-face">
                        <svg class="face-svg" viewBox="0 0 140 140">
                            <defs>
                                <radialGradient id="glowMod" cx="50%" cy="45%" r="50%">
                                    <stop offset="0%" stop-color="#c8c8dc" stop-opacity="0.12"/>
                                    <stop offset="100%" stop-color="#c8c8dc" stop-opacity="0"/>
                                </radialGradient>
                            </defs>
                            <circle cx="70" cy="70" r="60" fill="url(#glowMod)"/>
                            <!-- Moderator: friendly round eyes -->
                            <circle cx="50" cy="56" r="8" fill="#c8c8dc" opacity="0.85"/>
                            <circle cx="90" cy="56" r="8" fill="#c8c8dc" opacity="0.85"/>
                            <circle cx="52" cy="55" r="3" fill="#0a0a0f"/>
                            <circle cx="92" cy="55" r="3" fill="#0a0a0f"/>
                            <circle cx="53" cy="53" r="1.5" fill="white" opacity="0.8"/>
                            <circle cx="93" cy="53" r="1.5" fill="white" opacity="0.8"/>
                            <!-- Mouth -->
                            <path id="mouthMod" d="M 52 88 Q 70 95 88 88" stroke="#c8c8dc" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.7"/>
                            <!-- Headset/mic detail -->
                            <path d="M 30 55 Q 28 40 40 30" stroke="#c8c8dc" stroke-width="1.5" fill="none" opacity="0.3"/>
                            <circle cx="28" cy="58" r="5" fill="none" stroke="#c8c8dc" stroke-width="1.5" opacity="0.3"/>
                            <line x1="28" y1="63" x2="35" y2="78" stroke="#c8c8dc" stroke-width="1" opacity="0.25"/>
                            <circle cx="36" cy="80" r="3" fill="#c8c8dc" opacity="0.2"/>
                        </svg>
                    </div>
                </div>
                <div class="mod-name">Moderator</div>
                <div class="mod-role" id="modRole">Einleitung</div>
                <div class="mod-wave" id="modWave">
                    <div class="sw-bar"></div><div class="sw-bar"></div><div class="sw-bar"></div>
                    <div class="sw-bar"></div><div class="sw-bar"></div><div class="sw-bar"></div><div class="sw-bar"></div>
                </div>
                <div class="mod-text-display" id="modTextDisplay"></div>
            </div>
        </div>

        <!-- DEBATER B AVATAR -->
        <div class="avatar-panel side-b">
            <div class="avatar-container">
                <div class="avatar-ring" id="ringB"></div>
                <div class="avatar-face">
                    <svg class="face-svg" viewBox="0 0 140 140">
                        <defs>
                            <radialGradient id="glowB" cx="50%" cy="45%" r="50%">
                                <stop offset="0%" stop-color="#ef4444" stop-opacity="0.15"/>
                                <stop offset="100%" stop-color="#ef4444" stop-opacity="0"/>
                            </radialGradient>
                        </defs>
                        <circle cx="70" cy="70" r="60" fill="url(#glowB)"/>
                        <rect x="42" y="50" width="16" height="14" rx="4" fill="#ef4444" opacity="0.9"/>
                        <rect x="82" y="50" width="16" height="14" rx="4" fill="#ef4444" opacity="0.9"/>
                        <circle cx="52" cy="57" r="3" fill="#0a0a0f"/>
                        <circle cx="92" cy="57" r="3" fill="#0a0a0f"/>
                        <circle cx="54" cy="55" r="1.5" fill="white" opacity="0.8"/>
                        <circle cx="94" cy="55" r="1.5" fill="white" opacity="0.8"/>
                        <path id="mouthB" d="M 52 88 Q 70 95 88 88" stroke="#ef4444" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.8"/>
                        <polygon points="70,24 76,34 64,34" fill="none" stroke="#ef4444" stroke-width="1.5" opacity="0.4"/>
                        <line x1="70" y1="34" x2="70" y2="42" stroke="#ef4444" stroke-width="1" opacity="0.3"/>
                    </svg>
                </div>
            </div>
            <div class="avatar-name">{{ debate.config.debater_b.name }}</div>
            <div class="avatar-position">{{ debate.config.debater_b.position }}</div>
            <div class="avatar-model">{{ debate.config.debater_b.model }}</div>
            <div class="status-indicator">
                <div class="status-dot" id="dotB"></div>
                <span id="statusB">Bereit</span>
            </div>
            <div class="sound-wave" id="waveB">
                <div class="sw-bar"></div><div class="sw-bar"></div><div class="sw-bar"></div>
                <div class="sw-bar"></div><div class="sw-bar"></div><div class="sw-bar"></div><div class="sw-bar"></div>
            </div>
        </div>
    </div>

    <!-- CONTROLS -->
    <div class="controls">
        <button class="ctrl-btn" onclick="prevSegment()">⏮ Zurück</button>
        <button class="ctrl-btn primary" id="playBtn" onclick="togglePlay()">▶ Play</button>
        <button class="ctrl-btn" onclick="nextSegment()">Weiter ⏭</button>
        <a href="/debate/{{ debate.id }}" class="ctrl-btn">← Debatte</a>
        <div class="keyboard-hint-bar">
            <span><kbd>Space</kbd> Play</span>
            <span><kbd>←</kbd><kbd>→</kbd> Segment</span>
            <span><kbd>M</kbd> Stumm</span>
        </div>
    </div>
</div>

<!-- Hidden segment data -->
<div id="segmentData" style="display:none">
    {% if debate.intro_audio %}
    <div class="seg" data-src="/audio/{{ debate.id }}/{{ debate.intro_audio }}"
         data-subs="{% if debate.intro_subs %}/audio/{{ debate.id }}/{{ debate.intro_subs }}{% endif %}"
         data-name="Moderator" data-role="Einleitung" data-model=""
         data-text="{{ debate.intro_text|e }}" data-side="mod" data-round="0"></div>
    {% endif %}
    {% for turn in debate.turns %}
    {% if turn.audio_file %}
    {% set is_a = turn.debater_name == debate.config.debater_a.name %}
    <div class="seg" data-src="/audio/{{ debate.id }}/{{ turn.audio_file }}"
         data-subs="{% if turn.subs_file %}/audio/{{ debate.id }}/{{ turn.subs_file }}{% endif %}"
         data-name="{{ turn.debater_name }}"
         data-role="Runde {{ turn.round_num }} · {{ turn.position }}"
         data-model="{{ turn.model }}"
         data-text="{{ turn.content|e }}"
         data-side="{% if is_a %}a{% else %}b{% endif %}"
         data-round="{{ turn.round_num }}"></div>
    {% endif %}
    {% endfor %}
    {% if debate.summary_audio %}
    <div class="seg" data-src="/audio/{{ debate.id }}/{{ debate.summary_audio }}"
         data-subs="{% if debate.summary_subs %}/audio/{{ debate.id }}/{{ debate.summary_subs }}{% endif %}"
         data-name="Moderator" data-role="Zusammenfassung" data-model=""
         data-text="{{ debate.summary_text|e }}" data-side="mod" data-round="99"></div>
    {% endif %}
</div>

<audio id="audioEl" preload="auto"></audio>
{% endblock %}

{% block scripts %}
<script>
const audioEl = document.getElementById('audioEl');
const segments = [...document.querySelectorAll('#segmentData .seg')];
const messagesEl = document.getElementById('messages');
const playBtn = document.getElementById('playBtn');
const modOverlay = document.getElementById('modOverlay');
const debaterNameA = {{ debate.config.debater_a.name|tojson }};
const debaterNameB = {{ debate.config.debater_b.name|tojson }};
const addedModMessages = new Set();
let currentIdx = -1;
let isPlaying = false;
let mouthInterval = null;
let typingInterval = null;
let scrollKeepInterval = null;
let activeTypingBubble = null;  // track the bubble currently being typed into
let activeTypingText = '';       // full text for that bubble
let activeTypingFinalHtml = null; // if set, finalizeTyping uses innerHTML instead of textContent
let subsAnimFrame = null;        // requestAnimationFrame ID for subtitle sync
let currentSubs = null;          // word boundary data for current segment
let subsScrollTarget = null;     // scroll target for subtitle sync

function pauseTyping() {
    // Pause typing animation without finalizing — keeps state for resume
    clearInterval(typingInterval);
    typingInterval = null;
    if (subsAnimFrame) {
        cancelAnimationFrame(subsAnimFrame);
        subsAnimFrame = null;
    }
}

function resumeTyping() {
    // Resume subtitle sync animation after pause
    if (activeTypingBubble && currentSubs) {
        let lastWordIdx = -1;
        function syncFrame() {
            if (!currentSubs) return;
            const timeMs = audioEl.currentTime * 1000;
            let wordIdx = -1;
            while (wordIdx + 1 < currentSubs.length && currentSubs[wordIdx + 1].offset_ms <= timeMs) {
                wordIdx++;
            }
            if (wordIdx !== lastWordIdx) {
                lastWordIdx = wordIdx;
                if (wordIdx >= 0) {
                    const visible = currentSubs.slice(0, wordIdx + 1).map(w => w.text).join(' ');
                    activeTypingBubble.innerHTML = visible + '<span class="typing-cursor"></span>';
                    activeTypingBubble.scrollTop = activeTypingBubble.scrollHeight;
                    if (subsScrollTarget) subsScrollTarget.scrollTop = subsScrollTarget.scrollHeight;
                }
            }
            if (wordIdx >= currentSubs.length - 1) {
                const lastW = currentSubs[currentSubs.length - 1];
                if (timeMs >= lastW.offset_ms + lastW.duration_ms) {
                    activeTypingBubble.textContent = activeTypingText;
                    activeTypingBubble = null;
                    activeTypingText = '';
                    currentSubs = null;
                    subsAnimFrame = null;
                    return;
                }
            }
            subsAnimFrame = requestAnimationFrame(syncFrame);
        }
        subsAnimFrame = requestAnimationFrame(syncFrame);
    }
}

function finalizeTyping() {
    clearInterval(typingInterval);
    clearInterval(scrollKeepInterval);
    typingInterval = null;
    scrollKeepInterval = null;
    if (subsAnimFrame) {
        cancelAnimationFrame(subsAnimFrame);
        subsAnimFrame = null;
    }
    currentSubs = null;
    // If there's an unfinished bubble, show the full text immediately
    if (activeTypingBubble) {
        if (activeTypingFinalHtml) {
            activeTypingBubble.innerHTML = activeTypingFinalHtml;
        } else {
            activeTypingBubble.textContent = activeTypingText;
        }
        activeTypingBubble = null;
        activeTypingText = '';
        activeTypingFinalHtml = null;
    }
}

// === CLEAN MARKDOWN for display ===
function cleanMarkdown(text) {
    return text
        .replace(/\*{1,3}/g, '')
        .replace(/_{1,3}/g, '')
        .replace(/^#{1,6}\s+/gm, '')
        .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
        .replace(/[`~]/g, '')
        .replace(/\n{3,}/g, '\n\n')
        .trim();
}

// === FORMAT SUMMARY as structured HTML ===
function formatSummaryHtml(text) {
    // Split raw text by markdown h3 headers BEFORE cleaning
    const parts = text.split(/^#{1,3}\s+/m).filter(p => p.trim());

    if (parts.length < 2) {
        // Fallback: no recognizable structure, show as plain text
        return `<div class="summary-section fazit" style="opacity:1;transform:none"><div class="summary-section-body">${escapeHtml(cleanMarkdown(text))}</div></div>`;
    }

    const sections = [];
    for (const part of parts) {
        const nlIdx = part.indexOf('\n');
        const header = (nlIdx > -1 ? part.slice(0, nlIdx) : part).trim();
        const body = cleanMarkdown(nlIdx > -1 ? part.slice(nlIdx + 1) : '');
        const headerLower = header.toLowerCase();

        let sideClass = 'fazit';
        if (headerLower.includes(debaterNameA.toLowerCase())) sideClass = 'side-a';
        else if (headerLower.includes(debaterNameB.toLowerCase())) sideClass = 'side-b';

        sections.push(
            `<div class="summary-section ${sideClass}">` +
            `<div class="summary-section-header">${escapeHtml(header)}</div>` +
            `<div class="summary-section-body">${escapeHtml(body)}</div>` +
            `</div>`
        );
    }
    return `<div class="summary-sections">${sections.join('')}</div>`;
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Parse raw summary text into structured sections array
function parseSummarySections(rawText) {
    const parts = rawText.split(/^#{1,3}\s+/m).filter(p => p.trim());
    if (parts.length < 2) return null;
    return parts.map(part => {
        const nlIdx = part.indexOf('\n');
        const header = (nlIdx > -1 ? part.slice(0, nlIdx) : part).trim();
        const body = cleanMarkdown(nlIdx > -1 ? part.slice(nlIdx + 1) : '');
        const headerLower = header.toLowerCase();
        let sideClass = 'fazit';
        if (headerLower.includes(debaterNameA.toLowerCase())) sideClass = 'side-a';
        else if (headerLower.includes(debaterNameB.toLowerCase())) sideClass = 'side-b';
        return { header, body, sideClass, words: body.split(' ') };
    });
}

// Type summary word-by-word into structured sections (subtitle-synced or interval-based)
function typeSummaryInto(container, rawText, scrollTarget, duration, subs) {
    finalizeTyping();
    const sections = parseSummarySections(rawText);
    if (!sections) {
        if (subs && subs.length > 0) {
            typeTextWithSubs(container, cleanMarkdown(rawText), scrollTarget, subs);
        } else {
            typeTextInto(container, cleanMarkdown(rawText), scrollTarget, duration);
        }
        return;
    }

    // Build HTML skeleton with empty bodies, sections initially hidden
    let html = '<div class="summary-sections">';
    sections.forEach((s, i) => {
        const hidden = i > 0 ? ' style="opacity:0;transform:translateY(10px)"' : '';
        html += `<div class="summary-section ${s.sideClass}"${hidden}>` +
            `<div class="summary-section-header">${escapeHtml(s.header)}</div>` +
            `<div class="summary-section-body" data-sum-idx="${i}"></div>` +
            `</div>`;
    });
    html += '</div>';
    container.innerHTML = html;

    // Store final HTML for finalizeTyping
    const finalHtml = formatSummaryHtml(rawText);
    activeTypingBubble = container;
    activeTypingText = cleanMarkdown(rawText);
    activeTypingFinalHtml = finalHtml;

    // Map subtitle words to sections: distribute subs sequentially across section bodies
    // Each section has N words; assign the corresponding subs slice
    function buildSectionSubMap() {
        if (!subs || subs.length === 0) return null;
        const map = [];
        let subsOffset = 0;
        for (const sec of sections) {
            const count = sec.words.length;
            map.push({ start: subsOffset, count });
            subsOffset += count;
        }
        return map;
    }
    const subMap = buildSectionSubMap();

    // Helper: reveal a section
    function revealSection(idx) {
        const el = container.querySelectorAll('.summary-section')[idx];
        if (el) {
            el.style.opacity = '1';
            el.style.transform = 'translateY(0)';
        }
    }

    // Helper: show completion state
    function showFinal() {
        container.innerHTML = finalHtml;
        activeTypingBubble = null;
        activeTypingText = '';
        activeTypingFinalHtml = null;
    }

    if (subMap && subs && subs.length > 0) {
        // === Subtitle-synced mode (requestAnimationFrame) ===
        currentSubs = subs;
        let lastGlobalWordIdx = -1;

        function syncFrame() {
            if (!currentSubs) return;
            const timeMs = audioEl.currentTime * 1000;

            // Find the current global word index
            let globalWordIdx = -1;
            while (globalWordIdx + 1 < subs.length && subs[globalWordIdx + 1].offset_ms <= timeMs) {
                globalWordIdx++;
            }

            if (globalWordIdx !== lastGlobalWordIdx && globalWordIdx >= 0) {
                lastGlobalWordIdx = globalWordIdx;

                // Determine which section and local word index
                let secIdx = 0;
                let localIdx = globalWordIdx;
                for (let i = 0; i < subMap.length; i++) {
                    if (localIdx < subMap[i].count) {
                        secIdx = i;
                        break;
                    }
                    localIdx -= subMap[i].count;
                    secIdx = i + 1;
                }

                // Reveal current section if hidden
                revealSection(secIdx);

                // Finalize all previous sections
                for (let i = 0; i < secIdx && i < sections.length; i++) {
                    const prevBody = container.querySelector(`[data-sum-idx="${i}"]`);
                    if (prevBody && prevBody.querySelector('.typing-cursor')) {
                        prevBody.textContent = sections[i].body;
                    }
                    revealSection(i);
                }

                // Type into current section
                if (secIdx < sections.length) {
                    const bodyEl = container.querySelector(`[data-sum-idx="${secIdx}"]`);
                    if (bodyEl) {
                        const visible = sections[secIdx].words.slice(0, localIdx + 1).join(' ');
                        bodyEl.innerHTML = visible + '<span class="typing-cursor"></span>';
                    }
                }

                container.scrollTop = container.scrollHeight;
                if (scrollTarget) scrollTarget.scrollTop = scrollTarget.scrollHeight;
            }

            // Check if fully done
            if (globalWordIdx >= subs.length - 1) {
                const lastW = subs[subs.length - 1];
                if (timeMs >= lastW.offset_ms + lastW.duration_ms) {
                    currentSubs = null;
                    subsAnimFrame = null;
                    showFinal();
                    return;
                }
            }
            subsAnimFrame = requestAnimationFrame(syncFrame);
        }
        subsAnimFrame = requestAnimationFrame(syncFrame);

    } else {
        // === Interval-based fallback ===
        const totalWords = sections.reduce((sum, s) => sum + s.words.length, 0);
        const interval = duration && duration > 0
            ? Math.max(60, (duration * 900) / totalWords)
            : 120 + Math.random() * 80;

        let secIdx = 0;
        let wordIdx = 0;

        typingInterval = setInterval(() => {
            if (secIdx >= sections.length) {
                clearInterval(typingInterval);
                typingInterval = null;
                showFinal();
                return;
            }

            const sec = sections[secIdx];
            const bodyEl = container.querySelector(`[data-sum-idx="${secIdx}"]`);

            if (wordIdx < sec.words.length) {
                bodyEl.innerHTML = sec.words.slice(0, wordIdx + 1).join(' ') + '<span class="typing-cursor"></span>';
                container.scrollTop = container.scrollHeight;
                if (scrollTarget) scrollTarget.scrollTop = scrollTarget.scrollHeight;
                wordIdx++;
            } else {
                bodyEl.textContent = sec.body;
                secIdx++;
                wordIdx = 0;
                revealSection(secIdx);
            }
        }, interval);
    }
}

// === AVATAR ANIMATION ===
function setMouthOpen(who, open) {
    const mouth = document.getElementById(`mouth${who}`);
    if (!mouth) return;
    if (open) {
        const o = 90 + Math.random() * 8;
        mouth.setAttribute('d', `M 52 85 Q 70 ${o + 10} 88 85 Q 70 ${o + 2} 52 85`);
    } else {
        mouth.setAttribute('d', 'M 52 88 Q 70 95 88 88');
    }
}

function startSpeaking(who) {
    const ring = document.getElementById(`ring${who}`);
    const dot = document.getElementById(`dot${who}`);
    const wave = document.getElementById(`wave${who}`);
    const status = document.getElementById(`status${who}`);

    ring?.classList.add('speaking');
    dot?.classList.add('active');
    wave?.classList.add('active');
    if (status) status.textContent = 'Spricht...';

    let open = false;
    clearInterval(mouthInterval);
    mouthInterval = setInterval(() => {
        open = !open;
        setMouthOpen(who, open);
    }, 150 + Math.random() * 100);
}

function stopSpeaking(who) {
    const ring = document.getElementById(`ring${who}`);
    const dot = document.getElementById(`dot${who}`);
    const wave = document.getElementById(`wave${who}`);
    const status = document.getElementById(`status${who}`);

    ring?.classList.remove('speaking');
    dot?.classList.remove('active');
    wave?.classList.remove('active');
    if (status) status.textContent = 'Bereit';

    clearInterval(mouthInterval);
    mouthInterval = null;
    setMouthOpen(who, false);
}

function stopAllSpeaking() {
    stopSpeaking('A');
    stopSpeaking('B');
    stopModSpeaking();
}

// === MODERATOR ANIMATION ===
function startModSpeaking(role) {
    modOverlay.classList.add('visible');
    document.getElementById('modRole').textContent = role;
    document.getElementById('modRing').classList.add('speaking');
    document.getElementById('modWave').classList.add('active');

    // Mouth animation for moderator
    let open = false;
    clearInterval(mouthInterval);
    mouthInterval = setInterval(() => {
        open = !open;
        setMouthOpen('Mod', open);
    }, 150 + Math.random() * 100);
}

function stopModSpeaking() {
    modOverlay.classList.remove('visible');
    document.getElementById('modRing').classList.remove('speaking');
    document.getElementById('modWave').classList.remove('active');
    clearInterval(mouthInterval);
    mouthInterval = null;
    setMouthOpen('Mod', false);
}

// === TYPING TEXT ===
function typeTextWithSubs(element, text, scrollTarget, subs) {
    finalizeTyping();
    activeTypingBubble = element;
    activeTypingText = text;
    currentSubs = subs;
    subsScrollTarget = scrollTarget;
    element.innerHTML = '<span class="typing-cursor"></span>';

    let lastWordIdx = -1;
    function syncFrame() {
        if (!currentSubs) return;
        const timeMs = audioEl.currentTime * 1000;

        // Find the current word index (last word whose offset has been reached)
        let wordIdx = -1;
        while (wordIdx + 1 < subs.length && subs[wordIdx + 1].offset_ms <= timeMs) {
            wordIdx++;
        }

        // Only update DOM when a new word appears (avoids unnecessary reflows)
        if (wordIdx !== lastWordIdx) {
            lastWordIdx = wordIdx;
            if (wordIdx >= 0) {
                const visible = subs.slice(0, wordIdx + 1).map(w => w.text).join(' ');
                element.innerHTML = visible + '<span class="typing-cursor"></span>';
                element.scrollTop = element.scrollHeight;
                if (subsScrollTarget) subsScrollTarget.scrollTop = subsScrollTarget.scrollHeight;
            }
        }

        // Check if all words fully shown
        if (wordIdx >= subs.length - 1) {
            const lastW = subs[subs.length - 1];
            if (timeMs >= lastW.offset_ms + lastW.duration_ms) {
                element.textContent = text;
                activeTypingBubble = null;
                activeTypingText = '';
                currentSubs = null;
                subsAnimFrame = null;
                return;
            }
        }
        subsAnimFrame = requestAnimationFrame(syncFrame);
    }
    subsAnimFrame = requestAnimationFrame(syncFrame);
}

function typeTextInto(element, text, scrollTarget, audioDuration) {
    finalizeTyping();  // finish any previous typing first
    activeTypingBubble = element;
    activeTypingText = text;

    const words = text.split(' ');
    let i = 0;
    element.innerHTML = '<span class="typing-cursor"></span>';

    // Calculate interval: if audio duration is known, spread words across ~90% of it
    // Otherwise use ~160ms per word (matching the old project's avg of 120 + random*80)
    let interval;
    if (audioDuration && audioDuration > 0) {
        interval = Math.max(60, (audioDuration * 900) / words.length);
    } else {
        interval = 120 + Math.random() * 80;
    }

    typingInterval = setInterval(() => {
        if (i < words.length) {
            element.innerHTML = words.slice(0, i + 1).join(' ') + '<span class="typing-cursor"></span>';
            element.scrollTop = element.scrollHeight;
            if (scrollTarget) scrollTarget.scrollTop = scrollTarget.scrollHeight;
            i++;
        } else {
            clearInterval(typingInterval);
            typingInterval = null;
            element.textContent = text;
            activeTypingBubble = null;
            activeTypingText = '';
        }
    }, interval);
}

function addMessage(side, name, role, text, audioDuration, subs) {
    finalizeTyping();  // finish any previous typing first

    const msg = document.createElement('div');
    const sideClass = side === 'a' ? 'msg-a' : side === 'b' ? 'msg-b' : 'msg-mod';
    msg.className = `message ${sideClass}`;

    const sender = document.createElement('div');
    sender.className = 'msg-sender';
    sender.innerHTML = name + (role ? ` <span class="msg-position">${role}</span>` : '');

    const bubble = document.createElement('div');
    bubble.className = 'msg-bubble';

    msg.appendChild(sender);
    msg.appendChild(bubble);
    messagesEl.appendChild(msg);
    messagesEl.scrollTop = messagesEl.scrollHeight;

    if (subs && subs.length > 0) {
        typeTextWithSubs(bubble, text, messagesEl, subs);
    } else {
        typeTextInto(bubble, text, messagesEl, audioDuration);
    }
}

// === SUBTITLE CACHE ===
const subsCache = {};

async function loadSubs(subsUrl) {
    if (!subsUrl) return null;
    if (subsCache[subsUrl]) return subsCache[subsUrl];
    try {
        const resp = await fetch(subsUrl);
        if (!resp.ok) return null;
        const data = await resp.json();
        subsCache[subsUrl] = data;
        return data;
    } catch {
        return null;
    }
}

// === SEGMENT PLAYBACK ===
async function playSegment(idx) {
    if (idx < 0 || idx >= segments.length) return;

    stopAllSpeaking();
    finalizeTyping();

    currentIdx = idx;
    const seg = segments[idx];
    const side = seg.dataset.side;
    const name = seg.dataset.name;
    const role = seg.dataset.role;
    const rawText = seg.dataset.text;
    const text = cleanMarkdown(rawText);
    const round = seg.dataset.round;
    const subsUrl = seg.dataset.subs;

    // Update round badge
    const badge = document.getElementById('roundBadge');
    if (side === 'mod') {
        badge.textContent = round === '0' ? 'EINLEITUNG' : 'ZUSAMMENFASSUNG';
    } else {
        badge.textContent = `RUNDE ${round}`;
    }

    // Update counter
    document.getElementById('turnCounter').textContent = `${idx + 1} / ${segments.length}`;

    // Load audio and subtitles in parallel
    audioEl.src = seg.dataset.src;
    const subs = await loadSubs(subsUrl);

    function startSegmentAnimations(duration) {
        if (side === 'mod') {
            const modRole = round === '0' ? 'Einleitung' : 'Zusammenfassung';
            const isSummary = round !== '0';
            startModSpeaking(modRole);
            const modText = document.getElementById('modTextDisplay');
            if (isSummary) {
                // Type summary word-by-word into structured sections
                typeSummaryInto(modText, rawText, null, duration, subs);
            } else if (subs && subs.length > 0) {
                typeTextWithSubs(modText, text, null, subs);
            } else {
                typeTextInto(modText, text, null, duration);
            }
            // Add message to chat so it persists after overlay hides (only once per segment)
            if (!addedModMessages.has(idx)) {
                addedModMessages.add(idx);
                const msg = document.createElement('div');
                msg.className = 'message msg-mod';
                const sender = document.createElement('div');
                sender.className = 'msg-sender';
                sender.innerHTML = name + ` <span class="msg-position">${modRole}</span>`;
                const bubble = document.createElement('div');
                bubble.className = 'msg-bubble';
                if (isSummary) {
                    bubble.innerHTML = formatSummaryHtml(rawText);
                } else {
                    bubble.textContent = text;
                }
                msg.appendChild(sender);
                msg.appendChild(bubble);
                messagesEl.appendChild(msg);
            }
        } else {
            if (side === 'a') startSpeaking('A');
            else startSpeaking('B');
            addMessage(side, name, role, text, duration, subs);
        }
    }

    // Try to get audio duration before starting, with fallback
    if (audioEl.readyState >= 1 && audioEl.duration && isFinite(audioEl.duration)) {
        startSegmentAnimations(audioEl.duration);
        audioEl.play();
    } else {
        audioEl.addEventListener('loadedmetadata', function onMeta() {
            audioEl.removeEventListener('loadedmetadata', onMeta);
            startSegmentAnimations(audioEl.duration);
        }, { once: true });
        // Fallback: if metadata takes too long, start anyway
        setTimeout(() => {
            if (!activeTypingBubble) {
                startSegmentAnimations(null);
            }
        }, 500);
        audioEl.load();
        audioEl.play();
    }

    isPlaying = true;
    playBtn.textContent = '⏸ Pause';
    prefetchNextSubs();
}

function togglePlay() {
    if (isPlaying) {
        audioEl.pause();
        isPlaying = false;
        stopAllSpeaking();
        pauseTyping();
        playBtn.textContent = '▶ Play';
    } else if (currentIdx >= 0) {
        const side = segments[currentIdx].dataset.side;
        audioEl.play();
        isPlaying = true;
        if (side === 'a') startSpeaking('A');
        else if (side === 'b') startSpeaking('B');
        else if (side === 'mod') {
            const round = segments[currentIdx].dataset.round;
            startModSpeaking(round === '0' ? 'Einleitung' : 'Zusammenfassung');
        }
        resumeTyping();
        playBtn.textContent = '⏸ Pause';
    } else if (segments.length > 0) {
        playSegment(0);
    }
}

function nextSegment() {
    if (currentIdx < segments.length - 1) {
        playSegment(currentIdx + 1);
    } else if (currentIdx === segments.length - 1 && isPlaying) {
        // Skip last segment (e.g. summary) → go to finished state
        audioEl.pause();
        audioEl.currentTime = 0;
        stopAllSpeaking();
        finalizeTyping();
        isPlaying = false;
        playBtn.textContent = '↻ Nochmal';
        document.getElementById('roundBadge').textContent = 'FERTIG';
    }
}

function prevSegment() {
    if (currentIdx > 0) playSegment(currentIdx - 1);
}

// Prefetch next segment's subtitles
function prefetchNextSubs() {
    const nextIdx = currentIdx + 1;
    if (nextIdx < segments.length) {
        const nextSubsUrl = segments[nextIdx].dataset.subs;
        if (nextSubsUrl) loadSubs(nextSubsUrl);
    }
}

// Auto-advance when audio ends
audioEl.addEventListener('ended', () => {
    stopAllSpeaking();
    if (currentIdx < segments.length - 1) {
        setTimeout(() => playSegment(currentIdx + 1), 600);
    } else {
        isPlaying = false;
        playBtn.textContent = '↻ Nochmal';
        document.getElementById('roundBadge').textContent = 'FERTIG';
    }
});

// Audio error: skip
audioEl.addEventListener('error', () => {
    stopAllSpeaking();
    setTimeout(() => {
        if (currentIdx < segments.length - 1) playSegment(currentIdx + 1);
        else {
            isPlaying = false;
            playBtn.textContent = '▶ Play';
        }
    }, 1500);
});

audioEl.addEventListener('pause', () => {
    if (!audioEl.ended) {
        stopAllSpeaking();
        playBtn.textContent = '▶ Play';
    }
});

// Keyboard shortcuts
document.addEventListener('keydown', (e) => {
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
    switch (e.key) {
        case ' ':
            e.preventDefault();
            togglePlay();
            break;
        case 'ArrowRight':
            e.preventDefault();
            nextSegment();
            break;
        case 'ArrowLeft':
            e.preventDefault();
            prevSegment();
            break;
        case 'ArrowUp':
            e.preventDefault();
            audioEl.volume = Math.min(1, audioEl.volume + 0.1);
            break;
        case 'ArrowDown':
            e.preventDefault();
            audioEl.volume = Math.max(0, audioEl.volume - 0.1);
            break;
        case 'm':
            audioEl.muted = !audioEl.muted;
            break;
    }
});
</script>
{% endblock %}