/* SPDX-License-Identifier: LicenseRef-BernardEngine-Proprietary */
/* BernardPlayer web guest (Bernard Review brand), laid out like the player.

   Layout: image first (the product owner, after SyncSketch). One thin top
   bar (mark, session and clip, live, driver, seats, icon buttons), one thin
   tool row (the player's paint tools and its floating paint toolbar, values
   in popovers), the black picture filling everything else, one thin bottom
   bar (play state, one timeline strip with A and B as two thin lines, TC,
   the player's transport row in the player's order). The "Media & Session"
   dock (Playlist, Review & Notes, Chat, Participants, and the Inspector's
   Color & Image, read-only) is a drawer over the picture, closed by default
   (a bottom sheet under 900 px); the picture never shrinks when it opens.
   The page never changes the video's pixels. Full screen: the chrome floats
   and hides after 2 s.

   Colours: every colour below is a var(--br-...) token from tokens.css, loaded
   just before this file. web-client/tokens.css is a copy of branding/tokens.css
   from the player repository at commit 30ace93 (generated there from
   branding/tokens.json): do not edit it by hand, copy it again from the player.
   It gives the Sombre values by default and the Clair values to a light OS.
   The picture area stays black (--br-viewport-bg) in both modes, and what is
   written on it (A / B labels, HUD) is light in both, as in the player's mock.

   Icons: the player's PNGs (web-client/icons/, README there) used as masks:
   `.ico` paints `currentColor` through the icon's alpha, so an idle tool is
   --br-icon-idle and an active one --br-accent on --br-tool-active-bg, the
   player's Sombre and Clair rule.

   Fonts: "Geist" and "Geist Mono" 1.7.2 (SIL OFL 1.1, web-client/fonts/OFL.txt),
   served by the relay itself from /fonts as two variable fonts (every weight
   in one file each). Nothing is fetched from another origin, so a guest's
   address reaches no third party (tests/test_web_contract.py).

   Every text/background pair below is at least WCAG AA 4.5:1 in both Sombre
   and Clair; tests/test_web_contract.py checks the pairs listed in the
   contrast blocks against tokens.css (the second and third blocks are the
   text on the black viewport, which takes a different token per mode).

   Browsers: no layout rule depends on :has(); color-mix() always follows a
   plain token fallback (Safari before 16.2); mask-image is also written
   -webkit-mask-image (Safari before 15.4). */

@font-face {
    font-family: "Geist";
    src: url("/fonts/Geist-Variable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist Mono";
    src: url("/fonts/GeistMono-Variable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-sans: "Geist", system-ui, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, Consolas, monospace;

    --radius: 4px;
    --dock-width: 320px;
    --ease: 120ms ease-out;
    --ib-w: 30px;
    --ib-h: 28px;
    --touch: 28px;
}

/* contrast pairs: br-text/br-app-bg br-text/br-panel-bg br-text/br-raised-bg br-text/br-field-bg
   br-text-secondary/br-panel-bg br-text-secondary/br-raised-bg br-text-muted/br-panel-bg
   br-text-muted/br-raised-bg br-text-muted/br-field-bg br-primary-fg/br-primary-bg
   br-accent/br-panel-bg br-accent/br-raised-bg br-live/br-raised-bg br-ok-fg/br-panel-bg
   br-ok-fg/br-ok-bg br-redo-fg/br-redo-bg br-wait-fg/br-wait-bg br-text-secondary/br-app-bg
   br-text-muted/br-app-bg */

/* contrast pairs sombre: br-text/br-viewport-bg br-text-secondary/br-viewport-bg br-text/br-app-bg
   br-text-secondary/br-app-bg */

/* contrast pairs clair: br-raised-bg/br-viewport-bg br-field-border/br-viewport-bg br-raised-bg/br-text
   br-field-border/br-text */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    min-height: 100%;
    height: 100%;
    background: var(--br-app-bg);
    color: var(--br-text);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 8px; top: -40px;
    background: var(--br-primary-bg); color: var(--br-primary-fg);
    padding: 6px 10px; border-radius: var(--radius); z-index: 1000;
}
.skip-link:focus { top: 8px; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--br-accent); outline-offset: 2px; }

button, input, select { font: inherit; color: inherit; }
::placeholder { color: var(--br-text-muted); opacity: 1; }

/* Numbers, timecodes, counters and codes: Geist Mono, tabular figures. */
.timecode-display, .badge, .stream-stats, .recording-timer, .chat-time, .vhud, .vres, .vchip,
#participant-count, #fps-select, #input-email-code, #input-link, .chip, .pfield output,
.tl-corner, .tl-head-num, .tl-tick, .tchip, .pl-num, .pl-meta, .note-frame {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Small uppercase section labels (the player's Sombre labels). */
.form-group label, .playback-state-tag, .live-badge, .pfield-k, .dock-label, .dock-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--br-text-muted);
}

/* ---------- icons (the player's PNGs as masks) ---------- */

