/* The home theater (member request, henry: "Copy the theater from bchat"): our movie site full screen over everything.
   The black fills the whole screen; a slim black strip under the notch holds Close, and the frame fills the rest, inside
   the side insets and the home bar, with nothing laid over it. */
.thr { --thr-bar: 38px; position: fixed; inset: 0; z-index: 9100; background: #000; opacity: 0; transition: opacity .18s; overscroll-behavior: contain; touch-action: auto; }
.thr.show { opacity: 1; }
.thr-bar { position: absolute; top: env(safe-area-inset-top); left: env(safe-area-inset-left); right: env(safe-area-inset-right); height: var(--thr-bar);
  display: flex; align-items: stretch; justify-content: center; background: #000; box-shadow: inset 0 -1px #ffffff14; }
.thr-frame { position: absolute; top: calc(env(safe-area-inset-top) + var(--thr-bar)); bottom: env(safe-area-inset-bottom); left: env(safe-area-inset-left); right: env(safe-area-inset-right);
  width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right)); height: calc(100% - env(safe-area-inset-top) - var(--thr-bar) - env(safe-area-inset-bottom));
  border: 0; display: block; background: #000; color-scheme: normal; }
.thr-x { position: relative; display: flex; align-items: center; gap: 6px; min-width: 44px; padding: 0 16px 0 14px; border: 0; background: transparent; color: #fff;
  font: 700 14px/1 "Atkinson Hyperlegible", system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.thr-x::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: #7c8cff; } /* a periwinkle lip */
.thr-x svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; }
.thr-x:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
body.thr-on { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .thr { transition: none; } }
/* Agent Gary's Quick Connect hint (geeksquad.js): two short lines left of Close, the strip a little taller */
.thr.hinted { --thr-bar: 48px; }
.thr.hinted .thr-bar { justify-content: space-between; }
.thr-hint { order: -1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 4px 0 12px; color: #fff;
  font: 700 12px/1.15 "Atkinson Hyperlegible", system-ui, sans-serif; }
.thr-hint span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.thr-hint span + span { color: #c9d0ff; }
.thr-hint b { padding: 0 5px; background: #ff6c0c; color: #000; font: 600 14px/1.2 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .08em; }