from __future__ import annotations

import json
import os
from collections.abc import Iterable

import gradio as gr
import httpx

from sovereign_bench.engine import JUDGE_NAME, JUROR_PERSONAS, stream_trial
from sovereign_bench.models import TrialEvent, TrialRequest


def _load_env_file() -> None:
    path = ".env"
    if not os.path.exists(path):
        return
    with open(path, encoding="utf-8") as handle:
        for line in handle:
            stripped = line.strip()
            if not stripped or stripped.startswith("#") or "=" not in stripped:
                continue
            key, value = stripped.split("=", 1)
            os.environ.setdefault(key.strip(), value.strip().strip('"').strip("'"))


_load_env_file()

CASE_OPTIONS = {
    "Trial of Socrates": "socrates",
    "The People v. Barnaby Buttons": "barnaby",
    "Live Search Tribunal": "live",
}

PHASE_GLYPHS = {
    "pretrial": "00",
    "intake": "01",
    "claims": "02",
    "opening": "03",
    "evidence": "04",
    "questions": "05",
    "deliberation": "06",
    "verdict": "07",
    "appeal": "08",
}

AUDIO_PATHS = {
    "score": "/gradio_api/file=assets/audio/courtroom.ogg",
    "judgement": "/gradio_api/file=assets/audio/Judgement.ogg",
    "crowd": "/gradio_api/file=assets/audio/crowd_shouting.ogg",
    "gavel": "/gradio_api/file=assets/audio/wood_hammer_01.ogg",
    "wood": "/gradio_api/file=assets/audio/wood_hit_03.ogg",
    "steps": "/gradio_api/file=assets/audio/steps_in_wood_floor.wav",
    "paper": "/gradio_api/file=assets/audio/paper_sound_1.mp3",
    "paper_long": "/gradio_api/file=assets/audio/paper_sound_4.mp3",
    "select": "/gradio_api/file=assets/audio/select_001.ogg",
}