.ico {
    display: inline-block; flex: none;
    width: var(--ico, 22px); height: var(--ico, 22px);
    background-color: currentColor;
    -webkit-mask-image: var(--icon); mask-image: var(--icon);
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.i-ab { --icon: url("/icons/A_B.png"); }
.i-draw { --icon: url("/icons/draw.png"); }
.i-text { --icon: url("/icons/Text.png"); }
.i-arrow { --icon: url("/icons/Arrow.png"); }
.i-shape { --icon: url("/icons/geometry.png"); }
.i-prev-video { --icon: url("/icons/previous%20video.png"); }
.i-prev-image { --icon: url("/icons/previous%20image.png"); }
.i-play-rev { --icon: url("/icons/Backward%20play.png"); }
.i-play { --icon: url("/icons/Play.png"); }
.i-next-image { --icon: url("/icons/next%20image.png"); }
.i-next-video { --icon: url("/icons/Next%20video.png"); }
.i-loop { --icon: url("/icons/loop.png"); }
.i-sound { --icon: url("/icons/Sound.png"); }
.i-laser { --icon: url("/icons/laser.png"); }
.i-cursor { --icon: url("/icons/mouse.png"); }
.i-zoom { --icon: url("/icons/search.png"); }
.i-flip { --icon: url("/icons/Flip%20Horizontal.png"); }
.i-focus { --icon: url("/icons/focus.png"); }
.i-fullscreen { --icon: url("/icons/Full%20Screen.png"); }
.i-picker { --icon: url("/icons/picker.png"); }
.i-eraser { --icon: url("/icons/eraser.png"); }
.i-undo { --icon: url("/icons/Undo.png"); }
.i-redo { --icon: url("/icons/Redo.png"); }
/* Glyphs that fill their own canvas (not plated): drawn smaller. */
.i-hand { --icon: url("/icons/raise-hand.png"); --ico: 16px; }
.i-mic { --icon: url("/icons/microphone.png"); --ico: 16px; }
.i-logout { --icon: url("/icons/logout.png"); --ico: 16px; }
.i-chat { --icon: url("/icons/chat.png"); --ico: 16px; }
.i-crown { --icon: url("/icons/crown.png"); --ico: 14px; }
.i-send { --icon: url("/icons/send.png"); --ico: 16px; }
.i-react { --icon: url("/icons/happy-face.png"); --ico: 14px; }
.i-reply { --icon: url("/icons/reply2.png"); --ico: 14px; }
.i-eye { --icon: url("/icons/eye.png"); --ico: 16px; }
.i-notes { --icon: url("/icons/list.png"); --ico: 16px; }

/* ---------- buttons ---------- */

.btn, .seg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--touch);
    background: var(--br-raised-bg);
    color: var(--br-text);
    border: 1px solid var(--br-border);
    border-radius: var(--radius);
    padding: 3px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.btn:hover:not(:disabled), .seg-btn:hover { border-color: var(--br-text-muted); }
.btn:disabled {
    color: var(--br-text-disabled); border-color: var(--br-separator); cursor: not-allowed;
}
.btn.active, .btn[aria-pressed="true"], .seg-btn[aria-checked="true"] {
    background: var(--br-tool-active-bg); color: var(--br-text); border-color: var(--br-accent);
}
.btn[aria-pressed="true"] .ico { color: var(--br-accent); }
.btn-quiet { background: transparent; border-color: var(--br-border); color: var(--br-text-secondary); }
/* One primary action per view: join in the modal, send in the chat (the voice
   note's send while a note is being recorded). */
.btn-primary { background: var(--br-primary-bg); color: var(--br-primary-fg); border-color: var(--br-primary-bg); font-weight: 500; }
.btn-primary:hover:not(:disabled) { border-color: var(--br-text); }
.btn-primary:disabled { background: var(--br-raised-bg); }
.tab-content.recording #btn-send-chat {
    background: var(--br-raised-bg); color: var(--br-text); border-color: var(--br-border); font-weight: 400;
}
.btn-danger { color: var(--br-live); }
.btn-danger:hover:not(:disabled) { border-color: var(--br-live); }
.btn-sm { padding: 2px 8px; font-size: 13px; min-height: 24px; }
.btn-block { width: 100%; padding: 9px; }

/* Icon buttons of the transport row and the paint bar (the mock's .ib). */
.ib {
    display: inline-grid; place-items: center; flex: none;
    width: var(--ib-w); height: var(--ib-h); min-width: var(--ib-w);
    padding: 0; border: 1px solid transparent; border-radius: var(--radius);
    background: transparent; color: var(--br-icon-idle); cursor: pointer;
    transition: background-color var(--ease), color var(--ease);
}
.ib:hover { background: var(--br-raised-bg); color: var(--br-text); }
.ib[aria-pressed="true"] { background: var(--br-tool-active-bg); color: var(--br-accent); }
.ib-glyph { font-family: var(--font-sans); font-size: 18px; font-weight: 400; line-height: 1; }
[aria-disabled="true"], [aria-disabled="true"]:hover {
    color: var(--br-text-disabled); cursor: not-allowed;
}
.ib[aria-disabled="true"], .ib[aria-disabled="true"]:hover { background: transparent; }
.btn[aria-disabled="true"], .seg-btn[aria-disabled="true"] { border-color: var(--br-separator); }
.seg-btn[aria-disabled="true"][aria-checked="true"] { background: var(--br-raised-bg); }

/* The fps and px fields of the transport row. */
.chip {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    height: var(--ib-h); padding: 0 10px;
    background: var(--br-field-bg); color: var(--br-text);
    border: 1px solid var(--br-border); border-radius: var(--radius);
    font-size: 12px; cursor: default;
}
.chip-fps { color: var(--br-text-secondary); }
.chip select {
    -webkit-appearance: none; appearance: none; border: 0; background: transparent; color: var(--br-text);
    font-size: 12px; padding: 0 2px; cursor: pointer;
}
select {
    background: var(--br-field-bg); border: 1px solid var(--br-field-border); border-radius: var(--radius); padding: 3px 6px;
}
option { background: var(--br-field-bg); color: var(--br-text); }

/* ---------- top bar (one row, 40 px) ---------- */

