/* ==========================================================================
   meet. — PIXEL UPLINK design system
   Source of truth: design.md. Every colour, size and duration below comes
   from a token. Add a token before adding a literal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens
   -------------------------------------------------------------------------- */
:root {
    color-scheme: dark;

    /* --- raw palette (shared with the pixel-art illustration) --- */
    --magenta-500: #ff007f;
    --magenta-400: #ff4d9d;     /* magenta as text on dark surfaces */
    --magenta-600: #d9006c;     /* pressed fill */
    --cyan-500:    #00f0ff;
    --violet-500:  #7b2cbf;     /* structure, decorative only (2.8:1) */
    --violet-300:  #a77bff;     /* violet as text/icon (6.5:1) */
    --yellow-500:  #ffe600;
    --green-500:   #39ff14;
    --red-500:     #ff3b5c;
    --red-600:     #e0203f;     /* pressed fill */

    /* --- surfaces --- */
    --void:      #06070c;       /* behind video, letterboxing */
    --bg:        #0a0b10;       /* app ground */
    --bar:       #0d0e1b;       /* header, dock */
    --surface-1: #121324;       /* panels: gate, drawer, menus, tiles */
    --surface-2: #1b1c3a;       /* raised: inputs, bubbles, items */
    --surface-3: #26284f;       /* hover on raised */
    --scrim:     rgb(10 11 16 / .86);

    /* --- text --- */
    --text-1: #f4f2ff;          /* 16.6:1 on surface-1 */
    --text-2: #b9b6d9;          /*  9.4:1 */
    --text-3: #8e8bb5;          /*  5.7:1, metadata only */
    --ink:    #0a0b10;          /* text/icons on neon fills (5.2–15.5:1) */

    /* --- semantic roles: one job per hue --- */
    --role-brand:      var(--magenta-500);  /* brand, primary action, you, device off */
    --role-brand-text: var(--magenta-400);
    --role-info:       var(--cyan-500);     /* system, focus, others, engaged toggle */
    --role-live:       var(--green-500);    /* active speaker, nothing else */
    --role-time:       var(--yellow-500);   /* TTL, pinned, system notes, raised hand */
    --role-danger:     var(--red-500);      /* leave, recording, destructive */
    --role-struct:     var(--violet-500);   /* resting frames */

    /* --- lines --- */
    --line:        rgb(0 240 255 / .22);
    --line-strong: rgb(0 240 255 / .55);    /* ≥3:1 against surface-1 */

    /* --- pixel grid & spacing (1 px-unit = 4px) --- */
    --px: 4px;
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
    --stroke: 2px;
    --notch: 4px;               /* stepped pixel corner, where supported */
    --tap: 44px;                /* minimum touch target */

    /* --- elevation: hard pixel shadows, never blurred --- */
    --shadow-color: #000;
    --elev-1: 2px 2px 0 var(--shadow-color);
    --elev-2: 4px 4px 0 var(--shadow-color);
    --elev-hero: 6px 6px 0 var(--role-info);   /* duo offset, once per screen */

    /* --- the diagonal (matches the background bands) --- */
    --angle: -12deg;
    --stripe: repeating-linear-gradient(calc(90deg + var(--angle)), currentColor 0 6px, transparent 6px 12px);

    /* --- type: system stacks, zero webfont bytes --- */
    --font-ui:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
    --fs-display: 1.5rem;       /* 24 */
    --fs-title:   1.125rem;     /* 18 */
    --fs-body:    1rem;         /* 16 */
    --fs-small:   0.875rem;     /* 14 — the floor */
    --lh-tight: 1.2;
    --lh-body:  1.45;

    /* --- motion --- */
    --t-press: 80ms;
    --t-fast:  120ms;
    --t-base:  200ms;
    --ease-out: cubic-bezier(.2, .8, .2, 1);

    /* --- device safe areas: canvas is full-bleed; UI opts into these --- */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /* --- z ladder --- */
    --z-bg: 0; --z-app: 1; --z-tile-ui: 10; --z-handle: 15; --z-gutter: 100;
    --z-dock: 999; --z-pip: 2000; --z-menu: 2200; --z-drawer: 2500;
    --z-emoji: 3000; --z-sheet: 3500; --z-toast: 4000;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The app canvas occupies the complete viewport. Backgrounds and video may
   paint below rounded corners/notches; individual UI surfaces add safe-area
   padding where people need to read or interact with them. */
html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--bg);
    color: var(--text-1);
    font: 400 var(--fs-body)/var(--lh-body) var(--font-ui);
    -webkit-font-smoothing: antialiased;
}
body {
    position: fixed;
    inset: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

button, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: var(--role-info); }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--role-info); outline-offset: 2px; }

.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;
}

/* Pixel icons: 16-unit grid, drawn at 16/24/32 px only so pixels stay whole */
.icon { width: 24px; height: 24px; flex: none; fill: currentColor; shape-rendering: crispEdges; }
.icon--16 { width: 16px; height: 16px; }

/* Stepped pixel corners (progressive: square where unsupported) */
@supports (corner-shape: notch) {
    .setup-box, .primary-btn, .secondary-btn, .share-btn, .dock-btn, .video-tile,
    #camMenu, #reactionMenu, #micMenu, #soundMenu, .chat-drawer, .toast, .file-card, .file-dl-btn,
    .avatar-placeholder, .name-tag, .field input {
        corner-shape: notch;
        border-radius: var(--notch);
    }
    #tile_local_camera { border-radius: var(--notch) !important; }
    @media (max-width: 768px) { .chat-drawer { border-radius: 0; } }
}

/* --------------------------------------------------------------------------
   2. Gate (join screen)
   -------------------------------------------------------------------------- */