CSS = """
:root {
  --ink: #23170e;
  --paper: #f3dfb7;
  --paper-dark: #c79455;
  --gold: #d9b060;
  --mahogany: #4b2119;
  --shadow: rgba(10, 5, 2, .6);
  --red: #8f2e2d;
  --green: #2f6f5e;
  --blue: #254f7a;
}

body,
.gradio-container {
  margin: 0;
  background: #141413 !important;
  background-color: #141413 !important;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}

.gradio-container {
  max-width: none !important;
  padding: 0 !important;
}

.main,
.contain {
  max-width: none !important;
  padding: 0 !important;
  background: transparent !important;
}

.gradio-container main,
.gradio-container .wrap,
.gradio-container .app,
.gradio-container .html-container {
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.docket-book-controls {
  position: fixed;
  left: 50%;
  top: clamp(172px, 21vh, 212px);
  z-index: 9999;
  width: min(620px, calc(100vw - 160px));
  max-width: none;
  margin: 0;
  padding: 0;
  transform: translateX(-50%) rotate(-1deg);
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #321d10;
  transition: opacity .32s ease, transform .65s ease;
}

body.trial-has-started .docket-book-controls {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) rotateX(56deg) rotate(-1deg) scale(.45);
}

.docket-book-controls::before {
  content: none;
}

.docket-book-controls,
.docket-book-controls > *,
.docket-book-controls .form,
.docket-book-controls .block,
.docket-book-controls .gap,
.docket-book-controls .wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.docket-book-controls .docket-book-controls {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  transform: none !important;
  opacity: 1;
  pointer-events: auto;
}

body.trial-has-started .docket-book-controls .docket-book-controls {
  pointer-events: none;
}

.book-control-heading {
  margin: 0 0 6px;
  color: #694019;
  font: 900 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.docket-book-controls label,
.docket-book-controls span,
.docket-book-controls .prose {
  color: #321d10 !important;
}

.docket-book-controls label {
  font-size: 11px !important;
  font-weight: 800 !important;
}

.docket-book-controls input,
.docket-book-controls textarea,
.docket-book-controls [role="combobox"],
.docket-book-controls .wrap-inner {
  border-color: rgba(90, 50, 20, .24) !important;
  border-radius: 4px !important;
  background: rgba(255, 243, 207, .58) !important;
  color: #241509 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.docket-book-controls textarea {
  min-height: 42px !important;
}

.docket-book-controls button.primary {
  min-height: 42px;
  border: 1px solid rgba(44, 21, 10, .42) !important;
  border-radius: 5px !important;
  background: #1c130d !important;
  color: #fff3d2 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(40, 18, 9, .28);
}

.docket-book-controls .book-status p {
  margin: 0 !important;
  color: #5a3519 !important;
  font-size: 12px;
  line-height: 1.25;
}

.trial-options {
  max-width: 1120px;
  margin: 0 auto 14px;
  border: 1px solid rgba(255, 226, 154, .18);
  border-radius: 6px;
  background: rgba(18, 9, 5, .78);
  color: #f5dfb5;
}

.trial-options label,
.trial-options span,
.trial-options .prose {
  color: #f5dfb5 !important;
}

.court-episode-stage {
  --spot-x: 50%;
  --spot-y: 36%;
  position: relative;
  min-height: min(880px, calc(100vh - 112px));
  height: min(880px, calc(100vh - 112px));
  margin: 0;
  width: 100%;
  max-width: none;
  overflow: hidden;
  isolation: auto;
  color: #fff0d2;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.court-episode-stage::before {
  content: "";
  display: none;
}

.court-episode-stage::after {
  content: "";
  display: none;
}

.court-episode-stage > * {
  position: relative;
  z-index: 4;
}

.episode-room {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    url('/gradio_api/file=assets/background/CourtRoom.png') center center / 100% 100% no-repeat,
    #26120b;
  filter: none;
  transform: none;
}

.trial-started .episode-room,
.phase-intake .episode-room,
.phase-claims .episode-room,
.phase-opening .episode-room,
.phase-evidence .episode-room,
.phase-questions .episode-room,
.phase-deliberation .episode-room,
.phase-verdict .episode-room,
.phase-appeal .episode-room {
  filter: none;
  transform: none;
}

.phase-intake,
.phase-appeal { --spot-x: 50%; --spot-y: 30%; }
.phase-claims,
.phase-opening { --spot-x: 43%; --spot-y: 66%; }
.phase-evidence { --spot-x: 70%; --spot-y: 56%; }
.phase-questions,
.phase-verdict { --spot-x: 50%; --spot-y: 34%; }
.phase-deliberation { --spot-x: 79%; --spot-y: 60%; }

.episode-title {
  position: absolute;
  left: 26px;
  top: 22px;
  z-index: 9;
  max-width: min(780px, calc(100% - 330px));
  text-shadow: 0 3px 18px rgba(0, 0, 0, .75);
}

.episode-kicker,
.prop-label,
.caption-phase,
.tooltip-meta,
.drawer-kicker {
  color: #f4d58f;
  font: 800 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.episode-title h1 {
  margin: 4px 0 6px;
  max-width: 780px;
  color: #fff4d7;
  font-size: clamp(28px, 4.2vw, 58px);
  line-height: .98;
  letter-spacing: 0;
}

.episode-title p {
  margin: 0;
  max-width: 720px;
  color: #f8dcaa;
  font-size: 15px;
  line-height: 1.38;
}

.audio-deck {
  display: none;
}

.sound-toggle {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 80;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 226, 154, .48);
  border-radius: 50%;
  background: rgba(22, 11, 7, .82);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .12);
  cursor: pointer;
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
  outline: none;
  border-color: rgba(255, 226, 154, .82);
  background: rgba(41, 20, 12, .92);
}

.sound-toggle .sound-icon {
  position: absolute;
  left: 13px;
  top: 15px;
  width: 10px;
  height: 16px;
  border-radius: 2px 0 0 2px;
  background: #ffe5a6;
}

.sound-toggle .sound-icon::before {
  content: "";
  position: absolute;
  left: 7px;
  top: -3px;
  width: 14px;
  height: 22px;
  border: 3px solid #ffe5a6;
  border-left: 0;
  border-radius: 0 18px 18px 0;
}

.sound-toggle .sound-icon::after {
  content: "";
  position: absolute;
  left: 20px;
  top: -9px;
  width: 3px;
  height: 34px;
  border-radius: 4px;
  background: #d64d45;
  opacity: 0;
  transform: rotate(42deg);
  transform-origin: center;
}

.sound-toggle.muted .sound-icon::after {
  opacity: 1;
}

.episode-book {
  position: absolute;
  left: 50%;
  top: 12%;
  z-index: 12;
  width: min(760px, calc(100% - 32px));
  aspect-ratio: 3 / 2;
  transform: translateX(-50%) rotateX(0) rotateZ(-1deg);
  transform-origin: center bottom;
  color: #2b1b10;
  filter: drop-shadow(0 34px 36px rgba(0, 0, 0, .48));
  pointer-events: none;
  transition: top .85s ease, width .85s ease, transform .85s ease, filter .85s ease, opacity .85s ease;
}

.book-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transition: opacity .36s ease;
}

.book-art.closed-art {
  opacity: 0;
}

.episode-book.closed {
  top: 36%;
  width: min(245px, 30vw);
  transform: translateX(-50%) rotateX(56deg) rotateZ(1deg);
  opacity: .92;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .45));
}

.episode-book.closed .open-art {
  opacity: 0;
}

.episode-book.closed .closed-art {
  opacity: 1;
}

.episode-book.closed .book-open-content {
  opacity: 0;
  pointer-events: none;
}

.book-open-content {
  position: absolute;
  inset: 17% 10% 13%;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  padding: 0 28px;
  transition: opacity .35s ease;
}

.book-open-content h2 {
  margin: 0 0 10px;
  color: #4c2a12;
  font-size: 30px;
  letter-spacing: 0;
}

.book-open-content p,
.book-entry {
  color: #3c2615;
  font-size: 15px;
  line-height: 1.34;
}

.book-entry {
  margin: 11px 0;
  padding-left: 12px;
  border-left: 3px solid rgba(111, 61, 23, .36);
}

.judge-dais {
  position: absolute;
  left: 50%;
  top: 27%;
  z-index: 6;
  width: min(360px, 32vw);
  min-width: 230px;
  transform: translateX(-50%);
  text-align: center;
}

.bench-front {
  display: none;
}

.gavel {
  display: none;
}

.gavel::before {
  content: "";
  display: none;
}

.phase-verdict .gavel {
  animation: gavel-hit .55s ease-out both;
}

.counsel-table {
  position: absolute;
  bottom: 19%;
  z-index: 6;
  width: min(255px, 22vw);
  height: 84px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.counsel-table.left { left: 17%; }
.counsel-table.right { right: 17%; }

.trial-floor-mark {
  display: none;
}

.witness-area {
  position: absolute;
  right: 8.5%;
  bottom: 28%;
  z-index: 6;
  width: min(190px, 18vw);
  height: 98px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.jury-benches {
  position: absolute;
  top: 43%;
  z-index: 7;
  width: min(220px, 16vw);
  min-width: 150px;
  display: grid;
  gap: 6px;
}

.jury-benches.left {
  left: 4.5%;
}

.jury-benches.right {
  right: 4.5%;
}

.jury-benches.left .jury-row {
  transform: rotate(-7deg) skewY(-3deg);
}

.jury-benches.right .jury-row {
  transform: rotate(7deg) skewY(3deg);
}

.jury-rail {
  display: none;
}

.jury-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: end;
}

.gallery-benches {
  display: none;
}

.gallery-benches div {
  display: none;
}

.prop-label {
  display: none;
}

.foreground-props {
  position: absolute;
  inset: 0;
  z-index: 13;
  pointer-events: none;
}

.foreground-fence,
.judge-table-foreground {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  filter: none;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}

.foreground-fence {
  bottom: -1.5%;
  width: 47%;
}

.foreground-fence.fence-left {
  left: 0;
  transform: translateX(-2%);
}

.foreground-fence.fence-right {
  right: 0;
  transform: translateX(2%);
}

.judge-table-foreground {
  left: 50%;
  top: 35%;
  z-index: 1;
  width: 46%;
  transform: translateX(-50%);
}

.puppet {
  --skin: #c99257;
  --robe: #282128;
  --accent: #8a2f2f;
  --portrait-width: 74px;
  --portrait-top: -14px;
  position: absolute;
  z-index: 8;
  width: 72px;
  height: 128px;
  transform: translate(-50%, -100%);
  transform-origin: center bottom;
  filter: none;
  color: inherit;
  text-decoration: none;
}

.puppet.small {
  width: 50px;
  height: 94px;
  --portrait-width: 54px;
  --portrait-top: -8px;
}

.puppet.active {
  animation: puppet-breathe 1.45s ease-in-out infinite;
}

.puppet.walking {
  animation: lawyer-walk 1.9s ease-in-out infinite;
}

.puppet.judge {
  left: 50%;
  top: 31%;
  --skin: #c38a55;
  --robe: #1b1b20;
  --accent: #79242a;
  --portrait-width: 96px;
  --portrait-top: -28px;
}

.puppet.clerk {
  left: 43%;
  top: 41%;
  --skin: #b77b52;
  --robe: #365548;
  --accent: #2f6f5e;
}

.puppet.auric {
  left: 24%;
  top: 62%;
  --skin: #c9975d;
  --robe: #5b2719;
  --accent: #a45c25;
}

.speaker-auric .puppet.auric {
  left: 43%;
  top: 66%;
}

.puppet.sable {
  left: 75%;
  top: 62%;
  --skin: #a86d4a;
  --robe: #1d3045;
  --accent: #254f7a;
}

.speaker-sable .puppet.sable {
  left: 57%;
  top: 66%;
}

.puppet.auditor {
  left: 71%;
  top: 55%;
  --skin: #c6a65b;
  --robe: #4b3d1b;
  --accent: #8d6b1f;
}

.puppet-portrait {
  position: absolute;
  left: 50%;
  top: var(--portrait-top);
  z-index: 3;
  width: var(--portrait-width);
  height: auto;
  max-height: 118px;
  transform: translateX(-50%);
  object-fit: contain;
  pointer-events: none;
}

.phase-evidence .puppet.auditor {
  animation: evidence-focus 1.35s ease-in-out infinite;
}

.puppet::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 44px;
  height: 44px;
  transform: translateX(-50%);
  border: 2px solid rgba(255, 232, 174, .58);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 32%, rgba(255,255,255,.38), transparent 22%),
    radial-gradient(circle at 36% 42%, #1b120c 0 2px, transparent 2.5px),
    radial-gradient(circle at 62% 42%, #1b120c 0 2px, transparent 2.5px),
    linear-gradient(180deg, var(--skin), #8b5638);
}

.puppet::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 48px;
  width: 58px;
  height: 70px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 232, 174, .22);
  border-radius: 24px 24px 8px 8px;
  background:
    linear-gradient(90deg, transparent 46%, rgba(255, 226, 154, .14) 49%, transparent 52%),
    linear-gradient(180deg, var(--accent), var(--robe) 52%, #130a07);
}

.puppet .mouth {
  position: absolute;
  left: 50%;
  top: 27px;
  z-index: 2;
  width: 15px;
  height: 7px;
  transform: translateX(-50%);
  border-bottom: 2px solid #28150c;
  border-radius: 0 0 18px 18px;
}

.puppet.active .mouth,
.puppet.walking .mouth {
  animation: speak-mouth .5s ease-in-out infinite;
}

.speech-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 18;
  width: 260px;
  max-width: min(320px, calc(100vw - 32px));
  transform: translateX(-50%);
  padding: 10px 12px;
  border: 1px solid rgba(255, 226, 154, .48);
  border-radius: 6px;
  background: rgba(255, 244, 215, .94);
  color: #2d1b0d;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .34);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  pointer-events: none;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid rgba(255, 226, 154, .48);
  border-bottom: 1px solid rgba(255, 226, 154, .48);
  background: rgba(255, 244, 215, .94);
}

.tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 20;
  width: 320px;
  max-width: min(360px, calc(100vw - 32px));
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  padding: 8px 10px;
  border: 1px solid rgba(255, 226, 154, .34);
  border-radius: 5px;
  background: rgba(17, 9, 5, .88);
  color: #fff0d2;
  box-shadow: 0 12px 24px rgba(0,0,0,.36);
  transition: opacity .18s ease, transform .18s ease;
}

.puppet:hover .tooltip,
.puppet:focus-within .tooltip,
.juror:hover .tooltip,
.juror:focus-within .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.tooltip strong {
  display: block;
  color: #fff6df;
  font-size: 13px;
}

.tooltip p {
  margin: 6px 0 0;
  color: #f5dfb5;
  font-size: 11px;
  line-height: 1.28;
  white-space: normal;
}

.tooltip-meta {
  margin-top: 3px;
  color: #f4d58f;
  font-size: 10px;
}

.tooltip-io-label,
.thread-label {
  display: block;
  margin-top: 7px;
  color: #f4d58f;
  font: 800 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
}

.ai-thread-modal {
  display: none;
  position: fixed;
  inset: max(18px, 4vh) max(18px, 5vw);
  z-index: 120;
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(255, 226, 154, .42);
  border-radius: 8px;
  background: rgba(18, 9, 5, .96);
  color: #fff0d2;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .58);
}

.ai-thread-modal:target {
  display: block;
}

.thread-close {
  position: sticky;
  top: 0;
  float: right;
  padding: 7px 10px;
  border: 1px solid rgba(255, 226, 154, .38);
  border-radius: 4px;
  background: rgba(255, 226, 154, .12);
  color: #fff0d2;
  text-decoration: none;
  font: 800 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.thread-title {
  margin: 0 0 4px;
  color: #fff6df;
  font-size: 22px;
}

.thread-subtitle {
  margin: 0 0 16px;
  color: #f4d58f;
  font: 800 12px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
}

.thread-turn {
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 226, 154, .16);
}

.thread-turn:last-child {
  border-bottom: 0;
}

.thread-block {
  margin: 7px 0 0;
  white-space: pre-wrap;
  color: #f8dfaa;
  font: 12px/1.42 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.juror {
  --face: #c89259;
  --juror-image: none;
  position: relative;
  height: 72px;
  transform-origin: center bottom;
  filter: none;
  color: inherit;
  text-decoration: none;
}

.juror.active {
  animation: juror-react .82s ease-in-out infinite alternate;
}

.juror .speech-bubble {
  bottom: calc(100% + 6px);
  width: 230px;
}

.juror-face {
  position: absolute;
  left: 50%;
  top: 0;
  width: 30px;
  height: 30px;
  transform: translateX(-50%);
  border: 2px solid rgba(255, 232, 174, .5);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 40%, #1d1109 0 2px, transparent 2.5px),
    radial-gradient(circle at 64% 40%, #1d1109 0 2px, transparent 2.5px),
    linear-gradient(180deg, var(--face), #835235);
}

.juror-face::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: 9px;
  width: 14px;
  height: 7px;
  border-bottom: 2px solid #25140c;
  border-radius: 0 0 18px 18px;
}

.juror-portrait {
  position: absolute;
  left: 50%;
  top: -19px;
  z-index: 3;
  width: 58px;
  height: 74px;
  transform: translateX(-50%);
  object-fit: contain;
  pointer-events: none;
}

.juror-body {
  position: absolute;
  left: 50%;
  top: 32px;
  width: 36px;
  height: 36px;
  transform: translateX(-50%);
  border-radius: 20px 20px 7px 7px;
  border: 1px solid rgba(255, 232, 174, .18);
  background: linear-gradient(180deg, #5b496f, #211726);
}

.phase-deliberation .juror:nth-child(odd) {
  animation-delay: .18s;
}

.evidence-props {
  position: absolute;
  left: 55%;
  right: 11%;
  bottom: 36%;
  z-index: 9;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  pointer-events: auto;
}

.evidence-sheet {
  width: 96px;
  min-height: 72px;
  padding: 8px;
  transform: rotate(var(--tilt));
  border: 1px solid rgba(56, 32, 15, .22);
  border-radius: 3px;
  background:
    linear-gradient(135deg, transparent 0 84%, rgba(64, 38, 20, .18) 85%),
    #fff6df;
  color: #372212;
  box-shadow: 0 10px 20px rgba(0,0,0,.28);
  opacity: .18;
  transition: transform .25s ease, opacity .25s ease;
}

.phase-evidence .evidence-sheet,
.phase-questions .evidence-sheet,
.phase-deliberation .evidence-sheet,
.phase-verdict .evidence-sheet,
.phase-appeal .evidence-sheet {
  opacity: .96;
  animation: paper-land .55s ease-out both;
}

.evidence-sheet:hover {
  transform: rotate(0) translateY(-8px) scale(1.08);
  z-index: 15;
}

.evidence-sheet strong {
  display: block;
  margin-bottom: 4px;
  color: #254f7a;
  font: 800 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.evidence-sheet span {
  display: block;
  font-size: 11px;
  line-height: 1.2;
}

.trial-caption {
  position: absolute;
  left: 50%;
  bottom: 108px;
  z-index: 14;
  width: min(870px, calc(100% - 44px));
  transform: translateX(-50%);
  padding: 12px 16px 13px;
  border: 1px solid rgba(255, 226, 154, .34);
  border-radius: 6px;
  background: rgba(13, 7, 4, .78);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 36px rgba(0,0,0,.38);
}

.caption-title {
  margin-top: 3px;
  color: #fff3d7;
  font-size: 20px;
  font-weight: 800;
}

.caption-body {
  margin-top: 5px;
  color: #f8dfaa;
  font-size: 14px;
  line-height: 1.36;
  white-space: pre-wrap;
}

.decree-ribbon {
  position: absolute;
  right: 26px;
  top: 22px;
  z-index: 10;
  max-width: 230px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 226, 154, .26);
  border-radius: 5px;
  background: rgba(18, 9, 5, .68);
  color: #ffe6ae;
  font: 800 11px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
}

.phase-verdict .judge-dais,
.phase-questions .judge-dais {
  animation: bench-lean .9s ease-in-out infinite alternate;
}

.phase-deliberation .jury-benches {
  animation: jury-murmur .7s ease-in-out infinite alternate;
}

.stage-prop-link {
  cursor: help;
}

.drawer-shell {
  max-width: 1500px;
  margin: 12px auto 0;
}

.drawer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 28px;
}

.drawer-text-stack {
  color: var(--ink);
  line-height: 1.42;
}

.drawer-text-block {
  color: var(--ink);
}

.drawer-text-block h4 {
  margin: 5px 0 7px;
}

.drawer-text-block p,
.drawer-empty {
  margin: 0 0 8px;
  line-height: 1.38;
  white-space: pre-wrap;
}

.vote-liable { color: var(--red); font-weight: 800; }
.vote-not_liable { color: var(--green); font-weight: 800; }
.vote-uncertain { color: var(--blue); font-weight: 800; }

.mind-text {
  max-height: 340px;
  overflow: auto;
  color: var(--ink);
  font: 12px/1.42 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
}

@keyframes puppet-breathe {
  0%, 100% { transform: translate(-50%, -100%) translateY(0); }
  50% { transform: translate(-50%, -100%) translateY(-4px); }
}

@keyframes lawyer-walk {
  0%, 100% { transform: translate(-50%, -100%) translateY(0) rotate(-1deg); }
  25% { transform: translate(-50%, -100%) translateY(-7px) rotate(2deg); }
  50% { transform: translate(-50%, -100%) translateY(0) rotate(1deg); }
  75% { transform: translate(-50%, -100%) translateY(-5px) rotate(-2deg); }
}

@keyframes speak-mouth {
  0%, 100% { height: 5px; border-radius: 0 0 18px 18px; }
  50% { height: 10px; border-radius: 50%; border: 2px solid #28150c; }
}

@keyframes juror-react {
  from { transform: translateY(0) rotate(-1deg); }
  to { transform: translateY(-5px) rotate(2deg); }
}

@keyframes evidence-focus {
  0%, 100% { transform: translate(-50%, -100%) translateY(0) scale(1); }
  50% { transform: translate(-50%, -100%) translateY(-6px) scale(1.035); }
}

@keyframes paper-land {
  from { transform: rotate(var(--tilt)) translateY(-18px); opacity: 0; }
  to { transform: rotate(var(--tilt)) translateY(0); opacity: .96; }
}

@keyframes bench-lean {
  from { transform: translateX(-50%) translateY(0); }
  to { transform: translateX(-50%) translateY(-5px); }
}

@keyframes jury-murmur {
  from { transform: translateX(0); }
  to { transform: translateX(-3px); }
}

@keyframes gavel-hit {
  0% { transform: rotate(-18deg) translateY(0); }
  45% { transform: rotate(21deg) translateY(18px); }
  100% { transform: rotate(-18deg) translateY(0); }
}

@media (max-width: 820px) {
  .docket-book-controls {
    position: fixed;
    top: 262px;
    width: calc(100vw - 52px);
    transform: translateX(-50%) rotate(-1deg);
  }

  .court-episode-stage {
    height: 1280px;
    min-height: 1280px;
  }

  .episode-room {
    background-position: center top;
  }

  .episode-title {
    left: 16px;
    right: 16px;
    max-width: none;
  }

  .decree-ribbon {
    top: 164px;
    left: 16px;
    right: auto;
    max-width: calc(100% - 32px);
  }

  .episode-book {
    top: 220px;
    width: min(680px, calc(100% - 20px));
  }

  .episode-book.closed {
    top: 430px;
    width: 210px;
  }

  .book-open-content {
    grid-template-columns: 1fr;
    gap: 10px;
    inset: 17% 12% 14%;
    padding: 0 18px;
  }

  .book-open-content h2 {
    font-size: 22px;
    margin-bottom: 5px;
  }

  .book-open-content p,
  .book-entry {
    font-size: 12px;
    line-height: 1.22;
  }

  .book-entry {
    margin: 5px 0;
  }

  .judge-dais {
    top: 390px;
    width: 280px;
  }

  .counsel-table.left {
    left: 7%;
    bottom: 470px;
  }

  .counsel-table.right {
    right: 7%;
    bottom: 470px;
  }

  .counsel-table {
    width: 154px;
  }

  .puppet.auric {
    left: 20%;
    top: 650px;
  }

  .puppet.sable {
    left: 80%;
    top: 650px;
  }

  .speaker-auric .puppet.auric {
    left: 42%;
    top: 730px;
  }

  .speaker-sable .puppet.sable {
    left: 58%;
    top: 730px;
  }

  .puppet.clerk {
    left: 35%;
    top: 560px;
  }

  .puppet.auditor {
    left: 78%;
    top: 540px;
  }

  .witness-area {
    right: 5%;
    bottom: 580px;
    width: 138px;
  }

  .jury-benches {
    top: 520px;
    width: 126px;
    min-width: 126px;
  }

  .jury-benches.left {
    left: 5%;
  }

  .jury-benches.right {
    right: 5%;
  }

  .foreground-fence {
    bottom: -2px;
    width: 64%;
  }

  .foreground-fence.fence-left {
    left: -17%;
  }

  .foreground-fence.fence-right {
    right: -17%;
  }

  .judge-table-foreground {
    top: 405px;
    width: 760px;
  }

  .evidence-props {
    left: 8%;
    right: 8%;
    bottom: 410px;
  }

  .trial-caption {
    bottom: 105px;
  }

  .gallery-benches {
    bottom: 42px;
    grid-template-columns: repeat(3, 1fr);
  }
}
"""