.top-bar {
    display: flex; align-items: center; gap: 10px; flex: none;
    height: 40px; padding: 0 10px;
    padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right));
    background: var(--br-app-bg); border-bottom: 1px solid var(--br-separator);
    white-space: nowrap; min-width: 0;
}
.br-logo { display: inline-flex; align-items: center; gap: 7px; color: var(--br-text); flex: none; }
.br-logo svg { display: block; flex: none; }
.br-wordmark { font-size: 14px; font-weight: 600; color: var(--br-text); letter-spacing: 0.01em; }
.br-wordmark span { font-weight: 300; color: var(--br-text-muted); }
.tb-path { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; flex: 0 1 auto; overflow: hidden; font-size: 13px; }
.session-title { color: var(--br-text-muted); overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.sb-sep { color: var(--br-text-muted); }
.media-title { color: var(--br-text); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tb-spacer { flex: 1 1 0; min-width: 0; }
.tb-sep { width: 1px; height: 18px; background: var(--br-border); flex: none; }
.badge {
    font-size: 11px; flex: none;
    background: var(--br-raised-bg); color: var(--br-text-secondary);
    border: 1px solid var(--br-border); border-radius: var(--radius); padding: 0 6px;
}
.connection-status { display: inline-flex; align-items: center; gap: 5px; color: var(--br-text-secondary); font-size: 12px; flex: none; }
.status-indicator { width: 7px; height: 7px; border-radius: 50%; background: var(--br-text-disabled); flex: none; }
.connection-status.connecting .status-indicator { background: var(--br-redo-fg); }
.connection-status.connected .status-indicator { background: var(--br-ok-fg); }
.connection-status.connected { color: var(--br-ok-fg); }
.live-badge {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    color: var(--br-live); background: var(--br-raised-bg); font-size: 10px;
    border: 1px solid var(--br-border); border-radius: var(--radius); padding: 0 6px;
}
.live-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--br-live); }
.driver-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--br-text-secondary); font-size: 12px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.driver-chip .ico { color: var(--br-accent); }
#driver-name { overflow: hidden; text-overflow: ellipsis; }
.speaking { color: var(--br-text); font-size: 12px; min-width: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.stream-stats { font-size: 11px; color: var(--br-text-muted); flex: none; }
.user-profile { display: inline-flex; align-items: center; gap: 5px; color: var(--br-text-secondary); font-size: 12px; flex: none; }
.user-color-indicator { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* The seats (crown on the driver) are the Participants button, as in the player's session bar. */
.avatars-btn {
    position: relative; display: inline-flex; align-items: center; flex: none; gap: 2px;
    height: var(--ib-h); padding: 0 4px; border: 1px solid transparent; border-radius: var(--radius);
    background: transparent; cursor: pointer;
}
.avatars-btn:hover, .avatars-btn[aria-expanded="true"] { background: var(--br-raised-bg); }
.avatars { list-style: none; display: flex; align-items: center; }
.avatar {
    position: relative; width: 22px; height: 22px; border-radius: 50%; margin-left: -4px;
    display: inline-grid; place-items: center; font-size: 9px; font-weight: 600;
    color: var(--br-viewport-bg); border: 2px solid var(--br-app-bg);
}
.avatar:first-child { margin-left: 0; }
.avatar .ico { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); color: var(--br-accent); --ico: 11px; }
.count-dot { font-family: var(--font-mono); font-size: 11px; color: var(--br-text-secondary); padding-left: 2px; }
.ib-top { position: relative; }
.ptt-mark { position: absolute; right: 2px; bottom: 1px; font-family: var(--font-mono); font-size: 8px; color: var(--br-text-secondary); line-height: 1; }
.unread {
    position: absolute; top: 1px; right: 0; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px;
    background: var(--br-primary-bg); color: var(--br-primary-fg); font-family: var(--font-mono); font-size: 9px; line-height: 14px; text-align: center;
}
.btn-leave { min-height: var(--ib-h); padding: 2px 8px; flex: none; }
.mode-glyph {
    width: 13px; height: 13px; border-radius: 50%; border: 1.3px solid currentColor; flex: none;
    background: linear-gradient(90deg, transparent 50%, currentColor 50%);
}
.panel-glyph { width: 16px; height: 13px; border: 1.3px solid currentColor; border-radius: 2px; position: relative; flex: none; }
.panel-glyph::after { content: ""; position: absolute; top: 0; bottom: 0; right: 4px; width: 1.3px; background: currentColor; }
/* Color & Image: three overlapping rings (R, G, B), in the icon's colour. */
.color-glyph {
    width: 18px; height: 16px; flex: none;
    background:
        radial-gradient(circle at 6px 6px, transparent 3.6px, currentColor 3.9px 5.1px, transparent 5.4px),
        radial-gradient(circle at 12px 6px, transparent 3.6px, currentColor 3.9px 5.1px, transparent 5.4px),
        radial-gradient(circle at 9px 11px, transparent 3.6px, currentColor 3.9px 5.1px, transparent 5.4px);
}
.chev-glyph { width: 8px; height: 8px; border-left: 1.4px solid currentColor; border-top: 1.4px solid currentColor; transform: translateY(2px) rotate(45deg); }
#btn-tl-expand[aria-expanded="true"] .chev-glyph { transform: translateY(-2px) rotate(225deg); }

/* ---------- tool row (one row, 34 px): paint tools, colours, values, retouch ---------- */

/* position: relative keeps the .sr-only labels inside the row when it scrolls
   (an absolute child of an unpositioned scroller escapes its clip and widens
   a phone's layout viewport). */
.tool-row {
    position: relative; display: flex; align-items: center; gap: 4px; flex: none;
    height: 34px; padding: 0 8px; background: var(--br-panel-bg); border-bottom: 1px solid var(--br-separator);
    white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.tool-row::-webkit-scrollbar { display: none; }
.tool-row > * { flex: none; }
.tool-row .sep, .transport .sep { width: 1px; height: 18px; background: var(--br-border); margin: 0 5px; flex: none; }
.tool-group, .pb-group { display: flex; align-items: center; gap: 2px; }
.presets { gap: 4px; }
.shape-wrap { position: relative; display: inline-flex; }
.ib-caret {
    position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; padding: 0;
    border: 0; background: transparent; cursor: pointer; color: var(--br-icon-idle);
}
.ib-caret::before {
    content: ""; position: absolute; right: 1px; bottom: 1px; width: 0; height: 0;
    border-left: 4px solid transparent; border-top: 4px solid currentColor;
}
.color-btn {
    width: 16px; height: 16px; border-radius: 50%; flex: none; padding: 0;
    background: var(--c); border: 1px solid var(--br-border); cursor: pointer;
}
.color-btn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--br-panel-bg), 0 0 0 3px var(--br-text); }
.pcolor { display: inline-grid; place-items: center; width: 26px; height: var(--ib-h); }
.pcolor input[type="color"] {
    width: 20px; height: 20px; padding: 0; border: 1px solid var(--br-border); border-radius: var(--radius);
    background: var(--br-field-bg); cursor: pointer;
}
.pcolor input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.pcolor input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 2px; }
.pcolor input[type="color"]::-moz-color-swatch { border: 0; border-radius: 2px; }
/* Compact values: a click opens the slider (as in SyncSketch). */
.val-btn {
    display: inline-flex; align-items: baseline; gap: 5px; height: 24px; padding: 0 7px;
    background: var(--br-field-bg); border: 1px solid var(--br-field-border); border-radius: var(--radius);
    color: var(--br-text); cursor: pointer; font-size: 12px;
}
.val-btn:hover, .val-btn[aria-expanded="true"] { border-color: var(--br-text-muted); }
.val-btn output { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pfield-k { font-size: 10px; }
.ib-clear { font-size: 13px; }
.status-chip {
    font-size: 11px; color: var(--br-text-secondary); padding: 2px 8px; border-radius: 999px;
    background: var(--br-raised-bg); border: 1px solid var(--br-border);
}
.status-chip.driver { color: var(--br-ok-fg); background: var(--br-ok-bg); border-color: transparent; }

/* Popovers (fixed, placed by app.js beside their button). */
.popmenu {
    position: fixed; z-index: 450; min-width: 120px;
    display: flex; flex-direction: column; gap: 6px; padding: 6px;
    background: var(--br-raised-bg); border: 1px solid var(--br-border); border-radius: var(--radius);
}
.popmenu > button {
    text-align: left; padding: 6px 10px; border: 0; border-radius: 3px; background: transparent;
    color: var(--br-text); cursor: pointer; min-height: var(--touch);
}
.popmenu > button:hover { background: var(--br-tool-active-bg); }
.popmenu > button[aria-checked="true"] { color: var(--br-accent); }
.pop .pfield {
    display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; min-width: 180px;
    padding: 4px 6px; background: var(--br-field-bg); border: 1px solid var(--br-field-border); border-radius: var(--radius);
}
.pop .pfield output { justify-self: end; font-size: 12px; color: var(--br-text); font-family: var(--font-mono); }
.pop .pfield input[type="range"] { grid-column: 1 / 3; width: 100%; }
.pop-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.laser-options { gap: 8px; }
input[type="range"] { accent-color: var(--br-accent); height: 16px; cursor: pointer; }
input:disabled, select:disabled { cursor: not-allowed; opacity: 1; color: var(--br-text-disabled); }
.pcheck { display: inline-flex; align-items: center; gap: 6px; color: var(--br-text-secondary); font-size: 13px; white-space: nowrap; cursor: pointer; }
.pcheck input { accent-color: var(--br-accent); width: 16px; height: 16px; }
.annotation-text {
    background: var(--br-field-bg); border: 1px solid var(--br-field-border); border-radius: var(--radius);
    padding: 4px 8px; width: 260px; min-height: var(--touch);
}
.seg { display: inline-flex; }
.seg-btn { border-radius: 0; min-height: 26px; padding: 2px 8px; font-size: 12px; margin-left: -1px; }
.seg-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.seg-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }

