// Layout owns presentation only. room.js continues to own every media stream.
//
// 0.4.0: two layouts, Speaker and Grid (Speaker replaced Focus; a saved
// "focus" is read as Speaker). Speaker puts one tile on the stage — what
// the person pinned, else the newest shared screen, else whoever room.js
// says has the floor (#tiles' data-speaker, from speakerStep), else the
// first person in this viewer's order — with everything else in a
// filmstrip under it. Everyone, you included, can be put in this viewer's
// own order: dragged with a mouse or pen, or moved with the buttons each
// tile carries (Pin, Move earlier, Move later, Move to first), which are
// the keyboard's and a screen reader's way to do the same. The order is
// this tab's alone, kept in sessionStorage for the meeting so a rejoin
// in the same tab puts it back; it is never sent to anyone. The tiles are
// moved in the DOM itself, so reading order is the order on screen; a
// <video> moved within one task keeps playing.
//
// The call window (2026-09-28) adds three things the Mac's full-window
// call has: Grid fits every tile without scrolling (gridFit, the Mac's
// GridFit), the self view floats in the corner it is put in when it
// would be all the filmstrip holds (a call of two), and chat is a
// sidebar over the picture that starts closed, as the Mac's does.
(() => {
  'use strict';

  // ---- pure rules, lifted by name in test/browser/room-layout.test.mjs ----

  // storedLayout reads a kept layout: "grid" is Grid, and everything else
  // — "speaker", the pre-0.4.0 "focus", nothing, nonsense — is Speaker.
  function storedLayout(raw) {
    return raw === 'grid' ? 'grid' : 'speaker';
  }

  // orderMerge takes the people here now into an order. `order` is
  // {keys, present}: every key in order (remembered ones included), and
  // who was here at the last merge. Someone who was here and is not now
  // has left and is removed; a new arrival goes on the end; a remembered
  // key that arrives takes its old place. Returns a new order.
  function orderMerge(order, now) {
    const here = new Set(now);
    const left = new Set((order.present || []).filter((k) => !here.has(k)));
    const keys = (order.keys || []).filter((k) => !left.has(k));
    for (const k of now) if (!keys.includes(k)) keys.push(k);
    const present = [];
    for (const k of now) if (keys.includes(k) && !present.includes(k)) present.push(k);
    return { keys, present };
  }

  // orderShown is the people here, in order.
  function orderShown(order) {
    return order.keys.filter((k) => order.present.includes(k));
  }

  // orderMove puts `key` at `index` among the people shown (clamped), and
  // leaves remembered absentees where they were. Returns a new order, or
  // null when nothing moved.
  function orderMove(order, key, index) {
    const shown = orderShown(order);
    const from = shown.indexOf(key);
    if (from < 0) return null;
    const list = shown.slice();
    list.splice(from, 1);
    list.splice(Math.min(Math.max(index, 0), list.length), 0, key);
    if (list.join('\n') === shown.join('\n')) return null;
    let i = 0;
    return { keys: order.keys.map((k) => (order.present.includes(k) ? list[i++] : k)), present: order.present.slice() };
  }

  // stageFor is Speaker view's stage, by tile key: a pin while it is
  // still there, else the newest screen, else the speaker, else the first
  // other person in order. `self` only by its own pin; alone, self.
  function stageFor(pinned, speaker, others, shares, self) {
    if (pinned && (others.includes(pinned) || shares.includes(pinned) || pinned === self)) return pinned;
    if (shares.length) return shares[shares.length - 1];
    if (speaker && others.includes(speaker)) return speaker;
    return others[0] || self || '';
  }

  // gridColumns is the Mac's GridFit.columns: the column count that
  // makes `count` tiles of `aspect` (width over height) as large as they
  // can be in width × height, `spacing` apart. A column count only wins
  // by half a pixel or more, so a tie keeps the fewer columns.
  function gridColumns(count, width, height, aspect, spacing) {
    if (count <= 1 || width <= 0 || height <= 0) return 1;
    let best = 1;
    let bestWidth = 0;
    for (let columns = 1; columns <= count; columns++) {
      const rows = Math.ceil(count / columns);
      const w = gridTileWidth(columns, rows, width, height, aspect, spacing);
      if (w > bestWidth + 0.5) {
        best = columns;
        bestWidth = w;
      }
    }
    return best;
  }

  function gridTileWidth(columns, rows, width, height, aspect, spacing) {
    const across = (width - (columns - 1) * spacing) / columns;
    const down = (height - (rows - 1) * spacing) / rows;
    return Math.max(0, Math.min(across, down * aspect));
  }

  // gridFit is the whole of Grid's geometry in a stage of width ×
  // height, as MacFullWindowCall's fullWindowGrid has it: 4px of margin
  // and 4px between 16:9 tiles, every tile as large as fits, and no
  // smaller than 200px wide — past that it keeps 200px tiles and
  // scrolls. `lift` is how far a name at the bottom of the stage rises
  // while the bar shows; the last row's names rise by as much of it as
  // reaches over them, the grid being centred.
  function gridFit(count, width, height, lift) {
    const aspect = 16 / 9;
    const w = width - 8;
    const h = height - 8;
    const n = Math.max(count, 1);
    const columns = gridColumns(n, w, h, aspect, 4);
    const fitted = gridTileWidth(columns, Math.ceil(n / columns), w, h, aspect, 4);
    const tileW = Math.floor(fitted >= 200 ? fitted : 200);
    const tileH = Math.floor(tileW / aspect);
    const across = fitted >= 200 ? columns : Math.max(1, Math.floor((w + 4) / (tileW + 4)));
    const rows = Math.ceil(n / across);
    const gridHeight = rows * tileH + Math.max(rows - 1, 0) * 4;
    const below = Math.max(0, (height - 8 - gridHeight) / 2) + 4;
    return { columns: across, rows, tileW, tileH, lastRow: (rows - 1) * across, lastLift: Math.max(0, lift - below) };
  }

  // pipCorner is where a dropped self view settles: the quarter of the
  // stage its centre was headed for when let go (PiPLayout.corner).
  // `predicted` is where the drag's momentum would carry the centre, so
  // a flick towards a corner reaches it without being dragged the whole
  // way.
  function pipCorner(center, predicted, width, height) {
    const p = predicted || center;
    return (p.y < height / 2 ? 'top-' : 'bottom-') + (p.x < width / 2 ? 'left' : 'right');
  }

  // ---- the page ----

  const room = document.getElementById('room');
  const tiles = document.getElementById('tiles');
  const controls = document.getElementById('video-layout');
  const speakerButton = document.getElementById('layout-speaker');
  const gridButton = document.getElementById('layout-grid');
  const chat = document.getElementById('chat');
  const toggle = document.getElementById('toggle-chat');
  const overlay = document.getElementById('chat-overlay');
  const chatClose = document.getElementById('chat-close');
  const layoutToggle = document.getElementById('layout-toggle');
  const stageEl = document.getElementById('stage');
  const win = room ? room.closest('.calls-window') : null;
  const log = document.getElementById('chat-log');
  const unreadLabel = document.getElementById('chat-unread');
  const unreadLive = document.getElementById('chat-unread-live');
  const layoutLive = document.getElementById('layout-live');
  const toolsTemplate = document.getElementById('tile-tools');
  const menu = document.getElementById('tile-menu');
  if (!room || !tiles || !controls || !chat || !toggle || !overlay) return;

  const LAYOUT_KEY = 'calls.videoLayout';
  // Where the floating self view was last put; kept, as the Mac keeps
  // selfViewCorner.
  const CORNER_KEY = 'calls.selfCorner';
  const ORDER_KEY = 'calls.order.' + (room.dataset.sqid || '');
  const reduced = () => window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;

  function load(storage, key) {
    try { return window[storage].getItem(key); } catch { return null; }
  }
  function keep(storage, key, value) {
    try { window[storage].setItem(key, value); } catch { /* private mode: this call only */ }
  }

  let mode = storedLayout(load('localStorage', LAYOUT_KEY));
  if (load('localStorage', LAYOUT_KEY) === 'focus') keep('localStorage', LAYOUT_KEY, 'speaker');
  let order = { keys: [], present: [] };
  try {
    const kept = JSON.parse(load('sessionStorage', ORDER_KEY) || '[]');
    if (Array.isArray(kept)) order.keys = kept.filter((k) => typeof k === 'string');
  } catch { /* a damaged value is no order at all */ }
  let pinned = '';
  let sharesSeen = [];
  let unread = 0;
  // Chat starts closed, as the Mac's does: it is a sidebar over the
  // picture, and opening it is one click (or a new message's badge).
  let expanded = false;
  let corner = /^(top|bottom)-(left|right)$/.test(load('localStorage', CORNER_KEY) || '')
    ? load('localStorage', CORNER_KEY) : 'bottom-right';
  let pipDrag = null;
  // The tile whose ⋯ menu is open, if any.
  let menuFig = null;
  let drag = null;
  let suppressClick = false;
  // Leaving — Leave, a reload, closing the tab — takes the tiles down
  // one by one, which would read as everyone else leaving and wipe the
  // order kept for the rejoin. Layout runs a task after the tiles change
  // (below), so these are heard first.
  let leaving = false;
  window.addEventListener('pagehide', () => { leaving = true; }, { capture: true });
  document.getElementById('leave')?.addEventListener('click', () => { leaving = true; }, { capture: true });

  const isShare = (fig) => fig.classList.contains('calls-tile-share');
  const isSelf = (fig) => fig.classList.contains('calls-tile-self');
  const figures = () => Array.from(tiles.children).filter((el) => el.tagName === 'FIGURE');
  const nameOf = (fig) => {
    const span = fig.querySelector('.calls-tile-name > span');
    return isSelf(fig) ? 'You' : (fig.dataset.name || (span && span.textContent) || 'Someone');
  };

  // stableKeys gives each person's tile the key its place is kept under:
  // "self", or "name:" and their name — a peer id is new on every join,
  // and the point of keeping the order is a rejoin. Two of one name are
  // told apart by peer id, for this call only.
  function stableKeys(people) {
    const count = new Map();
    for (const fig of people) if (!isSelf(fig)) count.set(nameOf(fig), (count.get(nameOf(fig)) || 0) + 1);
    const out = new Map();
    for (const fig of people) {
      if (isSelf(fig)) out.set(fig, 'self');
      else {
        const name = nameOf(fig);
        out.set(fig, 'name:' + name + (count.get(name) > 1 ? '#' + fig.dataset.tile : ''));
      }
    }
    return out;
  }

  function say(text) {
    if (!layoutLive || !text) return;
    // A repeat of the same sentence is not re-read unless it changes.
    layoutLive.textContent = layoutLive.textContent === text ? text + ' ' : text;
  }

  function saveOrder() {
    keep('sessionStorage', ORDER_KEY, JSON.stringify(order.keys));
  }

  // tools gives a tile its two buttons, once: a Pinned badge, shown
  // only while it is pinned (pressing it unpins), and ⋯, which opens the
  // tile's menu. Since 2026-09-29 the moves are in that menu rather than
  // sitting on every tile.
  function tools(fig) {
    let box = fig.querySelector(':scope > .calls-tile-tools');
    if (box || !toolsTemplate) return box;
    box = document.createElement('div');
    box.className = 'calls-tile-tools';
    box.setAttribute('role', 'group');
    box.append(toolsTemplate.content.cloneNode(true));
    box.addEventListener('click', (ev) => {
      const button = ev.target.closest('button');
      if (!button) return;
      ev.stopPropagation();
      if (button.classList.contains('calls-tool-more')) {
        if (menuFig === fig) closeMenu(false);
        else openMenu(fig, button);
      } else if (button.dataset.act === 'pin') togglePin(fig);
    });
    fig.append(box);
    return box;
  }

  function labelTools(fig, isPinned) {
    const box = tools(fig);
    if (!box) return;
    const name = nameOf(fig);
    box.setAttribute('aria-label', 'Arrange ' + name);
    const pin = box.querySelector('[data-act="pin"]');
    if (pin) {
      // Only on a change: `hidden` is watched below, and setting it to
      // what it was is still a mutation that would bring layout back.
      if (pin.hidden !== !isPinned) pin.hidden = !isPinned;
      pin.setAttribute('aria-label', 'Unpin ' + name);
    }
    const more = box.querySelector('.calls-tool-more');
    if (more) {
      const label = 'Options for ' + name;
      if (more.getAttribute('aria-label') !== label) {
        more.setAttribute('aria-label', label);
        more.title = label;
      }
    }
  }

  // ---- the tile menu ----

  // One menu for every tile, outside #tiles so a small filmstrip tile
  // cannot clip it: Pin or Unpin, the three moves for a person, and
  // Remove for a member, which is a link to its own confirm page in a
  // new tab (room.js puts its address on the tile).
  function fillMenu() {
    if (!menu || !menuFig) return;
    const fig = menuFig;
    const name = nameOf(fig);
    menu.setAttribute('aria-label', 'Options for ' + name);
    const isPinned = pinned === fig.dataset.tile;
    const pin = menu.querySelector('[data-act="pin"]');
    const word = isPinned ? 'Unpin' : 'Pin';
    if (pin.textContent !== word) pin.textContent = word;
    pin.setAttribute('aria-label', word + ' ' + (isSelf(fig) ? 'yourself' : name));
    const people = figures().filter((f) => !isShare(f));
    const keys = stableKeys(people);
    const place = orderShown(order).indexOf(keys.get(fig));
    for (const b of menu.querySelectorAll('[data-move]')) {
      b.hidden = isShare(fig);
      b.setAttribute('aria-label', { earlier: 'Move ' + name + ' earlier', later: 'Move ' + name + ' later', first: 'Move ' + name + ' to first' }[b.dataset.move]);
      b.disabled = b.dataset.move === 'later' ? place >= people.length - 1 : place <= 0;
    }
    const remove = menu.querySelector('.calls-tile-remove');
    const href = fig.dataset.removeHref || '';
    remove.hidden = !href;
    if (href) {
      remove.href = href;
      remove.setAttribute('aria-label', 'Remove ' + name + ' from the call');
    } else remove.removeAttribute('href');
  }

  function placeMenu() {
    if (!menu || !menuFig || menu.hidden) return;
    const button = menuFig.querySelector('.calls-tool-more');
    if (!button) return;
    const r = room.getBoundingClientRect();
    const b = button.getBoundingClientRect();
    const w = menu.offsetWidth;
    const h = menu.offsetHeight;
    let top = b.bottom - r.top + 6;
    if (top + h > r.height - 8) top = Math.max(8, b.top - r.top - h - 6);
    const left = Math.min(Math.max(b.right - r.left - w, 8), r.width - w - 8);
    menu.style.setProperty('--calls-menu-x', Math.round(left) + 'px');
    menu.style.setProperty('--calls-menu-y', Math.round(top) + 'px');
  }

  function openMenu(fig, button) {
    if (menuFig) closeMenu(false);
    menuFig = fig;
    fillMenu();
    menu.hidden = false;
    button.setAttribute('aria-expanded', 'true');
    fig.classList.add('calls-tile-menu-open');
    placeMenu();
    const first = menu.querySelector('button:not([hidden]):not([disabled]), a:not([hidden])');
    if (first) first.focus({ preventScroll: true });
  }

  function closeMenu(refocus) {
    if (!menuFig) return;
    const fig = menuFig;
    menuFig = null;
    menu.hidden = true;
    fig.classList.remove('calls-tile-menu-open');
    const button = fig.querySelector('.calls-tool-more');
    if (button) {
      button.setAttribute('aria-expanded', 'false');
      if (refocus && fig.isConnected) button.focus({ preventScroll: true });
    }
  }

  if (menu) {
    menu.addEventListener('click', (ev) => {
      const item = ev.target.closest('button, a');
      if (!item || !menuFig) return;
      const fig = menuFig;
      if (item.classList.contains('calls-tile-remove')) {
        closeMenu(false);
        return;
      }
      ev.preventDefault();
      if (item.dataset.act === 'pin') {
        closeMenu(true);
        togglePin(fig);
      } else if (item.dataset.move) moveBy(fig, item.dataset.move, item);
    });
    menu.addEventListener('keydown', (ev) => {
      if (ev.key === 'Escape') {
        ev.preventDefault();
        closeMenu(true);
      }
    });
    document.addEventListener('pointerdown', (ev) => {
      if (!menuFig || menu.contains(ev.target)) return;
      const more = menuFig.querySelector('.calls-tool-more');
      if (more && more.contains(ev.target)) return;
      closeMenu(false);
    }, true);
    window.addEventListener('resize', placeMenu);
  }

  function togglePin(fig) {
    const key = fig.dataset.tile;
    if (pinned === key) {
      pinned = '';
      say('Unpinned. The stage follows whoever is speaking.');
    } else {
      pinned = key;
      if (mode !== 'speaker') setMode('speaker');
      say('Pinned ' + (isSelf(fig) ? 'yourself' : nameOf(fig)) + ' to the stage');
    }
    layout();
  }

  function moveBy(fig, how, button) {
    const people = figures().filter((f) => !isShare(f));
    const keys = stableKeys(people);
    const key = keys.get(fig);
    const shown = orderShown(order);
    const at = shown.indexOf(key);
    const to = how === 'first' ? 0 : how === 'earlier' ? at - 1 : at + 1;
    const next = orderMove(order, key, to);
    if (!next) return;
    order = next;
    saveOrder();
    layout();
    const place = orderShown(order).indexOf(key);
    say(nameOf(fig) + ' moved to position ' + (place + 1) + ' of ' + people.length);
    // The menu stays open on the tile, which has moved: keep the
    // keyboard on the move, or on the one that is still possible.
    if (button) {
      const again = button.disabled ? menu.querySelector('[data-move]:not([disabled])') : button;
      if (again) again.focus({ preventScroll: true });
    }
  }

  function setMode(next) {
    mode = next;
    keep('localStorage', LAYOUT_KEY, mode);
  }

  // place puts the figures in `want` order with the fewest moves, and the
  // keyboard back where it was if a move took it away.
  function place(want) {
    const active = document.activeElement;
    let i = 0;
    for (const fig of want) {
      const here = tiles.children[i];
      if (here !== fig) tiles.insertBefore(fig, here || null);
      i++;
    }
    if (active && active !== document.activeElement && tiles.contains(active)) active.focus();
  }

  function layout() {
    tiles.dataset.layout = mode;
    if (tiles.dataset.corner !== corner) tiles.dataset.corner = corner;
    speakerButton.setAttribute('aria-pressed', String(mode === 'speaker'));
    gridButton.setAttribute('aria-pressed', String(mode === 'grid'));
    if (layoutToggle) layoutToggle.dataset.mode = mode;
    const all = figures();
    const shares = all.filter(isShare);
    const people = all.filter((f) => !isShare(f));
    // Screens in the order they arrived, newest last.
    const shareKeys = shares.map((f) => f.dataset.tile);
    sharesSeen = sharesSeen.filter((k) => shareKeys.includes(k));
    for (const k of shareKeys) if (!sharesSeen.includes(k)) sharesSeen.push(k);
    const keys = stableKeys(people);
    // Without our own tile we are not in the call — leaving, reloading,
    // or not yet in — and the tiles going is not everyone else leaving:
    // the order is left as it was kept, for the rejoin.
    if (people.some(isSelf) && !leaving) {
      const merged = orderMerge(order, people.map((f) => keys.get(f)));
      if (merged.keys.join('\n') !== order.keys.join('\n')) {
        order = merged;
        saveOrder();
      } else order = merged;
    }
    const byKey = new Map(people.map((f) => [keys.get(f), f]));
    const ordered = orderShown(order).map((k) => byKey.get(k)).filter(Boolean);
    const byTile = new Map(all.map((f) => [f.dataset.tile, f]));
    const sharesNewest = sharesSeen.slice().reverse().map((k) => byTile.get(k)).filter(Boolean);
    if (!drag) place(sharesNewest.concat(ordered));

    if (pinned && !byTile.has(pinned)) pinned = '';
    const self = people.find(isSelf);
    const others = ordered.filter((f) => !isSelf(f)).map((f) => f.dataset.tile);
    const stageKey = mode === 'speaker'
      ? stageFor(pinned, tiles.dataset.speaker || '', others, sharesSeen, self ? self.dataset.tile : '')
      : '';
    const stage = byTile.get(stageKey) || null;
    // You float over the stage only when you would be all the filmstrip
    // holds — a call of two — and only over a face with nothing of its
    // own to say (a recovery note, a Retry or Play, a screen).
    const strip = all.filter((f) => f !== stage);
    const pip = !!stage && strip.length === 1 && strip[0] === self && !isShare(stage) && !isSelf(stage) &&
      !stage.querySelector('.calls-tile-note:not([hidden]), figcaption button:not([hidden])');
    tiles.toggleAttribute('data-pip', pip);
    for (const fig of all) {
      fig.classList.toggle('calls-tile-pip', pip && fig === self);
      const onStage = fig === stage;
      fig.toggleAttribute('data-stage', onStage);
      fig.toggleAttribute('data-pinned', onStage && pinned === fig.dataset.tile);
      let note = fig.querySelector(':scope > .calls-stage-note');
      if (onStage && !note) {
        note = document.createElement('span');
        note.className = 'calls-sr-only calls-stage-note';
        note.textContent = 'On stage:';
        fig.prepend(note);
      } else if (!onStage && note) note.remove();
      labelTools(fig, pinned === fig.dataset.tile);
    }
    fitGrid();
    if (menuFig) {
      if (!menuFig.isConnected) closeMenu(false);
      else {
        fillMenu();
        placeMenu();
      }
    }
  }

  // fitGrid writes gridFit's answer for the stage as it is now: the
  // column count and tile size, which tiles are in the last row, and
  // how far their names rise while the bar shows.
  function fitGrid() {
    if (!stageEl) return;
    if (mode !== 'grid') {
      for (const fig of figures()) fig.removeAttribute('data-last-row');
      return;
    }
    const all = figures();
    const reserve = win ? parseFloat(getComputedStyle(win).getPropertyValue('--calls-bar-reserve')) || 80 : 80;
    const fit = gridFit(all.length, stageEl.clientWidth, stageEl.clientHeight, reserve - 8);
    const set = (name, value) => {
      if (tiles.style.getPropertyValue(name) !== value) tiles.style.setProperty(name, value);
    };
    set('--calls-cols', String(fit.columns));
    set('--calls-tile-w', fit.tileW + 'px');
    set('--calls-tile-h', fit.tileH + 'px');
    set('--calls-grid-lift', fit.lastLift + 'px');
    all.forEach((fig, i) => fig.toggleAttribute('data-last-row', i >= fit.lastRow));
  }
  if (stageEl && window.ResizeObserver) new ResizeObserver(() => fitGrid()).observe(stageEl);

  // ---- pointer drag ----

  function personAt(x, y, except) {
    return figures().find((f) => f !== except && !isShare(f) && (() => {
      const r = f.getBoundingClientRect();
      return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
    })());
  }

  function follow(ev) {
    const fig = drag.fig;
    fig.style.translate = '';
    const r = fig.getBoundingClientRect();
    fig.style.translate = (ev.clientX - drag.grabX - r.left) + 'px ' + (ev.clientY - drag.grabY - r.top) + 'px';
  }

  // The floating self view is not reordered by a drag: it is moved, and
  // settles in the corner it was headed for (MacFullWindowCall's
  // selfView). Four pixels of movement make it a drag; less is a click.
  tiles.addEventListener('pointerdown', (ev) => {
    const fig = ev.target.closest('#tiles > figure.calls-tile-pip');
    if (!fig || ev.button !== 0 || ev.target.closest('button, a, summary, details, input, select')) return;
    pipDrag = { fig, id: ev.pointerId, x: ev.clientX, y: ev.clientY, moving: false, last: [] };
  }, true);
  tiles.addEventListener('pointermove', (ev) => {
    if (!pipDrag || ev.pointerId !== pipDrag.id) return;
    const dx = ev.clientX - pipDrag.x;
    const dy = ev.clientY - pipDrag.y;
    if (!pipDrag.moving) {
      if (Math.hypot(dx, dy) < 4) return;
      pipDrag.moving = true;
      pipDrag.fig.classList.add('calls-tile-dragging');
      try { pipDrag.fig.setPointerCapture(ev.pointerId); } catch { /* released already */ }
    }
    pipDrag.last.push({ x: ev.clientX, y: ev.clientY, t: ev.timeStamp });
    if (pipDrag.last.length > 5) pipDrag.last.shift();
    pipDrag.fig.style.translate = dx + 'px ' + dy + 'px';
    ev.stopImmediatePropagation();
  }, true);
  function pipDrop(ev) {
    if (!pipDrag || ev.pointerId !== pipDrag.id) return;
    const { fig, moving, last } = pipDrag;
    pipDrag = null;
    if (!moving) return;
    ev.stopImmediatePropagation();
    suppressClick = true;
    const r = fig.getBoundingClientRect();
    const s = stageEl.getBoundingClientRect();
    const center = { x: r.left + r.width / 2 - s.left, y: r.top + r.height / 2 - s.top };
    let predicted = null;
    if (last.length >= 2) {
      const a = last[0];
      const b = last[last.length - 1];
      const dt = Math.max(b.t - a.t, 1);
      // Where a quarter of a second more at the release speed would
      // have carried it.
      predicted = { x: center.x + (b.x - a.x) / dt * 250, y: center.y + (b.y - a.y) / dt * 250 };
    }
    corner = pipCorner(center, predicted, s.width, s.height);
    keep('localStorage', CORNER_KEY, corner);
    fig.classList.remove('calls-tile-dragging');
    fig.style.translate = '';
    layout();
  }
  tiles.addEventListener('pointerup', pipDrop, true);
  tiles.addEventListener('pointercancel', pipDrop, true);

  tiles.addEventListener('pointerdown', (ev) => {
    if (ev.button !== 0 || ev.pointerType === 'touch') return;
    const fig = ev.target.closest('#tiles > figure');
    if (fig && fig.classList.contains('calls-tile-pip')) return;
    if (!fig || isShare(fig) || ev.target.closest('button, a, summary, details, input, select')) return;
    const r = fig.getBoundingClientRect();
    drag = { fig, id: ev.pointerId, x: ev.clientX, y: ev.clientY, grabX: ev.clientX - r.left, grabY: ev.clientY - r.top, moving: false };
  });
  tiles.addEventListener('pointermove', (ev) => {
    if (!drag || ev.pointerId !== drag.id) return;
    if (!drag.moving) {
      if (Math.hypot(ev.clientX - drag.x, ev.clientY - drag.y) < 6) return;
      drag.moving = true;
      drag.fig.classList.add('calls-tile-lifted');
      try { drag.fig.setPointerCapture(ev.pointerId); } catch { /* released already */ }
    }
    const target = personAt(ev.clientX, ev.clientY, drag.fig);
    if (target) {
      const people = figures().filter((f) => !isShare(f));
      const keys = stableKeys(people);
      const next = orderMove(order, keys.get(drag.fig), orderShown(order).indexOf(keys.get(target)));
      if (next) {
        order = next;
        // Into the target's place: after it when coming from before it.
        const before = people.indexOf(drag.fig) < people.indexOf(target) ? target.nextSibling : target;
        tiles.insertBefore(drag.fig, before);
      }
    }
    follow(ev);
  });
  function drop(ev) {
    if (!drag || (ev && ev.pointerId !== drag.id)) return;
    const { fig, moving } = drag;
    drag = null;
    if (!moving) return;
    suppressClick = true;
    fig.classList.remove('calls-tile-lifted');
    fig.style.translate = '';
    saveOrder();
    layout();
    const keys = stableKeys(figures().filter((f) => !isShare(f)));
    say(nameOf(fig) + ' moved to position ' + (orderShown(order).indexOf(keys.get(fig)) + 1) + ' of ' + keys.size);
  }
  tiles.addEventListener('pointerup', drop);
  tiles.addEventListener('pointercancel', drop);

  // A click on a filmstrip tile pins it; on the pinned stage, unpins.
  tiles.addEventListener('click', (ev) => {
    if (suppressClick) {
      suppressClick = false;
      return;
    }
    if (mode !== 'speaker') return;
    const fig = ev.target.closest('#tiles > figure');
    if (!fig || ev.target.closest('button, a, summary, details, input, select')) return;
    if (fig.classList.contains('calls-tile-pip')) return;
    if (fig.hasAttribute('data-stage') && !fig.hasAttribute('data-pinned')) return;
    togglePin(fig);
  });

  function chatState() {
    // Mount readiness belongs to room.js; hiding the visual sidebar never
    // changes its hidden attribute, draft, admission or send state.
    toggle.hidden = chat.hidden;
    const open = expanded && !chat.hidden;
    if (overlay.hidden === open) overlay.hidden = !open;
    chat.classList.toggle('calls-chat-collapsed', !expanded);
    toggle.setAttribute('aria-expanded', String(open));
    toggle.setAttribute('aria-label', unread ? `Chat (${unread} new)` : 'Chat');
    toggle.dataset.tip = open ? 'Hide chat' : unread ? `Chat (${unread} new)` : 'Show chat';
    unreadLabel.textContent = unread ? String(unread) : '';
    if (unreadLive) {
      // Only while collapsed, and only the count. Assigning the same
      // string twice would re-announce it, so the guard is on the value
      // and not on the event that got us here.
      const said = !expanded && unread
        ? (unread === 1 ? '1 new chat message' : unread + ' new chat messages')
        : '';
      if (unreadLive.textContent !== said) unreadLive.textContent = said;
    }
  }
  speakerButton.addEventListener('click', () => { setMode('speaker'); layout(); });
  gridButton.addEventListener('click', () => { setMode('grid'); layout(); });
  toggle.addEventListener('click', () => {
    const inside = overlay.contains(document.activeElement);
    expanded = !expanded;
    if (expanded) unread = 0;
    chatState();
    if (expanded) document.getElementById('chat-text')?.focus({ preventScroll: true });
    else if (inside) toggle.focus();
  });
  // The sidebar's own close, and Escape inside it: the same as the bar's
  // button, and the keyboard goes back to that button.
  chatClose?.addEventListener('click', () => toggle.click());
  overlay.addEventListener('keydown', (ev) => {
    if (ev.key !== 'Escape' || !expanded) return;
    ev.preventDefault();
    toggle.click();
  });
  // Our own moves are child-list changes too; layout() finds the order
  // already right and moves nothing, so this settles at once.
  //
  // A task later rather than at once: room.js takes the tiles down inside
  // its own pagehide listener, and the observer would run between that
  // and ours; by the time a timer fires, `leaving` has been set.
  //
  // And never later than the next frame: a task alone let the browser
  // paint the tiles once in their unplaced places first — a lone self
  // tile drawn at filmstrip size, then the whole stage — which was a
  // layout shift of 0.43 to 0.80 on joining (shared chrome R2, "the room
  // layout reserved up front"). Whichever of the timer and the frame
  // comes first lays out; both still come after the pagehide listeners.
  let pending = false;
  let pendingTimer = 0;
  let pendingFrame = 0;
  const settle = () => {
    if (!pending) return;
    pending = false;
    clearTimeout(pendingTimer);
    cancelAnimationFrame(pendingFrame);
    if (!drag || !drag.moving) layout();
  };
  new MutationObserver(() => {
    if (pending || (drag && drag.moving)) return;
    pending = true;
    pendingTimer = setTimeout(settle, 0);
    pendingFrame = requestAnimationFrame(settle);
  })
    .observe(tiles, {childList: true, subtree: true, attributes: true, attributeFilter: ['hidden', 'data-speaker']});
  new MutationObserver(chatState).observe(chat, {attributes: true, attributeFilter: ['hidden']});
  if (log) new MutationObserver(records => {
    if (!expanded) {
      for (const record of records) {
        for (const node of record.addedNodes) {
          if (node.nodeType === 1 && !node.classList.contains('chat-line-self')) unread++;
        }
      }
      chatState();
    }
  }).observe(log, {childList: true});
  controls.hidden = false;
  // For the gate and for a look from the console: what this tab has
  // arranged. Presentation only; nothing here is sent anywhere.
  window.callsLayout = {
    state: () => ({ mode, pinned, order: orderShown(order), keys: order.keys.slice(), speaker: tiles.dataset.speaker || '',
      corner, chat: expanded && !chat.hidden }),
    reduced,
  };
  layout();
  chatState();
})();