APP_JS = f"""
() => {{
  const paths = {json.dumps(AUDIO_PATHS)};
  const SCORE_BASE_VOLUME = 0.16;
  const SCORE_QUIET_VOLUME = 0.035;
  const SCORE_BREATH_INTERVAL_MS = 20000;
  const SCORE_BREATH_DURATION_MS = 5000;
  const make = (name, volume = 1, loop = false) => {{
    const audio = new Audio(paths[name]);
    audio.preload = 'auto';
    audio.volume = volume;
    audio.loop = loop;
    return audio;
  }};

  if (!window.SovereignCourtAudio) {{
    const controller = {{
      unlocked: false,
      lastPhase: null,
      muted: false,
      scoreVolume: SCORE_BASE_VOLUME,
      crowdVolume: 0.0,
      fadeFrame: null,
      breathTimer: null,
      score: make('score', SCORE_BASE_VOLUME, true),
      crowd: make('crowd', 0.0, true),
      begin() {{
        this.unlocked = true;
        this.ensureLooping();
        this.startBreathing();
        this.play('select', 0.26);
        window.setTimeout(() => this.play('paper_long', 0.45), 120);
        window.setTimeout(() => this.play('gavel', 0.72), 520);
        this.observePhase();
        this.updateToggle();
      }},
      ensureLooping() {{
        if (!this.unlocked || this.muted) return;
        this.applyLoopVolumes();
        this.score.play().catch(() => {{}});
        this.crowd.play().catch(() => {{}});
      }},
      applyLoopVolumes() {{
        this.score.volume = this.muted ? 0 : this.scoreVolume;
        this.crowd.volume = this.muted ? 0 : this.crowdVolume;
      }},
      play(name, volume = 1) {{
        if (!this.unlocked || this.muted) return;
        const cue = make(name, volume, false);
        cue.play().catch(() => {{}});
      }},
      setCrowd(volume) {{
        this.crowdVolume = volume;
        this.applyLoopVolumes();
      }},
      fadeScore(toVolume, duration, onComplete) {{
        if (this.fadeFrame) window.cancelAnimationFrame(this.fadeFrame);
        const fromVolume = this.scoreVolume;
        const started = window.performance.now();
        const step = (now) => {{
          const progress = Math.min(1, (now - started) / duration);
          this.scoreVolume = fromVolume + ((toVolume - fromVolume) * progress);
          this.applyLoopVolumes();
          if (progress < 1) {{
            this.fadeFrame = window.requestAnimationFrame(step);
          }} else {{
            this.fadeFrame = null;
            if (onComplete) onComplete();
          }}
        }};
        this.fadeFrame = window.requestAnimationFrame(step);
      }},
      breatheScore() {{
        if (!this.unlocked) return;
        const halfDuration = SCORE_BREATH_DURATION_MS / 2;
        this.fadeScore(SCORE_QUIET_VOLUME, halfDuration, () => {{
          this.fadeScore(SCORE_BASE_VOLUME, halfDuration);
        }});
      }},
      startBreathing() {{
        if (this.breathTimer) return;
        this.breathTimer = window.setInterval(() => this.breatheScore(), SCORE_BREATH_INTERVAL_MS);
      }},
      toggleMuted() {{
        this.muted = !this.muted;
        if (this.muted) {{
          this.applyLoopVolumes();
          this.score.pause();
          this.crowd.pause();
        }} else {{
          this.ensureLooping();
        }}
        this.updateToggle();
      }},
      updateToggle() {{
        document.querySelectorAll('.sound-toggle').forEach((button) => {{
          button.classList.toggle('muted', this.muted);
          button.setAttribute('aria-pressed', String(this.muted));
          button.setAttribute('title', this.muted ? 'Sound off' : 'Sound on');
        }});
      }},
      cuePhase(phase) {{
        if (!this.unlocked || !phase || phase === this.lastPhase) return;
        this.lastPhase = phase;
        if (phase === 'intake') {{
          this.setCrowd(0.08);
          this.play('paper', 0.45);
          this.play('wood', 0.42);
        }} else if (phase === 'claims' || phase === 'opening') {{
          this.setCrowd(0.045);
          this.play('steps', 0.33);
        }} else if (phase === 'evidence') {{
          this.setCrowd(0.035);
          this.play('paper_long', 0.52);
        }} else if (phase === 'questions') {{
          this.setCrowd(0.02);
          this.play('wood', 0.34);
        }} else if (phase === 'deliberation') {{
          this.setCrowd(0.18);
        }} else if (phase === 'verdict') {{
          this.setCrowd(0.0);
          this.play('judgement', 0.66);
          window.setTimeout(() => this.play('gavel', 0.9), 650);
        }} else if (phase === 'appeal') {{
          this.setCrowd(0.035);
          this.play('paper_long', 0.5);
        }}
      }},
      observePhase() {{
        const stage = document.querySelector('.court-episode-stage');
        if (stage) this.cuePhase(stage.dataset.phase);
        this.updateToggle();
      }}
    }};

    window.SovereignCourtAudio = controller;

    const observer = new MutationObserver(() => controller.observePhase());
    observer.observe(document.body, {{ childList: true, subtree: true, attributes: true, attributeFilter: ['data-phase'] }});

    document.addEventListener('click', (event) => {{
      const toggle = event.target.closest('.sound-toggle');
      if (toggle) {{
        event.preventDefault();
        controller.toggleMuted();
        return;
      }}
      if (event.target.closest('.docket-book-controls')) {{
        controller.play('select', 0.22);
      }}
    }}, true);
  }}
}}
"""

