{#
  This file is part of g0v/OpenTransLive.
  Copyright (c) 2025 Sean Gau <rrtw0627@gmail.com>
  Licensed under the GNU AGPL v3.0
  See LICENSE for details.
-#}
{% extends "base.html" %}
{% block title %}Meeting Captions - Live Transcript{% endblock %}
{% block content %}
<div id="app-root" class="relative flex h-dvh flex-col !bg-[var(--rt-canvas)] font-sans !text-[var(--rt-text)]">

  <!-- Top Bar -->
  <div id="top-bar" class="top-bar flex min-h-10 shrink-0 items-center gap-2 border-b border-[var(--rt-border)] !bg-[var(--rt-surface)] px-2 shadow-[0_8px_28px_color-mix(in_srgb,var(--rt-canvas)_64%,transparent)] max-md:min-h-9 max-md:gap-1 max-md:px-1.5">
    <div class="viewer-brand flex min-w-0 items-center gap-1.5">
      <span class="viewer-brand-mark inline-flex size-6 shrink-0 items-center justify-center rounded-md bg-[#326fbd] text-[#f4f8fd] shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]" aria-hidden="true">
        <iconify-icon icon="ph:waveform" width="15" height="15"></iconify-icon>
      </span>
      <span class="whitespace-nowrap text-xs font-bold tracking-[-0.015em] text-[var(--rt-text)] max-md:hidden">Meeting Captions</span>
      <span class="whitespace-nowrap border-l border-[var(--rt-border-strong)] pl-1.5 text-[0.65rem] text-[var(--rt-muted)] max-md:hidden">Live transcript</span>
      <span class="ml-0.5 flex shrink-0 items-center gap-1.5 whitespace-nowrap text-[0.7rem] text-[var(--rt-muted)]">
        <span id="status-indicator" class="status-dot-sm bg-gray-400"></span>
        <span id="status-text" class="max-md:hidden">Connecting...</span>
      </span>
    </div>

    <div class="viewer-controls ms-auto flex min-w-0 items-center justify-end gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-md:gap-0.5 max-md:[&>div]:ml-0 max-md:[&>div]:gap-0.5 max-md:[&>div]:pl-1.5">
      <!-- Theme buttons -->
      <div class="flex items-center gap-1 shrink-0">
        <button data-theme="light" class="icon-btn theme-btn icon-btn-sm text-xs" aria-label="Light theme"
          aria-pressed="false" title="Light theme">
          <iconify-icon icon="ph:sun" width="15" height="15"></iconify-icon>
        </button>
        <button data-theme="dark" class="icon-btn theme-btn icon-btn-sm text-xs" aria-label="Dark theme"
          aria-pressed="false" title="Dark theme">
          <iconify-icon icon="ph:moon" width="15" height="15"></iconify-icon>
        </button>
        <button data-theme="high-contrast" class="icon-btn theme-btn icon-btn-sm text-xs" aria-label="High contrast theme"
          aria-pressed="false" title="High contrast theme">
          <iconify-icon icon="ph:circle-half" width="15" height="15"></iconify-icon>
        </button>
      </div>

      <!-- Font size controls -->
      <div class="flex items-center gap-1 shrink-0 border-l pl-2 ml-1 border-divider" title="Font size">
        <button id="font-decrease" class="icon-btn icon-btn-sm" aria-label="Decrease font size"><iconify-icon
            icon="ph:minus" width="18" height="18"></iconify-icon></button>
        <button id="font-increase" class="icon-btn icon-btn-sm" aria-label="Increase font size"><iconify-icon
            icon="ph:plus" width="18" height="18"></iconify-icon></button>
        <!-- Fade highlight toggle -->
        <button id="fade-toggle" class="icon-btn icon-btn-sm active" aria-label="Toggle highlight fade"
          aria-pressed="true" title="Toggle highlight fade">
          <iconify-icon icon="ph:highlighter-circle" width="18" height="18"></iconify-icon>
        </button>
        <!-- Language settings button -->
        <button id="lang-btn" class="icon-btn icon-btn-sm" aria-label="Language settings" aria-expanded="false"
          title="Language settings">
          <iconify-icon icon="ph:translate" width="18" height="18"></iconify-icon>
        </button>
      </div>

      <!-- Action buttons -->
      <div class="flex items-center gap-1 shrink-0 border-l pl-2 ml-1 border-divider">
        <!-- Screen capture + captions -->
        <button id="share-btn" hidden class="icon-btn icon-btn-sm" aria-label="Present a window with captions (this device only)"
          title="Present a window with captions (this device only)">
          <iconify-icon icon="ph:presentation" width="15" height="15"></iconify-icon>
        </button>
        <!-- QR code button -->
        <div id="qr-area" class="relative">
          <button id="qr-btn" class="icon-btn icon-btn-sm" aria-label="Show QR code" aria-expanded="false"
            title="Show QR code">
            <iconify-icon icon="ph:qr-code" width="15" height="15"></iconify-icon>
          </button>
          <!-- QR popup -->
          <div id="qr-popup"
            class="qr-popup-bg hidden fixed right-2 top-10 z-50 min-w-max rounded-xl border border-[var(--rt-border-strong)] bg-[var(--rt-surface)] p-3 text-[var(--rt-text)] shadow-[0_24px_70px_color-mix(in_srgb,var(--rt-canvas)_82%,transparent)]">
            <div class="mb-2 text-xs font-semibold text-[var(--rt-muted)]">Scan to open</div>
            <img id="qr-img" class="w-40 h-40 rounded-lg" src="" alt="QR code" />
            <div id="qr-url-text"
              class="qr-url-copy mt-2 flex max-w-40 cursor-pointer items-center gap-1 rounded px-1.5 py-1 text-xs text-[var(--rt-muted)]"
              role="button" tabindex="0" title="Click to copy">
              <span class="truncate flex-1" id="qr-url-value"></span>
              <iconify-icon icon="ph:copy" width="12" height="12" class="shrink-0"></iconify-icon>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div id="viewer-empty" class="viewer-empty pointer-events-none absolute inset-[40px_0_32px] z-[2] flex flex-col items-center justify-center gap-2 p-8 text-center text-[var(--rt-muted)] max-md:inset-[36px_0_32px]" role="status">
    <iconify-icon icon="ph:closed-captioning" width="24" height="24" class="mb-1 text-[var(--rt-accent)]" aria-hidden="true"></iconify-icon>
    <strong class="text-[0.95rem] font-bold text-[var(--rt-text)]">Waiting for transcript</strong>
    <span class="max-w-[28ch] text-[0.78rem]">New speech will appear here automatically.</span>
  </div>

  <!-- Single Language View -->
  <div id="single-view" class="flex-1 overflow-hidden bg-[var(--rt-canvas)] p-1 max-md:p-0.5">
    <div id="single-content" class="rt-text relative flex h-full min-h-0 w-full flex-col overflow-hidden rounded-xl border border-[var(--rt-border)] bg-[var(--rt-surface)] shadow-[0_14px_36px_color-mix(in_srgb,var(--rt-canvas)_72%,transparent)]"></div>
  </div>

  <!-- Grid Layout View -->
  <div id="grid-view" class="hidden flex-1 overflow-hidden bg-[var(--rt-canvas)] p-1 max-md:p-0.5">
    <div id="grid-content" class="rt-text grid h-full w-full gap-1">
    </div>
  </div>

  <!-- Screen capture + captions combined view -->
  <div id="combine-view" class="min-h-0 flex-1 flex-col bg-[var(--rt-canvas)]">
    <div id="combine-captions" class="rt-text relative flex shrink-0 flex-col overflow-hidden border-b border-[var(--rt-border)] bg-[var(--rt-surface)]"></div>
    <div class="flex min-h-0 flex-1">
      <div class="relative min-w-0 flex-1 bg-black flex flex-col">
        <div class="pointer-events-none inline-flex items-center gap-1.5 rounded-md bg-black px-2 py-1 text-xs text-white/50">
          <iconify-icon icon="ph:lock-simple" width="13" height="13" aria-hidden="true"></iconify-icon>This screen is only visible on this device.
        </div>
        <video id="combine-video" class="flex-1 object-contain" autoplay muted playsinline></video>
      </div>
      <aside id="combine-sidebar" class="flex w-64 shrink-0 flex-col gap-4 overflow-y-auto border-l border-[var(--rt-border)] bg-[var(--rt-surface)] p-3 text-sm text-[var(--rt-text)]">
        <section class="flex flex-col items-center gap-2 text-center">
          <div class="text-xs font-semibold text-[var(--rt-muted)]">Scan for captions on your phone</div>
          <img id="combine-qr-img" class="aspect-square w-full rounded-lg bg-white" src="" alt="QR code to open this transcript" />
          <ul class="w-full space-y-1.5 text-left text-xs">
            <li class="flex items-center gap-2"><iconify-icon icon="ph:translate" width="14" height="14"></iconify-icon>Pick your own language</li>
            <li class="flex items-center gap-2"><iconify-icon icon="ph:text-aa" width="14" height="14"></iconify-icon>Adjust text size</li>
            <li class="flex items-center gap-2"><iconify-icon icon="ph:circle-half" width="14" height="14"></iconify-icon>Dark &amp; high-contrast themes</li>
          </ul>
          <div class="w-full text-left">
            <div class="mb-1 text-xs font-semibold text-[var(--rt-muted)]">Available languages</div>
            <div id="combine-lang-chips" class="flex flex-wrap gap-1"></div>
          </div>
        </section>
        <section class="mt-auto flex flex-col gap-2 border-t border-[var(--rt-border)] pt-3">
          <div class="text-xs font-semibold text-[var(--rt-muted)]">Controls</div>
          <label class="flex flex-col gap-1 text-xs">Caption language
            <select id="combine-lang-select" class="select-ctrl w-full rounded-md border px-2 py-1 text-sm"></select>
          </label>
          <div class="flex items-center gap-1">
            <span class="flex-1 text-xs">Text size</span>
            <button id="combine-font-decrease" class="icon-btn icon-btn-sm" aria-label="Decrease font size"><iconify-icon icon="ph:minus" width="16" height="16"></iconify-icon></button>
            <button id="combine-font-increase" class="icon-btn icon-btn-sm" aria-label="Increase font size"><iconify-icon icon="ph:plus" width="16" height="16"></iconify-icon></button>
          </div>
          <div class="flex items-center gap-1">
            <span class="flex-1 text-xs">Theme</span>
            <button data-theme="light" class="icon-btn theme-btn icon-btn-sm" aria-label="Light theme" aria-pressed="false" title="Light theme">
              <iconify-icon icon="ph:sun" width="15" height="15"></iconify-icon>
            </button>
            <button data-theme="dark" class="icon-btn theme-btn icon-btn-sm" aria-label="Dark theme" aria-pressed="false" title="Dark theme">
              <iconify-icon icon="ph:moon" width="15" height="15"></iconify-icon>
            </button>
            <button data-theme="high-contrast" class="icon-btn theme-btn icon-btn-sm" aria-label="High contrast theme" aria-pressed="false" title="High contrast theme">
              <iconify-icon icon="ph:circle-half" width="15" height="15"></iconify-icon>
            </button>
          </div>
          <button id="combine-change-source" type="button" class="inline-flex items-center justify-center gap-1.5 rounded-md border border-[var(--rt-border)] px-3 py-1.5 text-xs hover:bg-[var(--rt-surface-muted)]"><iconify-icon icon="ph:arrows-clockwise" width="14" height="14"></iconify-icon>Change source</button>
          <button id="combine-stop" type="button" class="inline-flex items-center justify-center gap-1.5 rounded-md bg-red-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-red-700"><iconify-icon icon="ph:stop-circle" width="14" height="14"></iconify-icon>Stop presenting</button>
        </section>
      </aside>
    </div>
  </div>


  <!-- Footer -->
  <footer class="viewer-footer flex min-h-8 shrink-0 flex-wrap items-center justify-center gap-y-1 overflow-x-auto border-t border-[var(--rt-border)] bg-[var(--rt-surface)] px-4 text-xs text-[var(--rt-muted)] [scrollbar-width:none] max-md:flex-nowrap max-md:justify-start">
    <span class="inline-flex min-h-[18px] items-center whitespace-nowrap px-3 text-[0.68rem]">GT Live</span>
    <a href="{{ source_code_url }}" target="_blank" rel="noopener"
      class="inline-flex min-h-[18px] items-center gap-1 whitespace-nowrap border-l border-[var(--rt-border)] px-3 text-[0.68rem]">
      <iconify-icon icon="ph:github-logo" width="12" height="12"></iconify-icon>Source code
    </a>
    <span class="inline-flex min-h-[18px] items-center whitespace-nowrap border-l border-[var(--rt-border)] px-3 text-[0.68rem]">AI-generated content may contain errors.</span>
  </footer>

  <!-- Language picker modal -->
  <div id="lang-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" role="dialog"
    aria-modal="true" aria-labelledby="lang-modal-title">
    <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" id="lang-backdrop"></div>
    <div class="info-modal-bg relative z-10 mx-4 w-full max-w-sm overflow-hidden rounded-xl border border-[var(--rt-border-strong)] bg-[var(--rt-surface)] text-[var(--rt-text)] shadow-[0_24px_70px_color-mix(in_srgb,var(--rt-canvas)_82%,transparent)]">
      <div class="flex items-start justify-between px-5 pt-5 pb-2">
        <div>
          <h2 id="lang-modal-title" class="text-base font-semibold">Choose a language</h2>
          <p class="mt-0.5 text-xs text-[var(--rt-muted)]" id="lang-subtitle">Select which language to display</p>
        </div>
        <button id="lang-close" class="icon-btn icon-btn-md shrink-0" aria-label="Close">
          <iconify-icon icon="ph:x" width="16" height="16"></iconify-icon>
        </button>
      </div>
      <div class="px-4 py-3 space-y-2 max-h-[60vh] overflow-y-auto" id="lang-list"></div>
      <div class="px-4 pb-4 space-y-2">
        <button id="lang-show-all"
          class="lang-option-btn w-full rounded-xl border border-[var(--rt-border)] bg-[var(--rt-surface-muted)] px-4 py-2.5 text-sm font-medium text-[var(--rt-text)] transition-colors hover:border-[var(--rt-accent)] hover:bg-[var(--rt-accent-soft)] hover:text-[var(--rt-accent)] hover:ring-1 hover:ring-inset hover:ring-[var(--rt-accent)]">
          Show all languages
        </button>
        <button id="lang-advanced-toggle"
          class="inline-flex w-full items-center justify-center gap-1 rounded-lg py-1 text-xs text-[var(--rt-muted)] transition-colors hover:bg-[var(--rt-surface-muted)] hover:text-[var(--rt-text)]">
          <iconify-icon id="lang-advanced-caret" icon="ph:caret-down" width="12" height="12"></iconify-icon>
          <span id="lang-advanced-label">Advanced</span>
        </button>
      </div>
    </div>
  </div>

</div>
{% endblock %} {% block head %}
<style>
  /* ------------------------------------------------------------------ */
  /* CSS custom properties - theme tokens                                */
  /* ------------------------------------------------------------------ */
  :root {
    --rt-font-size: 1.25rem;
    color-scheme: light;
  }

  :root.meeting-mode{--rt-font-size:clamp(1.375rem,1rem + 1.4vw,2.75rem)}
  .meeting-mode .grid-lang-label{font-size:0.95rem;min-height:1.75rem}
  .meeting-mode .grid-lang-label{cursor:pointer}
  /* Meeting caption window: a fixed-height subtitle area anchored low in the
     column; older rows are pushed up and clipped. data-view="history" falls back
     to the scrollable list. */
  .meeting-mode .grid-lang-box[data-view="caption"] .language-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: 0.5em 2em 1.5em;
    line-height: 1.5;
    scrollbar-width: none;
  }
  .meeting-mode .grid-lang-box[data-view="caption"] .language-card > .contents { display: block; }
  .meeting-mode .grid-lang-box[data-view="caption"] > .icon-btn-sm { display: none; }
  .grid-lang-label[data-status-text]:not([data-status-text=""])::after {
    content: attr(data-status-text);
    margin-left: auto;
    padding: 0 0.5rem;
    border-radius: 999px;
    background-color: #fde68a;
    color: #78350f;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0;
  }

  .rt-text {
    font-size: var(--rt-font-size);
  }

  #grid-content {
    grid-template-columns: repeat(var(--grid-cols, 1), 1fr);
    /* --grid-row-h is set (in px) only when rows are pinned to a fixed height;
       otherwise rows split the container evenly. */
    grid-template-rows: repeat(var(--grid-rows, 1), var(--grid-row-h, 1fr));
  }

  /* Screen capture + captions combined view. Hidden via the root class (not
     per-element `hidden`) so applyVisibilityChange can't re-show the normal
     views mid-capture; !important beats its Tailwind `hidden` toggles. */
  #app-root:not(.combine-active) #combine-view {
    display: none;
  }

  #app-root.combine-active #combine-view {
    display: flex;
  }

  #app-root.combine-active :is(#top-bar, #single-view, #grid-view, #viewer-empty) {
    display: none !important;
  }

  /* Exactly 3 caption lines (card line-height 1.62). The card follows the
     bottom, so the window is 3 lines + bottom padding only: counting the top
     padding too would expose a sliver of the previous line above them.
     +1px: the strip's border-b sits inside this border-box height. */
  #combine-captions {
    --combine-pad: 0.5rem;
    height: calc(var(--rt-font-size) * 1.62 * 3 + var(--combine-pad) + 1px);
  }

  #combine-captions .language-card {
    padding-block: var(--combine-pad);
  }

  /* ------------------------------------------------------------------ */
  /* Light theme (default)                                               */
  /* ------------------------------------------------------------------ */
  #app-root {
    background-color: #ffffff;
    color: #111827;
  }

  .top-bar {
    background-color: #f9fafb;
    border-color: #e5e7eb;
  }

  .border-divider {
    border-color: #e5e7eb;
  }

  .icon-btn {
    color: #374151;
    background-color: transparent;
    transition: background-color 0.15s;
  }

  .icon-btn:hover {
    background-color: #e5e7eb;
  }

  .icon-btn.active {
    background-color: #dbeafe;
    color: #1d4ed8;
  }

  .select-ctrl {
    background-color: #ffffff;
    color: #111827;
    border-color: #d1d5db;
  }

  .qr-popup-bg {
    background-color: #ffffff;
    border-color: #e5e7eb;
  }

  .qr-url-copy:hover {
    background-color: rgba(127, 127, 127, 0.15);
  }

  .qr-url-copy.copied {
    background-color: rgb(34, 197, 94);
    color: #ffffff;
    opacity: 1;
  }

  .info-modal-bg {
    background-color: #ffffff;
    border-color: #e5e7eb;
    color: #111827;
  }


  .grid-lang-box {
    border: 1.5px solid #e5e7eb;
    border-radius: 0.5rem;
  }

  .grid-lang-label {
    background-color: #f3f4f6;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
  }

  .lang-advanced-row {
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
  }

  .lang-option-btn {
    background-color: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
    transition: background-color 0.12s;
  }

  .lang-option-btn:hover,
  .lang-option-btn:active,
  .lang-option-btn.selected {
    background-color: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
  }

  /* ------------------------------------------------------------------ */
  /* Dark theme                                                          */
  /* ------------------------------------------------------------------ */
  #app-root.theme-dark {
    background-color: #0f172a;
    color: #e2e8f0;
    color-scheme: dark;
  }

  #app-root.theme-dark .top-bar {
    background-color: #1e293b;
    border-color: #334155;
  }

  #app-root.theme-dark .border-divider {
    border-color: #334155;
  }

  #app-root.theme-dark .icon-btn {
    color: #94a3b8;
  }

  #app-root.theme-dark .icon-btn:hover {
    background-color: #334155;
  }

  #app-root.theme-dark .icon-btn.active {
    background-color: #1e3a5f;
    color: #60a5fa;
  }

  #app-root.theme-dark .select-ctrl {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
  }

  #app-root.theme-dark .qr-popup-bg {
    background-color: #1e293b;
    border-color: #334155;
  }

  #app-root.theme-dark .info-modal-bg {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
  }


  #app-root.theme-dark .grid-lang-box {
    border-color: #334155;
  }

  #app-root.theme-dark .grid-lang-label {
    background-color: #1e293b;
    color: #475569;
    border-color: #334155;
  }

  #app-root.theme-dark .lang-advanced-row {
    background-color: #0f172a;
    border-color: #334155;
  }

  #app-root.theme-dark .lang-option-btn {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
  }

  #app-root.theme-dark .lang-option-btn:hover,
  #app-root.theme-dark .lang-option-btn:active,
  #app-root.theme-dark .lang-option-btn.selected {
    background-color: #1e3a5f;
    border-color: #3b82f6;
    color: #60a5fa;
  }

  /* ------------------------------------------------------------------ */
  /* High contrast theme                                                 */
  /* ------------------------------------------------------------------ */
  #app-root.theme-high-contrast {
    background-color: #000000;
    color: #ffffff;
  }

  #app-root.theme-high-contrast .top-bar {
    background-color: #000000;
    border-color: #ffff00;
    border-bottom-width: 2px;
  }

  #app-root.theme-high-contrast .border-divider {
    border-color: #444;
  }

  #app-root.theme-high-contrast .icon-btn {
    color: #ffff00;
  }

  #app-root.theme-high-contrast .icon-btn:hover {
    background-color: #222;
  }

  #app-root.theme-high-contrast .icon-btn.active {
    background-color: #333;
    color: #fff;
  }

  #app-root.theme-high-contrast .select-ctrl {
    background-color: #000000;
    color: #ffff00;
    border-color: #ffff00;
  }

  #app-root.theme-high-contrast .qr-popup-bg {
    background-color: #000000;
    border-color: #ffff00;
    border-width: 2px;
  }

  #app-root.theme-high-contrast .info-modal-bg {
    background-color: #000000;
    border-color: #ffff00;
    border-width: 2px;
    color: #ffffff;
  }


  #app-root.theme-high-contrast .grid-lang-box {
    border-color: #ffff00;
    border-width: 2px;
  }

  #app-root.theme-high-contrast .grid-lang-label {
    background-color: #111;
    color: #ffff00;
    border-color: #ffff00;
  }

  #app-root.theme-high-contrast .lang-advanced-row {
    background-color: #111;
    border-color: #555;
  }

  #app-root.theme-high-contrast .lang-option-btn {
    background-color: #111;
    color: #ffffff;
    border-color: #555;
  }

  #app-root.theme-high-contrast .lang-option-btn:hover,
  #app-root.theme-high-contrast .lang-option-btn:active,
  #app-root.theme-high-contrast .lang-option-btn.selected {
    background-color: #333;
    border-color: #ffff00;
    color: #ffff00;
  }

  /* ------------------------------------------------------------------ */
  /* Highlight animation                                                 */
  /* ------------------------------------------------------------------ */
  @keyframes new-text-highlight {

    0%,
    20% {
      background-color: var(--hl-color, rgba(139, 92, 246, 0.2));
    }

    80%,
    100% {
      background-color: transparent;
    }
  }

  /* Persistent opacity for the live partial region - kept on the span itself
     so it survives the remove/add of .new-text used to replay the animation. */
  .partial-text {
    opacity: 0.85;
  }

  .new-text {
    --hl-color: color-mix(in srgb, var(--rt-accent) 16%, transparent);
    animation: new-text-highlight 2s ease-out forwards;
  }

  .new-text-commit {
    --hl-color: color-mix(in srgb, var(--rt-accent) 22%, transparent);
    animation: new-text-highlight 2s ease-out forwards;
  }

  #app-root.fade-off .new-text,
  #app-root.fade-off .new-text-commit {
    animation: none;
  }

  /* Viewer redesign: semantic tokens keep every surface coherent across modes. */
  #app-root {
    --rt-canvas: #f5f7fa;
    --rt-surface: #ffffff;
    --rt-surface-muted: #edf1f6;
    --rt-border: #d9e0e9;
    --rt-border-strong: #c3ceda;
    --rt-text: #18212d;
    --rt-muted: #627084;
    --rt-accent: #2c65ad;
    --rt-accent-soft: #e2edf9;
    --rt-radius: 12px;
  }

  #app-root.theme-dark {
    --rt-canvas: #0d141e;
    --rt-surface: #141e2a;
    --rt-surface-muted: #1a2634;
    --rt-border: #293748;
    --rt-border-strong: #3a4b60;
    --rt-text: #edf3fa;
    --rt-muted: #93a1b4;
    --rt-accent: #78a9ed;
    --rt-accent-soft: #203b5d;
    color-scheme: dark;
  }

  #app-root.theme-high-contrast {
    --rt-canvas: #000000;
    --rt-surface: #000000;
    --rt-surface-muted: #111111;
    --rt-border: #555555;
    --rt-border-strong: #ffff00;
    --rt-text: #ffffff;
    --rt-muted: #ffffff;
    --rt-accent: #ffff00;
    --rt-accent-soft: #252500;
  }

  #app-root :is(button, a, [role="button"]):focus-visible {
    outline: 2px solid var(--rt-accent);
    outline-offset: 2px;
  }

  #app-root button:active {
    transform: translateY(1px);
  }

  /* Stateful theme colors stay in CSS; geometry and spacing live in Tailwind. */
  #app-root :is(.param-code, .param-example-btn, .lang-advanced-row) {
    color: var(--rt-text) !important;
    background: var(--rt-surface-muted) !important;
    border-color: var(--rt-border) !important;
  }

  #app-root .param-code {
    color: var(--rt-accent) !important;
  }

  #app-root :is(.param-example-btn.active-param, .lang-option-btn.selected) {
    color: var(--rt-accent) !important;
    background: var(--rt-accent-soft) !important;
    border-color: var(--rt-accent) !important;
  }

  #app-root.theme-high-contrast .viewer-brand-mark {
    color: #000000;
    background: #ffff00;
  }

  #app-root.theme-high-contrast #single-content {
    border: 2px solid var(--rt-accent);
  }

  @media (prefers-reduced-motion: reduce) {
    #app-root *,
    #app-root *::before,
    #app-root *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    #info-modal > .absolute,
    #lang-modal > .absolute {
      background: var(--rt-canvas);
      backdrop-filter: none;
    }
  }