/* ---------- workspace: the picture fills everything else ---------- */

.workspace { position: relative; flex: 1 1 auto; display: flex; min-height: 0; min-width: 0; }
.viewer { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--br-viewport-bg); }

.viewport-wrapper {
    position: relative; flex: 1; min-height: 120px;
    background: var(--br-viewport-bg); overflow: hidden;
    /* Text on the black picture: light in both modes (the player's mock). */
    --vp-fg: var(--br-text); --vp-fg2: var(--br-text-secondary); --vp-chip: var(--br-app-bg);
}
[data-br-mode="clair"] .viewport-wrapper { --vp-fg: var(--br-raised-bg); --vp-fg2: var(--br-field-border); --vp-chip: var(--br-text); }
@media (prefers-color-scheme: light) {
    :root:not([data-br-mode]) .viewport-wrapper { --vp-fg: var(--br-raised-bg); --vp-fg2: var(--br-field-border); --vp-chip: var(--br-text); }
}
#remote-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--br-viewport-bg); }
.stream-placeholder {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    max-width: calc(100% - 32px);
    background: var(--vp-chip); color: var(--vp-fg2);
    border: 1px solid var(--br-border); border-radius: var(--radius);
    font-size: 13px; padding: 8px 14px; text-align: center;
}
/* The drawing surface alone refuses the browser's gestures: pinch, pan,
   double-tap zoom, long-press menu and text selection (the page keeps them). */