APP_HEAD = f"""
<script>
(function() {{
  const installCourtAudio = {APP_JS.strip()};
  if (document.readyState === 'loading') {{
    document.addEventListener('DOMContentLoaded', installCourtAudio, {{ once: true }});
  }} else {{
    installCourtAudio();
  }}
}})();
</script>
"""

START_JS = """
(case_label, search_query, hypothetical, speed, mind_layer) => {
  document.body.classList.add('trial-has-started');
  if (window.SovereignCourtAudio) {
    window.SovereignCourtAudio.begin();
  }
  return [case_label, search_query, hypothetical, speed, mind_layer];
}
"""

CHARACTERS = {
    JUDGE_NAME: {
        "class": "judge",
        "name": JUDGE_NAME,
        "role": "Stoic presiding judge",
        "model": "gpt-oss-20b",
        "image": "/gradio_api/file=assets/characters/marcus-aurelius.png",
    },
    "Clerk Meridian": {
        "class": "clerk",
        "name": "Clerk Meridian",
        "role": "Court clerk",
        "model": "AgentCPM-Explore",
    },
    "Advocate Auric": {
        "class": "auric",
        "name": "Advocate Auric",
        "role": "Claimant advocate",
        "model": "gpt-oss-20b",
    },
    "Counsel Sable": {
        "class": "sable",
        "name": "Counsel Sable",
        "role": "Respondent advocate",
        "model": "gpt-oss-20b",
    },
    "Auditor Prism": {
        "class": "auditor",
        "name": "Auditor Prism",
        "role": "Evidence auditor",
        "model": "Nemotron-Orchestrator-8B",
    },
    "Nemotron Jury": {
        "class": "jury",
        "name": "Nemotron Jury",
        "role": "Jury panel",
        "model": "Nemotron-Orchestrator-8B",
    },
}