</style>
{% endblock %} {% block scripts %}
{% set demo_mode = demo | default(false) %}
{% if demo_mode %}
<script src="/static/js/rt_demo.js?v={{ timestamp }}" defer></script>
{% endif %}
<script>
  // Demo mode replaces the SSE feed with a local generator; everything else on
  // this page is untouched. See static/js/rt_demo.js.
  const DEMO_MODE = {{ 'true' if demo_mode else 'false' }};
  const MEETING_LANGUAGES = {{ (meeting_languages or ['zh-Hant-TW', 'ja-JP']) | tojson }};
  const MEETING_MODE = new URLSearchParams(window.location.search).get('mode') === 'meeting';
  let transcriptionsData = {{ data | tojson(indent = 2) }};
  const captionVersions = new Map();
  const captionColumns = new Map();
  function acceptColumnVersion(data) {
    if (!MEETING_MODE || !MEETING_LANGUAGES.includes(data?.target_language)
      || !Number.isInteger(data.generation) || !Number.isInteger(data.revision)
      || !Array.isArray(data.target?.history) || !Array.isArray(data.source?.history)) return false;
    const previous = captionColumns.get(data.target_language);
    if (previous && (data.generation < previous.generation
      || (data.generation === previous.generation && data.revision <= previous.revision))) return false;
    captionColumns.set(data.target_language, data);
    // Serials restarting below the cutoff means the server reset (TTL expiry or
    // restart); the old cutoff would hide every new row, so drop it.
    const cutoff = columnClearCutoff.get(data.target_language);
    if (cutoff) {
      const serials = [...data.target.history, data.target.confirmed_live].filter(Boolean)
        .map(rowSerial).filter(n => n !== null);
      if (serials.length && Math.max(...serials) < cutoff) columnClearCutoff.delete(data.target_language);
    }
    return true;
  }

  // Highest row serial hidden by "clear viewer", per language. Row ids end in a
  // serial that only grows, even across stream generations.
  const columnClearCutoff = new Map();
  function rowSerial(row) {
    const match = /(\d+)$/.exec(String(row?.id ?? ''));
    return match ? Number(match[1]) : null;
  }
  // The cutoff lives only in this page's memory; a refresh discards it.
  function clearColumnSnapshots() {
    for (const [lang, column] of captionColumns) {
      const rows = [...(column.target?.history || []), column.target?.confirmed_live].filter(Boolean);
      const serials = rows.map(rowSerial).filter(n => n !== null);
      columnClearCutoff.set(lang, Math.max(columnClearCutoff.get(lang) ?? 0, ...serials));
    }
    captionColumns.clear();
  }
  function wantsColumnSnapshot() {
    const columns = new URLSearchParams(window.location.search).get('columns');
    return columns === '1' || columns === 'soniox';
  }

  // Caption window size from ?lines= (default 3, clamped to 1..8).
  function meetingLines() {
    const raw = new URLSearchParams(window.location.search).get('lines');
    const n = raw === null || raw.trim() === '' ? NaN : Math.floor(Number(raw));
    return Number.isFinite(n) ? Math.min(8, Math.max(1, n)) : 3;
  }
  // Keep only the last `count` sentences (history + last) for the caption window.
  function captionWindow(historyItems, lastText, count) {
    const rows = Array.from(historyItems);
    if (lastText) rows.push(lastText);
    const kept = rows.slice(-count);
    return {historyItems: kept.slice(0, -1), lastText: kept.at(-1) || ''};
  }
  function toggleCaptionView(box) {
    box.setAttribute('data-view', box.getAttribute('data-view') === 'history' ? 'caption' : 'history');
  }

  function buildIndependentText(lang) {
    const column = captionColumns.get(lang);
    if (!column) return null;
    const cutoff = columnClearCutoff.get(lang) ?? 0;
    const rows = [...column.target.history];
    if (column.target.confirmed_live) rows.push(column.target.confirmed_live);
    const shown = cutoff ? rows.filter(row => (rowSerial(row) ?? Infinity) > cutoff) : rows;
    const texts = shown.slice(-MAX_HISTORY).map(row => applyLangDict(lang, row.display_text || '') + '\n');
    return {historyItems:texts.slice(0,-1), lastText:texts.at(-1) || '',
      partialText:(column.target.provisional || []).map(row => applyLangDict(lang, row.display_text || '')).join('')};
  }

  // The source-language reference no longer lives inside the card (it pushed the
  // translation out of view). Only the stream status is recorded: on the box as
  // data-column-status, and as a short badge text on the language label.
  function refreshColumnReference(lang, card) {
    const column = captionColumns.get(lang);
    const box = card.parentElement;
    if (!box) return;
    const label = box.querySelector('.grid-lang-label');
    if (!column) {
      box.removeAttribute('data-column-status');
      if (label) label.setAttribute('data-status-text', '');
      return;
    }
    const statusLabel = {'zh-Hant-TW':{connected:'連線中',finished:'已完成',disconnected:'連線中斷',stopped:'已停止',error:'此語串流錯誤'},
      'ja-JP':{connected:'接続中',finished:'完了',disconnected:'切断',stopped:'停止',error:'ストリームエラー'},
      'th-TH':{connected:'เชื่อมต่ออยู่',finished:'เสร็จแล้ว',disconnected:'ขาดการเชื่อมต่อ',stopped:'หยุดแล้ว',error:'สตรีมผิดพลาด'}}[lang]?.[column.status] || column.status;
    box.setAttribute('data-column-status', column.status);
    if (label) label.setAttribute('data-status-text', column.status === 'connected' ? '' : statusLabel);
  }
  function acceptCaptionVersion(data) {
    if (!Number.isInteger(data.source_revision) || !Number.isInteger(data.update_sequence)) return true;
    const key = String(data.start_time), prev = captionVersions.get(key);
    const rev = data.source_revision, seq = data.update_sequence;
    if (prev && (rev < prev.rev || (rev === prev.rev && seq <= prev.seq)
      || (data.partial && prev.closed && rev <= prev.rev))) return false;
    captionVersions.set(key, {rev, seq, closed: !data.partial});
    if (captionVersions.size > 256) captionVersions.delete(captionVersions.keys().next().value);
    return true;
  }

  function applyEarlyTranslation(data) {
    const list = transcriptionsData.transcriptions || [];
    const current = transcriptionsData.partial;
    const i = list.findIndex(t => t.start_time === data.start_time);
    if (i >= 0 && !list[i].provisional) return false;
    if (i >= 0 || (current && current.start_time > data.start_time)) {
      const parked = {...data, provisional: true};
      delete parked.partial;
      if (i >= 0) list[i] = parked; else list.push(parked);
      list.sort((a, b) => a.start_time - b.start_time);
    } else {
      if (current && current.start_time !== data.start_time) {
        const parked = {...current, provisional: true}; delete parked.partial;
        if (!list.some(t => t.start_time === parked.start_time)) list.push(parked);
        list.sort((a, b) => a.start_time - b.start_time);
      }
      transcriptionsData.partial = data;
    }
    transcriptionsData.transcriptions = list;
    return true;
  }

  // Per-language replacement maps ({ lang: { from: to } }). Applied at render
  // time so mappings added mid-session reflow lines already on screen, not just
  // newly translated ones. Refreshed by the existing SSE connection.
  let languageMaps = {{ language_maps | tojson }};
  let lastSubtitle = null;
  let currentLayout = 'grid';
  let currentTheme = 'light';
  // Derive the starting size from the stylesheet (the meeting preset is fluid);
  // fall back to the 1.25rem default where computed styles are unavailable.
  function readFontSizeRem() {
    try {
      const px = parseFloat(getComputedStyle(document.getElementById('grid-content')).fontSize);
      const root = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
      return Number.isFinite(px) && px > 0 ? px / root : 1.25;
    } catch (e) { return 1.25; }
  }
  let currentFontSizeRem = 1.25;
  const renderedText = new Map();
  let languageOrder = [];
  let urlShowList = null;        // null = unconstrained; array = ordered codes from URL
  let hiddenLanguages = new Set();
  let langModalAutoShown = false;
  let langAdvanced = false;      // advanced = per-language visibility + reordering
  let combineActive = false;     // screen capture + captions combined view shown
  let combineStream = null;      // MediaStream from getDisplayMedia
  let combineLanguage = null;    // the single language shown in the caption strip
  const langModal = document.getElementById('lang-modal');
  (function initShowListFromUrl() {
    const params = new URLSearchParams(window.location.search);
    if (MEETING_MODE) {
      // Projection preset: keep every configured language slot even before translations arrive.
      languageOrder = [...MEETING_LANGUAGES];
      urlShowList = [...MEETING_LANGUAGES];
      langModalAutoShown = true;
      document.getElementById('lang-btn').hidden = true;
      return;
    }
    const showParam = params.get('show');
    const layoutParam = params.get('layout');
    if (showParam !== null) {
      const langs = showParam.split(',').map(s => s.trim()).filter(Boolean);
      urlShowList = (langs.length && !(langs.length === 1 && langs[0] === 'all')) ? langs : null;
      if (langs.length === 0 || (langs.length === 1 && langs[0] === 'all')) {
        langModalAutoShown = true;
      }
    } else if (layoutParam && layoutParam !== 'grid') {
      urlShowList = [layoutParam];
    }
  })();
  const statusIndicator = document.getElementById('status-indicator');
  const statusText = document.getElementById('status-text');
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
  let initialized = false;

  // ------------------------------------------------------------------ //
  // Font size controls                                                  //
  // ------------------------------------------------------------------ //
  const FONT_STEP = 0.125;
  const FONT_MIN = 0.5;
  const FONT_MAX = 5;
  const MAX_HISTORY = 30; // cap displayed transcription history to prevent lag
  // Gap marker for a committed segment whose translation failed (key present but
  // empty). Rendering this keeps the line in place instead of silently dropping
  // it and merging neighbouring sentences. Segments predating the language (key
  // absent) are skipped instead.
  const TRANSLATION_GAP = '⋯';

  // Apply the per-language replacement map at render time. The server already
  // maps newly-translated lines before storing, so this exists to retro-fix
  // lines that were on screen before a rule was added. It must therefore be
  // idempotent: re-running it over already-mapped text must be a no-op, even
  // when the replacement contains the original (e.g. "AI" -> "AI助手", which a
  // naive replace would grow to "AI助手助手"). We guard those by masking any
  // existing `to` occurrences before substituting, then restoring them.
  const DICT_SENTINEL = '\u0000';
  // Memoise results: translated text per segment is stable, so the 30 history
  // lines re-rendered every refresh become cache hits and only the live partial
  // is actually recomputed. Cleared by the display_dictionary_update handler when
  // the rules change; bounded so a long session's churn of unique partials can't
  // grow it without limit.
  const dictCache = new Map();
  function applyLangDict(lang, text) {
    if (!text) return text;
    const map = languageMaps[lang];
    if (!map) return text;
    const key = lang + DICT_SENTINEL + text;
    const cached = dictCache.get(key);
    if (cached !== undefined) return cached;
    let out = text;
    // Longest source first so overlapping keys resolve like the server.
    const keys = Object.keys(map).filter(k => k).sort((a, b) => b.length - a.length);
    for (const src of keys) {
      const dst = map[src];
      if (dst && dst.indexOf(src) !== -1) {
        out = out.split(dst).join(DICT_SENTINEL).split(src).join(dst).split(DICT_SENTINEL).join(dst);
      } else {
        out = out.split(src).join(dst);
      }
    }
    if (dictCache.size > 1000) dictCache.clear();
    dictCache.set(key, out);
    return out;
  }

  // Build the rendered history/last/partial text for one language from the
  // current transcription buffer. Segments missing the language key (predating
  // it) are skipped; a committed segment with an empty translation renders the
  // gap marker so its line isn't dropped.
  function applyCaptionSnapshot(data) {
    if (!Array.isArray(data?.segments)) return false;
    const segments = [...data.segments].sort((a,b) => a.start_time - b.start_time);
    const active = segments.filter(s => s.partial).at(-1);
    transcriptionsData.transcriptions = segments.filter(s => s !== active).map(s => {
      if (!s.partial) return s;
      const parked = {...s, provisional:true}; delete parked.partial; return parked;
    });
    if (active) transcriptionsData.partial = active;
    else if (segments.some(s => s.start_time === transcriptionsData.partial?.start_time)) transcriptionsData.partial = null;
    return true;
  }

  function captionText(segment, lang) {
    const result = segment?.result;
    const translated = result?.translated;
    const present = translated && lang in translated;
    const source = MEETING_MODE && result?.source_reference ? result.source_display : '';
    if (!present && !source) return null;
    const text = present ? (translated[lang] ? applyLangDict(lang, translated[lang]) : TRANSLATION_GAP) : '';
    if (!source || result.target_status?.[lang] === 'same_language') return text;
    const label = {'zh-Hant-TW':'原文', 'ja-JP':'原文', 'th-TH':'ต้นฉบับ'}[lang] || 'Source';
    const pending = result.target_status?.[lang] === 'failed'
      ? ({'zh-Hant-TW':'翻譯中斷', 'ja-JP':'翻訳中断', 'th-TH':'การแปลหยุด'}[lang] || 'Translation stopped')
      : ({'zh-Hant-TW':'等待翻譯', 'ja-JP':'翻訳待ち', 'th-TH':'รอคำแปล'}[lang] || 'Waiting for translation');
    return text ? text + '\n〔' + label + '：' + source + '〕\n' : '〔' + pending + ' · ' + label + '：' + source + '〕';
  }

  function buildLanguageText(lang) {
    const independent = buildIndependentText(lang);
    if (independent) return independent;
    const cropped = (transcriptionsData.transcriptions || []).slice(-MAX_HISTORY);
    const historyItems = [];
    let lastText = '';
    for (let i = 0; i < cropped.length; i++) {
      const text = captionText(cropped[i], lang);
      if (text === null) continue;
      if (i === cropped.length - 1) lastText = text + ' ';
      else historyItems.push(text);
    }
    const live = transcriptionsData?.partial;
    const partial = live?.result?.translated;
    const partialText = MEETING_MODE && live?.result?.source_reference
      ? (captionText(live, lang) || '') + ' '
      : partial ? applyLangDict(lang, partial[lang] || '') + ' ' : '';
    return { historyItems, lastText, partialText };
  }

  function applyFontSize(rem) {
    currentFontSizeRem = Math.min(FONT_MAX, Math.max(FONT_MIN, rem));
    document.documentElement.style.setProperty('--rt-font-size', currentFontSizeRem + 'rem');
    updateUrlParam('font-size', currentFontSizeRem + 'rem');
  }

  document.getElementById('font-decrease').addEventListener('click', () => applyFontSize(currentFontSizeRem - FONT_STEP));
  document.getElementById('font-increase').addEventListener('click', () => applyFontSize(currentFontSizeRem + FONT_STEP));
  // document.getElementById('font-reset').addEventListener('click', () => applyFontSize(1.25));

  // ------------------------------------------------------------------ //
  // Theme controls                                                      //
  // ------------------------------------------------------------------ //
  function applyTheme(theme) {
    const appRoot = document.getElementById('app-root');
    appRoot.classList.remove('theme-dark', 'theme-high-contrast');
    if (theme === 'dark') appRoot.classList.add('theme-dark');
    if (theme === 'high-contrast') appRoot.classList.add('theme-high-contrast');
    currentTheme = theme;
    // Update active state on theme buttons
    document.querySelectorAll('.theme-btn').forEach(btn => {
      btn.classList.remove('active');
      btn.setAttribute('aria-pressed', 'false');
    });
    document.querySelectorAll('.theme-btn[data-theme="' + theme + '"]').forEach(btn => {
      btn.classList.add('active');
      btn.setAttribute('aria-pressed', 'true');
    });
    updateUrlParam('theme', theme === 'light' ? null : theme);
  }

  document.querySelectorAll('.theme-btn').forEach(btn =>
    btn.addEventListener('click', () => applyTheme(btn.dataset.theme)));

  // ------------------------------------------------------------------ //
  // Fade highlight toggle                                               //
  // ------------------------------------------------------------------ //
  function applyFade(enabled) {
    document.getElementById('app-root').classList.toggle('fade-off', !enabled);
    const fadeButton = document.getElementById('fade-toggle');
    fadeButton.classList.toggle('active', enabled);
    fadeButton.setAttribute('aria-pressed', enabled ? 'true' : 'false');
    updateUrlParam('fade', enabled ? null : '0');
  }

  document.getElementById('fade-toggle').addEventListener('click', () =>
    applyFade(document.getElementById('app-root').classList.contains('fade-off')));

  // ------------------------------------------------------------------ //
  // URL param helpers                                                   //
  // ------------------------------------------------------------------ //
  function updateUrlParam(key, value) {
    const url = new URL(window.location);
    if (value === null || value === undefined) {
      url.searchParams.delete(key);
    } else {
      url.searchParams.set(key, value);
    }
    window.history.replaceState({}, '', url);
  }


  // ------------------------------------------------------------------ //
  // QR code popup                                                       //
  // ------------------------------------------------------------------ //
  const qrPopup = document.getElementById('qr-popup');
  const qrBtn = document.getElementById('qr-btn');
  const qrUrlText = document.getElementById('qr-url-text');
  const qrUrlValue = document.getElementById('qr-url-value');

  qrBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    const isHidden = qrPopup.classList.contains('hidden');
    if (isHidden) {
      // The URL carries show=/theme state that changes while the page is open,
      // so re-render whenever it differs from what the popup last showed.
      if (qrUrlValue.textContent !== window.location.href) {
        qrUrlValue.textContent = window.location.href;
        // Drawn by this server (never a third-party service): the URL holds the viewer key.
        document.getElementById('qr-img').src = '/rt/{{ id }}/qr.svg' + window.location.search;
      }
      qrPopup.classList.remove('hidden');
      qrBtn.setAttribute('aria-expanded', 'true');
    } else {
      qrPopup.classList.add('hidden');
      qrBtn.setAttribute('aria-expanded', 'false');
    }
  });

  async function copyQrUrl() {
    const url = qrUrlValue.textContent;
    try {
      await navigator.clipboard.writeText(url);
    } catch {
      // clipboard API needs a secure context; fall back to a throwaway selection.
      const ta = document.createElement('textarea');
      ta.value = url;
      ta.style.position = 'fixed';
      ta.style.opacity = '0';
      document.body.appendChild(ta);
      ta.select();
      document.execCommand('copy');
      document.body.removeChild(ta);
    }
    qrUrlText.classList.add('copied');
    setTimeout(() => qrUrlText.classList.remove('copied'), 600);
  }

  qrUrlText.addEventListener('click', copyQrUrl);
  qrUrlText.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      copyQrUrl();
    }
  });

  document.addEventListener('click', (e) => {
    if (!document.getElementById('qr-area').contains(e.target)) {
      qrPopup.classList.add('hidden');
      qrBtn.setAttribute('aria-expanded', 'false');
    }
  });

  // ------------------------------------------------------------------ //
  // Screen capture combine mode                                         //
  // ------------------------------------------------------------------ //
  // Local-only: the captured stream is shown in this tab (for projecting or
  // recording) and never leaves the browser. Hidden inside iframes (panel.html's
  // viewer-frame lacks display-capture permission) and where the API is missing.
  const canCapture = !!(navigator.mediaDevices && typeof navigator.mediaDevices.getDisplayMedia === 'function')
    && window.self === window.top;
  // `hidden` attribute, not the class: `.icon-btn-sm`'s display:flex overrides `.hidden`.
  if (canCapture && !MEETING_MODE) document.getElementById('share-btn').hidden = false;

  async function startCapture() {
    let captured;
    try {
      captured = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false, selfBrowserSurface: 'exclude' });
    } catch (err) {
      if (err && err.name === 'NotAllowedError') return; // picker dismissed or denied: stay as-is
      console.error('Screen capture failed', err);
      window.alert('Screen capture failed: ' + (err && err.message ? err.message : String(err)));
      return;
    }
    setCombineStream(captured);
    if (!combineActive) enterCombineMode();
  }

  function setCombineStream(captured) {
    stopCombineStream();
    combineStream = captured;
    document.getElementById('combine-video').srcObject = captured;
    const track = captured.getVideoTracks()[0];
    // Fired by the browser's own "Stop sharing" UI; our own stop() doesn't fire
    // it, and the identity check ignores tracks already replaced.
    if (track) track.addEventListener('ended', () => { if (combineStream === captured) exitCombineMode(); });
  }

  function stopCombineStream() {
    if (!combineStream) return;
    const old = combineStream;
    combineStream = null;
    old.getTracks().forEach(t => t.stop());
  }

  function renderCombineSidebar() {
    // Only the viewer key travels with the QR (no theme/show): each audience member
    // picks their own language/theme, but still needs k to be let in.
    const qrParams = new URLSearchParams();
    const viewerKey = new URLSearchParams(window.location.search).get('k');
    if (viewerKey) qrParams.set('k', viewerKey);
    const qrQuery = qrParams.toString();
    document.getElementById('combine-qr-img').src = '/rt/{{ id }}/qr.svg' + (qrQuery ? '?' + qrQuery : '');
    renderCombineLanguages();
  }

  function renderCombineLanguages() {
    if (!combineActive) return;
    if (!combineLanguage || !languageOrder.includes(combineLanguage)) {
      combineLanguage = getVisibleOrderedLanguages()[0] || languageOrder[0] || null;
    }
    const select = document.getElementById('combine-lang-select');
    select.innerHTML = '';
    if (languageOrder.length === 0) {
      const opt = document.createElement('option');
      opt.textContent = 'Waiting for languages…';
      select.appendChild(opt);
      select.disabled = true;
    } else {
      languageOrder.forEach(lang => {
        const opt = document.createElement('option');
        opt.value = lang;
        opt.textContent = lang;
        select.appendChild(opt);
      });
      select.value = combineLanguage;
      select.disabled = false;
    }
    const chips = document.getElementById('combine-lang-chips');
    chips.innerHTML = '';
    if (languageOrder.length === 0) {
      const empty = document.createElement('span');
      empty.className = 'text-xs text-[var(--rt-muted)]';
      empty.textContent = 'Waiting for languages…';
      chips.appendChild(empty);
    } else {
      languageOrder.forEach(lang => {
        const chip = document.createElement('span');
        chip.className = 'rounded bg-[var(--rt-surface-muted)] px-1.5 py-0.5 font-mono text-xs';
        chip.textContent = lang;
        chips.appendChild(chip);
      });
    }
  }

  function refreshCombineView() {
    const box = document.getElementById('combine-captions');
    if (!combineLanguage) {
      if (box.dataset.language !== '') {
        box.innerHTML = '<div class="flex flex-1 items-center justify-center text-[var(--rt-muted)] text-[0.78rem]">Waiting for transcript</div>';
        box.dataset.language = '';
      }
      return;
    }
    if (box.dataset.language !== combineLanguage) {
      box.innerHTML = '';
      box.dataset.language = combineLanguage;
      renderedText.delete('combine:' + combineLanguage);
      const { card, btn } = makeLanguageCard(combineLanguage);
      box.appendChild(card);
      box.appendChild(btn);
    }
    const { historyItems, lastText, partialText } = buildLanguageText(combineLanguage);
    const card = box.querySelector('.language-card');
    updateContent(card.children[0], 'combine:' + combineLanguage, historyItems, lastText, partialText, card);
  }

  function resetCombineCaptions() {
    const box = document.getElementById('combine-captions');
    box.innerHTML = '';
    delete box.dataset.language;
    for (const k of renderedText.keys()) {
      if (k.startsWith('combine:')) renderedText.delete(k);
    }
  }

  // Re-render from scratch and jump to the bottom (same idiom as applyVisibilityChange).
  function rerenderFromBottom() {
    initialized = false;
    refreshView();
    setTimeout(() => { initialized = true; }, 100);
  }

  function enterCombineMode() {
    combineActive = true;
    document.getElementById('app-root').classList.add('combine-active');
    closeLangModal();
    qrPopup.classList.add('hidden');
    qrBtn.setAttribute('aria-expanded', 'false');
    resetCombineCaptions();
    renderCombineSidebar();
    rerenderFromBottom();
    // The focused #share-btn just vanished with the top bar.
    document.getElementById('combine-stop').focus();
  }

  function exitCombineMode() {
    if (!combineActive) return;
    stopCombineStream();
    document.getElementById('combine-video').srcObject = null;
    combineActive = false;
    document.getElementById('app-root').classList.remove('combine-active');
    resetCombineCaptions();
    // The normal view catches up on text that arrived during capture.
    rerenderFromBottom();
    // The focused sidebar control just vanished with the combine view.
    document.getElementById('share-btn').focus();
  }

  document.getElementById('share-btn').addEventListener('click', startCapture);
  document.getElementById('combine-change-source').addEventListener('click', startCapture);
  document.getElementById('combine-stop').addEventListener('click', exitCombineMode);
  document.getElementById('combine-font-decrease').addEventListener('click', () => applyFontSize(currentFontSizeRem - FONT_STEP));
  document.getElementById('combine-font-increase').addEventListener('click', () => applyFontSize(currentFontSizeRem + FONT_STEP));
  document.getElementById('combine-lang-select').addEventListener('change', (e) => {
    combineLanguage = e.target.value;
    rerenderFromBottom();
  });


  // ------------------------------------------------------------------ //
  // Language visibility & order                                         //
  // ------------------------------------------------------------------ //
  function discoverLanguages() {
    if (MEETING_MODE) return false;
    let languages = null;
    if (transcriptionsData?.partial?.result?.translated) {
      languages = Object.keys(transcriptionsData.partial.result.translated || {});
    } else if (transcriptionsData?.transcriptions) {
      languages = Object.keys(transcriptionsData.transcriptions[transcriptionsData.transcriptions.length - 1]?.result?.translated || {});
    }
    if (!languages) return false;
    let changed = false;
    languages.forEach(l => {
      if (!languageOrder.includes(l)) {
        languageOrder.push(l);
        if (urlShowList && !urlShowList.includes(l)) hiddenLanguages.add(l);
        changed = true;
      }
    });
    if (changed && urlShowList) {
      // `show=` defines both visibility and display order. Keep languages not
      // listed there after the requested ones, in their discovery order.
      const urlPositions = new Map();
      urlShowList.forEach((lang, index) => {
        if (!urlPositions.has(lang)) urlPositions.set(lang, index);
      });
      languageOrder.sort((a, b) => {
        const aPosition = urlPositions.get(a);
        const bPosition = urlPositions.get(b);
        if (aPosition === undefined) return bPosition === undefined ? 0 : 1;
        if (bPosition === undefined) return -1;
        return aPosition - bPosition;
      });
    }
    return changed;
  }

  // Drop languages that no longer appear anywhere in the current buffer (e.g. the
  // broadcaster switched translation targets). Without this their cards linger
  // empty once the last segment carrying them scrolls past MAX_HISTORY.
  function pruneStaleLanguages() {
    if (MEETING_MODE) return false;
    const present = new Set();
    const cropped = (transcriptionsData.transcriptions || []).slice(-MAX_HISTORY);
    for (const t of cropped) {
      const tr = t?.result?.translated;
      if (tr) Object.keys(tr).forEach(k => present.add(k));
    }
    const partial = transcriptionsData?.partial?.result?.translated;
    if (partial) Object.keys(partial).forEach(k => present.add(k));
    let changed = false;
    for (const l of [...languageOrder]) {
      if (!present.has(l)) {
        languageOrder = languageOrder.filter(x => x !== l);
        hiddenLanguages.delete(l);
        renderedText.delete('grid:' + l);
        renderedText.delete('single:' + l);
        renderedText.delete('combine:' + l);
        changed = true;
      }
    }
    return changed;
  }

  function getVisibleOrderedLanguages() {
    if (MEETING_MODE) return [...MEETING_LANGUAGES];
    return languageOrder.filter(l => !hiddenLanguages.has(l));
  }

  function updateShowUrlParam() {
    // Clear legacy layout param so we don't write conflicting state.
    updateUrlParam('layout', null);
    const visible = getVisibleOrderedLanguages();
    if (hiddenLanguages.size === 0 || visible.length === 0) {
      updateUrlParam('show', null);
    } else {
      updateUrlParam('show', visible.join(','));
    }
  }

  function applyVisibilityChange() {
    updateShowUrlParam();
    const visible = getVisibleOrderedLanguages();
    const nextLayout = visible.length === 1 ? 'single' : 'grid';
    const singleView = document.getElementById('single-view');
    const gridView = document.getElementById('grid-view');
    if (nextLayout !== currentLayout) {
      currentLayout = nextLayout;
      if (nextLayout === 'single') {
        singleView.classList.remove('hidden');
        gridView.classList.add('hidden');
      } else {
        singleView.classList.add('hidden');
        gridView.classList.remove('hidden');
      }
      // Reset single-view DOM so it rebuilds for the new visible language.
      const dataContent = document.getElementById('single-content');
      dataContent.innerHTML = '';
      delete dataContent.dataset.language;
      for (const k of renderedText.keys()) {
        if (k.startsWith('single:')) renderedText.delete(k);
      }
    }
    // Grid container may have stale children for languages that became hidden.
    document.getElementById('grid-content').innerHTML = '';
    languageOrder.forEach(l => renderedText.delete('grid:' + l));
    initialized = false;
    refreshView();
    setTimeout(() => { initialized = true; }, 100);
  }

  function applyShowSelection(value) {
    const langs = (value || '').split(',').map(s => s.trim()).filter(Boolean);
    if (langs.length === 0 || (langs.length === 1 && langs[0] === 'all')) {
      urlShowList = null;
      hiddenLanguages.clear();
    } else {
      urlShowList = langs;
      hiddenLanguages = new Set(languageOrder.filter(l => !langs.includes(l)));
    }
    renderLangModal();
    applyVisibilityChange();
  }

  function toggleLanguageVisibility(lang) {
    if (hiddenLanguages.has(lang)) hiddenLanguages.delete(lang);
    else hiddenLanguages.add(lang);
    if (hiddenLanguages.size === 0) urlShowList = null;
    else urlShowList = getVisibleOrderedLanguages();
    renderLangModal();
    applyVisibilityChange();
  }

  function showAllLanguages() {
    // urlShowList can be set with nothing hidden yet (languages arriving later
    // would be hidden on discovery), so clearing it still matters here.
    if (hiddenLanguages.size === 0 && !urlShowList) return;
    hiddenLanguages.clear();
    urlShowList = null;
    renderLangModal();
    applyVisibilityChange();
  }

  // Only the open modal needs rebuilding; callers fire this on every visibility
  // or order change, most of which happen with the modal closed.
  function renderLangModal() {
    if (langModal.classList.contains('hidden')) return;
    const list = document.getElementById('lang-list');
    document.getElementById('lang-subtitle').textContent = langAdvanced
      ? 'Toggle visibility and reorder languages'
      : 'Select which language to display';
    if (languageOrder.length === 0) {
      list.innerHTML = '<p class="text-xs opacity-50">No languages available yet.</p>';
      return;
    }
    list.innerHTML = '';
    if (!langAdvanced) {
      // Simple mode: one language at a time - the only choice most viewers need.
      const visible = getVisibleOrderedLanguages();
      const soleVisible = visible.length === 1 ? visible[0] : null;
      languageOrder.forEach(lang => {
        const btn = document.createElement('button');
        btn.className = 'lang-option-btn w-full rounded-xl border border-[var(--rt-border)] bg-[var(--rt-surface-muted)] px-4 py-2.5 text-sm font-medium text-[var(--rt-text)] transition-colors hover:border-[var(--rt-accent)] hover:bg-[var(--rt-accent-soft)] hover:text-[var(--rt-accent)] hover:ring-1 hover:ring-inset hover:ring-[var(--rt-accent)]'
          + (lang === soleVisible ? ' selected' : '');
        btn.textContent = lang;
        btn.addEventListener('click', () => {
          closeLangModal();
          applyShowSelection(lang);
        });
        list.appendChild(btn);
      });
      return;
    }
    languageOrder.forEach((lang, idx) => {
      const item = document.createElement('div');
      item.className = 'lang-advanced-row flex items-center gap-2 px-3 py-1.5';

      const eyeBtn = document.createElement('button');
      const visible = !hiddenLanguages.has(lang);
      eyeBtn.className = 'icon-btn icon-btn-sm' + (visible ? '' : ' opacity-40');
      eyeBtn.setAttribute('aria-label', visible ? 'Hide language' : 'Show language');
      eyeBtn.title = visible ? 'Hide' : 'Show';
      eyeBtn.innerHTML = `<iconify-icon icon="${visible ? 'ph:eye' : 'ph:eye-slash'}" width="16" height="16"></iconify-icon>`;
      eyeBtn.addEventListener('click', () => toggleLanguageVisibility(lang));

      const label = document.createElement('span');
      label.className = 'flex-1 text-sm font-mono' + (visible ? '' : ' opacity-40');
      label.textContent = lang;

      const upBtn = document.createElement('button');
      upBtn.className = 'icon-btn icon-btn-sm' + (idx === 0 ? ' opacity-30 cursor-not-allowed' : '');
      upBtn.setAttribute('aria-label', 'Move up');
      upBtn.disabled = idx === 0;
      upBtn.innerHTML = '<iconify-icon icon="ph:arrow-up" width="14" height="14"></iconify-icon>';
      upBtn.addEventListener('click', () => moveLang(idx, -1));

      const downBtn = document.createElement('button');
      downBtn.className = 'icon-btn icon-btn-sm' + (idx === languageOrder.length - 1 ? ' opacity-30 cursor-not-allowed' : '');
      downBtn.setAttribute('aria-label', 'Move down');
      downBtn.disabled = idx === languageOrder.length - 1;
      downBtn.innerHTML = '<iconify-icon icon="ph:arrow-down" width="14" height="14"></iconify-icon>';
      downBtn.addEventListener('click', () => moveLang(idx, 1));

      item.appendChild(eyeBtn);
      item.appendChild(label);
      item.appendChild(upBtn);
      item.appendChild(downBtn);
      list.appendChild(item);
    });
  }

  function moveLang(idx, direction) {
    const newIdx = idx + direction;
    if (newIdx < 0 || newIdx >= languageOrder.length) return;
    [languageOrder[idx], languageOrder[newIdx]] = [languageOrder[newIdx], languageOrder[idx]];
    if (urlShowList) urlShowList = getVisibleOrderedLanguages();
    renderLangModal();
    applyVisibilityChange();
  }

  function openLangModal() {
    langModal.classList.remove('hidden');
    document.getElementById('lang-btn').setAttribute('aria-expanded', 'true');
    renderLangModal();
  }

  function closeLangModal() {
    langModal.classList.add('hidden');
    document.getElementById('lang-btn').setAttribute('aria-expanded', 'false');
  }

  // Shown once per session when several languages exist, so a first-time viewer
  // lands on one language instead of a crowded grid.
  function maybeAutoOpenLangModal(languages) {
    if (MEETING_MODE) return;
    if (combineActive) return; // don't cover the projection; may still auto-open after exit
    if (langModalAutoShown) return;
    if (languages.length <= 1) return;
    langModalAutoShown = true;
    openLangModal();
  }

  document.getElementById('lang-btn').addEventListener('click', () => {
    langModalAutoShown = true;
    openLangModal();
  });
  document.getElementById('lang-close').addEventListener('click', closeLangModal);
  document.getElementById('lang-backdrop').addEventListener('click', closeLangModal);

  document.addEventListener('keydown', (event) => {
    if (event.key !== 'Escape') return;
    qrPopup.classList.add('hidden');
    qrBtn.setAttribute('aria-expanded', 'false');
    closeLangModal();
  });

  document.getElementById('lang-show-all').addEventListener('click', () => {
    // The URL may already carry a show= filter; "show all" has to lift it,
    // otherwise the button looks dead.
    showAllLanguages();
    // In advanced mode the user is still editing, so keep the modal open.
    if (!langAdvanced) closeLangModal();
  });

  document.getElementById('lang-advanced-toggle').addEventListener('click', () => {
    langAdvanced = !langAdvanced;
    document.getElementById('lang-advanced-label').textContent = langAdvanced ? 'Done' : 'Advanced';
    document.getElementById('lang-advanced-caret').setAttribute('icon', langAdvanced ? 'ph:caret-up' : 'ph:caret-down');
    renderLangModal();
  });

  // ------------------------------------------------------------------ //
  // View / layout                                                       //
  // ------------------------------------------------------------------ //
  function syncLanguagesFromData() {
    const added = discoverLanguages();
    const pruned = pruneStaleLanguages();
    if (!added && !pruned) return;
    renderCombineLanguages();
    renderLangModal();
    // Pick the layout based on what's currently visible. If a new language
    // arrived and is visible, this may flip single → grid.
    const visible = getVisibleOrderedLanguages();
    const desiredLayout = visible.length === 1 ? 'single' : 'grid';
    if (desiredLayout !== currentLayout) {
      applyVisibilityChange();
    }
    maybeAutoOpenLangModal(languageOrder);
  }

  function refreshView() {
    if (combineActive) { refreshCombineView(); return; }
    document.getElementById('viewer-empty').classList.toggle(
      'hidden',
      getVisibleOrderedLanguages().length > 0
    );
    if (currentLayout === 'single') refreshSingleView();
    else refreshGridView();
  }

  function getInlineStartLeft(node) {
    if (!node) return null;
    const rects = node.getClientRects();
    if (rects && rects.length > 0) return rects[0].left;
    const txt = node.firstChild;
    if (txt && txt.nodeType === Node.TEXT_NODE && txt.textContent && txt.textContent.length > 0) {
      const range = document.createRange();
      range.setStart(txt, 0);
      range.setEnd(txt, 1);
      const rr = range.getClientRects();
      if (rr && rr.length > 0) return rr[0].left;
    }
    return node.getBoundingClientRect().left;
  }

  function applyLeadingPad(historyEl, deltaX) {
    if (Math.abs(deltaX) <= 0.01) return;
    const currentPad = historyEl._leadingPadPx || 0;
    const nextPad = Math.max(0, currentPad + deltaX);
    historyEl._leadingPadPx = nextPad;
    historyEl.style.paddingLeft = nextPad > 0.01 ? `${nextPad}px` : '';
  }

  // Keep history as per-segment <span> nodes so we can trim individual
  // segments and report the exact height removed from the top. Callers
  // use that height to anchor the viewport when the user is reading
  // scrolled-up history.
  function syncHistoryItems(historyEl, newItems) {
    const existing = historyEl._items || [];

    // Align existing to newItems: find how many to drop from the start so
    // existing.slice(dropFromStart) is a prefix of newItems. An empty target
    // must drop everything rather than matching every list as a vacuous prefix.
    let dropFromStart = newItems.length === 0 ? existing.length : 0;
    while (dropFromStart <= existing.length) {
      const tail = existing.length - dropFromStart;
      const compareLen = Math.min(tail, newItems.length);
      let match = true;
      for (let j = 0; j < compareLen; j++) {
        if (existing[dropFromStart + j] !== newItems[j]) { match = false; break; }
      }
      if (match) break;
      dropFromStart++;
    }
    if (dropFromStart > existing.length) dropFromStart = existing.length;

    // Use a retained node as an anchor and measure top-shift in sub-pixel
    // precision. This avoids cumulative rounding error from offsetHeight.
    const retainedAnchor = historyEl.children[dropFromStart] || null;
    const retainedTopBefore = retainedAnchor ? retainedAnchor.getBoundingClientRect().top : null;
    const retainedLeftBefore = getInlineStartLeft(retainedAnchor);

    let removedFromStartHeight = 0;
    let removedFromStartLeft = 0;
    if (retainedAnchor && retainedTopBefore !== null) {
      for (let i = 0; i < dropFromStart; i++) {
        historyEl.removeChild(historyEl.firstChild);
      }
      const retainedTopAfter = retainedAnchor.getBoundingClientRect().top;
      const retainedLeftAfter = getInlineStartLeft(retainedAnchor);
      removedFromStartHeight = Math.max(0, retainedTopBefore - retainedTopAfter);
      if (retainedLeftBefore !== null && retainedLeftAfter !== null) {
        removedFromStartLeft = retainedLeftBefore - retainedLeftAfter;
      }
    } else {
      // Fallback when everything is trimmed in one pass.
      for (let i = 0; i < dropFromStart; i++) {
        removedFromStartHeight += historyEl.firstChild.getBoundingClientRect().height;
        historyEl.removeChild(historyEl.firstChild);
      }
    }

    if (newItems.length === 0) {
      historyEl._leadingPadPx = 0;
      historyEl.style.paddingLeft = '';
    }

    const retained = existing.length - dropFromStart;
    let appended = 0;
    for (let i = retained; i < newItems.length; i++) {
      const seg = document.createElement('span');
      seg.textContent = newItems[i] + ' ';
      historyEl.appendChild(seg);
      appended++;
    }

    historyEl._items = newItems.slice();
    return {
      changed: dropFromStart > 0 || appended > 0,
      removedFromStartHeight,
      removedFromStartLeft,
    };
  }

  function updateContent(container, key, historyItems, lastText, partialText, scrollParent) {
    const historyEl = container.children[0];
    const lastEl = container.children[1];
    const partialEl = container.children[2];
    const scroller = scrollParent || container;

    // Snapshot scroll state BEFORE any DOM change so the final scrollTop
    // adjustment is relative to the pre-update position. All DOM edits
    // below are synchronous, so the browser never paints an intermediate
    // frame where the viewport has shifted.
    const prevScrollTop = scroller.scrollTop;
    const prevScrollLeft = scroller.scrollLeft;
    const following = scroller.dataset.followingBottom !== '0';

    const sync = syncHistoryItems(historyEl, historyItems);
    let changed = sync.changed;

    applyLeadingPad(historyEl, sync.removedFromStartLeft);

    if (lastEl.textContent !== lastText) {
      lastEl.textContent = lastText;
      lastEl.classList.remove('new-text-commit');
      void lastEl.offsetWidth;
      if (lastText) lastEl.classList.add('new-text-commit');
      changed = true;
    }

    const prevPartial = renderedText.get(key) || '';
    if (prevPartial !== partialText) {
      partialEl.textContent = partialText;
      partialEl.classList.remove('new-text');
      void partialEl.offsetWidth;
      if (partialText) partialEl.classList.add('new-text');
      renderedText.set(key, partialText);
      changed = true;
    }

    if (changed) {
      if (!initialized) {
        // First render after a layout switch - jump to bottom.
        scroller.scrollTop = scroller.scrollHeight;
        scroller.scrollLeft = prevScrollLeft;
      } else {
        // Anchor first so the next paint shows the same visible content
        // as before the update. Without this, trimming a segment from
        // the top causes a visible shift that the smooth scroll then
        // has to "undo", producing the up-then-back flick.
        if (sync.removedFromStartHeight > 0) {
          scroller.scrollTop = Math.max(0, prevScrollTop - sync.removedFromStartHeight);
        }
        if (following) {
          // Smooth-scroll from the anchored position to the new bottom.
          // Called synchronously (no setTimeout) so the browser paints
          // the anchored frame and animates forward from there, never
          // an intermediate mid-update frame.
          scroller.scrollTo({
            top: scroller.scrollHeight,
            left: prevScrollLeft,
            behavior: (MEETING_MODE || reduceMotion.matches) ? 'auto' : 'smooth'
          });
        } else {
          scroller.scrollLeft = prevScrollLeft;
        }
      }
    } else {
      // trigger repaint
      scroller.scrollTop += 1;
      scroller.scrollTop -= 1;
    }
  }

  function makeContentContainer() {
    const wrapper = document.createElement('div');
    wrapper.className = 'contents';
    const history = document.createElement('span');
    const last = document.createElement('span');
    const partial = document.createElement('span');
    partial.className = 'partial-text';
    last.addEventListener('animationend', () => last.classList.remove('new-text-commit'));
    partial.addEventListener('animationend', () => partial.classList.remove('new-text'));
    wrapper.appendChild(history);
    wrapper.appendChild(last);
    wrapper.appendChild(partial);
    return wrapper;
  }

  function makeLanguageCard(language) {
    const card = document.createElement('div');
    card.className = 'language-card flex-1 overflow-x-hidden overflow-y-auto whitespace-normal p-2 leading-[1.62] text-[var(--rt-text)] [scrollbar-color:var(--rt-border-strong)_transparent] [scrollbar-gutter:stable] focus-visible:outline-2 focus-visible:-outline-offset-3 focus-visible:outline-[var(--rt-accent)] max-md:py-1.5 max-md:pr-1.5 max-md:pl-0.5';
    card.tabIndex = 0;
    card.setAttribute('role', 'region');
    card.setAttribute('aria-label', language + ' transcript');
    // Disable browser scroll anchoring - when textContent replaces the
    // history/last/partial spans, the anchor can become invalid and the
    // browser may snap scrollTop to the bottom on its own.
    card.style.overflowAnchor = 'none';
    card.dataset.followingBottom = '1';
    card.appendChild(makeContentContainer());

    const btn = document.createElement('button');
    btn.className = 'icon-btn-sm icon-btn active absolute bottom-2 left-[50%] translate-x-[-50%] opacity-0';
    btn.setAttribute('aria-label', 'Go to bottom');
    btn.tabIndex = -1;
    btn.innerHTML = '<iconify-icon icon="ph:arrow-down" width="14" height="14"></iconify-icon>';

    // Only user-initiated scrolls should flip the follow flag; programmatic
    // smooth scrolls fire intermediate scroll events that would otherwise
    // falsely mark the card as "scrolled away from bottom".
    let lastUserScrollAt = 0;
    const markUserScroll = () => { lastUserScrollAt = Date.now(); };
    card.addEventListener('wheel', markUserScroll, { passive: true });
    card.addEventListener('touchstart', markUserScroll, { passive: true });
    card.addEventListener('keydown', markUserScroll);

    card.addEventListener('scroll', () => {
      const nearBottom = card.scrollTop + card.clientHeight >= card.scrollHeight - 100;
      if (Date.now() - lastUserScrollAt < 1000) {
        card.dataset.followingBottom = nearBottom ? '1' : '0';
      }
      if (card.dataset.followingBottom === '1') {
        btn.classList.add('opacity-0');
        btn.tabIndex = -1;
      } else {
        btn.classList.remove('opacity-0');
        btn.tabIndex = 0;
      }
    });

    btn.addEventListener('click', () => {
      card.dataset.followingBottom = '1';
      btn.classList.add('opacity-0');
      btn.tabIndex = -1;
      card.scrollTo({
        top: card.scrollHeight,
        behavior: reduceMotion.matches ? 'auto' : 'smooth'
      });
    });

    return { card, btn };
  }

  function refreshSingleView() {
    const dataContent = document.getElementById('single-content');
    const selectedLanguage = getVisibleOrderedLanguages()[0];
    if (!selectedLanguage) return;

    if (dataContent.dataset.language !== selectedLanguage) {
      dataContent.innerHTML = '';
      dataContent.dataset.language = selectedLanguage;
      const { card, btn } = makeLanguageCard(selectedLanguage);
      dataContent.appendChild(card);
      dataContent.appendChild(btn);
    }

    const { historyItems, lastText, partialText } = buildLanguageText(selectedLanguage);
    const card = dataContent.querySelector('.language-card');
    const wrapper = card.children[0];
    updateContent(wrapper, 'single:' + selectedLanguage, historyItems, lastText, partialText, card);
  }

  function refreshGridView() {
    const gridContent = document.getElementById('grid-content');
    const languages = getVisibleOrderedLanguages();
    if (languages.length === 0) return;
    const languageCount = languages.length;

    let actualCols = 1;
    let actualRows = 1;

    const screenWidth = window.innerWidth;
    const isMobile = screenWidth < 768;

    if (MEETING_MODE) {
      actualCols = isMobile ? 1 : languageCount;
      actualRows = isMobile ? languageCount : 1;
    } else if (languageCount === 1) {
      actualCols = 1; actualRows = 1;
    } else if (languageCount === 2) {
      if (isMobile) { actualCols = 1; actualRows = 2; }
      else { actualCols = 2; actualRows = 1; }
    } else if (languageCount <= 4) {
      if (isMobile) { actualCols = 1; actualRows = languageCount; }
      else { actualCols = 2; actualRows = 2; }
    } else {
      if (isMobile) {
        actualCols = 1;
        actualRows = languageCount;
      } else {
        actualCols = Math.ceil(Math.sqrt(languageCount));
        actualRows = Math.ceil(languageCount / actualCols);
      }
    }

    gridContent.style.setProperty('--grid-cols', actualCols);
    gridContent.style.setProperty('--grid-rows', actualRows);

    // Mobile stacks one language per row, so past 3 languages the even split
    // squeezes every card down to a couple of lines. Pin each row to the height
    // it would have at 3 rows and let the view scroll instead.
    const gridView = document.getElementById('grid-view');
    const pinRowHeight = isMobile && languageCount >= 4;
    gridView.style.overflowY = pinRowHeight ? 'auto' : '';
    gridContent.style.height = pinRowHeight ? 'auto' : '';
    if (pinRowHeight) {
      const GAP = 4;          // gap-1
      const PADDING = 4;      // p-0.5, top + bottom
      const VISIBLE_ROWS = 3;
      const avail = gridView.clientHeight - PADDING - GAP * (VISIBLE_ROWS - 1);
      gridContent.style.setProperty('--grid-row-h', Math.max(80, avail / VISIBLE_ROWS) + 'px');
    } else {
      gridContent.style.removeProperty('--grid-row-h');
    }

    const existing = Array.from(gridContent.children).map(c => c.getAttribute('data-language'));
    const mismatch = existing.length !== languages.length || existing.some((l, i) => l !== languages[i]);
    if (mismatch) {
      gridContent.innerHTML = '';
      languages.forEach(lang => renderedText.delete('grid:' + lang));
      languages.forEach(language => {
        const languageBox = document.createElement('div');
        languageBox.className = 'grid-lang-box relative flex min-h-0 flex-col overflow-hidden !rounded-xl border bg-[var(--rt-surface)] shadow-[0_14px_36px_color-mix(in_srgb,var(--rt-canvas)_72%,transparent)]';
        languageBox.setAttribute('data-language', language);
        if (MEETING_MODE) languageBox.setAttribute('data-view', 'caption');

        const label = document.createElement('div');
        label.className = 'grid-lang-label flex min-h-5 shrink-0 items-center border-b px-2 text-[0.6rem] font-semibold leading-none tracking-[0.05em]';
        label.textContent = MEETING_MODE
          ? ({'zh-Hant-TW': '繁體中文', 'ja-JP': '日本語', 'th-TH': 'ไทย'}[language])
          : language;

        if (MEETING_MODE) {
          label.title = {'zh-Hant-TW': '點一下切換：字幕窗／完整歷史', 'ja-JP': 'クリックで切替：字幕／全履歴'}[language] || 'Click to toggle caption / full history';
          label.addEventListener('click', () => { toggleCaptionView(languageBox); refreshGridView(); });
        }

        const { card, btn } = makeLanguageCard(language);

        languageBox.appendChild(label);
        languageBox.appendChild(card);
        if (MEETING_MODE) {
          const waiting = document.createElement('p');
          waiting.className = 'meeting-waiting px-2 text-sm text-[var(--rt-muted)]';
          waiting.setAttribute('role', 'status');
          waiting.textContent = {
            'zh-Hant-TW': '等待繁體中文字幕…',
            'ja-JP': '日本語字幕を待っています…',
            'th-TH': 'กำลังรอคำบรรยายภาษาไทย…'
          }[language];
          languageBox.appendChild(waiting);
        }
        languageBox.appendChild(btn);
        gridContent.appendChild(languageBox);
      });
    }
    // A last row holding a single leftover box (e.g. 3 languages in 2 columns)
    // would leave a hole beside it - stretch that box across the full width.
    const spanLast = actualCols > 1 && languageCount % actualCols === 1;
    languages.forEach((language, idx) => {
      const languageBox = gridContent.querySelector(`[data-language="${language}"]`);
      if (!languageBox) return;
      languageBox.style.gridColumn =
        (spanLast && idx === languageCount - 1) ? `span ${actualCols}` : '';
      let { historyItems, lastText, partialText } = buildLanguageText(language);
      if (MEETING_MODE && languageBox.getAttribute('data-view') !== 'history') {
        ({ historyItems, lastText } = captionWindow(historyItems, lastText, meetingLines()));
      }
      const waiting = languageBox.querySelector('.meeting-waiting');
      if (waiting) waiting.hidden = historyItems.length > 0 || !!lastText.trim() || !!partialText.trim();
      const card = languageBox.querySelector('.language-card');
      card.style.whiteSpace = MEETING_MODE && (transcriptionsData.partial?.result?.source_reference
        || transcriptionsData.transcriptions?.some(t => t.result?.source_reference)) ? 'pre-line' : '';
      const wrapper = card.children[0];
      refreshColumnReference(language, card);
      updateContent(wrapper, 'grid:' + language, historyItems, lastText, partialText, card);
      const column = captionColumns.get(language);
      if (column) {
        card.style.whiteSpace = 'pre-line';
        const empty = !historyItems.length && !lastText.trim() && !partialText.trim();
        if (waiting) {
          waiting.hidden = !empty;
          if (empty && ['finished','error','stopped','disconnected'].includes(column.status)) waiting.textContent = {
            'zh-Hant-TW':'未收到譯文；原文保留', 'ja-JP':'訳文未着・原文を保持', 'th-TH':'ยังไม่มีคำแปล เก็บต้นฉบับไว้'
          }[language];
        }
      }
    });
  }

  document.addEventListener('DOMContentLoaded', function () {
    if (MEETING_MODE) {
      document.documentElement?.classList.add('meeting-mode');
      currentFontSizeRem = readFontSizeRem();
    }
    let stream = null;
    let reconnectTimer = null;
    let reconnectAttempts = 0;
    const initialSegments = transcriptionsData.transcriptions || [];
    const initialLastStart = initialSegments.length
      ? Number(initialSegments[initialSegments.length - 1].start_time)
      : 0;
    // Always send a cursor, including zero for an empty initial snapshot. The
    // server subscribes before replaying, closing the HTML-render -> SSE gap.
    let lastEventId = String(Number.isFinite(initialLastStart) ? initialLastStart : 0);
    let pageUnloading = false;
    let terminal = false;
    let reconnected = false;

    function streamUrl() {
      const url = new URL('/api/session/{{ id }}/stream', window.location.origin);
      if (lastEventId) url.searchParams.set('last_event_id', lastEventId);
      // The viewer key rides along from the page URL; it is never stored or re-exposed.
      const viewerKey = new URLSearchParams(window.location.search).get('k');
      if (viewerKey) url.searchParams.set('k', viewerKey);
      if (captionColumns.size || wantsColumnSnapshot()) url.searchParams.set('columns', '1');
      // The page render already carried current state. A reconnect can have
      // missed dictionary edits or older-segment revisions, so ask for both.
      if (reconnected) {
        url.searchParams.set('dict', '1');
        url.searchParams.set('snapshot', '1');
      }
      return url.toString();
    }

    // Strip the partial envelope so a parked line looks like any other committed
    // segment to the renderer, and flag it so its real commit can replace it.
    function provisionalCopy(partialPayload) {
      const seg = Object.assign({}, partialPayload, { provisional: true });
      delete seg.partial;
      return seg;
    }

    // One definition of segment identity, shared by the replace-only revision path
    // and the insert-or-replace live path.
    function findLoadedSegmentIndex(startTime) {
      return transcriptionsData["transcriptions"].findIndex(t => t.start_time === startTime);
    }

    function replaceLoadedSegment(seg) {
      const i = findLoadedSegmentIndex(seg.start_time);
      if (i === -1) return false;
      transcriptionsData["transcriptions"][i] = seg;
      return true;
    }

    function upsertSegment(seg, provisional) {
      const list = transcriptionsData["transcriptions"];
      const i = findLoadedSegmentIndex(seg.start_time);
      if (i === -1) {
        list.push(provisional ? provisionalCopy(seg) : seg);
        list.sort((a, b) => a.start_time - b.start_time);
      } else if (!provisional) {
        // Real commits and revisions always replace the same segment identity.
        list[i] = seg;
      }
    }

    function handleTranscriptionUpdate(event) {
      if (event.lastEventId) lastEventId = event.lastEventId;
      const data = JSON.parse(event.data);
      if (!acceptCaptionVersion(data)) return;
      if (data.translation_update) {
        if (applyEarlyTranslation(data)) { syncLanguagesFromData(); refreshView(); }
        return;
      }
      if (data.partial) {
        // A segment's commit is translated while the *next* segment's partials are
        // already flowing, so the single partial slot gets overwritten seconds
        // before the outgoing segment's commit arrives. Park the outgoing partial
        // in the list as a provisional line, or that segment vanishes from screen
        // for the whole length of its commit translation.
        const outgoing = transcriptionsData["partial"];
        if (outgoing && outgoing.start_time !== data.start_time) upsertSegment(outgoing, true);
        transcriptionsData["partial"] = data;
      } else {
        upsertSegment(data, false);
        // Clear the partial slot only when this commit closes the segment sitting
        // in it - by now the slot usually holds the next segment's live line.
        const current = transcriptionsData["partial"];
        if (!current || current.start_time <= data.start_time) transcriptionsData["partial"] = null;
      }
      syncLanguagesFromData();
      refreshView();
    }

    function handleViewerClear() {
      captionVersions.clear();
      clearColumnSnapshots();
      transcriptionsData["transcriptions"] = [];
      transcriptionsData["partial"] = null;
      // Keep languageOrder and the existing cards intact. Re-discovering/pruning
      // from an empty buffer would collapse the configured language grid.
      refreshView();
    }

    function scheduleReconnect() {
      if (pageUnloading || terminal || reconnectTimer) return;
      reconnected = true;
      reconnectAttempts += 1;
      const delay = Math.min(1000 * reconnectAttempts, 10000);
      statusIndicator.className = 'status-dot-sm bg-yellow-500';
      statusText.textContent = 'Reconnecting... retry ' + reconnectAttempts;
      reconnectTimer = setTimeout(function () {
        reconnectTimer = null;
        if (stream) stream.close();
        connectStream();
      }, delay);
    }

    function connectStream() {
      if (terminal || pageUnloading) return;
      stream = new EventSource(streamUrl());

      stream.onopen = function () {
        reconnectAttempts = 0;
        statusIndicator.className = 'status-dot-sm bg-emerald-500';
        statusText.textContent = 'Live';
      };

      stream.addEventListener('transcription_update', handleTranscriptionUpdate);
      stream.addEventListener('viewer_clear', handleViewerClear);
      stream.addEventListener('column_update', function (event) {
        if (acceptColumnVersion(JSON.parse(event.data))) refreshView();
      });
      stream.addEventListener('session_status', function (event) {
        const data = JSON.parse(event.data);
        if (!['finished', 'stopped', 'error'].includes(data?.state)) return;
        terminal = true;
        if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
        statusIndicator.className = 'status-dot-sm bg-slate-400';
        statusText.textContent = {finished:'Finished', stopped:'Stopped', error:'Stream error'}[data.state];
        stream.close();
      });
      stream.addEventListener('display_dictionary_update', function (event) {
        const data = JSON.parse(event.data);
        const next = data && data.language_maps ? data.language_maps : {};
        if (JSON.stringify(next) === JSON.stringify(languageMaps)) return;
        languageMaps = next;
        dictCache.clear();
        refreshView();
      });
      stream.addEventListener('segment_updated', function (event) {
        const data = JSON.parse(event.data);
        if (!data?.segment || !replaceLoadedSegment(data.segment)) return;
        syncLanguagesFromData();
        refreshView();
      });
      stream.addEventListener('segment_snapshot', function (event) {
        const data = JSON.parse(event.data);
        if (!applyCaptionSnapshot(data)) return;
        syncLanguagesFromData();
        refreshView();
      });

      stream.onerror = function () {
        scheduleReconnect();
      };
    }

    if (DEMO_MODE) {
      // Feed synthetic events through the very same handler the SSE stream
      // uses, so the demo exercises the real render path end to end.
      statusIndicator.className = 'status-dot-sm bg-emerald-500';
      statusText.textContent = 'Demo';
      startDemoFeed(function (payload) {
        handleTranscriptionUpdate({ data: JSON.stringify(payload) });
      });
    } else {
      connectStream();
    }

    window.addEventListener('resize', function () {
      if (currentLayout === 'grid' && !combineActive) refreshGridView();
    });

    window.addEventListener('load', function () {
      const params = new URLSearchParams(window.location.search);

      discoverLanguages();
      // Decide initial layout from current visibility, then render.
      currentLayout = getVisibleOrderedLanguages().length === 1 ? 'single' : 'grid';
      const singleView = document.getElementById('single-view');
      const gridView = document.getElementById('grid-view');
      if (currentLayout === 'single') {
        singleView.classList.remove('hidden');
        gridView.classList.add('hidden');
      } else {
        singleView.classList.add('hidden');
        gridView.classList.remove('hidden');
      }
      // Migrate legacy layout URL param to show on first render.
      if (params.has('layout')) updateShowUrlParam();
      // Clean up show=all or empty show param from URL
      const showParam = params.get('show');
      if (showParam === 'all' || showParam === '') {
        updateUrlParam('show', null);
      }
      refreshView();
      setTimeout(() => { initialized = true; }, 100);
      maybeAutoOpenLangModal(languageOrder);

      // font-size
      const fontSizeParam = params.get('font-size');
      if (fontSizeParam) {
        const isBarePx = /^\d+(\.\d+)?$/.test(fontSizeParam);
        const normalized = isBarePx ? fontSizeParam + 'px' : fontSizeParam;
        // Try to parse as rem for our step counter
        const remMatch = normalized.match(/^([\d.]+)rem$/);
        const pxMatch = normalized.match(/^([\d.]+)px$/);
        if (remMatch) currentFontSizeRem = parseFloat(remMatch[1]);
        else if (pxMatch) currentFontSizeRem = parseFloat(pxMatch[1]) / 16;
        document.documentElement.style.setProperty('--rt-font-size', normalized);
      }

      // theme
      const themeParam = params.get('theme');
      const allowedThemes = ['dark', 'high-contrast'];
      if (themeParam && allowedThemes.includes(themeParam)) {
        applyTheme(themeParam);
      } else {
        applyTheme('light');
      }

      // fade highlight
      applyFade(params.get('fade') !== '0');

    });

    window.addEventListener('beforeunload', function () {
      pageUnloading = true;
      if (reconnectTimer) clearTimeout(reconnectTimer);
      if (stream) stream.close();
    });
  });
</script>
{% endblock %}

{# Source link is already part of this page's own layout. #}
{% block source_offer %}{% endblock %}