.gate {
    position: relative;
    z-index: var(--z-app);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
    padding-top: calc(var(--s-6) + var(--safe-top));
    padding-right: calc(var(--s-4) + var(--safe-right));
    padding-bottom: calc(var(--s-6) + var(--safe-bottom));
    padding-left: calc(var(--s-4) + var(--safe-left));
    overflow: auto;
}
/* focus scrim: the art stays visible at the edges, calm behind the form */
.gate::before {
    content: "";
    position: fixed; inset: 0;
    background: radial-gradient(closest-side, rgb(10 11 16 / .78), rgb(10 11 16 / .35) 70%, transparent);
    background-size: min(760px, 140vw) min(760px, 140vh);
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: -1;
}

.setup-box {
    position: relative;
    width: min(100%, 360px);
    padding: var(--s-8) var(--s-6) var(--s-6);
    background: var(--surface-1);
    border: var(--stroke) solid var(--role-brand);
    box-shadow: var(--elev-hero);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}
/* diagonal hazard strip — the band angle, echoed once */
.setup-box::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    color: var(--role-brand);
    background: var(--stripe);
    opacity: .9;
}

.wordmark { display: block; width: 168px; height: auto; margin: 0 auto; }
.wm-letters { fill: var(--role-brand); }
.wm-dot     { fill: var(--role-info); }
.wm-shadow  { fill: var(--role-struct); }

.tagline {
    margin: calc(var(--s-2) * -1) 0 var(--s-2);
    text-align: center;
    font-size: var(--fs-small);
    color: var(--text-2);
}

.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field label { font-size: var(--fs-small); font-weight: 600; color: var(--text-2); }
.field label .opt { font-weight: 400; color: var(--text-3); }
.field-hint {
    font: var(--fs-small)/var(--lh-tight) var(--font-mono);
    color: var(--text-3);

    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.field-hint b { font-weight: 400; color: var(--role-info); }

input[type="text"], input[type="password"] {
    width: 100%;
    min-height: var(--tap);
    padding: 10px 12px;
    font-size: var(--fs-body);           /* ≥16px: no iOS zoom on focus */
    color: var(--text-1);
    background: var(--surface-2);
    border: var(--stroke) solid var(--line-strong);
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--t-fast) var(--ease-out);
}
input::placeholder { color: var(--text-3); opacity: 1; }
input:hover { border-color: var(--role-info); }
input:focus-visible { border-color: var(--role-info); outline: 2px solid var(--role-info); outline-offset: 2px; }
input[aria-invalid="true"], input[aria-invalid="true"]:focus-visible { border-color: var(--role-danger); }
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
    -webkit-text-fill-color: var(--text-1);
}

.form-error {
    display: flex; gap: var(--s-2); align-items: flex-start;
    margin: 0;
    font-size: var(--fs-small);
    color: var(--role-danger);
}
.form-error:empty { display: none; }

.gate-footer {
    display: flex; justify-content: center;
    font-size: var(--fs-small);
}
.repo-link {
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: var(--tap);
    padding: 0 var(--s-2);
    color: var(--text-2);
    text-decoration: none;
    background: var(--scrim);
}
.repo-link svg { width: 20px; height: 20px; fill: currentColor; }

.gate-footer { flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.theme-switch {
    display: inline-flex;
    padding: 2px;
    background: var(--scrim);
    border: var(--stroke) solid var(--line-strong);
}
.theme-switch button {
    min-height: 40px;
    min-width: 72px;
    padding: 0 var(--s-3);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--text-2);
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}
.theme-switch button[aria-checked="true"] { color: var(--ink); background: var(--role-info); }
.theme-switch button { position: relative; }
.theme-switch button::before { content: ""; position: absolute; inset: -2px 0; }   /* 44px hit area */
.repo-link:hover { color: var(--role-info); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.primary-btn, .secondary-btn, .share-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: var(--tap);
    padding: 0 var(--s-4);
    font-weight: 700;
    line-height: var(--lh-tight);
    border: var(--stroke) solid transparent;
    border-radius: 0;
    cursor: pointer;
    box-shadow: var(--elev-1);
    transition: transform var(--t-press) linear, box-shadow var(--t-press) linear, background-color var(--t-fast) var(--ease-out);
}
.primary-btn:active:not(:disabled), .secondary-btn:active, .share-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.primary-btn {
    width: 100%;
    min-height: 48px;
    font-size: var(--fs-body);
    color: var(--ink);
    background: var(--role-brand);
    border-color: var(--role-brand);
    box-shadow: var(--elev-2);
}
.primary-btn:hover:not(:disabled) { background: var(--magenta-400); }
.primary-btn:active:not(:disabled) { background: var(--magenta-600); }
.primary-btn:disabled { cursor: progress; opacity: .7; }

.secondary-btn, .share-btn {
    font-size: var(--fs-small);
    color: var(--role-info);
    background: var(--surface-1);
    border-color: var(--role-info);
    white-space: nowrap;
}
.secondary-btn:hover, .share-btn:hover { background: var(--surface-3); }
@media (max-width: 480px) {
    .share-btn { min-width: var(--tap); padding: 0; }
    .share-btn .btn-label { display: none; }
}

/* --------------------------------------------------------------------------
   4. Room header
   -------------------------------------------------------------------------- */