JUROR_FACES = {
    "Karl Marx": "#d0b79c",
    "John Stuart Mill": "#c99b72",
    "Confucius": "#c49a64",
    "Cleopatra VII": "#b98755",
    "Niccolo Machiavelli": "#b88963",
    "Jensen Huang": "#b37758",
}

JUROR_IMAGES = {
    "Karl Marx": "/gradio_api/file=assets/characters/karl-marx.png",
    "John Stuart Mill": "/gradio_api/file=assets/characters/john-stuart-mill.png",
    "Confucius": "/gradio_api/file=assets/characters/confucius.png",
    "Cleopatra VII": "/gradio_api/file=assets/characters/cleopatra-vii.png",
    "Niccolo Machiavelli": "/gradio_api/file=assets/characters/niccolo-machiavelli.png",
    "Jensen Huang": "/gradio_api/file=assets/characters/jensen-huang.png",
}

PHASE_AGENTS = {
    "pretrial": ["Clerk Meridian"],
}


def _remote_events(request: TrialRequest) -> Iterable[TrialEvent] | None:
    endpoint = os.getenv("MODAL_TRIAL_URL", "").strip()
    if not endpoint:
        return None

    def iterator() -> Iterable[TrialEvent]:
        with httpx.stream("POST", endpoint, json=request.model_dump(), timeout=900.0) as response:
            response.raise_for_status()
            for line in response.iter_lines():
                if line:
                    yield TrialEvent.model_validate_json(line)

    return iterator()