.annotation-canvas {
    position: absolute; touch-action: none; cursor: crosshair;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
/* Overlays on the picture never overlap and leave its centre free (only the
   "no video" notice sits there): A top-left, B top-right (under A when they
   would touch, app.js arrangeOverlays), each at most 45 % wide with its name
   ellipsised; the paint-mode chip top-centre under them; HUD bottom-left,
   resolution bottom-right. Small, translucent, Geist Mono. */
.vchip, .vhud, .vres, .paint-banner { font-family: var(--font-mono); font-size: 10px; line-height: 1.2; letter-spacing: 0.5px; pointer-events: none; z-index: 2; white-space: nowrap; }
.vchip {
    position: absolute; top: 8px; display: flex; gap: 5px; align-items: baseline;
    padding: 3px 6px; border-radius: 2px;
    background: var(--vp-chip); background: color-mix(in srgb, var(--vp-chip) 65%, transparent);
    color: var(--vp-fg); border: 1px solid var(--br-border); max-width: 45%;
}
.vchip-k { flex: none; font-weight: 600; }
.vchip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vchip-a { left: 8px; }
.vchip-b { right: 8px; }
.vchip-b.stack { right: auto; left: 8px; top: 30px; }
.vres { position: absolute; bottom: 8px; right: 8px; color: var(--vp-fg2); max-width: 35%; overflow: hidden; font-size: 10px; }
.vhud {
    position: absolute; left: 8px; bottom: 8px; color: var(--vp-fg2); font-size: 11px;
    background: var(--vp-chip); background: color-mix(in srgb, var(--vp-chip) 55%, transparent);
    padding: 2px 6px; border-radius: 2px; max-width: calc(62% - 8px); overflow: hidden; text-overflow: ellipsis;
}
.vhud .hud-tc, .vhud .hud-frame { color: var(--vp-fg); }
.paint-banner {
    position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
    color: var(--vp-fg); background: var(--vp-chip); background: color-mix(in srgb, var(--vp-chip) 70%, transparent);
    border-left: 2px solid var(--br-live); padding: 2px 7px; border-radius: 2px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis;
}
.pb-short { display: none; }

/* ---------- bottom bar (one row, 36 px): state, one timeline strip, TC, transport ---------- */

.bottom-bar {
    position: relative; display: flex; align-items: center; gap: 8px; flex: none;
    height: 36px; padding: 0 8px; padding-bottom: env(safe-area-inset-bottom);
    background: var(--br-panel-bg); border-top: 1px solid var(--br-separator); min-width: 0;
}
.playback-state-tag { flex: none; min-width: 52px; font-size: 10px; }
.playback-state-tag.playing { color: var(--br-ok-fg); }
.tl-strip { flex: 1 1 200px; min-width: 120px; display: flex; align-items: center; gap: 6px; height: 100%; }
.tl-corner { color: var(--br-text-muted); font-size: 10px; flex: none; }
.tl-ruler {
    position: relative; flex: 1; height: 22px; border-radius: 2px;
    background: var(--br-app-bg); border: 1px solid var(--br-separator);
}
.tl-ruler:focus-within { outline: 2px solid var(--br-accent); outline-offset: 1px; }
.tl-tick { position: absolute; top: 0; font-size: 9px; line-height: 12px; color: var(--br-text-muted); transform: translateX(-50%); pointer-events: none; }
#tl-tick-1 { left: 25%; } #tl-tick-2 { left: 50%; } #tl-tick-3 { left: 75%; }
/* A and B as two thin lines inside the strip. */
.tl-line { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; pointer-events: none; }
.tl-line-a { bottom: 3px; background: var(--br-border); }
.tl-line-b { bottom: 3px; display: none; background: var(--br-accent); }
.tl-strip.ab-on .tl-line-a { bottom: 8px; }
.tl-strip.ab-on .tl-line-b { display: block; }
.tl-head { position: absolute; top: -1px; bottom: -1px; width: 1px; background: var(--br-accent); z-index: 2; pointer-events: none; left: 0; }
.tl-head::before {
    content: ""; position: absolute; top: 0; left: -4px; width: 0; height: 0;
    border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 5px solid var(--br-accent);
}
.tl-head-num { position: absolute; top: 0; left: 0; padding-left: 5px; font-family: var(--font-mono); font-size: 9px; line-height: 12px; color: var(--br-text); z-index: 3; pointer-events: none; }
.tl-input, .tl-input:disabled { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; z-index: 4; cursor: pointer; }
.tl-input:disabled { cursor: default; }
.ib-sm { width: 24px; height: 24px; min-width: 24px; }
.tc-block { flex: none; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--br-text); }
#frame-counter { color: var(--br-text-secondary); margin-left: 4px; }
.transport { position: relative; display: flex; align-items: center; gap: 1px; flex: none; }
/* fps and px as small text, not boxes. */
.chip {
    display: inline-flex; align-items: center; gap: 3px; flex: none; height: var(--ib-h); padding: 0 4px;
    background: transparent; color: var(--br-text-secondary); border: 0; font-size: 11px; cursor: default;
}
.chip select {
    -webkit-appearance: none; appearance: none; border: 0; background: transparent; color: var(--br-text);
    font-size: 11px; padding: 0; cursor: pointer; min-height: 0;
}
.ib-more { display: none; font-size: 16px; color: var(--br-text-secondary); }
.transport .ib { --ib-w: 28px; --ib-h: 28px; }

/* The two-track view of the player's timeline, on demand. */
.timeline {
    display: grid; grid-template-columns: 70px 1fr; flex: none;
    background: var(--br-app-bg); border-top: 1px solid var(--br-separator);
}
.tl-label { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 26px; color: var(--br-text-muted); background: var(--br-panel-bg); border-bottom: 1px solid var(--br-separator); }
.tchip { font-family: var(--font-mono); font-size: 10px; font-weight: 500; line-height: 1; padding: 3px 5px; border-radius: 2px; border: 1px solid var(--br-border); color: var(--br-text); }
.tchip-b { border-color: var(--br-accent); color: var(--br-accent); }
.tl-track { display: flex; align-items: center; padding: 3px 8px; border-bottom: 1px solid var(--br-separator); min-width: 0; background: var(--br-panel-bg); }
.tl-clip {
    flex: 1; height: 100%; display: flex; align-items: center; padding: 0 8px; min-width: 0;
    background: var(--br-raised-bg); border: 1px solid var(--br-border); border-radius: 2px;
    color: var(--br-text-secondary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- dock (Media & Session): a drawer over the picture ---------- */

.dock {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 30;
    width: var(--dock-width); max-width: 100%; display: flex; flex-direction: column;
    background: var(--br-panel-bg); border-left: 1px solid var(--br-border); min-height: 0;
}
.dock.collapsed { display: none; }
.dock-head { height: 32px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 12px; background: var(--br-app-bg); border-bottom: 1px solid var(--br-separator); }
.dock-title { font-size: 10px; color: var(--br-text-secondary); }
.dock-tabs { position: relative; display: flex; gap: 12px; padding: 4px 12px 0; border-bottom: 1px solid var(--br-separator); flex: none; overflow-x: auto; scrollbar-width: none; }
.dock-tabs::-webkit-scrollbar { display: none; }
/* Five tabs do not fit 320 px: the row scrolls, with a fade on the side that has more (app.js showPaintBarEdges). */
.dock-tabs.more-right { -webkit-mask-image: linear-gradient(to right, var(--br-viewport-bg) calc(100% - 32px), transparent); mask-image: linear-gradient(to right, var(--br-viewport-bg) calc(100% - 32px), transparent); }
.dock-tabs.more-left { -webkit-mask-image: linear-gradient(to right, transparent, var(--br-viewport-bg) 32px); mask-image: linear-gradient(to right, transparent, var(--br-viewport-bg) 32px); }
.dock-tabs.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, var(--br-viewport-bg) 32px, var(--br-viewport-bg) calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, var(--br-viewport-bg) 32px, var(--br-viewport-bg) calc(100% - 32px), transparent); }
.tab-btn {
    flex: none; background: transparent; border: none; padding: 7px 2px; margin-bottom: -1px; cursor: pointer; white-space: nowrap; font-size: 13px;
    color: var(--br-text-muted); border-bottom: 2px solid transparent; min-height: var(--touch);
    transition: color var(--ease), border-color var(--ease);
}
.tab-btn:hover { color: var(--br-text-secondary); }
.tab-btn.active { color: var(--br-text); border-bottom-color: var(--br-accent); }
.tab-content { display: none; flex: 1; flex-direction: column; min-height: 0; }
.tab-content.active { display: flex; }
.dock-label { padding: 10px 12px 4px; }
.dock-empty, .dock-note { padding: 8px 12px; color: var(--br-text-muted); font-size: 13px; }
.dock-note { border-top: 1px solid var(--br-separator); margin-top: auto; }