#room-header {
    display: none;
    position: relative;
    z-index: var(--z-app);
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    min-height: 56px;
    padding-top: calc(var(--s-2) + var(--safe-top));
    padding-right: calc(var(--s-5) + var(--safe-right));
    padding-bottom: var(--s-2);
    padding-left: calc(var(--s-5) + var(--safe-left));
    background: var(--bar);
    border-bottom: var(--stroke) solid var(--role-info);
    flex-shrink: 0;
}
.channel {
    display: flex; align-items: baseline; gap: var(--s-2);
    min-width: 0;
}
.channel-label { font-size: var(--fs-small); color: var(--text-3); }
.channel-id {
    font: 600 var(--fs-body)/var(--lh-tight) var(--font-mono);
    color: var(--role-info);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.header-actions { display: flex; align-items: center; gap: var(--s-3); }

.rec-chip {
    display: none;
    align-items: center; gap: var(--s-2);
    padding: 2px var(--s-2);
    font: 600 var(--fs-small)/var(--lh-tight) var(--font-mono);
    color: var(--role-danger);
    border: var(--stroke) solid var(--role-danger);
}
.rec-chip::before { content: ""; width: 8px; height: 8px; background: currentColor; animation: blink 1s steps(1) infinite; }
body.is-recording .rec-chip { display: inline-flex; }

/* --------------------------------------------------------------------------
   5. Video workspace
   -------------------------------------------------------------------------- */
#video-container {
    display: none;
    position: relative;
    z-index: var(--z-app);
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow: hidden;
    background: var(--bg);
}

.grid { display: grid; gap: var(--s-3); width: 100%; height: 100%; overflow: hidden; position: relative; }
@media (max-width: 768px) { .grid { gap: var(--s-2); } }

/* Desktop: chat docks as a side panel — grid shrinks, videos stay visible */
@media (min-width: 769px) { body.chat-open .grid { width: calc(100% - 352px); } }
/* Mobile: chat is a bottom sheet — videos remain visible above it */
@media (max-width: 768px) { body.chat-open .grid { height: calc(100% - 55dvh); } }

/* The drawer lives inside #video-container (z-index: 1), so its own z-index is
   trapped in this stacking context and the dock (999) paints over it. Raise
   the container above the dock while the sheet is open — the sheet is the only
   thing in it that reaches the dock's screen area, so nothing else changes. */
@media (max-width: 768px) { body.chat-open #video-container { z-index: 1000; } }

/* --- tile --- */
.video-tile {
    position: relative;
    display: flex; justify-content: center; align-items: center;
    min-width: 0; min-height: 0;
    overflow: hidden;
    background: var(--surface-1);
    border: var(--stroke) solid var(--role-struct);
    cursor: pointer;
    contain: layout paint style;
}
@media (hover: hover) { .video-tile:hover { border-color: var(--violet-300); } }

/* state frame: drawn on ::after so it paints above the video (an inset box-shadow would sit under it) */
.video-tile::after {
    content: "";
    position: absolute; inset: 0;
    z-index: 9;
    border: 2px solid transparent;
    border-radius: inherit;
    pointer-events: none;
}
/* state: live audio — hard 4px frame (border + ring), instant, no blur */
.video-tile.speaking { border-color: var(--role-live); }
.video-tile.speaking::after { border-color: var(--role-live); }
/* state: presentation focus */
.grid.has-maximized .video-tile.maximized { border-color: var(--role-info); z-index: 5; }
.grid.has-maximized .video-tile.maximized::after { border-color: var(--role-info); }
.grid.has-maximized .video-tile.maximized.speaking { border-color: var(--role-live); }
.grid.has-maximized .video-tile.maximized.speaking::after { border-color: var(--role-live); }
/* state: pinned by the user */
.video-tile.is-pinned::before {
    content: "Pinned";
    position: absolute; top: 8px; left: 8px;
    z-index: var(--z-tile-ui);
    padding: 2px 8px;
    font: 600 var(--fs-small)/var(--lh-tight) var(--font-ui);
    color: var(--ink);
    background: var(--role-info);
    pointer-events: none;
}

video {
    width: 100%; height: 100%;
    object-fit: cover;
    background: var(--void);
    pointer-events: none !important;
    -webkit-user-select: none; user-select: none;
    position: relative; z-index: 2;
}
.video-tile.screen-share video { object-fit: contain !important; background: var(--void) !important; }

/* the whole tile is one button (pin / unpin) */
.touch-shield {
    position: absolute; inset: 0;
    z-index: 8;
    background: transparent;
    pointer-events: auto !important;
}
.touch-shield:focus-visible { outline: 2px solid var(--role-info); outline-offset: -6px; }

.name-tag {
    position: absolute; bottom: 8px; left: 8px;
    z-index: var(--z-tile-ui);
    display: inline-flex; align-items: center; gap: 6px;
    max-width: calc(100% - 16px);
    padding: 2px 8px;
    font: 600 var(--fs-small)/var(--lh-tight) var(--font-ui);
    color: var(--role-info);
    background: var(--scrim);
    border: 1px solid var(--line-strong);
    pointer-events: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* speaking is never colour-only: a pixel marker appears in the tag */
.video-tile.speaking .name-tag::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--role-live); }