def get_events(request: TrialRequest) -> Iterable[TrialEvent]:
    remote = _remote_events(request)
    if remote is not None:
        yield from remote
        return
    delay = {"swift": 1.4, "measured": 2.4, "ceremonial": 3.4}[request.speed]
    yield from stream_trial(request, delay=delay)


def _escape(value: str) -> str:
    return (
        value.replace("&", "&amp;")
        .replace("<", "&lt;")
        .replace(">", "&gt;")
        .replace('"', "&quot;")
    )


def _latest_packet_title(events: list[TrialEvent]) -> tuple[str, str]:
    if not events:
        return (
            "Judge-GPT",
            "The gallery doors open on an AI-native courtroom. Choose a case from the docket book and begin the proceeding.",
        )
    lines = events[0].body.splitlines()
    title = lines[0] if lines else "Judge-GPT"
    subtitle = lines[1] if len(lines) > 1 else events[0].title
    return title, subtitle


def _active_agents_for(event: TrialEvent | None) -> set[str]:
    if event is None:
        return set(PHASE_AGENTS["pretrial"])
    if not event.turns:
        return set()
    return {event.turns[0].agent}


def _active_speaker_for(event: TrialEvent | None) -> str:
    if event is None:
        return "Clerk Meridian"
    if not event.turns:
        return ""
    return event.turns[0].agent


def _speaker_class_for(speaker: str) -> str:
    if not speaker:
        return ""
    if speaker in CHARACTERS:
        return f" speaker-{CHARACTERS[speaker]['class']}"
    return " speaker-" + "".join(ch.lower() if ch.isalnum() else "-" for ch in speaker).strip("-")


def _latest_turn_text(event: TrialEvent | None, agent: str) -> str:
    if event is None:
        return ""
    turn = next((turn for turn in event.turns if turn.agent == agent), None)
    if turn is None:
        return ""
    return _short_text(turn.content, 210)


def _thread_id(name: str) -> str:
    return "ai-thread-" + "".join(ch.lower() if ch.isalnum() else "-" for ch in name).strip("-")


def _turns_for_agent(events: list[TrialEvent], agent: str) -> list[dict[str, str]]:
    turns = []
    for event in events:
        for turn in event.turns:
            if turn.agent == agent:
                turns.append(
                    {
                        "phase": event.phase,
                        "title": event.title,
                        "role": turn.role,
                        "model": turn.model,
                        "confidence": f"{turn.confidence:.2f}",
                        "input": turn.input or "Prompt unavailable for this turn.",
                        "output": turn.content or "No output captured yet.",
                    }
                )
    return turns


def _thread_for_character(events: list[TrialEvent], agent: str) -> list[dict[str, str]]:
    if agent in JUROR_FACES:
        turns = _turns_for_agent(events, agent)
        vote = next((vote for event in reversed(events) for vote in event.votes if vote.juror == agent), None)
        if not turns:
            turns = _turns_for_agent(events, "Nemotron Jury")
        if vote and turns:
            turns = [
                dict(
                    turn,
                    output=f"{turn['output']}\n\n{agent} persona: {vote.persona}\n{agent} vote: {vote.vote}\nReason: {vote.reason}",
                )
                for turn in turns
            ]
        return turns
    return _turns_for_agent(events, agent)


def _short_text(value: str, limit: int = 170) -> str:
    squashed = " ".join(value.split())
    return squashed if len(squashed) <= limit else squashed[: limit - 1].rstrip() + "..."


def _tooltip(name: str, role: str, model: str, turns: list[dict[str, str]]) -> str:
    latest = turns[-1] if turns else None
    input_preview = _short_text(latest["input"] if latest else "Waiting for this model to receive its first prompt.")
    output_preview = _short_text(latest["output"] if latest else "No output has been emitted yet.")
    return (
        "<span class='tooltip'>"
        f"<strong>{_escape(name)}</strong>"
        f"{_escape(role)}"
        f"<span class='tooltip-meta'>{_escape(model)}</span>"
        "<span class='tooltip-io-label'>Input</span>"
        f"<p>{_escape(input_preview)}</p>"
        "<span class='tooltip-io-label'>Output</span>"
        f"<p>{_escape(output_preview)}</p>"
        "<span class='tooltip-meta'>Click to open full thread</span>"
        "</span>"
    )


def _thread_modal(name: str, role: str, model: str, turns: list[dict[str, str]]) -> str:
    body = (
        "".join(
            "<section class='thread-turn'>"
            f"<div class='thread-subtitle'>{_escape(turn['phase'])} / {_escape(turn['role'])} / confidence {turn['confidence']}</div>"
            "<span class='thread-label'>Input</span>"
            f"<div class='thread-block'>{_escape(turn['input'])}</div>"
            "<span class='thread-label'>Output</span>"
            f"<div class='thread-block'>{_escape(turn['output'])}</div>"
            "</section>"
            for turn in turns
        )
        or "<section class='thread-turn'><div class='thread-block'>Waiting for this model thread to appear.</div></section>"
    )
    return (
        f"<aside id='{_escape(_thread_id(name))}' class='ai-thread-modal'>"
        "<a class='thread-close' href='#court-stage'>Close</a>"
        f"<h2 class='thread-title'>{_escape(name)}</h2>"
        f"<div class='thread-subtitle'>{_escape(role)} / {_escape(model)}</div>"
        f"{body}</aside>"
    )