/* Playlist rows: the player's Sombre rows (accent rail and outline on the one playing). */
.playlist { list-style: none; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 2px; }
.pl-row {
    display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; width: 100%;
    min-height: 40px; padding: 4px 8px 4px 0; text-align: left;
    background: transparent; border: 1px solid transparent; border-radius: var(--radius); color: var(--br-text);
}
button.pl-row { cursor: pointer; }
button.pl-row:hover { background: var(--br-raised-bg); }
.pl-row.current { background: var(--br-playing-row-bg); border-color: var(--br-accent); box-shadow: inset 3px 0 0 var(--br-accent); }
.pl-num { justify-self: center; color: var(--br-text-muted); font-size: 12px; }
.pl-row.current .pl-num, .pl-row.current .pl-name { color: var(--br-accent); }
.pl-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-meta { display: flex; gap: 6px; align-items: center; color: var(--br-text-muted); font-size: 11px; }
.pill { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.9px; padding: 2px 6px; border-radius: 2px; background: var(--br-ok-bg); color: var(--br-ok-fg); }

.notes-list { overflow-y: auto; padding: 0 12px 8px; display: flex; flex-direction: column; gap: 10px; }
.note-clip { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--br-separator); }
.note-head { color: var(--br-text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-row {
    display: flex; justify-content: space-between; gap: 8px; align-items: center; width: 100%; min-height: 32px;
    padding: 4px 8px; text-align: left; background: var(--br-field-bg); border: 1px solid var(--br-field-border);
    border-radius: var(--radius); color: var(--br-text-secondary); font-size: 13px;
}
button.note-row { cursor: pointer; }
button.note-row:hover { border-color: var(--br-text-muted); }
.note-row.here { border-color: var(--br-accent); }
.note-frame { color: var(--br-text); }

/* ---------- Color & Image (the player's Inspector tab): the driver's grade, read-only ---------- */

.cp-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 8px; }
.cp-sec { display: flex; flex-direction: column; gap: 2px; padding: 0 12px 10px; }
.cp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; }
.cp-head .dock-label { padding: 0; }
.cp-head .status-chip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cp-hint, .cp-note { color: var(--br-text-muted); font-size: 12px; line-height: 1.4; padding: 2px 0 4px; }
.cp-note { border-top: 1px solid var(--br-separator); margin-top: 6px; padding-top: 8px; }
.cp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.cp-actions { justify-content: flex-start; }
.cp-k { color: var(--br-text-secondary); font-size: 12px; white-space: nowrap; flex: none; }
/* A value is a disabled control showing the driver's number (the player's DragFloat, greyed). */
.cp-v {
    min-width: 64px; max-width: 170px; height: 24px; padding: 0 7px; text-align: right;
    background: var(--br-field-bg); border: 1px solid var(--br-field-border); border-radius: var(--radius);
    color: var(--br-text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-v[aria-disabled="true"], .cp-v[aria-disabled="true"]:hover { color: var(--br-text); cursor: not-allowed; }
.cp-v, .cp-seg .seg-btn { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cp-name { font-family: var(--font-sans); text-align: left; }
.cp-rgb { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.cp-rgb .cp-v { min-width: 0; width: 56px; padding: 0 4px; font-size: 11px; border-left-width: 3px; }
.cp-rgb .cp-r { border-left-color: var(--br-live); }
.cp-rgb .cp-g { border-left-color: var(--br-ok-fg); }
.cp-rgb .cp-b { border-left-color: var(--br-accent); }
.cp-swatch { width: 14px; height: 14px; border-radius: 2px; border: 1px solid var(--br-border); background: var(--br-field-bg); flex: none; }
/* The driver's choice stays readable in a disabled segment: the pressed one in the text colour, outlined. */
.cp-seg .seg-btn { min-height: 24px; padding: 1px 7px; font-size: 11px; }
.cp-seg .seg-btn[aria-disabled="true"] { color: var(--br-text-muted); }
.cp-seg .seg-btn[aria-disabled="true"][aria-checked="true"] {
    color: var(--br-text); border-color: var(--br-accent); background: var(--br-tool-active-bg); position: relative;
}
.cp-fold { border-top: 1px solid var(--br-separator); margin-top: 4px; }
.cp-fold > summary {
    display: flex; align-items: center; gap: 6px; min-height: 28px; cursor: pointer; list-style: none;
    color: var(--br-text); font-size: 12px; font-weight: 500;
}
.cp-fold > summary::-webkit-details-marker { display: none; }
.cp-fold > summary::before {
    content: ""; width: 6px; height: 6px; border-right: 1.4px solid var(--br-text-muted); border-bottom: 1.4px solid var(--br-text-muted);
    transform: rotate(-45deg); margin: 0 3px 0 1px; flex: none;
}
.cp-fold[open] > summary::before { transform: rotate(45deg); }
.cp-fold > .cp-row { padding-left: 14px; }
/* Next to the live badge, only while the driver's grade is not neutral: every guest knows the picture is modified. */
.grade-chip {
    display: inline-flex; align-items: center; gap: 5px; flex: 0 0.3 auto; min-width: 0; max-width: 300px; overflow: hidden;
    font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; white-space: nowrap;
    color: var(--br-redo-fg); background: var(--br-redo-bg); border-radius: var(--radius); padding: 0 6px;
}
.grade-chip .gc-long { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* On a desktop the chip is read whole: the session id (also in the dock and the invitation) gives it its room. */
@media (min-width: 1200px) {
    .grade-chip { flex-shrink: 0; }
    body.graded .badge { display: none; }
}
/* On a phone: a dot on the Color & Image button instead (the top bar has no room for the chip). */
.gc-dot { display: none; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--br-redo-fg); }

/* ---------- chat ---------- */

.chat-messages { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.chat-bubble {
    background: var(--br-raised-bg); border: 1px solid var(--br-separator); border-radius: var(--radius);
    padding: 7px 10px; max-width: 92%;
}
.chat-bubble.own { align-self: flex-end; border-color: var(--br-border); }
.chat-bubble.other { align-self: flex-start; }
.chat-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--br-text-muted); }
.chat-sender { font-weight: 600; color: var(--br-text-secondary); }
.chat-quote { border-left: 2px solid var(--br-border); padding-left: 6px; margin: 4px 0; color: var(--br-text-muted); font-size: 13px; }
.chat-text { white-space: pre-wrap; word-break: break-word; -webkit-user-select: text; user-select: text; }
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaction-chip {
    background: var(--br-field-bg); color: var(--br-text); border: 1px solid var(--br-field-border); border-radius: var(--radius);
    padding: 0 7px; cursor: pointer; font-size: 13px; font-variant-numeric: tabular-nums; min-height: 24px;
}
.reaction-chip.mine { border-color: var(--br-accent); }
.chat-actions { display: flex; gap: 6px; margin-top: 4px; }
.emoji-picker { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.emoji-btn {
    background: var(--br-field-bg); border: 1px solid var(--br-field-border); border-radius: var(--radius);
    padding: 2px 6px; font-size: 16px; cursor: pointer; min-width: 32px; min-height: 32px;
}
.emoji-btn:hover { border-color: var(--br-text-muted); }

.reply-bar, .voice-recording-bar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 6px 10px; border-top: 1px solid var(--br-separator); color: var(--br-text-secondary); font-size: 13px;
}
.pulsing-record-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--br-live); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }
.recording-timer { color: var(--br-text); }

.chat-form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--br-separator); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.chat-form input {
    flex: 1; min-width: 0; background: var(--br-field-bg); border: 1px solid var(--br-field-border);
    border-radius: var(--radius); padding: 6px 8px; min-height: var(--touch);
}