/* --- procedural pixel avatar (art from main, pixel frame) --- */
.avatar-placeholder {
    position: absolute;
    width: 80px; height: 80px;
    max-width: 52%; max-height: 55%;
    aspect-ratio: 1;
    display: flex; justify-content: center; align-items: center;
    background: var(--bar);
    border: var(--stroke) solid var(--av-c1, var(--role-brand));
    box-shadow: var(--elev-2);
    overflow: hidden;
    z-index: 1;
}
.avatar-placeholder::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 50% 120%, var(--av-glow, rgb(0 240 255 / .35)), transparent 60%),
        repeating-linear-gradient(to bottom, rgb(255 255 255 / .06) 0 2px, transparent 2px 4px);
}
.avatar-placeholder.av0 { --av-c1: #ff007f; --av-c2: #00f0ff; --av-skin: #f2b88a; --av-glow: rgb(255 0 127 / .4); }
.avatar-placeholder.av1 { --av-c1: #00f0ff; --av-c2: #7b2cbf; --av-skin: #9aa3b2; --av-glow: rgb(0 240 255 / .4); }
.avatar-placeholder.av2 { --av-c1: #ffe600; --av-c2: #ff007f; --av-skin: #c98d5e; --av-glow: rgb(255 230 0 / .35); }
.avatar-placeholder.av3 { --av-c1: #39ff14; --av-c2: #00f0ff; --av-skin: #8a9bb0; --av-glow: rgb(57 255 20 / .35); }
.avatar-placeholder.av4 { --av-c1: #a77bff; --av-c2: #ff007f; --av-skin: #e8a17a; --av-glow: rgb(123 44 191 / .5); }
.avatar-placeholder.av5 { --av-c1: #00f0ff; --av-c2: #ffe600; --av-skin: #5b6472; --av-glow: rgb(0 240 255 / .4); }
.cyber-avatar { position: relative; width: 56%; height: 62%; image-rendering: pixelated; }
.cyber-avatar .ca-head  { position: absolute; left: 50%; top: 12%; width: 68%; height: 56%; transform: translateX(-50%); background: var(--av-skin); box-shadow: 0 0 0 3px var(--bg); }
.cyber-avatar .ca-hair  { position: absolute; left: 50%; top: 0; width: 76%; height: 22%; transform: translateX(-50%); background: var(--av-c1); box-shadow: 0 0 0 3px var(--bg); }
.cyber-avatar .ca-visor { position: absolute; left: 50%; top: 42%; width: 72%; height: 20%; transform: translateX(-50%); background: linear-gradient(90deg, var(--av-c1) 0 60%, var(--bg) 60% 70%, var(--av-c2) 70% 100%); border: 2px solid var(--bg); }
.avatar-placeholder.av2 .ca-visor { height: 26%; background: linear-gradient(90deg, var(--bg) 0 20%, var(--av-c2) 20% 45%, var(--bg) 45% 55%, var(--av-c2) 55% 80%, var(--bg) 80%); }
.avatar-placeholder.av4 .ca-visor { clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%); }
.cyber-avatar .ca-body  { position: absolute; left: 50%; bottom: 0; width: 84%; height: 30%; transform: translateX(-50%); background: linear-gradient(90deg, var(--av-c1) 0 22%, var(--surface-2) 22% 78%, var(--av-c1) 78%); box-shadow: 0 0 0 3px var(--bg); }
.cyber-avatar .ca-body::after { content: ""; position: absolute; left: 50%; top: 28%; width: 8px; height: 8px; transform: translateX(-50%); background: var(--av-c2); }
.cyber-avatar .ca-ear   { position: absolute; top: 34%; width: 8%; height: 14%; background: var(--av-c2); box-shadow: 0 0 0 2px var(--bg); }
.cyber-avatar .ca-ear.l { left: 12%; }
.cyber-avatar .ca-ear.r { right: 12%; }

/* --- local floating PiP --- */
#tile_local_camera {
    position: absolute !important;
    bottom: calc(15px + var(--safe-bottom)) !important;
    right: calc(15px + var(--safe-right)) !important;
    width: 160px !important; height: 120px !important;
    z-index: var(--z-pip) !important;
    border: var(--stroke) solid var(--role-brand) !important;
    box-shadow: var(--elev-2) !important;
    border-radius: 0 !important;
    transform: translateZ(0) !important;
}
#tile_local_camera.speaking { border-color: var(--role-live) !important; }
#tile_local_camera .name-tag { color: var(--role-brand-text); border-color: rgb(255 0 127 / .6); }
#tile_local_camera video { transform: none; }
#tile_local_camera.mirror-mode video { transform: scaleX(-1) !important; }
@media (max-width: 600px) and (min-height: 501px) {
    #tile_local_camera {
        width: 110px !important; height: 85px !important;
        bottom: calc(10px + var(--safe-bottom)) !important;
        right: calc(10px + var(--safe-right)) !important;
    }
}

/* presentation mode: local camera joins the sidebar */
.grid.has-maximized #tile_local_camera {
    position: relative !important;
    bottom: auto !important; right: auto !important;
    width: 100% !important; height: 100% !important;
    box-shadow: none !important;
    z-index: var(--z-tile-ui) !important;
}
@media (min-width: 769px) {
    .grid.has-maximized #tile_local_camera:not(.maximized) { margin-top: 20px !important; height: calc(100% - 20px) !important; border-top: 4px dashed var(--role-brand) !important; }
}
@media (max-width: 768px) {
    .grid.has-maximized #tile_local_camera:not(.maximized) { margin-left: 18px !important; width: calc(100% - 18px) !important; border-left: 4px dashed var(--role-brand) !important; }
}

/* --- resize handles --- */
.pip-resize-handle {
    position: absolute; top: 0; left: 0;
    width: 24px; height: 24px;
    z-index: var(--z-handle);
    cursor: nwse-resize;
    touch-action: none;
    /* pixel staircase triangle */
    background:
        linear-gradient(var(--role-brand), var(--role-brand)) 0 0 / 24px 4px no-repeat,
        linear-gradient(var(--role-brand), var(--role-brand)) 0 4px / 20px 4px no-repeat,
        linear-gradient(var(--role-brand), var(--role-brand)) 0 8px / 16px 4px no-repeat,
        linear-gradient(var(--role-brand), var(--role-brand)) 0 12px / 12px 4px no-repeat,
        linear-gradient(var(--role-brand), var(--role-brand)) 0 16px / 8px 4px no-repeat,
        linear-gradient(var(--role-brand), var(--role-brand)) 0 20px / 4px 4px no-repeat;
    opacity: .7;
}
.pip-resize-handle::after { content: ""; position: absolute; inset: -10px; }   /* 44px hit area */
.pip-resize-handle:hover, .pip-resize-handle:active { opacity: 1; }
.grid.has-maximized .pip-resize-handle { display: none; }

.gutter-handle {
    display: none;
    position: absolute; top: 0; bottom: 0;
    width: 16px; margin-left: -8px;
    cursor: col-resize;
    z-index: var(--z-gutter);
    touch-action: none;
}
.gutter-handle::after {
    content: "";
    position: absolute; top: 50%; left: 50%;
    width: 4px; height: 48px;
    transform: translate(-50%, -50%);
    background: var(--role-info);
    opacity: .5;
}
.gutter-handle:hover::after, body.gutter-dragging .gutter-handle::after { opacity: 1; }
body.gutter-dragging { cursor: col-resize; user-select: none; }
body.gutter-dragging .video-tile { pointer-events: none; }

/* --------------------------------------------------------------------------
   6. Menus (mic, camera, reactions)
   -------------------------------------------------------------------------- */
#camMenu, #reactionMenu, #micMenu, #soundMenu {
    display: none;
    position: absolute;
    bottom: calc(96px + var(--safe-bottom)); left: 50%;
    transform: translateX(-50%);
    min-width: 240px; max-width: min(320px, calc(100vw - 24px));
    padding: var(--s-2);
    flex-direction: column;
    gap: var(--s-1);
    background: var(--surface-1);
    border: var(--stroke) solid var(--role-info);
    box-shadow: var(--elev-2);
    z-index: var(--z-menu);
}

.cam-item, .react-item {
    display: flex; align-items: center; gap: var(--s-2);
    width: 100%;
    min-height: var(--tap);
    padding: 0 var(--s-3);
    font-size: var(--fs-body);
    font-weight: 600;
    text-align: left;
    color: var(--text-1);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 0;
    cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cam-item.turn-off { justify-content: center; color: var(--ink); background: var(--role-danger); border-color: var(--role-danger); }
.cam-item:disabled { opacity: .4; cursor: not-allowed; }

.react-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-1); margin-top: var(--s-1); }
.react-emoji-btn {
    min-height: var(--tap);
    font-size: 1.375rem;
    line-height: 1;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 0;
    cursor: pointer;
}
.react-emoji-btn:active { transform: translate(1px, 1px); }

