Spaces:

build-small-hackathon
/

sozai

Paused

File size: 471,489 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sozai · Add to Album</title>
  <link rel="icon" type="image/svg+xml" href="/assets/icon.svg" />

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Caveat:wght@400;600&family=Martian+Mono:wght@300;400&display=swap" rel="stylesheet" />
  <style>
    /* size-adjust normalizes the small apparent size of these custom fonts so
       they don't look tiny next to Martian Mono at the same font-size. Tunable. */
    @font-face { font-family: 'AdvercaseBold'; src: url('/assets/fonts/AdvercaseBold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; size-adjust: 112%; }
    @font-face { font-family: 'AdvercaseRegular'; src: url('/assets/fonts/AdvercaseRegular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 112%; }
    @font-face { font-family: 'Inkwell'; src: url('/assets/fonts/Inkwell.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 135%; }
  </style>

  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

  <!-- Design tokens ported verbatim from app/globals.css -->
  <style type="text/tailwindcss">
    @custom-variant dark (&:is(.dark *));
    @theme inline {
      --font-display: 'AdvercaseBold', sans-serif;
      --font-hand: 'Inkwell', 'Caveat', cursive;
      --font-serif: 'EB Garamond', serif;
      --font-sans: 'Martian Mono', monospace;
      --font-mono: 'Martian Mono', monospace;
      --color-sidebar-ring: var(--sidebar-ring);
      --color-sidebar-border: var(--sidebar-border);
      --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
      --color-sidebar-accent: var(--sidebar-accent);
      --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
      --color-sidebar-primary: var(--sidebar-primary);
      --color-sidebar-foreground: var(--sidebar-foreground);
      --color-sidebar: var(--sidebar);
      --color-chart-5: var(--chart-5);
      --color-chart-4: var(--chart-4);
      --color-chart-3: var(--chart-3);
      --color-chart-2: var(--chart-2);
      --color-chart-1: var(--chart-1);
      --color-ring: var(--ring);
      --color-input: var(--input);
      --color-border: var(--border);
      --color-destructive: var(--destructive);
      --color-accent-foreground: var(--accent-foreground);
      --color-accent: var(--accent);
      --color-muted-foreground: var(--muted-foreground);
      --color-muted: var(--muted);
      --color-secondary-foreground: var(--secondary-foreground);
      --color-secondary: var(--secondary);
      --color-primary-foreground: var(--primary-foreground);
      --color-primary: var(--primary);
      --color-popover-foreground: var(--popover-foreground);
      --color-popover: var(--popover);
      --color-card-foreground: var(--card-foreground);
      --color-card: var(--card);
      --color-foreground: var(--foreground);
      --color-background: var(--background);
      --radius-sm: calc(var(--radius) * 0.6);
      --radius-md: calc(var(--radius) * 0.8);
      --radius-lg: var(--radius);
      --radius-xl: calc(var(--radius) * 1.4);
      --radius-2xl: calc(var(--radius) * 1.8);
      --radius-3xl: calc(var(--radius) * 2.2);
      --radius-4xl: calc(var(--radius) * 2.6);
    }
    :root {
      --background: oklch(0.968 0.010 88);
      --foreground: oklch(0.21 0.030 200);
      --card: oklch(0.982 0.007 88);
      --card-foreground: oklch(0.21 0.030 200);
      --popover: oklch(0.982 0.007 88);
      --popover-foreground: oklch(0.21 0.030 200);
      --primary: oklch(0.34 0.10 235);
      --primary-foreground: oklch(0.97 0.008 88);
      --secondary: oklch(0.93 0.010 88);
      --secondary-foreground: oklch(0.30 0.040 210);
      --muted: oklch(0.93 0.010 88);
      --muted-foreground: oklch(0.53 0.025 210);
      --accent: oklch(0.92 0.015 200);
      --accent-foreground: oklch(0.30 0.040 210);
      --destructive: oklch(0.577 0.245 27.325);
      --border: oklch(0.86 0.016 210);
      --input: oklch(0.90 0.012 200);
      --ring: oklch(0.34 0.10 235);
      --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0);
      --chart-4: oklch(0.371 0 0); --chart-5: oklch(0.269 0 0);
      --radius: 0.625rem;
      --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0);
      --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0);
      --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0);
      --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0);
    }
    .dark {
      --background: oklch(0.10 0.022 235); --foreground: oklch(0.96 0.006 88);
      --card: oklch(0.14 0.020 235); --card-foreground: oklch(0.96 0.006 88);
      --popover: oklch(0.14 0.020 235); --popover-foreground: oklch(0.96 0.006 88);
      --primary: oklch(0.72 0.08 235); --primary-foreground: oklch(0.10 0.022 235);
      --secondary: oklch(0.18 0.018 235); --secondary-foreground: oklch(0.96 0.006 88);
      --muted: oklch(0.18 0.018 235); --muted-foreground: oklch(0.58 0.018 235);
      --accent: oklch(0.20 0.022 235); --accent-foreground: oklch(0.96 0.006 88);
      --destructive: oklch(0.704 0.191 22.216);
      --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.72 0.08 235);
    }
    @layer base {
      * { @apply border-border outline-ring/50; }
      body { @apply bg-background text-foreground; }
      html { @apply font-sans; }
    }
  </style>

  <!-- Accessibility settings: applied as classes on <html> by the app. -->
  <style>
    html.a11y-large-text { font-size: 125%; }
    html.a11y-dyslexia, html.a11y-dyslexia body {
      font-family: "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif !important;
      letter-spacing: 0.02em;
      word-spacing: 0.08em;
    }
    html.a11y-underline-links a { text-decoration: underline; text-underline-offset: 2px; }
    html.a11y-high-contrast {
      --background: oklch(1 0 0);
      --foreground: oklch(0.12 0 0);
      --card: oklch(1 0 0);
      --card-foreground: oklch(0.12 0 0);
      --muted-foreground: oklch(0.22 0 0);
      --primary: oklch(0.32 0.18 268);
      --primary-foreground: oklch(1 0 0);
      --border: oklch(0.2 0 0);
      --accent: oklch(0.9 0.02 268);
      --accent-foreground: oklch(0.12 0 0);
      --ring: oklch(0.2 0 0);
    }
    html.a11y-high-contrast.dark {
      --background: oklch(0.08 0 0);
      --foreground: oklch(1 0 0);
      --card: oklch(0.12 0 0);
      --card-foreground: oklch(1 0 0);
      --muted-foreground: oklch(0.85 0 0);
      --border: oklch(0.9 0 0);
    }
    html.a11y-reduce-motion *,
    html.a11y-reduce-motion *::before,
    html.a11y-reduce-motion *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    @keyframes sozai-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
    @keyframes sozai-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-5px); opacity: 1; } }
    /* polaroid slide-in when browsing photos (item: moving/reveal effect) */
    /* springy: overshoot, counter-settle, then rest — gives the browse weight */
    @keyframes sozai-slide-in-right {
      0%   { transform: translateX(54%) rotate(6deg) scale(0.95); opacity: 0; }
      55%  { transform: translateX(-5%) rotate(-2.2deg) scale(1.025); opacity: 1; }
      78%  { transform: translateX(2%) rotate(1deg) scale(0.995); }
      100% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
    }
    @keyframes sozai-slide-in-left {
      0%   { transform: translateX(-54%) rotate(-6deg) scale(0.95); opacity: 0; }
      55%  { transform: translateX(5%) rotate(2.2deg) scale(1.025); opacity: 1; }
      78%  { transform: translateX(-2%) rotate(-1deg) scale(0.995); }
      100% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
    }
    .sozai-slide-right { animation: sozai-slide-in-right 0.55s cubic-bezier(0.34, 1.42, 0.5, 1); }
    .sozai-slide-left  { animation: sozai-slide-in-left 0.55s cubic-bezier(0.34, 1.42, 0.5, 1); }
    /* gentle sway on the browse arrows, nudging toward the flick direction */
    @keyframes sozai-sway-l { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-3px)} }
    @keyframes sozai-sway-r { 0%,100%{transform:translateX(0)} 50%{transform:translateX(3px)} }
    .sozai-sway-l { animation: sozai-sway-l 1.9s ease-in-out infinite; }
    .sozai-sway-r { animation: sozai-sway-r 1.9s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) { .sozai-sway-l, .sozai-sway-r { animation: none; } }
    /* (reduced motion is handled globally by the html.a11y-reduce-motion rule above) */

    /* polaroid teardown when the user removes it (presses ×) - it crumples,
       tilts, desaturates and drops away as if tossed out */
    @keyframes sozai-destroy {
      0%   { transform: scale(1) rotate(0deg) translateY(0); opacity: 1; filter: none; }
      25%  { transform: scale(1.06) rotate(-3deg) translateY(-6px); opacity: 1; }
      55%  { transform: scale(0.84) rotate(8deg) translateY(8px); opacity: 0.85; filter: grayscale(0.4) blur(0.4px); }
      100% { transform: scale(0.35) rotate(22deg) translateY(120px); opacity: 0; filter: grayscale(1) blur(2px); }
    }
    .sozai-destroy { animation: sozai-destroy 0.5s cubic-bezier(0.55, 0, 0.85, 0.3) forwards;
                     transform-origin: 50% 60%; pointer-events: none; }
    /* a quick "torn" diagonal flash overlaid while it crumples */
    @keyframes sozai-tear-flash { 0% { opacity: 0; } 30% { opacity: 0.9; } 100% { opacity: 0; } }
    .sozai-tear { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
                  background: linear-gradient(115deg, transparent 44%, rgba(255,255,255,0.85) 49%, rgba(0,0,0,0.18) 51%, transparent 56%);
                  animation: sozai-tear-flash 0.5s ease-out forwards; }

    /* Annotated activity pins for the open-source watercolor map */
    .sozai-pin { display: flex; flex-direction: column; align-items: center; transform: translateY(-2px); cursor: default; }
    .sozai-pin-bubble {
      display: inline-flex; align-items: center; gap: 6px;
      max-width: 220px; padding: 4px 9px;
      background: rgba(255,255,255,0.92);
      border: 2px solid var(--primary, #7c3aed);
      border-radius: 9px;
      font: 600 12px/1.2 ui-sans-serif, system-ui, sans-serif;
      color: #333; box-shadow: 0 2px 6px rgba(0,0,0,0.18);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .sozai-pin-emoji { font-size: 15px; }
    .sozai-pin-text { overflow: hidden; text-overflow: ellipsis; }
    .sozai-pin-stem {
      width: 2px; height: 12px;
      background: var(--primary, #7c3aed);
      border-radius: 2px;
    }
    .maplibregl-ctrl-attrib { font-size: 10px; }

    /* ---- "Develop" scrapbook variant (ported from the london scroll) ---- */
    .dv-paper { background: var(--background); position: relative; overflow: hidden;
      box-shadow: inset 0 16px 22px -20px rgba(60,55,40,.22); }
    .dv-paper::before { content:""; position:absolute; inset:0; pointer-events:none;
      background: linear-gradient(100deg, rgba(233,196,138,.18) 0%, rgba(244,233,206,.10) 22%,
        rgba(173,205,222,.16) 48%, rgba(196,214,224,.10) 64%, rgba(224,186,160,.14) 82%, rgba(168,142,176,.18) 100%); }
    .dv-paper::after { content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply; pointer-events:none;
      background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.43 0 0 0 0 0.38 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E"); }
    .dv-slot { position:absolute; border:1px solid oklch(0.21 0.030 200 / 0.14); border-radius:5px; z-index:1;
      transition: border-color .25s, background .25s; }
    .dv-slot.target { border-color: oklch(0.21 0.030 200 / 0.40); background: oklch(0.21 0.030 200 / 0.025); }
    .dv-slot.filled { border-color: transparent; }
    .dv-dim { position:absolute; inset:0; background: oklch(0.21 0.030 200 / 0.16); opacity:0; pointer-events:none; z-index:50; }
    .dv-piece { position:absolute; touch-action:none; user-select:none; -webkit-user-select:none;
      pointer-events:auto;
      background:#fff; padding: var(--pad,10px) var(--pad,10px) 0; perspective:1200px;
      filter: drop-shadow(0 3px 5px rgba(60,50,35,.15)) drop-shadow(0 12px 22px rgba(60,50,35,.13));
      transition: filter .35s cubic-bezier(0.16,1,0.3,1); will-change: left, top, width, transform; }
    .dv-flip { position:relative; transform-style:preserve-3d; transition: transform .7s cubic-bezier(0.16,1,0.3,1); }
    .dv-piece.flipped .dv-flip { transform: rotateY(180deg); }
    .dv-front { backface-visibility:hidden; -webkit-backface-visibility:hidden; }
    .dv-back { position:absolute; inset:0; transform: rotateY(180deg); backface-visibility:hidden; -webkit-backface-visibility:hidden;
      background:#fff; display:flex; flex-direction:column; gap:.3em; padding: calc(var(--pad,10px)*1.1) calc(var(--pad,10px)*1.2); }
    .dv-bhead { font-size: clamp(11px,.95vw,15px); letter-spacing:.04em; color:var(--foreground); font-family:'EB Garamond',Georgia,serif; font-weight:500; }
    .dv-blabel { display:flex; flex-direction:column; gap:.1em; font-size: clamp(8px,.7vw,10px); letter-spacing:.08em;
      text-transform:uppercase; color:var(--muted-foreground); font-family:'Martian Mono',monospace; }
    .dv-btime, .dv-bloc { width:100%; border:none; border-bottom:1px solid oklch(0.21 0.030 200 / 0.25); outline:none; background:transparent;
      font-family:'Inkwell','Caveat',cursive; font-size: clamp(13px,1.1vw,17px); color:var(--foreground); padding:.05em 0; }
    .dv-btime:focus, .dv-bloc:focus { border-bottom-color:var(--ring); }
    .dv-btime::placeholder, .dv-bloc::placeholder { color:oklch(0.70 0.015 210); }
    .dv-bwrite { flex:1; width:100%; border:none; outline:none; resize:none; background:transparent;
      font-family:'Inkwell','Caveat',cursive; font-size: clamp(14px,1.15vw,18px); color:var(--foreground); line-height:1.25; margin-top:.2em; }
    .dv-bwrite::placeholder { color:oklch(0.70 0.015 210); }
    .dv-frame { border:1.5px solid; line-height:0; }
    .dv-piece img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; pointer-events:none; -webkit-user-drag:none; }
    .dv-piece.dragging { filter: drop-shadow(0 6px 9px rgba(60,50,35,.2)) drop-shadow(0 26px 38px rgba(60,50,35,.22)); z-index:60 !important; cursor:grabbing; }
    .dv-desk .dv-piece { cursor:grab; }
    .dv-settled .dv-piece { cursor:pointer; }
    .dv-piece figcaption { padding: calc(var(--pad,10px)*.62) calc(var(--pad,10px)*.3) calc(var(--pad,10px)*.95);
      text-align:center; position:relative; white-space:nowrap; overflow:hidden; font-family:'EB Garamond',Georgia,serif; }
    .dv-cap { font-size: clamp(10px,.85vw,14px); letter-spacing:.035em; color:var(--foreground); }
    .dv-cap .when { font-family:'Inkwell','Caveat',cursive; font-size:1.22em; color:oklch(0.42 0.025 210); margin-left:.5em; }
    .dv-cap .where { font-family:'EB Garamond',serif; font-style:italic; color:var(--muted-foreground); }
    .dv-stroke { position:absolute; left:16%; bottom:8%; width:68%; height:7px; overflow:visible; opacity:0; }
    .dv-stroke path { fill:none; stroke-width:2.4; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100;
      transition: stroke-dashoffset .55s cubic-bezier(0.16,1,0.3,1); }
    .dv-settled .dv-piece { transition: transform .45s cubic-bezier(0.16,1,0.3,1), filter .45s cubic-bezier(0.16,1,0.3,1); }
    .dv-settled .dv-piece:hover, .dv-settled .dv-piece:focus-visible {
      transform: translateY(-7px) rotate(var(--rot)) !important; z-index:40;
      filter: drop-shadow(0 5px 8px rgba(60,50,35,.17)) drop-shadow(0 20px 30px rgba(60,50,35,.19)); }
    .dv-settled .dv-piece:hover .dv-stroke, .dv-settled .dv-piece:focus-visible .dv-stroke { opacity:1; }
    .dv-settled .dv-piece:hover .dv-stroke path, .dv-settled .dv-piece:focus-visible .dv-stroke path { stroke-dashoffset:0; }
    .dv-settled .dv-piece.flipped { z-index:45; }
    .dv-link { font-family:'Inkwell','Caveat',cursive; font-size: clamp(16px,1.4vw,21px); color:var(--foreground);
      border-bottom:1.6px solid transparent; transition: border-color .2s; }
    .dv-link:hover { border-bottom-color:var(--foreground); }
    .dv-go { font-family:'Inkwell','Caveat',cursive; font-size: clamp(16px,1.4vw,21px);
      background:var(--foreground); color:var(--primary-foreground); padding:.25em 1em; border-radius:999px; transition: opacity .3s, background .25s; }
    .dv-go:hover { background:oklch(0.15 0.025 200); }
    .dv-go:disabled { opacity:.3; cursor:default; }

    /* ---- Polaroid photo pins on the watercolor map ---- */
    .sozai-polaroid { background:#fff; padding:5px 5px 0; border-radius:2px;
      box-shadow: 0 2px 5px rgba(0,0,0,.25), 0 10px 20px rgba(0,0,0,.18);
      transform: rotate(var(--rot,-3deg)) scale(var(--scale,1)); transform-origin:bottom center;
      transition: transform .2s; cursor:grab; }
    .sozai-polaroid-wrap.is-dragging .sozai-polaroid { cursor:grabbing; }
    .sozai-polaroid:hover { z-index:50; }
    .sozai-polaroid img { display:block; width:104px; height:104px; object-fit:cover; }
    .sozai-polaroid .cap { font-family:'Martian Mono',monospace; font-size:9px; line-height:1.25; color:var(--foreground);
      text-align:center; padding:4px 3px 5px; max-width:88px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .sozai-polaroid .pdel { position:absolute; top:-8px; right:-8px; width:18px; height:18px; border-radius:50%;
      background:#fff; border:1.5px solid var(--primary,#7c3aed); color:var(--primary,#7c3aed);
      font-size:11px; line-height:1; display:none; align-items:center; justify-content:center; cursor:pointer; z-index:3; }
    /* rotate / scale controls, shown on hover */
    .sozai-polaroid-wrap .pctl { position:absolute; width:18px; height:18px; border-radius:50%;
      background:#fff; border:1.5px solid var(--primary,#7c3aed); color:var(--primary,#7c3aed);
      font-size:12px; line-height:1; display:none; align-items:center; justify-content:center; cursor:pointer; z-index:3; }
    .sozai-polaroid-wrap .prot-l { top:-8px; left:-8px; }
    .sozai-polaroid-wrap .prot-r { top:-8px; left:14px; }
    .sozai-polaroid-wrap .pbig  { bottom:-8px; right:-8px; }
    .sozai-polaroid-wrap .psmall{ bottom:-8px; right:14px; }
    .sozai-polaroid-wrap { position:relative; }
    .sozai-polaroid-wrap:hover .pdel,
    .sozai-polaroid-wrap:hover .pctl { display:flex; }
    .sozai-polaroid .sozai-pin-when { display:block; font-family:'Martian Mono',monospace; font-size:8px;
      letter-spacing:.04em; text-transform:uppercase; color:var(--muted-foreground); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    /* active stop during a flythrough */
    .sozai-polaroid-wrap.is-active { z-index:60; }
    .sozai-polaroid-wrap.is-active .sozai-polaroid { transform: rotate(0deg) scale(calc(var(--scale,1) * 1.18));
      box-shadow: 0 0 0 3px var(--primary,#7c3aed), 0 12px 28px rgba(0,0,0,.3); }
    /* moving transport marker during the journey */
    .sozai-transport { font-size:26px; line-height:1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35));
      transform: rotate(var(--heading,0deg)); transition: transform .15s linear; will-change: transform; }
    /* drop hint when dragging a photo from the tray over the map */
    .sozai-map-dropzone.drop-armed::after { content:"Drop to pin here"; position:absolute; inset:0;
      display:flex; align-items:center; justify-content:center; z-index:9;
      background:rgba(124,58,237,.10); border:3px dashed var(--primary,#7c3aed); border-radius:.5rem;
      font-family:'Martian Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--primary,#7c3aed); pointer-events:none; }

    /* ---- print: turn the current album view into a clean keepsake -------- */
    /* Cmd/Ctrl-P drops the interactive chrome, flattens to white, prints photos
       in true colour, and keeps each photo+caption from splitting across pages.
       Add class "no-print" to hide an element, "print-keep" to force-show a
       button. */
    @media print {
      @page { margin: 12mm; }
      *, *::before, *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        box-shadow: none !important;
        text-shadow: none !important;
      }
      html, body { background: #fff !important; }
      /* hide interactive / non-content chrome */
      nav, video, audio,
      [role="dialog"], [role="toolbar"], [role="tablist"],
      .no-print { display: none !important; }
      button:not(.print-keep) { display: none !important; }
      /* keep photos, polaroids and cards whole across page breaks */
      figure, img, .sozai-polaroid, .sozai-polaroid-wrap, .dv-piece, .sozai-pin {
        break-inside: avoid; page-break-inside: avoid;
      }
      img { max-width: 100% !important; height: auto !important; }
      /* let content use the full page width once chrome is gone */
      .max-w-6xl, .max-w-5xl, .max-w-4xl { max-width: none !important; }
    }
  </style>

  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js" crossorigin></script>
  <!-- exifr: lightweight EXIF parser for GPS + date metadata from uploaded photos -->
  <script src="https://cdn.jsdelivr.net/npm/exifr/dist/lite.umd.js" crossorigin></script>
  <!-- heic2any: decode iPhone HEIC/HEIF uploads to JPEG so they render in-browser -->
  <script src="https://cdn.jsdelivr.net/npm/heic2any@0.0.4/dist/heic2any.min.js" crossorigin></script>

  <!-- MapLibre GL JS: free, open-source map renderer (no API key). Powers the
       watercolor map (real ArcGIS Watercolor.stylx palette on free OpenFreeMap
       tiles) plus OSM/CARTO basemaps. Geocoding via OpenStreetMap Nominatim.

       Loading strategy (most robust first):
       1. The server (app.py) INLINES the cached MapLibre CSS+JS in place of the
          MAPLIBRE_INLINE marker below - no extra request, no MIME/route issues.
       2. If the page is opened standalone (marker not replaced), a multi-CDN
          loader fetches MapLibre and sets window.maplibregl. -->
  <!--MAPLIBRE_INLINE-->
  <script>
    (function () {
      // If the server already inlined MapLibre, the global exists - skip CDNs.
      if (window.maplibregl) { console.log("[maplibre] using inlined build"); return; }

      // Otherwise (standalone file), pull CSS + JS from CDNs with fallbacks.
      var css = document.createElement("link");
      css.rel = "stylesheet";
      var cssSources = [
        "https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css",
        "https://cdn.jsdelivr.net/npm/maplibre-gl@4.7.1/dist/maplibre-gl.css",
        "https://cdnjs.cloudflare.com/ajax/libs/maplibre-gl/4.7.1/maplibre-gl.css"
      ];
      var ci = 0;
      css.href = cssSources[ci];
      css.onerror = function () { if (++ci < cssSources.length) css.href = cssSources[ci]; };
      document.head.appendChild(css);

      var jsSources = [
        "/vendor/maplibre-gl.js",
        "https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js",
        "https://cdn.jsdelivr.net/npm/maplibre-gl@4.7.1/dist/maplibre-gl.js",
        "https://cdnjs.cloudflare.com/ajax/libs/maplibre-gl/4.7.1/maplibre-gl.js"
      ];
      function loadJS(i) {
        if (i >= jsSources.length) { console.error("[maplibre] all sources failed to load"); return; }
        var s = document.createElement("script");
        s.src = jsSources[i];
        s.async = false;
        s.onload = function () {
          if (window.maplibregl) console.log("[maplibre] loaded from", jsSources[i]);
          else { console.warn("[maplibre] loaded but no global from", jsSources[i]); loadJS(i + 1); }
        };
        s.onerror = function () { console.warn("[maplibre] failed to load", jsSources[i]); loadJS(i + 1); };
        document.head.appendChild(s);
      }
      loadJS(0);
    })();
  </script>

  <!-- ----------------------------------------------------------------- -->
  <!-- Collaboration transport (plain JS): SSE (inbound) + POST (outbound)   -->
  <!-- over /api/rooms/{id}/stream and /send. No-ops cleanly in solo.        -->
  <!-- ----------------------------------------------------------------- -->
  <script>
    window.Collab = (function () {
      // Transport: Server-Sent Events (inbound) + POST (outbound). HF Spaces'
      // proxy drops custom WebSocket upgrades, so we use the same SSE+POST
      // channel Gradio itself uses on Spaces. EventSource auto-reconnects on
      // its own, so there's no manual reconnect loop here.
      let es = null, me = null, participants = [];
      const listeners = {};

      function roomId() {
        const m = location.pathname.match(/^\/room\/([^\/?#]+)/);
        return m ? decodeURIComponent(m[1]) : null;
      }
      function sid() {
        let s = localStorage.getItem("sozai_session");
        if (!s) { s = (crypto.randomUUID ? crypto.randomUUID() : String(Math.random()).slice(2)); localStorage.setItem("sozai_session", s); }
        return s;
      }
      function name() { return localStorage.getItem("sozai_name") || ""; }
      function on(type, fn) {
        (listeners[type] = listeners[type] || []).push(fn);
        return () => { listeners[type] = (listeners[type] || []).filter((f) => f !== fn); };
      }
      function emit(type, d) { (listeners[type] || []).forEach((fn) => { try { fn(d); } catch (e) {} }); }
      function send(type, payload) {
        const id = roomId();
        if (!id) return;
        const event = Object.assign({ type }, payload || {});
        try {
          fetch(`/api/rooms/${encodeURIComponent(id)}/send`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            // keepalive lets the final send (e.g. on tab close) still go out
            keepalive: type === "rename",
            body: JSON.stringify({ session_id: sid(), event }),
          }).catch(() => {});
        } catch (e) {}
      }
      function connect() {
        const id = roomId();
        if (!id) { emit("status", { connected: false, solo: true }); return; }
        try { if (es) es.close(); } catch (_) {}
        const url = `/api/rooms/${encodeURIComponent(id)}/stream?session_id=${encodeURIComponent(sid())}&name=${encodeURIComponent(name() || "Guest")}`;
        try { es = new EventSource(url); } catch (e) { return; }
        es.onopen = () => emit("status", { connected: true, solo: false });
        es.onmessage = (e) => {
          let m; try { m = JSON.parse(e.data); } catch (_) { return; }
          if (m.type === "init") { me = m.you; participants = m.participants || []; emit("me", me); emit("presence", participants); }
          else if (m.type === "presence_update") { participants = m.participants || []; emit("presence", participants); }
          emit(m.type, m); emit("any", m);
        };
        // EventSource fires onerror on transient drops and reconnects itself;
        // we just surface the status. A closed (readyState 2) stream means the
        // server ended it (e.g. join_declined) - don't fight it.
        es.onerror = () => {
          emit("status", { connected: false, solo: false });
        };
      }
      function rename(n) { localStorage.setItem("sozai_name", n); if (me) me.name = n; send("rename", { name: n }); }

      // Broadcast a brief "I just interacted with X" ping so collaborators can
      // SEE what each other is touching (a label that floats near their cursor).
      let _lastPt = { x: 0.5, y: 0.5 };
      if (typeof window !== "undefined") {
        window.addEventListener("pointermove", (e) => { _lastPt = { x: e.clientX / window.innerWidth, y: e.clientY / window.innerHeight }; }, { passive: true });
      }
      function ping(label) { send("interaction", { label: String(label).slice(0, 40), x: _lastPt.x, y: _lastPt.y }); }

      return {
        connect, send, on, rename, roomId, ping,
        sessionId: sid,
        getMe: () => me, getParticipants: () => participants, isCollab: () => !!roomId(),
      };
    })();
    if (typeof window !== "undefined") window.sozaiPing = (label) => { try { Collab.ping(label); } catch (e) {} };

    // ----------------------------------------------------------------- //
    // Automatic "what are you doing" presence. So collaborators can SEE     //
    // each other press buttons, focus fields, and type - not just move the  //
    // cursor - we emit a throttled interaction ping on these DOM events     //
    // app-wide (capture phase, so it works regardless of React handlers).   //
    // Accessibility settings live in localStorage per-user and are never    //
    // broadcast, so each person keeps their own a11y prefs while everything //
    // else stays in sync.                                                   //
    // ----------------------------------------------------------------- //
    if (typeof window !== "undefined") {
      let _lastPing = 0;
      const _throttledPing = (label) => {
        const now = Date.now();
        if (now - _lastPing < 350) return;   // don't flood on rapid keystrokes
        _lastPing = now;
        try { Collab.ping(label); } catch (e) {}
      };
      const _labelFor = (el) => {
        if (!el) return "";
        return (
          el.getAttribute("aria-label") ||
          el.getAttribute("title") ||
          el.getAttribute("placeholder") ||
          (el.textContent || "").trim() ||
          el.name || ""
        ).replace(/\s+/g, " ").trim().slice(0, 24);
      };
      // button / link presses
      document.addEventListener("pointerdown", (e) => {
        if (!Collab.isCollab()) return;
        const btn = e.target && e.target.closest && e.target.closest("button, [role='button'], a");
        if (!btn) return;
        const lbl = _labelFor(btn);
        _throttledPing(lbl ? "🔘 " + lbl : "🔘 clicked");
      }, true);
      // focusing an input / textarea / contenteditable
      document.addEventListener("focusin", (e) => {
        if (!Collab.isCollab()) return;
        const f = e.target;
        if (!f) return;
        const tag = (f.tagName || "").toLowerCase();
        const editable = f.isContentEditable;
        if (tag !== "input" && tag !== "textarea" && tag !== "select" && !editable) return;
        const lbl = _labelFor(f);
        _throttledPing(lbl ? "✏️ " + lbl : "✏️ typing");
      }, true);
      // live typing into a field
      document.addEventListener("input", (e) => {
        if (!Collab.isCollab()) return;
        const f = e.target;
        if (!f) return;
        const tag = (f.tagName || "").toLowerCase();
        if (tag !== "input" && tag !== "textarea" && !f.isContentEditable) return;
        const lbl = _labelFor(f);
        _throttledPing(lbl ? "✏️ " + lbl : "✏️ typing");
      }, true);
    }

    // ----------------------------------------------------------------- //
    // Chime - in-browser notification sounds.                              //
    //                                                                      //
    // The `chime` Python library plays .wav files via the OS (afplay/aplay //
    // /winsound), which only makes sound on the machine running Python - no //
    // use in a web app where each PARTICIPANT needs to hear it in their own //
    // browser. So we keep chime's idea (named, themed cues) but synthesize  //
    // them with the Web Audio API. Themes are short note sequences; the     //
    // user picks one (and can mute) in Settings.                            //
    // ----------------------------------------------------------------- //
    window.SozaiChime = (function () {
      let ctx = null;
      function ac() {
        if (!ctx) {
          try { ctx = new (window.AudioContext || window.webkitAudioContext)(); }
          catch (e) { ctx = null; }
        }
        // browsers suspend audio until a user gesture; resume opportunistically
        if (ctx && ctx.state === "suspended") { try { ctx.resume(); } catch (e) {} }
        return ctx;
      }
      // each theme maps an event -> array of [freqHz, startSec, durSec]
      const THEMES = {
        chime:   { message: [[660,0,0.12],[880,0.10,0.16]], join: [[523,0,0.1],[784,0.09,0.18]], leave: [[784,0,0.1],[523,0.09,0.18]], alert: [[880,0,0.1],[880,0.16,0.12]] },
        soft:    { message: [[523,0,0.16]], join: [[587,0,0.14],[740,0.12,0.18]], leave: [[494,0,0.18]], alert: [[660,0,0.12],[660,0.18,0.12]] },
        bright:  { message: [[784,0,0.09],[1047,0.08,0.13]], join: [[659,0,0.08],[988,0.07,0.16]], leave: [[988,0,0.08],[659,0.07,0.16]], alert: [[1175,0,0.09],[1175,0.14,0.1]] },
        retro:   { message: [[330,0,0.08],[494,0.07,0.08],[659,0.14,0.12]], join: [[262,0,0.08],[392,0.07,0.08],[523,0.14,0.14]], leave: [[523,0,0.08],[392,0.07,0.08],[262,0.14,0.14]], alert: [[440,0,0.08],[440,0.12,0.08]] },
      };
      function playSeq(seq, vol) {
        const a = ac();
        if (!a || !seq) return;
        const t0 = a.currentTime;
        const g = a.createGain();
        g.gain.value = vol == null ? 0.2 : vol;
        g.connect(a.destination);
        seq.forEach(([freq, start, dur]) => {
          const osc = a.createOscillator();
          const eg = a.createGain();
          osc.type = "sine";
          osc.frequency.value = freq;
          // little attack/decay so it sounds like a chime, not a beep
          eg.gain.setValueAtTime(0.0001, t0 + start);
          eg.gain.exponentialRampToValueAtTime(1.0, t0 + start + 0.01);
          eg.gain.exponentialRampToValueAtTime(0.0001, t0 + start + dur);
          osc.connect(eg); eg.connect(g);
          osc.start(t0 + start);
          osc.stop(t0 + start + dur + 0.02);
        });
      }
      return {
        themes: () => Object.keys(THEMES),
        play(event, opts) {
          const o = opts || {};
          if (o.enabled === false) return;
          const theme = THEMES[o.theme] || THEMES.chime;
          playSeq(theme[event] || theme.message, o.volume);
        },
        // call once from a user gesture to unlock audio on iOS/Safari
        unlock() { const a = ac(); if (a && a.state === "suspended") { try { a.resume(); } catch (e) {} } },
      };
    })();
    // unlock audio on the first user interaction (browsers require a gesture)
    if (typeof window !== "undefined") {
      const _unlock = () => { try { window.SozaiChime.unlock(); } catch (e) {} window.removeEventListener("pointerdown", _unlock); window.removeEventListener("keydown", _unlock); };
      window.addEventListener("pointerdown", _unlock); window.addEventListener("keydown", _unlock);
    }
  </script>
</head>

<body class="font-sans antialiased bg-background">
  <div id="root"></div>

  <!-- gradio.Server backend via the official JS client (used by save_to_album) -->
  <script type="module">
    window.__gradioReady = (async () => {
      try {
        const { client } = await import("https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js");
        return await client(location.origin);
      } catch (e) { return null; }
    })();
  </script>

  <script type="text/babel" data-presets="react">
    const { useState, useEffect, useRef, useCallback, useMemo } = React;
    const Collab = window.Collab;

    // ----------------------------------------------------------------- //
    // Easter egg: "Neko" - the classic desktop cat that chases the cursor.
    // Sprite frames (32x32 GIFs) bundled from the historical neko archive,
    // embedded as data URIs so no extra asset requests are needed.
    // ----------------------------------------------------------------- //
    const NEKO_FRAMES = {1:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQJ2jI8oK+mvgJyUNpgE0LVLfWEOw5GiyG3WFJ4GyVhwi3r25mJl7qYVzfPdcLxXTMYoloafT07IBOqYrOJjZ81qDzDkQrtosj7SU8p3znZ/Jut5XFVDZUrSMFaOqKJOM7WTp/dH1DPYFzTHEvh0uDXS6JixGFlUAAAh/wtNQUNHQ29uIAQDEDEAAAABV3JpdHRlbiBieSBHSUZDb252ZXJ0ZXIgMi4zLjcgb2YgSmFuIDI5LCAxOTk0ADs=",2:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAIAAAACH5BAEAAAEALAAAAAAgACAAQQKcjI8oM5IPjQAD2ItxdTGtzIBcp2SAgE7ZSKqV9cLXy3YqFc75SZagvOr5agcVMTJhBGKg5UaYNEkpPChuB2OEjsipiQu5zYAYsMf0YlrM5wtLzBbKe6l6uY6Su9Ka7NpKRRYYGJekpXa1BRjD2FdFJ4j2p+clFVeEM6U4FyAWqHYpITnoNuf5+WVamapaJurKeUMkyylhllebC1EAACH/C01BQ0dDb24gBAMQMQAAAAFXcml0dGVuIGJ5IEdJRkNvbnZlcnRlciAyLjMuNyBvZiBKYW4gMjksIDE5OTQAOw==",3:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQJ8jI8nm+2/Ipi0TtGE3VdT5nhM5HXkg0JVyWKgwsVfusiWmOb6jrb1zEOUAMMVzSbDhJAxpYrZudBE0Zvm1XMmSMag9/skicGGIfX0Na8+Wl2xmZOsk0foqr21d596IJ/JEvfW5Pdn84OXRyRmdeUmFSBWFEEWMlaJmalTAAAh/wtNQUNHQ29uIAQDEDEAAAABV3JpdHRlbiBieSBHSUZDb252ZXJ0ZXIgMi4zLjcgb2YgSmFuIDI5LCAxOTk0ADs=",4:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQKJjI+pyywAH5wxiCvSjbTT7Eyg5YnNiWBbhwHjghkSV37vzNavs5MuCgyqVEEF7tEyXYrIWmS2TNGcnp5MgnNaNVXqVvo7QInFULiMTqc3qwo627a9P6KPGlpSuRtYXTsKFsfRxPLVRyXyJeMypYOShXh2Asno+GgjaAeEBVbFJOmjeLenxlNqUAAAIf8LTUFDR0NvbiAEAxAxAAAAAVdyaXR0ZW4gYnkgR0lGQ29udmVydGVyIDIuMy43IG9mIEphbiAyOSwgMTk5NAA7",5:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQKGjI+pyyYAo5RCiRoefnPyDnBYcjnhhaLN6nwlS0YXGFLduMxn+dEQDgsKh8IeCMgy+mSt30Fkoik9jWnt99NlLaisUZVCMl4ZMvGMThNVaoSWIg5aKesl1R2KXW83Lc6VIWU3AhXoMwdlhgjn4pTTZziYUxgp8zXWtecVB8NWZtYWKjoqVAAAIf8LTUFDR0NvbiAEAxAxAAAAAVdyaXR0ZW4gYnkgR0lGQ29udmVydGVyIDIuMy43IG9mIEphbiAyOSwgMTk5NAA7",6:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/AAAAAAAACH5BAEAAAEALAAAAAAgACAAQQJ/jI+puwIvGBLuAdqs3rzHg0kNRUFf9YlSqFQdFLgbasim/V6pyvf+D7LsejSGjZQozWCTXI4kS+GETlYTioxhsRor8AsOi1te8BA19DnSMeHPxa4J421PxiP1MINOXf/S9CeYJ/gCBTLlV8WGtjWlZJJ0yLM1NzZxUna5yclZAAAh/wtNQUNHQ29uIAQDEDEAAAABV3JpdHRlbiBieSBHSUZDb252ZXJ0ZXIgMi4zLjcgb2YgSmFuIDI5LCAxOTk0ADs=",7:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQKFjI+pyyECopzyvXMZpBt0X0VCY2zPZFlkSVXpqrVgKHtkh9cczPdY5ltZdKPgZ9YyOUSNI9KJanJ0smJMhPSkXrwT12ENisdkxVAELG9PuzGbGoZBq5Bi/YpKuir4PJYoNfU3qLRwhHOWoxW35Ec1w4hgQuPkJYf1sRYZaLKmllYWKupTAAAh/wtNQUNHQ29uIAQDEDEAAAABV3JpdHRlbiBieSBHSUZDb252ZXJ0ZXIgMi4zLjcgb2YgSmFuIDI5LCAxOTk0ADs=",8:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQKFjI+pyyEAoZhStmtorLsDgS2PNI0fiJRT5pWhYnqdtqqv03LfecNW5uoJU5rPYYQc4mQt0OoVa0ZUUyiTibohrz+lCaXKKsdkYfipnQG/3TRpyxtGr+LQnB4EirikaamdcHcys4HWECNY6PY21ehktUNYUWfXR2jYg3hW9nWUN/aJWdZQAAAh/wtNQUNHQ29uIAQDEDEAAAABV3JpdHRlbiBieSBHSUZDb252ZXJ0ZXIgMi4zLjcgb2YgSmFuIDI5LCAxOTk0ADs=",9:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQJ7jI8pku0tgJxUsgdtXZH2ixlcV1lciH5oSEak1qbm9AKtuuY6a+0sZ1r4RKUiLdeiKTU9zIJpXAofwKRHeRqOQMOul2j7UptiBVlc23TTRq5sufGsXh+pnAe16eHuzD7K1KfgAogleODylPdX9VbzeDY3QjNSZnmJiVIAACH/C01BQ0dDb24gBAMQMQAAAAFXcml0dGVuIGJ5IEdJRkNvbnZlcnRlciAyLjMuNyBvZiBKYW4gMjksIDE5OTQAOw==",10:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/AAAAAAAACH5BAEAAAEALAAAAAAgACAAQQKOjI8ip7kIYxCg2oufjCr322wSRWEWKY5guZSVlhos4L70GztndsL5hEsEfwwcSzb81UwZIpLZdJJ2Nptv1FpCG6GYa/l1Pl+KT1J6naRzpFawsxYdj0CauPYxn1NaqJ3Yt3VXxfMHWPWFKHWzg2fIFugBqOdXNkmF2aUEJjlIY1a2x3ZGJwakqfZoumpQAAAh/wtNQUNHQ29uIAQDEDEAAAABV3JpdHRlbiBieSBHSUZDb252ZXJ0ZXIgMi4zLjcgb2YgSmFuIDI5LCAxOTk0ADs=",11:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQKDjI+puyLnHJi0UtemuHVrCzxMEkWdJ46qUXpgirhvB4ZZbbn6yve+GvmRcCHMCBVA4WS225KTYzCJnw6wZeLshMlUqcgNi8fhbBHmm2LRq+mLDWluJNSL9KKbRZ21/OvmVxXyR0Ln9yWocTdYx2h3R0fjiNSzRkMpZMkIRxZE9gnKUAAAIf8LTUFDR0NvbiAEAxAxAAAAAVdyaXR0ZW4gYnkgR0lGQ29udmVydGVyIDIuMy43IG9mIEphbiAyOSwgMTk5NAA7",12:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQKHjI+pyywAXhQSxlWtjnu2Q1lUCAnf6ZCaGYwUOLaS2m0sElZzd6MuWEIJh8TP7mLQvVKyWq2XFI2kzqCj+hxmnlbtryUqisfkMsa1LB8nrC20QZqp3kbsSpGW0exv+XybhZfhBtiFYccRZgSmIzWolRgpYniSwzMzhkZD5xMTRVmU52lGulAAACH/C01BQ0dDb24gBAMQMQAAAAFXcml0dGVuIGJ5IEdJRkNvbnZlcnRlciAyLjMuNyBvZiBKYW4gMjksIDE5OTQAOw==",13:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAIAAAACH5BAEAAAEALAAAAAAgACAAQQKPjI+pqyINopzzQTDozLoagTGHMwzOCViOyH5gtLbBu9WdI1lzp2VlGTHJhsSicUjj6S6xJI+y/DyDTxVslvz1lKzTikTRYkxR4mlUPqrXbNm5jb6l3dMrAxR1Tuc0VJjHUab3d7Nj98LRkVho+IAoIUbFhTa4BQQl4oRDiBE0lylwCQnzZkSiUwqnusoqUgAAIf8LTUFDR0NvbiAEAxAxAAAAAVdyaXR0ZW4gYnkgR0lGQ29udmVydGVyIDIuMy43IG9mIEphbiAyOSwgMTk5NAA7",14:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAIAAAACH5BAEAAAEALAAAAAAgACAAQQKIjI+pyyIAgWPoQZFs3LxzXFnOSDVgdpYNNBjW4EmBFqdo3A16rvb+D6xcgrPI6dWZhGgyYUS3w9VKAmgMNr09dSPSoVuFtYjksvmcQc+U3yZRY4MD5c4kxWFUIO0uZr6OgyflVjRoOIQieOhhU4GFE5UURxNp1AUVNba21eUD9qXEpjZKWkpUAAAh/wtNQUNHQ29uIAQDEDEAAAABV3JpdHRlbiBieSBHSUZDb252ZXJ0ZXIgMi4zLjcgb2YgSmFuIDI5LCAxOTk0ADs=",15:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAIAAAACH5BAEAAAEALAAAAAAgACAAQQKNjI8ZMqKPBJi0ziYy3EvSMVji5HAHA4JV6mRk130yVZqQN+ZAbXqhvuLZhr1VikY85X6vpAEHFAk30GhlqvAxrdisRGUB/zQ2aIbsdaof57Zrt86oftvuDbetq6s5OxW4tYPG8WZ1NcTHVWY44rcwY+iIx9iwCACmiHiJeQFy1tTDKdj2BErltpaquloAACH/C01BQ0dDb24gBAMQMQAAAAFXcml0dGVuIGJ5IEdJRkNvbnZlcnRlciAyLjMuNyBvZiBKYW4gMjksIDE5OTQAOw==",16:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAIAAAACH5BAEAAAEALAAAAAAgACAAQQKSjI+pm+ISBJh0DgqZPrJ6egHOtnSfyIGKNLTfM5KReVpV9sgIXYWvzuhkdsMGLAckRnouH4rkADk/l6KOV+tNrBvsKRSTeUG/5BGzsyQb27UbSHOF3VHqlNvV2tDQrWO69yRm0gK4h1eCdbH4IgQ1RtUGl7VXtQZZg8hWY6i5eQJzMwmaBjDwZuCYdoqqihqkWQAAIf8LTUFDR0NvbiAEAxAxAAAAAVdyaXR0ZW4gYnkgR0lGQ29udmVydGVyIDIuMy43IG9mIEphbiAyOSwgMTk5NAA7",17:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAIAAAACH5BAEAAAEALAAAAAAgACAAQQKWjH8yAJKwHJrUCIazlrVeDTJcZwlfY37pmZLIt4TD6L7QEGN4VJfBGQI5TL2OquhhRFYQFK2m0GVyTxcwiKlad6Cd1ogNfX/THBaXGSdFyLYb3ORceO85V4dTJ2PmGNEdpTSVBahwV5anl4DWJKik+HIlBvkQ1gBouYEkGTZ2kWIWNnNEwZlJCPVHdllCCcf6ZuUaW1MAACH/C01BQ0dDb24gBAMQMQAAAAFXcml0dGVuIGJ5IEdJRkNvbnZlcnRlciAyLjMuNyBvZiBKYW4gMjksIDE5OTQAOw==",18:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAIAAAACH5BAEAAAEALAAAAAAgACAAQQKXjH8CA5KwHJrUKIhzlrVeDTbdJJRYaTboWY7kEsKi+w62ZjOc236x5mjREJfd0GPSoRSM2dHyaUKkAyPP93M+BTlQzsrLgsAPzE18hpA7n/XzDQ8wnXPtNiddfN2eZt5vR8NllkHFR8TVhbP3ljhFOHVIghUi1CgWGIZ5srXJOaKAkpdVVeThGXOIUsaxGmfx+comKRtXAAAh/wtNQUNHQ29uIAQDEDEAAAABV3JpdHRlbiBieSBHSUZDb252ZXJ0ZXIgMi4zLjcgb2YgSmFuIDI5LCAxOTk0ADs=",19:"data:image/gif;base64,R0lGODlhIAAgAKIAAP///wAA/QAAPAAAIAAAAAAAAAAAAAAAACH5BAEAAAEALAAAAAAgACAAQgOOGLrcvmO8OQe4+BJNiLNZqIXSFzERiG3cSb1PREqRR8linrmBqoeEEmxILA5BQmPDl+vYjMwVC/BcNqdAnvWXYWlRGByQ1UkqFam0+sxuvyxmNzqMih9/tSoxOqJ2znxUflRHaYJdWIQVXDondoF9O19bjFh2EJBZk2CMXZsLAmE0V04pboFll3KrrK0OCQAh/wtNQUNHQ29uIAQDEDEAAAABV3JpdHRlbiBieSBHSUZDb252ZXJ0ZXIgMi4zLjcgb2YgSmFuIDI5LCAxOTk0ADs=",20:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAIAAAACH5BAEAAAEALAAAAAAgACAAQQKNjI+pJ7L/BJh0jumaY7XT61HBpmgdCAxDA7WRRJGGXMLhfQ3jzae0CwwKIbDfcNbbGFs2C8oZCalwqCkg06uANFwZVwpSLYXd8viITiMkZ7StHWzGSPCE/IMZuXFzYDflYZVDlOU0FbZwp8Wj0njFUfjUKLaDoSilseZVqMVypDi54pl2KVanhpqqClEAACH/C01BQ0dDb24gBAMQMQAAAAFXcml0dGVuIGJ5IEdJRkNvbnZlcnRlciAyLjMuNyBvZiBKYW4gMjksIDE5OTQAOw==",21:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAIAAAACH5BAEAAAEALAAAAAAgACAAQQKQjI+pyykAo4SiHYHzk6NPnVnBM0wSJoobUKXMWpYcILOuAU91e49sxQPaeg4KUZWhhI4rk5P32sQitSpNmWo6jUSBrAbZMY0gH7T3AF58RwWq3cBEzvDisI7bcrv6D3pmAkbnlnMVdoi1oGV4CAa299I3NyZ5d1NINdn1+DioorSS5GmxoYZjBpc2sqaKB1cAACH/C01BQ0dDb24gBAMQMQAAAAFXcml0dGVuIGJ5IEdJRkNvbnZlcnRlciAyLjMuNyBvZiBKYW4gMjksIDE5OTQAOw==",22:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAIAAAACH5BAEAAAEALAAAAAAgACAAQQKQjI+pyykAo4SiGYHzk6NPnVnXNkEDUIkimapOdJ4cIKPuBU91ewdP1QL+epYNj3jQUEJIUul5dGxiOVNOhlE5n5RmtTqIam0gXxd58SXNYvTI3WDBFcZ5knsmbvFt+qxUY7NCIlNTGJG1sBdI9YW4gifRx7AH5WX1J6inozNJiYKBGKrZMxRkRnpjujZk51YAACH/C01BQ0dDb24gBAMQMQAAAAFXcml0dGVuIGJ5IEdJRkNvbnZlcnRlciAyLjMuNyBvZiBKYW4gMjksIDE5OTQAOw==",23:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQJ3jC9yy90pAIiySuWyo5Xbj2kI9FnQcqbeFIrPWsaJqyXxPdH6blAtP4KBgAGOTUYM3o7D3VGI5JFYMqMIgs0mt7TILzlDdLjFaRQ4hX5dXu+SuGJeWCd2GYdbv2DQi87TZ+JkhscyGFiiF5SFxKSH9UYmOUkJVAAAIf8LTUFDR0NvbiAEAxAxAAAAAVdyaXR0ZW4gYnkgR0lGQ29udmVydGVyIDIuMy43IG9mIEphbiAyOSwgMTk5NAA7",24:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQKAjC9yy90qAIiySuVyoLbzbmFGkiVJ9U2kI45hqz0TSL9xfNY6fPc3xfMhXDshIpVDGYmqWjKkMUmBOs/m8ss9Uabe9BtciqOT8U9p3hxpYdx1xhYnU2hjBEi/S70X1dYZZbJTFfYVUlV3N9IihchVx/JHmGUI0vYgGJe2ydmZVgAAIf8LTUFDR0NvbiAEAxAxAAAAAVdyaXR0ZW4gYnkgR0lGQ29udmVydGVyIDIuMy43IG9mIEphbiAyOSwgMTk5NAA7",25:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQJ4jI+pyykAoZhRtvtqFVdl+YUfwHXIUx6ouYRayLaaFQfTjU92zuv134EZhD/XJpKKoSgk0Ap4QkJVnNFrx7ohtxIkbwoOA5MqcSZ1Bo+qG6h1RqsZuaQxfEbO3qVqJslndhV4lxcEcuQV12A1x4jB6NS1QSRW+VMAACH/C01BQ0dDb24gBAMQMQAAAAFXcml0dGVuIGJ5IEdJRkNvbnZlcnRlciAyLjMuNyBvZiBKYW4gMjksIDE5OTQAOw==",26:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQJ9jI+pyykAoZhRtvtkttdVKkUg1x2P4KGlMmWuOK3L9slGi+NBzrf2X9qodiIgUQQ41X6019J4K0J3KFolSV21kKFukjcNi2VDRNnoMpGAzeOa/LVuz8HuKM38eN9abnu6pUGHdjWYdyVl49L0gYdRyJVUiCEnuPeVOKYpUwAAIf8LTUFDR0NvbiAEAxAxAAAAAVdyaXR0ZW4gYnkgR0lGQ29udmVydGVyIDIuMy43IG9mIEphbiAyOSwgMTk5NAA7",27:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQKCjI+pyykAoxCtzhnBy5jXsEGdJoXad0woamYk91BrerWiezL1rvK+PAt+QiqhgXjBlXIsl01DZCWfshaw0VPePNgRUSLyGcfksnkIPSus41pKSymitTjMFau02e86Z3gpMUd3MiJiYWWSxLXytBVo8QcmGQbJMZk4ZBW2UZOn9mlUAAAh/wtNQUNHQ29uIAQDEDEAAAABV3JpdHRlbiBieSBHSUZDb252ZXJ0ZXIgMi4zLjcgb2YgSmFuIDI5LCAxOTk0ADs=",28:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQJ9jI+pywIgjnsvshuEnhTODWIG51Gc1llioq5NB8OtO4LVGc8IyGtZD6QJL7rPcJcipY7Km2xoO/FikJWvaXoSUZVs19M7isfkMs2hE6JZpvFplGNSqWkM9luB5uL6HInbZqe0MRfoMogyKPLxl6L14oinuCVzwwi4ZKYpVgAAIf8LTUFDR0NvbiAEAxAxAAAAAVdyaXR0ZW4gYnkgR0lGQ29udmVydGVyIDIuMy43IG9mIEphbiAyOSwgMTk5NAA7",29:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQJ3jI+py+3/BACi1klFxFh2T3UZRJaIxqCBCoEgB09VZF1wLcusyff+svtFVjiKyfbK3IypZWwpCRqSuVj0yhRqt9yu96uozcDjk8Un3qmi2qhI1rNw3CJpwvV8loHzvHV/YpVB5cHG59TXZximl4ZUWOKI4gjGUAAAIf8LTUFDR0NvbiAEAxAxAAAAAVdyaXR0ZW4gYnkgR0lGQ29udmVydGVyIDIuMy43IG9mIEphbiAyOSwgMTk5NAA7",30:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQJ8jI+pyybtoEQCAIGxvVjWbX3gGHLTM6VqtAaiSJYmlGVkLXftzqA8X/P9DkJXaKeBcW6XhvKDy12aC6UslqwUh9wuMbjlPsLdcSKIBJ+97J9WTHVsyDSYdvT2zGNYunHPNxWio2D1BAIVd8bE8bKXV9gHBgWlMoky2QZRAAAh/wtNQUNHQ29uIAQDEDEAAAABV3JpdHRlbiBieSBHSUZDb252ZXJ0ZXIgMi4zLjcgb2YgSmFuIDI5LCAxOTk0ADs=",31:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQJ5jI+pyyEAoXixioZplfFipAFTt1mfonnnEoakuDKuuU72PTk4Hht5z/r5NsLezEKLHTs2oOwFA+ZmlEuxYYM+XFmJ8wsOH7YqMSgplUypzqWIaCzJt2ktvN59e8E4ZlOckhK2dHVS1RK4l0EEVXITxCgyMvdnZglWAAAh/wtNQUNHQ29uIAQDEDEAAAABV3JpdHRlbiBieSBHSUZDb252ZXJ0ZXIgMi4zLjcgb2YgSmFuIDI5LCAxOTk0ADs=",32:"data:image/gif;base64,R0lGODlhIAAgAJEAAP///wAA/QAAAAAAACH5BAEAAAEALAAAAAAgACAAQQKOjI+pyyFiBJjzSQrga+tiCnGJl3kmGXKplEZZJI7gZ8YMCTqVaPW94/M1WrYDEdjJuXajI8JEUxZ1lkrl8Zoqas8sT/PBsJxbrPWcAW207Lb7OerAbaHLivmV5VBPcjccRvbzlyYmNXgDGNiGs/hWddXip0JjhEenWDj5Z4ZWcploiIYz2XkGSbr5tqpVAAAh/wtNQUNHQ29uIAQDEDEAAAABV3JpdHRlbiBieSBHSUZDb252ZXJ0ZXIgMi4zLjcgb2YgSmFuIDI5LCAxOTk0ADs="};

    // ----------------------------------------------------------------- //
    // Pet: an oneko-style companion that chases the cursor. Sprites are the
    // 2023 icon library (76 animals) served from /sprites/<animal>/<name>.png.
    // Each animal shares the same sprite vocabulary (still, sleep, wash, yawn,
    // and 8 directional 2-frame runs). If sprite images can't load, it falls
    // back to the classic embedded cat (NEKO_FRAMES).
    // ----------------------------------------------------------------- //
    const PET_SPRITE = "/sprites/";
    // direction (octant) -> the two run-frame sprite basenames
    const PET_DIR_FRAMES = {
      e:  ["erun1", "erun2"],   ne: ["nerun1", "nerun2"], n:  ["nrun1", "nrun2"],
      nw: ["nwrun1", "nwrun2"], w:  ["wrun1", "wrun2"],   sw: ["swrun1", "swrun2"],
      s:  ["srun1", "srun2"],   se: ["serun1", "serun2"],
    };
    const PET_IDLE = { still: "still", wash: "wash", yawn: "yawn", sleep1: "sleep1", sleep2: "sleep2", alert: "alert", itch1: "itch1", itch2: "itch2" };
    function petUrl(animal, name) { return PET_SPRITE + encodeURIComponent(animal) + "/" + name; }

    // classic-cat fallback frame numbers, keyed by the sprite basename
    const PET_CLASSIC = {
      still: 25, wash: 31, yawn: 26, sleep1: 29, sleep2: 30, alert: 32, itch1: 27, itch2: 28,
      erun1: 5, erun2: 6, nerun1: 3, nerun2: 4, nrun1: 1, nrun2: 2, nwrun1: 15, nwrun2: 16,
      wrun1: 13, wrun2: 14, swrun1: 11, swrun2: 12, srun1: 9, srun2: 10, serun1: 7, serun2: 8,
    };

    function octant(theta) {
      const pi = Math.PI;
      if (theta >= -pi / 8 && theta <= pi / 8) return "e";
      if (theta > pi / 8 && theta < 3 * pi / 8) return "ne";
      if (theta >= 3 * pi / 8 && theta <= 5 * pi / 8) return "n";
      if (theta > 5 * pi / 8 && theta < 7 * pi / 8) return "nw";
      if (theta >= 7 * pi / 8 || theta <= -7 * pi / 8) return "w";
      if (theta > -7 * pi / 8 && theta < -5 * pi / 8) return "sw";
      if (theta >= -5 * pi / 8 && theta <= -3 * pi / 8) return "s";
      return "se";
    }

    function Pet({ enabled, animal }) {
      const ref = useRef(null);
      const usingFallbackRef = useRef(false);
      const state = useRef({ x: 200, y: 200, mx: 200, my: 200, sprite: "still", run: 0, idle: 0, phase: 0 });

      // Preload this animal's sprites; if the first one errors, use the
      // embedded classic cat instead so the pet always shows up.
      useEffect(() => {
        if (!enabled) return;
        usingFallbackRef.current = false;
        const probe = new Image();
        probe.onerror = () => { usingFallbackRef.current = true; };
        probe.src = petUrl(animal, "still.png");
        // warm the cache for the common frames
        ["nrun1", "srun1", "erun1", "wrun1", "sleep1", "wash", "yawn"].forEach((n) => {
          const im = new Image(); im.src = petUrl(animal, n + ".png");
        });
      }, [enabled, animal]);

      useEffect(() => {
        if (!enabled) return;
        const s = state.current;
        s.x = window.innerWidth / 2; s.y = window.innerHeight / 2; s.mx = s.x; s.my = s.y;
        const onMove = (e) => { s.mx = e.clientX; s.my = e.clientY; };
        window.addEventListener("mousemove", onMove);

        const SPEED = 13;
        let raf = null, last = 0;

        function setSprite(name) {
          s.sprite = name;
          const el = ref.current;
          if (!el) return;
          const img = el.firstChild;
          if (!img) return;
          if (usingFallbackRef.current) {
            img.src = NEKO_FRAMES[PET_CLASSIC[name] || 25];
          } else {
            img.src = petUrl(animal, name + ".png");
          }
        }

        function step(ts) {
          raf = requestAnimationFrame(step);
          if (ts - last < 130) return;
          last = ts;
          const dx = s.mx - s.x, dy = s.my - s.y;
          const dist = Math.hypot(dx, dy);

          if (dist > 18) {
            s.idle = 0;
            const theta = Math.atan2(-dy, dx);
            const move = Math.min(SPEED, dist);
            s.x += (dx / dist) * move; s.y += (dy / dist) * move;
            const frames = PET_DIR_FRAMES[octant(theta)];
            s.run = s.run ? 0 : 1;
            setSprite(frames[s.run]);
          } else {
            s.idle++;
            // sit briefly, wash, yawn, then drift to sleep (alternating frames)
            if (s.idle < 4) setSprite("still");
            else if (s.idle < 8) setSprite(s.idle % 2 ? "wash" : "still");
            else if (s.idle < 12) setSprite("yawn");
            else setSprite(s.idle % 2 ? "sleep1" : "sleep2");
          }
          const el = ref.current;
          if (el) el.style.transform = `translate(${s.x - 16}px, ${s.y - 16}px)`;
        }
        // initialize the first frame
        setSprite("still");
        raf = requestAnimationFrame(step);
        return () => { window.removeEventListener("mousemove", onMove); if (raf) cancelAnimationFrame(raf); };
      }, [enabled, animal]);

      if (!enabled) return null;
      return (
        <div ref={ref} aria-hidden="true"
          className="pointer-events-none fixed left-0 top-0 z-[60]"
          style={{ width: 32, height: 32, imageRendering: "pixelated", willChange: "transform" }}>
          <img alt="" src={petUrl(animal, "still.png")} width="32" height="32"
            style={{ imageRendering: "pixelated" }}
            onError={(e) => { usingFallbackRef.current = true; e.currentTarget.src = NEKO_FRAMES[25]; }} />
        </div>
      );
    }


    // ----------------------------------------------------------------- //
    // Settings: accessibility options + easter-egg toggle. Lifted to Root,
    // persisted to localStorage, applied as classes/vars on <html>.
    // ----------------------------------------------------------------- //
    const DEFAULT_SETTINGS = {
      largeText: false,
      highContrast: false,
      reduceMotion: false,
      dyslexiaFont: false,
      underlineLinks: false,
      darkMode: false,
      petEnabled: false,
      petAnimal: "tabby",
      captionPrompt: "",
      titlePrompt: "",
      tagsPrompt: "",
      asrLanguage: "auto",
      asrProfile: "Most accurate - 1.12 s",
      chatSound: true,
      chatSoundTheme: "chime",
      chatSoundVolume: 0.6,
      chatPopup: true,
    };
    const SettingsContext = React.createContext({ settings: DEFAULT_SETTINGS, update: () => {} });
    function loadSettings() {
      try {
        const raw = localStorage.getItem("sozai_settings");
        if (raw) return Object.assign({}, DEFAULT_SETTINGS, JSON.parse(raw));
      } catch (e) {}
      return DEFAULT_SETTINGS;
    }
    function useSettings() { return React.useContext(SettingsContext); }

    // A compact dark-mode toggle usable anywhere (shown in the top bar so it is
    // visible to everyone without opening Settings).
    function DarkModeToggle({ compact }) {
      const { settings, update } = useSettings();
      const on = !!settings.darkMode;
      return (
        <button type="button" onClick={() => update({ darkMode: !on })}
          aria-pressed={on} aria-label={on ? "Switch to light mode" : "Switch to dark mode"}
          title={on ? "Light mode" : "Dark mode"}
          className={cn(
            "flex items-center gap-1.5 rounded-md border-2 border-primary/60 text-primary transition-colors hover:bg-accent",
            compact ? "size-9 justify-center" : "px-2.5 py-1.5 font-mono text-xs uppercase tracking-wide"
          )}>
          {on ? <Sun className="size-4" /> : <Moon className="size-4" />}
          {compact ? null : (on ? "Light" : "Dark")}
        </button>
      );
    }
    function applySettings(s) {
      const root = document.documentElement;
      root.classList.toggle("a11y-large-text", !!s.largeText);
      root.classList.toggle("a11y-high-contrast", !!s.highContrast);
      root.classList.toggle("a11y-reduce-motion", !!s.reduceMotion);
      root.classList.toggle("a11y-dyslexia", !!s.dyslexiaFont);
      root.classList.toggle("a11y-underline-links", !!s.underlineLinks);
      root.classList.toggle("dark", !!s.darkMode);
      try { window.__sozaiReduceMotion = !!s.reduceMotion; } catch (e) {}
      // mirror sound prefs so non-React code (e.g. the upload overlay) can play
      // notification sounds that respect the user's settings
      try {
        window.__sozaiSound = {
          enabled: s.chatSound !== false,
          theme: s.chatSoundTheme || "chime",
          volume: typeof s.chatSoundVolume === "number" ? s.chatSoundVolume : 0.6,
        };
      } catch (e) {}
    }

    // ----------------------------------------------------------------- //
    // helpers (ports of lib/utils.ts, next/image, lucide-react)
    // ----------------------------------------------------------------- //
    function cn(...inputs) {
      const out = [];
      const walk = (v) => {
        if (!v) return;
        if (typeof v === "string" || typeof v === "number") out.push(v);
        else if (Array.isArray(v)) v.forEach(walk);
        else if (typeof v === "object") { for (const k in v) if (v[k]) out.push(k); }
      };
      inputs.forEach(walk);
      return out.join(" ");
    }

    // Play the "polaroid torn up" teardown on a DOM element, then run `done`.
    // Respects reduced-motion (skips straight to done) and never double-fires.
    function destroyPolaroidEl(el, done) {
      const reduce = !!window.__sozaiReduceMotion;
      if (!el || reduce) { done && done(); return; }
      if (el.__destroying) return;
      el.__destroying = true;
      // a quick tear flash overlaid on the polaroid
      try {
        const tear = document.createElement("div");
        tear.className = "sozai-tear";
        el.appendChild(tear);
      } catch (e) {}
      el.classList.add("sozai-destroy");
      let called = false;
      const finish = () => {
        if (called) return;
        called = true;
        // clean up the imperatively-added bits in case React reuses this node
        try {
          el.classList.remove("sozai-destroy");
          el.__destroying = false;
          const t = el.querySelector(".sozai-tear");
          if (t) t.remove();
        } catch (e) {}
        done && done();
      };
      el.addEventListener("animationend", finish, { once: true });
      // safety fallback in case animationend doesn't fire
      setTimeout(finish, 600);
    }
    function Img({ src, alt = "", className = "", fill, sizes, priority, ...rest }) {
      const base = fill ? "absolute inset-0 h-full w-full" : "";
      return <img src={src || "/assets/placeholder.svg"} alt={alt} className={cn(base, className)} loading={priority ? "eager" : "lazy"} {...rest} />;
    }
    const _L = window.lucide || {};
    function iconNode(name) { return _L[name] || (_L.icons && _L.icons[name]) || null; }
    function camelAttrs(a = {}) {
      const o = {};
      for (const k in a) {
        if (k === "class") { o.className = a[k]; continue; }
        o[k.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = a[k];
      }
      return o;
    }
    function Icon({ name, className = "", ...rest }) {
      const node = iconNode(name);
      const children = Array.isArray(node) ? node.map((t, i) => {
        const tag = Array.isArray(t) ? t[0] : t.tag;
        const attrs = Array.isArray(t) ? (t[1] || {}) : (t.attrs || {});
        return React.createElement(tag, { key: i, ...camelAttrs(attrs) });
      }) : null;
      return (
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
          fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
          className={className} aria-hidden="true" {...rest}>{children}</svg>
      );
    }
    const mk = (n) => (props) => <Icon name={n} {...props} />;
    const Camera = mk("Camera"), X = mk("X"), ChevronLeft = mk("ChevronLeft"), ChevronRight = mk("ChevronRight"),
      ArrowRight = mk("ArrowRight"), FolderPlus = mk("FolderPlus"), Calendar = mk("Calendar"), Clock = mk("Clock"),
      Plus = mk("Plus"), Upload = mk("Upload"), Share2 = mk("Share2"), Settings = mk("Settings"),
      ChevronDown = mk("ChevronDown"), SlidersHorizontal = mk("SlidersHorizontal"), MapPin = mk("MapPin"),
      Sparkles = mk("Sparkles"), Star = mk("Star"), MapIcon = mk("Map"), FolderClosed = mk("FolderClosed"),
      BookOpen = mk("BookOpen"), Copy = mk("Copy"), Check = mk("Check"), Users = mk("Users"),
      MessageCircle = mk("MessageCircle"), Send = mk("Send"), Link2 = mk("Link2"), Home = mk("Home"),
      Moon = mk("Moon"), Sun = mk("Sun"), PawPrint = mk("PawPrint"), Cat = mk("Cat"),
      LayoutGrid = mk("LayoutGrid"), Wand2 = mk("Wand2"), Search = mk("Search"),
      Droplet = mk("Droplet"), Volume2 = mk("Volume2"), VolumeX = mk("VolumeX"), FastForward = mk("FastForward"),
      ImageIcon = mk("Image"), Loader2 = mk("Loader"), Trash2 = mk("Trash2"), Navigation = mk("Navigation"),
      Palette = mk("Palette"), Pencil = mk("Pencil"),
      Maximize2 = mk("Maximize2"), Minimize2 = mk("Minimize2"),
      Shuffle = mk("Shuffle"), Printer = mk("Printer"), RotateCcw = mk("RotateCcw"),
      ImagePlus = mk("ImagePlus"), Pin = mk("Pin"), Cpu = mk("Cpu"), Download = mk("Download"),
      Mic = mk("Mic"), Square = mk("Square"),
      CheckCircle = mk("CheckCircle2"), AlertTriangle = mk("AlertTriangle"), XCircle = mk("XCircle"),
      ShieldAlert = mk("ShieldAlert"), FileWarning = mk("FileWarning");

    // ----------------------------------------------------------------- //
    // data (port of lib/album-data.ts; asset paths point at /assets)
    // ----------------------------------------------------------------- //
    const albums = [
      { id: "vancouver", name: "Vancouver", photoCount: 18, thumbnail: "/assets/photos/gastown-steam-clock.jpg" },
      { id: "road-trip", name: "Road Trip", photoCount: 42, thumbnail: "/assets/photos/mountain-sunset.jpg" },
      { id: "blossoms", name: "Blossoms", photoCount: 12, thumbnail: "/assets/photos/cherry-blossoms.jpg" },
      { id: "gardens", name: "Gardens", photoCount: 8, thumbnail: "/assets/photos/succulent-garden.jpg" },
    ];
    const tripMeta = { location: "Vancouver", period: "2023-2025", date: "Feb 13, 2024", momentCount: 6, photoCount: 18 };
    const moments = [
      { id: 1, title: "Gastown Steam Clock", caption: "Steam o'clock in Gastown.", date: "Feb 13, 2024", time: "7:52 AM", src: "/assets/photos/gastown-steam-clock.jpg", alt: "The Gastown steam clock and brick buildings in Vancouver", x: 22, y: 30, lat: 49.2840, lon: -123.1091, note: "downtown", favorite: true },
      { id: 2, title: "Waterfront Gardens", caption: "Flowers along the boardwalk.", date: "Jul 1, 2023", time: "4:13 PM", src: "/assets/photos/waterfront-gardens.jpg", alt: "A waterfront park with flowers and a boardwalk", x: 24, y: 70, lat: 49.1979, lon: -122.9157 },
      { id: 3, title: "Succulent Garden", caption: "Someone's incredible succulent garden.", date: "Jul 1, 2023", time: "4:17 PM", src: "/assets/photos/succulent-garden.jpg", alt: "A lush front-yard succulent garden", x: 50, y: 28, lat: 49.1981, lon: -122.9176 },
      { id: 4, title: "Cherry Blossoms", caption: "Cherry blossoms against a clear sky.", date: "Apr 3, 2025", time: "5:29 PM", src: "/assets/photos/cherry-blossoms.jpg", alt: "Cherry blossoms in full bloom against a blue sky", x: 72, y: 30, lat: 49.2697, lon: -123.2535, note: "so pretty" },
      { id: 5, title: "Maple Canopy", caption: "Spring maples catching fire.", date: "May 6, 2024", time: "5:00 PM", src: "/assets/photos/maple-canopy.jpg", alt: "Red and green maple leaves against a blue sky", x: 88, y: 62, lat: 49.2629, lon: -123.2060 },
      { id: 6, title: "Mountain Pass at Dusk", caption: "Golden hour over the mountains.", date: "Aug 7, 2023", time: "7:34 PM", src: "/assets/photos/mountain-sunset.jpg", alt: "Layered mountains at sunset on a road trip", x: 50, y: 70, lat: 53.0286, lon: -119.1697, note: "the long drive" },
    ];
    const photos = [
      { id: "p1", src: "/assets/photos/gastown-steam-clock.jpg", alt: "The Gastown steam clock and brick buildings in Vancouver", defaultTitle: "Gastown Steam Clock", defaultCaption: "Steam o'clock in Gastown.", date: "Feb 13, 2024", time: "7:52 AM", lat: 49.2840, lon: -123.1091 },
      { id: "p2", src: "/assets/photos/cherry-blossoms.jpg", alt: "Cherry blossoms in full bloom against a blue sky", defaultTitle: "Cherry Blossoms", defaultCaption: "Cherry blossoms against a clear sky.", date: "Apr 3, 2025", time: "5:29 PM", lat: 49.2697, lon: -123.2535 },
      { id: "p3", src: "/assets/photos/mountain-sunset.jpg", alt: "Layered mountains at sunset on a road trip", defaultTitle: "Mountain Pass", defaultCaption: "Golden hour over the mountains.", date: "Aug 7, 2023", time: "7:34 PM", lat: 53.0286, lon: -119.1697 },
      { id: "p4", src: "/assets/photos/succulent-garden.jpg", alt: "A lush front-yard succulent garden", defaultTitle: "Succulent Garden", defaultCaption: "Someone's incredible succulent garden.", date: "Jul 1, 2023", time: "4:17 PM", lat: 49.1981, lon: -122.9176 },
    ];

    // ----------------------------------------------------------------- //
    // Shared photo store. Album photos (with their editable caption / date /
    // time / title) live here so they flow from "Add to Album" into the Map of
    // My Time draft tray, where the user can pin them. Pin coordinates persist
    // too. Mirrors the window.Collab / window.__gradioReady global pattern.
    // ----------------------------------------------------------------- //
    // One-time cleanup: older builds persisted photos under this key. Remove any
    // stale copy so previously-saved/shared images don't reappear after this
    // memory-only change.
    try { localStorage.removeItem("sozai_photos_v1"); } catch (e) {}

    window.SozaiPhotos = (function () {
      // NOTE: photos are intentionally NOT persisted to localStorage. Solo mode
      // is ephemeral (refresh = empty), and room photos live on the SERVER
      // (via /api/rooms/{id}/state), pulled in on join. Keeping a local copy
      // would (a) make solo photos survive a refresh and (b) bleed old/deleted
      // photos into a room you later join - both unwanted. The store is purely
      // in-memory; the room-state sync is the only durable source.
      let listeners = [];
      function seed() {
        return photos.map((p) => ({
          id: p.id, src: p.src, alt: p.alt || "",
          title: p.defaultTitle || "", caption: p.defaultCaption || "",
          // Carry each photo's real EXIF date/time + GPS through. Photos that
          // have coordinates auto-pin on the map, exactly like uploaded EXIF
          // photos do.
          date: p.date || "", time: p.time || "",
          lon: p.lon != null ? p.lon : null, lat: p.lat != null ? p.lat : null,
          pinned: p.lat != null && p.lon != null,
        }));
      }
      // Always start from the built-in seed (sample photos). No localStorage.
      let items = [];  // default: empty album — "try a sample" loads the set
      function persist() { /* intentionally no-op: photos are never stored locally */ }
      function emit() { persist(); listeners.forEach((fn) => { try { fn(items); } catch (e) {} }); }
      return {
        all() { return items.slice(); },
        pinned() { return items.filter((p) => p.pinned && p.lon != null && p.lat != null); },
        get(id) { return items.find((p) => p.id === id) || null; },
        subscribe(fn) { listeners.push(fn); return () => { listeners = listeners.filter((f) => f !== fn); }; },
        // upsert fields onto a photo (by id), creating it if new (uploads)
        upsert(id, patch) {
          const i = items.findIndex((p) => p.id === id);
          if (i === -1) items = [...items, Object.assign({ id, src: "", alt: "", title: "", caption: "", date: "", time: "", lon: null, lat: null, locationName: "", radius: null, layout: "square", pinned: false }, patch)];
          else items = items.map((p) => (p.id === id ? Object.assign({}, p, patch) : p));
          emit();
        },
        add(photo) {
          const id = photo.id || ("u" + Date.now().toString(36) + Math.random().toString(36).slice(2, 5));
          items = [...items, Object.assign({ id, src: "", alt: "", title: "", caption: "", date: "", time: "", lon: null, lat: null, locationName: "", radius: null, layout: "square", pinned: false }, photo, { id })];
          emit();
          return id;
        },
        pin(id, lon, lat) { this.upsert(id, { lon, lat, pinned: true }); },
        move(id, lon, lat) { this.upsert(id, { lon, lat }); },
        // per-photo canvas transform on the map (rotation in deg, scale 0.5-2)
        setStyleProps(id, props) { this.upsert(id, props); },
        unpin(id) { this.upsert(id, { lon: null, lat: null, pinned: false, rot: 0, scale: 1 }); },
        // send every pinned photo back to the tray (reset the canvas)
        resetPins() {
          items = items.map((p) => (p.pinned ? Object.assign({}, p, { lon: null, lat: null, pinned: false, rot: 0, scale: 1 }) : p));
          emit();
        },
        remove(id) { items = items.filter((p) => p.id !== id); emit(); },
        replaceAll(next) { items = next.slice(); emit(); },
      };
    })();

    // React hook that subscribes to the SozaiPhotos store and re-renders on
    // every add / remove / upsert. Returns the live items array.
    function usePhotos() {
      const [items, setItems] = useState(() => window.SozaiPhotos.all());
      useEffect(() => window.SozaiPhotos.subscribe(setItems), []);
      return items;
    }

    // ----------------------------------------------------------------- //
    // Export the finished scrapbook as a printable keepsake (→ Save as PDF).  //
    // Builds a clean, self-contained HTML document from the current photos +  //
    // captions and opens the browser's print dialog. No server round-trip, so //
    // it works offline and never uploads the user's images anywhere.          //
    // ----------------------------------------------------------------- //
    function exportScrapbook(opts) {
      const o = opts || {};
      const title = o.title || "My Sozai Scrapbook";
      const photos = window.SozaiPhotos.all().filter((p) => p && p.src);
      if (!photos.length) {
        return { ok: false, reason: "empty" };
      }
      const esc = (s) => String(s == null ? "" : s)
        .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;");
      const today = new Date().toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" });

      const cards = photos.map((p) => {
        const meta = [p.date, p.time].filter(Boolean).map(esc).join(" · ");
        const tags = (p.tags || "").trim();
        return `
          <figure class="card">
            <div class="frame"><img src="${esc(p.src)}" alt="${esc(p.alt || "")}" /></div>
            <figcaption>
              ${p.title ? `<h2>${esc(p.title)}</h2>` : ""}
              ${p.caption ? `<p class="cap">${esc(p.caption)}</p>` : ""}
              ${meta ? `<p class="meta">${meta}</p>` : ""}
              ${tags ? `<p class="tags">${esc(tags)}</p>` : ""}
              ${(p.lat != null && p.lon != null) ? `<p class="geo">📍 ${Number(p.lat).toFixed(4)}, ${Number(p.lon).toFixed(4)}</p>` : ""}
            </figcaption>
          </figure>`;
      }).join("");

      const doc = `<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" />
<title>${esc(title)}</title>
<style>
  @page { margin: 16mm; }
  * { box-sizing: border-box; }
  body { font-family: Georgia, "Times New Roman", serif; color: #23201c; margin: 0; padding: 28px;
         background: #fbf7ef; }
  header.book { text-align: center; margin-bottom: 28px; border-bottom: 2px solid #cdbfa6; padding-bottom: 16px; }
  header.book h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: .01em; }
  header.book p { margin: 0; color: #7a6f5d; font-size: 13px; font-style: italic; }
  .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .card { break-inside: avoid; background: #fff; border: 1px solid #e5dcc8; border-radius: 4px;
          box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 10px 10px 14px; }
  .frame { background: #fff; padding: 6px 6px 0; }
  .frame img { display: block; width: 100%; height: 230px; object-fit: cover; border-radius: 2px; }
  figcaption { padding: 8px 4px 0; }
  figcaption h2 { font-size: 17px; margin: 6px 0 4px; }
  .cap { font-family: "Segoe Script", "Comic Sans MS", cursive; font-size: 14px; margin: 0 0 6px; color: #3a342c; }
  .meta { font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .04em;
          text-transform: uppercase; color: #8a7d68; margin: 4px 0 2px; }
  .tags { font-size: 11px; color: #6b8e5a; margin: 2px 0; }
  .geo { font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: #998a72; margin: 2px 0 0; }
  footer.book { margin-top: 26px; text-align: center; color: #998a72; font-size: 11px; font-style: italic; }
  @media print { body { background: #fff; padding: 0; } .card { box-shadow: none; } }
</style></head>
<body>
  <header class="book">
    <h1>${esc(title)}</h1>
    <p>${photos.length} ${photos.length === 1 ? "memory" : "memories"} · exported ${esc(today)}</p>
  </header>
  <div class="grid">${cards}</div>
  <footer class="book">Made with Sozai · build memories together</footer>
  <script>window.onload = function(){ setTimeout(function(){ window.focus(); window.print(); }, 350); };<\/script>
</body></html>`;

      const w = window.open("", "_blank");
      if (!w) return { ok: false, reason: "popup-blocked" };
      w.document.open();
      w.document.write(doc);
      w.document.close();
      return { ok: true, count: photos.length };
    }


    //                                                                     //
    // When in a room, the scrapbook (photos, captions, pins, transforms)  //
    // is saved to the server so a returning user sees it as they left it. //
    //   • on join → GET the saved state and load it into the store        //
    //   • on change → PUT (debounced) with optimistic version tracking    //
    //   • on conflict → adopt the server's newer state                    //
    // Live edits still flow over the WebSocket; this is the durable layer //
    // plus the seed for anyone who joins later. No-ops in solo mode.       //
    // ----------------------------------------------------------------- //
    const RoomPersistence = (function () {
      let roomId = null;
      let version = 0;
      let saveTimer = null;
      let unsub = null;
      let loading = false;
      let dirtyWhileLoading = false;
      const SAVE_DEBOUNCE = 1200;

      async function load() {
        loading = true;
        try {
          const res = await fetch(`/api/rooms/${encodeURIComponent(roomId)}/state`);
          if (!res.ok) {
            // couldn't read room state - start the room empty rather than
            // leaking whatever photos happen to be in local memory.
            window.__sozaiSuppressSave = true;
            window.SozaiPhotos.replaceAll([]);
            window.__sozaiSuppressSave = false;
            return;
          }
          const data = await res.json();
          version = data.version || 0;
          // ALWAYS adopt the server's room state as the source of truth on join.
          // If the room has photos, show them (shared, persistent). If it's a
          // fresh/empty room, start EMPTY - never carry over the local seed or
          // any leftover/deleted photos from a previous solo session.
          const serverPhotos = (data.state && Array.isArray(data.state.photos))
            ? data.state.photos : [];
          window.__sozaiSuppressSave = true;
          window.SozaiPhotos.replaceAll(serverPhotos);
          window.__sozaiSuppressSave = false;
        } catch (e) {
          // network error - start the room empty rather than bleeding local photos
          window.__sozaiSuppressSave = true;
          window.SozaiPhotos.replaceAll([]);
          window.__sozaiSuppressSave = false;
        } finally {
          loading = false;
          if (dirtyWhileLoading) { dirtyWhileLoading = false; scheduleSave(); }
        }
      }

      async function save() {
        if (!roomId) return;
        const photos = window.SozaiPhotos.all();
        try {
          const res = await fetch(`/api/rooms/${encodeURIComponent(roomId)}/state`, {
            method: "POST", headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ state: { photos, savedAt: Date.now() }, base_version: version }),
          });
          if (!res.ok) return;
          const data = await res.json();
          if (data.conflict && data.state && Array.isArray(data.state.photos)) {
            // someone saved a newer version; adopt it rather than clobber
            version = data.version || version;
            window.__sozaiSuppressSave = true;
            window.SozaiPhotos.replaceAll(data.state.photos);
            window.__sozaiSuppressSave = false;
          } else if (typeof data.version === "number") {
            version = data.version;
          }
        } catch (e) { /* will retry on next change */ }
      }

      function scheduleSave() {
        if (!roomId) return;
        if (loading) { dirtyWhileLoading = true; return; }
        if (window.__sozaiSuppressSave) return;
        if (saveTimer) clearTimeout(saveTimer);
        saveTimer = setTimeout(save, SAVE_DEBOUNCE);
      }

      return {
        async init() {
          if (!Collab.isCollab()) return;        // solo → no persistence
          roomId = Collab.roomId();
          if (!roomId) return;
          await load();
          unsub = window.SozaiPhotos.subscribe(() => scheduleSave());
        },
        // force an immediate flush (e.g. before unload)
        flush() { if (saveTimer) { clearTimeout(saveTimer); saveTimer = null; } return save(); },
        stop() { if (unsub) unsub(); if (saveTimer) clearTimeout(saveTimer); },
      };
    })();

    // Adapt a SozaiPhotos item to the shape that the map-view components expect.
    // x/y are deterministic synthetic percentages used for scrapbook pin positions.
    function storeToMoment(p, i) {
      return {
        id: p.id,
        title: p.title || p.alt || "Untitled",
        caption: p.caption || "",
        date: p.date || "",
        time: p.time || "",
        src: p.src,
        alt: p.alt || p.title || "",
        lat: p.lat != null ? p.lat : null,
        lon: p.lon != null ? p.lon : null,
        locationName: p.locationName || "",
        radius: p.radius != null ? p.radius : null,
        layout: p.layout || "square",
        x: 10 + ((i * 73 + 11) % 75),
        y: 20 + ((i * 47 + 23) % 55),
        favorite: false,
        note: "",
      };
    }

    // Parse a free-form date + time ("June 7, 2026" + "10:42 AM") into a
    // sortable timestamp for the flythrough. Falls back to array order.
    function photoTimestamp(p) {
      const raw = [p.date, p.time].filter(Boolean).join(" ").trim();
      if (raw) { const t = Date.parse(raw); if (!isNaN(t)) return t; }
      const justTime = (p.time || "").trim();
      if (justTime) { const t = Date.parse("Jan 1 2000 " + justTime); if (!isNaN(t)) return t; }
      return null;
    }

    // ----------------------------------------------------------------- //
    // collaboration hooks
    // ----------------------------------------------------------------- //
    function useStatus() {
      const [s, setS] = useState({ connected: false, solo: !Collab.isCollab() });
      useEffect(() => Collab.on("status", setS), []);
      return s;
    }
    function usePresence() {
      const [p, setP] = useState(Collab.getParticipants());
      useEffect(() => Collab.on("presence", (list) => setP(list || [])), []);
      return p;
    }
    function useMe() {
      const [m, setM] = useState(Collab.getMe());
      useEffect(() => Collab.on("me", setM), []);
      return m;
    }
    function initials(name) {
      const parts = (name || "Guest").trim().split(/\s+/);
      return ((parts[0]?.[0] || "G") + (parts[1]?.[0] || "")).toUpperCase();
    }
    function Avatar({ p, size = 28 }) {
      return (
        <span title={p.name} style={{ background: p.color, width: size, height: size }}
          className="inline-flex shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white ring-2 ring-card">
          {initials(p.name)}
        </span>
      );
    }
    async function copy(text) {
      try { await navigator.clipboard.writeText(text); return true; }
      catch (e) {
        const ta = document.createElement("textarea"); ta.value = text; document.body.appendChild(ta);
        ta.select(); try { document.execCommand("copy"); } catch (_) {} document.body.removeChild(ta); return true;
      }
    }
    function CopyButton({ value, label, icon: IconC }) {
      const [done, setDone] = useState(false);
      return (
        <button type="button"
          onClick={async () => { await copy(value); setDone(true); setTimeout(() => setDone(false), 1400); }}
          className="flex items-center gap-1.5 rounded-md border-2 border-primary/60 px-2.5 py-1.5 font-mono text-xs uppercase tracking-wide text-foreground transition-colors hover:bg-accent">
          {done ? <Check className="size-3.5 text-primary" /> : (IconC ? <IconC className="size-3.5 text-primary" /> : <Copy className="size-3.5 text-primary" />)}
          {done ? "Copied" : label}
        </button>
      );
    }

    // ----------------------------------------------------------------- //
    // Collaboration bar (share code + link, presence, name, chat toggle)
    // ----------------------------------------------------------------- //
    function CollabBar({ onToggleChat, unread, onOpenPets, onOpenTrace }) {
      const status = useStatus();
      const participants = usePresence();
      const me = useMe();
      const [code, setCode] = useState(null);
      const [editing, setEditing] = useState(false);
      const [nameDraft, setNameDraft] = useState("");
      const [creating, setCreating] = useState(false);

      useEffect(() => {
        const id = Collab.roomId();
        if (!id) return;
        fetch("/api/rooms/" + encodeURIComponent(id))
          .then((r) => (r.ok ? r.json() : null))
          .then((d) => d && setCode(d.share_code))
          .catch(() => {});
      }, []);

      const link = Collab.roomId() ? `${location.origin}/room/${Collab.roomId()}` : "";

      async function startCollab() {
        setCreating(true);
        try {
          const r = await fetch("/api/rooms", {
            method: "POST", headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ code_length: 6, session_id: Collab.sessionId(), display_name: localStorage.getItem("sozai_name") || "" }),
          });
          const d = await r.json();
          location.href = d.room_path;
        } catch (e) { setCreating(false); }
      }

      // Solo mode bar -------------------------------------------------- //
      if (status.solo) {
        return (
          <div className="flex flex-wrap items-center justify-between gap-3 border-b-2 border-dashed border-primary/40 bg-card px-5 py-3 sm:px-7">
            <a href="/" className="flex items-center gap-2 text-foreground">
              <img src="/assets/images/hummingbird-black.svg" alt="" className="size-8" /> <span className="font-display text-lg leading-none">Sozai</span>
            </a>
            <div className="flex items-center gap-2">
              <span className="font-mono text-[11px] uppercase tracking-wide text-muted-foreground">Solo session</span>
              <button type="button" onClick={onOpenTrace} aria-label="Open LLM trace"
                className="flex items-center gap-1.5 rounded-md border-2 border-primary/60 px-2.5 py-1.5 font-mono text-xs uppercase tracking-wide text-primary transition-colors hover:bg-accent">
                <Cpu className="size-4" /> Trace
              </button>
              <button type="button" onClick={onOpenPets} aria-label="Open the menagerie"
                className="flex items-center gap-1.5 rounded-md border-2 border-primary/60 px-2.5 py-1.5 font-mono text-xs uppercase tracking-wide text-primary transition-colors hover:bg-accent">
                <PawPrint className="size-4" /> Pets
              </button>
              <DarkModeToggle compact />
              <button type="button" onClick={startCollab} disabled={creating}
                className="flex items-center gap-1.5 rounded-md border-2 border-primary bg-primary px-3 py-1.5 font-mono text-xs font-semibold uppercase tracking-wide text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-60">
                <Users className="size-3.5" /> {creating ? "Creating…" : "Start collaborating"}
              </button>
            </div>
          </div>
        );
      }

      // Collaborative bar ---------------------------------------------- //
      return (
        <div className="flex flex-wrap items-center justify-between gap-3 border-b-2 border-dashed border-primary/40 bg-card px-5 py-3 sm:px-7">
          <div className="flex flex-wrap items-center gap-3">
            <a href="/" className="flex items-center gap-2 text-foreground">
              <img src="/assets/images/hummingbird-black.svg" alt="" className="size-8" /> <span className="font-display text-lg leading-none">Sozai</span>
            </a>
            <span className="flex items-center gap-1.5 font-mono text-[11px] uppercase tracking-wide text-muted-foreground">
              <span className={cn("size-2 rounded-full", status.connected ? "bg-[oklch(0.6_0.17_150)]" : "bg-[oklch(0.7_0.15_70)]")} />
              {status.connected ? "Live" : "Reconnecting…"}
            </span>
            {code ? <CopyButton value={code} label={code} icon={Copy} /> : null}
            <CopyButton value={link} label="Link" icon={Link2} />
          </div>

          <div className="flex items-center gap-3">
            {/* presence */}
            <div className="flex items-center gap-1.5">
              <Users className="size-4 text-primary" />
              <div className="flex -space-x-2">
                {participants.slice(0, 5).map((p) => <Avatar key={p.session_id} p={p} />)}
              </div>
              {participants.length > 5 ? <span className="font-mono text-xs text-muted-foreground">+{participants.length - 5}</span> : null}
            </div>

            {/* your name */}
            {editing ? (
              <input autoFocus defaultValue={me ? me.name : (localStorage.getItem("sozai_name") || "")}
                onChange={(e) => setNameDraft(e.target.value)}
                onBlur={() => { if (nameDraft.trim()) Collab.rename(nameDraft.trim()); setEditing(false); }}
                onKeyDown={(e) => { if (e.key === "Enter") { if (nameDraft.trim()) Collab.rename(nameDraft.trim()); setEditing(false); } }}
                maxLength={24}
                className="w-28 rounded-md border-2 border-primary/60 bg-card px-2 py-1 text-xs text-foreground outline-none" />
            ) : (
              <button type="button" onClick={() => { setNameDraft(""); setEditing(true); }}
                className="flex items-center gap-1.5 rounded-md border-2 border-primary/40 px-2.5 py-1.5 text-xs text-foreground transition-colors hover:bg-accent">
                {me ? <Avatar p={me} size={20} /> : null}
                <span className="font-mono uppercase tracking-wide">{me ? me.name : "You"}</span>
              </button>
            )}

            {/* trace + pets + dark mode (visible to everyone) */}
            <button type="button" onClick={onOpenTrace} aria-label="Open LLM trace"
              className="flex size-9 items-center justify-center rounded-md border-2 border-primary/60 text-primary transition-colors hover:bg-accent" title="LLM Trace">
              <Cpu className="size-4" />
            </button>
            <button type="button" onClick={onOpenPets} aria-label="Open the menagerie"
              className="flex size-9 items-center justify-center rounded-md border-2 border-primary/60 text-primary transition-colors hover:bg-accent" title="The Menagerie">
              <PawPrint className="size-4" />
            </button>
            <DarkModeToggle compact />

            {/* chat */}
            <button type="button" onClick={onToggleChat} aria-label="Toggle chat"
              className="relative flex size-9 items-center justify-center rounded-md border-2 border-primary/60 text-primary transition-colors hover:bg-accent">
              <MessageCircle className="size-4" />
              {unread ? <span className="absolute -right-1.5 -top-1.5 flex size-4 items-center justify-center rounded-full bg-primary text-[9px] font-bold text-primary-foreground">{unread}</span> : null}
            </button>
          </div>
        </div>
      );
    }

    // ----------------------------------------------------------------- //
    // Live cursors overlay
    // ----------------------------------------------------------------- //
    function Cursors() {
      const [cursors, setCursors] = useState({});
      const last = useRef(0);
      useEffect(() => {
        if (!Collab.isCollab()) return;
        const offMove = Collab.on("cursor_position", (m) => {
          if (!m.from) return;
          setCursors((prev) => ({ ...prev, [m.from.session_id]: { x: m.x, y: m.y, name: m.from.name, color: m.from.color, t: Date.now() } }));
        });
        const offLeft = Collab.on("user_left", (m) => {
          const sidp = m.participant && m.participant.session_id;
          if (sidp) setCursors((prev) => { const n = { ...prev }; delete n[sidp]; return n; });
        });
        // a collaborator interacted with a control - float a label by their cursor
        const offPing = Collab.on("interaction", (m) => {
          if (!m.from) return;
          setCursors((prev) => {
            const cur = prev[m.from.session_id] || { name: m.from.name, color: m.from.color };
            return { ...prev, [m.from.session_id]: { ...cur, x: m.x, y: m.y, name: m.from.name, color: m.from.color, t: Date.now(), ping: m.label, pingT: Date.now() } };
          });
        });
        const onMouse = (e) => {
          const now = Date.now();
          if (now - last.current < 45) return;
          last.current = now;
          Collab.send("cursor_position", { x: e.clientX / window.innerWidth, y: e.clientY / window.innerHeight });
        };
        window.addEventListener("mousemove", onMouse);
        const prune = setInterval(() => setCursors((prev) => {
          const now = Date.now(); const n = {};
          for (const k in prev) {
            if (now - prev[k].t < 8000) {
              const c = { ...prev[k] };
              if (c.pingT && now - c.pingT > 2500) { c.ping = null; }
              n[k] = c;
            }
          }
          return n;
        }), 1000);
        return () => { offMove(); offLeft(); offPing(); window.removeEventListener("mousemove", onMouse); clearInterval(prune); };
      }, []);
      return (
        <div className="pointer-events-none fixed inset-0 z-50">
          {Object.entries(cursors).map(([sid, c]) => (
            <div key={sid} className="absolute -translate-x-1 -translate-y-1 transition-all duration-75"
              style={{ left: `${c.x * 100}%`, top: `${c.y * 100}%` }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill={c.color} stroke="white" strokeWidth="1.5">
                <path d="M5 3l6 16 2-7 7-2L5 3z" />
              </svg>
              <span className="ml-3 rounded px-1.5 py-0.5 text-[10px] font-semibold text-white" style={{ background: c.color }}>{c.name}</span>
              {c.ping && (Date.now() - (c.pingT || 0) < 2500) ? (
                <span className="absolute left-3 top-5 whitespace-nowrap rounded-full border-2 px-2 py-0.5 text-[10px] font-semibold shadow-sm"
                  style={{ borderColor: c.color, background: "white", color: c.color }}>
                  {c.ping}
                </span>
              ) : null}
            </div>
          ))}
        </div>
      );
    }

    // ----------------------------------------------------------------- //
    // Chat dock
    // ----------------------------------------------------------------- //
    function fmtTime(ts) {
      try {
        return new Date(ts).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
      } catch (e) { return ""; }
    }

    function ChatDock({ open, onClose, onIncoming }) {
      const { settings } = useSettings();
      const [messages, setMessages] = useState([]);
      const [text, setText] = useState("");
      const me = useMe();
      const endRef = useRef(null);
      const openRef = useRef(open);
      useEffect(() => { openRef.current = open; }, [open]);

      useEffect(() => {
        if (!Collab.isCollab()) return;
        return Collab.on("chat_message", (m) => {
          if (!m.from) return;
          setMessages((prev) => [...prev, { name: m.from.name, color: m.from.color, text: m.text, mine: false, ts: m.ts || Date.now() }]);
          // notify: sound + toast when a message arrives (chat closed gets the badge too)
          if (settings.chatSound) {
            window.SozaiChime.play("message", { enabled: settings.chatSound, theme: settings.chatSoundTheme, volume: settings.chatSoundVolume });
          }
          if (!openRef.current) {
            onIncoming && onIncoming();
            if (settings.chatPopup && window.SozaiToast) {
              window.SozaiToast.show({ name: m.from.name, color: m.from.color, text: m.text });
            }
          }
        });
      }, [settings.chatSound, settings.chatSoundTheme, settings.chatSoundVolume, settings.chatPopup]);
      useEffect(() => { endRef.current && endRef.current.scrollIntoView({ behavior: "smooth" }); }, [messages, open]);

      function sendMsg() {
        const t = text.trim();
        if (!t) return;
        const ts = Date.now();
        Collab.send("chat_message", { text: t, ts });
        setMessages((prev) => [...prev, { name: me ? me.name : "You", color: me ? me.color : "#7c5cff", text: t, mine: true, ts }]);
        setText("");
      }
      if (!open) return null;
      return (
        <div className="fixed bottom-4 right-4 z-40 flex h-96 w-80 max-w-[90vw] flex-col overflow-hidden rounded-xl border-2 border-primary bg-card shadow-lg">
          <div className="flex items-center justify-between border-b-2 border-dashed border-primary/50 px-4 py-2.5">
            <span className="flex items-center gap-2 font-mono text-xs font-semibold uppercase tracking-widest text-foreground">
              <MessageCircle className="size-4 text-primary" /> Room chat
            </span>
            <button type="button" onClick={onClose} aria-label="Close chat" className="text-primary hover:scale-110"><X className="size-4" /></button>
          </div>
          <div className="flex-1 space-y-2.5 overflow-y-auto px-4 py-3">
            {messages.length === 0 ? <p className="text-center text-xs text-muted-foreground">Say hi to the room 👋</p> : null}
            {messages.map((m, i) => (
              <div key={i} className={cn("flex flex-col", m.mine && "items-end")}>
                <span className="flex items-baseline gap-1.5">
                  <span className="font-mono text-[10px] uppercase tracking-wide" style={{ color: m.color }}>{m.name}</span>
                  {m.ts ? <span className="font-mono text-[9px] text-muted-foreground">{fmtTime(m.ts)}</span> : null}
                </span>
                <span className={cn("mt-0.5 max-w-[85%] rounded-md border-2 px-2.5 py-1.5 text-sm", m.mine ? "border-primary bg-accent text-accent-foreground" : "border-primary/40 bg-card text-foreground")}>{m.text}</span>
              </div>
            ))}
            <div ref={endRef} />
          </div>
          <div className="flex items-center gap-2 border-t-2 border-dashed border-primary/40 px-3 py-2.5">
            <input value={text} onChange={(e) => setText(e.target.value)} onKeyDown={(e) => e.key === "Enter" && sendMsg()}
              placeholder="Message…" className="min-w-0 flex-1 rounded-md border-2 border-primary/60 bg-card px-2.5 py-1.5 text-sm text-foreground outline-none placeholder:text-muted-foreground" />
            <button type="button" onClick={sendMsg} aria-label="Send"
              className="flex size-9 shrink-0 items-center justify-center rounded-md border-2 border-primary bg-primary text-primary-foreground transition-colors hover:bg-primary/90">
              <Send className="size-4" />
            </button>
          </div>
        </div>
      );
    }

    // ----------------------------------------------------------------- //
    // components/photo-stack.tsx  (editable title / caption / date / time)
    // ----------------------------------------------------------------- //
    // A few built-in sample photos the user can drop in instead of uploading.
    const SAMPLE_PHOTOS = [
      { src: "/assets/photos/gastown-steam-clock.jpg", alt: "The Gastown steam clock, Vancouver", title: "Gastown Steam Clock", caption: "Steam o'clock in Gastown." },
      { src: "/assets/photos/waterfront-gardens.jpg", alt: "A waterfront park with flowers", title: "Waterfront Gardens", caption: "Flowers along the boardwalk." },
      { src: "/assets/photos/cherry-blossoms.jpg", alt: "Cherry blossoms against a blue sky", title: "Cherry Blossoms", caption: "Cherry blossoms against a clear sky." },
      { src: "/assets/photos/maple-canopy.jpg", alt: "Red and green maple leaves", title: "Maple Canopy", caption: "Spring maples catching fire." },
    ];

    // A photo cropped with object-cover whose focal point the user can drag to
    // change what's framed (useful for high-res images that get cropped). The
    // focus is stored as object-position percentages on the photo. Dragging the
    // image pans the visible window; we commit the new focus via onReposition.
    function DraggableImage({ src, alt, focusX, focusY, onReposition }) {
      const ref = useRef(null);
      const drag = useRef(null);
      const [fx, setFx] = useState(focusX);
      const [fy, setFy] = useState(focusY);
      // keep local focus in sync if the photo (or its stored focus) changes
      useEffect(() => { setFx(focusX); setFy(focusY); }, [src, focusX, focusY]);

      function onPointerDown(e) {
        const el = ref.current; if (!el) return;
        el.setPointerCapture && el.setPointerCapture(e.pointerId);
        drag.current = { x: e.clientX, y: e.clientY, fx, fy, w: el.clientWidth, h: el.clientHeight };
      }
      function onPointerMove(e) {
        if (!drag.current) return;
        const d = drag.current;
        // dragging right should reveal the LEFT of the image → focus decreases.
        // scale movement so a full-width drag spans the whole 0-100 range.
        const dx = (e.clientX - d.x) / Math.max(1, d.w) * 100;
        const dy = (e.clientY - d.y) / Math.max(1, d.h) * 100;
        setFx(Math.min(100, Math.max(0, d.fx - dx)));
        setFy(Math.min(100, Math.max(0, d.fy - dy)));
      }
      function onPointerUp(e) {
        if (!drag.current) return;
        drag.current = null;
        if (onReposition) onReposition(Math.round(fx), Math.round(fy));
      }
      return (
        <div ref={ref}
          onPointerDown={onPointerDown} onPointerMove={onPointerMove}
          onPointerUp={onPointerUp} onPointerCancel={onPointerUp}
          className="group absolute inset-0 cursor-grab touch-none active:cursor-grabbing"
          title="Drag to reposition">
          <img src={src || "/assets/placeholder.svg"} alt={alt}
            draggable={false}
            className="h-full w-full select-none object-cover"
            style={{ objectPosition: fx + "% " + fy + "%" }} />
          {/* subtle reposition affordance */}
          <span className="pointer-events-none absolute bottom-1.5 left-1.5 flex items-center gap-1 rounded bg-black/45 px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wide text-white opacity-0 transition-opacity group-hover:opacity-100">
            <Navigation className="size-2.5" /> drag to reframe
          </span>
        </div>
      );
    }

    function PhotoStack({ photo, index, total, slideDir, destroying, onDestroyed, onAdd, onAddSample, onLoadSamples, onReposition, onDelete, title, caption, date, time, onTitleChange, onCaptionChange, onDateChange, onTimeChange }) {
      if (!photo) {
        // no photos left - show an empty polaroid inviting an upload, plus a
        // row of sample photos the user can add with one tap.
        return (
          <div className="flex flex-col items-center gap-4">
            <button type="button" onClick={() => onAdd && onAdd()}
              aria-label="Add a photo"
              className="group relative w-full max-w-xs cursor-pointer rounded-md border-2 border-dashed border-primary/50 bg-card p-3 text-left shadow-sm transition-colors hover:border-primary hover:bg-accent/40">
              {/* the photo window */}
              <div className="relative flex aspect-square flex-col items-center justify-center gap-2 overflow-hidden rounded-sm border-2 border-dashed border-primary/40 bg-[oklch(0.97_0.005_210)]">
                <Upload className="size-8 text-primary/60 transition-transform group-hover:-translate-y-0.5" />
                <span className="font-mono text-[11px] uppercase tracking-widest text-primary/70">Upload a photo</span>
              </div>
              {/* the white caption strip of a polaroid */}
              <div className="mt-3 flex h-12 items-center justify-center rounded-sm">
                <span className="font-hand text-sm text-muted-foreground">Your album is empty - add a memory</span>
              </div>
            </button>
            <p className="text-center font-serif text-xs italic text-primary">Tap the polaroid to upload your own photos.</p>
            <button type="button" onClick={() => onLoadSamples && onLoadSamples()}
              className="rounded-md border-2 border-primary bg-primary px-5 py-2.5 font-mono text-xs font-semibold uppercase tracking-wide text-primary-foreground transition-colors hover:bg-primary/90">
              ✨ Try a sample album
            </button>
            {/* or add individual samples */}
            <div className="w-full max-w-xs">
              <p className="mb-1.5 text-center font-mono text-[10px] uppercase tracking-widest text-muted-foreground">Or add one at a time</p>
              <div className="grid grid-cols-4 gap-2">
                {SAMPLE_PHOTOS.map((s, i) => (
                  <button key={i} type="button" onClick={() => onAddSample && onAddSample(s)}
                    title={"Add: " + s.title} aria-label={"Add sample: " + s.title}
                    className="group relative aspect-square overflow-hidden rounded-sm border-2 border-primary/40 transition-colors hover:border-primary">
                    <Img src={s.src} alt={s.alt} fill className="object-cover transition-transform group-hover:scale-105" />
                    <span className="absolute inset-0 flex items-end justify-center bg-gradient-to-t from-black/50 to-transparent p-1 opacity-0 transition-opacity group-hover:opacity-100">
                      <Plus className="size-4 text-white" />
                    </span>
                  </button>
                ))}
              </div>
            </div>
          </div>
        );
      }
      return (
        <div className="flex flex-col items-center gap-4">
          <div className="relative w-full max-w-xs">
            <div className="absolute inset-0 translate-x-3 translate-y-3 rotate-2 rounded-md border-2 border-primary/30 bg-card" />
            <div className="absolute inset-0 translate-x-1.5 translate-y-1.5 rotate-1 rounded-md border-2 border-primary/40 bg-card" />
            {/* keyed by index so the slide animation re-triggers on each browse;
                the direction follows whether you went forward or back. When the
                user removes a photo, `destroying` swaps in the teardown anim and
                onAnimationEnd actually drops it. We only act on the destroy
                animation (not the bubbled tear-flash or a slide-in). */}
            <div key={destroying ? "destroy-" + index : "card-" + index}
              onAnimationEnd={(e) => {
                if (destroying && onDestroyed && e.target === e.currentTarget
                    && e.animationName && e.animationName.indexOf("sozai-destroy") !== -1) {
                  onDestroyed();
                }
              }}
              className={cn("relative rounded-md border-2 border-primary bg-card p-3 shadow-sm",
                destroying ? "sozai-destroy" : (slideDir === "left" ? "sozai-slide-left" : "sozai-slide-right"))}>
              {destroying ? <span className="sozai-tear" /> : null}
              <div className="relative">
                <div className="relative aspect-square overflow-hidden rounded-sm border-2 border-primary/70">
                  <DraggableImage src={photo.src} alt={photo.alt}
                    focusX={photo.focusX != null ? photo.focusX : 50}
                    focusY={photo.focusY != null ? photo.focusY : 50}
                    onReposition={onReposition} />
                  <span className="pointer-events-none absolute right-2 top-2 rounded-sm bg-card/90 px-2 py-0.5 font-mono text-xs font-semibold text-primary">{index + 1}/{total}</span>
                </div>
                {/* delete this photo: a small x at the polaroid's corner */}
                {onDelete ? (
                  <button type="button" onClick={onDelete} aria-label="Delete this photo" title="Delete this photo"
                    className="absolute -right-2.5 -top-2.5 z-30 flex size-7 items-center justify-center rounded-full border-2 border-[#800020] bg-card text-[#800020] shadow-md transition-colors hover:bg-[#800020] hover:text-white">
                    <X className="size-3.5" />
                  </button>
                ) : null}
              </div>
              <div className="mt-3 rounded-sm border-2 border-primary/70 px-3 py-2">
                <input
                  value={title}
                  onChange={(e) => onTitleChange(e.target.value)}
                  placeholder="Add a title..."
                  aria-label="Photo title"
                  className="w-full bg-transparent font-hand text-lg text-foreground outline-none placeholder:font-normal placeholder:text-muted-foreground"
                />
                <textarea
                  value={caption}
                  onChange={(e) => onCaptionChange(e.target.value)}
                  rows={2}
                  placeholder="Add a caption..."
                  aria-label="Photo caption"
                  className="mt-1.5 w-full resize-none bg-transparent font-hand text-sm text-foreground outline-none placeholder:text-muted-foreground"
                />
                <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground">
                  <span className="flex items-center gap-1.5"><Calendar className="size-3.5 text-primary" />
                    <input value={date} onChange={(e) => onDateChange(e.target.value)} aria-label="Date" placeholder="Date"
                      className="w-28 bg-transparent text-xs text-foreground outline-none placeholder:text-muted-foreground" />
                  </span>
                  <span className="flex items-center gap-1.5"><Clock className="size-3.5 text-primary" />
                    <input value={time} onChange={(e) => onTimeChange(e.target.value)} aria-label="Time" placeholder="Time"
                      className="w-20 bg-transparent text-xs text-foreground outline-none placeholder:text-muted-foreground" />
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    }

    // ----------------------------------------------------------------- //
    // Location picker - a click-to-open radius map for a photo's "general
    // area". Reuses the same free MapLibre + Nominatim stack as the big map,
    // so a photo's place is editable by dragging a pin or typing an address.
    // ----------------------------------------------------------------- //
    function LocationPicker({ lat, lon, radius, locationName, onChange, onClose }) {
      const elRef = useRef(null);
      const mapRef = useRef(null);
      const markerRef = useRef(null);
      const ptRef = useRef({ lon: lon != null ? lon : -123.116, lat: lat != null ? lat : 49.2462 });
      const [addr, setAddr] = useState("");
      const [busy, setBusy] = useState(false);
      const [rad, setRad] = useState(radius || 600);
      const [name, setName] = useState(locationName || "");
      const radRef = useRef(rad);
      radRef.current = rad;

      function paintCircle() {
        const m = mapRef.current; if (!m) return;
        const src = m.getSource("loc-rad");
        if (src) src.setData(circlePolygon(ptRef.current.lon, ptRef.current.lat, radRef.current));
      }
      async function commit(extra) {
        const c = ptRef.current;
        let nm = name;
        const rg = await reverseGeocode(c.lat, c.lon);
        if (rg) { nm = rg; setName(rg); }
        onChange(Object.assign({ lat: c.lat, lon: c.lon, locationName: nm, radius: radRef.current, pinned: true }, extra || {}));
      }
      useEffect(() => {
        if (!window.maplibregl || !elRef.current) return;
        const map = new window.maplibregl.Map({
          container: elRef.current, style: watercolorVectorStyle(),
          center: [ptRef.current.lon, ptRef.current.lat], zoom: lat != null ? 13 : 10,
          attributionControl: false,
        });
        mapRef.current = map;
        map.on("load", () => {
          map.resize();
          map.addSource("loc-rad", { type: "geojson", data: circlePolygon(ptRef.current.lon, ptRef.current.lat, radRef.current) });
          map.addLayer({ id: "loc-rad-fill", type: "fill", source: "loc-rad", paint: { "fill-color": "rgb(91,60,196)", "fill-opacity": 0.14 } });
          map.addLayer({ id: "loc-rad-line", type: "line", source: "loc-rad", paint: { "line-color": "rgb(91,60,196)", "line-width": 1.4, "line-dasharray": [2, 2] } });
        });
        map.on("click", (e) => {
          ptRef.current = { lon: e.lngLat.lng, lat: e.lngLat.lat };
          markerRef.current && markerRef.current.setLngLat([e.lngLat.lng, e.lngLat.lat]);
          paintCircle(); commit();
        });
        const marker = new window.maplibregl.Marker({ draggable: true, color: "#5b3cc4" })
          .setLngLat([ptRef.current.lon, ptRef.current.lat]).addTo(map);
        markerRef.current = marker;
        marker.on("drag", () => { const ll = marker.getLngLat(); ptRef.current = { lon: ll.lng, lat: ll.lat }; paintCircle(); });
        marker.on("dragend", () => commit());
        return () => map.remove();
      }, []); // eslint-disable-line
      async function search(e) {
        e.preventDefault();
        const q = addr.trim(); if (!q) return;
        setBusy(true);
        try {
          const hits = await geocode(q, { limit: 1 });
          if (hits.length) {
            ptRef.current = { lon: hits[0].lon, lat: hits[0].lat };
            markerRef.current && markerRef.current.setLngLat([hits[0].lon, hits[0].lat]);
            mapRef.current && mapRef.current.flyTo({ center: [hits[0].lon, hits[0].lat], zoom: 13, duration: 800 });
            paintCircle();
            const nm = (hits[0].label || q).split(",").slice(0, 2).join(",").trim();
            setName(nm);
            onChange({ lat: hits[0].lat, lon: hits[0].lon, locationName: nm, radius: radRef.current, pinned: true });
          }
        } finally { setBusy(false); }
      }
      function onRad(v) {
        setRad(v); radRef.current = v; paintCircle();
        onChange({ lat: ptRef.current.lat, lon: ptRef.current.lon, locationName: name, radius: v, pinned: true });
      }
      function clearLoc() { onChange({ lat: null, lon: null, locationName: "", radius: null, pinned: false }); onClose && onClose(); }
      return (
        <div className="absolute right-0 top-full z-50 mt-2 w-72 rounded-lg border-2 border-primary bg-card p-3 shadow-xl">
          <form onSubmit={search} className="mb-2 flex items-center gap-1.5">
            <input value={addr} onChange={(e) => setAddr(e.target.value)} placeholder="Search an address or place…"
              className="min-w-0 flex-1 rounded-md border-2 border-primary/40 bg-card px-2.5 py-1.5 font-mono text-[11px] text-foreground outline-none placeholder:text-muted-foreground focus:border-primary" />
            <button type="submit" disabled={busy} className="shrink-0 rounded-md border-2 border-primary bg-primary px-2.5 py-1.5 font-mono text-[11px] uppercase text-primary-foreground disabled:opacity-50">{busy ? "…" : "Go"}</button>
          </form>
          <div ref={elRef} className="h-40 w-full overflow-hidden rounded-md border-2 border-primary/40" />
          <p className="mt-1.5 font-mono text-[10px] leading-snug text-muted-foreground">Drag the pin or tap the map — this is your photo's general area.</p>
          <div className="mt-2 flex items-center gap-2">
            <span className="font-mono text-[10px] uppercase tracking-wide text-primary">Radius</span>
            <input type="range" min="100" max="5000" step="100" value={rad} onChange={(e) => onRad(parseInt(e.target.value, 10))} className="min-w-0 flex-1 accent-primary" />
            <span className="w-12 shrink-0 text-right font-mono text-[10px] text-muted-foreground">{rad >= 1000 ? (rad / 1000).toFixed(1) + "km" : rad + "m"}</span>
          </div>
          <div className="mt-2 flex items-center justify-between gap-2">
            <button type="button" onClick={clearLoc} className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground hover:text-foreground">Clear</button>
            <button type="button" onClick={onClose} className="rounded-md border-2 border-primary px-3 py-1 font-mono text-[10px] uppercase tracking-wide text-primary hover:bg-accent">Done</button>
          </div>
        </div>
      );
    }

    function LocationField({ lat, lon, locationName, radius, onChange }) {
      const [open, setOpen] = useState(false);
      const has = !!(locationName || lat != null);
      const label = locationName || (lat != null ? Number(lat).toFixed(3) + ", " + Number(lon).toFixed(3) : "Add location");
      return (
        <div className="relative flex min-w-0 flex-1 items-center gap-2 px-2.5 py-2.5">
          <MapPin className="size-4 shrink-0 text-primary" />
          <button type="button" onClick={() => setOpen((v) => !v)} title={has ? label : "Add a location"}
            className={cn("min-w-0 flex-1 truncate text-left text-sm outline-none", has ? "text-foreground" : "text-muted-foreground")}>
            {label}
          </button>
          {open ? <LocationPicker lat={lat} lon={lon} radius={radius} locationName={locationName} onChange={onChange} onClose={() => setOpen(false)} /> : null}
        </div>
      );
    }

    // ----------------------------------------------------------------- //
    // components/details-form.tsx
    // ----------------------------------------------------------------- //
    function DetailsForm({ title, onTitleChange, caption, onCaptionChange, date, onDateChange, time, onTimeChange, lat, lon, locationName, radius, onLocationChange, tags, onTagsChange, onSubmit, onAutoCaption, autoBusy, autoStage, autoError, captionPrompt, onCaptionPromptChange, captionModel, onAutoTitle, titleBusy, titleStage, titleError, titlePrompt, onTitlePromptChange, onAutoTags, tagsBusy, tagsStage, tagsError, tagsPrompt, onTagsPromptChange, onCancelGen }) {
      const CancelGen = () => (
        <button type="button" onClick={onCancelGen}
          className="relative shrink-0 rounded-full border-2 border-primary/40 bg-card/85 px-2.5 py-0.5 font-mono text-[10px] uppercase tracking-wide text-primary transition-colors hover:bg-accent hover:text-foreground">
          Cancel
        </button>
      );
      const [showPrompt, setShowPrompt] = useState(false);
      const [showTitlePrompt, setShowTitlePrompt] = useState(false);
      const [showTagsPrompt, setShowTagsPrompt] = useState(false);
      const DEFAULT_PROMPT_HINT = "Write a short, warm one-sentence caption for a personal photo album.";
      const DEFAULT_TITLE_HINT = "Write a very short, evocative title (2-5 words) for this photo.";
      const DEFAULT_TAGS_HINT = "List 3 to 6 short, comma-separated tags for this photo.";
      return (
        <div className="flex flex-col gap-6">
          {/* title */}
          <div className="space-y-2">
            <div className="flex items-center justify-between gap-2">
              <label htmlFor="title" className="font-mono text-xs font-semibold uppercase tracking-wide text-foreground">Title</label>
              <div className="flex items-center gap-1.5">
                <MicButton field="title" title="Dictate the title"
                  onText={(t) => onTitleChange(((title || "").trim() ? title.trim() + " " : "") + t)} />
                <button type="button" onClick={() => setShowTitlePrompt((v) => !v)} aria-expanded={showTitlePrompt}
                  title="Customize the AI title prompt"
                  className={cn("flex items-center gap-1.5 rounded-md border-2 px-2.5 py-1 font-mono text-[11px] uppercase tracking-wide transition-colors",
                    showTitlePrompt ? "border-primary bg-accent text-foreground" : "border-primary/60 text-primary hover:bg-accent")}>
                  <Settings className="size-3.5" /> Prompt
                </button>
                <button type="button" onClick={onAutoTitle} disabled={titleBusy}
                  className="flex items-center gap-1.5 rounded-md border-2 border-primary/60 px-2.5 py-1 font-mono text-[11px] uppercase tracking-wide text-primary transition-colors hover:bg-accent disabled:opacity-60">
                  <Wand2 className={cn("size-3.5", titleBusy && "animate-pulse")} /> {titleBusy ? "Naming…" : "Auto-generate"}
                </button>
              </div>
            </div>

            {/* editable, independent title prompt */}
            {showTitlePrompt ? (
              <div className="rounded-md border-2 border-primary/50 bg-accent/30 p-3">
                <div className="flex items-center justify-between gap-2">
                  <label htmlFor="title-prompt" className="font-mono text-[10px] font-semibold uppercase tracking-wide text-foreground">Title prompt</label>
                  <span className="flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-wide text-muted-foreground" title="Active vision-language model">
                    <Cpu className="size-3 text-primary" /> {captionModel || "loading model…"}
                  </span>
                </div>
                <textarea id="title-prompt" value={titlePrompt} onChange={(e) => onTitlePromptChange(e.target.value)} rows={2}
                  placeholder={DEFAULT_TITLE_HINT}
                  className="mt-2 w-full resize-none rounded-md border-2 border-primary/40 bg-card px-2.5 py-2 text-xs leading-relaxed text-foreground outline-none placeholder:text-muted-foreground focus:border-primary" />
                <div className="mt-1.5 flex items-center justify-between gap-2">
                  <p className="font-mono text-[9px] leading-snug tracking-wide text-muted-foreground">Separate from the caption prompt. Leave blank to use the default.</p>
                  {titlePrompt ? (
                    <button type="button" onClick={() => onTitlePromptChange("")}
                      className="shrink-0 font-mono text-[9px] uppercase tracking-widest text-primary underline-offset-2 hover:underline">reset</button>
                  ) : null}
                </div>
              </div>
            ) : null}

            <div className="relative rounded-md border-2 border-primary/70 bg-card">
              <input
                id="title"
                value={title}
                onChange={(e) => onTitleChange(e.target.value)}
                placeholder="Name this moment…"
                aria-label="Photo title"
                className="w-full rounded-md bg-transparent px-3 py-2.5 font-hand text-lg text-foreground outline-none placeholder:font-normal placeholder:text-muted-foreground"
              />
              {/* developing overlay - same darkroom effect as the caption */}
              {titleBusy ? (
                <div className="absolute inset-0 flex items-center justify-center gap-2 overflow-hidden rounded-md"
                  role="status" aria-live="polite"
                  style={{ background: "linear-gradient(180deg, var(--card), color-mix(in oklch, var(--accent) 60%, var(--card)))" }}>
                  <span aria-hidden="true" className="absolute inset-0"
                    style={{ background: "linear-gradient(110deg, transparent 20%, color-mix(in oklch, var(--primary) 22%, transparent) 50%, transparent 80%)", backgroundSize: "200% 100%", animation: "sozai-shimmer 1.3s linear infinite" }} />
                  <span className="relative flex items-center gap-2 font-mono text-[11px] uppercase tracking-widest text-primary">
                    <Wand2 className="size-3.5 animate-pulse" /> {titleStage || "Naming…"}
                  </span>
                  <span className="relative flex gap-1" aria-hidden="true">
                    <span className="size-1.5 rounded-full bg-primary" style={{ animation: "sozai-bounce 1s infinite", animationDelay: "0ms" }} />
                    <span className="size-1.5 rounded-full bg-primary" style={{ animation: "sozai-bounce 1s infinite", animationDelay: "150ms" }} />
                    <span className="size-1.5 rounded-full bg-primary" style={{ animation: "sozai-bounce 1s infinite", animationDelay: "300ms" }} />
                  </span>
                  <CancelGen />
                </div>
              ) : null}
            </div>
            {titleError ? <p role="status" className="font-mono text-[11px] uppercase tracking-wide text-muted-foreground">{titleError}</p> : null}
          </div>

          <div className="space-y-2">
            <div className="flex items-center justify-between gap-2">
              <label htmlFor="caption" className="font-mono text-xs font-semibold uppercase tracking-wide text-foreground">Caption</label>
              <div className="flex items-center gap-1.5">
                <MicButton field="caption" title="Dictate the caption"
                  onText={(t) => onCaptionChange(((caption || "").trim() ? caption.trim() + " " : "") + t)} />
                <button type="button" onClick={() => setShowPrompt((v) => !v)} aria-expanded={showPrompt}
                  title="Customize the AI prompt"
                  className={cn("flex items-center gap-1.5 rounded-md border-2 px-2.5 py-1 font-mono text-[11px] uppercase tracking-wide transition-colors",
                    showPrompt ? "border-primary bg-accent text-foreground" : "border-primary/60 text-primary hover:bg-accent")}>
                  <Settings className="size-3.5" /> Prompt
                </button>
                <button type="button" onClick={onAutoCaption} disabled={autoBusy}
                  className="flex items-center gap-1.5 rounded-md border-2 border-primary/60 px-2.5 py-1 font-mono text-[11px] uppercase tracking-wide text-primary transition-colors hover:bg-accent disabled:opacity-60">
                  <Wand2 className={cn("size-3.5", autoBusy && "animate-pulse")} /> {autoBusy ? "Developing…" : "Auto-generate"}
                </button>
              </div>
            </div>

            {/* editable prompt + which model is in use */}
            {showPrompt ? (
              <div className="rounded-md border-2 border-primary/50 bg-accent/30 p-3">
                <div className="flex items-center justify-between gap-2">
                  <label htmlFor="cap-prompt" className="font-mono text-[10px] font-semibold uppercase tracking-wide text-foreground">Caption prompt</label>
                  <span className="flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-wide text-muted-foreground" title="Active vision-language model">
                    <Cpu className="size-3 text-primary" /> {captionModel || "loading model…"}
                  </span>
                </div>
                <textarea id="cap-prompt" value={captionPrompt} onChange={(e) => onCaptionPromptChange(e.target.value)} rows={2}
                  placeholder={DEFAULT_PROMPT_HINT}
                  className="mt-2 w-full resize-none rounded-md border-2 border-primary/40 bg-card px-2.5 py-2 text-xs leading-relaxed text-foreground outline-none placeholder:text-muted-foreground focus:border-primary" />
                <div className="mt-1.5 flex items-center justify-between gap-2">
                  <p className="font-mono text-[9px] leading-snug tracking-wide text-muted-foreground">Steers how captions are written. Leave blank to use the default.</p>
                  {captionPrompt ? (
                    <button type="button" onClick={() => onCaptionPromptChange("")}
                      className="shrink-0 font-mono text-[9px] uppercase tracking-widest text-primary underline-offset-2 hover:underline">reset</button>
                  ) : null}
                </div>
              </div>
            ) : null}

            <div className="relative rounded-md border-2 border-primary/70 bg-card">
              <textarea id="caption" value={caption} onChange={(e) => onCaptionChange(e.target.value)} rows={2}
                placeholder="Write something about this moment..."
                className="w-full resize-none rounded-md bg-transparent px-3 py-2.5 font-hand text-lg leading-relaxed text-foreground outline-none placeholder:text-muted-foreground" />
              {/* developing overlay: a darkroom-flavored caption "developing in the tray" */}
              {autoBusy ? (
                <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 overflow-hidden rounded-md"
                  role="status" aria-live="polite"
                  style={{ background: "linear-gradient(180deg, var(--card), color-mix(in oklch, var(--accent) 60%, var(--card)))" }}>
                  {/* sweeping "developer" shimmer */}
                  <span aria-hidden="true" className="absolute inset-0"
                    style={{ background: "linear-gradient(110deg, transparent 20%, color-mix(in oklch, var(--primary) 22%, transparent) 50%, transparent 80%)", backgroundSize: "200% 100%", animation: "sozai-shimmer 1.3s linear infinite" }} />
                  <span className="relative flex items-center gap-2 font-mono text-[11px] uppercase tracking-widest text-primary">
                    <Wand2 className="size-3.5 animate-pulse" /> {autoStage || "Developing…"}
                  </span>
                  <span className="relative flex gap-1" aria-hidden="true">
                    <span className="size-1.5 rounded-full bg-primary" style={{ animation: "sozai-bounce 1s infinite", animationDelay: "0ms" }} />
                    <span className="size-1.5 rounded-full bg-primary" style={{ animation: "sozai-bounce 1s infinite", animationDelay: "150ms" }} />
                    <span className="size-1.5 rounded-full bg-primary" style={{ animation: "sozai-bounce 1s infinite", animationDelay: "300ms" }} />
                  </span>
                  <CancelGen />
                </div>
              ) : null}
            </div>
            {autoError ? <p role="status" className="font-mono text-[11px] uppercase tracking-wide text-muted-foreground">{autoError}</p> : null}
          </div>
          <div className="space-y-2">
            <span className="font-mono text-xs font-semibold uppercase tracking-wide text-foreground">When &amp; Where</span>
            {/* date + time share a row; location gets its own line (it bled before) */}
            <div className="flex items-stretch divide-x-2 divide-primary/40 rounded-md border-2 border-primary/70 bg-card">
              <div className="flex min-w-0 flex-1 items-center gap-2 px-3 py-2.5">
                <Calendar className="size-4 shrink-0 text-primary" />
                <input value={date} onChange={(e) => onDateChange(e.target.value)} aria-label="Date" placeholder="Date"
                  className="min-w-0 w-full bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground" />
              </div>
              <div className="flex min-w-0 flex-1 items-center gap-2 px-3 py-2.5">
                <Clock className="size-4 shrink-0 text-primary" />
                <input value={time} onChange={(e) => onTimeChange(e.target.value)} aria-label="Time" placeholder="Time"
                  className="min-w-0 w-full bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground" />
              </div>
            </div>
            <div className="flex items-stretch rounded-md border-2 border-primary/70 bg-card">
              <LocationField lat={lat} lon={lon} locationName={locationName} radius={radius} onChange={onLocationChange} />
            </div>
          </div>
        </div>
      );
    }

    // ----------------------------------------------------------------- //
    // components/album-sidebar.tsx
    // ----------------------------------------------------------------- //
    function AlbumSidebar({ albums, selectedId, onSelect, onNewAlbum }) {
      return (
        <div className="flex flex-col rounded-md border-2 border-primary/70 bg-card p-4">
          <span className="font-mono text-xs font-semibold uppercase tracking-wide text-foreground">Add to</span>
          <button type="button" onClick={onNewAlbum}
            className="mt-3 flex items-center gap-2.5 rounded-sm border-2 border-dashed border-primary/60 px-3 py-2.5 text-sm font-medium text-primary transition-colors hover:bg-accent">
            <FolderPlus className="size-5" /><span className="font-mono uppercase tracking-wide">New Album</span>
          </button>
          <ul className="mt-3 flex flex-col gap-2">
            {albums.map((album) => {
              const selected = album.id === selectedId;
              return (
                <li key={album.id}>
                  <button type="button" onClick={() => onSelect(album.id)} aria-pressed={selected}
                    className={cn("flex w-full items-center gap-3 rounded-sm border-2 px-2 py-2 text-left transition-colors", selected ? "border-primary bg-accent" : "border-transparent hover:bg-accent/60")}>
                    <span className="relative size-12 shrink-0 overflow-hidden rounded-sm border-2 border-primary/70"><Img src={album.thumbnail} alt="" fill className="object-cover" sizes="48px" /></span>
                    <span className="min-w-0">
                      <span className="block truncate font-mono text-sm font-semibold uppercase tracking-wide text-foreground">{album.name}</span>
                      <span className="block text-xs text-muted-foreground">{album.photoCount} photos</span>
                    </span>
                  </button>
                </li>
              );
            })}
          </ul>
        </div>
      );
    }

    // ----------------------------------------------------------------- //
    // components/add-to-album.tsx  (+ shared field sync)
    // ----------------------------------------------------------------- //
    const DEFAULT_DATE = "June 7, 2026";
    const DEFAULT_TIME = "10:42 AM";

    function AddToAlbum({ onAdded, onOpenSettings, onOpenPets, mapVariant, setMapVariant, stackPhotos, setStackPhotos }) {
      const { settings, update } = useSettings();
      const [captionModel, setCaptionModel] = useState("");

      // Ask the backend which vision-language model is active, to show in the UI.
      useEffect(() => {
        let alive = true;
        (async () => {
          try {
            const gr = await window.__gradioReady;
            if (!gr) return;
            const res = await gr.predict("/caption_model", {});
            const out = Array.isArray(res.data) ? res.data[0] : res.data;
            if (alive && out) setCaptionModel(String(out).trim());
          } catch (e) {}
        })();
        return () => { alive = false; };
      }, []);

      const setCaptionPrompt = (val) => update({ captionPrompt: val });
      const setTitlePrompt = (val) => update({ titlePrompt: val });
      const addPhotoRef = useRef(null);
      const [destroying, setDestroying] = useState(false);   // polaroid teardown animation in progress
      const removingRef = useRef(false);   // blocks re-entry from a second click
      const removeTokenRef = useRef(0);    // increments per click; identifies the active removal
      const doneTokenRef = useRef(-1);     // the token already handled (prevents double-remove)
      const pendingRemoveRef = useRef(null);   // index captured when the X was pressed
      const [photoIndex, setPhotoIndex] = useState(0);
      const [slideDir, setSlideDir] = useState("right");   // polaroid slide direction when browsing
      const [tags, setTags] = useState("ottawa, architecture, history, travel");
      const [selectedAlbum] = useState("vancouver");
      const [confirmation, setConfirmation] = useState(null);
      const [validationError, setValidationError] = useState(null);
      const [autoBusy, setAutoBusy] = useState(false);
      const [autoStage, setAutoStage] = useState("");
      const [autoError, setAutoError] = useState(null);
      const [titleBusy, setTitleBusy] = useState(false);
      const [titleError, setTitleError] = useState(null);
      const [titleStage, setTitleStage] = useState("");
      const [tagsBusy, setTagsBusy] = useState(false);
      const [tagsError, setTagsError] = useState(null);
      const [tagsStage, setTagsStage] = useState("");

      // remote field edits from collaborators - apply by photo index onto the
      // single stackPhotos source of truth.
      useEffect(() => Collab.on("object_updated", (m) => {
        if (typeof m.index !== "number" || !m.kind) return;
        setStackPhotos((prev) => prev.map((p, i) => (i === m.index ? { ...p, [m.kind]: m.value } : p)));
      }), []);

      // follow a collaborator to the photo they switch to (when follow is on)
      useEffect(() => Collab.on("active_image", (m) => {
        if (window.__sozaiFollow !== false && typeof m.index === "number") setPhotoIndex(m.index);
      }), []);

      // Keep photoIndex valid whenever the photo set changes (removals, adds,
      // collab edits). This is the single source of truth that prevents
      // `photo` from ever being undefined and blanking the card.
      useEffect(() => {
        if (stackPhotos.length === 0) return;
        if (photoIndex > stackPhotos.length - 1) {
          setPhotoIndex(stackPhotos.length - 1);
        } else if (photoIndex < 0) {
          setPhotoIndex(0);
        }
      }, [stackPhotos.length, photoIndex]);

      const safeIndex = stackPhotos.length ? Math.min(Math.max(photoIndex, 0), stackPhotos.length - 1) : 0;
      const photo = stackPhotos[safeIndex];
      // title/caption/date/time now live ON the photo object - one source of
      // truth, so they can never desync from the photo list (which was the bug
      // behind the wrong counter + jumping to empty after one removal).
      const title = (photo && photo.title != null) ? photo.title : "";
      const caption = (photo && photo.caption != null) ? photo.caption : "";
      const date = (photo && photo.date != null && photo.date !== "") ? photo.date : DEFAULT_DATE;
      const time = (photo && photo.time != null && photo.time !== "") ? photo.time : DEFAULT_TIME;

      // Seed the shared photo store with the album photos + their fields so the
      // Map of My Time draft tray can pick and pin them (persisted).
      useEffect(() => {
        stackPhotos.forEach((p) => {
          window.SozaiPhotos.upsert(p.id, {
            src: p.src, alt: p.alt || "",
            title: p.title || "", caption: p.caption || "",
            date: p.date || "", time: p.time || "",
          });
        });
      }, []); // eslint-disable-line

      // Edit a field on the current photo: updates the single source of truth,
      // broadcasts to collaborators, and mirrors to the shared store.
      function makeFieldSetter(kind) {
        return (value) => {
          setStackPhotos((prev) => prev.map((p, i) => (i === safeIndex ? { ...p, [kind]: value } : p)));
          Collab.send("object_updated", { kind, index: safeIndex, value });
          const pid = photo && photo.id;
          if (pid) window.SozaiPhotos.upsert(pid, { [kind]: value });
        };
      }
      const setTitle = makeFieldSetter("title");
      const setCaption = makeFieldSetter("caption");
      const setDate = makeFieldSetter("date");
      const setTime = makeFieldSetter("time");
      // The current photo's location (general area), edited via the radius map.
      const lat = (photo && photo.lat != null) ? photo.lat : null;
      const lon = (photo && photo.lon != null) ? photo.lon : null;
      const locationName = (photo && photo.locationName) || "";
      const radius = (photo && photo.radius != null) ? photo.radius : null;
      // A location edit touches several fields at once (lat/lon/name/radius +
      // the pinned flag) - mirror the whole patch to the photo and shared store.
      const setLocation = (patch) => {
        setStackPhotos((prev) => prev.map((p, i) => (i === safeIndex ? { ...p, ...patch } : p)));
        const pid = photo && photo.id;
        if (pid) window.SozaiPhotos.upsert(pid, patch);
        Collab.send("object_updated", { kind: "location", index: safeIndex, value: patch });
      };
      // reposition the focal point of the current photo (object-position %),
      // saved on the photo + shared store so it persists.
      function onReposition(fx, fy) {
        setStackPhotos((prev) => prev.map((p, i) => (i === safeIndex ? { ...p, focusX: fx, focusY: fy } : p)));
        const pid = photo && photo.id;
        if (pid) window.SozaiPhotos.upsert(pid, { focusX: fx, focusY: fy });
      }
      // tags are a single string for the active photo; mirror them onto the
      // shared store (by photo id) so they persist and show up in exports.
      const setTagsSynced = (value) => {
        setTags(value);
        const pid = stackPhotos[safeIndex] && stackPhotos[safeIndex].id;
        if (pid) window.SozaiPhotos.upsert(pid, { tags: value });
      };

      async function onAddPhotos(e) {
        const files = Array.from(e.target.files || []);
        e.target.value = "";
        const base = stackPhotos.length;
        // enforce the top-level image cap
        if (base >= MAX_IMAGES) {
          window.alert("You cannot upload more than " + MAX_IMAGES + " images.");
          return;
        }
        const room = MAX_IMAGES - base;   // how many more we can accept
        let filesToAdd = files;
        if (files.length > room) {
          filesToAdd = files.slice(0, room);
          window.alert("You cannot upload more than " + MAX_IMAGES + " images. "
            + "Only the first " + room + " of your " + files.length + " selected image"
            + (files.length === 1 ? "" : "s") + " were added.");
        }
        let added = 0;
        for (const file of filesToAdd) {
          // stop if we somehow hit the cap mid-batch
          if (base + added >= MAX_IMAGES) break;
          // shared pipeline: validates .png/.jpg/.jpeg, runs NSFW, shows overlay
          const result = await processUpload(file);
          if (!result.ok) continue;   // rejected (bad type / nsfw / unreadable)
          const dataUrl = result.dataUrl;
          const exif = await readExif(file);
          const newPhoto = {
            src: dataUrl, alt: file.name.replace(/\.[^.]+$/, ""),
            title: "", caption: "",
            date: exif.date || DEFAULT_DATE, time: exif.time || DEFAULT_TIME,
            ...(exif.lat != null ? { lat: exif.lat, lon: exif.lon, pinned: true } : {}),
          };
          const id = window.SozaiPhotos.add(newPhoto);
          newPhoto.id = id;
          setStackPhotos((prev) => [...prev, newPhoto]);
          added++;
          // resolve a readable "general area" for the EXIF GPS, in the background
          if (exif.lat != null) {
            reverseGeocode(exif.lat, exif.lon).then((nm) => {
              if (!nm) return;
              window.SozaiPhotos.upsert(id, { locationName: nm });
              setStackPhotos((prev) => prev.map((p) => (p.id === id ? { ...p, locationName: nm } : p)));
            });
          }
        }
        if (added > 0) setPhotoIndex(base + added - 1);
      }

      // add a built-in sample photo (no upload / NSFW needed - trusted asset)
      function onAddSample(s) {
        const base = stackPhotos.length;
        if (base >= MAX_IMAGES) {
          window.alert("You cannot upload more than " + MAX_IMAGES + " images.");
          return;
        }
        const newPhoto = {
          src: s.src, alt: s.alt || "",
          title: s.title || "", caption: s.caption || "",
          date: DEFAULT_DATE, time: DEFAULT_TIME,
        };
        const id = window.SozaiPhotos.add(newPhoto);
        newPhoto.id = id;
        setStackPhotos((prev) => [...prev, newPhoto]);
        setPhotoIndex(base);
      }
      // "Try a sample" — load the whole built-in photo set at once (with their
      // real metadata + GPS), into both the stack and the shared store.
      function onLoadSamples() {
        const loaded = photos.slice(0, MAX_IMAGES).map((p) => ({
          id: p.id, src: p.src, alt: p.alt || "",
          title: p.defaultTitle || "", caption: p.defaultCaption || "",
          date: p.date || DEFAULT_DATE, time: p.time || DEFAULT_TIME,
          lat: p.lat != null ? p.lat : null, lon: p.lon != null ? p.lon : null,
        }));
        loaded.forEach((p) => window.SozaiPhotos.upsert(p.id, {
          src: p.src, alt: p.alt, title: p.title, caption: p.caption,
          date: p.date, time: p.time, lat: p.lat, lon: p.lon,
          pinned: p.lat != null && p.lon != null,
        }));
        setStackPhotos(loaded);
        setPhotoIndex(0);
      }

      // Release the one-removal-per-click guard only AFTER a removal has
      // actually committed (the photo count changed) and re-rendered.
      const prevLenRef = useRef(stackPhotos.length);
      useEffect(() => {
        if (stackPhotos.length !== prevLenRef.current) {
          prevLenRef.current = stackPhotos.length;
        }
      }, [stackPhotos.length]);

      function onRemovePhoto() {
        if (stackPhotos.length < 1) return;   // nothing to remove
        if (destroying || removingRef.current) return;
        const idx = safeIndex;            // capture the photo being removed NOW
        const token = ++removeTokenRef.current;   // unique id for THIS click
        removingRef.current = true;       // blocks a second click until this completes
        pendingRemoveRef.current = idx;
        if (window.__sozaiReduceMotion) { doRemovePhoto(idx, token); return; }
        setDestroying(true);   // PhotoStack adds the teardown class; onAnimationEnd → doRemovePhoto
        // Safety net: if animationend never fires, remove anyway. Both the
        // animationend handler and this timer call doRemovePhoto with the SAME
        // token; doRemovePhoto runs once per token, so the later one is a no-op
        // no matter how late it arrives (slow device, delayed animationend, …).
        setTimeout(() => doRemovePhoto(idx, token), 700);
      }
      function doRemovePhoto(idx, token) {
        // Accept only the first call for the current click's token. A call with
        // no/old token (e.g. a stale animationend from a previous click) is
        // ignored - this is what prevents double-removal regardless of timing.
        if (typeof token !== "number") token = removeTokenRef.current;
        if (token !== removeTokenRef.current) return;   // stale → ignore
        if (doneTokenRef.current === token) return;      // already handled this click
        doneTokenRef.current = token;
        if (typeof idx !== "number") idx = pendingRemoveRef.current;
        if (typeof idx !== "number") idx = safeIndex;
        const removedId = stackPhotos[idx] && stackPhotos[idx].id;
        if (removedId) window.SozaiPhotos.remove(removedId);
        setStackPhotos((prev) => prev.filter((_, i) => i !== idx));
        setPhotoIndex((prev) => {
          const next = prev > idx ? prev - 1 : prev;
          return Math.max(0, next);
        });
        setDestroying(false);
        removingRef.current = false;   // allow the next click immediately
      }

      // A run of any auto-generation registers a token here. The photo browser
      // is locked while it's set (so a result can't land on the wrong photo),
      // and Cancel flips `cancelled` + clears the timers so the async result is
      // dropped instead of written back.
      const genRef = useRef(null);
      const genBusy = autoBusy || titleBusy || tagsBusy;
      function cancelGeneration() {
        const g = genRef.current;
        if (g) { g.cancelled = true; g.timers.forEach((t) => { clearInterval(t); clearTimeout(t); }); }
        genRef.current = null;
        setAutoBusy(false); setAutoStage("");
        setTitleBusy(false); setTitleStage("");
        setTagsBusy(false); setTagsStage("");
      }

      function changePhoto(delta) {
        if (genBusy) return;                   // locked while developing
        if (stackPhotos.length <= 1) return;   // nothing to browse
        setSlideDir(delta > 0 ? "right" : "left");
        setPhotoIndex((prev) => {
          const next = (prev + delta + stackPhotos.length) % stackPhotos.length;
          Collab.send("active_image", { index: next });
          return next;
        });
        setConfirmation(null);
        setAutoError(null);
      }

      // Auto-generate a caption for the current photo. Calls the backend
      // /autocaption endpoint (MiniCPM vision-language model) with the user's
      // optional custom prompt. While it runs, a darkroom-flavored sequence of
      // status lines keeps the user in the loop. On failure / offline use, it
      // falls back to a sensible local suggestion so the button always works.
      const AUTO_STAGES = [
        "Loading the negative…",
        "Reading the light…",
        "Letting it soak…",
        "Finding the words…",
        "Almost developed…",
      ];
      const TITLE_STAGES = [
        "Loading the negative…",
        "Reading the light…",
        "Naming the moment…",
        "Almost there…",
      ];
      async function handleAutoCaption() {
        if (autoBusy) return;
        if (!photo) return;
        if (window.sozaiPing) window.sozaiPing("✨ auto-generating caption");
        setAutoBusy(true); setAutoError(null);
        const token = { cancelled: false, timers: [] };
        genRef.current = token;
        let stageIdx = 0;
        setAutoStage(AUTO_STAGES[0]);
        const stageTimer = setInterval(() => {
          stageIdx = Math.min(stageIdx + 1, AUTO_STAGES.length - 1);
          setAutoStage(AUTO_STAGES[stageIdx]);
        }, 900);
        token.timers.push(stageTimer);
        const started = Date.now();
        const finish = (fn) => {
          // ensure the lovely animation is visible for at least a beat
          const wait = Math.max(0, 700 - (Date.now() - started));
          const t = setTimeout(() => {
            clearInterval(stageTimer);
            if (token.cancelled) return;          // cancelled mid-flight: drop it
            fn(); setAutoBusy(false); setAutoStage("");
            if (genRef.current === token) genRef.current = null;
          }, wait);
          token.timers.push(t);
        };
        try {
          const gr = await window.__gradioReady;
          if (gr) {
            const res = await gr.predict("/autocaption", {
              image_path: photo.src, alt: photo.alt || "", prompt: settings.captionPrompt || "",
            });
            const out = Array.isArray(res.data) ? res.data[0] : res.data;
            if (out && String(out).trim()) { finish(() => setCaption(String(out).trim())); return; }
          }
          throw new Error("no-backend");
        } catch (e) {
          const base = (photo.alt || photo.defaultTitle || "this moment").replace(/\.$/, "");
          finish(() => {
            setCaption(base.charAt(0).toUpperCase() + base.slice(1) + ".");
            setAutoError("Used an offline suggestion - connect the caption model for AI captions.");
          });
        }
      }

      async function handleAutoTitle() {
        if (titleBusy) return;
        if (!photo) return;
        if (window.sozaiPing) window.sozaiPing("✨ auto-generating title");
        setTitleBusy(true); setTitleError(null);
        const token = { cancelled: false, timers: [] };
        genRef.current = token;
        let stageIdx = 0;
        setTitleStage(TITLE_STAGES[0]);
        const stageTimer = setInterval(() => {
          stageIdx = Math.min(stageIdx + 1, TITLE_STAGES.length - 1);
          setTitleStage(TITLE_STAGES[stageIdx]);
        }, 900);
        token.timers.push(stageTimer);
        const started = Date.now();
        const finish = (fn) => {
          const wait = Math.max(0, 700 - (Date.now() - started));
          const t = setTimeout(() => {
            clearInterval(stageTimer);
            if (token.cancelled) return;
            fn(); setTitleBusy(false); setTitleStage("");
            if (genRef.current === token) genRef.current = null;
          }, wait);
          token.timers.push(t);
        };
        // a title-specific default so a blank prompt still yields a *title*,
        // kept independent from the caption prompt.
        const titleInstruction = (settings.titlePrompt || "").trim();
        try {
          const gr = await window.__gradioReady;
          if (gr) {
            const res = await gr.predict("/autocaption", {
              image_path: photo.src, alt: photo.alt || "", prompt: titleInstruction, kind: "title",
            });
            let out = Array.isArray(res.data) ? res.data[0] : res.data;
            out = String(out || "").trim().split("\n")[0].replace(/^["']|["']$/g, "").trim();
            if (out) { finish(() => setTitle(out)); return; }
          }
          throw new Error("no-backend");
        } catch (e) {
          const base = (photo.alt || photo.defaultTitle || "this moment").replace(/\.$/, "");
          const words = base.split(/\s+/).slice(0, 4).join(" ");
          finish(() => {
            setTitle(words.charAt(0).toUpperCase() + words.slice(1));
            setTitleError("Used an offline suggestion - connect the caption model for AI titles.");
          });
        }
      }

      // Tags auto-generate. Whatever the model returns (MiniCPM, or a
      // dictated/Nemotron source) MUST be comma-separated - we normalize it and
      // ERROR OUT if it isn't, rather than silently writing garbage tags.
      const TAGS_STAGES = ["Loading the negative…", "Reading the light…", "Sorting the keywords…", "Almost there…"];
      function normalizeTagsClient(s) {
        if (!s) return "";
        const parts = String(s).split(/[,\n;•·]+/);
        const seen = new Set(); const out = [];
        for (let p of parts) {
          let tag = p.replace(/^[\s\d.)(]+/, "").trim().replace(/^["']|["']$/g, "").toLowerCase().replace(/\s+/g, " ");
          if (tag && !seen.has(tag) && tag.length <= 40) { seen.add(tag); out.push(tag); }
        }
        return out.join(", ");
      }
      function isCommaSeparatedClient(s) {
        const t = (s || "").trim();
        if (!t) return false;
        if (t.includes(",")) return t.split(",").every((seg) => seg.trim().length > 0);
        // a single tag is allowed; but a long multi-word phrase with no commas
        // is treated as NOT valid tag output
        return t.split(/\s+/).length <= 3;
      }
      async function handleAutoTags() {
        if (tagsBusy) return;
        if (!photo) return;
        if (window.sozaiPing) window.sozaiPing("🏷️ auto-generating tags");
        setTagsBusy(true); setTagsError(null);
        const token = { cancelled: false, timers: [] };
        genRef.current = token;
        let stageIdx = 0;
        setTagsStage(TAGS_STAGES[0]);
        const stageTimer = setInterval(() => {
          stageIdx = Math.min(stageIdx + 1, TAGS_STAGES.length - 1);
          setTagsStage(TAGS_STAGES[stageIdx]);
        }, 900);
        token.timers.push(stageTimer);
        const started = Date.now();
        const finish = (fn) => {
          const wait = Math.max(0, 700 - (Date.now() - started));
          const t = setTimeout(() => {
            clearInterval(stageTimer);
            if (token.cancelled) return;
            fn(); setTagsBusy(false); setTagsStage("");
            if (genRef.current === token) genRef.current = null;
          }, wait);
          token.timers.push(t);
        };
        try {
          const gr = await window.__gradioReady;
          if (gr) {
            const res = await gr.predict("/autocaption", {
              image_path: photo.src, alt: photo.alt || "", prompt: settings.tagsPrompt || "", kind: "tags",
            });
            let out = Array.isArray(res.data) ? res.data[0] : res.data;
            const normalized = normalizeTagsClient(out);
            if (!isCommaSeparatedClient(normalized)) {
              // generated output wasn't valid comma-separated tags → error out
              finish(() => setTagsError("Generated tags weren't comma-separated. Try again or edit manually."));
              return;
            }
            finish(() => { setTags(normalized); });
            return;
          }
          throw new Error("no-backend");
        } catch (e) {
          // offline fallback derived from alt text - still comma-separated
          const base = (photo.alt || photo.defaultTitle || "").toLowerCase();
          const words = base.split(/[^a-z0-9]+/).filter((w) => w.length > 2).slice(0, 5);
          const fb = normalizeTagsClient(words.join(", "));
          finish(() => {
            if (isCommaSeparatedClient(fb)) {
              setTags(fb);
              setTagsError("Used an offline suggestion - connect the model for AI tags.");
            } else {
              setTagsError("Couldn't generate comma-separated tags. Please add them manually.");
            }
          });
        }
      }

      async function handleSubmit() {
        // ---- required-field validation (item: form validation) ----
        const problems = [];
        if (!photo || !photo.src) problems.push("Add at least one photo.");
        if (!(title || "").trim()) problems.push("Title can't be empty.");
        // caption is optional
        if (!(date || "").trim()) problems.push("Date can't be empty.");
        if (!(time || "").trim()) problems.push("Time can't be empty.");
        // tags are optional, but if provided they must be comma-separated
        if ((tags || "").trim() && !isCommaSeparatedClient(normalizeTagsClient(tags))) {
          problems.push("Tags must be comma-separated.");
        }
        if (problems.length) {
          setValidationError(problems.join(" "));
          setConfirmation(null);
          return;
        }
        setValidationError(null);
        // Push the album photos into the shared store so the MAP (and any live
        // room) actually receives them. stackPhotos and SozaiPhotos are separate,
        // and joining a room clears the store's seed — without this the next page
        // shows "0 photos". GPS photos auto-pin onto the globe like the seed does.
        stackPhotos.forEach((p) => window.SozaiPhotos.upsert(p.id, {
          src: p.src, alt: p.alt || "",
          title: p.title || p.defaultTitle || "",
          caption: p.caption || p.defaultCaption || "",
          date: p.date || "", time: p.time || "",
          lat: p.lat != null ? p.lat : null, lon: p.lon != null ? p.lon : null,
          pinned: p.lat != null && p.lon != null,
          focusX: p.focusX, focusY: p.focusY,
        }));
        if (window.sozaiPing) window.sozaiPing("📥 added to album");
        const album = albums.find((a) => a.id === selectedAlbum);
        try {
          const gr = await window.__gradioReady;
          if (gr) {
            const res = await gr.predict("/save_to_album", { album: album ? album.name : "", caption, tags });
            const msg = Array.isArray(res.data) ? res.data[0] : res.data;
            setConfirmation(msg);
            onAdded && onAdded();
            return;
          }
        } catch (e) {}
        // Album is optional - never block developing on it.
        setConfirmation(album ? `Added to "${album.name}".` : "Photo developed.");
        onAdded && onAdded();
      }

      return (
        <section className="w-full max-w-6xl rounded-xl border-2 border-primary bg-card shadow-lg">
          <header className="flex items-center justify-between gap-4 border-b-2 border-dashed border-[#f5edd8]/30 bg-[#13294b] px-5 py-4 sm:px-7">
            <div className="flex items-center gap-2.5"><h1 className="font-display text-2xl text-[#f5edd8]">Develop Photos</h1></div>
            <div className="flex items-center gap-2">
              <button type="button" onClick={() => onOpenSettings && onOpenSettings()} aria-label="Settings" className="flex size-9 items-center justify-center rounded-md border-2 border-[#f5edd8]/50 text-[#f5edd8] transition-colors hover:bg-white/10"><Settings className="size-4" /></button>
            </div>
          </header>
          <div className="grid gap-8 px-5 py-6 sm:px-7 lg:grid-cols-2">
            <div className="flex flex-col items-center gap-4">
              <PhotoStack
                photo={photo} index={safeIndex} total={stackPhotos.length} slideDir={slideDir}
                destroying={destroying} onDestroyed={doRemovePhoto}
                onAdd={() => addPhotoRef.current && addPhotoRef.current.click()}
                onAddSample={onAddSample}
                onLoadSamples={onLoadSamples}
                onReposition={onReposition}
                onDelete={onRemovePhoto}
                title={title} caption={caption} date={date} time={time}
                onTitleChange={setTitle} onCaptionChange={setCaption}
                onDateChange={setDate} onTimeChange={setTime} />
              <input ref={addPhotoRef} type="file" accept={ACCEPT_ATTR} multiple className="hidden" onChange={onAddPhotos} />
              {stackPhotos.length >= 1 && (
                <div className="mt-3 flex w-full max-w-xs items-center justify-center gap-3">
                  <button type="button" onClick={() => changePhoto(-1)} disabled={genBusy || stackPhotos.length <= 1}
                    aria-label="Previous photo" title={genBusy ? "Developing… cancel to browse" : "Previous photo"}
                    className="flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-primary text-primary transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"><ChevronLeft className="size-4" /></button>
                  <button type="button" onClick={() => addPhotoRef.current && addPhotoRef.current.click()}
                    className="flex flex-1 items-center justify-center gap-2 rounded-full border-2 border-primary bg-primary px-4 py-2.5 font-mono text-xs font-semibold uppercase tracking-widest text-primary-foreground transition-colors hover:bg-primary/90">
                    <Plus className="size-4" /> Upload
                  </button>
                  <button type="button" onClick={() => changePhoto(1)} disabled={genBusy || stackPhotos.length <= 1}
                    aria-label="Next photo" title={genBusy ? "Developing… cancel to browse" : "Next photo"}
                    className="flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-primary text-primary transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"><ChevronRight className="size-4" /></button>
                </div>
              )}
              {/* How this works - matches the polaroid width, all-mono */}
              <div className="mt-2 w-full max-w-xs rounded-lg border-2 border-dashed border-primary/30 bg-card/50 px-4 py-3">
                <h3 className="mb-2 font-mono text-xs font-semibold uppercase tracking-widest text-primary">How this works</h3>
                <ol className="space-y-2 font-mono text-xs leading-snug text-muted-foreground">
                  <li><span className="font-semibold text-foreground">1.</span> Upload up to 8 photos, solo or live with your friends.</li>
                  <li><span className="font-semibold text-foreground">2.</span> Caption your photos, or let AI decide for you.</li>
                  <li><span className="font-semibold text-foreground">3.</span> Wait for your watercolour renditions to process.</li>
                  <li><span className="font-semibold text-foreground">4.</span> Reveal your new photos and arrange them on up to 6 canvases.</li>
                </ol>
              </div>
            </div>
            <div className="flex flex-col gap-6">
              <DetailsForm
                title={title} onTitleChange={setTitle}
                caption={caption} onCaptionChange={setCaption}
                date={date} onDateChange={setDate}
                time={time} onTimeChange={setTime}
                lat={lat} lon={lon} locationName={locationName} radius={radius} onLocationChange={setLocation}
                tags={tags} onTagsChange={setTagsSynced}
                onSubmit={handleSubmit}
                onAutoCaption={handleAutoCaption} autoBusy={autoBusy} autoStage={autoStage} autoError={autoError}
                captionPrompt={settings.captionPrompt || ""} onCaptionPromptChange={setCaptionPrompt} captionModel={captionModel}
                onAutoTitle={handleAutoTitle} titleBusy={titleBusy} titleStage={titleStage} titleError={titleError}
                titlePrompt={settings.titlePrompt || ""} onTitlePromptChange={setTitlePrompt}
                onAutoTags={handleAutoTags} tagsBusy={tagsBusy} tagsStage={tagsStage} tagsError={tagsError}
                tagsPrompt={settings.tagsPrompt || ""} onTagsPromptChange={(v) => update({ tagsPrompt: v })}
                onCancelGen={cancelGeneration} />

              {/* choose how the Map of My Time will look once developed */}
              <MapStylePicker variant={mapVariant} onChange={setMapVariant} />

              {validationError ? <p role="alert" className="rounded-md border-2 border-[oklch(0.55_0.18_25)]/50 bg-[oklch(0.55_0.18_25)]/10 px-3 py-2 text-center font-mono text-[11px] uppercase tracking-wide text-[oklch(0.5_0.18_25)]">{validationError}</p> : null}
              {confirmation ? <p role="status" className="rounded-md border-2 border-primary/40 bg-accent px-3 py-2 text-center text-sm text-accent-foreground">{confirmation}</p> : null}
              {/* develop = advance to the darkroom, so an arrow rather than a plus */}
              <button type="button" onClick={handleSubmit}
                className="flex w-full items-center justify-center gap-2 rounded-md border-2 border-primary bg-primary px-4 py-3 font-mono text-sm font-semibold uppercase tracking-wide text-primary-foreground transition-colors hover:bg-primary/90">
                Develop Photos <ArrowRight className="size-4" />
              </button>
            </div>
          </div>
        </section>
      );
    }

    // ----------------------------------------------------------------- //
    // components/map/side-rail.tsx
    // ----------------------------------------------------------------- //
    const railItems = [
      { id: "camera", label: "Camera", icon: Camera }, { id: "map", label: "Map", icon: MapIcon },
    ];
    function SideRail({ active = "map", onNavigate, onOpenSettings, onOpenPets }) {
      return (
        <nav aria-label="Primary" className="flex shrink-0 flex-row items-center justify-between border-b-2 border-dashed border-primary/40 px-4 py-3 sm:flex-col sm:justify-between sm:gap-6 sm:border-b-0 sm:border-r-2 sm:px-3 sm:py-6">
          <ul className="flex flex-row items-center gap-4 sm:flex-col sm:gap-6">
            {railItems.map(({ id, label, icon: IconC }) => {
              const isActive = id === active;
              return (
                <li key={id}>
                  <button type="button" onClick={() => onNavigate && onNavigate(id)} aria-current={isActive ? "page" : undefined}
                    className={cn("flex flex-col items-center gap-1 text-primary/70 transition-colors hover:text-primary sm:gap-1.5", isActive && "text-primary")}>
                    <span className={cn("flex size-9 items-center justify-center rounded-md border-2 border-transparent sm:size-10", isActive && "border-primary bg-accent")}><IconC className="size-4 sm:size-5" /></span>
                    <span className="hidden font-mono text-[10px] font-semibold uppercase tracking-wide sm:block">{label}</span>
                  </button>
                </li>
              );
            })}
          </ul>
          <div className="flex flex-row items-center gap-4 sm:flex-col sm:gap-6">
            <button type="button" onClick={() => onOpenPets && onOpenPets()} className="flex flex-col items-center gap-1 text-primary/70 transition-colors hover:text-primary sm:gap-1.5">
              <span className="flex size-9 items-center justify-center sm:size-10"><PawPrint className="size-4 sm:size-5" /></span>
              <span className="hidden font-mono text-[10px] font-semibold uppercase tracking-wide sm:block">Pets</span>
            </button>
            <button type="button" onClick={() => onOpenSettings && onOpenSettings()} className="flex flex-col items-center gap-1 text-primary/70 transition-colors hover:text-primary sm:gap-1.5">
              <span className="flex size-9 items-center justify-center sm:size-10"><Settings className="size-4 sm:size-5" /></span>
              <span className="hidden font-mono text-[10px] font-semibold uppercase tracking-wide sm:block">Settings</span>
            </button>
          </div>
        </nav>
      );
    }

    // ----------------------------------------------------------------- //
    // components/map/moment-card.tsx
    // ----------------------------------------------------------------- //
    function MomentCard({ moment, selected, onSelect, rotate = "" }) {
      return (
        <button type="button" onClick={() => onSelect && onSelect(moment.id)} style={{ left: `${moment.x}%`, top: `${moment.y}%` }}
          className={cn("group absolute z-10 w-44 -translate-x-1/2 -translate-y-1/2 rounded-sm border-2 border-primary bg-card p-2 text-left shadow-md transition-transform hover:z-20 hover:scale-105 sm:w-52", rotate, selected && "z-20 ring-4 ring-primary/30")}>
          <span aria-hidden="true" className="absolute -top-2.5 left-1/2 h-4 w-12 -translate-x-1/2 -rotate-2 rounded-sm bg-primary/15" />
          <div className="relative aspect-square w-full overflow-hidden rounded-sm border border-primary/30"><Img src={moment.src} alt={moment.alt} fill sizes="208px" className="object-cover [filter:saturate(0.85)_contrast(1.05)]" /></div>
          <div className="px-0.5 pb-0.5 pt-2">
            <div className="flex items-start justify-between gap-1">
              <h3 className="font-serif text-xs font-semibold leading-tight text-foreground">{moment.title}</h3>
              {moment.favorite ? <Star className="mt-0.5 size-3.5 shrink-0 fill-primary text-primary" /> : null}
            </div>
            <p className="mt-1 font-hand text-[12px] leading-snug text-muted-foreground">{moment.caption}</p>
            <p className="mt-1.5 font-mono text-[10px] text-primary/70">{moment.date}</p>
          </div>
        </button>
      );
    }

    // ----------------------------------------------------------------- //
    // components/map/timeline.tsx
    // ----------------------------------------------------------------- //
    function Timeline({ date, moments, selectedId, onSelect }) {
      // Order chronologically by calendar DATE (photos span multiple years) and
      // label each stop with its date - not the literal time of day.
      const shortDate = (s) => { const d = new Date(s); return isNaN(d) ? (s || "") : d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" }); };
      const dtMs = (m) => (new Date((m.date || "") + " " + (m.time || "")).getTime() || new Date(m.date).getTime() || 0);
      const sorted = (moments || []).slice().sort((a, b) => dtMs(a) - dtMs(b));
      return (
        <div className="flex flex-col gap-4">
          <div className="flex items-center justify-between gap-4">
            <h2 className="font-serif text-sm font-semibold text-foreground">{date}</h2>
            <span className="font-serif text-xs italic text-muted-foreground">your journey, in order</span>
          </div>
          <div className="relative">
            <span aria-hidden="true" className="absolute left-0 right-0 top-3 h-0.5 bg-primary/30" />
            <ol className="relative flex items-start justify-between">
              {sorted.map((m, i) => {
                const isActive = m.id === selectedId;
                return (
                  <li key={m.id} className="flex flex-1 flex-col items-center gap-2">
                    <button type="button" onClick={() => onSelect && onSelect(m.id)} aria-current={isActive ? "true" : undefined} aria-label={`${m.title} on ${shortDate(m.date)}`}
                      className={cn("z-10 flex size-6 items-center justify-center rounded-full border-2 border-primary bg-card font-mono text-xs font-bold text-primary transition-colors hover:bg-accent", isActive && "bg-primary text-primary-foreground")}>{i + 1}</button>
                    <span className="text-center font-mono text-[10px] leading-tight text-muted-foreground">{shortDate(m.date)}<br />{m.time}</span>
                  </li>
                );
              })}
            </ol>
          </div>
        </div>
      );
    }

    // ----------------------------------------------------------------- //
    // components/map/map-of-my-time.tsx  (+ shared selection)
    // ----------------------------------------------------------------- //
    const rotations = ["-rotate-2", "rotate-1", "-rotate-1", "rotate-2", "-rotate-1", "rotate-1", "-rotate-2"];
    function HeaderButton({ icon: IconC, label, onClick }) {
      return (
        <button type="button" onClick={onClick} className="flex items-center gap-2 rounded-md border-2 border-primary/70 px-3 py-1.5 font-mono text-xs uppercase tracking-wide text-foreground transition-colors hover:bg-accent">
          <IconC className="size-3.5 text-primary" />{label}
        </button>
      );
    }
    function RouteLines({ moments: momentList }) {
      const list = momentList || moments;
      const points = list.map((m) => `${m.x},${m.y}`).join(" ");
      return (
        <svg aria-hidden="true" viewBox="0 0 100 100" preserveAspectRatio="none" className="pointer-events-none absolute inset-0 h-full w-full">
          <polyline points={points} fill="none" stroke="oklch(0.5 0.21 268)" strokeWidth="0.4" strokeDasharray="1.5 1.5" strokeLinecap="round" opacity="0.5" />
        </svg>
      );
    }
    function Legend() {
      return (
        <div className="flex flex-col gap-3 rounded-lg border-2 border-primary/40 bg-card p-4">
          <h3 className="font-serif text-sm font-semibold text-foreground">Legend</h3>
          <ul className="flex flex-col gap-2 font-serif text-sm italic text-muted-foreground">
            <li className="flex items-center gap-2"><MapPin className="size-3.5 shrink-0 text-primary" />moments</li>
            <li className="flex items-center gap-2"><span aria-hidden="true" className="w-3.5 shrink-0 border-t-2 border-dashed border-primary" />route</li>
          </ul>
          <div className="mt-1 border-t border-primary/20 pt-2 font-serif text-xs italic leading-relaxed text-muted-foreground">{tripMeta.momentCount} moments · {tripMeta.photoCount} photos</div>
        </div>
      );
    }
    // ----------------------------------------------------------------- //
    // Map of My Time - multiple browsable layout variants.
    //
    // The "map" family below renders a real, interactive map of a city the
    // user picks, in the spirit of the Cambridge watercolor demo - but built
    // entirely on FREE, OPEN-SOURCE pieces instead of the paid ArcGIS stack:
    //   • Renderer: MapLibre GL JS (BSD-licensed, no API key)
    //   • Geocoding: OpenStreetMap Nominatim (open, no key)
    //   • Tiles: open raster sources the user can switch between
    // Each "map" variant just swaps the raster tile source, so the same
    // watercolor experience can be applied to ANY city and fully customized.
    // ----------------------------------------------------------------- //
    // OpenFreeMap: fully free, no API key, no signup - OpenMapTiles vector
    // schema. We hand-write a watercolor STYLE on top of it, so the painterly
    // look (inspired by John Nelson's ArcGIS watercolor) applies to ANY city
    // worldwide without per-city work or paid hosting.
    const OPENFREEMAP_TILES = "https://tiles.openfreemap.org/planet";
    // Authentic watercolor paper texture extracted from Watercolor.stylx
    const PAPER_TEXTURE = "data:image/jpeg;base64,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";

    // A watercolor MapLibre style built on free OSM vector tiles, using the
    // ACTUAL palette extracted from the ArcGIS "Watercolor.stylx" (John Nelson's
    // watercolor styles). Colors below are the real CIM symbol values:
    //   Water 122,142,245 / wash 158,170,215 · Park/Grass 112,168,0 ·
    //   Forest 38,115,0 · Wetland 0,168,132 · Sand 215,194,158 ·
    //   Paper white w/ grey pencil strokes · roads = pencil (black @ opacity).
    // We use OpenFreeMap's TileJSON (free, no key) so tiles + glyphs resolve.
    function watercolorVectorStyle(palette) {
      const p = palette || {};
      const paper       = p.paper       || "#ffffff"; // stylx Paper
      const water       = p.water       || "rgb(122,142,245)";
      const waterWash   = p.waterWash   || "rgb(158,170,215)";
      const grass       = p.grass       || "rgb(112,168,0)";
      const forest      = p.forest      || "rgb(38,115,0)";
      const wetland     = p.wetland     || "rgb(0,168,132)";
      const sand        = p.sand        || "rgb(215,194,158)";
      const path        = p.path        || "rgb(205,205,102)"; // stylx Path
      const pencil      = p.pencil      || "rgb(0,0,0)";        // stylx Pencil
      const buildingCol = p.building    || "rgb(168,112,0)";    // raw umber wash
      const label       = p.label       || "rgb(78,78,78)";
      const labelHalo   = p.labelHalo   || "rgba(255,255,255,0.9)";
      const fillA  = p.fillAlpha  != null ? p.fillAlpha  : 0.5;  // watercolor wash
      const woodA  = p.woodAlpha  != null ? p.woodAlpha  : 0.55;
      return {
        version: 8,
        glyphs: "https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf",
        sources: {
          // TileJSON URL (not a raw {z}/{x}/{y} template) so MapLibre fetches
          // the correct tile + minzoom/maxzoom config from OpenFreeMap.
          ofm: { type: "vector", url: OPENFREEMAP_TILES,
                 attribution: "© OpenStreetMap contributors, © OpenFreeMap · Watercolor palette: ArcGIS / J. Nelson" },
        },
        layers: [
          { id: "paper", type: "background", paint: { "background-color": paper } },
          // landcover washes
          { id: "wood", type: "fill", source: "ofm", "source-layer": "landcover",
            filter: ["match", ["get", "class"], ["wood", "forest"], true, false],
            paint: { "fill-color": forest, "fill-opacity": woodA } },
          { id: "wood-bleed", type: "line", source: "ofm", "source-layer": "landcover",
            filter: ["match", ["get", "class"], ["wood", "forest"], true, false],
            paint: { "line-color": forest, "line-width": 3, "line-blur": 4, "line-opacity": 0.5 } },
          { id: "grass", type: "fill", source: "ofm", "source-layer": "landcover",
            filter: ["match", ["get", "class"], ["grass", "park", "meadow", "scrub", "wetland"], true, false],
            paint: { "fill-color": grass, "fill-opacity": fillA } },
          { id: "grass-bleed", type: "line", source: "ofm", "source-layer": "landcover",
            filter: ["match", ["get", "class"], ["grass", "park", "meadow", "scrub"], true, false],
            paint: { "line-color": grass, "line-width": 3, "line-blur": 4, "line-opacity": 0.45 } },
          { id: "sand", type: "fill", source: "ofm", "source-layer": "landcover",
            filter: ["match", ["get", "class"], ["sand", "beach"], true, false],
            paint: { "fill-color": sand, "fill-opacity": 0.6 } },
          { id: "park", type: "fill", source: "ofm", "source-layer": "park",
            paint: { "fill-color": grass, "fill-opacity": fillA } },
          { id: "park-bleed", type: "line", source: "ofm", "source-layer": "park",
            paint: { "line-color": grass, "line-width": 3, "line-blur": 4, "line-opacity": 0.45 } },
          { id: "landuse-wetland", type: "fill", source: "ofm", "source-layer": "landuse",
            filter: ["match", ["get", "class"], ["wetland", "swamp"], true, false],
            paint: { "fill-color": wetland, "fill-opacity": 0.4 } },
          // water with a soft feathered "wash" edge (blur emulates the bleed)
          { id: "water", type: "fill", source: "ofm", "source-layer": "water",
            paint: { "fill-color": waterWash, "fill-opacity": 0.7 } },
          { id: "water-edge", type: "line", source: "ofm", "source-layer": "water",
            paint: { "line-color": water, "line-width": 2.6, "line-blur": 3.5, "line-opacity": 0.6 } },
          { id: "waterway", type: "line", source: "ofm", "source-layer": "waterway",
            paint: { "line-color": waterWash, "line-width": ["interpolate", ["linear"], ["zoom"], 8, 0.8, 16, 3.2], "line-blur": 1.4 } },
          // roads drawn as pencil strokes (knockout-casing + graphite line)
          { id: "road-casing", type: "line", source: "ofm", "source-layer": "transportation",
            filter: ["match", ["get", "class"], ["motorway", "trunk", "primary", "secondary", "tertiary"], true, false],
            layout: { "line-cap": "round", "line-join": "round" },
            paint: { "line-color": paper,
              "line-width": ["interpolate", ["linear"], ["zoom"], 8, 2.2, 14, 9, 18, 26] } },
          { id: "road", type: "line", source: "ofm", "source-layer": "transportation",
            filter: ["match", ["get", "class"], ["motorway", "trunk", "primary", "secondary", "tertiary", "minor", "service", "street"], true, false],
            layout: { "line-cap": "round", "line-join": "round" },
            paint: { "line-color": pencil, "line-opacity": 0.5,
              "line-width": ["interpolate", ["linear"], ["zoom"], 8, 0.5, 14, 2.2, 18, 7] } },
          { id: "path", type: "line", source: "ofm", "source-layer": "transportation",
            filter: ["match", ["get", "class"], ["path", "track", "footway", "pedestrian"], true, false],
            paint: { "line-color": path, "line-dasharray": [2, 2], "line-width": 1.4, "line-opacity": 0.85 } },
          // buildings: faint raw-umber wash
          { id: "buildings", type: "fill", source: "ofm", "source-layer": "building", minzoom: 13,
            paint: { "fill-color": buildingCol, "fill-opacity": 0.18 } },
          // labels
          { id: "place-labels", type: "symbol", source: "ofm", "source-layer": "place",
            filter: ["match", ["get", "class"], ["city", "town", "village", "suburb", "neighbourhood"], true, false],
            layout: { "text-field": ["coalesce", ["get", "name:en"], ["get", "name"]],
              "text-font": ["Noto Sans Regular"], "text-size": ["interpolate", ["linear"], ["zoom"], 8, 11, 14, 16],
              "text-transform": "none", "text-letter-spacing": 0.05 },
            paint: { "text-color": label, "text-halo-color": labelHalo, "text-halo-width": 1.6 } },
          { id: "road-labels", type: "symbol", source: "ofm", "source-layer": "transportation_name", minzoom: 13,
            layout: { "text-field": ["coalesce", ["get", "name:en"], ["get", "name"]], "symbol-placement": "line",
              "text-font": ["Noto Sans Regular"], "text-size": 11 },
            paint: { "text-color": label, "text-halo-color": labelHalo, "text-halo-width": 1.4 } },
        ],
      };
    }

    // Watercolor palettes - all derived from the stylx. "classic" is the
    // authentic ArcGIS watercolor; the others are tints of the same recipe.
    const WC_PALETTES = {
      classic: {},
      sepia: { paper: "#f3ead4", water: "rgb(150,150,210)", waterWash: "rgb(180,182,205)",
               grass: "rgb(150,160,70)", forest: "rgb(90,120,40)", wetland: "rgb(80,150,120)",
               sand: "rgb(215,194,158)", building: "rgb(168,112,0)", label: "rgb(90,75,55)",
               fillAlpha: 0.45, woodAlpha: 0.5 },
      dusk: { paper: "#22272e", water: "rgb(90,110,200)", waterWash: "rgb(70,90,140)",
              grass: "rgb(70,110,40)", forest: "rgb(30,70,30)", wetland: "rgb(0,120,95)",
              sand: "rgb(120,110,80)", path: "rgb(150,150,90)", pencil: "rgb(220,225,235)",
              building: "rgb(120,90,40)", label: "rgb(225,230,238)", labelHalo: "rgba(20,24,30,0.85)",
              fillAlpha: 0.4, woodAlpha: 0.45 },
      // sunrise: warm dawn wash - peach paper, coral water, golden light
      sunrise: { paper: "#fdeede", water: "rgb(245,150,120)", waterWash: "rgb(250,190,160)",
                 grass: "rgb(196,170,80)", forest: "rgb(150,140,60)", wetland: "rgb(220,160,110)",
                 sand: "rgb(245,212,160)", path: "rgb(214,150,90)", pencil: "rgb(120,70,55)",
                 building: "rgb(214,120,70)", label: "rgb(120,60,45)", labelHalo: "rgba(255,245,235,0.9)",
                 fillAlpha: 0.5, woodAlpha: 0.5 },
    };

    // The four watercolor color ways the user can switch between, right on the
    // map. classic = the authentic ArcGIS palette; the rest are tints.
    const WC_COLORWAYS = [
      { id: "classic", label: "Classic", swatch: "#9eaad7" },
      { id: "sepia",   label: "Sepia",   swatch: "#c2a26a" },
      { id: "sunrise", label: "Sunrise", swatch: "#f5967a" },
      { id: "dusk",    label: "Dusk",    swatch: "#5a6ec8" },
    ];

    // Only the watercolor vector style remains. The painterly look applies to
    // ANY city (free OSM vector tiles, no key). The specific COLORWAY (classic /
    // sepia / sunrise / dusk) is chosen live on the map, not here.
    const TILE_SOURCES = {
      watercolor: { label: "Watercolor", kind: "vector", palette: "classic" },
    };

    const MAP_VARIANTS = [
      { id: "watercolor", label: "2D Map", icon: MapIcon, kind: "map", tile: "watercolor", blurb: "A painterly watercolor map of any city - free, no API key. Switch colorways and pin your photos right on it." },
      { id: "cesium", label: "3D Globe", icon: MapIcon, kind: "cesium", blurb: "Photorealistic 3D buildings with a watercolor or by-material style. Pins and the journey flythrough work here too." },
      { id: "develop", label: "Canvas", icon: ImagePlus, kind: "develop", blurb: "Drag your photos onto the page, then “develop” them into a keepsake scroll." },
      { id: "scrapbook", label: "Scrapbook", icon: ImageIcon, kind: "layout", blurb: "Pinned prints on a hand-drawn map." },
      { id: "grid", label: "Gallery", icon: LayoutGrid, kind: "layout", blurb: "A clean contact-sheet grid of moments." },
      { id: "timeline", label: "Timeline", icon: Clock, kind: "layout", blurb: "A vertical, chronological story of the day." },
    ];

    // Read image File(s) into data URLs for in-browser use (no upload/server).
    function readImageFile(file) {
      return new Promise((resolve, reject) => {
        if (!file || (file.type && !/^image\//.test(file.type))) { reject(new Error("not an image")); return; }
        const r = new FileReader();
        r.onload = () => resolve(r.result);
        r.onerror = () => reject(new Error("read failed"));
        r.readAsDataURL(file);
      });
    }

    // Try to read GPS + timestamp from EXIF metadata embedded in a photo file.
    // Returns { lat, lon, date, time } - any field may be null if not present.
    // Fails silently (returns all-null) if exifr isn't loaded or the file has no EXIF.
    async function readExif(file) {
      const out = { lat: null, lon: null, date: null, time: null };
      try {
        if (typeof window.exifr === "undefined") return out;
        const data = await window.exifr.parse(file, { gps: true, tiff: true, ifd0: true, exif: true });
        if (!data) return out;
        if (data.latitude != null && data.longitude != null) {
          out.lat = data.latitude;
          out.lon = data.longitude;
        }
        const raw = data.DateTimeOriginal || data.DateTime || data.CreateDate;
        if (raw) {
          // EXIF format: "YYYY:MM:DD HH:MM:SS"
          const m = String(raw instanceof Date ? raw.toISOString() : raw)
            .match(/(\d{4})[:\-](\d{2})[:\-](\d{2})[T ](\d{2}):(\d{2})/);
          if (m) {
            const [, yr, mo, dy, hr, min] = m;
            const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
            out.date = months[parseInt(mo,10)-1] + " " + parseInt(dy,10) + ", " + yr;
            const h = parseInt(hr,10);
            out.time = (h % 12 || 12) + ":" + min + " " + (h < 12 ? "AM" : "PM");
          }
        }
      } catch (_) {}
      return out;
    }

    // NSFW gate for uploads. Sends the image to the server's content classifier.
    // Fails OPEN (returns blocked:false) on any network/model error so a missing
    // optional model never stops people from uploading their own photos.
    async function nsfwGate(dataUrl, name) {
      try {
        const res = await fetch("/api/nsfw", {
          method: "POST", headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ data_url: dataUrl, name: name || "upload" }),
        });
        if (!res.ok) return { blocked: false, available: false, score: 0 };
        return await res.json();
      } catch (e) {
        return { blocked: false, available: false, score: 0 };
      }
    }

    // ----------------------------------------------------------------- //
    // Shared upload pipeline + status overlay.                             //
    //                                                                      //
    // Every upload entry point (Add to Album, map polaroids, the darkroom  //
    // "use my photos") funnels through processUpload() so they all get the //
    // same behavior:                                                       //
    //   1. validate the file extension - we accept ONLY .png/.jpg/.jpeg    //
    //   2. show a "processing / uploading" overlay                         //
    //   3. run the server NSFW gate                                        //
    //   4. report ACCEPTED (✓) or REJECTED with a reason (bad type / NSFW) //
    //                                                                      //
    // A tiny pub/sub store drives a single global overlay mounted at Root, //
    // so the feedback looks identical everywhere in the app.               //
    // ----------------------------------------------------------------- //
    const MAX_POLAROIDS = 5;   // cap: at most 5 polaroids may be pinned on the map
    // ── Top-level upload cap ─────────────────────────────────────────────
    // Maximum number of images allowed in an album. Change this one value to
    // raise/lower the limit. Uploading beyond it shows an alert.
    const MAX_IMAGES = 6;
    const ACCEPTED_EXTS = ["png", "jpg", "jpeg", "jfif", "webp", "gif", "bmp", "tif", "tiff", "avif", "heic", "heif"];
    const ACCEPTED_MIMES = ["image/png", "image/jpeg", "image/jpg", "image/webp", "image/gif", "image/bmp", "image/tiff", "image/avif", "image/heic", "image/heif"];
    // image/* + explicit HEIC/HEIF exts (some platforms don't map .heic to a
    // mime in the picker, so the extensions keep them selectable).
    const ACCEPT_ATTR = "image/*,.png,.jpg,.jpeg,.jfif,.webp,.gif,.bmp,.tif,.tiff,.avif,.heic,.heif";

    function fileExt(name) {
      const m = /\.([^.]+)$/.exec(name || "");
      return m ? m[1].toLowerCase() : "";
    }
    // Accept anything the browser calls an image, or any known image extension
    // (covers HEIC/HEIF/webp/etc. whose mime may be blank on some platforms).
    function isAcceptedImage(file) {
      if (!file) return false;
      const extOk = ACCEPTED_EXTS.includes(fileExt(file.name));
      const typeOk = (file.type || "").toLowerCase().startsWith("image/");
      return extOk || typeOk;
    }
    // Browsers (outside Safari) can't render HEIC/HEIF in an <img>, so convert
    // to JPEG on upload when the heic2any decoder is available. EXIF is read
    // from the ORIGINAL file separately, before this runs.
    async function maybeConvertHeic(file) {
      const ext = fileExt(file.name);
      const isHeic = ext === "heic" || ext === "heif" || /heic|heif/.test((file.type || "").toLowerCase());
      if (!isHeic || typeof window.heic2any === "undefined") return file;
      try {
        let out = await window.heic2any({ blob: file, toType: "image/jpeg", quality: 0.92 });
        if (Array.isArray(out)) out = out[0];
        return new File([out], file.name.replace(/\.[^.]+$/, ".jpg"), { type: "image/jpeg" });
      } catch (e) { return file; }
    }

    // Global upload-status store (pub/sub). Items: {id,name,status,reason}.
    // status: "processing" | "accepted" | "rejected"
    const UploadStatus = (function () {
      let items = [];
      const subs = new Set();
      const emit = () => subs.forEach((fn) => { try { fn(items.slice()); } catch (e) {} });
      let _seq = 0;
      return {
        subscribe(fn) { subs.add(fn); fn(items.slice()); return () => subs.delete(fn); },
        begin(name) {
          const id = "up_" + (++_seq) + "_" + Date.now();
          items = [...items, { id, name: name || "image", status: "processing", reason: "" }];
          emit();
          return id;
        },
        update(id, patch) {
          items = items.map((it) => (it.id === id ? { ...it, ...patch } : it));
          emit();
          // play an error chime on rejection (respects the user's sound prefs)
          if (patch && patch.status === "rejected") {
            try {
              const snd = window.__sozaiSound;
              if (snd && snd.enabled && window.SozaiChime) {
                window.SozaiChime.play("alert", { enabled: true, theme: snd.theme, volume: snd.volume });
              }
            } catch (e) {}
          }
          // auto-clear finished items after a short delay
          const it = items.find((x) => x.id === id);
          if (it && it.status !== "processing") {
            const ttl = it.status === "rejected" ? 9000 : 5000;
            setTimeout(() => { items = items.filter((x) => x.id !== id); emit(); }, ttl);
          }
        },
        clear() { items = []; emit(); },
      };
    })();

    // Process a single File end-to-end. Returns:
    //   { ok:true, dataUrl, file }                       on success
    //   { ok:false, reason:"type"|"nsfw"|"read", message } on rejection
    // Always drives the global overlay so the user sees processing → result.
    async function processUpload(file) {
      const name = (file && file.name) || "image";
      const id = UploadStatus.begin(name);
      // 1) extension / type gate
      if (!isAcceptedImage(file)) {
        UploadStatus.update(id, {
          status: "rejected", reason: "type",
          message: "That file isn't an image we can read.",
        });
        return { ok: false, reason: "type", message: "That file isn't an image we can read." };
      }
      // 2) read to a data URL (converting HEIC/HEIF to JPEG first so it renders)
      let dataUrl;
      try {
        const imgFile = await maybeConvertHeic(file);
        dataUrl = await readImageFile(imgFile);
      } catch (e) {
        UploadStatus.update(id, { status: "rejected", reason: "read", message: "Could not read this file." });
        return { ok: false, reason: "read", message: "Could not read this file." };
      }
      // 3) NSFW gate (fails OPEN if the model/server is unavailable)
      try {
        const gate = await nsfwGate(dataUrl, name);
        if (gate && gate.blocked) {
          UploadStatus.update(id, {
            status: "rejected", reason: "nsfw",
            message: "This image was blocked by the content filter.",
          });
          return { ok: false, reason: "nsfw", message: "This image was blocked by the content filter." };
        }
      } catch (e) { /* treat as safe */ }
      // 4) accepted
      UploadStatus.update(id, { status: "accepted", message: "Added" });
      return { ok: true, dataUrl, file };
    }

    // Global overlay that renders the live upload statuses. Mounted once at Root.
    function UploadOverlay() {
      const [items, setItems] = useState([]);
      useEffect(() => UploadStatus.subscribe(setItems), []);
      if (!items.length) return null;
      return (
        <div className="pointer-events-none fixed right-4 top-32 z-[120] flex w-[min(92vw,340px)] flex-col gap-2">
          {items.map((it) => {
            const isProc = it.status === "processing";
            const isOk = it.status === "accepted";
            return (
              <div key={it.id}
                className={cn(
                  "pointer-events-auto flex items-start gap-2.5 rounded-lg border-2 bg-card px-3 py-2.5 shadow-lg transition-all",
                  isProc ? "border-primary/40" : isOk ? "border-emerald-500/60" : "border-red-500/60"
                )}>
                <span className="mt-0.5 shrink-0">
                  {isProc ? <Loader2 className="size-4 animate-spin text-primary" />
                    : isOk ? <CheckCircle className="size-4 text-emerald-600" />
                    : it.reason === "nsfw" ? <ShieldAlert className="size-4 text-red-600" />
                    : it.reason === "type" ? <FileWarning className="size-4 text-red-600" />
                    : <XCircle className="size-4 text-red-600" />}
                </span>
                <div className="min-w-0 flex-1">
                  <p className="truncate font-mono text-[11px] font-semibold text-foreground">{it.name}</p>
                  <p className={cn("mt-0.5 text-[11px]",
                    isProc ? "text-muted-foreground" : isOk ? "text-emerald-700" : "text-red-700")}>
                    {isProc ? "Processing & checking…" : isOk ? "Accepted - added to your album" : it.message}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      );
    }


    // ----------------------------------------------------------------- //
    // Toast / notification center.                                         //
    // A small pub/sub drives a stack of toasts at the top-right. Used for:  //
    //   • chat message pings (auto-dismiss)                                 //
    //   • join-approval requests for the host (with Admit / Decline)        //
    // Exposed on window so non-React code (Collab handlers) can raise them. //
    // ----------------------------------------------------------------- //
    const ToastStore = (function () {
      let items = [];
      const subs = new Set();
      let seq = 0;
      const emit = () => subs.forEach((fn) => { try { fn(items.slice()); } catch (e) {} });
      return {
        subscribe(fn) { subs.add(fn); fn(items.slice()); return () => subs.delete(fn); },
        push(t) {
          // honor an explicit id (so it can be dismissed by name); de-dupe it
          const id = (t && t.id) || ("t" + (++seq) + "_" + Date.now());
          if (t && t.id && items.some((x) => x.id === t.id)) return id;  // already shown
          const item = Object.assign({ kind: "info", sticky: false }, t, { id });
          items = [...items, item];
          emit();
          if (!item.sticky) {
            const ttl = item.ttl || 6000;
            setTimeout(() => this.dismiss(id), ttl);
          }
          return id;
        },
        dismiss(id) { items = items.filter((x) => x.id !== id); emit(); },
        clear() { items = []; emit(); },
      };
    })();
    // chat ping convenience (used by ChatDock)
    window.SozaiToast = {
      show({ name, color, text }) {
        ToastStore.push({ kind: "chat", name, color, text });
      },
    };

    function ToastCenter() {
      const [items, setItems] = useState([]);
      useEffect(() => ToastStore.subscribe(setItems), []);
      if (!items.length) return null;
      return (
        <div className="pointer-events-none fixed right-4 top-16 z-[130] flex w-[min(92vw,320px)] flex-col gap-2">
          {items.map((it) => (
            <div key={it.id}
              className={cn("pointer-events-auto overflow-hidden rounded-lg border-2 bg-card shadow-xl transition-all",
                it.kind === "join" ? "border-primary" : "border-primary/40")}>
              {it.kind === "chat" ? (
                <button type="button" onClick={() => { it.onClick && it.onClick(); ToastStore.dismiss(it.id); }}
                  className="flex w-full items-start gap-2.5 px-3 py-2.5 text-left hover:bg-accent/40">
                  <MessageCircle className="mt-0.5 size-4 shrink-0" style={{ color: it.color || "var(--primary)" }} />
                  <span className="min-w-0 flex-1">
                    <span className="block font-mono text-[10px] uppercase tracking-wide" style={{ color: it.color }}>{it.name}</span>
                    <span className="mt-0.5 block truncate text-sm text-foreground">{it.text}</span>
                  </span>
                </button>
              ) : it.kind === "join" ? (
                <div className="px-3 py-2.5">
                  <div className="flex items-start gap-2.5">
                    <Users className="mt-0.5 size-4 shrink-0 text-primary" />
                    <div className="min-w-0 flex-1">
                      <p className="text-sm text-foreground"><span className="font-semibold">{it.name || "Someone"}</span> wants to join your room.</p>
                    </div>
                  </div>
                  <div className="mt-2.5 flex items-center gap-2">
                    <button type="button" onClick={() => { it.onAdmit && it.onAdmit(); ToastStore.dismiss(it.id); }}
                      className="flex-1 rounded-md border-2 border-primary bg-primary px-2 py-1.5 font-mono text-[10px] font-semibold uppercase tracking-wide text-primary-foreground transition-colors hover:bg-primary/90">Admit</button>
                    <button type="button" onClick={() => { it.onDecline && it.onDecline(); ToastStore.dismiss(it.id); }}
                      className="flex-1 rounded-md border-2 border-primary/50 px-2 py-1.5 font-mono text-[10px] font-semibold uppercase tracking-wide text-primary transition-colors hover:bg-accent">Decline</button>
                  </div>
                </div>
              ) : (
                <div className="flex items-start gap-2.5 px-3 py-2.5">
                  <span className="mt-0.5 text-sm text-foreground">{it.text}</span>
                </div>
              )}
            </div>
          ))}
        </div>
      );
    }


    // Streams the recorded audio to /api/transcribe, then calls onText with the
    // result and surfaces the detected language. Degrades gracefully if the
    // browser can't record or the server model is unavailable.
    // ----------------------------------------------------------------- //
    const LANG_NAMES = { en: "English", fr: "French", es: "Spanish", de: "German", it: "Italian",
      pt: "Portuguese", nl: "Dutch", ja: "Japanese", zh: "Chinese", "zh-cn": "Chinese", "zh-tw": "Chinese",
      ko: "Korean", hi: "Hindi", ar: "Arabic", ru: "Russian", vi: "Vietnamese", pl: "Polish",
      tr: "Turkish", sv: "Swedish", uk: "Ukrainian", id: "Indonesian", th: "Thai" };
    // App-wide ASR config (languages, latency/accuracy profiles), fetched once
    // from /api/config and cached on window so every MicButton shares it.
    function useAsrConfig() {
      const [cfg, setCfg] = useState(window.__sozaiAsrCfg || null);
      useEffect(() => {
        if (window.__sozaiAsrCfg) { setCfg(window.__sozaiAsrCfg); return; }
        let alive = true;
        (async () => {
          try {
            const res = await fetch("/api/config");
            if (!res.ok) return;
            const j = await res.json();
            const c = {
              languages: j.asrLanguages || [["Auto-detect", "auto"]],
              profiles: j.asrProfiles || ["Most accurate - 1.12 s"],
              defaultProfile: j.asrDefaultProfile || "Most accurate - 1.12 s",
              osSupported: j.asrOsSupported !== false,
            };
            window.__sozaiAsrCfg = c;
            if (alive) setCfg(c);
          } catch (e) {}
        })();
        return () => { alive = false; };
      }, []);
      return cfg;
    }

    function MicButton({ field, onText, title }) {
      const { settings, update } = useSettings();
      const asrCfg = useAsrConfig();
      const [state, setState] = useState("idle"); // idle | recording | working | error
      const [lang, setLang] = useState("");
      const [note, setNote] = useState("");
      const [showCfg, setShowCfg] = useState(false);
      const recRef = useRef(null);
      const chunksRef = useRef([]);
      const streamRef = useRef(null);

      const asrLanguage = settings.asrLanguage || "auto";
      const asrProfile = settings.asrProfile || "Most accurate - 1.12 s";


      async function start() {
        setNote(""); setLang("");
        if (asrCfg && asrCfg.osSupported === false) {
          setState("error"); setNote("Nemotron is not supported on this OS."); return;
        }
        if (!navigator.mediaDevices || typeof MediaRecorder === "undefined") {
          setState("error"); setNote("Recording not supported here."); return;
        }
        try {
          const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
          streamRef.current = stream;
          const mime = ["audio/webm;codecs=opus", "audio/webm", "audio/ogg", "audio/mp4"].find((m) => MediaRecorder.isTypeSupported && MediaRecorder.isTypeSupported(m)) || "";
          const rec = new MediaRecorder(stream, mime ? { mimeType: mime } : undefined);
          chunksRef.current = [];
          rec.ondataavailable = (e) => { if (e.data && e.data.size) chunksRef.current.push(e.data); };
          rec.onstop = onStop;
          rec.start();
          recRef.current = rec;
          setState("recording");
          if (window.sozaiPing) window.sozaiPing("🎤 recording " + field);
        } catch (e) {
          setState("error"); setNote("Microphone blocked.");
        }
      }
      function stop() {
        const rec = recRef.current;
        if (rec && rec.state !== "inactive") { try { rec.stop(); } catch (e) {} }
        if (streamRef.current) { streamRef.current.getTracks().forEach((t) => t.stop()); streamRef.current = null; }
      }
      async function onStop() {
        setState("working");
        try {
          const blob = new Blob(chunksRef.current, { type: (recRef.current && recRef.current.mimeType) || "audio/webm" });
          const dataUrl = await new Promise((res, rej) => { const r = new FileReader(); r.onload = () => res(r.result); r.onerror = rej; r.readAsDataURL(blob); });
          const resp = await fetch("/api/transcribe", {
            method: "POST", headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ data_url: dataUrl, field, language: asrLanguage, chunk_profile: asrProfile }),
          });
          const data = resp.ok ? await resp.json() : null;
          if (!data) { setState("error"); setNote("Transcription failed."); return; }
          if (data.unsupported_os) { setState("error"); setNote("Nemotron is not supported on this OS."); return; }
          if (data.available === false) { setState("error"); setNote("Voice model unavailable on the server."); return; }
          if (data.text) {
            onText(data.text);
            setLang(data.language || "");
            setState("idle");
            setNote(data.language ? "Heard " + (LANG_NAMES[data.language.toLowerCase()] || data.language) : "");
          } else {
            setState("idle"); setNote("Didn't catch that - try again.");
          }
        } catch (e) {
          setState("error"); setNote("Transcription failed.");
        }
      }

      const recording = state === "recording";
      const working = state === "working";
      const osBlocked = asrCfg && asrCfg.osSupported === false;
      return (
        <span className="relative inline-flex items-center gap-1.5">
          <button type="button"
            onClick={() => (recording ? stop() : start())}
            disabled={working || osBlocked}
            aria-pressed={recording}
            title={osBlocked ? "Nemotron is not supported on this OS" : (title || ("Dictate " + field))}
            className={cn("flex size-7 items-center justify-center rounded-full border-2 transition-colors disabled:opacity-60",
              recording ? "border-[oklch(0.55_0.2_25)] bg-[oklch(0.55_0.2_25)] text-white animate-pulse"
                        : "border-primary/60 text-primary hover:bg-accent")}>
            {working ? <Loader2 className="size-3.5 animate-spin" /> : recording ? <Square className="size-3" /> : <Mic className="size-3.5" />}
          </button>
          {/* combined ASR + prompt settings, set BEFORE recording */}
          <button type="button" onClick={() => setShowCfg((v) => !v)} aria-expanded={showCfg}
            title="Recording & prompt settings"
            className={cn("flex size-7 items-center justify-center rounded-full border-2 transition-colors",
              showCfg ? "border-primary bg-accent text-foreground" : "border-primary/40 text-primary/80 hover:bg-accent")}>
            <SlidersHorizontal className="size-3.5" />
          </button>
          {lang ? <span className="rounded-full border border-primary/40 px-1.5 font-mono text-[9px] uppercase tracking-wide text-primary" title="Detected language">{(LANG_NAMES[lang.toLowerCase()] || lang)}</span> : null}
          {note && !lang ? <span className="font-mono text-[9px] uppercase tracking-wide text-muted-foreground">{note}</span> : null}

          {/* recording loading overlay (mirrors the auto-generate developing look) */}
          {(recording || working) ? (
            <span className="pointer-events-none absolute left-1/2 top-9 z-30 flex -translate-x-1/2 items-center gap-2 whitespace-nowrap rounded-md border-2 border-primary/50 bg-card px-3 py-1.5 shadow-lg"
              role="status" aria-live="polite">
              {recording ? (
                <>
                  <span className="size-2 animate-pulse rounded-full bg-[oklch(0.55_0.2_25)]" />
                  <span className="font-mono text-[10px] uppercase tracking-widest text-foreground">Recording… tap to stop</span>
                </>
              ) : (
                <>
                  <Loader2 className="size-3.5 animate-spin text-primary" />
                  <span className="font-mono text-[10px] uppercase tracking-widest text-primary">Transcribing…</span>
                  <span className="flex gap-1" aria-hidden="true">
                    <span className="size-1.5 rounded-full bg-primary" style={{ animation: "sozai-bounce 1s infinite", animationDelay: "0ms" }} />
                    <span className="size-1.5 rounded-full bg-primary" style={{ animation: "sozai-bounce 1s infinite", animationDelay: "150ms" }} />
                    <span className="size-1.5 rounded-full bg-primary" style={{ animation: "sozai-bounce 1s infinite", animationDelay: "300ms" }} />
                  </span>
                </>
              )}
            </span>
          ) : null}

          {/* settings popover */}
          {showCfg ? (
            <div className="absolute right-0 top-9 z-40 w-72 rounded-md border-2 border-primary/50 bg-card p-3 shadow-xl">
              <div className="flex items-center justify-between">
                <span className="font-mono text-[10px] font-semibold uppercase tracking-wide text-foreground">Recording settings</span>
                <button type="button" onClick={() => setShowCfg(false)} className="text-muted-foreground hover:text-foreground"><X className="size-3.5" /></button>
              </div>
              {osBlocked ? (
                <p className="mt-2 rounded border border-[oklch(0.55_0.18_25)]/40 bg-[oklch(0.55_0.18_25)]/10 px-2 py-1.5 font-mono text-[10px] leading-snug text-[oklch(0.5_0.18_25)]">
                  Nemotron is not supported on this OS (Linux only). Recording is disabled.
                </p>
              ) : null}
              {/* language */}
              <label className="mt-2.5 block font-mono text-[10px] uppercase tracking-wide text-muted-foreground">Language</label>
              <select value={asrLanguage} onChange={(e) => update({ asrLanguage: e.target.value })}
                className="mt-1 w-full rounded-md border-2 border-primary/40 bg-card px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary">
                {(asrCfg ? asrCfg.languages : [["Auto-detect", "auto"]]).map((opt) => (
                  <option key={opt[1]} value={opt[1]}>{opt[0]}</option>
                ))}
              </select>
              {/* latency / accuracy */}
              <label className="mt-2.5 block font-mono text-[10px] uppercase tracking-wide text-muted-foreground">Latency / accuracy</label>
              <select value={asrProfile} onChange={(e) => update({ asrProfile: e.target.value })}
                className="mt-1 w-full rounded-md border-2 border-primary/40 bg-card px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary">
                {(asrCfg ? asrCfg.profiles : ["Most accurate - 1.12 s"]).map((p) => (
                  <option key={p} value={p}>{p}</option>
                ))}
              </select>
              <p className="mt-2.5 font-mono text-[9px] leading-snug tracking-wide text-muted-foreground">
                These apply to voice dictation only.
              </p>
            </div>
          ) : null}
        </span>
      );
    }

    // ----------------------------------------------------------------- //
    // LLM Trace - shared icon map for the trace views (caption / NSFW / ASR).
    // ----------------------------------------------------------------- //
    const TRACE_ICON = { autocaption: "✨", autotitle: "🏷️", nsfw_check: "🛡️", transcribe: "🎤" };
    // ----------------------------------------------------------------- //
    // TraceScreen - full-page version of the LLM trace view, opened from the
    // "Trace" button in the top bar. Embeds the Phoenix UI and a recent-calls
    // list, with a back button to return to Add to Album.
    // ----------------------------------------------------------------- //
    function TraceScreen({ onBack, onOpenSettings }) {
      const [data, setData] = useState({ events: [], phoenix: false, phoenix_url: null, stats: null });
      const [loading, setLoading] = useState(false);
      const [selected, setSelected] = useState(0);
      const [filterType, setFilterType] = useState("all");
      const [filterStatus, setFilterStatus] = useState("all");
      const [copied, setCopied] = useState(false);
      const timerRef = useRef(null);

      async function refresh() {
        setLoading(true);
        try {
          const res = await fetch("/api/trace?limit=80");
          if (res.ok) setData(await res.json());
        } catch (e) {} finally { setLoading(false); }
      }
      useEffect(() => {
        refresh();
        timerRef.current = setInterval(refresh, 2500);
        return () => { if (timerRef.current) clearInterval(timerRef.current); };
      }, []);

      const allEvents = data.events || [];
      const stats = data.stats || { total: 0, errors: 0, error_rate: 0, avg_ms: 0, p95_ms: 0, tokens_total: 0, by_type: {} };
      const types = Object.keys(stats.by_type || {});
      const phoenixDirect = data.phoenix_direct || data.phoenix_url || "/phoenix/";

      const events = allEvents.filter((e) =>
        (filterType === "all" || e.name === filterType) &&
        (filterStatus === "all" || e.status === filterStatus));
      const sel = events[selected] || events[0] || null;

      function prettyJSON(s) {
        if (s == null) return "";
        try { return JSON.stringify(JSON.parse(s), null, 2); } catch (e) { return String(s); }
      }
      function fmtTime(ts) {
        if (!ts) return "";
        try { return new Date(ts * 1000).toLocaleTimeString(); } catch (e) { return ""; }
      }
      function copyDetail() {
        if (!sel) return;
        try {
          navigator.clipboard.writeText(JSON.stringify(sel, null, 2));
          setCopied(true); setTimeout(() => setCopied(false), 1500);
        } catch (e) {}
      }

      const Stat = ({ label, value, tone }) => (
        <div className="flex flex-col rounded-md border-2 border-primary/25 bg-card px-3 py-2">
          <span className="font-mono text-[9px] uppercase tracking-wide text-muted-foreground">{label}</span>
          <span className={cn("font-mono text-lg font-semibold", tone || "text-foreground")}>{value}</span>
        </div>
      );

      return (
        <div className="mx-auto flex w-full max-w-6xl flex-col gap-4">
          {/* header */}
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div className="flex items-center gap-2">
              <button type="button" onClick={onBack}
                className="flex items-center gap-1.5 rounded-md border-2 border-primary/60 px-3 py-1.5 font-mono text-xs uppercase tracking-wide text-primary transition-colors hover:bg-accent">
                <ChevronLeft className="size-4" /> Back
              </button>
              <span className="flex items-center gap-2 font-mono text-sm font-semibold uppercase tracking-wide text-foreground">
                <Cpu className="size-5 text-primary" /> LLM Trace
                {data.phoenix
                  ? <span className="rounded-full border border-primary/40 px-1.5 font-mono text-[9px] uppercase tracking-wide text-primary">Phoenix</span>
                  : <span className="rounded-full border border-primary/30 px-1.5 font-mono text-[9px] uppercase tracking-wide text-muted-foreground">local</span>}
              </span>
            </div>
            <div className="flex items-center gap-2">
              {loading ? <Loader2 className="size-4 animate-spin text-primary" /> : null}
              {data.phoenix ? (
                <a href={phoenixDirect} target="_blank" rel="noreferrer"
                  className="inline-flex items-center gap-1 rounded-md border-2 border-primary/60 px-3 py-1.5 font-mono text-[11px] uppercase tracking-wide text-primary transition-colors hover:bg-accent">
                  Open full Phoenix <ChevronRight className="size-3" />
                </a>
              ) : null}
              <button type="button" onClick={() => onOpenSettings && onOpenSettings()} aria-label="Settings"
                title="Settings" className="flex size-9 items-center justify-center rounded-md border-2 border-primary/70 text-primary transition-colors hover:bg-accent">
                <Settings className="size-4" />
              </button>
            </div>
          </div>

          {/* summary stats */}
          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-6">
            <Stat label="Calls" value={stats.total} />
            <Stat label="Errors" value={stats.errors} tone={stats.errors ? "text-[oklch(0.5_0.2_25)]" : "text-foreground"} />
            <Stat label="Error rate" value={(stats.error_rate * 100).toFixed(0) + "%"} tone={stats.error_rate ? "text-[oklch(0.5_0.2_25)]" : "text-foreground"} />
            <Stat label="Avg latency" value={stats.avg_ms + "ms"} />
            <Stat label="p50" value={(stats.p50_ms || 0) + "ms"} />
            <Stat label="p95" value={(stats.p95_ms || 0) + "ms"} />
            <Stat label="p99" value={(stats.p99_ms || 0) + "ms"} />
            <Stat label="Tokens" value={stats.tokens_total} />
            <Stat label="Prompt tok" value={stats.tokens_prompt || 0} />
            <Stat label="Completion tok" value={stats.tokens_completion || 0} />
            <Stat label="Tokens/sec" value={stats.avg_tokens_per_sec || 0} />
            <Stat label="Cost" value={"$" + (stats.cost_usd || 0).toFixed(2)} />
          </div>
          <p className="-mt-2 font-mono text-[9px] leading-snug tracking-wide text-muted-foreground">
            Cost is $0 - these run as local open-source models (no per-token API billing). Token counts use the caption model's tokenizer when loaded, else a word-based estimate.
          </p>

          {/* filters */}
          <div className="flex flex-wrap items-center gap-2">
            <span className="font-mono text-[9px] uppercase tracking-wide text-muted-foreground">Filter</span>
            <button type="button" onClick={() => { setFilterType("all"); setSelected(0); }} aria-pressed={filterType === "all"}
              className={cn("rounded-full border-2 px-2.5 py-1 font-mono text-[10px] uppercase tracking-wide transition-colors",
                filterType === "all" ? "border-primary bg-accent text-foreground" : "border-primary/40 text-muted-foreground hover:bg-accent/50")}>
              all types
            </button>
            {types.map((t) => (
              <button key={t} type="button" onClick={() => { setFilterType(t); setSelected(0); }} aria-pressed={filterType === t}
                className={cn("flex items-center gap-1 rounded-full border-2 px-2.5 py-1 font-mono text-[10px] uppercase tracking-wide transition-colors",
                  filterType === t ? "border-primary bg-accent text-foreground" : "border-primary/40 text-muted-foreground hover:bg-accent/50")}>
                <span aria-hidden="true">{TRACE_ICON[t] || "•"}</span>{t}
                <span className="text-muted-foreground">{stats.by_type[t] ? stats.by_type[t].count : 0}</span>
              </button>
            ))}
            <span className="mx-1 h-4 w-px bg-primary/20" />
            {["all", "ok", "error"].map((s) => (
              <button key={s} type="button" onClick={() => { setFilterStatus(s); setSelected(0); }} aria-pressed={filterStatus === s}
                className={cn("rounded-full border-2 px-2.5 py-1 font-mono text-[10px] uppercase tracking-wide transition-colors",
                  filterStatus === s ? "border-primary bg-accent text-foreground" : "border-primary/40 text-muted-foreground hover:bg-accent/50")}>
                {s}
              </button>
            ))}
          </div>

          {events.length === 0 ? (
            <p className="rounded-lg border-2 border-dashed border-primary/30 bg-accent/20 px-3 py-10 text-center font-mono text-[12px] uppercase tracking-wide text-muted-foreground">
              {allEvents.length === 0
                ? "No calls yet - generate a caption or record a voice note, and the span shows up here."
                : "No spans match this filter."}
            </p>
          ) : (
            <div className="grid grid-cols-1 gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)]">
              {/* span list */}
              <div className="overflow-hidden rounded-lg border-2 border-primary/30 bg-card">
                <div className="grid grid-cols-[1fr_auto_auto] gap-2 border-b-2 border-primary/20 bg-accent/30 px-3 py-2 font-mono text-[9px] uppercase tracking-wide text-muted-foreground">
                  <span>name</span><span>latency</span><span>status</span>
                </div>
                <ul className="max-h-[60vh] divide-y divide-primary/10 overflow-auto">
                  {events.map((e, i) => (
                    <li key={e.id || i}>
                      <button type="button" onClick={() => setSelected(i)}
                        className={cn("grid w-full grid-cols-[1fr_auto_auto] items-center gap-2 px-3 py-2 text-left transition-colors",
                          i === selected ? "bg-accent" : "hover:bg-accent/40")}>
                        <span className="flex min-w-0 flex-col">
                          <span className="flex items-center gap-1.5">
                            <span aria-hidden="true">{TRACE_ICON[e.name] || "•"}</span>
                            <span className="truncate font-mono text-[11px] font-semibold text-foreground">{e.name}</span>
                          </span>
                          {e.ended ? <span className="font-mono text-[9px] text-muted-foreground">{fmtTime(e.ended)}</span> : null}
                        </span>
                        <span className="font-mono text-[10px] text-muted-foreground">{typeof e.duration_ms === "number" ? e.duration_ms + "ms" : "-"}</span>
                        <span className={cn("rounded-full px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wide",
                          e.status === "ok" ? "bg-primary/15 text-primary"
                          : e.status === "error" ? "bg-[oklch(0.55_0.2_25)]/15 text-[oklch(0.5_0.2_25)]"
                          : "bg-accent text-muted-foreground")}>{e.status}</span>
                      </button>
                    </li>
                  ))}
                </ul>
              </div>

              {/* span detail */}
              <div className="overflow-auto rounded-lg border-2 border-primary/30 bg-card p-4">
                {sel ? (
                  <div className="flex flex-col gap-3">
                    <div className="flex flex-wrap items-center justify-between gap-2">
                      <span className="flex items-center gap-1.5 font-mono text-sm font-semibold text-foreground">
                        <span aria-hidden="true">{TRACE_ICON[sel.name] || "•"}</span>{sel.name}
                        <span className="rounded border border-primary/40 px-1 font-mono text-[8px] uppercase tracking-wide text-primary">{sel.kind || "LLM"}</span>
                      </span>
                      <div className="flex items-center gap-2">
                        <button type="button" onClick={copyDetail}
                          className="inline-flex items-center gap-1 rounded-md border-2 border-primary/50 px-2 py-1 font-mono text-[9px] uppercase tracking-wide text-primary transition-colors hover:bg-accent">
                          {copied ? <Check className="size-3" /> : <Copy className="size-3" />} {copied ? "copied" : "copy"}
                        </button>
                        <span className={cn("rounded-full px-2 py-0.5 font-mono text-[10px] uppercase tracking-wide",
                          sel.status === "ok" ? "bg-primary/15 text-primary"
                          : sel.status === "error" ? "bg-[oklch(0.55_0.2_25)]/15 text-[oklch(0.5_0.2_25)]"
                          : "bg-accent text-muted-foreground")}>{sel.status}</span>
                      </div>
                    </div>

                    <div className="grid grid-cols-2 gap-x-6 gap-y-1 font-mono text-[10px] text-muted-foreground sm:grid-cols-3">
                      {sel.model ? <span className="col-span-2 truncate sm:col-span-3"><span className="text-foreground/60">model</span> {sel.model}</span> : null}
                      {sel.provider ? <span><span className="text-foreground/60">provider</span> {sel.provider}</span> : null}
                      {sel.finish_reason ? <span><span className="text-foreground/60">finish</span> {sel.finish_reason}</span> : null}
                      {typeof sel.duration_ms === "number" ? <span><span className="text-foreground/60">latency</span> {sel.duration_ms}ms</span> : null}
                      {sel.ended ? <span><span className="text-foreground/60">time</span> {fmtTime(sel.ended)}</span> : null}
                      {sel.file ? <span className="truncate"><span className="text-foreground/60">file</span> {sel.file}</span> : null}
                      {typeof sel.tokens_in === "number" ? <span><span className="text-foreground/60">tok in</span> {sel.tokens_in}</span> : null}
                      {typeof sel.tokens_out === "number" ? <span><span className="text-foreground/60">tok out</span> {sel.tokens_out}</span> : null}
                      {typeof sel.tokens_total === "number" ? <span><span className="text-foreground/60">tok total</span> {sel.tokens_total}</span> : null}
                      {sel.tokens_per_sec ? <span><span className="text-foreground/60">tok/sec</span> {sel.tokens_per_sec}</span> : null}
                      {typeof sel.cost_usd === "number" ? <span><span className="text-foreground/60">cost</span> ${sel.cost_usd.toFixed(2)}</span> : null}
                      {sel.span_id ? <span className="truncate"><span className="text-foreground/60">span</span> {sel.span_id}</span> : null}
                      {sel.trace_id ? <span className="col-span-2 truncate sm:col-span-3"><span className="text-foreground/60">trace</span> {sel.trace_id}</span> : null}
                    </div>

                    {sel.system ? (
                      <div>
                        <p className="mb-1 font-mono text-[9px] font-semibold uppercase tracking-wide text-muted-foreground">System</p>
                        <pre className="overflow-auto whitespace-pre-wrap rounded-md border-2 border-primary/20 bg-accent/20 p-2 font-mono text-[11px] leading-snug text-foreground/90">{sel.system}</pre>
                      </div>
                    ) : null}

                    {sel.invocation && Object.keys(sel.invocation).length ? (
                      <div>
                        <p className="mb-1 font-mono text-[9px] font-semibold uppercase tracking-wide text-muted-foreground">Invocation parameters</p>
                        <pre className="overflow-auto rounded-md border-2 border-primary/20 bg-accent/20 p-2 font-mono text-[11px] leading-snug text-foreground/90">{JSON.stringify(sel.invocation, null, 2)}</pre>
                      </div>
                    ) : null}

                    {sel.input ? (
                      <div>
                        <p className="mb-1 font-mono text-[9px] font-semibold uppercase tracking-wide text-muted-foreground">Input</p>
                        <pre className="max-h-52 overflow-auto rounded-md border-2 border-primary/20 bg-accent/20 p-2 font-mono text-[11px] leading-snug text-foreground/90">{prettyJSON(sel.input)}</pre>
                      </div>
                    ) : null}

                    {sel.output ? (
                      <div>
                        <p className="mb-1 font-mono text-[9px] font-semibold uppercase tracking-wide text-muted-foreground">Output</p>
                        <pre className="max-h-52 overflow-auto whitespace-pre-wrap rounded-md border-2 border-primary/20 bg-accent/20 p-2 font-mono text-[11px] leading-snug text-foreground/90">{sel.output}</pre>
                      </div>
                    ) : null}

                    {sel.error ? (
                      <div>
                        <p className="mb-1 font-mono text-[9px] font-semibold uppercase tracking-wide text-[oklch(0.5_0.2_25)]">Error</p>
                        <pre className="overflow-auto whitespace-pre-wrap rounded-md border-2 border-[oklch(0.55_0.2_25)]/30 bg-[oklch(0.55_0.2_25)]/10 p-2 font-mono text-[11px] leading-snug text-[oklch(0.5_0.2_25)]">{sel.error}</pre>
                      </div>
                    ) : null}
                  </div>
                ) : (
                  <p className="py-10 text-center font-mono text-[11px] uppercase tracking-wide text-muted-foreground">Select a span</p>
                )}
              </div>
            </div>
          )}
        </div>
      );
    }
    // ----------------------------------------------------------------- //
    // Accurate little illustrations of each view style, so the preview shows
    // what the user will actually get (item: render a real preview image).
    function VariantThumb({ id }) {
      const common = { width: "100%", height: "100%", viewBox: "0 0 120 56", preserveAspectRatio: "xMidYMid slice", "aria-hidden": true };
      if (id === "watercolor") {
        return (
          <svg {...common}>
            <rect width="120" height="56" fill="#eaf0d8" />
            <path d="M0 38 Q30 30 60 36 T120 32 V56 H0 Z" fill="#cfe0ff" opacity="0.85" />
            <path d="M0 20 Q40 14 80 20 T120 16" stroke="#9eaad7" strokeWidth="3" fill="none" opacity="0.7" />
            <circle cx="34" cy="26" r="3" fill="#3b7d4f" /><circle cx="72" cy="32" r="3" fill="#3b7d4f" />
            {/* a couple of polaroid pins */}
            <g transform="rotate(-6 30 18)"><rect x="24" y="10" width="14" height="16" fill="#fff" stroke="#ccc" /><rect x="26" y="12" width="10" height="9" fill="#c8912e" /></g>
            <g transform="rotate(5 82 16)"><rect x="76" y="8" width="14" height="16" fill="#fff" stroke="#ccc" /><rect x="78" y="10" width="10" height="9" fill="#b6485c" /></g>
          </svg>
        );
      }
      if (id === "cesium") {
        return (
          <svg {...common}>
            <rect width="120" height="56" fill="#1f2b3e" />
            <ellipse cx="60" cy="64" rx="80" ry="40" fill="#34506e" />
            <g fill="#c8b48a"><rect x="40" y="30" width="8" height="20" /><rect x="52" y="22" width="9" height="28" /><rect x="65" y="34" width="7" height="16" /><rect x="75" y="26" width="9" height="24" /></g>
            <g fill="#9fb6cf" opacity="0.5"><rect x="40" y="30" width="3" height="20" /><rect x="52" y="22" width="3" height="28" /><rect x="75" y="26" width="3" height="24" /></g>
            <g transform="rotate(-5 58 16)"><rect x="52" y="8" width="13" height="15" fill="#fff" /><rect x="54" y="10" width="9" height="8" fill="#2F5D7C" /></g>
          </svg>
        );
      }
      if (id === "develop") {
        return (
          <svg {...common}>
            <rect width="120" height="56" fill="#efe6d6" />
            {[[14,-8],[40,5],[68,-4],[92,7]].map(([x,r],i)=>(
              <g key={i} transform={`rotate(${r} ${x+9} 28)`}><rect x={x} y="14" width="18" height="22" fill="#fff" stroke="#d8c39a" /><rect x={x+2} y="16" width="14" height="13" fill={["#b6485c","#2F5D7C","#C8912E","#3b7d4f"][i]} opacity="0.8" /></g>
            ))}
          </svg>
        );
      }
      if (id === "scrapbook") {
        return (
          <svg {...common}>
            <rect width="120" height="56" fill="#f1e7d4" />
            <path d="M10 40 Q40 20 70 30 T110 18" stroke="#b6485c" strokeWidth="1.5" fill="none" strokeDasharray="3 3" opacity="0.6" />
            {[[20,16],[54,28],[84,14]].map(([x,y],i)=>(<g key={i} transform={`rotate(${i%2?6:-5} ${x+8} ${y+8})`}><rect x={x} y={y} width="17" height="20" fill="#fff" stroke="#ccc" /><rect x={x+2} y={y+2} width="13" height="12" fill={["#C8912E","#2F5D7C","#b6485c"][i]} opacity="0.8" /></g>))}
          </svg>
        );
      }
      if (id === "grid") {
        return (
          <svg {...common}>
            <rect width="120" height="56" fill="#f3efe6" />
            {[0,1,2,3].map((c)=>[0,1].map((r)=>(<rect key={c+"-"+r} x={8+c*27} y={8+r*24} width="22" height="18" fill={["#cfe0ff","#e9d8c4","#d6e4c4","#e9c4cf"][(c+r)%4]} stroke="#fff" strokeWidth="2" />)))}
          </svg>
        );
      }
      // timeline
      return (
        <svg {...common}>
          <rect width="120" height="56" fill="#f3efe6" />
          <line x1="22" y1="6" x2="22" y2="50" stroke="#C8912E" strokeWidth="2" />
          {[12,28,44].map((y,i)=>(<g key={i}><circle cx="22" cy={y} r="3" fill="#C8912E" /><rect x="32" y={y-5} width="30" height="10" rx="2" fill="#fff" stroke="#ddd" /><rect x="66" y={y-4} width="40" height="3" fill="#ddd" /></g>))}
        </svg>
      );
    }
    function MapStylePicker({ variant, onChange }) {
      const current = MAP_VARIANTS.find((v) => v.id === variant) || MAP_VARIANTS[0];
      return (
        <div className="rounded-md border-2 border-primary/70 bg-card p-4">
          <div className="flex items-center justify-between gap-2">
            <span className="flex items-center gap-2 font-mono text-xs font-semibold uppercase tracking-wide text-foreground">
              <Palette className="size-4 text-primary" /> Views
            </span>
            {null}
          </div>
          <p className="mt-1 text-xs leading-snug text-muted-foreground">Pick how your memories render once they're developed. You can change this later, too.</p>

          <div className="mt-3 grid grid-cols-2 gap-2.5 sm:grid-cols-3">
            {MAP_VARIANTS.map((v) => {
              const IconC = v.icon || MapIcon;
              const sel = v.id === variant;
              return (
                <button key={v.id} type="button" onClick={() => onChange(v.id)}
                  aria-pressed={sel} title={v.blurb}
                  className={cn(
                    "group relative flex flex-col overflow-hidden rounded-lg border-2 text-left transition-all",
                    sel ? "border-primary ring-2 ring-primary/30" : "border-primary/30 hover:border-primary/70"
                  )}>
                  {/* accurate preview of the layout */}
                  <span className="relative block h-16 w-full overflow-hidden" aria-hidden="true">
                    <VariantThumb id={v.id} />
                    <span className="absolute right-1.5 top-1.5 flex size-6 items-center justify-center rounded-md border border-black/10 bg-card/80 backdrop-blur-sm">
                      <IconC className="size-3.5 text-primary" />
                    </span>
                    {sel ? (
                      <span className="absolute left-1.5 top-1.5 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground">
                        <Check className="size-3" />
                      </span>
                    ) : null}
                  </span>
                  <span className="px-2.5 py-2">
                    <span className="font-mono text-[11px] font-semibold uppercase tracking-wide text-foreground">{v.label}</span>
                  </span>
                </button>
              );
            })}
          </div>
        </div>
      );
    }

    // ----------------------------------------------------------------- //
    // WatercolorMap - an open-source re-imagining of the Cambridge
    // watercolor demo. Renders a painterly, interactive map of ANY city the
    // user picks (geocoded via OpenStreetMap Nominatim) using MapLibre GL JS
    // and free raster tiles. Users type an activity and a place; we geocode
    // it (or they click the map) and drop an annotated marker - their own
    // little "a morning run before class" story, for any city, no paid keys.
    // ----------------------------------------------------------------- //
    async function geocode(query, opts = {}) {
      const params = new URLSearchParams({ q: query, format: "jsonv2", limit: opts.limit || 1, addressdetails: 1 });
      const res = await fetch("https://nominatim.openstreetmap.org/search?" + params.toString(), {
        headers: { "Accept": "application/json" },
      });
      if (!res.ok) throw new Error("geocode failed");
      const data = await res.json();
      return data.map((d) => ({ lat: parseFloat(d.lat), lon: parseFloat(d.lon), label: d.display_name, type: d.type }));
    }

    // Reverse-geocode coordinates to a short, human "general area" - we keep it
    // intentionally coarse (neighbourhood + city), both for friendliness and
    // because a photo's location is a *general* place, not a survey pin.
    async function reverseGeocode(lat, lon) {
      try {
        const params = new URLSearchParams({ lat, lon, format: "jsonv2", zoom: 14, addressdetails: 1 });
        const res = await fetch("https://nominatim.openstreetmap.org/reverse?" + params.toString(), {
          headers: { "Accept": "application/json" },
        });
        if (!res.ok) return null;
        const d = await res.json();
        const a = d.address || {};
        const area = a.neighbourhood || a.suburb || a.quarter || a.hamlet || a.village || a.town || a.city_district;
        const city = a.city || a.town || a.village || a.municipality || a.county || a.state;
        const parts = [...new Set([area, city].filter(Boolean))];
        return parts.slice(0, 2).join(", ") || (d.display_name ? d.display_name.split(",").slice(0, 2).join(",").trim() : null);
      } catch (_) { return null; }
    }

    // A radius circle as a GeoJSON polygon (meters), so MapLibre can draw a real
    // ground circle that scales with zoom (a 'circle' layer is pixel-sized).
    function circlePolygon(lon, lat, meters, points = 56) {
      const coords = [];
      const dLat = meters / 110574;
      const dLon = meters / (111320 * Math.cos(lat * Math.PI / 180) || 1);
      for (let i = 0; i <= points; i++) {
        const t = (2 * Math.PI * i) / points;
        coords.push([lon + dLon * Math.cos(t), lat + dLat * Math.sin(t)]);
      }
      return { type: "Feature", geometry: { type: "Polygon", coordinates: [coords] } };
    }

    // Lazily load CesiumJS (heavy) only when the user opens the 3D globe view.
    // Pulls the UMD build + CSS from a CDN; resolves window.Cesium.
    const CESIUM_VER = "1.124.0";
    let _cesiumPromise = null;
    function loadCesium() {
      if (window.Cesium) return Promise.resolve(window.Cesium);
      if (_cesiumPromise) return _cesiumPromise;
      _cesiumPromise = new Promise((resolve, reject) => {
        // Cesium needs a base URL to find its workers/assets.
        window.CESIUM_BASE_URL = "https://cdn.jsdelivr.net/npm/cesium@" + CESIUM_VER + "/Build/Cesium/";
        const css = document.createElement("link");
        css.rel = "stylesheet";
        css.href = "https://cdn.jsdelivr.net/npm/cesium@" + CESIUM_VER + "/Build/Cesium/Widgets/widgets.css";
        document.head.appendChild(css);
        const s = document.createElement("script");
        s.src = "https://cdn.jsdelivr.net/npm/cesium@" + CESIUM_VER + "/Build/Cesium/Cesium.js";
        s.async = true;
        s.onload = () => { if (window.Cesium) resolve(window.Cesium); else reject(new Error("Cesium global missing")); };
        s.onerror = () => reject(new Error("Cesium failed to load"));
        document.head.appendChild(s);
      });
      return _cesiumPromise;
    }

    // Fetch runtime config (Cesium ion token) once; cached.
    let _cfgPromise = null;
    function getClientConfig() {
      if (_cfgPromise) return _cfgPromise;
      _cfgPromise = fetch("/api/config").then((r) => r.ok ? r.json() : {}).catch(() => ({}));
      return _cfgPromise;
    }

    function buildMapStyle(tileKey, colorway) {
      // Only the watercolor vector style exists now. Pick the palette by the
      // chosen colorway (classic / sepia / sunrise / dusk).
      const key = colorway || (TILE_SOURCES[tileKey] || TILE_SOURCES.watercolor).palette || "classic";
      return watercolorVectorStyle(WC_PALETTES[key] || WC_PALETTES.classic);
    }

    const ACTIVITY_ICONS = ["🏃", "🚶", "☕", "📷", "🍜", "🚲", "🛶", "🎨", "🌳", "🏛️", "🎶", "🛍️"];

    // Subscribe a component to the shared photo store.
    function useSozaiPhotos() {
      const [items, setItems] = useState(() => window.SozaiPhotos.all());
      useEffect(() => window.SozaiPhotos.subscribe(setItems), []);
      return items;
    }

    // Build the ordered flythrough stops from the pinned photos: sorted by
    // timestamp when available, else by array order. Shared by both map engines
    // so the "video" sequence is identical on the watercolor map and Cesium.
    function buildFlyStops(pinnedPhotos) {
      const withTs = pinnedPhotos.map((p, i) => ({ p, i, ts: photoTimestamp(p) }));
      const haveTs = withTs.filter((x) => x.ts != null);
      const sorted = haveTs.length === withTs.length
        ? withTs.slice().sort((a, b) => a.ts - b.ts)
        : withTs; // mixed/missing timestamps → keep pin order
      return sorted.map((x) => x.p);
    }

    // Shared photo tray - used by BOTH the watercolor map and the Cesium globe
    // so album photos (and their captions/dates/times) appear everywhere. Cards
    // are draggable onto the map and clickable to arm tap-to-pin; a reset
    // control sends everything back to the tray (the map is a canvas).
    function PhotoTray({ onPick, armedId, hint }) {
      const items = useSozaiPhotos();
      const pinned = items.filter((p) => p.pinned && p.lon != null && p.lat != null);
      const unpinned = items.filter((p) => !p.pinned);
      return (
        <div className="rounded-lg border-2 border-primary/40 bg-card p-4">
          <div className="flex items-center justify-between gap-2">
            <span className="flex items-center gap-2 font-mono text-xs font-semibold uppercase tracking-wide text-foreground"><ImageIcon className="size-4 text-primary" /> Photos from your album</span>
            <div className="flex items-center gap-2">
              <span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">{pinned.length} pinned · {unpinned.length} to place</span>
              {pinned.length ? (
                <button type="button" onClick={() => { window.SozaiPhotos.resetPins(); Collab.send("photos_reset", {}); }}
                  title="Send every photo back to the tray"
                  className="flex items-center gap-1 rounded-md border-2 border-primary/50 px-2 py-0.5 font-mono text-[10px] uppercase tracking-wide text-primary transition-colors hover:bg-accent">
                  <RotateCcw className="size-3" /> Reset
                </button>
              ) : null}
            </div>
          </div>
          <p className="mt-1 text-xs leading-snug text-muted-foreground">{hint || "Drag a photo onto the map - or tap it, then tap the map - to pin it where it happened. Captions carry over from “Add to Album.”"}</p>

          {unpinned.length ? (
            <ul className="mt-3 flex gap-3 overflow-x-auto pb-1">
              {unpinned.map((p) => {
                const arming = armedId === p.id;
                const meta = [p.date, p.time].filter(Boolean).join(" · ");
                return (
                  <li key={p.id} className="shrink-0">
                    <button type="button" onClick={() => onPick && onPick(p)}
                      draggable
                      onDragStart={(e) => { e.dataTransfer.setData("application/sozai-photo", p.id); e.dataTransfer.effectAllowed = "copy"; }}
                      className={cn("flex w-32 cursor-grab flex-col overflow-hidden rounded-md border-2 text-left transition-all active:cursor-grabbing",
                        arming ? "border-primary ring-2 ring-primary/30" : "border-primary/30 hover:border-primary/70")}>
                      <span className="relative block h-20 w-full overflow-hidden bg-accent/40">
                        <img src={p.src} alt={p.alt || ""} draggable={false} className="h-full w-full object-cover" />
                        <span className="absolute right-1 top-1 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground"><Pin className="size-3" /></span>
                      </span>
                      <span className="flex flex-col gap-0.5 px-2 py-1.5">
                        <span className="line-clamp-1 text-[11px] font-semibold text-foreground">{p.title || "Untitled"}</span>
                        <span className="line-clamp-1 text-[10px] text-muted-foreground">{p.caption || "-"}</span>
                        {meta ? <span className="font-mono text-[9px] uppercase tracking-wide text-primary/70">{meta}</span> : null}
                      </span>
                    </button>
                  </li>
                );
              })}
            </ul>
          ) : (
            <p className="mt-3 rounded-md border-2 border-dashed border-primary/30 bg-accent/20 px-3 py-2 text-center font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
              {pinned.length ? "All album photos are pinned. Press “Play journey” on the map." : "Add photos in “Add to Album” first."}
            </p>
          )}
        </div>
      );
    }

    function WatercolorMap({ tileKey = "watercolor", cityName }) {
      const mapRef = useRef(null);
      const containerRef = useRef(null);
      const fsWrapRef = useRef(null);
      const markersRef = useRef([]);
      const [ready, setReady] = useState(false);
      const [isFullscreen, setIsFullscreen] = useState(false);
      const [libMissing, setLibMissing] = useState(false);
      const [place, setPlace] = useState(cityName || tripMeta.location || "Ottawa");
      const [searching, setSearching] = useState(false);
      const [searchErr, setSearchErr] = useState(null);
      const [center, setCenter] = useState({ lon: -123.1207, lat: 49.2827, zoom: 11 }); // Vancouver default
      const [activities, setActivities] = useState([]);
      const [draft, setDraft] = useState({ text: "", where: "", icon: "🏃" });
      const [adding, setAdding] = useState(false);
      const [addErr, setAddErr] = useState(null);
      const [pickOnMap, setPickOnMap] = useState(false);
      const [tileFellBack, setTileFellBack] = useState(false);
      const [effectiveTile, setEffectiveTile] = useState(tileKey);
      const [colorway, setColorway] = useState(() => {
        try { return localStorage.getItem("sozai_wc_colorway") || "classic"; } catch (e) { return "classic"; }
      });
      const [styleEpoch, setStyleEpoch] = useState(0);
      // Polaroid photo pins the user drops on the map
      const [polaroids, setPolaroids] = useState([]);
      const [pinMode, setPinMode] = useState(false);   // armed with a pending photo
      const [polaroidBusy, setPolaroidBusy] = useState(false);   // upload in progress
      const pendingPhotoRef = useRef(null);            // {src, caption, date, time, id} waiting to be placed
      const polaroidMarkersRef = useRef([]);
      const polaroidFileRef = useRef(null);
      const storeMarkersRef = useRef({}); // id -> {marker, el}

      // album photos from the shared store (carry caption/date/time from "Add
      // to Album"); the draft tray lets the user pin them onto the map.
      const storePhotos = useSozaiPhotos();
      const pinnedStore = storePhotos.filter((p) => p.pinned && p.lon != null && p.lat != null);
      // ordered stops for the flythrough (sorted by timestamp when available)
      const flyStops = buildFlyStops(pinnedStore);

      // flythrough ("Map of My Time" video) state
      const [flying, setFlying] = useState(false);
      const [flyIdx, setFlyIdx] = useState(-1);
      const flyAbortRef = useRef({ stop: false });
      const [dropArmed, setDropArmed] = useState(false); // drag-from-tray hint
      // transport that travels along the journey (item 5)
      const TRANSPORTS = [
        { id: "car", label: "Car", emoji: "🚗", speed: 1 },
        { id: "bike", label: "Bicycle", emoji: "🚲", speed: 0.75 },
        { id: "walk", label: "Walk", emoji: "🚶", speed: 0.5 },
        { id: "plane", label: "Plane", emoji: "✈️", speed: 1.6 },
        { id: "train", label: "Train", emoji: "🚆", speed: 1.3 },
      ];
      const [transport, setTransport] = useState("car");
      const transportMarkerRef = useRef(null);
      // recording the journey to a downloadable clip (item 5)
      const [recording, setRecording] = useState(false);
      const recorderRef = useRef(null);
      const recChunksRef = useRef([]);
      const [clipUrl, setClipUrl] = useState(null);
      // is the active style one of the painterly watercolor (vector) styles?
      const isWatercolor = ((TILE_SOURCES[tileKey] || {}).kind === "vector") && !tileFellBack;

      // init map once
      useEffect(() => {
        if (mapRef.current || !containerRef.current) return;
        let map;
        let retryTimer = null;
        let cancelled = false;

        function start() {
          if (cancelled || mapRef.current) return;
          if (!window.maplibregl) {
            // the MapLibre script may still be downloading - retry briefly
            retryTimer = setTimeout(start, 300);
            return;
          }
          try {
            map = new window.maplibregl.Map({
              container: containerRef.current,
              style: buildMapStyle(tileKey, colorway),
              center: [center.lon, center.lat],
              zoom: center.zoom,
              attributionControl: { compact: true },
              preserveDrawingBuffer: true, // needed to record the canvas to a clip
            });
          } catch (e) {
            console.error("[map] init failed", e);
            setLibMissing(true);
            return;
          }
          map.addControl(new window.maplibregl.NavigationControl({ showCompass: true }), "top-right");
          map.on("load", () => setReady(true));
          // Safety net: reveal the map even if 'load' is slow/never fires.
          map._readyTimer = setTimeout(() => setReady(true), 4000);

          // The watercolor style uses key-free OpenFreeMap vector tiles, so
          // there is no longer a raster basemap to fall back to. On a genuine,
          // sustained source failure we simply re-apply the classic watercolor
          // style (key-free) and reveal the map rather than leaving it blank.
          let hardErrors = 0;
          map.on("error", (ev) => {
            const err = ev && ev.error;
            const msg = (err && (err.message || String(err))) || "";
            const status = err && err.status;
            const authFail = status === 401 || status === 403 || status === 429 ||
                             /\b(401|403|429)\b/.test(msg);
            const sourceFail = !!ev.sourceId && /Failed to fetch|NetworkError|load|JSON|style/i.test(msg);
            if (authFail) hardErrors += 5; else if (sourceFail) hardErrors += 1;
            if (authFail || sourceFail) console.warn("[map] source error", { msg, status, sourceId: ev.sourceId });
            if (hardErrors >= 4 && !tileFellBackRef.current) {
              tileFellBackRef.current = true;
              setTileFellBack(true);
              try { map.setStyle(buildMapStyle("watercolor", "classic")); } catch (e) {}
              setReady(true);
            }
          });
          map.on("click", (e) => {
            const ll = e.lngLat;
            // dropping a Polaroid takes priority when armed
            if (pinModeRef.current && pendingPhotoRef.current) {
              const pending = pendingPhotoRef.current;
              pendingPhotoRef.current = null;
              setPinMode(false);
              // a store photo (object with an id) persists onto the shared store;
              // a bare data-URL string is an ad-hoc local polaroid.
              if (pending && typeof pending === "object" && pending.storeId) {
                window.SozaiPhotos.pin(pending.storeId, ll.lng, ll.lat);
                if (mapRef.current) mapRef.current.flyTo({ center: [ll.lng, ll.lat], zoom: Math.max(mapRef.current.getZoom(), 14), duration: 900 });
              } else {
                const src = (pending && typeof pending === "object") ? pending.src : pending;
                const cap = (pending && typeof pending === "object") ? (pending.caption || "") : "";
                setPolaroids((prev) => {
                  if (prev.length >= MAX_POLAROIDS) {
                    setAddErr("You can pin up to " + MAX_POLAROIDS + " polaroids.");
                    return prev;
                  }
                  return [...prev, {
                    id: "pl" + Date.now() + "-" + Math.random().toString(36).slice(2, 5),
                    src, caption: cap, lon: ll.lng, lat: ll.lat,
                    rot: Math.random() * 10 - 5,
                  }];
                });
              }
              return;
            }
            if (pickOnMapRef.current) {
              addActivityAt(draftRef.current, { lon: ll.lng, lat: ll.lat });
              setPickOnMap(false);
            }
          });
          mapRef.current = map;
        }

        start();
        // last resort: if MapLibre never loads at all, show the offline notice
        const giveUp = setTimeout(() => { if (!mapRef.current && !window.maplibregl) setLibMissing(true); }, 9000);

        return () => {
          cancelled = true;
          if (retryTimer) clearTimeout(retryTimer);
          clearTimeout(giveUp);
          if (map) { if (map._readyTimer) clearTimeout(map._readyTimer); map.remove(); }
          mapRef.current = null;
        };
      }, []); // eslint-disable-line

      // refs so the map click handler sees fresh values
      const pickOnMapRef = useRef(false);
      const draftRef = useRef(draft);
      const tileFellBackRef = useRef(false);
      const pinModeRef = useRef(false);
      useEffect(() => { pickOnMapRef.current = pickOnMap; }, [pickOnMap]);
      useEffect(() => { draftRef.current = draft; }, [draft]);
      useEffect(() => { pinModeRef.current = pinMode; }, [pinMode]);

      // swap tiles/colorway when the style changes without tearing down the map
      useEffect(() => {
        const map = mapRef.current;
        if (!map || !ready) return;
        tileFellBackRef.current = false;
        setTileFellBack(false);
        setEffectiveTile(tileKey);
        try { localStorage.setItem("sozai_wc_colorway", colorway); } catch (e) {}
        map.setStyle(buildMapStyle(tileKey, colorway));
        // setStyle wipes custom markers/layers - bump an epoch so the marker
        // effect re-adds them once the new style has loaded.
        map.once("styledata", () => setStyleEpoch((e) => e + 1));
      }, [tileKey, colorway, ready]);

      // re-render markers whenever activities change
      useEffect(() => {
        const map = mapRef.current;
        if (!map || !window.maplibregl) return;
        markersRef.current.forEach((m) => m.remove());
        markersRef.current = [];
        activities.forEach((a) => {
          const el = document.createElement("div");
          el.className = "sozai-pin";
          el.innerHTML =
            '<div class="sozai-pin-bubble">' +
              '<span class="sozai-pin-emoji">' + (a.icon || "📍") + '</span>' +
              '<span class="sozai-pin-text">' + (a.text ? a.text.replace(/</g, "&lt;") : "") + '</span>' +
            '</div><div class="sozai-pin-stem"></div>';
          const marker = new window.maplibregl.Marker({ element: el, anchor: "bottom" })
            .setLngLat([a.lon, a.lat])
            .addTo(map);
          markersRef.current.push(marker);
        });
      }, [activities, ready, styleEpoch]);

      // render the Polaroid photo pins
      useEffect(() => {
        const map = mapRef.current;
        if (!map || !window.maplibregl) return;
        polaroidMarkersRef.current.forEach((m) => m.remove());
        polaroidMarkersRef.current = [];
        polaroids.forEach((p) => {
          const wrap = document.createElement("div");
          wrap.className = "sozai-polaroid-wrap";
          const el = document.createElement("div");
          el.className = "sozai-polaroid";
          el.style.setProperty("--rot", (p.rot || 0) + "deg");
          el.innerHTML =
            '<img src="' + p.src + '" alt="">' +
            (p.caption ? '<div class="cap">' + p.caption.replace(/</g, "&lt;") + '</div>' : '<div class="cap">&nbsp;</div>');
          const del = document.createElement("button");
          del.className = "pdel"; del.type = "button"; del.title = "Remove"; del.textContent = "×";
          del.addEventListener("click", (ev) => {
            ev.stopPropagation();
            destroyPolaroidEl(el, () => setPolaroids((prev) => prev.filter((x) => x.id !== p.id)));
          });
          wrap.appendChild(el); wrap.appendChild(del);
          const marker = new window.maplibregl.Marker({ element: wrap, anchor: "bottom" })
            .setLngLat([p.lon, p.lat])
            .addTo(map);
          polaroidMarkersRef.current.push(marker);
        });
      }, [polaroids, ready, styleEpoch]);

      // render the album photos that have been pinned, as a movable canvas:
      // each is draggable, rotatable and scalable, and every change persists to
      // the shared store (so it survives reloads and syncs across both maps).
      useEffect(() => {
        const map = mapRef.current;
        if (!map || !window.maplibregl) return;
        Object.values(storeMarkersRef.current).forEach((o) => o.marker.remove());
        storeMarkersRef.current = {};
        // Each pin sits exactly at the center point the user picked in the
        // location picker - no auto-scatter, so a pin renders where it's placed.
        pinnedStore.forEach((p) => {
          const rot = p.rot || 0;
          const scale = p.scale || 1;
          const wrap = document.createElement("div");
          wrap.className = "sozai-polaroid-wrap";
          const el = document.createElement("div");
          el.className = "sozai-polaroid";
          el.style.setProperty("--rot", rot + "deg");
          el.style.setProperty("--scale", scale);
          const _dmy = (s) => { const d = new Date(s); if (isNaN(d)) return s; const z = (n) => String(n).padStart(2, "0"); return z(d.getDate()) + "/" + z(d.getMonth() + 1) + "/" + d.getFullYear(); };
          const meta = p.date ? _dmy(p.date) : "";
          const objPos = (p.focusX != null ? p.focusX : 50) + "% " + (p.focusY != null ? p.focusY : 50) + "%";
          el.innerHTML =
            '<img src="' + p.src + '" alt="" style="object-position:' + objPos + '">' +
            '<div class="cap">' + ((p.caption || p.title || "&nbsp;").replace(/</g, "&lt;")) +
              (meta ? '<span class="sozai-pin-when">' + meta.replace(/</g, "&lt;") + '</span>' : '') +
            '</div>';
          // controls: remove · rotate · scale
          const del = document.createElement("button");
          del.className = "pdel"; del.type = "button"; del.title = "Send back to tray"; del.textContent = "×";
          del.addEventListener("click", (ev) => {
            ev.stopPropagation();
            destroyPolaroidEl(el, () => window.SozaiPhotos.unpin(p.id));
          });
          const rotL = document.createElement("button");
          rotL.className = "pctl prot-l"; rotL.type = "button"; rotL.title = "Rotate left"; rotL.textContent = "⟲";
          rotL.addEventListener("click", (ev) => { ev.stopPropagation(); const v = (p.rot || 0) - 6; window.SozaiPhotos.setStyleProps(p.id, { rot: v }); Collab.send("photo_props", { id: p.id, props: { rot: v } }); });
          const rotR = document.createElement("button");
          rotR.className = "pctl prot-r"; rotR.type = "button"; rotR.title = "Rotate right"; rotR.textContent = "⟳";
          rotR.addEventListener("click", (ev) => { ev.stopPropagation(); const v = (p.rot || 0) + 6; window.SozaiPhotos.setStyleProps(p.id, { rot: v }); Collab.send("photo_props", { id: p.id, props: { rot: v } }); });
          const big = document.createElement("button");
          big.className = "pctl pbig"; big.type = "button"; big.title = "Bigger"; big.textContent = "+";
          big.addEventListener("click", (ev) => { ev.stopPropagation(); const v = Math.min(2, (p.scale || 1) + 0.12); window.SozaiPhotos.setStyleProps(p.id, { scale: v }); Collab.send("photo_props", { id: p.id, props: { scale: v } }); });
          const small = document.createElement("button");
          small.className = "pctl psmall"; small.type = "button"; small.title = "Smaller"; small.textContent = "−";
          small.addEventListener("click", (ev) => { ev.stopPropagation(); const v = Math.max(0.5, (p.scale || 1) - 0.12); window.SozaiPhotos.setStyleProps(p.id, { scale: v }); Collab.send("photo_props", { id: p.id, props: { scale: v } }); });
          wrap.appendChild(el);
          wrap.appendChild(del); wrap.appendChild(rotL); wrap.appendChild(rotR); wrap.appendChild(big); wrap.appendChild(small);
          const marker = new window.maplibregl.Marker({ element: wrap, anchor: "bottom", draggable: true })
            .setLngLat([p.lon, p.lat]).addTo(map);
          // persist the new position when the user finishes dragging it
          marker.on("dragend", () => {
            const ll = marker.getLngLat();
            window.SozaiPhotos.move(p.id, ll.lng, ll.lat);
            Collab.send("photo_moved", { id: p.id, lon: ll.lng, lat: ll.lat });
          });
          // live-broadcast position during the drag (throttled) so collaborators
          // see the polaroid glide in real time instead of jumping at drop.
          let _lastDragSend = 0;
          marker.on("drag", () => {
            const now = Date.now();
            if (now - _lastDragSend < 60) return;
            _lastDragSend = now;
            const ll = marker.getLngLat();
            Collab.send("photo_moved", { id: p.id, lon: ll.lng, lat: ll.lat });
          });
          marker.on("dragstart", () => wrap.classList.add("is-dragging"));
          marker.on("dragend", () => wrap.classList.remove("is-dragging"));
          storeMarkersRef.current[p.id] = { marker, el: wrap };
        });
      }, [pinnedStore.map((p) => p.id + ":" + p.lon + "," + p.lat + ":" + p.caption + ":" + (p.rot || 0) + ":" + (p.scale || 1) + ":" + (p.focusX != null ? p.focusX : 50) + "," + (p.focusY != null ? p.focusY : 50)).join("|"), ready, styleEpoch]);

      // highlight the active stop during a flythrough
      useEffect(() => {
        Object.entries(storeMarkersRef.current).forEach(([id, o]) => {
          o.el.classList.toggle("is-active", flying && flyStops[flyIdx] && flyStops[flyIdx].id === id);
        });
      });

      // "Expand" the map in-page: the map section grows to fill the viewport
      // as an overlay (the user emerges into the map) rather than putting the
      // whole browser page into fullscreen. Escape exits. The GL canvas is
      // resized whenever the expanded state changes so tiles fill the space.
      useEffect(() => {
        function onKey(e) { if (e.key === "Escape") setIsFullscreen(false); }
        if (isFullscreen) document.addEventListener("keydown", onKey);
        return () => document.removeEventListener("keydown", onKey);
      }, [isFullscreen]);
      useEffect(() => {
        // lock body scroll while expanded so the immersive view is clean
        if (isFullscreen) {
          const prev = document.body.style.overflow;
          document.body.style.overflow = "hidden";
          return () => { document.body.style.overflow = prev; };
        }
      }, [isFullscreen]);
      useEffect(() => {
        // Resize the GL canvas several times as the expand/collapse layout
        // settles - a single early resize() leaves the map blank/collapsed.
        const doResize = () => { if (mapRef.current) { try { mapRef.current.resize(); } catch (e) {} } };
        const raf = requestAnimationFrame(doResize);
        const ts = [setTimeout(doResize, 120), setTimeout(doResize, 350)];
        // On expand, ease the camera out so the much bigger canvas shows more.
        if (isFullscreen) ts.push(setTimeout(() => {
          const m = mapRef.current; if (!m) return;
          try { m.easeTo({ zoom: Math.max(1, m.getZoom() - 1.6), duration: 900 }); } catch (e) {}
        }, 420));
        return () => { cancelAnimationFrame(raf); ts.forEach(clearTimeout); };
      }, [isFullscreen]);
      function toggleFullscreen() { setIsFullscreen((v) => !v); }

      async function searchCity() {
        const q = place.trim();
        if (!q) return;
        setSearching(true); setSearchErr(null);
        try {
          const hits = await geocode(q, { limit: 1 });
          if (!hits.length) throw new Error("No place found. Try a more specific name.");
          const { lat, lon } = hits[0];
          setCenter({ lat, lon, zoom: 13 });
          if (mapRef.current) mapRef.current.flyTo({ center: [lon, lat], zoom: 13, duration: 1500 });
        } catch (e) {
          setSearchErr(e.message || "Could not find that city.");
        } finally {
          setSearching(false);
        }
      }

      function addActivityAt(d, coords) {
        const item = { id: Date.now() + "-" + Math.random().toString(36).slice(2, 6), text: d.text.trim() || "My activity", icon: d.icon, lon: coords.lon, lat: coords.lat };
        setActivities((prev) => [...prev, item]);
        if (mapRef.current) mapRef.current.flyTo({ center: [coords.lon, coords.lat], zoom: Math.max(mapRef.current.getZoom(), 14), duration: 1000 });
        setDraft({ text: "", where: "", icon: d.icon });
        setAddErr(null);
      }

      async function addActivity() {
        if (!draft.text.trim()) { setAddErr("Describe the activity first."); return; }
        // if a place is given, geocode it; otherwise drop at the current center
        if (draft.where.trim()) {
          setAdding(true); setAddErr(null);
          try {
            const hits = await geocode(draft.where.trim() + " " + place, { limit: 1 });
            const hit = hits[0] || (await geocode(draft.where.trim(), { limit: 1 }))[0];
            if (!hit) throw new Error("Couldn't find that spot - try 'pick on map'.");
            addActivityAt(draft, { lon: hit.lon, lat: hit.lat });
          } catch (e) {
            setAddErr(e.message || "Couldn't place that activity.");
          } finally {
            setAdding(false);
          }
        } else {
          const c = mapRef.current ? mapRef.current.getCenter() : { lng: center.lon, lat: center.lat };
          addActivityAt(draft, { lon: c.lng, lat: c.lat });
        }
      }

      function removeActivity(id) {
        setActivities((prev) => prev.filter((a) => a.id !== id));
      }

      // pick a photo, then arm "pin mode" so the next map click drops it
      async function onPolaroidPick(e) {
        const file = (e.target.files || [])[0];
        if (polaroidFileRef.current) polaroidFileRef.current.value = "";
        if (!file) return;
        // cap: at most 5 polaroids on the map
        if (polaroids.length >= MAX_POLAROIDS) {
          setAddErr("You can pin up to " + MAX_POLAROIDS + " polaroids. Remove one to add another.");
          return;
        }
        setPolaroidBusy(true);
        const started = Date.now();
        const result = await processUpload(file);   // validates type, runs NSFW, shows overlay
        // keep the developing animation visible for at least a beat
        const wait = Math.max(0, 650 - (Date.now() - started));
        await new Promise((r) => setTimeout(r, wait));
        setPolaroidBusy(false);
        if (!result.ok) return;
        pendingPhotoRef.current = result.dataUrl;
        setPinMode(true);
        setAddErr(null);
      }

      // arm pin mode for an album photo from the draft tray (preserves its
      // caption/date/time via the store id)
      function pickStorePhoto(p) {
        pendingPhotoRef.current = { storeId: p.id, src: p.src, caption: p.caption };
        setPinMode(true);
        setAddErr(null);
      }

      // ---- flythrough ("Map of My Time" video) ---- //
      function stopFly() {
        flyAbortRef.current.stop = true;
        setFlying(false);
        setFlyIdx(-1);
        if (transportMarkerRef.current) { try { transportMarkerRef.current.remove(); } catch (e) {} transportMarkerRef.current = null; }
        stopRecording();
      }

      // move the transport emoji marker to a lng/lat (creating it if needed)
      function setTransportAt(lon, lat, heading) {
        const map = mapRef.current; if (!map || !window.maplibregl) return;
        if (!transportMarkerRef.current) {
          const el = document.createElement("div");
          el.className = "sozai-transport";
          el.textContent = (TRANSPORTS.find((t) => t.id === transport) || TRANSPORTS[0]).emoji;
          transportMarkerRef.current = new window.maplibregl.Marker({ element: el, anchor: "center" }).setLngLat([lon, lat]).addTo(map);
        } else {
          transportMarkerRef.current.setLngLat([lon, lat]);
        }
        if (heading != null) { const el = transportMarkerRef.current.getElement(); el.style.setProperty("--heading", heading + "deg"); }
      }

      // ---- recording the journey to a downloadable WebM (item 5) ---- //
      function startRecording() {
        try {
          const canvas = mapRef.current && mapRef.current.getCanvas && mapRef.current.getCanvas();
          if (!canvas || !canvas.captureStream || typeof MediaRecorder === "undefined") return false;
          const stream = canvas.captureStream(30);
          const mime = ["video/webm;codecs=vp9", "video/webm;codecs=vp8", "video/webm"].find((m) => MediaRecorder.isTypeSupported && MediaRecorder.isTypeSupported(m)) || "video/webm";
          const rec = new MediaRecorder(stream, { mimeType: mime });
          recChunksRef.current = [];
          rec.ondataavailable = (e) => { if (e.data && e.data.size) recChunksRef.current.push(e.data); };
          rec.onstop = () => {
            const blob = new Blob(recChunksRef.current, { type: "video/webm" });
            setClipUrl((prev) => { if (prev) URL.revokeObjectURL(prev); return URL.createObjectURL(blob); });
          };
          rec.start();
          recorderRef.current = rec;
          return true;
        } catch (e) { console.warn("[record] failed", e); return false; }
      }
      function stopRecording() {
        const rec = recorderRef.current;
        if (rec && rec.state !== "inactive") { try { rec.stop(); } catch (e) {} }
        recorderRef.current = null;
        setRecording(false);
      }

      async function playFly(opts) {
        opts = opts || {};
        const map = mapRef.current;
        if (!map || flyStops.length === 0) return;
        flyAbortRef.current = { stop: false };
        const token = flyAbortRef.current;
        setFlying(true);
        if (opts.record) { const ok = startRecording(); setRecording(ok); }

        // draw the route as a line under the journey
        const routeCoords = flyStops.map((s) => [s.lon, s.lat]);
        try {
          if (map.getLayer("sozai-route")) map.removeLayer("sozai-route");
          if (map.getSource("sozai-route")) map.removeSource("sozai-route");
          if (routeCoords.length > 1) {
            map.addSource("sozai-route", { type: "geojson", data: { type: "Feature", geometry: { type: "LineString", coordinates: routeCoords } } });
            map.addLayer({ id: "sozai-route", type: "line", source: "sozai-route",
              paint: { "line-color": "#B6485C", "line-width": 3, "line-opacity": 0.6, "line-dasharray": [1, 1.4] } });
          }
        } catch (e) {}

        const spd = (TRANSPORTS.find((t) => t.id === transport) || TRANSPORTS[0]).speed;
        // gentle ease-in-out so every camera move accelerates and settles
        // smoothly instead of starting/stopping abruptly (smoother travel).
        const ease = (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
        // start at the first stop
        setFlyIdx(0);
        setTransportAt(flyStops[0].lon, flyStops[0].lat);
        map.flyTo({ center: [flyStops[0].lon, flyStops[0].lat], zoom: 15, pitch: 50, duration: 1600, curve: 1.42, easing: ease, essential: true });
        await new Promise((r) => setTimeout(r, 1500));
        if (!token.stop) await new Promise((r) => setTimeout(r, 1200)); // dwell on first photo

        // travel each leg: interpolate the transport marker, camera follows
        for (let i = 1; i < flyStops.length; i++) {
          if (token.stop) break;
          const a = flyStops[i - 1], b = flyStops[i];
          const heading = (Math.atan2(b.lon - a.lon, b.lat - a.lat) * 180 / Math.PI);
          const legMs = Math.max(1400, 2600 / spd);
          const t0 = performance.now();
          await new Promise((resolve) => {
            function step(now) {
              if (token.stop) { resolve(); return; }
              const k = Math.min(1, (now - t0) / legMs);
              const ease = k < 0.5 ? 2 * k * k : 1 - Math.pow(-2 * k + 2, 2) / 2;
              const lon = a.lon + (b.lon - a.lon) * ease;
              const lat = a.lat + (b.lat - a.lat) * ease;
              setTransportAt(lon, lat, heading);
              map.setCenter([lon, lat]);
              if (k < 1) requestAnimationFrame(step); else resolve();
            }
            requestAnimationFrame(step);
          });
          if (token.stop) break;
          setFlyIdx(i);
          map.flyTo({ center: [b.lon, b.lat], zoom: 15.5, pitch: 55, duration: 1300, curve: 1.42, easing: ease, essential: true });
          await new Promise((r) => setTimeout(r, 1400)); // dwell to show the photo
        }

        if (!token.stop && flyStops.length > 1) {
          const lons = flyStops.map((s) => s.lon), lats = flyStops.map((s) => s.lat);
          try { map.fitBounds([[Math.min(...lons), Math.min(...lats)], [Math.max(...lons), Math.max(...lats)]], { padding: 90, pitch: 0, bearing: 0, duration: 2200, easing: ease }); } catch (e) {}
          await new Promise((r) => setTimeout(r, 2100));
        }
        // tidy up
        if (transportMarkerRef.current) { try { transportMarkerRef.current.remove(); } catch (e) {} transportMarkerRef.current = null; }
        try { if (map.getLayer("sozai-route")) map.removeLayer("sozai-route"); if (map.getSource("sozai-route")) map.removeSource("sozai-route"); } catch (e) {}
        stopRecording();
        setFlying(false);
        setFlyIdx(-1);
      }
      useEffect(() => () => { flyAbortRef.current.stop = true; stopRecording(); }, []);

      if (libMissing) {
        return (
          <div className="rounded-lg border-2 border-primary/40 bg-accent/30 p-6 text-center">
            <MapIcon className="mx-auto size-8 text-primary" />
            <p className="mt-2 font-mono text-sm font-semibold uppercase tracking-wide text-foreground">Map engine offline</p>
            <p className="mt-1 text-sm text-muted-foreground">The map renderer (MapLibre GL) couldn't load. The server tries to cache it locally at <span className="font-mono">/vendor/maplibre-gl.js</span>; if that's empty the server had no internet to fetch it. No API key is required.</p>
            <button type="button" onClick={() => { setLibMissing(false); setReady(false); setTimeout(() => window.location.reload(), 50); }}
              className="mt-3 inline-flex items-center gap-1.5 rounded-md border-2 border-primary bg-primary px-3 py-1.5 font-mono text-xs font-semibold uppercase tracking-wide text-primary-foreground transition-colors hover:bg-primary/90">
              <Navigation className="size-3.5" /> Retry
            </button>
          </div>
        );
      }

      return (
        <div ref={fsWrapRef}
          className={cn("flex flex-col gap-4", isFullscreen && "fixed inset-0 z-[80] overflow-auto bg-background p-4 sm:p-6")}>
          {/* city search */}
          <div className="flex flex-col gap-2 sm:flex-row sm:items-end">
            <div className="flex-1">
              <label htmlFor="wc-city" className="font-mono text-xs font-semibold uppercase tracking-wide text-foreground">City</label>
              <div className="mt-1 flex items-center gap-2 rounded-md border-2 border-primary/60 bg-card px-3 py-2">
                <Search className="size-4 text-primary" />
                <input id="wc-city" value={place} onChange={(e) => setPlace(e.target.value)}
                  onKeyDown={(e) => e.key === "Enter" && searchCity()}
                  placeholder="Search any city, e.g. Kyoto, Lisbon, Nairobi…"
                  className="min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground" />
              </div>
            </div>
            <button type="button" onClick={searchCity} disabled={searching}
              className="flex items-center justify-center gap-2 rounded-md border-2 border-primary bg-primary px-4 py-2.5 font-mono text-xs font-semibold uppercase tracking-wide text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-60">
              {searching ? <Loader2 className="size-4 animate-spin" /> : <Navigation className="size-4" />} Go
            </button>
          </div>

          {/* watercolor colorway switcher - change the palette right on the map */}
          <div className="flex flex-wrap items-center gap-2">
            <span className="flex items-center gap-1.5 font-mono text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
              <Palette className="size-3.5 text-primary" /> Colorway
            </span>
            <div className="flex flex-wrap items-center gap-1.5">
              {WC_COLORWAYS.map((c) => {
                const sel = c.id === colorway;
                return (
                  <button key={c.id} type="button" onClick={() => setColorway(c.id)}
                    aria-pressed={sel} title={c.label}
                    className={cn(
                      "flex items-center gap-1.5 rounded-full border-2 px-2.5 py-1 font-mono text-[11px] uppercase tracking-wide transition-colors",
                      sel ? "border-primary bg-accent text-foreground" : "border-primary/40 text-muted-foreground hover:bg-accent/50"
                    )}>
                    <span className="size-3 rounded-full ring-1 ring-black/10" style={{ background: c.swatch }} aria-hidden="true" />
                    {c.label}
                  </button>
                );
              })}
            </div>
          </div>

          {/* journey: choose transport, play, and optionally record a clip */}
          {flyStops.length > 0 ? (
            <div className="flex flex-wrap items-center gap-2">
              <span className="flex items-center gap-1.5 font-mono text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
                <FastForward className="size-3.5 text-primary" /> Journey
              </span>
              <div className="flex flex-wrap items-center gap-1.5">
                {TRANSPORTS.map((t) => (
                  <button key={t.id} type="button" onClick={() => setTransport(t.id)} aria-pressed={transport === t.id} title={t.label}
                    disabled={flying}
                    className={cn("flex items-center gap-1 rounded-full border-2 px-2 py-1 font-mono text-[11px] uppercase tracking-wide transition-colors disabled:opacity-50",
                      transport === t.id ? "border-primary bg-accent text-foreground" : "border-primary/40 text-muted-foreground hover:bg-accent/50")}>
                    <span aria-hidden="true">{t.emoji}</span>{t.label}
                  </button>
                ))}
              </div>
              <button type="button" onClick={() => (flying ? stopFly() : playFly({ record: false }))}
                className="flex items-center gap-1.5 rounded-md border-2 border-primary bg-primary px-3 py-1.5 font-mono text-[11px] font-semibold uppercase tracking-wide text-primary-foreground transition-colors hover:bg-primary/90">
                {flying ? <X className="size-3.5" /> : <FastForward className="size-3.5" />} {flying ? "Stop" : "Play"}
              </button>
              <button type="button" onClick={() => (flying ? stopFly() : playFly({ record: true }))} disabled={flying}
                title="Play the journey and save it as a video clip"
                className="flex items-center gap-1.5 rounded-md border-2 border-primary/60 px-3 py-1.5 font-mono text-[11px] uppercase tracking-wide text-primary transition-colors hover:bg-accent disabled:opacity-50">
                <span className={cn("size-2.5 rounded-full", recording ? "animate-pulse bg-[oklch(0.55_0.2_25)]" : "bg-primary")} /> {recording ? "Recording…" : "Record clip"}
              </button>
              {clipUrl ? (
                <a href={clipUrl} download="sozai-journey.webm"
                  className="flex items-center gap-1.5 rounded-md border-2 border-primary/60 px-3 py-1.5 font-mono text-[11px] uppercase tracking-wide text-primary transition-colors hover:bg-accent">
                  <Download className="size-3.5" /> Download clip
                </a>
              ) : null}
            </div>
          ) : null}

          {searchErr ? <p role="status" className="font-mono text-[11px] uppercase tracking-wide text-[oklch(0.55_0.18_25)]">{searchErr}</p> : null}
          {tileFellBack ? (
            <p className="flex items-start gap-1.5 font-mono text-[10px] leading-snug tracking-wide text-muted-foreground">
              <Droplet className="mt-0.5 size-3 shrink-0 text-primary" />
              The map tiles had trouble loading, so we reset to the classic watercolor style - it's fully key-free, so the map keeps working.
            </p>
          ) : null}

          {/* the map itself, with the authentic watercolor paper + vignette */}
          <div className={cn("sozai-map-dropzone relative w-full overflow-hidden rounded-lg border-2 border-primary/40", isFullscreen && "flex-1 min-h-0", dropArmed && "drop-armed")}
            onDragOver={(e) => { if (e.dataTransfer.types.includes("application/sozai-photo")) { e.preventDefault(); setDropArmed(true); } }}
            onDragLeave={(e) => { if (e.currentTarget === e.target) setDropArmed(false); }}
            onDrop={(e) => {
              const id = e.dataTransfer.getData("application/sozai-photo");
              setDropArmed(false);
              if (!id || !mapRef.current) return;
              e.preventDefault();
              const rect = e.currentTarget.getBoundingClientRect();
              const pt = [e.clientX - rect.left, e.clientY - rect.top];
              const ll = mapRef.current.unproject(pt);
              window.SozaiPhotos.pin(id, ll.lng, ll.lat);
              Collab.send("photo_pinned", { id, lon: ll.lng, lat: ll.lat });
            }}>
            <div ref={containerRef} className={cn("w-full", isFullscreen ? "h-full min-h-[60vh]" : "h-[52vh] min-h-[340px] sm:h-[62vh] sm:min-h-[480px]")} />
            {/* real ArcGIS watercolor paper grain, multiplied over the map */}
            {isWatercolor ? (
              <div className="pointer-events-none absolute inset-0" aria-hidden="true"
                style={{ backgroundImage: "url(" + PAPER_TEXTURE + ")", backgroundSize: "400px 400px",
                  mixBlendMode: "multiply", opacity: 0.5 }} />
            ) : null}
            <div className="pointer-events-none absolute inset-0 rounded-lg" style={{ boxShadow: "inset 0 0 70px 50px var(--card)" }} aria-hidden="true" />
            {/* fullscreen toggle */}
            <button type="button" onClick={toggleFullscreen}
              aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"} title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
              className="absolute left-2 top-2 z-10 flex size-9 items-center justify-center rounded-md border-2 border-primary/70 bg-card/90 text-primary shadow-sm transition-colors hover:bg-accent">
              {isFullscreen ? <Minimize2 className="size-4" /> : <Maximize2 className="size-4" />}
            </button>
            {!ready ? (
              <div className="absolute inset-0 flex items-center justify-center bg-card/60">
                <span className="flex items-center gap-2 font-mono text-xs uppercase tracking-wide text-primary"><Loader2 className="size-4 animate-spin" /> Painting the map…</span>
              </div>
            ) : null}

            {/* flythrough control (only when there are pinned album photos) */}
            {flyStops.length > 0 ? (
              <button type="button" onClick={() => (flying ? stopFly() : playFly())}
                title={flying ? "Stop the flythrough" : "Play Your Journey"}
                className="absolute right-2 top-2 z-10 flex items-center gap-1.5 rounded-md border-2 border-primary bg-card/90 px-2.5 py-2 font-mono text-[10px] font-semibold uppercase tracking-wide text-primary shadow-sm transition-colors hover:bg-accent">
                {flying ? <X className="size-4" /> : <FastForward className="size-4" />}
                {flying ? "Stop" : "Play journey"}
              </button>
            ) : null}

            {/* current-photo overlay while the flythrough plays */}
            {flying && flyStops[flyIdx] ? (
              <div className="pointer-events-none absolute bottom-3 left-1/2 z-10 w-[min(78%,360px)] -translate-x-1/2">
                <div className="overflow-hidden rounded-md border-2 border-primary bg-card/95 shadow-lg">
                  <img src={flyStops[flyIdx].src} alt="" className="h-36 w-full object-cover" />
                  <div className="px-3 py-2">
                    <p className="font-mono text-[10px] uppercase tracking-wide text-primary">
                      {(flyIdx + 1) + " / " + flyStops.length}
                      {[flyStops[flyIdx].date, flyStops[flyIdx].time].filter(Boolean).length ? " · " + [flyStops[flyIdx].date, flyStops[flyIdx].time].filter(Boolean).join(" · ") : ""}
                    </p>
                    <p className="mt-0.5 text-sm leading-snug text-foreground">{flyStops[flyIdx].caption || flyStops[flyIdx].title || ""}</p>
                  </div>
                </div>
              </div>
            ) : null}
          </div>

          {/* add an activity */}
          <div className="rounded-lg border-2 border-primary/40 bg-card p-4">
            <span className="flex items-center gap-2 font-mono text-xs font-semibold uppercase tracking-wide text-foreground"><Pencil className="size-4 text-primary" /> Add an activity</span>
            <div className="mt-3 grid grid-cols-[auto_1fr] gap-2 sm:grid-cols-[auto_1fr_1fr_auto]">
              <select aria-label="Activity icon" value={draft.icon} onChange={(e) => setDraft((d) => ({ ...d, icon: e.target.value }))}
                className="rounded-md border-2 border-primary/60 bg-card px-2 py-2 text-lg outline-none">
                {ACTIVITY_ICONS.map((ic) => <option key={ic} value={ic}>{ic}</option>)}
              </select>
              <input value={draft.text} onChange={(e) => setDraft((d) => ({ ...d, text: e.target.value }))}
                placeholder="What did you do?"
                className="rounded-md border-2 border-primary/60 bg-card px-3 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground" />
              <input value={draft.where} onChange={(e) => setDraft((d) => ({ ...d, where: e.target.value }))}
                onKeyDown={(e) => e.key === "Enter" && addActivity()}
                placeholder="Where? (optional)"
                className="col-span-2 rounded-md border-2 border-primary/60 bg-card px-3 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground sm:col-span-1" />
              <button type="button" onClick={addActivity} disabled={adding}
                className="col-span-2 flex items-center justify-center gap-1.5 rounded-md border-2 border-primary bg-primary px-3 py-2 font-mono text-xs font-semibold uppercase tracking-wide text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-60 sm:col-span-1">
                {adding ? <Loader2 className="size-4 animate-spin" /> : <Plus className="size-4" />} Add
              </button>
            </div>
            <div className="mt-2 flex flex-wrap items-center gap-2">
              <button type="button" onClick={() => { if (!draft.text.trim()) { setAddErr("Describe the activity first."); return; } setAddErr(null); setPickOnMap((v) => !v); }}
                className={cn("flex items-center gap-1.5 rounded-md border-2 px-2.5 py-1 font-mono text-[10px] uppercase tracking-wide transition-colors",
                  pickOnMap ? "border-primary bg-accent text-primary" : "border-primary/50 text-primary hover:bg-accent")}>
                <MapPin className="size-3.5" /> {pickOnMap ? "Click the map to drop it…" : "Pick on map"}
              </button>
              <span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">or type a place and hit Add</span>
            </div>
            {addErr ? <p role="status" className="mt-2 font-mono text-[11px] uppercase tracking-wide text-[oklch(0.55_0.18_25)]">{addErr}</p> : null}
          </div>

          {/* draft tray: album photos waiting to be placed on the map (shared) */}
          <PhotoTray onPick={pickStorePhoto} armedId={pinMode && pendingPhotoRef.current ? pendingPhotoRef.current.storeId : null} />

          {pinMode && pendingPhotoRef.current && pendingPhotoRef.current.storeId ? (
            <p className="-mt-1 flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-wide text-primary">
              <MapPin className="size-3.5" /> Click the map to pin this photo
              <button type="button" onClick={() => { pendingPhotoRef.current = null; setPinMode(false); }} className="ml-1 underline">cancel</button>
            </p>
          ) : null}

          {/* pin a Polaroid photo */}
          <div className="rounded-lg border-2 border-primary/40 bg-card p-4">
            <span className="flex items-center gap-2 font-mono text-xs font-semibold uppercase tracking-wide text-foreground"><Pin className="size-4 text-primary" /> Pin a Polaroid</span>
            <p className="mt-1 text-xs leading-snug text-muted-foreground">Upload a photo from a memory, then click the map to pin it where it happened.</p>
            <div className="mt-3 flex flex-wrap items-center gap-2">
              <input ref={polaroidFileRef} type="file" accept={ACCEPT_ATTR} onChange={onPolaroidPick} className="hidden" id="wc-polaroid" />
              <div className="relative">
                <button type="button" onClick={() => polaroidFileRef.current && polaroidFileRef.current.click()} disabled={polaroidBusy}
                  className="flex items-center gap-1.5 rounded-md border-2 border-primary bg-primary px-3 py-2 font-mono text-xs font-semibold uppercase tracking-wide text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-90">
                  <ImagePlus className="size-4" /> Choose photo
                </button>
                {polaroidBusy ? (
                  <span className="absolute inset-0 flex items-center justify-center gap-2 overflow-hidden rounded-md"
                    role="status" aria-live="polite"
                    style={{ background: "linear-gradient(180deg, var(--primary), color-mix(in oklch, var(--primary) 80%, #000))" }}>
                    <span aria-hidden="true" className="absolute inset-0"
                      style={{ background: "linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.35) 50%, transparent 80%)", backgroundSize: "200% 100%", animation: "sozai-shimmer 1.1s linear infinite" }} />
                    <span className="relative flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-widest text-primary-foreground">
                      <Loader2 className="size-3.5 animate-spin" /> Developing…
                    </span>
                  </span>
                ) : null}
              </div>
              {pinMode ? (
                <span className="flex items-center gap-1.5 rounded-md border-2 border-primary bg-accent px-2.5 py-1.5 font-mono text-[10px] uppercase tracking-wide text-primary">
                  <MapPin className="size-3.5" /> Click the map to drop your Polaroid
                  <button type="button" onClick={() => { pendingPhotoRef.current = null; setPinMode(false); }} className="ml-1 underline">cancel</button>
                </span>
              ) : (
                <span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">{polaroids.length}/{MAX_POLAROIDS} pinned</span>
              )}
            </div>
          </div>

          {/* the story list (echoes Cambridge's narrative panel) */}
          {activities.length ? (
            <ul className="flex flex-col gap-2">
              {activities.map((a) => (
                <li key={a.id} className="flex items-center gap-3 rounded-md border-2 border-primary/30 bg-card px-3 py-2">
                  <span className="text-xl" aria-hidden="true">{a.icon}</span>
                  <span className="min-w-0 flex-1">
                    <span className="block truncate text-sm text-foreground">{a.text}</span>
                    <span className="block font-mono text-[10px] uppercase tracking-wide text-muted-foreground">{a.lat.toFixed(4)}, {a.lon.toFixed(4)}</span>
                  </span>
                  <button type="button" onClick={() => removeActivity(a.id)} aria-label="Remove activity" className="text-primary transition-transform hover:scale-110"><Trash2 className="size-4" /></button>
                </li>
              ))}
            </ul>
          ) : (
            <p className="text-center text-sm text-muted-foreground">No activities yet - search a city, then add your first one above.</p>
          )}
        </div>
      );
    }

    // ----------------------------------------------------------------- //
    // CesiumMap - a photorealistic 3D globe (CesiumJS + OSM Buildings) as an
    // alternative to the watercolor map. Offers two 3D Tiles styles:
    //   • "material" - buildings colored by their material (from the user's
    //     provided 3D Tiles styling sample).
    //   • "watercolor" - the buildings washed in the ArcGIS watercolor palette
    //     extracted from Watercolor.stylx, keyed by height for a painterly feel.
    // Pinned album photos appear as billboards and the same timestamp-ordered
    // flythrough plays here too. Requires a Cesium ion token (server-provided).
    // ----------------------------------------------------------------- //

    // Compose a photo into a small Polaroid-style card on a <canvas> so it can
    // be used directly as a Cesium billboard image: white frame, a heavier
    // bottom margin (the classic Polaroid look), and a soft drop shadow. No
    // caption text - just the framed photo. Returns a Promise<HTMLCanvasElement>.
    function makePolaroidCanvas(src, opts) {
      opts = opts || {};
      const photo = opts.photo || 168;     // inner photo square (device px)
      const pad = opts.pad || 14;          // white border on top/left/right
      const bottom = opts.bottom || 40;    // heavier bottom border
      const margin = opts.margin || 12;    // breathing room for the shadow
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.crossOrigin = "anonymous";
        img.onload = () => {
          try {
            const w = photo + pad * 2, h = photo + pad + bottom;
            const cw = w + margin * 2, ch = h + margin * 2;
            const cv = document.createElement("canvas");
            cv.width = cw; cv.height = ch;
            const ctx = cv.getContext("2d");
            // soft shadow under the card
            ctx.save();
            ctx.shadowColor = "rgba(0,0,0,0.38)";
            ctx.shadowBlur = 9; ctx.shadowOffsetY = 5;
            ctx.fillStyle = "#fdfdf7";            // warm white card
            const rx = margin, ry = margin, rr = 4;
            ctx.beginPath();
            ctx.moveTo(rx + rr, ry);
            ctx.arcTo(rx + w, ry, rx + w, ry + h, rr);
            ctx.arcTo(rx + w, ry + h, rx, ry + h, rr);
            ctx.arcTo(rx, ry + h, rx, ry, rr);
            ctx.arcTo(rx, ry, rx + w, ry, rr);
            ctx.closePath(); ctx.fill();
            ctx.restore();
            // photo, object-fit: cover into the photo square
            const dx = margin + pad, dy = margin + pad;
            const ir = img.width / img.height, dr = 1; // square target
            let sw, sh, sx, sy;
            if (ir > dr) { sh = img.height; sw = sh * dr; sx = (img.width - sw) / 2; sy = 0; }
            else { sw = img.width; sh = sw / dr; sx = 0; sy = (img.height - sh) / 2; }
            ctx.drawImage(img, sx, sy, sw, sh, dx, dy, photo, photo);
            // thin inner edge around the photo
            ctx.strokeStyle = "rgba(0,0,0,0.10)"; ctx.lineWidth = 1;
            ctx.strokeRect(dx + 0.5, dy + 0.5, photo - 1, photo - 1);
            resolve(cv);
          } catch (e) { reject(e); }
        };
        img.onerror = reject;
        img.src = src;
      });
    }

    function buildCesiumStyle(Cesium, kind, colorway) {
      if (kind === "realistic") {
        // Solid, light buildings (no transparency) so sun lighting can model
        // them - tinted subtly by material/height for variety, like the Cesium
        // OSM Buildings "metadata styling" reference.
        return new Cesium.Cesium3DTileStyle({
          defines: { h: "${feature['cesium#estimatedHeight']}", mat: "${feature['building:material']}" },
          color: {
            conditions: [
              ["${mat} === 'glass'", "color('#c4d6e0')"],
              ["${mat} === 'brick'", "color('#c8a085')"],
              ["${mat} === 'concrete'", "color('#d3d3cc')"],
              ["${mat} === 'metal'", "color('#ced3d8')"],
              ["${mat} === 'stone'", "color('#d9d4c8')"],
              ["${h} >= 120", "color('#edece7')"],
              ["${h} >= 50", "color('#e7e5de')"],
              ["true", "color('#f0ede7')"],
            ],
          },
        });
      }
      if (kind === "material") {
        // From the user's sample: color OSM buildings by building:material.
        return new Cesium.Cesium3DTileStyle({
          defines: { material: "${feature['building:material']}" },
          color: {
            conditions: [
              ["${material} === null", "color('white')"],
              ["${material} === 'glass'", "color('skyblue', 0.5)"],
              ["${material} === 'concrete'", "color('grey')"],
              ["${material} === 'brick'", "color('indianred')"],
              ["${material} === 'stone'", "color('lightslategrey')"],
              ["${material} === 'metal'", "color('lightgrey')"],
              ["${material} === 'steel'", "color('lightsteelblue')"],
              ["true", "color('white')"],
            ],
          },
        });
      }
      // Watercolor wash, by height, using the real stylx palette per colorway.
      // Raw Umber / Sienna / Dust family from Watercolor.stylx.
      const WASH = {
        classic: ["rgb(168,112,0)", "rgb(205,170,102)", "rgb(215,194,158)", "rgb(158,170,215)"],
        sepia:   ["rgb(150,110,40)", "rgb(196,162,106)", "rgb(224,200,160)", "rgb(180,182,205)"],
        sunrise: ["rgb(214,120,70)", "rgb(245,160,110)", "rgb(250,205,150)", "rgb(245,150,120)"],
        dusk:    ["rgb(120,90,40)", "rgb(150,120,70)", "rgb(120,110,80)", "rgb(90,110,200)"],
      };
      const c = WASH[colorway] || WASH.classic;
      return new Cesium.Cesium3DTileStyle({
        defines: { h: "${feature['cesium#estimatedHeight']}" },
        color: {
          conditions: [
            // softer, more translucent washes so towers read as painted forms
            // that blend with the map rather than solid colour blocks
            ["${h} >= 140", "color('" + c[0] + "', 0.72)"],
            ["${h} >= 80",  "color('" + c[1] + "', 0.66)"],
            ["${h} >= 45",  "color('" + c[2] + "', 0.6)"],
            ["${h} >= 20",  "color('" + c[2] + "', 0.54)"],
            ["true", "color('" + c[3] + "', 0.48)"],
          ],
        },
      });
    }

    function CesiumMap({ cityName }) {
      const containerRef = useRef(null);
      const viewerRef = useRef(null);
      const tilesetRef = useRef(null);
      const postProcessRef = useRef(null);   // watercolour posterize stage (off in Realistic)
      const cfgRef = useRef(null);            // client config (stadia key for imagery swap)
      const prevStyleRef = useRef("watercolor");
      const [status, setStatus] = useState("loading"); // loading | ready | no-token | error
      const [errMsg, setErrMsg] = useState("");
      const [style, setStyle] = useState("watercolor"); // watercolor | material
      const [colorway, setColorway] = useState(() => {
        try { return localStorage.getItem("sozai_wc_colorway") || "classic"; } catch (e) { return "classic"; }
      });
      const [place, setPlace] = useState(cityName || tripMeta.location || "Ottawa");
      const [searching, setSearching] = useState(false);
      const storePhotos = useSozaiPhotos();
      const pinnedStore = storePhotos.filter((p) => p.pinned && p.lon != null && p.lat != null);
      const [flying, setFlying] = useState(false);
      const [flyIdx, setFlyIdx] = useState(-1);
      const flyAbortRef = useRef({ stop: false });
      const entitiesRef = useRef([]);
      const vehicleRef = useRef(null);     // the moving transport entity
      const clockTickRef = useRef(null);   // remover for the clock onTick listener
      const [transport, setTransport] = useState("car");
      // Each transport maps to a real glTF model. Cesium auto-orients the model
      // along its velocity, so it truly faces its heading as it travels. A local
      // override at /assets/models/<id>.glb is used first if present; otherwise a
      // CORS-friendly Khronos sample model (served via jsDelivr) is used.
      const GLTF_BASE = "https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Assets@main/Models";
      const CS_TRANSPORTS = [
        { id: "car",   label: "Car",     emoji: "🚗", speed: 1,    scale: 4.5,
          models: ["/assets/models/car.glb",   GLTF_BASE + "/CesiumMilkTruck/glTF-Binary/CesiumMilkTruck.glb"] },
        { id: "bike",  label: "Bicycle", emoji: "🚲", speed: 0.75, scale: 3.0,
          models: ["/assets/models/bike.glb",  GLTF_BASE + "/CesiumMilkTruck/glTF-Binary/CesiumMilkTruck.glb"] },
        { id: "walk",  label: "Walk",    emoji: "🚶", speed: 0.5,  scale: 2.4,
          models: ["/assets/models/walk.glb",  GLTF_BASE + "/CesiumMan/glTF-Binary/CesiumMan.glb"] },
        { id: "plane", label: "Plane",   emoji: "✈️", speed: 1.6,  scale: 1.0,
          models: ["/assets/models/plane.glb", GLTF_BASE + "/CesiumAir/glTF-Binary/CesiumAir.glb"] },
        { id: "train", label: "Train",   emoji: "🚆", speed: 1.3,  scale: 5.0,
          models: ["/assets/models/train.glb", GLTF_BASE + "/CesiumMilkTruck/glTF-Binary/CesiumMilkTruck.glb"] },
      ];
      const [expanded, setExpanded] = useState(false);   // in-page immersive view
      const [dropArmed, setDropArmed] = useState(false);  // drag-from-tray hint
      const [armedId, setArmedId] = useState(null);       // tap-to-pin armed photo

      // tap-to-pin: arm a photo, then the next globe click pins it
      function pickCesiumPhoto(p) { setArmedId(p.id); }

      // expand: lock body scroll + resize the canvas
      useEffect(() => {
        function onKey(e) { if (e.key === "Escape") setExpanded(false); }
        if (expanded) {
          document.addEventListener("keydown", onKey);
          const prev = document.body.style.overflow;
          document.body.style.overflow = "hidden";
          return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
        }
      }, [expanded]);
      useEffect(() => {
        const doResize = () => { try { if (viewerRef.current) viewerRef.current.resize(); } catch (e) {} };
        const ts = [setTimeout(doResize, 90), setTimeout(doResize, 320)];
        // On expand, fly the camera out so the much bigger globe shows more,
        // preserving the current heading/pitch.
        if (expanded) ts.push(setTimeout(() => {
          const viewer = viewerRef.current, Cesium = window.Cesium;
          if (!viewer || !Cesium) return;
          try {
            const cam = viewer.camera;
            const carto = Cesium.Cartographic.clone(cam.positionCartographic);
            cam.flyTo({
              destination: Cesium.Cartesian3.fromRadians(carto.longitude, carto.latitude, Math.min(carto.height * 2.5, 9000000)),
              orientation: { heading: cam.heading, pitch: cam.pitch, roll: cam.roll },
              duration: 1.4,
            });
          } catch (e) {}
        }, 440));
        return () => ts.forEach(clearTimeout);
      }, [expanded]);

      // init the viewer once
      useEffect(() => {
        let cancelled = false;
        (async () => {
          try {
            const cfg = await getClientConfig();
            cfgRef.current = cfg;
            if (!cfg || !cfg.cesiumIonToken) { if (!cancelled) setStatus("no-token"); return; }
            const Cesium = await loadCesium();
            if (cancelled) return;
            Cesium.Ion.defaultAccessToken = cfg.cesiumIonToken;
            const viewer = new Cesium.Viewer(containerRef.current, {
              terrain: Cesium.Terrain.fromWorldTerrain(),
              baseLayerPicker: false, geocoder: false, homeButton: false,
              sceneModePicker: false, navigationHelpButton: false, animation: false,
              timeline: false, fullscreenButton: false, infoBox: false, selectionIndicator: false,
              // Render on demand instead of every single frame: the globe only
              // redraws when something actually changes (camera move, tile load,
              // a pin edit). This removes the constant-repaint jank when the view
              // is idle. The journey flythrough flips this off while it runs (see
              // playFly), since it animates the clock every frame.
              requestRenderMode: true, maximumRenderTimeChange: Infinity,
            });
            viewerRef.current = viewer;
            try { viewer.clock.shouldAnimate = false; } catch (e) {}
            // Smoother edges (anti-aliasing) on buildings + polaroids, and gentle
            // camera inertia so panning/zooming glides to a stop instead of
            // snapping. Wrapped in try/catch as these vary across Cesium builds.
            try { viewer.scene.msaaSamples = 4; } catch (e) {}
            try {
              const ctl = viewer.scene.screenSpaceCameraController;
              ctl.inertiaSpin = 0.85; ctl.inertiaTranslate = 0.85; ctl.inertiaZoom = 0.85;
            } catch (e) {}
            viewer.scene.camera.setView({
              destination: Cesium.Cartesian3.fromDegrees(-123.1207, 49.2827, 1200),
              orientation: { heading: Cesium.Math.toRadians(10), pitch: Cesium.Math.toRadians(-25) },
            });
            // Immersive watercolour basemap: Stamen Watercolor tiles (via Stadia
            // Maps). Needs a free Stadia API key (SOZAI_STADIA_KEY) - without it
            // the tiles 401 on dynamic domains, so we keep the default imagery.
            try {
              if (cfg.stadiaMapsKey) {
                viewer.imageryLayers.removeAll();
                viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
                  url: "https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg?api_key=" + cfg.stadiaMapsKey,
                  maximumLevel: 16, // watercolour tiles thin out past z16
                  credit: "Map tiles by Stamen Design, hosted by Stadia Maps; data © OpenStreetMap",
                }));
              }
            } catch (e) { console.warn("[cesium] watercolor imagery failed", e); }
            // Painterly post-process: posterize into flat washes + darken edges.
            try {
              postProcessRef.current = viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
                fragmentShader: `
                  uniform sampler2D colorTexture;
                  in vec2 v_textureCoordinates;
                  void main() {
                    vec2 uv = v_textureCoordinates;
                    vec3 c = texture(colorTexture, uv).rgb;
                    c = floor(c * 8.0 + 0.5) / 8.0;            // softer washes (was 6 - less flat)
                    float luma = dot(c, vec3(0.299, 0.587, 0.114));
                    c = mix(vec3(luma), c, 0.72);             // ease off the vibrance (~28% desaturate)
                    float o = 1.0 / 1024.0;
                    vec3 dx = texture(colorTexture, uv+vec2(o,0.)).rgb - texture(colorTexture, uv-vec2(o,0.)).rgb;
                    vec3 dy = texture(colorTexture, uv+vec2(0.,o)).rgb - texture(colorTexture, uv-vec2(0.,o)).rgb;
                    float edge = clamp(length(dx)+length(dy), 0.0, 1.0);
                    out_FragColor = vec4(c * (1.0 - 0.3*edge), 1.0);
                  }`,
              }));
            } catch (e) { console.warn("[cesium] watercolor post-process failed", e); }
            try {
              const tileset = await Cesium.createOsmBuildingsAsync();
              if (cancelled) { viewer.destroy(); return; }
              viewer.scene.primitives.add(tileset);
              tilesetRef.current = tileset;
              tileset.style = buildCesiumStyle(Cesium, "watercolor", colorway);
            } catch (e) { console.warn("[cesium] OSM buildings failed", e); }
            // In requestRenderMode the scene paints on demand, so force one
            // render now that imagery + buildings + post-process are all set up.
            try { viewer.scene.requestRender(); } catch (e) {}
            if (!cancelled) setStatus("ready");
          } catch (e) {
            if (!cancelled) { setStatus("error"); setErrMsg(e.message || "Cesium failed to load."); }
          }
        })();
        return () => {
          cancelled = true;
          flyAbortRef.current.stop = true;
          if (viewerRef.current) { try { viewerRef.current.destroy(); } catch (e) {} viewerRef.current = null; }
        };
      }, []); // eslint-disable-line

      // apply style changes
      useEffect(() => {
        const viewer = viewerRef.current, Cesium = window.Cesium, ts = tilesetRef.current;
        if (!viewer || !Cesium) return;
        // building colours
        try { if (ts) ts.style = buildCesiumStyle(Cesium, style, colorway); } catch (e) {}
        try { localStorage.setItem("sozai_wc_colorway", colorway); } catch (e) {}

        const isReal = style === "realistic";
        // Realistic = drop the painterly posterize shader and let real sun
        // lighting shade the building faces (the depth in the reference shots).
        try { if (postProcessRef.current) postProcessRef.current.enabled = !isReal; } catch (e) {}
        try {
          if (isReal) {
            // freeze the sun at a daytime angle so towers are lit, not dark
            viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2024-06-21T18:30:00Z");
          }
        } catch (e) {}

        // Swap the basemap only when crossing into/out of Realistic: clean Bing
        // aerial for Realistic, watercolour tiles (if keyed) otherwise.
        const wasReal = prevStyleRef.current === "realistic";
        if (status === "ready" && wasReal !== isReal) {
          (async () => {
            try {
              viewer.imageryLayers.removeAll();
              if (isReal || !(cfgRef.current && cfgRef.current.stadiaMapsKey)) {
                const prov = await Cesium.createWorldImageryAsync();
                if (viewerRef.current) viewer.imageryLayers.addImageryProvider(prov);
              } else {
                viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
                  url: "https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg?api_key=" + cfgRef.current.stadiaMapsKey,
                  maximumLevel: 16,
                  credit: "Map tiles by Stamen Design, hosted by Stadia Maps; data © OpenStreetMap",
                }));
              }
            } catch (e) { console.warn("[cesium] imagery swap failed", e); }
          })();
        }
        prevStyleRef.current = style;
        // on-demand render so style/colour/imagery swaps show without a nudge
        try { viewer.scene.requestRender(); } catch (e) {}
      }, [style, colorway, status]);

      // render pinned photos as larger Polaroid-framed billboards (no caption
      // text). Each photo is composed onto a white Polaroid card on a canvas
      // first, so the globe shows framed prints instead of bare squares.
      useEffect(() => {
        const viewer = viewerRef.current;
        if (!viewer || !window.Cesium || status !== "ready") return;
        const Cesium = window.Cesium;
        let cancelled = false;
        entitiesRef.current.forEach((e) => { try { viewer.entities.remove(e); } catch (_) {} });
        entitiesRef.current = [];
        (async () => {
          for (const p of pinnedStore) {
            let image = p.src, aspect = 0.86;
            try {
              const cv = await makePolaroidCanvas(p.src);
              image = cv; aspect = cv.width / cv.height;
            } catch (_) { /* fall back to the raw photo */ }
            if (cancelled || !viewerRef.current) return;
            const W = 132;                       // on-screen width (was 86, square)
            const ent = viewer.entities.add({
              id: "sozai-" + p.id,
              position: Cesium.Cartesian3.fromDegrees(p.lon, p.lat, 40),
              billboard: {
                image, width: W, height: Math.round(W / aspect),
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                heightReference: Cesium.HeightReference.NONE,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
              },
            });
            entitiesRef.current.push(ent);
          }
          try { viewer.scene.requestRender(); } catch (_) {}
        })();
        return () => { cancelled = true; };
      }, [pinnedStore.map((p) => p.id + ":" + p.lon + "," + p.lat).join("|"), status]);

      // tap-to-pin + drag-to-move on the globe.
      const armedRef = useRef(null);
      useEffect(() => { armedRef.current = armedId; }, [armedId]);
      useEffect(() => {
        const viewer = viewerRef.current;
        if (!viewer || !window.Cesium || status !== "ready") return;
        const Cesium = window.Cesium;
        const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        let dragId = null;
        function toLngLat(cartesian) {
          const c = Cesium.Cartographic.fromCartesian(cartesian);
          return { lon: Cesium.Math.toDegrees(c.longitude), lat: Cesium.Math.toDegrees(c.latitude) };
        }
        // LEFT_DOWN: start dragging a pinned photo if one is under the cursor
        handler.setInputAction((click) => {
          const picked = viewer.scene.pick(click.position);
          if (picked && picked.id && typeof picked.id.id === "string" && picked.id.id.indexOf("sozai-") === 0) {
            dragId = picked.id.id.slice("sozai-".length);
            viewer.scene.screenSpaceCameraController.enableInputs = false;
          }
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
        // MOUSE_MOVE: move the dragged photo along the ground
        handler.setInputAction((movement) => {
          if (!dragId) return;
          const cart = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);
          if (cart) { const { lon, lat } = toLngLat(cart); const ent = viewer.entities.getById("sozai-" + dragId); if (ent) ent.position = Cesium.Cartesian3.fromDegrees(lon, lat, 40); try { viewer.scene.requestRender(); } catch (_) {} }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        // LEFT_UP: commit a drag, OR pin an armed photo at the click point
        handler.setInputAction((click) => {
          viewer.scene.screenSpaceCameraController.enableInputs = true;
          if (dragId) {
            const ent = viewer.entities.getById("sozai-" + dragId);
            if (ent) { const { lon, lat } = toLngLat(ent.position.getValue(Cesium.JulianDate.now())); window.SozaiPhotos.move(dragId, lon, lat); Collab.send("photo_moved", { id: dragId, lon, lat }); }
            dragId = null; return;
          }
          const armed = armedRef.current;
          if (armed) {
            const cart = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);
            if (cart) { const { lon, lat } = toLngLat(cart); window.SozaiPhotos.pin(armed, lon, lat); Collab.send("photo_pinned", { id: armed, lon, lat }); setArmedId(null); }
          }
        }, Cesium.ScreenSpaceEventType.LEFT_UP);
        return () => { try { handler.destroy(); } catch (e) {} };
      }, [status]);

      async function searchCity() {
        const q = place.trim();
        if (!q || !viewerRef.current || !window.Cesium) return;
        setSearching(true);
        try {
          const hits = await geocode(q, { limit: 1 });
          if (hits.length) {
            const { lat, lon } = hits[0];
            viewerRef.current.scene.camera.flyTo({
              destination: window.Cesium.Cartesian3.fromDegrees(lon, lat - 0.012, 1400),
              orientation: { heading: window.Cesium.Math.toRadians(10), pitch: window.Cesium.Math.toRadians(-30) },
              duration: 2,
            });
          }
        } catch (e) {} finally { setSearching(false); }
      }

      const flyStops = buildFlyStops(pinnedStore);
      function removeVehicle() {
        const viewer = viewerRef.current;
        if (viewer && vehicleRef.current) { try { viewer.entities.remove(vehicleRef.current); } catch (e) {} }
        vehicleRef.current = null;
      }
      function stopFly() {
        flyAbortRef.current.stop = true;
        setFlying(false); setFlyIdx(-1);
        const viewer = viewerRef.current;
        if (viewer) {
          try { viewer.trackedEntity = undefined; } catch (e) {}
          try { viewer.clock.shouldAnimate = false; } catch (e) {}
          if (clockTickRef.current) { try { clockTickRef.current(); } catch (e) {} clockTickRef.current = null; }
          try { if (viewer.entities.getById("sozai-route")) viewer.entities.removeById("sozai-route"); } catch (e) {}
          // restore on-demand rendering after an interrupted journey
          try { viewer.scene.requestRenderMode = true; viewer.scene.requestRender(); } catch (e) {}
        }
        removeVehicle();
      }
      async function playFly() {
        const viewer = viewerRef.current;
        if (!viewer || !window.Cesium || flyStops.length < 1) return;
        const Cesium = window.Cesium;
        flyAbortRef.current = { stop: false };
        const token = flyAbortRef.current;
        setFlying(true);
        // the journey animates the clock every frame, so render continuously
        // while it plays (restored to on-demand in stopFly / at the end).
        try { viewer.scene.requestRenderMode = false; } catch (e) {}

        const tdef = CS_TRANSPORTS.find((t) => t.id === transport) || CS_TRANSPORTS[0];
        const isPlane = tdef.id === "plane";
        const cruiseH = isPlane ? 600 : 6;   // metres above ground while travelling
        // seconds to spend per leg, scaled by the transport's speed
        const legSecs = Math.max(3, 6 / tdef.speed);

        // build a time-sampled position along the whole route, so Cesium can
        // interpolate position AND derive heading from velocity automatically.
        const start = Cesium.JulianDate.now();
        const sampled = new Cesium.SampledPositionProperty();
        const stopTimes = [];
        let tSec = 0;
        for (let i = 0; i < flyStops.length; i++) {
          if (i > 0) {
            // a couple of mid-samples per leg keeps the heading smooth on curves
            const a = flyStops[i - 1], b = flyStops[i];
            for (let s = 1; s <= 3; s++) {
              const k = s / 4, midT = tSec + legSecs * k;
              const arc = isPlane ? Math.sin(k * Math.PI) * 300 : 0; // gentle plane arc
              sampled.addSample(Cesium.JulianDate.addSeconds(start, midT, new Cesium.JulianDate()),
                Cesium.Cartesian3.fromDegrees(a.lon + (b.lon - a.lon) * k, a.lat + (b.lat - a.lat) * k, cruiseH + arc));
            }
            tSec += legSecs;
          }
          const stopT = Cesium.JulianDate.addSeconds(start, tSec, new Cesium.JulianDate());
          stopTimes.push(tSec);
          sampled.addSample(stopT, Cesium.Cartesian3.fromDegrees(flyStops[i].lon, flyStops[i].lat, isPlane ? 120 : cruiseH));
          tSec += 1.6; // brief dwell at each stop
        }
        const totalSecs = tSec;
        sampled.setInterpolationOptions({ interpolationDegree: 2, interpolationAlgorithm: Cesium.HermitePolynomialApproximation });

        // configure the viewer clock to play through the journey once
        viewer.clock.startTime = start.clone();
        viewer.clock.stopTime = Cesium.JulianDate.addSeconds(start, totalSecs, new Cesium.JulianDate());
        viewer.clock.currentTime = start.clone();
        viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;
        viewer.clock.multiplier = 1;
        viewer.clock.shouldAnimate = true;

        // the moving vehicle: a real glTF model, auto-oriented along velocity
        removeVehicle();
        const modelUri = tdef.models[0];
        vehicleRef.current = viewer.entities.add({
          position: sampled,
          orientation: new Cesium.VelocityOrientationProperty(sampled),
          model: {
            uri: modelUri,
            minimumPixelSize: 48, maximumScale: 800, scale: tdef.scale,
            // if the local override 404s, swap to the Khronos fallback url
          },
        });
        // graceful fallback if the (optional) local model file is missing
        try {
          const probe = await fetch(modelUri, { method: "HEAD" });
          if (!probe.ok && tdef.models[1]) vehicleRef.current.model.uri = tdef.models[1];
        } catch (e) { if (tdef.models[1]) vehicleRef.current.model.uri = tdef.models[1]; }

        // draw the route as a dashed ground polyline
        try {
          if (viewer.entities.getById("sozai-route")) viewer.entities.removeById("sozai-route");
          if (flyStops.length > 1) {
            const positions = [];
            flyStops.forEach((s) => { positions.push(s.lon, s.lat, 6); });
            viewer.entities.add({ id: "sozai-route",
              polyline: { positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),
                width: 4, clampToGround: true,
                material: new Cesium.PolylineDashMaterialProperty({ color: Cesium.Color.fromCssColorString("#B6485C") }) } });
          }
        } catch (e) {}

        // camera trails the vehicle; reveal each photo as the clock passes its stop
        let nextStop = 0;
        const onTick = viewer.clock.onTick.addEventListener((clock) => {
          if (token.stop) return;
          const t = Cesium.JulianDate.secondsDifference(clock.currentTime, start);
          // immersive chase camera: sit behind the moving point along the
          // direction of travel and a little above it, looking ahead down the
          // route (vs. a fixed south-facing top-down view).
          try {
            const lookAhead  = isPlane ? 4.0 : 2.0;     // s ahead to aim at
            const chaseDist  = isPlane ? 1400 : 260;    // m behind the point
            const chaseHeight = isPlane ? 700 : 140;    // m above the point
            const now = clock.currentTime;
            const pos = sampled.getValue(now);
            const ahead = sampled.getValue(Cesium.JulianDate.addSeconds(now, lookAhead, new Cesium.JulianDate())) || pos;
            if (pos && ahead) {
              const fwd = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(ahead, pos, new Cesium.Cartesian3()), new Cesium.Cartesian3());
              const up  = Cesium.Cartesian3.normalize(pos, new Cesium.Cartesian3()); // geocentric up
              const cam = Cesium.Cartesian3.clone(pos);
              Cesium.Cartesian3.add(cam, Cesium.Cartesian3.multiplyByScalar(fwd, -chaseDist, new Cesium.Cartesian3()), cam);
              Cesium.Cartesian3.add(cam, Cesium.Cartesian3.multiplyByScalar(up, chaseHeight, new Cesium.Cartesian3()), cam);
              const dir = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(ahead, cam, new Cesium.Cartesian3()), new Cesium.Cartesian3());
              viewer.scene.camera.setView({ destination: cam, orientation: { direction: dir, up: up } });
            }
          } catch (e) {}
          if (nextStop < stopTimes.length && t >= stopTimes[nextStop] - 0.2) {
            setFlyIdx(nextStop); nextStop++;
          }
        });
        clockTickRef.current = () => { try { onTick(); } catch (e) {} };

        // wait until the clock reaches the end (or the user stops it)
        await new Promise((resolve) => {
          const iv = setInterval(() => {
            if (token.stop) { clearInterval(iv); resolve(); return; }
            const t = Cesium.JulianDate.secondsDifference(viewer.clock.currentTime, start);
            if (t >= totalSecs - 0.05) { clearInterval(iv); resolve(); }
          }, 120);
        });

        // tidy up
        if (clockTickRef.current) { clockTickRef.current(); clockTickRef.current = null; }
        viewer.clock.shouldAnimate = false;
        if (!token.stop && flyStops.length) {
          const lons = flyStops.map((s) => s.lon), lats = flyStops.map((s) => s.lat);
          const cx = (Math.min(...lons) + Math.max(...lons)) / 2, cy = (Math.min(...lats) + Math.max(...lats)) / 2;
          viewer.scene.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(cx, cy - 0.02, 2600),
            orientation: { heading: 0, pitch: Cesium.Math.toRadians(-45) }, duration: 2.4 });
          await new Promise((r) => setTimeout(r, 2400));
        }
        removeVehicle();
        try { if (viewer.entities.getById("sozai-route")) viewer.entities.removeById("sozai-route"); } catch (e) {}
        // back to on-demand rendering now that the journey is over
        try { viewer.scene.requestRenderMode = true; viewer.scene.requestRender(); } catch (e) {}
        setFlying(false); setFlyIdx(-1);
      }

      if (status === "no-token") {
        return (
          <div className="rounded-lg border-2 border-primary/40 bg-accent/30 p-6 text-center">
            <MapIcon className="mx-auto size-8 text-primary" />
            <p className="mt-2 font-mono text-sm font-semibold uppercase tracking-wide text-foreground">3D globe needs a Cesium ion token</p>
            <p className="mt-1 text-sm text-muted-foreground">Set <span className="font-mono">SOZAI_CESIUM_ION_TOKEN</span> in the server environment, then reload. The watercolor map works without any token.</p>
          </div>
        );
      }
      if (status === "error") {
        return (
          <div className="rounded-lg border-2 border-primary/40 bg-accent/30 p-6 text-center">
            <MapIcon className="mx-auto size-8 text-primary" />
            <p className="mt-2 font-mono text-sm font-semibold uppercase tracking-wide text-foreground">Couldn't load the 3D globe</p>
            <p className="mt-1 text-sm text-muted-foreground">{errMsg}</p>
          </div>
        );
      }

      return (
        <div className={cn("flex flex-col gap-4", expanded && "fixed inset-0 z-[80] overflow-auto bg-background p-4 sm:p-6")}>
          {/* controls */}
          <div className="flex flex-col gap-2 sm:flex-row sm:items-end">
            <div className="flex-1">
              <label htmlFor="cs-city" className="font-mono text-xs font-semibold uppercase tracking-wide text-foreground">City</label>
              <div className="mt-1 flex items-center gap-2 rounded-md border-2 border-primary/60 bg-card px-3 py-2">
                <Search className="size-4 text-primary" />
                <input id="cs-city" value={place} onChange={(e) => setPlace(e.target.value)}
                  onKeyDown={(e) => e.key === "Enter" && searchCity()}
                  placeholder="Search any city…"
                  className="min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground" />
              </div>
            </div>
            <button type="button" onClick={searchCity} disabled={searching}
              className="flex items-center justify-center gap-2 rounded-md border-2 border-primary bg-primary px-4 py-2.5 font-mono text-xs font-semibold uppercase tracking-wide text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-60">
              {searching ? <Loader2 className="size-4 animate-spin" /> : <Navigation className="size-4" />} Go
            </button>
          </div>

          {/* style + colorway */}
          <div className="flex flex-wrap items-center gap-3">
            <div className="flex items-center gap-1.5">
              <span className="font-mono text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">3D style</span>
              {[{ id: "watercolor", label: "Watercolor" }, { id: "realistic", label: "Realistic" }, { id: "material", label: "By material" }].map((s) => (
                <button key={s.id} type="button" onClick={() => setStyle(s.id)} aria-pressed={style === s.id}
                  className={cn("rounded-full border-2 px-2.5 py-1 font-mono text-[11px] uppercase tracking-wide transition-colors",
                    style === s.id ? "border-primary bg-accent text-foreground" : "border-primary/40 text-muted-foreground hover:bg-accent/50")}>
                  {s.label}
                </button>
              ))}
            </div>
            {style === "watercolor" ? (
              <div className="flex items-center gap-1.5">
                <Palette className="size-3.5 text-primary" />
                {WC_COLORWAYS.map((c) => (
                  <button key={c.id} type="button" onClick={() => setColorway(c.id)} aria-pressed={colorway === c.id} title={c.label}
                    className={cn("flex items-center gap-1 rounded-full border-2 px-2 py-1 font-mono text-[10px] uppercase tracking-wide transition-colors",
                      colorway === c.id ? "border-primary bg-accent text-foreground" : "border-primary/40 text-muted-foreground hover:bg-accent/50")}>
                    <span className="size-2.5 rounded-full ring-1 ring-black/10" style={{ background: c.swatch }} />{c.label}
                  </button>
                ))}
              </div>
            ) : null}
          </div>

          {/* journey transport selector (mirrors the watercolor map) */}
          {flyStops.length > 0 && status === "ready" ? (
            <div className="flex flex-wrap items-center gap-2">
              <span className="flex items-center gap-1.5 font-mono text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
                <FastForward className="size-3.5 text-primary" /> Journey
              </span>
              <div className="flex flex-wrap items-center gap-1.5">
                {CS_TRANSPORTS.map((t) => (
                  <button key={t.id} type="button" onClick={() => setTransport(t.id)} aria-pressed={transport === t.id} title={t.label} disabled={flying}
                    className={cn("flex items-center gap-1 rounded-full border-2 px-2 py-1 font-mono text-[11px] uppercase tracking-wide transition-colors disabled:opacity-50",
                      transport === t.id ? "border-primary bg-accent text-foreground" : "border-primary/40 text-muted-foreground hover:bg-accent/50")}>
                    <span aria-hidden="true">{t.emoji}</span>{t.label}
                  </button>
                ))}
              </div>
            </div>
          ) : null}

          {/* globe (drop target) */}
          <div className={cn("sozai-map-dropzone relative w-full overflow-hidden rounded-lg border-2 border-primary/40", expanded && "flex-1 min-h-0", dropArmed && "drop-armed")}
            onDragOver={(e) => { if (e.dataTransfer.types.includes("application/sozai-photo")) { e.preventDefault(); setDropArmed(true); } }}
            onDragLeave={(e) => { if (e.currentTarget === e.target) setDropArmed(false); }}
            onDrop={(e) => {
              const id = e.dataTransfer.getData("application/sozai-photo");
              setDropArmed(false);
              const viewer = viewerRef.current;
              if (!id || !viewer || !window.Cesium) return;
              e.preventDefault();
              const Cesium = window.Cesium;
              const rect = e.currentTarget.getBoundingClientRect();
              const pos = new Cesium.Cartesian2(e.clientX - rect.left, e.clientY - rect.top);
              const cart = viewer.camera.pickEllipsoid(pos, viewer.scene.globe.ellipsoid);
              if (cart) {
                const c = Cesium.Cartographic.fromCartesian(cart);
                const lon = Cesium.Math.toDegrees(c.longitude), lat = Cesium.Math.toDegrees(c.latitude);
                window.SozaiPhotos.pin(id, lon, lat); Collab.send("photo_pinned", { id, lon, lat });
              }
            }}>
            <div ref={containerRef} className={cn("w-full", expanded ? "h-full min-h-[60vh]" : "h-[420px] sm:h-[520px]")} />
            {/* expand toggle */}
            {status === "ready" ? (
              <button type="button" onClick={() => setExpanded((v) => !v)}
                aria-label={expanded ? "Collapse map" : "Expand map"} title={expanded ? "Collapse" : "Expand into map"}
                className="absolute left-2 top-2 z-10 flex size-9 items-center justify-center rounded-md border-2 border-primary/70 bg-card/90 text-primary shadow-sm transition-colors hover:bg-accent">
                {expanded ? <Minimize2 className="size-4" /> : <Maximize2 className="size-4" />}
              </button>
            ) : null}
            {status === "loading" ? (
              <div className="absolute inset-0 flex items-center justify-center bg-card/60">
                <span className="flex items-center gap-2 font-mono text-xs uppercase tracking-wide text-primary"><Loader2 className="size-4 animate-spin" /> Spinning up the globe…</span>
              </div>
            ) : null}
            {armedId ? (
              <div className="absolute left-1/2 top-2 z-10 -translate-x-1/2 rounded-md border-2 border-primary bg-card/95 px-3 py-1.5 font-mono text-[10px] uppercase tracking-wide text-primary shadow-sm">
                <MapPin className="mr-1 inline size-3.5" /> Click the globe to pin · <button type="button" className="underline" onClick={() => setArmedId(null)}>cancel</button>
              </div>
            ) : null}
            {flyStops.length > 0 && status === "ready" ? (
              <button type="button" onClick={() => (flying ? stopFly() : playFly())}
                className="absolute right-2 top-2 z-10 flex items-center gap-1.5 rounded-md border-2 border-primary bg-card/90 px-2.5 py-2 font-mono text-[10px] font-semibold uppercase tracking-wide text-primary shadow-sm transition-colors hover:bg-accent">
                {flying ? <X className="size-4" /> : <FastForward className="size-4" />} {flying ? "Stop" : "Play journey"}
              </button>
            ) : null}
            {flying && flyStops[flyIdx] ? (
              <div className="pointer-events-none absolute bottom-3 left-1/2 z-10 w-[min(78%,360px)] -translate-x-1/2">
                <div className="overflow-hidden rounded-md border-2 border-primary bg-card/95 shadow-lg">
                  <img src={flyStops[flyIdx].src} alt="" className="h-36 w-full object-cover" />
                  <div className="px-3 py-2">
                    <p className="font-mono text-[10px] uppercase tracking-wide text-primary">
                      {(flyIdx + 1) + " / " + flyStops.length}
                      {[flyStops[flyIdx].date, flyStops[flyIdx].time].filter(Boolean).length ? " · " + [flyStops[flyIdx].date, flyStops[flyIdx].time].filter(Boolean).join(" · ") : ""}
                    </p>
                    <p className="mt-0.5 text-sm leading-snug text-foreground">{flyStops[flyIdx].caption || flyStops[flyIdx].title || ""}</p>
                  </div>
                </div>
              </div>
            ) : null}
          </div>

          {/* shared photo tray - same album photos as the watercolor map */}
          {status === "ready" ? <PhotoTray onPick={pickCesiumPhoto} armedId={armedId} hint="Drag a photo onto the globe - or tap it, then click the globe - to pin it. Pinned photos can be dragged to reposition." /> : null}

          <p className="flex items-start gap-1.5 font-mono text-[10px] leading-snug tracking-wide text-muted-foreground">
            <Droplet className="mt-0.5 size-3 shrink-0 text-primary" />
            Photorealistic 3D buildings via Cesium OSM Buildings. Photos pinned here and on the watercolor map stay in sync - press “Play journey” to fly the timeline.
          </p>
        </div>
      );
    }

    function MapVariantSwitcher({ value, onChange }) {
      return (
        <div className="flex flex-wrap items-center gap-2" role="tablist" aria-label="Map layout">
          {MAP_VARIANTS.map((v) => {
            const active = v.id === value;
            const IconC = v.icon;
            return (
              <button key={v.id} type="button" role="tab" aria-selected={active} onClick={() => onChange(v.id)}
                title={v.blurb}
                className={cn("flex items-center gap-1.5 rounded-md border-2 px-3 py-1.5 font-mono text-xs uppercase tracking-wide transition-colors",
                  active ? "border-primary bg-primary text-primary-foreground" : "border-primary/60 text-foreground hover:bg-accent")}>
                <IconC className={cn("size-3.5", active ? "" : "text-primary")} />{v.label}
              </button>
            );
          })}
        </div>
      );
    }

    // Variant: gallery / contact-sheet grid
    function MapGridView({ selectedId, onSelect, moments: momentList }) {
      const list = momentList || moments;
      return (
        <ul className="grid grid-cols-2 gap-4 sm:grid-cols-3">
          {list.map((m, i) => {
            const active = selectedId === m.id;
            return (
              <li key={m.id}>
                <button type="button" onClick={() => onSelect(m.id)} aria-pressed={active}
                  className={cn("group flex w-full flex-col overflow-hidden rounded-lg border-2 bg-card text-left transition-all hover:-translate-y-0.5",
                    active ? "border-primary ring-4 ring-primary/20" : "border-primary/30 hover:border-primary/60")}>
                  <span className="relative block aspect-[4/3] overflow-hidden border-b-2 border-primary/20">
                    <Img src={m.src} alt={m.alt} fill className="object-cover [filter:saturate(0.9)]" sizes="240px" />
                    <span className="absolute left-2 top-2 flex size-6 items-center justify-center rounded-full border-2 border-primary bg-card font-mono text-xs font-bold text-primary">{m.id}</span>
                    {m.favorite ? <Star className="absolute right-2 top-2 size-4 fill-primary text-primary" /> : null}
                  </span>
                  <span className="flex flex-col gap-1 p-3">
                    <span className="font-mono text-xs font-bold uppercase tracking-wide text-foreground">{m.title}</span>
                    <span className="line-clamp-2 text-xs text-muted-foreground">{m.caption}</span>
                    <span className="mt-1 flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-wide text-primary/70"><Clock className="size-3" />{m.time}</span>
                  </span>
                </button>
              </li>
            );
          })}
        </ul>
      );
    }

    // Variant: vertical chronological timeline
    function MapTimelineView({ selectedId, onSelect, moments: momentList }) {
      const list = momentList || moments;
      return (
        <ol className="relative ml-3 flex flex-col gap-6 border-l-2 border-dashed border-primary/40 pl-6">
          {list.map((m) => {
            const active = selectedId === m.id;
            return (
              <li key={m.id} className="relative">
                <span aria-hidden="true" className={cn("absolute -left-[1.95rem] top-1 flex size-6 items-center justify-center rounded-full border-2 font-mono text-xs font-bold",
                  active ? "border-primary bg-primary text-primary-foreground" : "border-primary bg-card text-primary")}>{m.id}</span>
                <button type="button" onClick={() => onSelect(m.id)} aria-pressed={active}
                  className={cn("flex w-full items-center gap-4 rounded-lg border-2 bg-card p-3 text-left transition-colors",
                    active ? "border-primary ring-4 ring-primary/20" : "border-primary/30 hover:border-primary/60 hover:bg-accent/40")}>
                  <span className="relative size-20 shrink-0 overflow-hidden rounded-md border-2 border-primary/30">
                    <Img src={m.src} alt={m.alt} fill className="object-cover" sizes="80px" />
                  </span>
                  <span className="min-w-0 flex-1">
                    <span className="flex items-center gap-2">
                      <span className="font-mono text-sm font-bold uppercase tracking-wide text-foreground">{m.title}</span>
                      {m.favorite ? <Star className="size-3.5 fill-primary text-primary" /> : null}
                    </span>
                    <span className="mt-0.5 block text-sm text-muted-foreground">{m.caption}</span>
                    <span className="mt-1 flex items-center gap-3 font-mono text-[10px] uppercase tracking-wide text-primary/70">
                      <span className="flex items-center gap-1"><Clock className="size-3" />{m.time}</span>
                      <span className="flex items-center gap-1"><MapPin className="size-3" />{m.title}</span>
                    </span>
                  </span>
                </button>
              </li>
            );
          })}
        </ol>
      );
    }

    // ----------------------------------------------------------------- //
    // DevelopScroll - a draggable "develop your memories" scrapbook, ported
    // from the standalone london scroll. Pieces (stamp-style cards) start in a
    // pile; drag each onto one of 8 slots, then "develop" to shake + fix them
    // down into a keepsake page. Flip a settled card to leave a note. Users can
    // upload their own photos (data URLs) which replace the moment images.
    // Built with imperative DOM via refs (matching the original mechanics).
    // ----------------------------------------------------------------- //
    function DevelopScroll({ moments: momentList }) {
      const stageRef = useRef(null);
      const pageRef = useRef(null);
      const slotsRef = useRef(null);
      const layerRef = useRef(null);
      const dimRef = useRef(null);
      const piecesRef = useRef({});      // id -> element
      const slottedRef = useRef([]);     // slot index -> id
      const homesRef = useRef([]);
      const phaseRef = useRef("desk");
      const fileInputRef = useRef(null);
      const uploadsRef = useRef({});     // id -> data URL override
      const [canDevelop, setCanDevelop] = useState(false);
      const [phase, setPhase] = useState("desk");
      const [uploadCount, setUploadCount] = useState(0);
      // NSFW scan progress overlay: {active, pct, label, blocked:[]}
      const [scan, setScan] = useState(null);

      const EASE = "cubic-bezier(0.16,1,0.3,1)";
      const CARD_H = 1.10;
      const COLS = [13.6, 37.8, 62, 86.2];
      const reduced = (typeof window.__sozaiReduceMotion !== "undefined")
        ? window.__sozaiReduceMotion
        : (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches);

      // build the data from app moments (up to 8) so it reflects the user's trip
      // The original colored each card by who was in the photo (maya/alex/sam):
      // madder red, prussian blue, gamboge yellow - with tinted frames and
      // matching hand-drawn underlines. Our photos have no people metadata, so
      // we cycle the same three pigments across the cards to keep that look.
      const PIGMENTS = [
        { c: "#B6485C", tint: "rgba(182,72,92,.42)" },   // madder
        { c: "#2F5D7C", tint: "rgba(47,93,124,.42)" },   // prussian
        { c: "#C8912E", tint: "rgba(200,145,46,.48)" },  // gamboge
      ];
      // parse "2:30 PM" / "14:30" → minutes since midnight for chronological sort
      function parseTimeMin(s) {
        if (!s) return 9999;
        const m = String(s).match(/(\d+):(\d+)\s*(am|pm)?/i);
        if (!m) return 9999;
        let h = parseInt(m[1], 10), mn = parseInt(m[2], 10);
        const ap = (m[3] || "").toLowerCase();
        if (ap === "pm" && h !== 12) h += 12;
        else if (ap === "am" && h === 12) h = 0;
        return h * 60 + mn;
      }

      const src = momentList || moments;
      const items = useMemo(() => src.slice(0, 8).map((m, i) => ({
        id: "dv" + m.id, src: m.src, alt: m.alt || m.title,
        name: (m.title || "moment").toLowerCase(), t: m.time || "", hr: parseTimeMin(m.time),
        note: m.note || m.caption || "",
        col: PIGMENTS[i % PIGMENTS.length].c, tint: PIGMENTS[i % PIGMENTS.length].tint,
      })), [src]); // eslint-disable-line

      const $page = () => pageRef.current;
      const pageRect = () => {
        const el = pageRef.current;
        if (!el) return { left: 0, top: 0, width: 0, height: 0 };
        const r = el.getBoundingClientRect();
        // Defensive: if the height collapsed (aspect-ratio not resolved yet, or
        // measured mid-transition) the cards would all clamp to the top. Derive
        // it from the width instead — the stage is a fixed 3:2, capped at 78vh.
        if (r.height < 80 && r.width > 80) {
          const h = Math.min(r.width * 2 / 3, window.innerHeight * 0.78);
          return { left: r.left, top: r.top, width: r.width, height: h };
        }
        return r;
      };
      const slotChildren = () => (slotsRef.current ? Array.from(slotsRef.current.children) : []);
      const slotOf = (id) => { const i = slottedRef.current.indexOf(id); return i < 0 ? null : i; };
      // slot geometry in PAGE-RELATIVE pixels (matches the loose-piece layer)
      const slotBox = (i) => {
        const s = slotChildren()[i];
        return { left: parseFloat(s.style.left) || 0, top: parseFloat(s.style.top) || 0,
                 width: parseFloat(s.style.width) || 0, height: parseFloat(s.style.height) || 0 };
      };

      function genHomes() {
        const cells = [...Array(items.length).keys()].sort(() => Math.random() - 0.5);
        homesRef.current = cells.map((c) => {
          let fx = (c % 4) * 0.235 + 0.155 + (Math.random() * 0.07 - 0.035);
          let fy = (c < 4 ? 0.24 : 0.62) + (Math.random() * 0.12 - 0.06);
          if (fx < 0.32 && fy < 0.44) fy = 0.44 + Math.random() * 0.06;
          return { fx, fy, rot: Math.random() * 13 - 6.5, wf: 0.185 + Math.random() * 0.045 };
        });
      }

      function layoutSlots() {
        const page = $page(); if (!page || !slotsRef.current) return;
        const pr = pageRect(); // defensive height so slots get real size
        const head = page.querySelector(".dv-plate");
        const topM = (head ? head.offsetTop + head.offsetHeight : 0) + 14;
        const botM = pr.height * 0.034;
        const midGap = pr.height * 0.045;
        const rows = items.length > 4 ? 2 : 1;
        const w = Math.min(pr.width * 0.225, (pr.height - topM - botM - midGap) / (rows * CARD_H * 1.02));
        const h = w * CARD_H * 1.02;
        slotChildren().forEach((s, i) => {
          const left = pr.width * COLS[i % 4] / 100 - w / 2;
          const top = (i < 4 ? topM : topM + h + midGap);
          Object.assign(s.style, { left: left + "px", top: top + "px", width: w + "px", height: h + "px" });
        });
      }

      function deskHome(i) {
        const pr = pageRect();
        const h = homesRef.current[i];
        // Width-based card size, exactly like the original scroll. The page now
        // has a fixed aspect ratio, so two rows always fit. Clamp x/y so a card
        // can never stray off the page edges.
        const w = pr.width * h.wf;
        const x = Math.max(6, Math.min(h.fx * pr.width - w / 2, pr.width - w - 6));
        const y = Math.max(6, Math.min(h.fy * pr.height - w * CARD_H / 2, pr.height - w * CARD_H - 6));
        return { x, y, w, rot: h.rot };
      }
      function place(el, p, immediate) {
        el.style.setProperty("--rot", p.rot + "deg");
        el.style.setProperty("--pad", (p.w * 0.05) + "px");
        el.style.transform = "rotate(" + p.rot + "deg)";
        const from = { left: el.style.left, top: el.style.top, width: el.style.width };
        const to = { left: p.x + "px", top: p.y + "px", width: p.w + "px" };
        // Set the final position immediately as the source of truth - the
        // element ALWAYS ends up here, even if the animation is interrupted.
        Object.assign(el.style, to);
        if (immediate || reduced || !from.left) return Promise.resolve();
        // Cosmetic slide from the previous spot to the (already-set) final spot.
        const a = el.animate([from, to], { duration: p.dur || 850, delay: p.delay || 0, easing: EASE });
        return a.finished.catch(() => {});
      }
      function scatterAll(animate) {
        items.forEach((m, i) => {
          const el = piecesRef.current[m.id]; if (!el) return;
          const p = deskHome(i);
          el.style.opacity = 1; // source of truth - never rely on fill:forwards
          if (animate && !reduced) {
            // heavier, weightier cascade: longer travel + more stagger
            place(el, { ...p, dur: 950, delay: i * 75 });
            el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 560, delay: i * 75 });
          } else {
            Object.assign(el.style, { left: p.x + "px", top: p.y + "px", width: p.w + "px", transform: "rotate(" + p.rot + "deg)" });
            el.style.setProperty("--rot", p.rot + "deg");
            el.style.setProperty("--pad", (p.w * 0.05) + "px");
          }
        });
      }
      function checkComplete() {
        setCanDevelop(!slottedRef.current.some((s) => !s) && phaseRef.current === "desk" && slottedRef.current.length === items.length);
      }
      function slotAt(x, y) {
        for (const s of slotChildren()) {
          const r = s.getBoundingClientRect();
          if (x >= r.left - 6 && x <= r.right + 6 && y >= r.top - 6 && y <= r.bottom + 6) return +s.dataset.i;
        }
        return null;
      }
      function assign(id, idx, opts) {
        opts = opts || {};
        if (slottedRef.current[idx] && slottedRef.current[idx] !== id) return sendHome(id);
        const prev = slotOf(id);
        if (prev !== null) { slottedRef.current[prev] = null; slotChildren()[prev].classList.remove("filled"); }
        slottedRef.current[idx] = id;
        slotChildren()[idx].classList.add("filled");
        const r = slotBox(idx), el = piecesRef.current[id], w = r.width * 0.96;
        return place(el, { x: r.left + (r.width - w) / 2, y: r.top + (r.height - w * CARD_H) / 2, w, rot: Math.sin(idx * 7) * 1.8, dur: opts.dur || 620, delay: opts.delay || 0 }).then(checkComplete);
      }
      function unassign(id) {
        const i = slotOf(id);
        if (i !== null) { slottedRef.current[i] = null; slotChildren()[i].classList.remove("filled"); }
        sendHome(id); checkComplete();
      }
      function sendHome(id) {
        const i = items.findIndex((m) => m.id === id);
        return place(piecesRef.current[id], { ...deskHome(i), dur: 650 });
      }

      // build piece elements once
      useEffect(() => {
        slottedRef.current = new Array(items.length).fill(null);
        genHomes();
        // create slots
        const slotsEl = slotsRef.current;
        slotsEl.innerHTML = "";
        for (let i = 0; i < items.length; i++) {
          const d = document.createElement("div");
          d.className = "dv-slot"; d.dataset.i = i;
          slotsEl.appendChild(d);
        }
        // create pieces
        const layer = layerRef.current;
        items.forEach((m) => {
          const el = document.createElement("figure");
          el.className = "dv-piece"; el.dataset.id = m.id; el.tabIndex = 0;
          el.setAttribute("aria-label", m.name + ", " + m.t);
          el.innerHTML =
            '<div class="dv-flip">' +
              '<div class="dv-front">' +
                '<div class="dv-frame" style="border-color:' + m.tint + '"><img src="' + m.src + '" alt=""></div>' +
                '<figcaption><div class="dv-cap">' + m.name + '<span class="when">' + m.t + '</span><span class="where"></span></div>' +
                  '<svg class="dv-stroke" viewBox="0 0 100 8" preserveAspectRatio="none" aria-hidden="true"><path d="M2,5 C22,2 40,6 56,4 S 84,5 98,3" pathLength="100" stroke="' + m.col + '"/></svg>' +
                '</figcaption>' +
              '</div>' +
              '<div class="dv-back">' +
                '<div class="dv-bhead">' + m.name + '</div>' +
                '<label class="dv-blabel">When' +
                  '<input class="dv-btime" type="text" value="' + (m.t || "").replace(/"/g, "&quot;") + '" placeholder="e.g. 2:20p" aria-label="Time for ' + m.name + '"></label>' +
                '<label class="dv-blabel">Where' +
                  '<input class="dv-bloc" type="text" value="" placeholder="e.g. Hyde Park" aria-label="Location for ' + m.name + '"></label>' +
                '<textarea class="dv-bwrite" placeholder="add your own note…" aria-label="Add a note">' + (m.note || "") + '</textarea>' +
              '</div>' +
            '</div>';
          layer.appendChild(el);
          piecesRef.current[m.id] = el;
        });
        layoutSlots();
        // restore any saved edits, and wire input listeners on each card back
        editsRef.current = loadEdits();
        items.forEach((m) => {
          const el = piecesRef.current[m.id]; if (!el) return;
          const saved = editsRef.current[m.id] || {};
          if (saved.time != null) applyEditToDOM(m.id, "time", saved.time);
          if (saved.loc != null) applyEditToDOM(m.id, "loc", saved.loc);
          if (saved.note != null) applyEditToDOM(m.id, "note", saved.note);
          else { const l = el.querySelector(".dv-cap .where"); if (l) l.textContent = ""; }
          const wire = (sel, field) => {
            const node = el.querySelector(sel); if (!node) return;
            node.addEventListener("input", () => {
              editsRef.current[m.id] = Object.assign({}, editsRef.current[m.id], { [field]: node.value });
              saveEdits();
              if (field === "time" || field === "loc") applyEditToDOM(m.id, field, node.value);
              Collab.send("dv_edit", { id: m.id, field, value: node.value });
            });
            // don't let typing inside the card trigger a flip / drag
            node.addEventListener("pointerdown", (ev) => ev.stopPropagation());
            node.addEventListener("click", (ev) => ev.stopPropagation());
          };
          wire(".dv-btime", "time"); wire(".dv-bloc", "loc"); wire(".dv-bwrite", "note");
        });
        // First scatter: WAIT until the page actually has a measured height
        // (fonts/layout can settle a frame or two late). Poll briefly, then
        // place immediately (no fly-in) so nothing collapses to the top edge.
        let tries = 0;
        let rafId = 0;
        const firstScatter = () => {
          const pr = pageRect();
          if (pr.height < 80 && tries < 40) { tries++; rafId = requestAnimationFrame(firstScatter); return; }
          layoutSlots();
          items.forEach((m, i) => {
            const el = piecesRef.current[m.id];
            const p = deskHome(i);
            Object.assign(el.style, { left: p.x + "px", top: p.y + "px", width: p.w + "px", opacity: 0, transform: "rotate(" + p.rot + "deg)" });
            el.style.setProperty("--rot", p.rot + "deg");
            el.style.setProperty("--pad", (p.w * 0.05) + "px");
            if (!reduced) el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 450, delay: i * 45, fill: "forwards" });
            else el.style.opacity = 1;
          });
        };
        rafId = requestAnimationFrame(firstScatter);

        // resize handling
        let rT;
        const onResize = () => {
          clearTimeout(rT);
          rT = setTimeout(() => {
            layoutSlots();
            if (phaseRef.current !== "desk") return;
            items.forEach((m, i) => {
              const si = slotOf(m.id);
              if (si !== null) { const r = slotBox(si), w = r.width * 0.96;
                place(piecesRef.current[m.id], { x: r.left + (r.width - w) / 2, y: r.top + (r.height - w * CARD_H) / 2, w, rot: Math.sin(si * 7) * 1.8 }, true);
              } else place(piecesRef.current[m.id], deskHome(i), true);
            });
          }, 150);
        };
        window.addEventListener("resize", onResize);
        return () => { window.removeEventListener("resize", onResize); cancelAnimationFrame(rafId); clearTimeout(rT);
          items.forEach((m) => { const el = piecesRef.current[m.id]; if (el && el.parentNode) el.parentNode.removeChild(el); });
          piecesRef.current = {};
        };
      }, []); // eslint-disable-line

      // pointer drag handlers on the layer
      useEffect(() => {
        const layer = layerRef.current; if (!layer) return;
        let drag = null;
        const onDown = (e) => {
          if (phaseRef.current !== "desk") return;
          const el = e.target.closest(".dv-piece"); if (!el) return;
          el.setPointerCapture(e.pointerId);
          drag = { el, dx: e.clientX - el.offsetLeft, dy: e.clientY - el.offsetTop, moved: false, x0: e.clientX, y0: e.clientY };
          el.classList.add("dragging");
        };
        const onMove = (e) => {
          if (!drag) return;
          if (Math.hypot(e.clientX - drag.x0, e.clientY - drag.y0) > 4) drag.moved = true;
          drag.el.style.left = (e.clientX - drag.dx) + "px";
          drag.el.style.top = (e.clientY - drag.dy) + "px";
          const i = slotAt(e.clientX, e.clientY);
          slotChildren().forEach((s, k) => s.classList.toggle("target", k === i && !slottedRef.current[k]));
        };
        const onUp = (e) => {
          if (!drag) return;
          const el = drag.el, moved = drag.moved; el.classList.remove("dragging"); drag = null;
          slotChildren().forEach((s) => s.classList.remove("target"));
          const id = el.dataset.id, i = slotAt(e.clientX, e.clientY);
          if (i !== null && moved) assign(id, i);
          else if (!moved && slotOf(id) !== null) unassign(id);
        };
        const onKey = (e) => {
          if (phaseRef.current !== "desk" || e.key !== "Enter") return;
          const el = e.target.closest(".dv-piece"); if (!el) return;
          const id = el.dataset.id;
          if (slotOf(id) !== null) { unassign(id); return; }
          const free = slottedRef.current.indexOf(null);
          if (free > -1) assign(id, free);
        };
        layer.addEventListener("pointerdown", onDown);
        layer.addEventListener("pointermove", onMove);
        layer.addEventListener("pointerup", onUp);
        layer.addEventListener("keydown", onKey);
        return () => {
          layer.removeEventListener("pointerdown", onDown);
          layer.removeEventListener("pointermove", onMove);
          layer.removeEventListener("pointerup", onUp);
          layer.removeEventListener("keydown", onKey);
        };
      }, []); // eslint-disable-line

      // flip on click/enter when settled (handlers live on the page)
      useEffect(() => {
        const page = pageRef.current; if (!page) return;
        const onClick = (e) => {
          if (phaseRef.current !== "settled") return;
          if (e.target.closest(".dv-bwrite")) return;
          const el = e.target.closest(".dv-piece"); if (!el) return;
          el.classList.toggle("flipped");
        };
        const onKey = (e) => {
          if (phaseRef.current !== "settled" || e.key !== "Enter" || e.target.closest(".dv-bwrite")) return;
          const el = e.target.closest(".dv-piece"); if (!el) return;
          el.classList.toggle("flipped");
        };
        page.addEventListener("click", onClick);
        page.addEventListener("keydown", onKey);
        return () => { page.removeEventListener("click", onClick); page.removeEventListener("keydown", onKey); };
      }, []); // eslint-disable-line

      // per-card editable fields (caption note, time, location), persisted to
      // localStorage and broadcast to collaborators. Keyed by piece id.
      const editsRef = useRef({});
      function loadEdits() {
        try { return JSON.parse(localStorage.getItem("sozai_dv_edits_v1") || "{}"); } catch (e) { return {}; }
      }
      function saveEdits() {
        try { localStorage.setItem("sozai_dv_edits_v1", JSON.stringify(editsRef.current)); } catch (e) {}
      }
      function applyEditToDOM(id, field, value) {
        const el = piecesRef.current[id]; if (!el) return;
        const sel = field === "note" ? ".dv-bwrite" : field === "time" ? ".dv-btime" : ".dv-bloc";
        const node = el.querySelector(sel);
        if (node && node.value !== value) node.value = value;
        // keep the front caption time + location in sync
        if (field === "time") { const w = el.querySelector(".dv-cap .when"); if (w) w.textContent = value; }
        if (field === "loc") { const l = el.querySelector(".dv-cap .where"); if (l) l.textContent = value ? (" · " + value) : ""; }
      }

      // receive collaborators' card edits (time / location / note) and apply
      useEffect(() => Collab.on("dv_edit", (m) => {
        if (!m || !m.id || !m.field) return;
        editsRef.current[m.id] = Object.assign({}, editsRef.current[m.id], { [m.field]: m.value });
        saveEdits();
        applyEditToDOM(m.id, m.field === "loc" ? "loc" : m.field, m.value);
      }), []);

      function setPhaseBoth(p) { phaseRef.current = p; setPhase(p); }

      // soft synthesized "paper shuffle" whoosh - no asset needed, plays on the
      // click so the browser allows it.
      function playShuffleSfx() {
        try {
          const AC = window.AudioContext || window.webkitAudioContext; if (!AC) return;
          const ctx = (playShuffleSfx._ctx = playShuffleSfx._ctx || new AC());
          if (ctx.state === "suspended") ctx.resume();
          const dur = 0.55, buf = ctx.createBuffer(1, Math.floor(ctx.sampleRate * dur), ctx.sampleRate);
          const data = buf.getChannelData(0);
          for (let i = 0; i < data.length; i++) data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / data.length, 2.2);
          const src = ctx.createBufferSource(); src.buffer = buf;
          const bp = ctx.createBiquadFilter(); bp.type = "bandpass"; bp.frequency.value = 1500; bp.Q.value = 0.6;
          const g = ctx.createGain(); g.gain.value = 0.16;
          src.connect(bp); bp.connect(g); g.connect(ctx.destination); src.start();
        } catch (e) {}
      }
      function doShuffle() {
        if (phaseRef.current !== "desk") return;
        playShuffleSfx();
        genHomes();
        slottedRef.current.fill(null);
        slotChildren().forEach((s) => s.classList.remove("filled"));
        scatterAll(true); checkComplete();
      }
      function doOrganize() {
        if (phaseRef.current !== "desk") return;
        const sorted = [...items].sort((a, b) => a.hr - b.hr);
        slottedRef.current.fill(null);
        slotChildren().forEach((s) => s.classList.remove("filled"));
        sorted.forEach((m, i) => {
          // mark slot filled synchronously so checkComplete sees all filled
          slottedRef.current[i] = m.id;
          slotChildren()[i].classList.add("filled");
          const r = slotBox(i);
          if (!r.width) return;
          const w = r.width * 0.91;
          // scatter centre within the slot cell, bias toward slot middle
          const jx = (Math.random() * 0.22 - 0.11) * r.width;
          const jy = (Math.random() * 0.14 - 0.07) * r.height;
          const x = Math.max(4, r.left + (r.width - w) / 2 + jx);
          const y = Math.max(4, r.top + (r.height - w * CARD_H) / 2 + jy);
          // alternate lean direction, vary magnitude 3-8°
          const sign = i % 2 === 0 ? 1 : -1;
          const rot = sign * (3 + Math.random() * 5);
          const el = piecesRef.current[m.id]; if (!el) return;
          place(el, { x, y, w, rot, dur: 680, delay: i * 70 });
        });
        checkComplete();
      }
      async function doDevelop() {
        if (phaseRef.current !== "desk" || slottedRef.current.some((s) => !s)) return;
        if (window.sozaiPing) window.sozaiPing("🎞️ developing the scrapbook");
        setPhaseBoth("flying");
        if (!reduced) {
          if (dimRef.current) dimRef.current.animate([{ opacity: 0 }, { opacity: 1, offset: 0.3 }, { opacity: 0 }], { duration: 750, easing: "ease-in-out" });
          await Promise.all(items.map((m, i) => {
            const el = piecesRef.current[m.id];
            const rot = parseFloat(getComputedStyle(el).getPropertyValue("--rot")) || 0;
            return el.animate([
              { transform: "rotate(" + rot + "deg)" },
              { transform: "rotate(" + (rot - 2.6) + "deg)" },
              { transform: "rotate(" + (rot + 2.6) + "deg)" },
              { transform: "rotate(" + (rot - 1.4) + "deg)" },
              { transform: "rotate(" + rot + "deg)" },
            ], { duration: 460, delay: i * 28, easing: "ease-in-out" }).finished;
          }));
        }
        await Promise.all(items.map((m) => {
          const id = m.id, i = slotOf(id), r = slotBox(i), el = piecesRef.current[id], w = r.width * 0.96;
          return place(el, { x: r.left + (r.width - w) / 2, y: r.top + (r.height - w * CARD_H) / 2, w, rot: Math.sin(i * 7) * 1.8, dur: 450 });
        }));
        // re-anchor pieces into the page using percentages so they stay put
        // through resizes. The layer covers the page, so px values are already
        // page-relative - convert straight to percentages.
        const pr = pageRect();
        items.forEach((m) => {
          const el = piecesRef.current[m.id];
          const left = parseFloat(el.style.left) || 0;
          const top = parseFloat(el.style.top) || 0;
          const w = parseFloat(el.style.width) || 0;
          Object.assign(el.style, {
            left: (left / pr.width * 100) + "%",
            top: (top / pr.height * 100) + "%",
            width: (w / pr.width * 100) + "%",
          });
          pageRef.current.appendChild(el);
        });
        setPhaseBoth("settled");
      }
      function doBack() {
        if (phaseRef.current !== "settled") return;
        const pr = pageRect();
        items.forEach((m) => {
          const el = piecesRef.current[m.id];
          // current position as page-relative px (from the % anchored in the page)
          const r = el.getBoundingClientRect();
          el.classList.remove("flipped");
          Object.assign(el.style, { left: (r.left - pr.left) + "px", top: (r.top - pr.top) + "px", width: r.width + "px" });
          layerRef.current.appendChild(el);
        });
        slottedRef.current.fill(null);
        slotChildren().forEach((s) => s.classList.remove("filled"));
        setPhaseBoth("desk"); scatterAll(true); checkComplete();
      }

      // replace photos with the user's own uploads (fills pieces in order)
      async function onUpload(e) {
        const files = Array.from(e.target.files || []);
        if (!files.length) return;
        const blocked = [];
        let idx = 0, done = 0;
        const total = Math.min(files.length, items.length);
        // a gentle "fetching the safety model…" progress that fills as each
        // image is scanned (the first call may also load the model server-side).
        setScan({ active: true, pct: 4, label: "Checking your photos…", blocked: [] });
        let creep = setInterval(() => setScan((s) => (s && s.pct < 90 ? { ...s, pct: s.pct + 2 } : s)), 220);
        for (const f of files) {
          if (idx >= items.length) break;
          // shared pipeline: validate type (.png/.jpg/.jpeg), read, NSFW gate
          setScan((s) => s ? { ...s, label: "Scanning " + (f.name || "photo") + "…" } : s);
          const result = await processUpload(f);
          done++;
          setScan((s) => s ? { ...s, pct: Math.max(s.pct, Math.round((done / total) * 100)) } : s);
          if (!result.ok) {
            if (result.reason === "type") blocked.push((f.name || "a photo") + " (not .png/.jpg)");
            else if (result.reason === "nsfw") blocked.push(f.name || "a photo");
            continue;
          }
          const url = result.dataUrl;
          const m = items[idx];
          uploadsRef.current[m.id] = url;
          window.SozaiPhotos.upsert(m.id, { src: url });
          const img = piecesRef.current[m.id] && piecesRef.current[m.id].querySelector(".dv-front img");
          if (img) img.src = url;
          idx++;
        }
        clearInterval(creep);
        setScan({ active: false, pct: 100, label: "Done", blocked });
        setUploadCount((c) => c + idx);
        if (fileInputRef.current) fileInputRef.current.value = "";
        // clear the overlay shortly after, leaving any block notice visible briefly
        setTimeout(() => setScan((s) => (s && s.blocked && s.blocked.length ? s : null)), blocked.length ? 4000 : 600);
      }

      return (
        <div className="flex flex-col gap-3">
          {/* NSFW scan progress / block notice */}
          {scan && scan.active ? (
            <div className="fixed inset-0 z-[90] flex items-center justify-center bg-background/70 backdrop-blur-sm">
              <div className="w-[min(90%,420px)] rounded-lg border-2 border-primary bg-card p-5 shadow-lg">
                <div className="flex items-center gap-2 font-mono text-xs font-semibold uppercase tracking-wide text-foreground">
                  <Loader2 className="size-4 animate-spin text-primary" /> {scan.label}
                </div>
                <div className="mt-3 h-2.5 w-full overflow-hidden rounded-full bg-accent">
                  <div className="h-full rounded-full bg-primary transition-all duration-200" style={{ width: scan.pct + "%" }} />
                </div>
                <p className="mt-2 text-right font-mono text-[11px] text-muted-foreground">{scan.pct}%</p>
                <p className="mt-1 font-mono text-[10px] leading-snug tracking-wide text-muted-foreground">
                  Photos are checked for inappropriate content before they're added. This also fetches the safety model on first use.
                </p>
              </div>
            </div>
          ) : null}
          {scan && !scan.active && scan.blocked && scan.blocked.length ? (
            <div className="rounded-md border-2 border-[oklch(0.55_0.18_25)]/60 bg-[oklch(0.55_0.18_25)]/10 px-3 py-2">
              <p className="font-mono text-[11px] font-semibold uppercase tracking-wide text-[oklch(0.5_0.2_25)]">
                {scan.blocked.length} photo{scan.blocked.length > 1 ? "s" : ""} blocked by the content filter
              </p>
              <p className="mt-0.5 text-xs text-muted-foreground">{scan.blocked.join(", ")} {scan.blocked.length > 1 ? "were" : "was"} not added.</p>
            </div>
          ) : null}
          {/* toolbar */}
          <div className="flex flex-wrap items-center justify-between gap-3">
            <p className="text-lg text-[oklch(0.42_0.025_210)]" style={{ fontFamily: "'Inkwell','Caveat',cursive" }}>
              {phase === "settled"
                ? "where your day comes together · flip a card to leave a note"
                : "drag each moment onto the page in the order you remember it"}
            </p>
            <div className="flex flex-wrap items-center gap-4">
              {phase !== "settled" ? (
                <>
                  <input ref={fileInputRef} type="file" accept={ACCEPT_ATTR} multiple onChange={onUpload} className="hidden" id="dv-upload" />
                  <button type="button" onClick={() => fileInputRef.current && fileInputRef.current.click()} className="dv-link inline-flex items-center gap-1.5"><ImagePlus className="size-4" /> use my photos</button>
                  <button type="button" onClick={doShuffle} className="dv-link inline-flex items-center gap-1.5"><Shuffle className="size-4" /> shuffle</button>
                  <button type="button" onClick={doOrganize} className="dv-link inline-flex items-center gap-1.5"><LayoutGrid className="size-4" /> auto-layout</button>
                  <button type="button" onClick={doDevelop} disabled={!canDevelop} className="dv-go">done developing</button>
                </>
              ) : (
                <>
                  <button type="button" onClick={doBack} className="dv-link inline-flex items-center gap-1.5"><RotateCcw className="size-4" /> back to the pile</button>
                  <button type="button" onClick={() => window.print()} className="dv-link inline-flex items-center gap-1.5"><Printer className="size-4" /> print</button>
                </>
              )}
            </div>
          </div>
          {uploadCount ? <p className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">{uploadCount} of your own photo{uploadCount === 1 ? "" : "s"} added</p> : null}

          {/* the scroll page - fixed aspect ratio (like a scrapbook page) so
              its height always tracks its width; this keeps the two rows of
              cards filling the page instead of leaving a huge empty area. */}
          <div ref={stageRef} className="relative mx-auto w-full overflow-hidden rounded-lg"
            style={{ aspectRatio: "3 / 2", maxHeight: "78vh" }}>
            <div ref={pageRef} className={cn("dv-paper absolute inset-0 overflow-hidden rounded-lg border-2 border-primary/30", phase === "settled" ? "dv-settled" : "dv-desk")}>
              <header className="dv-plate absolute left-[2.6%] top-[3.2%] z-[2]">
                <div className="font-serif text-[11px] uppercase tracking-[0.24em] text-muted-foreground">{tripMeta.location} · A Day in Frames</div>
                <h2 className="font-serif text-lg italic text-foreground">{tripMeta.date}</h2>
              </header>
              <div ref={slotsRef} />
              <div ref={dimRef} className="dv-dim" />
            </div>
            {/* the loose pieces float in a layer that exactly covers the page,
                so positions are page-relative and cards can't spill off-screen */}
            <div ref={layerRef} className="pointer-events-none absolute inset-0 z-[40]" />
          </div>
          <p className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">Tip: drag a card onto a frame; click a placed card (once developed) to flip it and write a note. “Use my photos” swaps in your own images.</p>
        </div>
      );
    }

    function MapOfMyTime({ onBack, onOpenSettings, onOpenPets, variant = "scrapbook", onChangeVariant }) {
      const [selectedId, setSelectedIdRaw] = useState(null);
      useEffect(() => Collab.on("selection", (m) => setSelectedIdRaw(m.value)), []);
      const setSelectedId = (v) => { setSelectedIdRaw(v); Collab.send("selection", { value: v }); };
      const current = MAP_VARIANTS.find((v) => v.id === variant) || MAP_VARIANTS[0];
      const storePhotos = usePhotos();
      // The store starts EMPTY, so any photo in it was loaded by the user -
      // whether uploaded ("u" ids) or from the sample album ("p" ids). Only fall
      // back to the curated demo moments when the store is genuinely empty, so
      // developed watercolours always carry through to the map.
      const hasUserPhotos = storePhotos.some((p) => p && p.src);
      const liveMoments = hasUserPhotos ? storePhotos.map(storeToMoment) : moments;
      return (
        <section className="flex w-full max-w-7xl flex-col overflow-hidden rounded-xl border-2 border-primary bg-card shadow-lg sm:flex-row">
          <SideRail active="map" onNavigate={(id) => id === "camera" && onBack && onBack()} onOpenSettings={onOpenSettings} onOpenPets={onOpenPets} />
          <div className="flex min-w-0 flex-1 flex-col">
            <header className="flex items-center justify-between gap-4 border-b-2 border-dashed border-primary/50 px-5 py-4 sm:px-7">
              <div className="flex items-center gap-2.5"><Camera className="size-5 text-primary" /><h1 className="font-mono text-base font-semibold uppercase tracking-widest text-foreground">Your Journey</h1></div>
              <div className="flex items-center gap-2">
                <HeaderButton icon={Download} label="Export" onClick={() => {
                  const r = exportScrapbook({ title: (tripMeta && tripMeta.location ? tripMeta.location + " - " : "") + "My Sozai Scrapbook" });
                  if (!r.ok && r.reason === "empty") window.alert("Add at least one photo before exporting.");
                  else if (!r.ok && r.reason === "popup-blocked") window.alert("Couldn't open the export window - allow pop-ups and try again.");
                }} />
                <button type="button" onClick={() => onOpenSettings && onOpenSettings()} aria-label="Settings" className="flex size-9 items-center justify-center rounded-md border-2 border-primary/70 text-primary transition-colors hover:bg-accent"><Settings className="size-4" /></button>
              </div>
            </header>
            <div className="flex flex-col gap-4 px-5 py-5 sm:px-7">
              {/* variant switcher + location */}
              <div className="flex flex-wrap items-center justify-between gap-3">
                <div>
                  <h2 className="font-serif text-lg italic text-foreground">{tripMeta.location}</h2>
                  <p className="mt-0.5 font-mono text-[10px] uppercase tracking-widest text-muted-foreground">{tripMeta.period}</p>
                </div>
                <MapVariantSwitcher value={variant} onChange={onChangeVariant} />
              </div>

              {current.kind === "cesium" ? (
                <CesiumMap cityName={tripMeta.location} />
              ) : current.kind === "map" ? (
                <WatercolorMap tileKey={current.tile} cityName={tripMeta.location} />
              ) : current.kind === "develop" ? (
                <DevelopScroll moments={liveMoments} />
              ) : variant === "scrapbook" ? (
                <>
                  <div className="relative w-full overflow-hidden rounded-lg border-2 border-primary/40 bg-[oklch(0.95_0.018_85)]">
                    <img src="/assets/photos/scrapbook-map.png" alt="" aria-hidden="true" className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-60 mix-blend-multiply" />
                    <RouteLines moments={liveMoments} />
                    <div className="relative h-[460px] w-full sm:h-[520px]">
                      {liveMoments.map((m, i) => <MomentCard key={m.id} moment={m} rotate={rotations[i % rotations.length]} selected={selectedId === m.id} onSelect={setSelectedId} />)}
                    </div>
                  </div>
                  <div className="grid gap-6 lg:grid-cols-[1fr_280px]">
                    <Timeline date={tripMeta.date} moments={liveMoments} selectedId={selectedId} onSelect={setSelectedId} />
                    <Legend />
                  </div>
                </>
              ) : variant === "grid" ? (
                <MapGridView selectedId={selectedId} onSelect={setSelectedId} moments={liveMoments} />
              ) : (
                <MapTimelineView selectedId={selectedId} onSelect={setSelectedId} moments={liveMoments} />
              )}
            </div>
          </div>
        </section>
      );
    }

    // ----------------------------------------------------------------- //
    // Settings panel: accessibility options + easter-egg toggle.
    // ----------------------------------------------------------------- //
    function Toggle({ id, label, description, checked, onChange }) {
      return (
        <div className="flex items-start justify-between gap-4 rounded-md border-2 border-primary/40 bg-card px-3.5 py-3">
          <label htmlFor={id} className="min-w-0 cursor-pointer">
            <span className="block font-mono text-xs font-semibold uppercase tracking-wide text-foreground">{label}</span>
            {description ? <span className="mt-0.5 block text-xs leading-snug text-muted-foreground">{description}</span> : null}
          </label>
          <button
            id={id}
            type="button"
            role="switch"
            aria-checked={checked}
            onClick={() => onChange(!checked)}
            className={cn(
              "relative mt-0.5 inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 transition-colors",
              checked ? "border-primary bg-primary" : "border-primary/50 bg-card"
            )}>
            <span className={cn("inline-block size-4 rounded-full bg-card transition-transform", checked ? "translate-x-5 bg-primary-foreground" : "translate-x-0.5 bg-primary/70")} />
          </button>
        </div>
      );
    }

    function SettingsPanel({ open, onClose, onOpenPets }) {
      const { settings, update } = useSettings();
      const [promptDraft, setPromptDraft] = useState(settings.captionPrompt || "");
      const [titleDraft, setTitleDraft] = useState(settings.titlePrompt || "");
      useEffect(() => { if (open) setPromptDraft(settings.captionPrompt || ""); }, [open]); // eslint-disable-line
      useEffect(() => { if (open) setTitleDraft(settings.titlePrompt || ""); }, [open]); // eslint-disable-line
      if (!open) return null;
      const set = (k) => (v) => update({ [k]: v });
      const PROMPT_PRESETS = [
        { label: "Warm & personal", value: "Write a short, warm one-sentence caption for a personal photo album." },
        { label: "Witty one-liner", value: "Write a witty, playful one-line caption for this photo. Keep it under 12 words." },
        { label: "Poetic", value: "Write a single evocative, poetic line describing the mood of this photo." },
        { label: "Just the facts", value: "Describe what is happening in this photo in one plain, factual sentence." },
      ];
      const TITLE_PRESETS = [
        { label: "Evocative", value: "Write a very short, evocative title (2-5 words) for this photo. Reply with only the title." },
        { label: "One word", value: "Give this photo a single striking one-word title. Reply with only that word." },
        { label: "Place & moment", value: "Write a short title naming the place and the moment, like 'Morning in Ottawa'. Under 5 words." },
        { label: "Playful", value: "Write a short, playful title for this photo. Under 5 words." },
      ];
      return (
        <div className="fixed inset-0 z-[55] flex items-center justify-center bg-black/40 p-4" role="dialog" aria-modal="true" aria-label="Settings">
          <div className="flex max-h-[85vh] w-full max-w-md flex-col overflow-hidden rounded-xl border-2 border-primary bg-card shadow-lg">
            <div className="flex items-center justify-between border-b-2 border-dashed border-primary/50 px-5 py-3.5">
              <span className="flex items-center gap-2 font-mono text-sm font-semibold uppercase tracking-widest text-foreground">
                <Settings className="size-4 text-primary" /> Settings
              </span>
              <button type="button" onClick={onClose} aria-label="Close settings" className="text-primary hover:scale-110"><X className="size-4" /></button>
            </div>
            <div className="flex-1 space-y-6 overflow-y-auto px-5 py-5">
              <section className="space-y-3">
                <h3 className="font-mono text-xs font-bold uppercase tracking-wide text-primary">Accessibility</h3>
                <Toggle id="set-large-text" label="Larger text" description="Increase the overall text size for easier reading." checked={settings.largeText} onChange={set("largeText")} />
                <Toggle id="set-high-contrast" label="High contrast" description="Boost contrast between text and backgrounds." checked={settings.highContrast} onChange={set("highContrast")} />
                <Toggle id="set-dyslexia" label="Dyslexia-friendly font" description="Use a more legible, evenly-spaced typeface." checked={settings.dyslexiaFont} onChange={set("dyslexiaFont")} />
                <Toggle id="set-underline" label="Underline links" description="Always underline links, not just on hover." checked={settings.underlineLinks} onChange={set("underlineLinks")} />
                <Toggle id="set-reduce-motion" label="Reduce motion" description="Minimize animations and transitions." checked={settings.reduceMotion} onChange={set("reduceMotion")} />
                <Toggle id="set-dark" label="Dark mode" description="Switch to a darker color theme." checked={settings.darkMode} onChange={set("darkMode")} />
              </section>

              <section className="space-y-3">
                <h3 className="font-mono text-xs font-bold uppercase tracking-wide text-primary">Notifications</h3>
                <Toggle id="set-chat-sound" label="Chat sound" description="Play a chime when a new chat message arrives." checked={settings.chatSound} onChange={set("chatSound")} />
                <Toggle id="set-chat-popup" label="Chat pop-ups" description="Show a pop-up when a message arrives while chat is closed." checked={settings.chatPopup} onChange={set("chatPopup")} />
                <div className="rounded-md border-2 border-primary/40 bg-card px-3.5 py-3">
                  <label htmlFor="chat-sound-theme" className="block font-mono text-xs font-semibold uppercase tracking-wide text-foreground">Sound theme</label>
                  <div className="mt-2 flex items-center gap-2">
                    <select id="chat-sound-theme" value={settings.chatSoundTheme} onChange={(e) => update({ chatSoundTheme: e.target.value })}
                      disabled={!settings.chatSound}
                      className="flex-1 rounded-md border-2 border-primary/60 bg-card px-2.5 py-1.5 text-sm text-foreground outline-none focus:border-primary disabled:opacity-50">
                      {(window.SozaiChime ? window.SozaiChime.themes() : ["chime"]).map((th) => (
                        <option key={th} value={th}>{th.charAt(0).toUpperCase() + th.slice(1)}</option>
                      ))}
                    </select>
                    <button type="button" disabled={!settings.chatSound}
                      onClick={() => window.SozaiChime && window.SozaiChime.play("message", { enabled: true, theme: settings.chatSoundTheme, volume: settings.chatSoundVolume })}
                      className="rounded-md border-2 border-primary px-3 py-1.5 font-mono text-[10px] font-semibold uppercase tracking-wide text-primary transition-colors hover:bg-accent disabled:opacity-50">Test</button>
                  </div>
                  <label htmlFor="chat-sound-vol" className="mt-3 block font-mono text-[10px] uppercase tracking-wide text-muted-foreground">Volume</label>
                  <input id="chat-sound-vol" type="range" min="0" max="1" step="0.05" value={settings.chatSoundVolume}
                    disabled={!settings.chatSound}
                    onChange={(e) => update({ chatSoundVolume: parseFloat(e.target.value) })}
                    className="mt-1 w-full accent-[var(--primary)] disabled:opacity-50" />
                </div>
              </section>

              <section className="space-y-3">
                <h3 className="font-mono text-xs font-bold uppercase tracking-wide text-primary">AI text</h3>
                <div className="rounded-md border-2 border-primary/40 bg-card px-3.5 py-3">
                  <label htmlFor="caption-prompt" className="block font-mono text-xs font-semibold uppercase tracking-wide text-foreground">Custom caption prompt</label>
                  <p className="mt-0.5 text-xs leading-snug text-muted-foreground">Tell the caption model how you want it to write. Leave blank to use the default.</p>
                  <textarea id="caption-prompt" value={promptDraft} onChange={(e) => setPromptDraft(e.target.value)} rows={3}
                    placeholder="e.g. Write a witty one-liner under 10 words…"
                    className="mt-2 w-full resize-none rounded-md border-2 border-primary/60 bg-card px-3 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground" />
                  <div className="mt-2 flex flex-wrap gap-1.5">
                    {PROMPT_PRESETS.map((p) => (
                      <button key={p.label} type="button" onClick={() => setPromptDraft(p.value)}
                        className="rounded-full border-2 border-primary/50 px-2.5 py-1 font-mono text-[10px] uppercase tracking-wide text-primary transition-colors hover:bg-accent">{p.label}</button>
                    ))}
                  </div>
                  <div className="mt-3 flex items-center gap-2">
                    <button type="button" onClick={() => update({ captionPrompt: promptDraft.trim() })}
                      className="rounded-md border-2 border-primary bg-primary px-3 py-1.5 font-mono text-xs font-semibold uppercase tracking-wide text-primary-foreground transition-colors hover:bg-primary/90">Save prompt</button>
                    <button type="button" onClick={() => { setPromptDraft(""); update({ captionPrompt: "" }); }}
                      className="rounded-md border-2 border-primary/50 px-3 py-1.5 font-mono text-xs uppercase tracking-wide text-primary transition-colors hover:bg-accent">Reset</button>
                    {settings.captionPrompt ? <span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">custom prompt active</span> : null}
                  </div>
                </div>

                <div className="rounded-md border-2 border-primary/40 bg-card px-3.5 py-3">
                  <label htmlFor="title-prompt-settings" className="block font-mono text-xs font-semibold uppercase tracking-wide text-foreground">Custom title prompt</label>
                  <p className="mt-0.5 text-xs leading-snug text-muted-foreground">Separate from the caption prompt - steers how titles are auto-generated. Leave blank for the default.</p>
                  <textarea id="title-prompt-settings" value={titleDraft} onChange={(e) => setTitleDraft(e.target.value)} rows={2}
                    placeholder="e.g. A single striking one-word title…"
                    className="mt-2 w-full resize-none rounded-md border-2 border-primary/60 bg-card px-3 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground" />
                  <div className="mt-2 flex flex-wrap gap-1.5">
                    {TITLE_PRESETS.map((p) => (
                      <button key={p.label} type="button" onClick={() => setTitleDraft(p.value)}
                        className="rounded-full border-2 border-primary/50 px-2.5 py-1 font-mono text-[10px] uppercase tracking-wide text-primary transition-colors hover:bg-accent">{p.label}</button>
                    ))}
                  </div>
                  <div className="mt-3 flex items-center gap-2">
                    <button type="button" onClick={() => update({ titlePrompt: titleDraft.trim() })}
                      className="rounded-md border-2 border-primary bg-primary px-3 py-1.5 font-mono text-xs font-semibold uppercase tracking-wide text-primary-foreground transition-colors hover:bg-primary/90">Save prompt</button>
                    <button type="button" onClick={() => { setTitleDraft(""); update({ titlePrompt: "" }); }}
                      className="rounded-md border-2 border-primary/50 px-3 py-1.5 font-mono text-xs uppercase tracking-wide text-primary transition-colors hover:bg-accent">Reset</button>
                    {settings.titlePrompt ? <span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">custom prompt active</span> : null}
                  </div>
                </div>
              </section>

              <section className="space-y-3">
                <h3 className="font-mono text-xs font-bold uppercase tracking-wide text-primary">Easter eggs</h3>
                <button type="button" onClick={() => { onClose && onClose(); onOpenPets && onOpenPets(); }}
                  className="flex w-full items-center justify-between gap-3 rounded-md border-2 border-primary/50 bg-accent/40 px-3.5 py-3 text-left transition-colors hover:bg-accent">
                  <span className="flex items-center gap-2.5">
                    <PawPrint className="size-5 text-primary" />
                    <span>
                      <span className="block font-mono text-xs font-semibold uppercase tracking-wide text-foreground">The Menagerie</span>
                      <span className="block text-xs text-muted-foreground">Pick a pixel pet to roam your screen.</span>
                    </span>
                  </span>
                  <ChevronRight className="size-4 text-primary" />
                </button>
              </section>
            </div>
            <div className="border-t-2 border-dashed border-primary/40 px-5 py-3">
              <button type="button" onClick={onClose} className="w-full rounded-md border-2 border-primary bg-primary px-4 py-2.5 font-mono text-sm font-semibold uppercase tracking-wide text-primary-foreground transition-colors hover:bg-primary/90">Done</button>
            </div>
          </div>
        </div>
      );
    }

    // ----------------------------------------------------------------- //
    // The Menagerie: a dedicated, playful easter-egg gallery where users
    // pick one of the 76 oneko-style pets to roam their screen.
    // ----------------------------------------------------------------- //
    const PET_FALLBACK_ANIMALS = ["ace", "air", "alien", "black", "black2", "blue", "blue-marine", "blue-tabby", "boobookitty", "brown-bsd-daemon", "brown-dog", "calico", "calico-tabby", "captain-goodnight", "caz", "coke-bottle", "colourful", "dave", "deedee", "dog", "doom", "earth", "face", "fancy", "ff3mog", "fire", "ghetto", "ghost", "gray", "green-ghost", "holiday", "jess", "kina", "kuramecha", "lucky", "lucy", "lucy-dog", "marmalade", "mermaid", "metroid", "mike", "mini", "moka", "multi", "nekocool", "neon", "orange", "pac-man", "peach", "penguin", "penguin-2", "pink", "pink-nose-neko", "rainbow", "red-bsd-daemon", "robot", "rocket", "rose", "royal", "silver", "silversky", "skunk", "socks", "sonic", "spirit", "spooky", "tabby", "tentacle", "tie-fighter", "turtle", "usa", "white", "valentine", "water", "worms", "zelda3"];

    function prettyAnimal(name) {
      return (name || "").split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
    }

    // A small looping sprite preview for the gallery tiles. Walks the run
    // frames; falls back to the classic embedded cat if sprites don't load.
    function PetPreview({ animal, size = 40, playing = true }) {
      const [frameIdx, setFrameIdx] = useState(0);
      const [failed, setFailed] = useState(false);
      const cycle = ["srun1", "srun2", "still", "erun1", "erun2", "still"];
      useEffect(() => {
        if (!playing) { setFrameIdx(0); return; }
        const t = setInterval(() => setFrameIdx((i) => (i + 1) % cycle.length), 220);
        return () => clearInterval(t);
      }, [playing]);
      const name = playing ? cycle[frameIdx] : "still";
      if (failed) {
        const map = { still: 25, srun1: 9, srun2: 10, erun1: 5, erun2: 6 };
        return <img alt="" src={NEKO_FRAMES[map[name] || 25]} width={size} height={size} style={{ imageRendering: "pixelated" }} />;
      }
      return (
        <img alt="" width={size} height={size} style={{ imageRendering: "pixelated" }}
          src={petUrl(animal, name + ".png")}
          onError={() => setFailed(true)} />
      );
    }

    function PetsScreen({ onBack }) {
      const { settings, update } = useSettings();
      const [animals, setAnimals] = useState(PET_FALLBACK_ANIMALS);
      const [query, setQuery] = useState("");
      const [hovered, setHovered] = useState(null);

      useEffect(() => {
        let alive = true;
        fetch("/api/sprites").then((r) => (r.ok ? r.json() : null)).then((d) => {
          if (alive && d && Array.isArray(d.animals) && d.animals.length) setAnimals(d.animals);
        }).catch(() => {});
        return () => { alive = false; };
      }, []);

      const filtered = animals.filter((a) => a.toLowerCase().includes(query.trim().toLowerCase()));
      const selected = settings.petAnimal;
      const enabled = settings.petEnabled;

      function choose(animal) {
        update({ petAnimal: animal, petEnabled: true });
      }

      return (
        <section className="w-full max-w-6xl overflow-hidden rounded-xl border-2 border-primary bg-card shadow-lg">
          {/* eye-catching hero header */}
          <header className="relative overflow-hidden border-b-2 border-dashed border-primary/50 px-5 py-6 sm:px-7"
            style={{ background: "linear-gradient(120deg, var(--accent), transparent 70%)" }}>
            <div className="pointer-events-none absolute inset-0 opacity-30" aria-hidden="true"
              style={{ backgroundImage: "radial-gradient(circle at 20% 30%, var(--primary) 0, transparent 9%), radial-gradient(circle at 70% 60%, var(--primary) 0, transparent 7%), radial-gradient(circle at 85% 20%, var(--primary) 0, transparent 6%)", backgroundSize: "auto" }} />
            <div className="relative flex flex-wrap items-center justify-between gap-3">
              <div className="flex items-center gap-3">
                <span className="flex size-11 items-center justify-center rounded-xl border-2 border-primary bg-card"><PawPrint className="size-6 text-primary" /></span>
                <div>
                  <h1 className="flex items-center gap-2 font-mono text-xl font-bold uppercase tracking-widest text-foreground">The Menagerie <Sparkles className="size-4 text-primary" /></h1>
                  <p className="mt-0.5 text-sm text-muted-foreground">Adopt a pixel companion - it follows your cursor across every screen.</p>
                </div>
              </div>
              <button type="button" onClick={onBack}
                className="flex items-center gap-1.5 rounded-md border-2 border-primary/70 px-3 py-1.5 font-mono text-xs uppercase tracking-wide text-foreground transition-colors hover:bg-accent">
                <ChevronLeft className="size-3.5 text-primary" /> Back
              </button>
            </div>
          </header>

          <div className="px-5 py-6 sm:px-7">
            {/* current pet + master toggle */}
            <div className="mb-5 flex flex-wrap items-center justify-between gap-4 rounded-lg border-2 border-primary/40 bg-accent/30 px-4 py-3">
              <div className="flex items-center gap-3">
                <span className="flex size-14 items-center justify-center rounded-lg border-2 border-primary/60 bg-card">
                  <PetPreview animal={selected} size={44} playing />
                </span>
                <div>
                  <span className="block font-mono text-xs uppercase tracking-wide text-muted-foreground">Current pet</span>
                  <span className="block font-mono text-base font-bold uppercase tracking-wide text-foreground">{prettyAnimal(selected)}</span>
                </div>
              </div>
              <button type="button" onClick={() => update({ petEnabled: !enabled })}
                className={cn("flex items-center gap-2 rounded-md border-2 px-4 py-2 font-mono text-xs font-semibold uppercase tracking-wide transition-colors",
                  enabled ? "border-primary bg-primary text-primary-foreground hover:bg-primary/90" : "border-primary/60 text-primary hover:bg-accent")}>
                <Cat className="size-4" /> {enabled ? "Pet is roaming - turn off" : "Let it roam"}
              </button>
            </div>

            {/* search */}
            <div className="mb-4 flex items-center gap-2 rounded-md border-2 border-primary/60 bg-card px-3 py-2">
              <Search className="size-4 text-primary" />
              <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search animals…"
                className="min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground" />
              <span className="font-mono text-[11px] uppercase tracking-wide text-muted-foreground">{filtered.length} pets</span>
            </div>

            {/* gallery grid */}
            <ul className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-6">
              {filtered.map((a) => {
                const isSel = a === selected;
                return (
                  <li key={a}>
                    <button type="button" onClick={() => choose(a)}
                      onMouseEnter={() => setHovered(a)} onMouseLeave={() => setHovered(null)}
                      aria-pressed={isSel}
                      className={cn("group flex w-full flex-col items-center gap-2 rounded-lg border-2 px-2 py-3 transition-all hover:-translate-y-0.5",
                        isSel ? "border-primary bg-accent shadow-md" : "border-primary/30 bg-card hover:border-primary/60")}>
                      <span className="flex size-12 items-center justify-center">
                        <PetPreview animal={a} size={40} playing={hovered === a || isSel} />
                      </span>
                      <span className="line-clamp-1 text-center font-mono text-[10px] uppercase tracking-wide text-foreground">{prettyAnimal(a)}</span>
                      {isSel ? <span className="flex items-center gap-1 font-mono text-[9px] uppercase tracking-wide text-primary"><Check className="size-3" />Chosen</span> : null}
                    </button>
                  </li>
                );
              })}
            </ul>
            {filtered.length === 0 ? <p className="mt-6 text-center text-sm text-muted-foreground">No animals match “{query}”.</p> : null}
          </div>
        </section>
      );
    }


    // ----------------------------------------------------------------- //
    // Darkroom develop sequence (ported from darkroom_preview.html).
    // Shown after "Add to Album" and before the Map of My Time.
    // ----------------------------------------------------------------- //
    // honors both the OS setting and the in-app "reduce motion" preference
    function drReduced() {
      try {
        if (window.__sozaiReduceMotion) return true;
        return !!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
      } catch (e) { return false; }
    }

    // baths kept from the zip (colors + labels), seen from above
    const DR_BATHS = [
      { id: "developer", label: "Developer", color: "oklch(0.38 0.11 52)",  edge: "oklch(0.24 0.08 50)" },
      { id: "stop",      label: "Stop Bath", color: "oklch(0.72 0.16 82)",  edge: "oklch(0.54 0.13 80)" },
      { id: "fixer",     label: "Fixer",     color: "oklch(0.44 0.05 225)", edge: "oklch(0.30 0.04 225)" },
      { id: "wash",      label: "Wash",      color: "oklch(0.54 0.06 212)", edge: "oklch(0.40 0.04 212)" },
    ];
    // top-down layout - columns are now driven by flex, not % coordinates

    // prints stay latent in the baths; full colour is the shake payoff on the line
    function drBathFilter(p) {
      const blur = (1 - Math.min(1, p * 2.4)) * 4;
      const gray = (1 - p) * 100;
      const bright = 0.5 + p * 0.55;
      const sep = (1 - p) * 32;
      return "blur(" + blur.toFixed(2) + "px) grayscale(" + gray.toFixed(0) + "%) brightness(" + bright.toFixed(2) + ") sepia(" + sep.toFixed(0) + "%)";
    }

    function drLock() {
      let busy = false; const q = [];
      return {
        acquire() { return new Promise((res) => { if (!busy) { busy = true; res(); } else q.push(res); }); },
        release() { const n = q.shift(); if (n) n(); else busy = false; },
      };
    }
    const drSleep = (ms) => new Promise((r) => setTimeout(r, drReduced() ? Math.min(ms, 120) : ms));

    // ---- synthesized water SFX (Web Audio) ------------------------------ //
    function useWaterSfx(muted) {
      const ref = useRef(null);
      const mutedRef = useRef(muted);
      const bubBufRef = useRef(null);   // decoded bubbles MP3 buffer

      function engine() {
        let a = ref.current;
        if (!a) {
          const AC = window.AudioContext || window.webkitAudioContext;
          if (!AC) return null;
          const ac = new AC();
          const master = ac.createGain();
          master.gain.value = mutedRef.current ? 0 : 0.25;
          master.connect(ac.destination);
          a = ref.current = { ac, master };
          // kick off buffer load; ready well before first dip
          if (!bubBufRef.current) {
            fetch("/assets/liecio-water-bubbles-257594.mp3")
              .then((r) => r.arrayBuffer())
              .then((ab) => ac.decodeAudioData(ab))
              .then((buf) => { bubBufRef.current = buf; })
              .catch(() => {});
          }
        }
        if (a.ac.state === "suspended") a.ac.resume();
        return a;
      }
      useEffect(() => {
        mutedRef.current = muted;
        if (ref.current) ref.current.master.gain.value = muted ? 0 : 0.25;
      }, [muted]);

      const dip = useCallback(() => {            // photo hits the bath
        if (mutedRef.current) return;
        const a = engine(); if (!a) return;
        const ac = a.ac, t = ac.currentTime;
        if (bubBufRef.current) {
          // play ~900 ms of the bubbles file, faded at end
          const src = ac.createBufferSource();
          src.buffer = bubBufRef.current;
          const g = ac.createGain();
          g.gain.setValueAtTime(0.6, t);
          g.gain.setValueAtTime(0.6, t + 0.65);
          g.gain.linearRampToValueAtTime(0, t + 0.92);
          src.connect(g); g.connect(a.master);
          src.start(t); src.stop(t + 0.93);
        } else {
          // synthetic fallback while file loads
          const n = Math.max(1, (ac.sampleRate * 0.45) | 0);
          const b = ac.createBuffer(1, n, ac.sampleRate);
          const d = b.getChannelData(0);
          for (let i = 0; i < n; i++) d[i] = Math.random() * 2 - 1;
          const s = ac.createBufferSource(); s.buffer = b;
          const bp = ac.createBiquadFilter(); bp.type = "bandpass";
          bp.frequency.setValueAtTime(1900, t);
          bp.frequency.exponentialRampToValueAtTime(320, t + 0.4); bp.Q.value = 0.7;
          const g = ac.createGain();
          g.gain.setValueAtTime(0.0001, t);
          g.gain.exponentialRampToValueAtTime(0.18, t + 0.02);
          g.gain.exponentialRampToValueAtTime(0.001, t + 0.45);
          s.connect(bp); bp.connect(g); g.connect(a.master); s.start(t); s.stop(t + 0.46);
        }
        // low thud on entry (kept regardless of buffer)
        const o = ac.createOscillator(); o.type = "sine";
        o.frequency.setValueAtTime(200, t);
        o.frequency.exponentialRampToValueAtTime(70, t + 0.18);
        const og = ac.createGain();
        og.gain.setValueAtTime(0.12, t);
        og.gain.exponentialRampToValueAtTime(0.001, t + 0.22);
        o.connect(og); og.connect(a.master); o.start(t); o.stop(t + 0.23);
      }, []);

      const drip = useCallback(() => {           // drips lifting out
        if (mutedRef.current) return;
        const a = engine(); if (!a) return;
        const ac = a.ac, base = ac.currentTime, n = 3 + ((Math.random() * 3) | 0);
        for (let i = 0; i < n; i++) {
          const t = base + i * (0.06 + Math.random() * 0.09);
          const o = ac.createOscillator(); o.type = "sine";
          const f = 850 + Math.random() * 1300;
          o.frequency.setValueAtTime(f, t);
          o.frequency.exponentialRampToValueAtTime(f * 0.4, t + 0.1);
          const g = ac.createGain();
          g.gain.setValueAtTime(0.0001, t);
          g.gain.exponentialRampToValueAtTime(0.09, t + 0.005);
          g.gain.exponentialRampToValueAtTime(0.0006, t + 0.13);
          o.connect(g); g.connect(a.master); o.start(t); o.stop(t + 0.15);
        }
      }, []);
      const prime = useCallback(() => { engine(); }, []);
      return { dip, drip, prime };
    }

    // ---- WebGL ambient water ripple (liquid shimmer, no image texture) -- //
    // Methodology: converts the provided TypeScript WaterRippleImage to plain
    // JS (no types, no imports). Strips image-texture sampling from the GLSL
    // fragment shader - we only need the animated simplex-noise surface ripple
    // rendered as an opaque amber liquid. One WebGL context fills the bench
    // canvas; all tray/print divs layer on top via CSS z-index stacking.
    // ResizeObserver keeps the canvas pixel-sharp as the bench resizes.
    function WaterRippleCanvas({ baseColor = [0.14, 0.09, 0.03], scale = 5, illumination = 0.18, className = "", rippleStyle = {} }) {
      const canvasRef = useRef(null);
      useEffect(() => {
        const canvas = canvasRef.current;
        if (!canvas) return;
        const gl = canvas.getContext("webgl", { alpha: true, antialias: true }) ||
                   canvas.getContext("experimental-webgl");
        if (!gl) return;

        const VERT = [
          "precision mediump float;",
          "attribute vec2 a_pos; varying vec2 vUv;",
          "void main(){vUv=.5*(a_pos+1.);gl_Position=vec4(a_pos,0.,1.);}"
        ].join("\n");

        const FRAG = [
          // highp (not mediump): the simplex-noise perm() math reaches ~2.8M,
          // which overflows mediump on GPUs that honour it literally (many
          // Mac/Intel/mobile) and renders as flashing green/orange triangles.
          "precision highp float;",
          "varying vec2 vUv;",
          "uniform float u_time,u_ratio,u_scale,u_illum;",
          "uniform vec3 u_color;",
          "vec3 p289(vec3 x){return x-floor(x*(1./289.))*289.;}",
          "vec2 p289v(vec2 x){return x-floor(x*(1./289.))*289.;}",
          "vec3 perm(vec3 x){return p289(((x*34.)+1.)*x);}",
          "float snoise(vec2 v){",
          "  const vec4 C=vec4(0.211324865405187,0.366025403784439,-0.577350269189626,0.024390243902439);",
          "  vec2 i=floor(v+dot(v,C.yy));",
          "  vec2 x0=v-i+dot(i,C.xx);",
          "  vec2 i1=(x0.x>x0.y)?vec2(1.,0.):vec2(0.,1.);",
          "  vec4 x12=x0.xyxy+C.xxzz;x12.xy-=i1;",
          "  i=p289v(i);",
          "  vec3 p=perm(perm(i.y+vec3(0.,i1.y,1.))+i.x+vec3(0.,i1.x,1.));",
          "  vec3 m=max(.5-vec3(dot(x0,x0),dot(x12.xy,x12.xy),dot(x12.zw,x12.zw)),0.);",
          "  m=m*m;m=m*m;",
          "  vec3 x2=2.*fract(p*C.www)-1.;",
          "  vec3 h=abs(x2)-.5;",
          "  vec3 a0=x2-floor(x2+.5);",
          "  m*=1.79284291400159-0.85373472095314*(a0*a0+h*h);",
          "  vec3 g;g.x=a0.x*x0.x+h.x*x0.y;g.yz=a0.yz*x12.xz+h.yz*x12.yw;",
          "  return 130.*dot(m,g);}",
          "mat2 rot2(float r){return mat2(cos(r),sin(r),-sin(r),cos(r));}",
          "float sn(vec2 uv,float t,float sc){",
          "  vec2 n=vec2(.1),N=vec2(.1);mat2 m=rot2(.5);",
          "  for(int j=0;j<10;j++){uv*=m;n*=m;",
          "    vec2 q=uv*sc+float(j)+n+(.5+.5*float(j))*(mod(float(j),2.)-1.)*t;",
          "    n+=sin(q);N+=cos(q)/sc;sc*=1.2;}",
          "  return N.x+N.y+.1;}",
          "void main(){",
          "  vec2 uv=vec2(vUv.x*u_ratio,1.-vUv.y);",
          "  float t=.002*u_time;",
          "  float outer=snoise((.3+.1*sin(t))*uv+vec2(0.,.2*t));",
          "  float surf=sn(2.*uv+outer*.2,t,u_scale);",
          "  surf*=pow(uv.y*.55+.45,.4);",
          "  surf=pow(max(surf,0.),2.);",
          "  vec3 col=u_color+u_illum*vec3(.88,.70,.32)*surf;",
          "  gl_FragColor=vec4(col,.92);}"
        ].join("\n");

        function mkSh(type, src) {
          const sh = gl.createShader(type);
          gl.shaderSource(sh, src);
          gl.compileShader(sh);
          return sh;
        }
        const prog = gl.createProgram();
        gl.attachShader(prog, mkSh(gl.VERTEX_SHADER, VERT));
        gl.attachShader(prog, mkSh(gl.FRAGMENT_SHADER, FRAG));
        gl.linkProgram(prog);
        if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
          console.warn("WaterRippleCanvas:", gl.getProgramInfoLog(prog)); return;
        }
        gl.useProgram(prog);

        const vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);
        const loc = gl.getAttribLocation(prog, "a_pos");
        gl.enableVertexAttribArray(loc);
        gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);

        const uT = gl.getUniformLocation(prog, "u_time");
        const uR = gl.getUniformLocation(prog, "u_ratio");
        const uS = gl.getUniformLocation(prog, "u_scale");
        const uI = gl.getUniformLocation(prog, "u_illum");
        const uC = gl.getUniformLocation(prog, "u_color");

        gl.uniform1f(uS, scale);
        gl.uniform1f(uI, illumination);
        gl.uniform3f(uC, baseColor[0], baseColor[1], baseColor[2]);
        gl.enable(gl.BLEND);
        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

        function resize() {
          const dpr = Math.min(devicePixelRatio || 1, 2);
          canvas.width = Math.floor(canvas.offsetWidth * dpr);
          canvas.height = Math.floor(canvas.offsetHeight * dpr);
          gl.viewport(0, 0, canvas.width, canvas.height);
          if (canvas.height > 0) gl.uniform1f(uR, canvas.width / canvas.height);
        }
        resize();
        const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(resize) : null;
        if (ro) ro.observe(canvas);

        let raf;
        function render() {
          gl.uniform1f(uT, performance.now());
          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
          raf = requestAnimationFrame(render);
        }
        raf = requestAnimationFrame(render);

        return () => {
          cancelAnimationFrame(raf);
          if (ro) ro.disconnect();
          gl.deleteBuffer(vbo);
          gl.deleteProgram(prog);
        };
      }, []); // eslint-disable-line

      return (
        <canvas ref={canvasRef} className={className} aria-hidden="true"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", display: "block", zIndex: 0, ...rippleStyle }} />
      );
    }

    // ---- polaroid print card (shared by both bath phases) --------------- //
    function PrintCard({ sheet }) {
      const bf = drBathFilter(sheet.level);
      const filt = sheet.submerged ? ("url(#dr-ripple) " + bf) : bf;
      return (
        <div className="w-full" style={{
          transform: "rotate(" + sheet.rot + "deg) scale(" + sheet.scale + ")",
          opacity: sheet.opacity,
          transition: drReduced() ? "all .16s linear" : "transform .8s cubic-bezier(.4,.1,.2,1), opacity .55s ease",
        }}>
          <div className="relative rounded-sm bg-[oklch(0.99_0.01_85)] p-1 shadow-xl">
            <div className="relative aspect-[4/5] overflow-hidden rounded-[2px] bg-[oklch(0.16_0.02_55)]"
              style={{ filter: filt, transition: "filter 1.1s ease" }}>
              {sheet.src ? (
                <img src={sheet.src} alt="" draggable={false} className="absolute inset-0 h-full w-full object-cover"
                  onError={(e) => { e.currentTarget.style.display = "none"; }} />
              ) : null}
              <div className="pointer-events-none absolute inset-0"
                style={{ opacity: 0.8 * Math.max(0, 1 - sheet.level * 2.2),
                  background: "radial-gradient(circle at 50% 40%, oklch(0.38 0.09 55 / 0.55), oklch(0.16 0.04 55 / 0.82))" }} />
            </div>
            {sheet.submerged ? (
              <div className="pointer-events-none absolute inset-1 rounded-[2px]"
                style={{ background: sheet.tint, opacity: 0.4, mixBlendMode: "multiply" }} />
            ) : null}
          </div>
        </div>
      );
    }

    // ---- phase 1: top-down chemical baths ------------------------------ //
    function TopDownBaths({ photos, onComplete, sfx }) {
      const list = (photos && photos.length ? photos : []);
      // col: tray index 0-3, or "queue" (waiting), or "exit" (done)
      // above: true = hovering above tray, false = submerged
      const [sheets, setSheets] = useState(() => list.map((p, i) => ({
        id: p.id || ("dr" + i), src: p.src || null, alt: p.alt || "",
        col: "queue", above: true,
        rot: -4 + i * 1.5, scale: 0.86,
        submerged: false, level: 0, tint: null, z: i, opacity: 1,
      })));
      const [trayRipples, setTrayRipples] = useState([[], [], [], []]);
      const [started, setStarted] = useState(false);
      const [done, setDone] = useState(0);
      const BATH_MSGS = ["developing...", "giving your photos an acid rinse...", "stop bath, almost done..."];
      const [msgIdx, setMsgIdx] = useState(0);
      const alive = useRef(true);
      useEffect(() => () => { alive.current = false; }, []);

      const patch = useCallback((id, p) => {
        setSheets((prev) => prev.map((s) => (s.id === id ? { ...s, ...p } : s)));
      }, []);
      const addRipple = useCallback((trayIdx, color) => {
        if (drReduced()) return;
        const rid = "rp" + Math.random().toString(36).slice(2);
        setTrayRipples((prev) => { const next = prev.map((a) => [...a]); next[trayIdx] = [...next[trayIdx], { id: rid, color }]; return next; });
        setTimeout(() => { if (alive.current) setTrayRipples((prev) => { const next = prev.map((a) => [...a]); next[trayIdx] = next[trayIdx].filter((r) => r.id !== rid); return next; }); }, 1300);
      }, []);

      useEffect(() => {
        if (!started) return;
        alive.current = true;
        const locks = DR_BATHS.map(() => drLock());
        let cancelled = false;

        async function runSheet(sheet, idx) {
          await drSleep(idx * 620);
          if (cancelled) return;
          patch(sheet.id, { z: 100 + idx, scale: 1 });
          for (let b = 0; b < DR_BATHS.length; b++) {
            const bath = DR_BATHS[b];
            await locks[b].acquire();
            if (cancelled || !alive.current) { locks[b].release(); return; }
            patch(sheet.id, { col: b, above: true, rot: b % 2 ? 2 : -2 });
            await drSleep(640);
            sfx.dip();
            addRipple(b, bath.color);
            setTimeout(() => addRipple(b, bath.color), 150);
            patch(sheet.id, { col: b, above: false, submerged: true, tint: bath.color, level: (b + 1) / (DR_BATHS.length + 2) });
            await drSleep(1150);
            patch(sheet.id, { col: b, above: true, submerged: false, tint: null });
            sfx.drip();
            await drSleep(560);
            locks[b].release();
          }
          patch(sheet.id, { col: "exit", above: true, rot: 6, scale: 0.7, opacity: 0 });
          await drSleep(620);
          if (alive.current && !cancelled) setDone((c) => c + 1);
        }

        (async () => {
          sfx.prime();
          await Promise.all(sheets.map((s, i) => runSheet(s, i)));
          if (!cancelled && alive.current) setTimeout(() => { if (alive.current) onComplete(); }, 650);
        })();
        return () => { cancelled = true; };
      }, [started]); // eslint-disable-line

      useEffect(() => {
        if (!started) return;
        const id = setInterval(() => setMsgIdx((i) => Math.min(i + 1, BATH_MSGS.length - 1)), 3800);
        return () => clearInterval(id);
      }, [started]); // eslint-disable-line

      return (
        <div className="flex w-full flex-col items-center gap-5 py-2">
          {/* bench: flex row so each tray owns its column */}
          <div className="relative w-full max-w-5xl overflow-hidden rounded-lg border-2 border-[oklch(0.35_0.06_55)]"
            style={{ background: "radial-gradient(120% 100% at 50% 0%, oklch(0.20 0.04 55), oklch(0.10 0.02 55) 70%)",
              boxShadow: "inset 0 0 70px rgba(0,0,0,0.55)" }}>

            <div className="flex items-end gap-3 px-4 pb-4 pt-10">
              {DR_BATHS.map((b, i) => {
                const aboveCards = sheets.filter((s) => s.col === i && s.above);
                const subCards   = sheets.filter((s) => s.col === i && !s.above);
                const rings      = trayRipples[i] || [];
                return (
                  <div key={b.id} className="flex flex-1 flex-col items-center">
                    {/* card zone - fixed height so tray tops stay level */}
                    <div className="relative w-full" style={{ height: "110px" }}>
                      {aboveCards.map((s) => (
                        <div key={s.id} className="absolute bottom-0 left-1/2 -translate-x-1/2"
                          style={{ width: "70%", zIndex: s.z }}>
                          <div className="dr-card-in"><PrintCard sheet={s} /></div>
                        </div>
                      ))}
                    </div>
                    {/* tray */}
                    <div className="relative w-full rounded-[10px] border-2 border-[oklch(0.38_0.06_55)] p-1.5"
                      style={{ aspectRatio: "1 / 1.5", background: "oklch(0.12 0.02 55)", boxShadow: "0 6px 16px rgba(0,0,0,0.5)" }}>
                      <div className="relative h-full w-full overflow-hidden rounded-[6px]"
                        style={{ background: "radial-gradient(120% 120% at 50% 0%, " + b.color + ", " + b.edge + ")" }}>
                        <WaterRippleCanvas baseColor={[0.5, 0.48, 0.44]} scale={5} illumination={0.55}
                          rippleStyle={{ mixBlendMode: "overlay", opacity: 0.16, zIndex: 1 }} />
                        <div className="absolute inset-0" style={{ filter: "url(#dr-ripple)",
                          background: "linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0) 45%)", zIndex: 2 }} />
                        <div className="absolute inset-0" style={{ boxShadow: "inset 0 0 24px rgba(0,0,0,0.5)", zIndex: 3 }} />
                        {/* submerged card lives inside its tray */}
                        {subCards.map((s) => (
                          <div key={s.id} className="absolute" style={{ inset: "10%", zIndex: 4 + s.z }}>
                            <div className="dr-card-sink"><PrintCard sheet={s} /></div>
                          </div>
                        ))}
                        {/* ripple rings anchored to this tray */}
                        {rings.map((r) => (
                          <span key={r.id} className="pointer-events-none absolute left-1/2 top-1/2 rounded-full"
                            style={{ width: "80%", aspectRatio: "1", border: "2px solid " + r.color,
                              animation: "dr-ring 1.2s ease-out forwards", mixBlendMode: "screen",
                              transform: "translate(-50%,-50%)" }} />
                        ))}
                      </div>
                    </div>
                    <p className="mt-1.5 text-center font-serif italic text-[11px] text-[oklch(0.68_0.07_62)]">{b.label}</p>
                  </div>
                );
              })}
            </div>

            {/* start overlay */}
            {!started ? (
              <div className="absolute inset-0 flex flex-col items-center justify-center gap-4"
                style={{ background: "oklch(0.09 0.02 55 / 0.82)", backdropFilter: "blur(1.5px)", zIndex: 10 }}>
                <button type="button" onClick={() => { sfx.prime(); setStarted(true); }}
                  className="inline-flex items-center gap-2 rounded-full border-2 border-[oklch(0.72_0.10_68)] bg-[oklch(0.28_0.08_58)] px-6 py-2.5 font-serif italic text-base text-[oklch(0.92_0.04_80)] transition-colors hover:bg-[oklch(0.36_0.10_62)]">
                  <Droplet className="size-4" /> develop
                </button>
              </div>
            ) : null}
          </div>

          {/* message ticker */}
          {started ? (
            <div className="w-full max-w-5xl" role="status" aria-live="polite">
              <div className="h-px bg-[oklch(0.28_0.05_55)]" />
              <p key={msgIdx} className="mt-2 text-center font-serif italic text-[13px] text-[oklch(0.55_0.07_62)]"
                style={{ animation: "dr-fade 1s ease" }}>
                {BATH_MSGS[msgIdx]}
              </p>
            </div>
          ) : null}
        </div>
      );
    }

    // ---- phase 2: hanging print, shake to reveal (ported) -------------- //
    const DR_SHAKES_TO_REVEAL = 4;
    function HangingPrint({ photo, index, swayDelay, onRevealed, widthClass }) {
      const [progress, setProgress] = useState(0);
      const [revealed, setRevealed] = useState(false);
      const [dragging, setDragging] = useState(false);
      const [tilt, setTilt] = useState(0);
      const dragState = useRef({ active: false, lastX: 0, lastDir: 0, offset: 0 });
      const progressRef = useRef(0);

      useEffect(() => { if (revealed) onRevealed(photo.id); }, [revealed, onRevealed, photo.id]);

      // Kick off the watercolour "develop" (flux.2-klein img2img) the moment the
      // print is hung, so the result is ready by the time it's shaken in. The
      // shake then reveals the DEVELOPED image; if the endpoint is unavailable
      // or fails, we fall back to the original photo (no regression).
      const [developedSrc, setDevelopedSrc] = useState(null);
      const [devStatus, setDevStatus] = useState("queued"); // queued|developing|done|base
      const developRef = useRef(false);
      useEffect(() => {
        if (developRef.current || !photo.src) return;
        developRef.current = true;
        let alive = true;
        const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
        (async () => {
          // resolve the photo to a data URL once
          let dataUrl = photo.src;
          try {
            if (!dataUrl.startsWith("data:")) {
              const blob = await (await fetch(photo.src)).blob();
              dataUrl = await new Promise((res, rej) => {
                const fr = new FileReader();
                fr.onload = () => res(fr.result); fr.onerror = rej;
                fr.readAsDataURL(blob);
              });
            }
          } catch (e) { console.warn("[develop] could not read photo", e); if (alive) setDevStatus("base"); return; }
          // stagger so 4 prints don't all hit the GPU at once, then RETRY through
          // the cold-pipe build / transient 500s / timeouts until a watercolour
          // comes back (the old code gave up after one failed call).
          await sleep(index * 1500);
          for (let attempt = 0; attempt < 12 && alive; attempt++) {
            if (alive) setDevStatus("developing");
            try {
              const r = await fetch("/api/img2img", {
                method: "POST", headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ data_url: dataUrl, name: photo.alt || "photo" }),
              });
              if (r.ok) {
                const j = await r.json();
                if (j && j.available && j.image) {
                  if (alive) {
                    setDevelopedSrc(j.image); setDevStatus("done");
                    // write the DEVELOPED watercolour + its pin back into the shared
                    // store so the map shows the transformed photo, auto-pinned at
                    // its GPS location (falls through to the room sync too).
                    try {
                      window.SozaiPhotos.upsert(photo.id, {
                        src: j.image,
                        lat: photo.lat != null ? photo.lat : null,
                        lon: photo.lon != null ? photo.lon : null,
                        pinned: photo.lat != null && photo.lon != null,
                        caption: photo.caption || photo.defaultCaption || "",
                        date: photo.date || "", time: photo.time || "",
                      });
                    } catch (e) {}
                  }
                  return;
                }
                if (j && j.available === false) {  // feature genuinely off
                  if (alive) setDevStatus("base"); return;
                }
              }
            } catch (e) { console.warn("[develop] attempt", attempt, "failed", e); }
            await sleep(5000);
          }
          if (alive) setDevStatus("base"); // gave up → keep the original
        })();
        return () => { alive = false; };
      }, [photo.src, photo.alt, index]);

      const registerShake = useCallback(() => {
        const next = Math.min(1, progressRef.current + 1 / DR_SHAKES_TO_REVEAL);
        progressRef.current = next; setProgress(next);
        if (next >= 1) setRevealed(true);
      }, []);

      // No shaking until the watercolour has actually developed (or the develop
      // feature is off / gave up, where "base" means we reveal the original).
      const canShake = devStatus === "done" || devStatus === "base";
      function onPointerDown(e) {
        if (revealed || !canShake) return;
        try { e.currentTarget.setPointerCapture(e.pointerId); } catch (err) {}
        dragState.current = { active: true, lastX: e.clientX, lastDir: 0, offset: 0 };
        setDragging(true);
      }
      function onPointerMove(e) {
        const s = dragState.current;
        if (!s.active || revealed || !canShake) return;
        const dx = e.clientX - s.lastX;
        if (Math.abs(dx) < 4) return;
        const dir = dx > 0 ? 1 : -1;
        if (s.lastDir !== 0 && dir !== s.lastDir) registerShake();
        s.lastDir = dir; s.lastX = e.clientX;
        s.offset = Math.max(-26, Math.min(26, s.offset + dx));
        setTilt(s.offset);
      }
      function endDrag(e) {
        dragState.current.active = false; setDragging(false); setTilt(0);
        try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (err) {}
      }

      const blurPx = (1 - progress) * 14;
      const grayscale = (1 - progress) * 100;
      const brightness = 0.35 + progress * 0.65;
      const fogOpacity = (1 - progress) * 0.9;

      return (
        <li className={cn("flex flex-col items-center", widthClass || "w-60 sm:w-72")}>
          <div className="relative z-10 h-6 w-4 rounded-sm bg-[oklch(0.45_0.06_60)] shadow-sm" aria-hidden="true" />
          <figure
            className={cn("group relative -mt-1.5 select-none rounded-sm bg-[oklch(0.99_0.01_85)] p-3 pb-16 shadow-2xl",
              dragging ? "" : "dr-sway", revealed ? "cursor-default" : (canShake ? "cursor-grab active:cursor-grabbing" : "cursor-progress"))}
            style={{ animationDelay: swayDelay + "s",
              transform: dragging ? "rotate(" + (tilt * 0.3) + "deg) translateX(" + (tilt * 0.4) + "px)" : undefined,
              transition: dragging ? "none" : "transform 0.4s ease" }}
            onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={endDrag} onPointerCancel={endDrag}>
            <div className="relative aspect-[4/5] w-full overflow-hidden rounded-sm bg-[oklch(0.2_0.02_60)]">
              <img src={(revealed && developedSrc) ? developedSrc : (photo.src || "/assets/placeholder.svg")} alt={revealed ? photo.alt : ""} draggable={false}
                className="h-full w-full object-cover transition-[filter] duration-200"
                style={{ filter: "blur(" + blurPx + "px) grayscale(" + grayscale + "%) brightness(" + brightness + ") sepia(" + ((1 - progress) * 40) + "%)" }} />
              <div className="pointer-events-none absolute inset-0 transition-opacity duration-200"
                style={{ opacity: fogOpacity,
                  background: "radial-gradient(circle at 50% 40%, oklch(0.35 0.12 25 / 0.65), oklch(0.18 0.06 25 / 0.85))" }} aria-hidden="true" />
              {!revealed ? (
                <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
                  <span className={cn("flex items-center gap-2 rounded-full px-4 py-1.5 font-serif italic text-sm",
                    canShake ? "bg-[oklch(0.15_0.04_25/0.7)] text-[oklch(0.95_0.05_25)]" : "bg-black/65 text-white/90")}>
                    {!canShake ? (<><Loader2 className="size-4 animate-spin" aria-hidden="true" /> developing…</>)
                      : progress > 0 ? "keep shaking…" : "developed · shake me"}
                  </span>
                </div>
              ) : (
                <div className="pointer-events-none absolute right-2.5 top-2.5 text-[oklch(0.95_0.05_85)] drop-shadow">
                  <Sparkles className="size-6" aria-hidden="true" />
                </div>
              )}
            </div>
            <figcaption className="absolute inset-x-0 bottom-3 line-clamp-3 px-3 text-center font-hand text-base leading-snug text-[oklch(0.3_0.04_264)]"
              style={revealed ? { animation: "dr-cap-in .6s ease-out both" } : undefined}>
              {revealed ? photo.defaultCaption : ""}
            </figcaption>
          </figure>
        </li>
      );
    }

    // ---- the Darkroom shell -------------------------------------------- //
    function DarkroomDeveloper({ photos, onDone, onSkip }) {
      const list = (photos && photos.length ? photos : []);
      const [phase, setPhase] = useState("baths");
      const [revealed, setRevealed] = useState(() => new Set());
      const [muted, setMuted] = useState(false);
      const sfx = useWaterSfx(muted);
      const allRevealed = revealed.size === list.length;

      const handleRevealed = useCallback((id) => {
        setRevealed((prev) => { const next = new Set(prev); next.add(id); return next; });
      }, []);

      return (
        <div className="fixed inset-0 z-50 flex flex-col overflow-hidden bg-[oklch(0.12_0.022_55)]">
          <style dangerouslySetInnerHTML={{ __html:
            "@keyframes dr-safelight{0%,100%{opacity:.85}45%{opacity:.78}55%{opacity:.92}70%{opacity:.82}}" +
            "@keyframes dr-ring{from{transform:translate(-50%,-50%) scale(.2);opacity:.7}to{transform:translate(-50%,-50%) scale(1.7);opacity:0}}" +
            "@keyframes dr-sway-kf{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}" +
            "@keyframes dr-fade{from{opacity:0}to{opacity:1}}" +
            "@keyframes dr-cap-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}" +
            "@keyframes dr-card-in{from{opacity:0;transform:translateX(-22px) scale(.95)}to{opacity:1;transform:none}}" +
            "@keyframes dr-card-sink{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}" +
            ".dr-flicker{animation:dr-safelight 5s ease-in-out infinite}" +
            ".dr-sway{animation:dr-sway-kf 4s ease-in-out infinite;transform-origin:top center}" +
            ".dr-card-in{animation:dr-card-in .42s cubic-bezier(.34,1.18,.5,1) both}" +
            ".dr-card-sink{animation:dr-card-sink .5s cubic-bezier(.4,.1,.2,1) both}" +
            "@media (prefers-reduced-motion: reduce){.dr-flicker,.dr-sway,.dr-card-in,.dr-card-sink{animation:none}}"
          }} />

          {/* hidden filter that ripples the liquid + submerged prints */}
          <svg aria-hidden="true" style={{ position: "absolute", width: 0, height: 0 }}>
            <filter id="dr-ripple" x="-10%" y="-10%" width="120%" height="120%">
              <feTurbulence type="fractalNoise" baseFrequency="0.012 0.02" numOctaves="2" seed="7" result="noise">
                <animate attributeName="baseFrequency" dur="14s"
                  values="0.012 0.02;0.016 0.014;0.01 0.022;0.012 0.02" repeatCount="indefinite" />
              </feTurbulence>
              <feDisplacementMap in="SourceGraphic" in2="noise" scale="7" xChannelSelector="R" yChannelSelector="G" />
            </filter>
          </svg>

          {/* amber safelight glow - fills the whole screen */}
          <div className="dr-flicker pointer-events-none absolute inset-0" aria-hidden="true"
            style={{ background:
              "radial-gradient(130% 90% at 50% 0%, oklch(0.58 0.18 60 / 0.32), transparent 65%), radial-gradient(100% 80% at 50% 120%, oklch(0.44 0.12 56 / 0.24), transparent 58%)" }} />

          {/* top-right controls */}
          <div className="relative flex shrink-0 items-center justify-end gap-2 px-5 pt-4 sm:px-8">
            <button type="button" onClick={() => setMuted((m) => !m)} aria-pressed={muted}
              aria-label={muted ? "Unmute water sounds" : "Mute water sounds"}
              className="flex size-8 items-center justify-center rounded-md border border-[oklch(0.30_0.05_55)] text-[oklch(0.55_0.07_62)] transition-colors hover:bg-[oklch(0.18_0.03_55)]">
              {muted ? <VolumeX className="size-3.5" /> : <Volume2 className="size-3.5" />}
            </button>
            <button type="button" onClick={() => onSkip && onSkip()}
              className="flex items-center gap-1 rounded-md border border-[oklch(0.30_0.05_55)] px-2 py-1.5 font-serif italic text-[10px] text-[oklch(0.55_0.07_62)] transition-colors hover:bg-[oklch(0.18_0.03_55)]">
              <FastForward className="size-3" /> Skip
            </button>
          </div>

          {/* centred content */}
          <div className="relative flex flex-1 flex-col items-center justify-center gap-6 px-5 pb-10 sm:px-8">
            <div className="text-center">
              <h1 className="font-display text-5xl leading-none text-[oklch(0.92_0.04_78)] sm:text-6xl">The Darkroom</h1>
              <p className="mt-3 font-serif italic text-xl text-[oklch(0.70_0.07_65)]">
                {phase === "baths"
                  ? "developing your photos"
                  : allRevealed ? "your photos are ready"
                    : "shake each print to reveal it · " + revealed.size + "/" + list.length + " done"}
              </p>
            </div>

            {phase === "baths" ? (
              <TopDownBaths photos={list} sfx={sfx} onComplete={() => setPhase("hang")} />
            ) : (
              <div className="flex w-full flex-col items-center">
                <div className="relative w-full">
                  <div className="absolute inset-x-0 top-3 h-[2px] bg-[oklch(0.6_0.05_60)]" aria-hidden="true" />
                  <ul className="relative flex flex-wrap items-start justify-center gap-8 pt-3 sm:gap-12">
                    {list.map((photo, i) => {
                      // fewer prints = bigger heroes; many still fit by wrapping
                      const heroW = list.length <= 1 ? "w-[20rem] sm:w-[26rem]"
                        : list.length === 2 ? "w-72 sm:w-[22rem]"
                        : list.length <= 4 ? "w-60 sm:w-72"
                        : "w-52 sm:w-60";
                      return (
                        <HangingPrint key={photo.id} photo={photo} index={i} swayDelay={i * 0.4} onRevealed={handleRevealed} widthClass={heroW} />
                      );
                    })}
                  </ul>
                </div>
                <button type="button" onClick={() => onDone && onDone()} disabled={!allRevealed}
                  className={cn("mt-10 inline-flex items-center gap-2 rounded-full border-2 px-6 py-2.5 font-serif italic text-base transition-all",
                    allRevealed
                      ? "border-[oklch(0.78_0.09_65)] bg-[oklch(0.28_0.08_58)] text-[oklch(0.94_0.03_80)] hover:bg-[oklch(0.36_0.10_62)]"
                      : "cursor-not-allowed border-[oklch(0.38_0.04_55)] text-[oklch(0.58_0.06_60)] opacity-40")}>
                  {allRevealed ? "View your map" : "Reveal all prints first"}
                  <ArrowRight className="size-4" aria-hidden="true" />
                </button>
              </div>
            )}
          </div>
        </div>
      );
    }

    // ----------------------------------------------------------------- //

    // ----------------------------------------------------------------- //
    // app/page.tsx  +  collaboration shell
    // ----------------------------------------------------------------- //
    function Page({ onOpenSettings, onOpenPets, onOpenTrace, screen, setScreen, mapVariant, setMapVariant }) {
      // Each photo carries its own title/caption/date/time - a single source of
      // truth so the fields can never desync from the photo list.
      const [stackPhotos, setStackPhotos] = useState(() => []);  // default: empty
      const developPhotos = stackPhotos.map((p) => ({ id: p.id, src: p.src, alt: p.alt, defaultCaption: p.defaultCaption,
        lat: p.lat, lon: p.lon, date: p.date, time: p.time, title: p.title, caption: p.caption }));
      if (screen === "add")
        return <AddToAlbum onAdded={() => setScreen("darkroom")} onOpenSettings={onOpenSettings} onOpenPets={onOpenPets} mapVariant={mapVariant} setMapVariant={setMapVariant} stackPhotos={stackPhotos} setStackPhotos={setStackPhotos} />;
      if (screen === "darkroom")
        return <DarkroomDeveloper photos={developPhotos} onDone={() => setScreen("map")} onSkip={() => setScreen("map")} />;
      if (screen === "pets")
        return <PetsScreen onBack={() => setScreen("add")} />;
      if (screen === "trace")
        return <TraceScreen onBack={() => setScreen("add")} onOpenSettings={onOpenSettings} />;
      return <MapOfMyTime onBack={() => setScreen("add")} onOpenSettings={onOpenSettings} onOpenPets={onOpenPets} variant={mapVariant} onChangeVariant={setMapVariant} />;
    }

    function Root() {
      const [chatOpen, setChatOpen] = useState(false);
      const [unread, setUnread] = useState(0);
      const [settingsOpen, setSettingsOpen] = useState(false);
      const [screen, setScreen] = useState("add");
      const [mapVariant, setMapVariant] = useState(() => {
        try { return localStorage.getItem("sozai_map_variant") || "scrapbook"; } catch (e) { return "scrapbook"; }
      });
      const [settings, setSettings] = useState(loadSettings);

      useEffect(() => { Collab.connect(); }, []);
      useEffect(() => {
        // load saved scrapbook for this room (if any) and start auto-saving
        RoomPersistence.init();
        const onHide = () => { try { RoomPersistence.flush(); } catch (e) {} };
        window.addEventListener("beforeunload", onHide);
        document.addEventListener("visibilitychange", () => { if (document.visibilityState === "hidden") onHide(); });
        return () => { window.removeEventListener("beforeunload", onHide); RoomPersistence.stop(); };
      }, []);
      useEffect(() => { applySettings(settings); }, []); // eslint-disable-line
      useEffect(() => {
        applySettings(settings);
        try { localStorage.setItem("sozai_settings", JSON.stringify(settings)); } catch (e) {}
      }, [settings]);
      useEffect(() => { try { localStorage.setItem("sozai_map_variant", mapVariant); } catch (e) {} }, [mapVariant]);

      // ---- join approval (item: host admits/declines joiners) ---- //
      // As host: a join_request raises an Admit/Decline toast.
      // As joiner: join_pending shows a waiting notice, join_declined explains.
      useEffect(() => {
        const offs = [
          Collab.on("join_request", (m) => {
            const p = m && m.participant;
            if (!p) return;
            ToastStore.push({
              kind: "join", sticky: true, name: p.name,
              onAdmit: () => Collab.send("admit_join", { session_id: p.session_id }),
              onDecline: () => Collab.send("decline_join", { session_id: p.session_id }),
            });
          }),
          Collab.on("join_pending", () => {
            window.__sozaiJoinPending = true;
            ToastStore.push({ kind: "info", sticky: true, id: "join-wait",
              text: "Waiting for the host to let you in…" });
          }),
          Collab.on("join_declined", () => {
            ToastStore.dismiss("join-wait");
            ToastStore.push({ kind: "info", ttl: 8000,
              text: "The host didn't admit you to this room." });
          }),
          // once we're fully in (init arrives), clear any waiting toast
          Collab.on("me", () => { ToastStore.dismiss("join-wait"); window.__sozaiJoinPending = false; }),
        ];
        return () => offs.forEach((off) => off && off());
      }, []);

      // ---- live collaboration sync (item 12) ---- //
      // photo pins/moves/resets from collaborators → apply to the shared store.
      // The store never re-broadcasts, so there is no echo loop.
      useEffect(() => {
        const offs = [
          Collab.on("photo_pinned", (m) => { if (m && m.id) window.SozaiPhotos.pin(m.id, m.lon, m.lat); }),
          Collab.on("photo_moved", (m) => { if (m && m.id) window.SozaiPhotos.move(m.id, m.lon, m.lat); }),
          Collab.on("photos_reset", () => window.SozaiPhotos.resetPins()),
          Collab.on("photo_props", (m) => { if (m && m.id) window.SozaiPhotos.setStyleProps(m.id, m.props || {}); }),
        ];
        return () => offs.forEach((off) => off && off());
      }, []);
      // optional "follow" - when a collaborator switches the map/scrapbook view,
      // mirror it so both are on the same page (can be toggled off per user).
      const [followPeer, setFollowPeer] = useState(true);
      const followRef = useRef(followPeer);
      useEffect(() => { followRef.current = followPeer; window.__sozaiFollow = followPeer; }, [followPeer]);
      useEffect(() => {
        const offs = [
          Collab.on("screen_changed", (m) => { if (followRef.current && m && m.screen) setScreen(m.screen); }),
          Collab.on("variant_changed", (m) => { if (followRef.current && m && m.variant) setMapVariant(m.variant); }),
        ];
        return () => offs.forEach((off) => off && off());
      }, []);
      // broadcast our own screen/variant changes for peers who are following
      useEffect(() => { Collab.send("screen_changed", { screen }); }, [screen]);
      useEffect(() => { Collab.send("variant_changed", { variant: mapVariant }); }, [mapVariant]);

      const update = (patch) => setSettings((prev) => ({ ...prev, ...patch }));
      const openPets = () => setScreen("pets");
      const openTrace = () => setScreen("trace");

      return (
        <SettingsContext.Provider value={{ settings, update }}>
          <div className="flex min-h-screen flex-col">
            <CollabBar onToggleChat={() => { setChatOpen((v) => !v); setUnread(0); }} unread={unread} onOpenPets={openPets} onOpenTrace={openTrace} />
            <main className="flex flex-1 items-center justify-center bg-background p-4 sm:p-8">
              <Page onOpenSettings={() => setSettingsOpen(true)} onOpenPets={openPets} onOpenTrace={openTrace}
                screen={screen} setScreen={setScreen} mapVariant={mapVariant} setMapVariant={setMapVariant} />
            </main>
            {Collab.isCollab() ? <Cursors /> : null}
            {Collab.isCollab() ? (
              <button type="button" onClick={() => setFollowPeer((v) => !v)}
                title={followPeer ? "You'll follow when a collaborator changes the view" : "You can roam independently"}
                className={cn("fixed bottom-4 left-4 z-[70] flex items-center gap-1.5 rounded-full border-2 px-3 py-1.5 font-mono text-[10px] uppercase tracking-wide shadow-md transition-colors",
                  followPeer ? "border-primary bg-primary text-primary-foreground" : "border-primary/50 bg-card text-primary hover:bg-accent")}>
                <span className={cn("size-2 rounded-full", followPeer ? "bg-primary-foreground" : "bg-primary")} />
                {followPeer ? "Following" : "Roaming"}
              </button>
            ) : null}
            {Collab.isCollab() ? (
              <ChatDock open={chatOpen} onClose={() => setChatOpen(false)} onIncoming={() => setUnread((u) => u + 1)} />
            ) : null}
            <SettingsPanel open={settingsOpen} onClose={() => setSettingsOpen(false)} onOpenPets={openPets} />
            <Pet enabled={settings.petEnabled && !settings.reduceMotion} animal={settings.petAnimal} />
            <UploadOverlay />
            <ToastCenter />
          </div>
        </SettingsContext.Provider>
      );
    }

    ReactDOM.createRoot(document.getElementById("root")).render(<Root />);
  </script>
</body>
</html>