/* Participants: rows between hairlines, no filled cards. */
.participants-list { list-style: none; padding: 0 12px; display: flex; flex-direction: column; overflow-y: auto; }
.participant-card {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 0 8px 8px; border-bottom: 1px solid var(--br-separator); border-left: 2px solid transparent;
}
.participant-card.is-driver { border-left-color: var(--br-accent); }
/* Initials on the seat's own colour (set by app.js): black, like the picture. */
.participant-dot {
    width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; color: var(--br-viewport-bg);
}
.participant-name { flex: 1; min-width: 80px; }
.participant-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag {
    font-size: 12px; padding: 0 6px; border-radius: var(--radius);
    background: var(--br-wait-bg); color: var(--br-wait-fg); border: 1px solid transparent;
}
.tag-driver { background: var(--br-raised-bg); color: var(--br-accent); border-color: var(--br-accent); }
.tag-hand { background: var(--br-redo-bg); color: var(--br-redo-fg); }
.tag-live { background: var(--br-ok-bg); color: var(--br-ok-fg); }
.tag-speaking { background: var(--br-ok-bg); color: var(--br-ok-fg); font-weight: 600; }

/* ---------- modal ---------- */

.modal-overlay {
    position: fixed; inset: 0; background: var(--br-viewport-bg); background: color-mix(in srgb, var(--br-viewport-bg) 75%, transparent);
    display: flex; align-items: center; justify-content: center; z-index: 500; padding: 16px; overflow-y: auto;
}
.modal-card {
    background: var(--br-panel-bg); border: 1px solid var(--br-border); border-radius: var(--radius);
    padding: 20px; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 14px; margin: auto;
}
.modal-card h2 { font-size: 18px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--br-separator); }
.modal-error {
    background: var(--br-field-bg); color: var(--br-text);
    border: 1px solid var(--br-field-border); border-left: 2px solid var(--br-live);
    border-radius: var(--radius); padding: 8px 10px;
}
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group input {
    background: var(--br-field-bg); border: 1px solid var(--br-field-border); border-radius: var(--radius); padding: 8px;
    font-size: 16px; /* 16 px: iOS Safari does not zoom into the field */
}
/* The e-mail code step of the join form. */
#input-email-code { font-size: 18px; letter-spacing: 0.3em; }
.code-hint { color: var(--br-text-muted); font-size: 13px; }
.form-group .btn-sm { align-self: flex-start; }

/* ---------- full screen: the chrome floats over the picture and hides after 2 s ---------- */

body.fs .top-bar, body.fs .tool-row, body.fs .bottom-bar, body.fs .timeline {
    position: fixed; left: 0; right: 0; z-index: 420;
    background: var(--br-app-bg); background: color-mix(in srgb, var(--br-app-bg) 82%, transparent);
    transition: opacity 250ms ease-out;
}
body.fs .top-bar { top: 0; }
body.fs .tool-row { top: 40px; }
body.fs .bottom-bar { bottom: 0; }
body.fs .timeline { bottom: 36px; }
body.fs.chrome-hidden .top-bar, body.fs.chrome-hidden .tool-row, body.fs.chrome-hidden .bottom-bar, body.fs.chrome-hidden .timeline {
    opacity: 0; pointer-events: none;
}
body.fs.chrome-hidden { cursor: none; }