@media (hover: hover) {
    .cam-item:hover:not(:disabled), .react-item:hover, .react-emoji-btn:hover { background: var(--surface-3); border-color: var(--role-info); }
    .cam-item.turn-off:hover { background: var(--red-600); border-color: var(--red-600); }
}

/* Sound panel: leveling, volumes, mic processing */
#soundMenu {
    /* opened from the header, so it hangs from the top-right of the video area */
    top: var(--s-2); right: calc(var(--s-2) + var(--safe-right)); bottom: auto; left: auto;
    transform: none;
    width: 320px;
    gap: var(--s-3);
    max-height: calc(100% - var(--s-4));
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* keep clear of the open chat drawer (340px wide, 10px inset) */
@media (min-width: 769px) { body.chat-open #soundMenu { right: calc(350px + var(--s-2)); } }
.sound-section { display: flex; flex-direction: column; gap: var(--s-2); }
.sound-section + .sound-section { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.sound-heading {
    margin: 0;
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-2);
}
.sound-subheading { margin: var(--s-1) 0 0; font-size: var(--fs-small); color: var(--text-3); }
.sound-label {
    min-width: 0;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--text-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sound-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.sound-seg { display: flex; flex: none; border: 1px solid var(--line); }
.sound-seg button {
    min-height: 36px;
    padding: 0 var(--s-3);
    font: 600 var(--fs-small)/1 var(--font-ui);
    color: var(--text-2);
    background: var(--surface-2);
    border: 0;
    cursor: pointer;
}
.sound-seg button + button { border-left: 1px solid var(--line); }
.sound-seg button[aria-checked="true"] { color: var(--ink); background: var(--role-info); }
@media (hover: hover) { .sound-seg button[aria-checked="false"]:hover { color: var(--text-1); background: var(--surface-3); } }

.sound-slider {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) 1fr 3.25rem;
    align-items: center;
    gap: var(--s-2);
    min-height: 36px;
}
.sound-slider input { width: 100%; margin: 0; accent-color: var(--role-info); cursor: pointer; }
.sound-slider output { font: var(--fs-small)/1 var(--font-mono); color: var(--text-2); text-align: right; }

.sound-toggle {
    display: flex; align-items: center; gap: var(--s-2);
    min-height: 36px;
    font-size: var(--fs-small);
    color: var(--text-1);
    cursor: pointer;
}
.sound-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--role-info); cursor: pointer; }
.sound-toggle input:disabled, .sound-toggle input:disabled + span { opacity: .5; cursor: progress; }
.sound-reset { justify-content: center; flex: none; }

/* --------------------------------------------------------------------------
   7. Badges & reactions
   -------------------------------------------------------------------------- */
.hand-badge {
    display: none;
    position: absolute; top: 8px; right: 8px;
    z-index: 12;
    width: 32px; height: 32px;
    align-items: center; justify-content: center;
    color: var(--ink);
    background: var(--role-time);
    box-shadow: var(--elev-1);
}
.video-tile.hand-raised .hand-badge { display: flex; animation: badge-in 240ms steps(3) 1; }
@keyframes badge-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

.floating-emoji {
    position: absolute;
    font-size: 2rem;
    z-index: var(--z-emoji);
    pointer-events: none;
    animation: float-up 1.8s cubic-bezier(.25, 1, .5, 1) forwards;
}
@keyframes float-up {
    0%   { opacity: 1; transform: translateY(0) scale(.8); }
    50%  { opacity: 1; transform: translateY(-50px) scale(1.3); }
    100% { opacity: 0; transform: translateY(-110px) scale(1); }
}
@keyframes fade-hold { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }

