/* ═══════════════════════════════════════════════════════════════════════════
   Zawaya room screen — the television (js/room-screen/*)
   ═══════════════════════════════════════════════════════════════════════════
   • One unit, `--u`, is one dp of the Android TV design canvas (960 × 540;
     developer.android.com/design/ui/tv/guides/styles/layouts). A WebView on a
     1080p TV lays out at 960 × 540 CSS px (DPR 2), on a 720p one at 960 × 540
     (DPR 1.33); a browser at 1920 × 1080 CSS px gets 1u = 2px. Every size here
     is in `--u`, so the screen is the same picture at every one of them.
   • Overscan: content stays inside 48u at the sides and 27u top and bottom,
     and so does every focus ring (`--rs-ring-room`).
   • Colour. The palette is the eleven `--zv-*` values of voice-mode.css,
     loaded before this file and never restated: this sheet holds no colour
     literal at all. A shade is a `color-mix()` of two of those values (or of
     one with transparent, which is that value over the palette surface under
     it), so it moves in value, never in hue. Emerald and mint carry emphasis
     and action; amber is "in progress", violet "queued", critical "at risk",
     and each of those comes with an icon and a word.
   • Surfaces are matte: no gradient, no shadow, no blur. The only soft light
     on the screen is the mark's own radial pool (voice-corner.js).
   • Motion: voice-mode.css stops every CSS transition and animation under
     `.zv`; what moves here is WAAPI, from the scripts, and only transform and
     opacity. Reduced motion stops that too.
   • This file: derived shades, the frame, focus, the waiting screen, the
     voice. Home and ambient are rs-home.css, the surfaces rs-surfaces.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.rs {
    /* Derived shades — each one two palette values, named for its job. */
    --rs-line: color-mix(in srgb, var(--zv-mist) 14%, transparent);
    --rs-line-soft: color-mix(in srgb, var(--zv-mist) 7%, transparent);
    --rs-wash: color-mix(in srgb, var(--zv-mist) 8%, transparent);
    --rs-mint-wash: color-mix(in srgb, var(--zv-mint) 12%, transparent);
    --rs-mint-edge: color-mix(in srgb, var(--zv-mint) 30%, transparent);
    --rs-cream-edge: color-mix(in srgb, var(--zv-cream) 24%, transparent);
    --rs-cream-soft: color-mix(in srgb, var(--zv-cream) 78%, transparent);
    --rs-card: var(--zv-surface);
    --rs-card-focus: var(--zv-surface-2);

    --rs-face-ui: 'DM Sans', 'Tajawal', 'Cairo', system-ui, sans-serif;
    --rs-face-read: 'DM Sans', 'Tajawal', system-ui, sans-serif;
    --rs-face-code: 'DM Sans', 'Tajawal', sans-serif;
    --u: min(calc(100vw / 960), calc(100vh / 540));
    --rs-safe-x: calc(48 * var(--u));
    --rs-safe-y: calc(27 * var(--u));
    --rs-mark-full: calc(184 * var(--u));     /* the mark on the stage: the screen's one focal element */
    --rs-mark-turn: calc(136 * var(--u));     /* beside the current turn */
    --rs-mark-dock: calc(60 * var(--u));      /* under a surface */
    --rs-mark-seat: calc(56 * var(--u));      /* in the talk action on home */
    --rs-mark-rest: calc(132 * var(--u));     /* at the centre of the ambient screen */
    --rs-focus: calc(3 * var(--u));
    --rs-ring-room: calc(8 * var(--u));       /* a ring is 3u + 3u offset outside its target: frames keep this much inside the overscan */
    --rs-radius: calc(14 * var(--u));
    color-scheme: dark;

    position: fixed; inset: 0;
    background: var(--zv-navy);
    color: var(--zv-mist);
    font-family: var(--rs-face-ui);
    line-height: 1.45;
    overflow: hidden;
    cursor: none;                             /* a remote has no pointer */
}
html, body { margin: 0; height: 100%; overflow: hidden; }
.rs:lang(ar) { --rs-face-ui: 'Tajawal', 'Cairo', 'DM Sans', system-ui, sans-serif; --rs-face-read: 'Tajawal', 'DM Sans', system-ui, sans-serif; }