def _puppet(agent: str, active_agents: set[str], phase: str, events: list[TrialEvent], latest: TrialEvent | None) -> str:
    meta = CHARACTERS[agent]
    active = " active" if agent in active_agents else ""
    walking = " walking" if agent in {"Advocate Auric", "Counsel Sable"} and agent in active_agents else ""
    small = " small" if agent in {"Clerk Meridian", "Auditor Prism"} else ""
    turns = _thread_for_character(events, agent)
    bubble = ""
    if agent in active_agents:
        speech = _latest_turn_text(latest, agent)
        if speech:
            bubble = f"<span class='speech-bubble'>{_escape(speech)}</span>"
    portrait = ""
    if meta.get("image"):
        portrait = (
            f"<img class='puppet-portrait' src='{_escape(meta['image'])}' "
            f"alt='{_escape(meta['name'])} bust' onerror=\"this.style.display='none'\">"
        )
    return (
        f"<a class='puppet {meta['class']}{active}{walking}{small}' href='#{_escape(_thread_id(agent))}' aria-label='Open {_escape(agent)} model thread'>"
        f"{portrait}"
        "<span class='mouth'></span>"
        f"{bubble}"
        f"{_tooltip(meta['name'], meta['role'], meta['model'], turns)}"
        "</a>"
    )


def _juror(name: str, active: bool, events: list[TrialEvent] | None = None, latest: TrialEvent | None = None) -> str:
    face = JUROR_FACES.get(name, "#c89259")
    image = JUROR_IMAGES.get(name, "")
    active_cls = " active" if active else ""
    turns = _thread_for_character(events or [], name)
    bubble = ""
    if active:
        vote = next((vote for vote in (latest.votes if latest else []) if vote.juror == name), None)
        speech = _latest_turn_text(latest, name)
        if vote:
            speech = f"{vote.vote.replace('_', ' ').title()}. {vote.reason}"
        if speech:
            bubble = f"<span class='speech-bubble'>{_escape(_short_text(speech, 190))}</span>"
    portrait = (
        f"<img class='juror-portrait' src='{_escape(image)}' alt='{_escape(name)} bust' "
        "onerror=\"this.style.display='none'\">"
        if image
        else ""
    )
    return (
        f"<a class='juror{active_cls}' href='#{_escape(_thread_id(name))}' style='--face: {face}' aria-label='Open {_escape(name)} model thread'>"
        f"{portrait}"
        "<span class='juror-face'></span><span class='juror-body'></span>"
        f"{bubble}"
        f"{_tooltip(name, 'HF-style juror', 'Nemotron panel', turns)}"
        "</a>"
    )


def _book(open_book: bool) -> str:
    closed = "" if open_book else " closed"
    return (
        f"<div class='episode-book{closed}'>"
        "<img class='book-art open-art' src='/gradio_api/file=assets/book/docket-book-open.png' alt='Open docket book'>"
        "<img class='book-art closed-art' src='/gradio_api/file=assets/book/docket-book-closed.png' alt='Closed docket book'>"
        "</div>"
    )


def _caption(event: TrialEvent | None, phase: str) -> tuple[str, str, str]:
    if event is None:
        return (
            "PRETRIAL",
            "The Courtroom Is Ready",
            "The docket is open, the room is dimmed, and the clerk is waiting for the first call.",
        )
    body = event.body.splitlines()[0] if event.body.splitlines() else event.body
    return (f"{PHASE_GLYPHS[phase]} / {phase.upper()}", event.title, body)


def _evidence_props(events: list[TrialEvent]) -> str:
    evidence = next((event.evidence for event in reversed(events) if event.evidence), [])
    if not evidence:
        return ""
    tilts = ["-5deg", "3deg", "-2deg", "5deg"]
    sheets = []
    for idx, item in enumerate(evidence[:4]):
        sheets.append(
            f"<div class='evidence-sheet stage-prop-link' style='--tilt: {tilts[idx % len(tilts)]}' title='{_escape(item.note)}'>"
            f"<strong>{_escape(item.id)}</strong>"
            f"<span>{_escape(item.title)}</span></div>"
        )
    return f"<div class='evidence-props'>{''.join(sheets)}</div>"


def _foreground_props() -> str:
    fence = "/gradio_api/file=assets/foreground/foregroundFence.png"
    judge_table = "/gradio_api/file=assets/foreground/JudgeTable.png"
    return (
        "<div class='foreground-props' aria-hidden='true'>"
        f"<img class='foreground-fence fence-left' src='{fence}' alt=''>"
        f"<img class='foreground-fence fence-right' src='{fence}' alt=''>"
        f"<img class='judge-table-foreground' src='{judge_table}' alt=''>"
        "</div>"
    )


def _courtroom_juror_names(votes: list) -> list[str]:
    names = list(JUROR_FACES)
    names.extend(vote.juror for vote in votes if vote.juror not in names)
    return names[:6]


def _latest_votes(events: list[TrialEvent]) -> list:
    by_juror = {}
    for event in events:
        for vote in event.votes:
            by_juror[vote.juror] = vote
    ordered = [by_juror[name] for name in JUROR_FACES if name in by_juror]
    ordered.extend(vote for juror, vote in by_juror.items() if juror not in JUROR_FACES)
    return ordered


def render_court(events: list[TrialEvent], started: bool = False) -> str:
    latest = events[-1] if events else None
    phase = latest.phase if latest else "pretrial"
    title, subtitle = _latest_packet_title(events)
    active_agents = _active_agents_for(latest)
    active_speaker = _active_speaker_for(latest)
    speaker_cls = _speaker_class_for(active_speaker)
    caption_phase, caption_title, caption_body = _caption(latest, phase)
    latest_votes = _latest_votes(events)
    juror_names = _courtroom_juror_names(latest_votes)
    started_cls = " trial-started" if started or events else ""
    book_open = not started and not events
    puppets = "".join(
        _puppet(agent, active_agents, phase, events, latest)
        for agent in [JUDGE_NAME, "Clerk Meridian", "Advocate Auric", "Counsel Sable", "Auditor Prism"]
    )
    left_jurors = "".join(_juror(name, name == active_speaker, events, latest) for name in juror_names[:3])
    right_jurors = "".join(_juror(name, name == active_speaker, events, latest) for name in juror_names[3:6])
    evidence_props = _evidence_props(events)
    thread_modals = "".join(
        _thread_modal(meta["name"], meta["role"], meta["model"], _thread_for_character(events, agent))
        for agent, meta in CHARACTERS.items()
    ) + "".join(
        _thread_modal(name, "HF-style juror", "Nemotron panel", _thread_for_character(events, name))
        for name in juror_names
    )
    return (
        f"<section id='court-stage' class='court-episode-stage phase-{_escape(phase)}{_escape(speaker_cls)}{started_cls}' data-phase='{_escape(phase)}'>"
        "<div class='episode-room'></div>"
        "<div class='audio-deck' aria-hidden='true'>"
        + "".join(f"<audio preload='auto' src='{_escape(src)}'></audio>" for src in AUDIO_PATHS.values())
        + "</div>"
        "<button class='sound-toggle' type='button' aria-label='Toggle sound' aria-pressed='false' title='Sound on'>"
        "<span class='sound-icon' aria-hidden='true'></span></button>"
        "<div class='episode-title'>"
        "<div class='episode-kicker'>Judge-GPT Virtual Courtroom</div>"
        f"<h1>{_escape(title)}</h1>"
        f"<p>{_escape(subtitle)}</p></div>"
        f"<div class='decree-ribbon'>Step {len(events) if events else 0}: {caption_title}<br>Hover characters for agent and model details</div>"
        f"{_book(book_open)}"
        f"<div class='judge-dais'><div class='prop-label'>{_escape(JUDGE_NAME)}</div><div class='bench-front'></div><span class='gavel'></span></div>"
        "<div class='counsel-table left'><div class='prop-label'>Claimant Table</div></div>"
        "<div class='counsel-table right'><div class='prop-label'>Respondent Table</div></div>"
        "<div class='trial-floor-mark'></div>"
        "<div class='witness-area'><div class='prop-label'>Evidence Stand</div></div>"
        "<div class='jury-benches left'><div class='prop-label'>Jury Box</div><div class='jury-row'>"
        f"{left_jurors}</div><div class='jury-rail'></div></div>"
        "<div class='jury-benches right'><div class='prop-label'>Jury Box</div><div class='jury-row'>"
        f"{right_jurors}</div><div class='jury-rail'></div></div>"
        f"{puppets}"
        f"{evidence_props}"
        f"{_foreground_props()}"
        "<div class='gallery-benches'><div></div><div></div><div></div><div></div><div></div><div></div></div>"
        "<div class='trial-caption'>"
        f"<div class='caption-phase'>Live Trial Feed / {_escape(caption_phase)}</div>"
        f"<div class='caption-title'>{_escape(caption_title)}</div>"
        f"<div class='caption-body'>{_escape(caption_body)}</div>"
        "</div>"
        f"{thread_modals}</section>"
    )