/* ---------- touch and narrow screens ---------- */

/* Coarse pointers (finger, pencil) and anything under 900 px: 40 px targets. */
@media (pointer: coarse), (max-width: 899px) {
    :root { --ib-w: 40px; --ib-h: 40px; --touch: 40px; }
    .top-bar { height: 48px; gap: 6px; }
    .tool-row { height: 48px; }
    .bottom-bar { height: auto; min-height: 48px; }
    body.fs .tool-row { top: 48px; }
    .transport .ib { --ib-w: 40px; --ib-h: 40px; }
    .color-btn { width: 40px; height: 40px; border: 0; background: radial-gradient(circle, var(--c) 0 9px, var(--br-border) 9.5px 10.5px, transparent 11px); }
    .color-btn[aria-pressed="true"] { box-shadow: none; background: radial-gradient(circle, var(--c) 0 9px, var(--br-panel-bg) 9.5px 11px, var(--br-text) 11.5px 13px, transparent 13.5px); }
    .presets { gap: 0; }
    /* The shape caret becomes its own 40 px button beside Shape. */
    .ib-caret { position: relative; right: auto; bottom: auto; width: 40px; height: 40px; }
    .ib-caret::before { right: 16px; bottom: 18px; border-left-width: 5px; border-right: 5px solid transparent; border-top-width: 6px; }
    .pcolor { width: 40px; }
    .val-btn { height: 40px; }
    .ib-sm { width: 40px; height: 40px; min-width: 40px; }
    .avatars-btn { min-width: 40px; }
    .btn-leave { min-height: 40px; }
    .pcheck { min-height: 40px; }
    .pcheck input { width: 20px; height: 20px; }
    input[type="range"] { height: 28px; }
    .seg-btn { min-height: 40px; }
    .btn-sm { min-height: 40px; }
    .reaction-chip { min-height: 36px; }
    .emoji-btn { min-width: 40px; min-height: 40px; }
    select { min-height: 40px; }
    .tab-btn { min-height: 40px; min-width: 40px; }
    .popmenu > button { min-height: 40px; }
    .cp-fold > summary, .cp-row { min-height: 40px; }
    .cp-v { height: 40px; }
    .cp-seg .seg-btn { min-height: 40px; min-width: 40px; }
}

/* Under 1200 px the bottom bar takes two lines: the strip, then state, TC and transport. */
@media (max-width: 1199px) {
    :root { --dock-width: 320px; }
    .bottom-bar { flex-wrap: wrap; height: auto; padding: 2px 8px; row-gap: 0; }
    .tl-strip { flex: 1 1 100%; order: -1; height: 30px; }
    .transport { flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; }
    .user-profile, .badge { display: none; }
}

/* Under 900 px: the mark alone, and the dock is a bottom sheet over the picture. */
@media (max-width: 899px) {
    .br-wordmark, .stream-stats, .speaking, .session-title, .sb-sep { display: none; }
    .dock {
        position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 72vh; z-index: 430;
        border-left: 0; border-top: 1px solid var(--br-border); border-radius: 10px 10px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .dock-head { border-radius: 10px 10px 0 0; }
}

/* Phones, upright (767 px and narrower) or sideways (a short screen): fewer items
   in the top bar, the tool row scrolls with a fade on the side that has more, the
   transport row keeps what this seat can use and hides the rest behind "…". */
@media (max-width: 767px), (max-width: 950px) and (max-height: 500px) {
    .top-bar { gap: 4px; padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }
    .connection-status #status-text, .live-badge, .tb-sep, .count-dot, #btn-ptt, #btn-mode { display: none; }
    /* Room for Color & Image: Review & Notes stays one tab away in the sheet; the grade chip becomes a dot on the
       Color & Image button (the live badge it sits next to is hidden here too). */
    #btn-dock-notes, .grade-chip { display: none; }
    body.graded #btn-dock-color .gc-dot { display: block; }
    .driver-chip { max-width: 90px; }
    .btn-leave .btn-label { display: none; }
    .btn-leave { min-width: 40px; }
    .tool-row { scroll-snap-type: x proximity; scroll-padding-inline: 8px; overscroll-behavior-x: contain; }
    .tool-row > * { scroll-snap-align: start; }
    .tool-row .tb-spacer { display: none; }
    .tool-row.more-right, .transport.more-right { -webkit-mask-image: linear-gradient(to right, var(--br-viewport-bg) calc(100% - 36px), transparent); mask-image: linear-gradient(to right, var(--br-viewport-bg) calc(100% - 36px), transparent); }
    .tool-row.more-left, .transport.more-left { -webkit-mask-image: linear-gradient(to right, transparent, var(--br-viewport-bg) 36px); mask-image: linear-gradient(to right, transparent, var(--br-viewport-bg) 36px); }
    .tool-row.more-left.more-right, .transport.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, var(--br-viewport-bg) 36px, var(--br-viewport-bg) calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, var(--br-viewport-bg) 36px, var(--br-viewport-bg) calc(100% - 36px), transparent); }
    .pb-long { display: none; }
    .pb-short { display: inline; }
    /* One line that scrolls, like the tool row: the baton never changes its height (the picture stays put). */
    .transport { gap: 0; flex: 1 1 0; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; }
    .transport::-webkit-scrollbar { display: none; }
    .transport > * { flex: none; scroll-snap-align: start; }
    .transport .sep { display: none; }
    .transport:not(.show-all) > [aria-disabled="true"], .transport:not(.show-all) > .chip { display: none; }
    .ib-more { display: inline-grid; }
    .tc-block { font-size: 11px; }
    .playback-state-tag { min-width: 0; }
    .annotation-text { width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
    .pulsing-record-dot { animation: none; }
    .btn, .ib, .tab-btn { transition: none; }
    body.fs .top-bar, body.fs .tool-row, body.fs .bottom-bar { transition: none; }
}

/* The legal pages, plain links under the join form (docs/legal/, /legal/). */
.modal-legal { margin-top: 10px; font-size: 12px; text-align: center; color: var(--br-text-muted); }
.modal-legal a { color: var(--br-text-secondary); }