.desktop-only { }
@media (max-width: 768px), (pointer: coarse) { .desktop-only { display: none !important; } }

/* --------------------------------------------------------------------------
   8. Toast (replaces alert)
   -------------------------------------------------------------------------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(104px + var(--safe-bottom));
    z-index: var(--z-toast);
    max-width: min(92vw, 440px);
    padding: var(--s-3) var(--s-4);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--text-1);
    background: var(--surface-1);
    border: var(--stroke) solid var(--role-info);
    box-shadow: var(--elev-2);
    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.warn  { border-color: var(--role-time); }
.toast.error { border-color: var(--role-danger); }

/* --------------------------------------------------------------------------
   9. Chat drawer / bottom sheet
   -------------------------------------------------------------------------- */
.chat-drawer {
    display: none;
    position: absolute;
    top: 10px; right: 10px; bottom: 10px;
    width: 340px; max-width: 100%;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface-1);
    border: var(--stroke) solid var(--role-info);
    box-shadow: var(--elev-2);
    z-index: var(--z-drawer);
    /* No backdrop-filter: the drawer overlaps live video, so a blur would be recomputed every
       video frame. */
}
@media (max-width: 768px) {
    .chat-drawer {
        position: fixed;
        top: auto; left: 0; right: 0; bottom: 0;
        width: 100%;
        height: 55dvh;
        border: none;
        border-top: var(--stroke) solid var(--role-info);
        box-shadow: none;
        z-index: var(--z-sheet);
    }
    /* grabber: tells people this is a sheet */
    .chat-drawer::before {
        content: ""; position: absolute; top: 6px; left: 50%;
        width: 40px; height: 4px; transform: translateX(-50%);
        background: var(--line-strong);
    }
}

.chat-header {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
    width: 100%;
    padding: var(--s-3) var(--s-2) var(--s-3) var(--s-4);
    padding-top: calc(var(--s-3) + var(--safe-top));
    padding-left: calc(var(--s-4) + var(--safe-left));
    padding-right: calc(var(--s-2) + var(--safe-right));
    background: var(--bar);
    border-bottom: 1px solid var(--line-strong);
    flex-shrink: 0;
}
@media (max-width: 768px) {
    /* The mobile drawer is a bottom sheet, so it never meets the top cutout. */
    .chat-header {
        padding-top: var(--s-4);
        padding-left: calc(var(--s-4) + var(--safe-left));
        padding-right: calc(var(--s-2) + var(--safe-right));
    }
}
.chat-title { display: flex; flex-direction: column; min-width: 0; }
.chat-title h2, .chat-title > span:first-child { margin: 0; font-size: var(--fs-title); font-weight: 700; line-height: var(--lh-tight); color: var(--role-info); }
.chat-subtitle { margin-top: 2px; font: var(--fs-small)/var(--lh-tight) var(--font-mono); color: var(--text-2); }

.icon-btn, .chat-close-btn, .chat-clip-btn, .chat-send-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tap); height: var(--tap); min-width: var(--tap);
    padding: 0;
    border: var(--stroke) solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.chat-close-btn { color: var(--text-2); background: transparent; }
.chat-close-btn:hover { color: var(--text-1); background: var(--surface-3); }
.chat-clip-btn { color: var(--role-info); background: var(--surface-2); border-color: var(--line-strong); }
.chat-clip-btn:hover { background: var(--surface-3); border-color: var(--role-info); }
.chat-send-btn { color: var(--ink); background: var(--role-brand); border-color: var(--role-brand); }
.chat-send-btn:hover { background: var(--magenta-400); }
.chat-send-btn:active, .chat-clip-btn:active { transform: translate(1px, 1px); }

.chat-stream {
    flex: 1;
    display: flex; flex-direction: column; gap: var(--s-2);
    width: 100%;
    min-height: 0;
    padding: var(--s-3);
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) transparent;
}
@media (max-width: 768px) {
    .chat-stream {
        padding-left: calc(var(--s-3) + var(--safe-left));
        padding-right: calc(var(--s-3) + var(--safe-right));
    }
}

.chat-bubble {
    width: 100%; max-width: 100%;
    padding: var(--s-2) var(--s-3);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    background: var(--surface-2);
    border-left: var(--px) solid var(--role-info);
    word-break: break-word; overflow-wrap: anywhere;
    transition: opacity .4s ease;
}
.chat-bubble.self   { border-left-color: var(--role-brand); }
.chat-bubble.pinned { border-left-color: var(--role-time); background: #1f1d12; }

.bubble-meta, .file-card-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-bottom: 2px; font-size: var(--fs-small); }
.sender-name { font-weight: 700; color: var(--role-info); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-bubble.self .sender-name { color: var(--role-brand-text); }

/* TTL pill: icon via CSS mask so JS can keep writing plain text */
.ttl-pill {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0 6px;
    font: var(--fs-small)/1.5 var(--font-mono);
    color: var(--role-time);
    background: rgb(255 230 0 / .08);
    border: 1px solid rgb(255 230 0 / .35);
}
.ttl-pill::before {
    content: ""; flex: none; width: 12px; height: 12px;
    background: currentColor;
    -webkit-mask: var(--mask-clock) center / contain no-repeat;
    mask: var(--mask-clock) center / contain no-repeat;
}
.chat-bubble.pinned .ttl-pill::before { -webkit-mask-image: var(--mask-pin); mask-image: var(--mask-pin); }
.ttl-pill.urgent { color: var(--role-danger); background: rgb(255 59 92 / .1); border-color: rgb(255 59 92 / .45); }

.chat-body { width: 100%; word-break: break-word; overflow-wrap: anywhere; }
.chat-link { color: var(--role-info); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; overflow-wrap: anywhere; }
.chat-link:hover { color: var(--text-1); }
.chat-bubble.self .chat-link { color: var(--role-brand-text); }

.chat-img-wrap, .file-img-wrap {
    margin-top: 6px; max-width: 100%;
    overflow: hidden;
    background: var(--void);
    border: 1px solid var(--line-strong);
}
.chat-img-preview, .file-img-preview { display: block; width: 100%; max-height: 200px; object-fit: contain; background: var(--void); }

.chat-system-note {
    display: flex; align-items: flex-start; gap: var(--s-2);
    width: 100%;
    padding: 6px var(--s-3);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--text-1);
    background: rgb(255 230 0 / .08);
    border-left: var(--px) solid var(--role-time);
    word-break: break-word;
    transition: opacity .4s ease;
}
.chat-system-note::before {
    content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px;
    background: var(--role-time);
    -webkit-mask: var(--mask-alert) center / contain no-repeat;
    mask: var(--mask-alert) center / contain no-repeat;
}