def render_evidence(events: list[TrialEvent]) -> str:
    evidence = next((event.evidence for event in reversed(events) if event.evidence), [])
    if not evidence:
        return "<div class='drawer-empty'>The exhibit drawer is closed until the clerk opens the docket.</div>"
    return (
        "<div class='drawer-grid drawer-text-stack'>"
        + "".join(
            "<section class='drawer-text-block'>"
            f"<div class='drawer-kicker'>{_escape(item.id)} / {item.reliability:.2f}</div>"
            f"<h4>{_escape(item.title)}</h4>"
            f"<p>{_escape(item.excerpt)}</p>"
            f"<p><strong>Direction:</strong> {_escape(item.supports)}</p>"
            f"<p>{_escape(item.note)}</p></section>"
            for item in evidence
        )
        + "</div>"
    )


def render_jurors(events: list[TrialEvent]) -> str:
    votes = _latest_votes(events)
    if not votes:
        sleepers = "".join(_juror(name, False) for name in JUROR_FACES)
        return (
            "<section class='drawer-text-block drawer-text-stack'><div class='drawer-kicker'>Jury Box</div>"
            f"<div class='jury-row'>{sleepers}</div>"
            "<p>The jurors are seated and silent.</p></section>"
        )
    return (
        "<div class='drawer-grid drawer-text-stack'>"
        + "".join(
            "<section class='drawer-text-block'>"
            f"<div class='drawer-kicker'>{_escape(vote.juror)}</div>"
            f"<p><strong>Persona:</strong> {_escape(vote.persona)}</p>"
            f"<p class='vote-{vote.vote}'>{_escape(vote.vote.replace('_', ' '))}</p>"
            f"<p>{_escape(vote.reason)}</p>"
            f"<p><strong>Evidence:</strong> {_escape(', '.join(vote.evidence_ids))}</p></section>"
            for vote in votes
        )
        + "</div>"
    )


def render_mind(events: list[TrialEvent], enabled: bool) -> str:
    if not enabled:
        return "<div class='mind-text'>Mind Layer hidden.</div>"
    if not events:
        return "<div class='mind-text'>Awaiting trace.</div>"
    compact = [
        {
            "phase": event.phase,
            "title": event.title,
            "turns": [turn.model_dump() for turn in event.turns],
            "trace": event.trace,
        }
        for event in events
    ]
    return f"<pre class='mind-text'>{_escape(json.dumps(compact, indent=2))}</pre>"


def run_ui(case_label: str, search_query: str, hypothetical: str, speed: str, mind_layer: bool):
    request = TrialRequest(
        case_id=CASE_OPTIONS.get(case_label, "socrates"),
        search_query=search_query or "",
        hypothetical=hypothetical or "",
        speed=speed or "swift",
        mind_layer=bool(mind_layer),
    )
    events: list[TrialEvent] = []
    yield (
        render_court(events, started=True),
        render_evidence(events),
        render_jurors(events),
        render_mind(events, mind_layer),
        "The docket closes and the bailiff calls the room to order.",
    )
    try:
        for event in get_events(request):
            events.append(event)
            status = f"Step {len(events)}: {event.title}"
            yield (
                render_court(events, started=True),
                render_evidence(events),
                render_jurors(events),
                render_mind(events, mind_layer),
                status,
            )
    except Exception as exc:
        yield (
            render_court(events, started=True),
            render_evidence(events),
            render_jurors(events),
            render_mind(events, mind_layer),
            f"Model response required. Trial stopped: {exc}",
        )
        return
    yield (
        render_court(events, started=True),
        render_evidence(events),
        render_jurors(events),
        render_mind(events, mind_layer),
        "Verdict sealed.",
    )


def build_app() -> gr.Blocks:
    with gr.Blocks(title="Judge-GPT") as demo:
        with gr.Group(elem_classes=["docket-book-controls"]):
            gr.HTML("<div class='book-control-heading'>DATA TRIAL:</div>")
            with gr.Row():
                case = gr.Dropdown(
                    label="Case entry",
                    choices=list(CASE_OPTIONS.keys()),
                    value="Trial of Socrates",
                    scale=2,
                )
                start = gr.Button("Begin Trial", variant="primary", scale=1)
            status = gr.Markdown("Ready.", elem_classes=["book-status"])
        courtroom = gr.HTML(render_court([]), label="Live courtroom")
        search = gr.State("")
        speed = gr.State("swift")
        mind = gr.State(True)
        with gr.Accordion("Advanced trial options", open=False, elem_classes=["trial-options"]):
            with gr.Row():
                hypo = gr.Textbox(label="Hypothetical sidebar", lines=1)
        with gr.Row(elem_classes=["drawer-shell"]):
            with gr.Column(scale=1):
                with gr.Tab("Evidence Drawer"):
                    evidence = gr.HTML(render_evidence([]))
                with gr.Tab("Juror Panel"):
                    jurors = gr.HTML(render_jurors([]))
                mind_html = gr.HTML(render_mind([], True), visible=False)
        start.click(
            run_ui,
            inputs=[case, search, hypo, speed, mind],
            outputs=[courtroom, evidence, jurors, mind_html, status],
            js=START_JS,
        )
    return demo


demo = build_app()

if __name__ == "__main__":
    demo.queue().launch(
        show_error=True,
        allowed_paths=["assets"],
        css=CSS,
        head=APP_HEAD,
        theme=gr.themes.Soft(),
    )