.rs [hidden] { display: none !important; }
:where(.rs) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: inherit; }
:where(.rs) :where(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; }
:where(.rs) :where(ul, ol) { list-style: none; }
.rs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rs-glyph { display: block; width: 100%; height: 100%; overflow: visible; }
.rs-icon { width: calc(24 * var(--u)); height: calc(24 * var(--u)); flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── Focus: always a ring, never only a colour ──────────────────────────── */
/* The whole ring is restated on focus: voice-mode.css's own `.zv button:focus-visible` (a 2px mist
   ring for the phone) would otherwise win on width and leave a thinner ring than this screen needs. */
.rs [data-focus="1"] { outline: var(--rs-focus) solid transparent; outline-offset: calc(3 * var(--u)); }
.rs [data-focus="1"]:focus, .rs [data-focus="1"]:focus-visible { outline: var(--rs-focus) solid var(--zv-mint); outline-offset: calc(3 * var(--u)); }

/* ── State: an icon and a word, the colour only repeats them ──────────── */
.rs-state { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); white-space: nowrap; }
.rs-state .rs-icon { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.rs-state[data-tone="progress"] { color: var(--zv-amber); }
.rs-state[data-tone="queued"] { color: var(--zv-violet); }
.rs-state[data-tone="done"] { color: var(--zv-mint); }
.rs-state[data-tone="risk"] { color: var(--zv-critical); }
.rs-state[data-tone="quiet"] { color: var(--zv-quiet); }

/* ── Buttons the remote reaches ───────────────────────────────────────── */
.rs-btn {
    display: inline-flex; align-items: center; gap: calc(10 * var(--u));
    font-size: calc(18 * var(--u)); font-weight: 600;
    min-height: calc(44 * var(--u));
    padding: 0 calc(20 * var(--u));
    border-radius: calc(12 * var(--u));
    color: var(--zv-quiet);
    border: calc(1.5 * var(--u)) solid var(--rs-line);
}
.rs-btn:focus { color: var(--zv-mist); background: var(--rs-mint-wash); }
/* Not yet pressable (the complaint's sends before a subject is chosen): quieter, never unreadable —
   the guest reads what it will do before choosing (opacity .4 measured 3.62:1). */
.rs-btn:disabled { color: color-mix(in srgb, var(--zv-cream) 62%, var(--zv-navy)); border-color: var(--rs-line); background: transparent; }

/* ── Waiting for the room to be activated, and the goodbye ────────────── */
.rs-waiting {
    position: absolute; inset: 0; z-index: 2;
    display: grid; place-content: center; justify-items: center;
    gap: calc(16 * var(--u));
    padding: var(--rs-safe-y) var(--rs-safe-x);
    text-align: center;
}
.rs-wait-mark { width: calc(112 * var(--u)); height: calc(112 * var(--u)); margin-bottom: calc(10 * var(--u)); }
.rs-wait-title { font-size: calc(40 * var(--u)); font-weight: 500; letter-spacing: -0.005em; line-height: 1.25; max-width: calc(760 * var(--u)); }
.rs-wait-note { font-size: calc(22 * var(--u)); color: var(--zv-quiet); font-family: var(--rs-face-read); max-width: calc(640 * var(--u)); }

/* ═══════════════════════════════════════════════════════════════════════
   The mark, wherever it sits. voice-mode.css places its `.zv-corner` for the
   phone (absolute, centred at the bottom); here it sits in a slot, and is
   sized by `--rs-mark-size`. Nothing of its drawing or material changes.
   ═══════════════════════════════════════════════════════════════════════ */
.rs-mark {
    --zv-glyph: var(--rs-mark-size, var(--rs-mark-full));
    position: relative; inset: auto; margin: 0; flex: none;
    width: var(--zv-glyph); height: var(--zv-glyph);
    cursor: none;
    border-radius: 50%;
    outline: none !important;                /* its holder shows its focus: no ring around the bars */
}

/* ═══════════════════════════════════════════════════════════════════════
   The voice — over home (full), or along the bottom of a surface (dock)
   ═══════════════════════════════════════════════════════════════════════ */
.rs-voice { position: absolute; inset: 0; z-index: 30; }
.rs-voice-scrim { position: absolute; inset: 0; background: var(--zv-navy); }
/* Over home the voice has the whole screen: what is under it is not drawn at all. */
.rs[data-voice="full"] .rs-home, .rs[data-voice="full"] .rs-surface, .rs[data-voice="full"] .rs-ambient { visibility: hidden; }
.rs-voice-panel {
    position: absolute; inset: 0;
    padding: calc(var(--rs-safe-y) + var(--rs-ring-room)) calc(var(--rs-safe-x) + var(--rs-ring-room));
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto minmax(0, 1fr) auto;
    grid-template-areas: "mic" "." "stage" "status" "captions" "foot";
    justify-items: center;
}
.rs-mic {
    grid-area: mic; justify-self: end;
    display: flex; align-items: center; gap: calc(8 * var(--u));
    min-height: calc(32 * var(--u));
    font-size: calc(18 * var(--u)); color: var(--zv-quiet); white-space: nowrap;
}
.rs-mic-dot {
    width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%;
    box-sizing: border-box; border: calc(2 * var(--u)) solid var(--zv-muted);
}
.rs-mic[data-open="1"] { color: var(--zv-mint); }
.rs-mic[data-open="1"] .rs-mic-dot { background: var(--zv-mint); border-color: var(--zv-mint); }
.rs-stage { grid-area: stage; display: grid; justify-items: center; gap: calc(14 * var(--u)); }
.rs-mark-slot { display: grid; place-items: center; }
.rs-mark-slot .rs-mark { --rs-mark-size: var(--rs-mark-full); }
.rs-cue {
    font-size: calc(18 * var(--u)); font-weight: 600;
    padding: calc(6 * var(--u)) calc(18 * var(--u));
    border-radius: calc(999 * var(--u));
    border: var(--rs-focus) solid transparent;
    color: var(--zv-muted);
    white-space: nowrap;
}
.rs-mark-slot[data-focused="1"] + .rs-cue { border-color: var(--zv-mint); color: var(--zv-mist); }
.rs-status {
    grid-area: status;
    margin: calc(10 * var(--u)) 0 0;
    font-size: calc(24 * var(--u));
    color: var(--zv-quiet);
    text-align: center;
    max-width: calc(760 * var(--u));
}
/* At risk: the word, its colour, and a sign beside it. */
.rs[data-phase="degraded"] .rs-status { color: var(--zv-critical); }
.rs[data-phase="degraded"] .rs-status::before {
    content: '!'; display: inline-grid; place-items: center; vertical-align: 0.08em;
    width: 1.05em; height: 1.05em; box-sizing: border-box; margin-inline-end: 0.45em;
    border: calc(2 * var(--u)) solid currentColor; border-radius: 50%;
    font-size: 0.8em; font-weight: 700; line-height: 1;
}
.rs-captions {
    grid-area: captions;
    align-self: start;
    width: 100%; max-width: calc(780 * var(--u));
    margin-top: calc(18 * var(--u));
    text-align: center;
    font-family: var(--rs-face-read);
}
.rs-words {
    font-size: calc(20 * var(--u)); color: var(--zv-muted);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.rs-answer {
    margin-top: calc(10 * var(--u));
    color: var(--zv-mist); font-weight: 500;
    white-space: pre-line;
    unicode-bidi: plaintext;
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.rs-answer[data-size="l"] { font-size: calc(30 * var(--u)); line-height: 1.4; -webkit-line-clamp: 4; }
.rs-answer[data-size="m"] { font-size: calc(26 * var(--u)); line-height: 1.42; -webkit-line-clamp: 6; }
.rs-answer[data-size="s"] { font-size: calc(22 * var(--u)); line-height: 1.45; -webkit-line-clamp: 8; }
/* The server's own number check: a quiet line, not a warning colour. */
.rs-correction { margin-top: calc(10 * var(--u)); font-size: calc(18 * var(--u)); color: var(--zv-quiet); }
.rs-note { margin-top: calc(10 * var(--u)); font-size: calc(18 * var(--u)); color: var(--zv-mint); }
.rs-lang { grid-area: foot; justify-self: end; }

/* With a turn on screen the mark steps aside and the words take the width:
   16:9 has room beside the mark, not under it. */
.rs[data-voice="full"][data-turn="1"] .rs-voice-panel {
    grid-template-columns: calc(300 * var(--u)) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto minmax(0, 1fr) auto;
    grid-template-areas: "mic mic" ". captions" "stage captions" "status captions" ". captions" "foot foot";
    column-gap: calc(40 * var(--u));
}
.rs[data-voice="full"][data-turn="1"] .rs-mark-slot .rs-mark { --rs-mark-size: var(--rs-mark-turn); }
.rs[data-voice="full"][data-turn="1"] .rs-status { font-size: calc(20 * var(--u)); }
.rs[data-voice="full"][data-turn="1"] .rs-captions { align-self: center; margin-top: 0; text-align: start; }

/* Docked: one bar along the bottom of the surface the conversation opened. */
.rs[data-voice="dock"] .rs-voice { inset: auto var(--rs-safe-x) var(--rs-safe-y); height: calc(106 * var(--u)); }
.rs[data-voice="dock"] .rs-voice-scrim {
    border-radius: calc(20 * var(--u));
    background: var(--zv-surface);
    border: calc(1.5 * var(--u)) solid var(--rs-mint-edge);
}
.rs[data-voice="dock"] .rs-voice-panel {
    padding: calc(12 * var(--u)) calc(20 * var(--u));
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "stage status mic" "stage captions captions";
    column-gap: calc(18 * var(--u)); row-gap: calc(2 * var(--u));
    justify-items: start; align-items: center;
}
.rs[data-voice="dock"] .rs-mark-slot .rs-mark { --rs-mark-size: var(--rs-mark-dock); }
.rs[data-voice="dock"] .rs-stage { gap: 0; }
.rs[data-voice="dock"] .rs-cue { display: none; }
.rs[data-voice="dock"] .rs-mark:focus { box-shadow: 0 0 0 var(--rs-focus) var(--zv-mint); }
.rs[data-voice="dock"] .rs-status { margin: 0; font-size: calc(18 * var(--u)); text-align: start; color: var(--zv-mint); }
.rs[data-voice="dock"][data-phase="degraded"] .rs-status { color: var(--zv-critical); }
.rs[data-voice="dock"] .rs-mic { justify-self: end; min-height: 0; font-size: calc(16 * var(--u)); }
.rs[data-voice="dock"] .rs-captions { margin: 0; max-width: none; text-align: start; align-self: start; }
.rs[data-voice="dock"] .rs-words { font-size: calc(16 * var(--u)); -webkit-line-clamp: 1; }
.rs[data-voice="dock"] .rs-answer { margin-top: 0; font-size: calc(18 * var(--u)) !important; line-height: 1.35; -webkit-line-clamp: 2 !important; }
.rs[data-voice="dock"] .rs-captions[data-answer="1"] .rs-words { display: none; }
.rs[data-voice="dock"] .rs-correction, .rs[data-voice="dock"] .rs-note { display: none; }
.rs[data-voice="dock"] .rs-lang { display: none; }

/* Component parameters and Arabic face overrides share the token owner. */
.rs-seat .rs-mark { --rs-mark-size: var(--rs-mark-seat); }
.ra-seat .rs-mark { --rs-mark-size: calc(80 * var(--u)); }
.rs-tv { --rs-tv-bar-h: calc(116 * var(--u)); }
.rs:lang(ar) { --rs-face-ui: 'Tajawal', 'DM Sans', 'Cairo', system-ui, sans-serif; }
.rs:lang(ar) { --rs-face-read: 'Tajawal', 'DM Sans', 'Cairo', system-ui, sans-serif; }
.rs .rs-tv-rows { --rs-reveal: calc(40 * var(--u)); }
.rs-sf-rail { --rs-reveal: calc(40 * var(--u)); }
.rs-sf-main { --rs-reveal: calc(36 * var(--u)); }
.rs-detail-body { --rs-reveal: calc(24 * var(--u)); }
.rs .rs-sf-main { --rs-reveal: calc(40 * var(--u)); }