.file-card {
    display: flex; flex-direction: column; gap: 6px;
    width: 100%; max-width: 100%;
    padding: var(--s-3);
    background: var(--surface-2);
    border: var(--stroke) solid var(--role-struct);
    transition: opacity .4s ease;
}
.file-name { font-size: var(--fs-body); font-weight: 700; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { font: var(--fs-small)/var(--lh-tight) var(--font-mono); color: var(--text-2); }
.file-dl-btn {
    display: flex; align-items: center; justify-content: center; gap: var(--s-2);
    width: 100%;
    min-height: var(--tap);
    font-size: var(--fs-small);
    font-weight: 700;
    text-decoration: none;
    color: var(--ink);
    background: var(--role-info);
    box-shadow: var(--elev-1);
    cursor: pointer;
}
.file-dl-btn::before {
    content: ""; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: var(--mask-download) center / contain no-repeat;
    mask: var(--mask-download) center / contain no-repeat;
}
.file-dl-btn:hover { background: var(--text-1); }
.file-dl-btn:active { transform: translate(2px, 2px); box-shadow: none; }

.upload-progress-container { display: none; width: 100%; height: var(--px); background: var(--surface-2); overflow: hidden; flex-shrink: 0; }
.upload-progress-fill { width: 0; height: 100%; background: var(--role-brand); transition: width .1s linear; }

.chat-input-bar {
    display: flex; align-items: center; gap: var(--s-2);
    width: 100%;
    padding: var(--s-2);
    padding-bottom: calc(var(--s-2) + var(--safe-bottom));
    padding-left: calc(var(--s-2) + var(--safe-left));
    padding-right: calc(var(--s-2) + var(--safe-right));
    background: var(--bar);
    border-top: 1px solid var(--line-strong);
    flex-shrink: 0;
}
.chat-drawer.keyboard-open .chat-input-bar { padding-bottom: var(--s-2); }
.chat-input-bar input[type="text"] { flex: 1; min-width: 0; margin: 0; }

.chat-badge {
    display: none;
    position: absolute; top: 4px; right: 4px;
    width: 10px; height: 10px;
    background: var(--role-brand);
    box-shadow: 0 0 0 2px var(--bar);
}

/* --------------------------------------------------------------------------
   10. Control dock
   -------------------------------------------------------------------------- */
#control-dock {
    display: none;
    position: relative;
    z-index: var(--z-dock);
    justify-content: center;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    padding-top: var(--s-3);
    padding-right: calc(var(--s-5) + var(--safe-right));
    padding-bottom: calc(var(--s-3) + var(--safe-bottom));
    padding-left: calc(var(--s-5) + var(--safe-left));
    background: var(--bar);
    border-top: var(--stroke) solid var(--role-brand);
    flex-shrink: 0;
}

.dock-btn {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 68px; height: 60px;
    padding: 0 var(--s-2);
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--role-info);
    background: var(--surface-2);
    border: var(--stroke) solid var(--role-info);
    border-radius: 0;
    box-shadow: var(--elev-1);
    cursor: pointer;
    transition: transform var(--t-press) linear, box-shadow var(--t-press) linear, background-color var(--t-fast) var(--ease-out);
}
.dock-btn:active { transform: translate(2px, 2px); box-shadow: none; }
@media (hover: hover) { .dock-btn:hover { background: var(--surface-3); } }
.dock-label { white-space: nowrap; }

/* slash overlay for "off" states; the brand-coloured stroke cuts a gap in the glyph */
.dock-btn .slash { display: none; stroke: var(--role-brand); stroke-width: 1.5px; paint-order: stroke; }
.dock-btn.active-off .slash { display: inline; }

/* state: your device is off (mic muted, camera off) */
.dock-btn.active-off { color: var(--ink); background: var(--role-brand); border-color: var(--role-brand); }
@media (hover: hover) { .dock-btn.active-off:hover { background: var(--magenta-400); } }
/* state: a feature is engaged (sharing, chat open, fullscreen) */
.dock-btn.active-on { color: var(--ink); background: var(--role-info); border-color: var(--role-info); }
@media (hover: hover) { .dock-btn.active-on:hover { background: var(--text-1); } }
/* state: recording (privacy-critical, never looks like "muted") */
.dock-btn.is-recording { color: var(--role-danger); border-color: var(--role-danger); background: rgb(255 59 92 / .12); font-family: var(--font-mono); }
.dock-btn.is-recording .icon { animation: blink 1s steps(1) infinite; }

