/* ============================================================
   CHAT PAGES  (chat-session.css)
   /chat/ and /chat/video-NN/ — the presentation layer.

   Loaded ONLY in chat mode, after creation.css and aoid-video.css, so it
   adds the wings, the band, focus view and the host menu and changes
   nothing about the reading composition underneath. Every colour, face
   and border comes from the tokens those two files already use: gold
   #C4943A / #D4A84A, brown #1F1012, cream #E8DCC4 / #F5EFE4, Cinzel for
   headings, serif for body. The public pages never load this file.
   ============================================================ */

/* ── The presentation bar ────────────────────────────────────
   Chat video pages carry no site header and no hero (base.njk hideHeader;
   chat/bar.njk). One slim bar stands in: the article on the left, the
   practice line in the centre, the host's two links on the right. It is not
   fixed — it scrolls away, and the sticky stage then sits at the very top —
   so nothing on these pages is ever under a header. The practice line is a
   scored teaching element: it wraps before it is ever cut. */
.chat-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
    align-items: center;
    column-gap: 1.25rem;
    box-sizing: border-box;
    min-height: 48px;
    padding: 6px 24px;
    background: var(--brown-rich, #1F1012);
    border-bottom: 1px solid rgba(196, 148, 58, 0.18);
}
.chat-bar-label {
    margin: 0;
    justify-self: start;
    font-family: 'Cinzel', var(--font-serif, Georgia, serif);
    font-size: clamp(0.8rem, 0.55rem + 0.3vw, 1.05rem);
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--gold-light, #D4A84A);
    text-wrap: balance;
}
.chat-bar-practice {
    margin: 0;
    text-align: center;
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    font-size: clamp(0.86rem, 0.6rem + 0.3vw, 1.1rem);
    line-height: 1.3;
    color: var(--cream, #E8DCC4);
    text-wrap: balance;
}
.chat-bar-actions {
    justify-self: end;
    display: flex;
    align-items: baseline;
    gap: 0.35rem 1.1rem;
    white-space: nowrap;
}
.chat-bar-link {
    padding: 0.2em 0;
    background: none;
    border: 0;
    color: var(--cream-dark, #D4C8B0);
    opacity: 0.8;
    font-family: var(--font-sans, sans-serif);
    font-size: clamp(0.74rem, 0.55rem + 0.22vw, 0.92rem);
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(196, 148, 58, 0.4);
    cursor: pointer;
}
.chat-bar-link:hover,
.chat-bar-link:focus-visible { opacity: 1; color: var(--gold-light, #D4A84A); }

/* Phones: the third link (How This Work Is Made) would wrap the bar to two rows.
   The chat-menu page keeps its own copy of the link at every width. */
@media (max-width: 600px) {
    .chat-bar-link--how { display: none; }
}

/* Phones, restacked. The bar sits outside <main> (the stage's query container),
   so this uses the same viewport breakpoint as the rule above. Row 1: the
   article label and the links. Row 2: the practice line at full width, so it
   never runs under the links and the label is not squeezed to a sliver. */
@media (max-width: 600px) {
    .chat-bar {
        grid-template-columns: minmax(0, 1fr) max-content;
        row-gap: 2px;
    }
    .chat-bar-label { grid-column: 1; grid-row: 1; }
    .chat-bar-actions { grid-column: 2; grid-row: 1; }
    .chat-bar-practice { grid-column: 1 / -1; grid-row: 2; }
    .chat-bar-link { min-height: 24px; box-sizing: border-box; }
}

/* ── The stage: sizes (mockup E) ─────────────────────────────
   On a chat video page the stage sits outside the 1200px reading container,
   first in a full-width .chat-scope (see the layouts), and <main> is the
   query container. Everything below is decided by the width <main> actually has,
   not by a viewport breakpoint, so the same rules hold at any monitor size
   and any browser zoom.

   TUNABLE
     --chat-gutter     side gutter of the stage row
     --chat-row-max    cap on the row, centred beyond it
     --chat-gap        gap between a wing and the film
     --chat-wing-min   guaranteed wing width; --chat-wing-max its ceiling
     --chat-col-min    the single side column of the one-column fallback
     --chat-video-min  the smallest film the two-wing layout will accept
     --chat-stage-vh   share of the viewport height the stage may use, so the
                       top of the transcript stays on screen
     --chat-stage-transcript-h
                       the same budget in Focus transcript mode (the view the
                       room uses for discussion; see that section below)
     --chat-pad-y      the strip above and below the film inside the stage

   The film's width is the smaller of the HEIGHT budget (the stage's share of
   the viewport, as a 16:9 width) and the WIDTH budget (the row less the
   wings and gaps). Its height follows from 16:9 and the wings stretch to it.
   These are custom properties on <main>, so 100cqw resolves against <main>
   wherever they are used — the stage, and the dock below it, agree. */
.chat-present main {
    container: chatpage / inline-size;
    --chat-bar-h: 48px;
    --chat-gutter: 24px;
    --chat-row-max: 2200px;
    --chat-gap: 20px;
    --chat-wing-min: 260px;
    --chat-wing-max: 420px;
    --chat-col-min: 320px;
    --chat-video-min: 560px;
    --chat-stage-vh: 64svh;
    --chat-stage-transcript-h: 50svh;
    --chat-pad-y: 12px;

    --chat-row-w: min(100cqw - 2 * var(--chat-gutter), var(--chat-row-max));
    --chat-video-hmax: calc(min(var(--chat-stage-vh), 100svh - var(--chat-bar-h) - 24px) - 2 * var(--chat-pad-y));
    --chat-video-w: min(
        var(--chat-video-hmax) * 16 / 9,
        var(--chat-row-w) - 2 * var(--chat-wing-min) - 2 * var(--chat-gap)
    );
}

.chat-present .creation-stage-wrap {
    top: 0;                    /* no fixed header above it any more */
    box-sizing: border-box;
    padding: var(--chat-pad-y) 0;
}

/* ── Two wings: [left wing] [film] [right wing] ─────────────── */
.chat-present .chat-stage-row {
    display: grid;
    grid-template-columns:
        minmax(var(--chat-wing-min), var(--chat-wing-max))
        var(--chat-video-w)
        minmax(var(--chat-wing-min), var(--chat-wing-max));
    column-gap: var(--chat-gap);
    justify-content: center;
    align-items: stretch;
    width: var(--chat-row-w);
    margin-inline: auto;
}
.chat-present .chat-stage-row > .creation-player {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    width: var(--chat-video-w);
    max-width: none;
    margin: 0;
}
/* The reading's ended overlay sizes its type off the film's width through
   this container. The public page gets it from .aoid-reading, which the stage
   is no longer inside on a chat page. */
.chat-present #aoidPlayerWrap { container: aoidfilm / inline-size; }

/* The wings are SIZE containers: the grid gives them their box (a track wide,
   the film tall) and their content can never push the row taller than the
   film. Their type is sized off that box, so it scales with the wing rather
   than with the viewport. */
.chat-wing {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.chat-wing--left {
    grid-column: 1;
    grid-row: 1;
    container: chatwelcome / size;
    /* Top-aligned, level with the status badge opposite, so the film sits in
       a frame whose two sides start on the same line. */
    justify-content: flex-start;
}
.chat-wing--right {
    grid-column: 3;
    grid-row: 1;
    container: chatstatus / size;
    justify-content: space-between;
}

/* ── Left wing · welcome ─────────────────────────────────────
   Left-aligned, with the rule on the film's side so the block still reads as
   one column with it. The lead is two parts of one sentence: "Welcome to" as
   a quiet italic lead-in, the chat's name under it with the weight of a title,
   and a short gold hairline closing the pair off from the facts below. Gold
   picks out what a newcomer looks for. Lines wrap "pretty", so a wrapped
   line never leaves one word alone; the website may break at its dot, never
   inside a word. */
.chat-welcome {
    --wu: clamp(12px, min(5.4cqi, 4.3cqh), 22px);
    text-align: left;
    padding: 0.4em clamp(10px, 5cqi, 20px) 0.4em clamp(12px, 8cqi, 36px);
    border-right: 1px solid rgba(196, 148, 58, 0.18);
}
.chat-welcome-line {
    margin: 0 0 0.3em;
    font-family: var(--font-serif, Georgia, serif);
    font-size: var(--wu);
    line-height: 1.4;
    color: var(--cream, #E8DCC4);
    /* pretty, not balance: balance halves a line that nearly fits, which
       split "Christ-Centered / Ministry and Fellowship" on wide wings;
       pretty only steps in to keep a last word from standing alone. */
    text-wrap: pretty;
    overflow-wrap: normal;
    word-break: normal;
}
.chat-welcome-lead {
    margin: 0 0 0.75em;
    line-height: 1.15;
    text-wrap: balance;
}
.chat-welcome-greet {
    display: block;
    margin-bottom: 0.2em;
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    font-size: var(--wu);
    letter-spacing: 0.02em;
    color: var(--gold-light, #D4A84A);
}
.chat-welcome-name {
    display: block;
    font-family: 'Cinzel', var(--font-serif, Georgia, serif);
    font-size: calc(var(--wu) * 1.14);
    letter-spacing: 0.02em;
    color: var(--cream-soft, #F5EFE4);
}
.chat-welcome-lead::after {
    content: '';
    display: block;
    width: 2.4em;
    height: 1px;
    margin-top: 0.6em;
    background: rgba(196, 148, 58, 0.6);
}
.chat-welcome-gold { color: var(--gold-light, #D4A84A); }
.chat-welcome-gap { margin-top: 0.85em; }

/* ── Right wing · live status ────────────────────────────────
   The status fills the wing and the host controls sit at its foot, out of
   the reading order — the room reads the badge, the host reaches past it. */
.chat-status {
    --su: clamp(12px, min(5.2cqi, 3.6cqh), 20px);
    padding: 0.5em clamp(10px, 5cqi, 20px) 0;
    border-left: 1px solid rgba(196, 148, 58, 0.18);
}

/* Mic badge. Muted is the state the room is in for most of the film, so it
   is the one that has to read at a distance: a red that is muted rather
   than alarming, and a slow pulse that says live, not error. */
.chat-mic {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    margin: 0 0 0.6em;
    padding: 0.3em 0.75em;
    border-radius: 20px;
    font-family: var(--font-sans, sans-serif);
    font-size: max(12px, calc(var(--su, 14px) * 0.86));
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap;
}
.chat-mic-dot {
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}
.chat-mic[data-state="muted"] {
    color: #E8A0A0;
    background: rgba(140, 45, 45, 0.28);
    border: 1px solid rgba(196, 90, 90, 0.5);
}
.chat-mic[data-state="muted"] .chat-mic-dot { animation: chatMicPulse 2.4s ease-in-out infinite; }
.chat-mic[data-state="open"] {
    color: #9FD9A6;
    background: rgba(45, 110, 60, 0.26);
    border: 1px solid rgba(110, 190, 125, 0.5);
}
@keyframes chatMicPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.28; }
}

.chat-status-title {
    margin: 0 0 0.5em;
    font-family: 'Cinzel', var(--font-serif, Georgia, serif);
    font-size: calc(var(--su) * 1.12);
    line-height: 1.3;
    color: var(--cream-soft, #F5EFE4);
    text-wrap: balance;
}

.chat-meter {
    height: 3px;
    border-radius: 2px;
    background: rgba(196, 148, 58, 0.18);
    overflow: hidden;
    margin-bottom: 0.55em;
}
.chat-meter-fill {
    height: 100%;
    width: 0%;
    background: var(--gold-primary, #C4943A);
    transition: width 0.25s linear;
}

.chat-timeleft {
    margin: 0 0 0.6em;
    font-family: var(--font-sans, sans-serif);
    font-size: max(12px, calc(var(--su) * 0.9));
    letter-spacing: 0.03em;
    color: var(--gold-light, #D4A84A);
}
.chat-message {
    margin: 0;
    font-family: var(--font-serif, Georgia, serif);
    font-size: var(--su);
    line-height: 1.45;
    color: var(--cream-dark, #D4C8B0);
}

/* ── Right wing · Ways to Take Part ──────────────────────────
   Directly under the status, carrying its rule on down so the two read as
   one box; the host controls keep the foot of the wing. Ways, not levels:
   the names are the same gold and the same size, and nothing is numbered. */
.chat-wing--right .chat-ways { margin-bottom: auto; }
.chat-ways {
    --yu: clamp(11px, min(4.7cqi, 3.1cqh), 18px);
    /* Generous top space: the section is a different kind of thing from the
       status message above it, and should read as a new block, not a
       continuation of that paragraph. */
    padding: 2.2em clamp(10px, 5cqi, 20px) 0;
    border-left: 1px solid rgba(196, 148, 58, 0.18);
}
.chat-ways-title {
    margin: 0 0 0.55em;
    font-family: 'Cinzel', var(--font-serif, Georgia, serif);
    font-weight: 400;
    font-size: calc(var(--yu) * 1.18);
    letter-spacing: 0.02em;
    line-height: 1.25;
    color: var(--cream-soft, #F5EFE4);
}
.chat-ways-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.chat-ways-list li {
    margin: 0 0 0.6em;
    font-family: var(--font-serif, Georgia, serif);
    font-size: var(--yu);
    line-height: 1.35;
    color: var(--cream-dark, #D4C8B0);
    text-wrap: pretty;
}
.chat-ways-list li:last-child { margin-bottom: 0; }
.chat-ways-name { color: var(--gold-light, #D4A84A); }

/* A short wing gives up the explanations first and keeps the four names;
   shorter still, the section goes and the status keeps the whole box.
   Thresholds measured, not guessed: status + full ways + controls needs about
   460-540px depending on wing width; status + names + controls about 300-330px.
   So a 1280x630 VR window (369px wing) shows the names, and 1920x1080 (667px)
   shows everything. */
@container chatstatus (max-height: 520px) {
    /* Names alone take a fraction of the room, so they take the status box's
       type size rather than shrinking with the wing's height. */
    .chat-ways { --yu: clamp(12px, min(5.2cqi, 3.6cqh), 20px); }
    .chat-ways-text { display: none; }
    .chat-ways-list li { margin-bottom: 0.3em; }
}
@container chatstatus (max-height: 330px) {
    .chat-ways { display: none; }
}
/* With the full list showing, the height terms are held to what the wing can
   carry. At 1920x950 (a 397x584 wing) the Standard 3.6 / 3.1 put the list
   42-101px past the wing, over the dock, and pushed the host links out of
   sight. Measured across all thirteen pages with the longest title, message
   and time line: 3.1 / 2.75 fits there, and at every other size in the matrix
   the width term or the cap still decides the type, so nothing else moves. */
@container chatstatus (height > 520px) {
    .chat-status { --su: clamp(12px, min(5.2cqi, 3.1cqh), 20px); }
    .chat-ways { --yu: clamp(11px, min(4.7cqi, 2.75cqh), 18px); }
    .chat-message { text-wrap: pretty; }
}

/* Host controls: text buttons, not filled ones. They are the host's, and the
   room should not read either as something it is meant to press. They sit
   together at the bottom of the status box, out of the reading order. */
.chat-wing-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.9rem;
    margin: 0.6em clamp(10px, 5cqi, 20px) 0.5em;
}
.chat-focus-btn,
.chat-mode-btn {
    align-self: flex-start;
    padding: 0.25em 0;
    background: none;
    border: 0;
    color: var(--cream-dark, #D4C8B0);
    opacity: 0.6;
    font-family: var(--font-sans, sans-serif);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(196, 148, 58, 0.4);
    cursor: pointer;
}
.chat-wing .chat-focus-btn,
.chat-wing .chat-mode-btn { font-size: max(12px, calc(var(--su, 14px) * 0.82)); }
.chat-focus-btn:hover,
.chat-focus-btn:focus-visible,
.chat-mode-btn:hover,
.chat-mode-btn:focus-visible { opacity: 1; color: var(--gold-light, #D4A84A); }

/* The mode switch reads as the mode currently RUNNING, with the arrows saying
   it can be changed. A host glancing at the box wants to know what the room is
   about to get, not what a click would do to it. */
.chat-mode-btn { white-space: nowrap; }

/* The view pair: "Focus video · Focus transcript". Two of the same quiet
   links, kept together on one line with a dot between them. The one that is
   on reads at full strength in gold; with neither on, the page is in
   Standard. A keyboard focus ring, because the host may be driving by Tab. */
.chat-view-pair {
    display: inline-flex;
    align-items: baseline;
    gap: 0 0.45em;
    white-space: nowrap;
}
.chat-view-sep {
    color: var(--cream-dark, #D4C8B0);
    opacity: 0.45;
    font-family: var(--font-sans, sans-serif);
    font-size: 12px;
}
.chat-wing .chat-view-sep { font-size: max(12px, calc(var(--su, 14px) * 0.82)); }
.chat-view-pair .chat-focus-btn[aria-pressed="true"] {
    opacity: 1;
    color: var(--gold-light, #D4A84A);
    text-decoration-color: currentColor;
}
.chat-view-pair .chat-focus-btn:focus-visible {
    outline: 2px solid var(--gold-light, #D4A84A);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── The band (mockup F) ─────────────────────────────────────
   One row under the video carrying the same facts, for the widths where
   no side column fits. Hidden until the last fallback below. */
.chat-band { display: none; }

/* ── Fallback 1 · one side column ────────────────────────────
   Below video-min + 2 × wing-min + gaps (+ gutters) the two wings cannot
   both have their guaranteed width. If video-min + one 320px column still
   fits, the film keeps the left and ONE column sits on its right: the welcome
   above, the status below. The status is sized to its content and always
   shows whole; the welcome takes what height is left and gives up its last
   lines first (container height queries below), rather than being cut. */
@container chatpage (max-width: 1167.98px) {
    .chat-present .creation-stage-wrap,
    .chat-present .creation-reading {
        --chat-video-w: min(
            var(--chat-video-hmax) * 16 / 9,
            var(--chat-row-w) - var(--chat-col-min) - var(--chat-gap)
        );
    }
    .chat-present .chat-stage-row {
        grid-template-columns: var(--chat-video-w) minmax(var(--chat-col-min), var(--chat-wing-max));
        grid-template-rows: minmax(0, 1fr) auto;
        height: calc(var(--chat-video-w) * 9 / 16);
    }
    .chat-present .chat-stage-row > .creation-player { grid-column: 1; grid-row: 1 / span 2; }
    .chat-wing--left {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-start;
    }
    .chat-wing--right {
        grid-column: 2;
        grid-row: 2;
        container: chatstatus / inline-size;
        justify-content: flex-start;
    }
    /* One column reads top to bottom, so both blocks align left and share
       one rule on the film's side. */
    .chat-welcome {
        --wu: clamp(13px, min(4.2cqi, 8cqh), 16px);
        text-align: left;
        padding: 0 0 0.35em clamp(10px, 4cqi, 16px);
        border-right: 0;
        border-left: 1px solid rgba(196, 148, 58, 0.18);
    }
    .chat-welcome-line { margin-bottom: 0.15em; line-height: 1.3; }
    .chat-welcome-lead { margin-bottom: 0.4em; }
    .chat-welcome-lead::after { margin-top: 0.35em; }
    .chat-welcome-gap { margin-top: 0.4em; }
    /* The one column stacks welcome over status. Under the status go the
       four names of Ways to Take Part, without their explanations: the
       status and the names are sized to their content, and the welcome
       gives up its lines to make the room (the chatwelcome queries below). */
    .chat-ways {
        --yu: clamp(13px, 4.4cqi, 16px);
        padding: 0.4em clamp(10px, 4cqi, 16px) 0;
    }
    .chat-ways-title { margin-bottom: 0.15em; }
    .chat-ways-text { display: none; }
    .chat-ways-list li { margin-bottom: 0; }
    .chat-status {
        --su: clamp(13px, 4.4cqi, 16px);
        padding: 0.35em clamp(10px, 4cqi, 16px) 0;
        border-top: 1px solid rgba(196, 148, 58, 0.18);
    }
    .chat-mic { margin-bottom: 0.4em; }
    .chat-status-title { margin-bottom: 0.3em; }
    .chat-meter { margin-bottom: 0.35em; }
    .chat-timeleft { margin-bottom: 0.35em; font-size: max(13px, calc(var(--su) * 0.9)); }
    .chat-message { line-height: 1.35; text-wrap: pretty; }
    .chat-wing-controls { margin: 0.4em clamp(10px, 4cqi, 16px) 0; }
}
/* The welcome gives up its closing lines first, then its middle lines; the
   lead line and the host stay. */
@container chatwelcome (max-height: 200px) {
    .chat-welcome-line--close { display: none; }
}
@container chatwelcome (max-height: 125px) {
    .chat-welcome-line--mid { display: none; }
    .chat-welcome-lead::after { display: none; }
}

/* ── Fallback 2 · the band ───────────────────────────────────
   Narrower still, no side column fits: the wings go and the same facts sit
   in one band under the film. The band's own height comes out of the
   stage's height budget, so the transcript still shows below it. */
@container chatpage (max-width: 947.98px) {
    .chat-present .creation-stage-wrap,
    .chat-present .creation-reading {
        --chat-video-w: min(
            (var(--chat-video-hmax) - 64px) * 16 / 9,
            var(--chat-row-w)
        );
    }
    .chat-present .chat-stage-row {
        display: block;
        height: auto;
    }
    .chat-present .chat-stage-row > .creation-player { margin-inline: auto; }
    .chat-wing { display: none; }
    .chat-band {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 1rem;
        margin: 0.55rem auto 0;
        padding: 0.5rem 0.7rem;
        width: var(--chat-row-w);
        box-sizing: border-box;
        border: 1px solid rgba(196, 148, 58, 0.2);
        border-radius: 8px;
        background: rgba(196, 148, 58, 0.05);
    }
    .chat-mic--band { margin: 0; font-size: 12px; }
    .chat-band-title {
        font-family: 'Cinzel', var(--font-serif, Georgia, serif);
        font-size: 0.82rem;
        color: var(--cream-soft, #F5EFE4);
    }
    .chat-band-time {
        font-family: var(--font-sans, sans-serif);
        font-size: 0.75rem;
        color: var(--gold-light, #D4A84A);
    }
    .chat-band-msg,
    .chat-band-host {
        font-family: var(--font-serif, Georgia, serif);
        font-size: 0.78rem;
        color: var(--cream-dark, #D4C8B0);
    }
    .chat-band-host { opacity: 0.75; }
    /* The view pair sits at the right end of the band, with the mode switch
       beside it. */
    .chat-mode-btn--band { margin: 0 0 0 auto; align-self: center; }
    .chat-focus-btn--band { margin: 0; align-self: center; }
    /* With no mode switch on the page, the pair takes the right end itself. */
    .chat-band > .chat-view-pair--band { margin-left: auto; align-self: center; }
    .chat-mode-btn--band ~ .chat-view-pair--band { margin-left: 0; }
}

/* ── Focus transcript ────────────────────────────────────────
   The discussion view. The stage's height budget drops from --chat-stage-vh
   to --chat-stage-transcript-h; the film's width follows from 16:9, the
   wings take the width it gives back, and every pixel of height it gives
   back goes to the transcript and the dock (--ct-dock-top below is computed
   from the same --chat-video-w, so the dock grows by exactly what the stage
   loses). Chat pages only, set by js/chat-session.js; with the class off,
   nothing in this section applies and the stage is the Standard one.

   THE FLOOR. The budget is the LARGER of --chat-stage-transcript-h and
   --chat-stage-transcript-floor: the smallest stage at which the right wing
   still holds the four Ways names at 13px or more. That height depends on
   the wing's width, which depends on the film's width, which depends on the
   height, so it is measured rather than written down: js/chat-session.js
   finds it once when the mode comes on and once after each resize, never
   while the film simply plays. Where the wing would need a stage as tall as
   Standard's, the script adds .chat-transcript-std and the page renders as
   Standard, with the toggle still pressed. */
:root.chat-view-transcript:not(.chat-transcript-std) .chat-present main {
    --chat-video-hmax: calc(min(max(var(--chat-stage-transcript-h), var(--chat-stage-transcript-floor, 0px)), 100svh - var(--chat-bar-h) - 24px) - 2 * var(--chat-pad-y));
}

/* In the band the band's own 64px is not taken out of the budget again: the
   film is the Standard band film, capped at the transcript height. */
@container chatpage (max-width: 947.98px) {
    :root.chat-view-transcript:not(.chat-transcript-std) .chat-present .creation-stage-wrap,
    :root.chat-view-transcript:not(.chat-transcript-std) .chat-present .creation-reading {
        --chat-video-w: min(
            (min(var(--chat-stage-vh), 100svh - var(--chat-bar-h) - 24px) - 2 * var(--chat-pad-y) - 64px) * 16 / 9,
            var(--chat-stage-transcript-h) * 16 / 9,
            var(--chat-row-w)
        );
    }
}

/* Two wings: the shorter film leaves the wings wider, so their lines wrap
   less. Their type scales with the wing's height as well as its width (the
   cqh term), so a short wing takes smaller type before it gives up any
   words — and never below 13px. The cqh coefficients are measured, not
   guessed: 3.1 / 2.67 is the largest pair at which the whole right wing fits
   at every height from 403px up.
   The four names always show here; the floor above is what guarantees them
   the room. The explanations join them only where they fit. */
@container chatpage (min-width: 1168px) {
    :root.chat-view-transcript:not(.chat-transcript-std) .chat-welcome { --wu: clamp(13px, min(5.4cqi, 4.3cqh), 22px); }
    :root.chat-view-transcript:not(.chat-transcript-std) .chat-status { --su: clamp(13px, min(5.2cqi, 3.1cqh), 20px); }
    :root.chat-view-transcript:not(.chat-transcript-std) .chat-timeleft { font-size: max(13px, calc(var(--su) * 0.9)); }
    :root.chat-view-transcript:not(.chat-transcript-std) .chat-message { text-wrap: pretty; }
    :root.chat-view-transcript:not(.chat-transcript-std) .chat-ways {
        display: block;
        --yu: clamp(13px, min(5.2cqi, 3.1cqh), 20px);
    }
    :root.chat-view-transcript:not(.chat-transcript-std) .chat-ways-text { display: none; }
    :root.chat-view-transcript:not(.chat-transcript-std) .chat-ways-list li:not(:last-child) { margin-bottom: 0.3em; }
}

/* The explanations, where they fit at this type. Measured at the 13px floor:
   the full list needs 403px of wing height at 337px wide and up, 557px on a
   300px wing. Height queries never match in the one-column fallback, where
   the wing is an inline-size container, so nothing here reaches it. */
@container chatstatus ((min-width: 337px) and (min-height: 410px)) or (min-height: 560px) {
    :root.chat-view-transcript:not(.chat-transcript-std) .chat-ways { --yu: clamp(13px, min(4.7cqi, 2.67cqh), 18px); }
    :root.chat-view-transcript:not(.chat-transcript-std) .chat-ways-text { display: inline; }
    :root.chat-view-transcript:not(.chat-transcript-std) .chat-ways-list li:not(:last-child) { margin-bottom: 0.6em; }
}

/* ── The dock under the stage ────────────────────────────────
   The citation dock is sticky below the stage. The stage now sits at top 0
   and is the film's height plus its strip, so the dock follows from the same
   --chat-video-w the stage used (one-column mode included, above). */
.chat-present .creation-reading {
    --ct-dock-top: calc(var(--chat-video-w) * 9 / 16 + 2 * var(--chat-pad-y) + 1rem);
}

/* ── Focus view ──────────────────────────────────────────────
   Not browser fullscreen, not YouTube's. The stage wrap goes fixed and
   fills the viewport; the player inside it is resized by CSS only. The
   iframe is never re-parented, because moving an iframe in the DOM
   reloads it — which in a room means the film restarts in front of
   everyone.

   The reserved bottom margin is the whole point of the geometry: the
   video stops short of the viewport bottom so the exit button sits in
   clear space and YouTube's own control bar, at the bottom INSIDE the
   player, is still reachable. Neither covers the other. */
:root.chat-focus,
:root.chat-focus body { overflow: hidden; }

.chat-focus .creation-stage-wrap {
    position: fixed;
    inset: 0;
    z-index: 1900;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 72px at the bottom — comfortably past the 56px floor the exit button
       needs — and real room at the sides. */
    padding: 20px clamp(24px, 4vw, 64px) 72px;
    background: var(--brown-rich, #1F1012);
}
/* The stage row is a grid everywhere else; focus view has no wings, so it
   goes back to one centred item. */
.chat-focus .chat-stage-row {
    display: flex;
    width: 100%;
    height: auto;
    margin: 0;
    justify-content: center;
}
.chat-focus .chat-wing,
.chat-focus .chat-band { display: none; }

.chat-focus .chat-stage-row > .creation-player {
    width: min(100%, calc((100vh - 92px) * 16 / 9));
    max-width: none;
}

/* The transcript and dock keep their place in the layout and lose only
   their visibility. That is deliberate: the host page's follow code goes
   on measuring real rectangles while they are invisible, so the transcript
   is already on the current sentence when the host comes back instead of
   jumping to it a moment later. */
.chat-focus .creation-columns { visibility: hidden; }
.chat-focus .ap-panel,
.chat-focus .ap-backdrop { visibility: hidden; }
.chat-focus .ct-resume,
.chat-focus .ct-cite-toggle,
.chat-focus .ct-hint { display: none; }

.chat-focus-exit {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 1901;
    padding: 0.42em 1.1em;
    background: rgba(196, 148, 58, 0.14);
    border: 1px solid rgba(196, 148, 58, 0.45);
    border-radius: 20px;
    color: var(--gold-light, #D4A84A);
    font-family: var(--font-sans, sans-serif);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.chat-focus-exit:hover,
.chat-focus-exit:focus-visible {
    background: var(--gold-primary, #C4943A);
    color: var(--brown-rich, #1F1012);
}
.chat-focus .chat-focus-exit { display: block; }

/* ── The worship entry card, on one screen ───────────────────
   At the host's real screen (1920x1080 at 150%, a 1280x630 page) the card ran
   to 620px on a reading and 722px on the film, so Enter sat below the fold
   and the host had to scroll inside the dialog in front of the room. Here it
   is sized off the viewport HEIGHT — the image is capped, the type and the
   gaps come down on short screens — and the wording is untouched. This file
   loads only on chat pages, so every public entry card keeps its sizes.
   Measured on all thirteen at 1280x630 and 1024x600. */
.creation-entry { padding: 2vh 24px; }
.creation-entry .creation-entry-card { max-width: 640px; }

.creation-entry .creation-entry-card .creation-entry-thumb,
.creation-entry .creation-entry-card .aoid-entry-banner img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 28vh;
    margin-left: auto;
    margin-right: auto;
}
.creation-entry .creation-entry-card .creation-entry-thumb { margin-bottom: 1.6vh; }
.creation-entry .creation-entry-card .aoid-entry-banner { margin: 0 auto 1.6vh; }

.creation-entry .creation-entry-card .aoid-entry-eyebrow {
    font-size: clamp(0.66rem, 1.9vh, 0.8rem) !important;
    margin-bottom: 0.6vh !important;
}
.creation-entry .creation-entry-card h2 {
    font-size: clamp(1.05rem, 3vh, 1.45rem);
    margin-bottom: 1vh;
}
.creation-entry .creation-entry-card p {
    font-size: clamp(0.82rem, 2.3vh, 1.02rem);
    line-height: 1.5;
    margin-bottom: 1vh;
}
.creation-entry .creation-entry-card .creation-entry-nop {
    font-size: clamp(0.76rem, 2.05vh, 0.9rem);
    margin: 0.8vh 0 1.4vh !important;
}
.creation-entry .creation-entry-card .aoid-entry-propose {
    font-size: clamp(0.78rem, 2.15vh, 0.95rem);
    line-height: 1.45;
    margin-bottom: 1.6vh;
}
/* The film's card is .creation-entry without .aoid-entry, so the quiet-prompt
   treatment in aoid-video.css (scoped to .aoid-entry) never reached it: the
   prompt rendered as a plain centred paragraph. Same look as the readings'. */
.creation-entry:not(.aoid-entry) .creation-entry-card .aoid-entry-propose {
    max-width: 33rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.95rem;
    border-left: 2px solid rgba(196, 148, 58, 0.4);
    text-align: left;
    font-style: italic;
    color: var(--cream-dark, #D4C8B0);
}
.creation-entry .creation-entry-card button { padding: 1.3vh 28px; }

/* /creation/ in chat mode has no ended-overlay back link of its own. */
.chat-ended-back { margin-top: 0.7rem; }

/* ── The part-end overlay ────────────────────────────────────
   Same furniture as the ended overlay it is modelled on — it inherits
   .creation-ended and .aoid-ended outright — so the room cannot tell that one
   of these two stops is a break and the other is the end. It should not have
   to: at both, the film has stopped and the mics are open.
   "Continue to the prayer" is the one filled control that is genuinely the
   room's to expect, so it is weighted the same as "Watch Part 1 again". */
/* Fully opaque, unlike the ended overlay it is modelled on. That overlay
   covers a FINISHED player, where YouTube shows a dim suggestion grid and 94%
   is enough. This one covers a PAUSED player, where YouTube puts up its full
   chrome — video title, channel, scrubber, logo — and at 94% the room reads
   all of it straight through the discussion question. */
.chat-part-end {
    z-index: 4;
    background: var(--brown-rich, #1F1012);
}
.chat-continue { background: var(--gold-light, #D4A84A); }
.chat-continue:hover { background: var(--gold-primary, #C4943A); }

@media (prefers-reduced-motion: reduce) {
    .chat-mic[data-state="muted"] .chat-mic-dot { animation: none; }
    .chat-meter-fill { transition: none; }
}

/* ============================================================
   /chat/ — the host menu and between-videos screen
   ============================================================ */

/* The site header is FIXED (109px at desktop, 86px under 960px), and this page
   has no hero to sit under it, so the welcome block has to be pushed clear of
   it by hand — otherwise the first and largest line on the between-videos
   screen renders behind the header bar. Measured, not guessed. */
.chat-menu {
    max-width: 1200px;
    margin: 0 auto;
    padding: calc(109px + clamp(0.5rem, 1.4vh, 1rem)) clamp(1rem, 3vw, 2rem) 4rem;
}
@media (max-width: 959.98px) {
    .chat-menu { padding-top: calc(86px + 0.9rem); }
}

/* The draggable Articles seal is site chrome that lands on top of the card
   grid here, and on the transcript on a chat video page. These pages are shown
   to a room on a projector or a VR screen: nothing floats over the content
   that the room did not come to read. Chat pages only; every public page keeps
   it. */
#articlesSealWidget { display: none; }

/* The welcome block is the biggest thing on this screen on purpose: between
   videos it IS the screen, and it has to read from across a VR room. */
.chat-menu-welcome {
    text-align: center;
    margin-bottom: clamp(0.7rem, 1.6vh, 1.2rem);
}
.chat-menu-lead {
    margin: 0 0 0.4em;
    font-family: 'Cinzel', var(--font-serif, Georgia, serif);
    font-size: clamp(1.15rem, 2.3vw, 1.75rem);
    line-height: 1.2;
    color: var(--gold-light, #D4A84A);
}
.chat-menu-line {
    margin: 0 0 0.16em;
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(0.92rem, 1.5vw, 1.2rem);
    line-height: 1.5;
    color: var(--cream, #E8DCC4);
}
.chat-menu-rule {
    margin: 0.5em 0;
    color: rgba(196, 148, 58, 0.55);
    line-height: 1;
}
.chat-menu-mics {
    margin: 0.7em 0 0;
    font-family: var(--font-sans, sans-serif);
    font-size: clamp(0.72rem, 1.1vw, 0.88rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9FD9A6;
}

.chat-menu-about {
    margin: 1.25rem 0 0;
    text-align: center;
}

/* Next up */
.chat-next {
    margin: 0 auto clamp(0.7rem, 1.8vh, 1.2rem);
    padding: 0.7rem 1rem;
    border: 1px solid rgba(196, 148, 58, 0.35);
    border-radius: 10px;
    background: rgba(196, 148, 58, 0.06);
}
.chat-next-eyebrow {
    margin: 0 0 0.6em;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(212, 168, 74, 0.8);
}
.chat-next-body {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.chat-next-banner { flex: 0 0 clamp(150px, 17vw, 210px); }
.chat-next-meta { flex: 1 1 240px; min-width: 0; }
.chat-next-title {
    margin: 0 0 0.15em;
    font-family: 'Cinzel', var(--font-serif, Georgia, serif);
    font-size: clamp(1rem, 1.7vw, 1.35rem);
    color: var(--cream-soft, #F5EFE4);
}
.chat-next-label {
    margin: 0 0 0.3em;
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    font-size: 0.82rem;
    color: var(--cream-dark, #D4C8B0);
}
.chat-next-time {
    margin: 0 0 0.7em;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.78rem;
    color: var(--gold-light, #D4A84A);
}
.chat-next-open {
    display: inline-block;
    padding: 0.45em 1.4em;
    background: var(--gold-primary, #C4943A);
    color: var(--brown-rich, #1F1012);
    border-radius: 8px;
    font-family: var(--font-sans, sans-serif);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
}
.chat-next-open:hover { background: var(--gold-light, #D4A84A); }

/* The thirteen cards */
.chat-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.9rem;
}
.chat-card {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(196, 148, 58, 0.22);
    border-radius: 10px;
    background: rgba(42, 29, 20, 0.4);
    overflow: hidden;
}
.chat-card--next { border-color: rgba(196, 148, 58, 0.75); }
.chat-card-link {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0 0 0.5rem;
    text-decoration: none;
    flex: 1 1 auto;
}
/* This page does not load chapter.css or articles-panel.css, so the banner
   macro's <figure> would otherwise carry the browser's default margin. */
.chat-card-banner,
.chat-next-figure { margin: 0; }
.chat-card-banner img,
.chat-next-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 9px 9px 0 0;
}
.chat-next-figure img { border-radius: 8px; }
.chat-card-article {
    margin: 0.5rem 0.7rem 0;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(212, 168, 74, 0.8);
}
.chat-card-title {
    margin: 0 0.7rem;
    font-family: 'Cinzel', var(--font-serif, Georgia, serif);
    font-size: 0.92rem;
    line-height: 1.3;
    color: var(--cream-soft, #F5EFE4);
}
.chat-card-label {
    margin: 0.1rem 0.7rem 0;
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    font-size: 0.72rem;
    color: var(--cream-dark, #D4C8B0);
}
.chat-card-time {
    margin: 0.25rem 0.7rem 0;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.74rem;
    color: var(--gold-light, #D4A84A);
}
.chat-card-setnext {
    margin: 0;
    padding: 0.45em 0.7rem;
    background: none;
    border: 0;
    border-top: 1px solid rgba(196, 148, 58, 0.16);
    color: var(--cream-dark, #D4C8B0);
    opacity: 0.72;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-align: left;
    cursor: pointer;
}
.chat-card-setnext:hover,
.chat-card-setnext:focus-visible {
    opacity: 1;
    color: var(--gold-light, #D4A84A);
    background: rgba(196, 148, 58, 0.08);
}