/* leave: destructive, set apart */
.dock-btn.leave {
    margin-left: var(--s-4);
    color: var(--ink);
    background: var(--role-danger);
    border-color: var(--role-danger);
}
@media (hover: hover) { .dock-btn.leave:hover { background: var(--red-600); border-color: var(--red-600); } }

/* mobile: icon-only, 44px targets, labels stay available to AT via aria-label */
@media (max-width: 768px) {
    #control-dock {
        gap: var(--s-1);
        padding-top: var(--s-2);
        padding-bottom: calc(var(--s-2) + var(--safe-bottom));
        padding-left: calc(var(--s-1) + var(--safe-left));
        padding-right: calc(var(--s-1) + var(--safe-right));
        overflow-x: auto; overflow-y: hidden;
        scrollbar-width: none;
    }
    #control-dock::-webkit-scrollbar { display: none; }
    .dock-btn { min-width: 46px; width: 46px; height: 46px; padding: 0; }
    .dock-label { display: none; }
    .dock-btn.leave { margin-left: var(--s-2); }
}
@media (max-width: 365px) { #control-dock { justify-content: flex-start; } }

/* --------------------------------------------------------------------------
   11. Immersive (pseudo-fullscreen)
   -------------------------------------------------------------------------- */
/* iOS cannot fullscreen arbitrary elements, so immersive mode keeps the app's
   full-bleed canvas and compacts its safe controls without changing anchors. */
body.pseudo-fullscreen #room-header { min-height: 44px; }
body.pseudo-fullscreen #control-dock { background: rgb(13 14 27 / .94); }
body.pseudo-fullscreen #video-container { padding: 4px; }
body.pseudo-fullscreen #tile_local_camera {
    bottom: calc(8px + var(--safe-bottom)) !important;
    right: calc(8px + var(--safe-right)) !important;
}
body.pseudo-fullscreen #camMenu,
body.pseudo-fullscreen #reactionMenu,
body.pseudo-fullscreen #micMenu { bottom: calc(76px + var(--safe-bottom)); }

/* --- mobile keyboard fit ---------------------------------------------------
   `interactive-widget=resizes-content` is Chromium-only. On iOS the layout
   viewport never shrinks, so the dock (fixed to the layout-viewport bottom)
   would sit behind the keyboard and occlude the chat input. Track the visual
   viewport with a CSS var set from JS and lift the dock above the keyboard. */
@media (max-width: 768px) {
    body.chat-open #control-dock { transform: translateY(var(--kb-offset, 0px)); }
    /* drawer height when keyboard is open is set inline from visualViewport */
    .chat-drawer.keyboard-open .chat-stream { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   12. Landscape phones
   -------------------------------------------------------------------------- */
@media (max-height: 500px) {
    #room-header {
        min-height: 44px;
        padding: 4px calc(14px + var(--safe-right)) 4px calc(14px + var(--safe-left)) !important;
    }
    #control-dock {
        padding: 4px calc(10px + var(--safe-right)) calc(4px + var(--safe-bottom)) calc(10px + var(--safe-left)) !important;
        gap: 4px !important;
    }
    .dock-btn { min-width: 44px !important; width: 44px !important; height: 44px !important; padding: 0 !important; }
    .dock-label { display: none; }
    #tile_local_camera {
        width: 90px !important; height: 68px !important;
        bottom: calc(8px + var(--safe-bottom)) !important;
        right: calc(8px + var(--safe-right)) !important;
    }
    #camMenu, #reactionMenu, #micMenu {
        bottom: calc(56px + var(--safe-bottom));
        max-height: calc(100dvh - 120px - var(--safe-top) - var(--safe-bottom));
        overflow: auto;
    }
    body.pseudo-fullscreen #video-container { padding: 4px !important; }
    .setup-box { padding: var(--s-5); gap: var(--s-3); }
    .wordmark { width: 132px; }
}

/* --------------------------------------------------------------------------
   13. Icon masks (same 16-unit pixel glyphs as the sprite)
   -------------------------------------------------------------------------- */
:root {
    --mask-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M5 1h6v1H5zM3 2h2v1H3zM11 2h2v1h-2zM2 3h1v1H2zM13 3h1v1h-1zM1 4h1v7H1zM14 4h1v7h-1zM7 4h2v4h3v2H7zM2 11h1v1H2zM13 11h1v1h-1zM3 12h2v1H3zM11 12h2v1h-2zM5 13h6v1H5z'/%3E%3C/svg%3E");
    --mask-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M4 1h8v2H4zM5 3h6v3H5zM3 6h10v2H3zM7 8h2v4H7zM7 12h1v1H7z'/%3E%3C/svg%3E");
    --mask-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M7 1h2v1H7zM6 2h4v2H6zM5 4h6v2H5zM4 6h8v2H4zM3 8h10v2H3zM2 10h12v2H2zM1 12h14v2H1zM7 5h2v5H7zM7 11h2v2H7z'/%3E%3C/svg%3E");
    --mask-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M7 1h2v6H7zM4 6h1v1H4zM11 6h1v1h-1zM5 7h6v1H5zM6 8h4v1H6zM7 9h2v1H7zM1 10h2v2H1zM13 10h2v2h-2zM1 12h14v2H1z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   14. Preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .floating-emoji { animation: fade-hold 1s linear forwards !important; animation-duration: 1s !important; }
    .rec-chip::before, .dock-btn.is-recording .icon { animation: none !important; }
}
@media (forced-colors: active) {
    .dock-btn, .primary-btn, .secondary-btn, .share-btn, .video-tile, .chat-drawer, .setup-box { border-color: CanvasText; }
    .dock-btn.active-off, .dock-btn.active-on { forced-color-adjust: none; }
}