/* talk-stage.css - AQ-737 / EB-240 NA4, 2026-10-01 (Henry, headless) * * STAGE SIZING FOR A ~70 INCH EVENT PANEL. Loaded by ONE page on purpose: * prep/cale-talk.html, for the BMC Partner Elevate stage. It is deliberately * NOT in talk-shell.css, which 35 live talk pages link (customers' agents * included) and whose ?v= cache pins are already split two ways across those * pages. A stage lift does not need to land on 35 customer pages to be useful * on one, so it does not. * * WHY ANY OF THIS IS NEEDED (measured, not assumed, by scripts/aq737_verify.js * against the LIVE page in Chrome at real 3840x2160 and 1920x1080 viewports): * #transcript 20px = 0.52vw at 4K (~8 mm of glass) * .msg .label 11.6px= 0.30vw at 4K (~4.7 mm) * #mic (also the only legible portrait surface, background-image) * 64x64 = 1.67vw at 4K (~26 mm) * #vision-gear 42x42 = 1.09vw at 4K (~17 mm) * [id$=-text-send] 47px short edge = 1.22vw at 4K * Every one of those is a fixed CSS-px value, so on the SAME panel they are * physically HALF the size when it is fed 3840 instead of 1920. That is the * defect: the sharper signal produces the less readable stage. * * THE FLOORS, and where they come from. A 70 inch 16:9 panel is 1549 mm wide. * Viewer at 10 ft (3048 mm). D/150 puts minimum cap height at 20.3 mm, ~29 mm * of font, = 1.87% of panel width; the floor held is 1.2vw (18.6 mm), so a * pass means readable rather than comfortable. Walk-up text (the person at the * screen, ~3 ft) floors at 0.55vw. Tap targets floor at 2.5vw (38.8 mm, ~4x * the ISO 9241-411 touch minimum, for a hand reaching a wall panel). The * portrait floors at 6.5vw, the weakest derivation here: cap height treated as * the smallest diagnostic facial feature, times the ~5:1 head-width to * eye-span ratio. * * EVERY VALUE IS vw-BASED AND WRAPPED IN max(, ...) * so nothing this file touches can ever get SMALLER than it is today at any * width, and physical size on the panel stops depending on the feed. * * TWO TIERS ON PURPOSE: * >=1800px text and the small controls. Covers a 1080p panel feed. * >=2400px the orb (mic hitbox + portrait) grows to 8.9vw, its halo to * 15.3vw, keeping the 1.72:1 glow ratio. Held * back to true panel widths because Jason's 2026-09-04 directive in * talk-shell.css deliberately SHRINKS the orb to 64px once a * conversation starts, so more transcript fits. That call is right * on a laptop and wrong on a wall, and 2400+ CSS px is a wall. * * 2026-10-02 CORRECTION to what this header said on 10/01. It claimed "on a * panel fed 1080p the portrait stays 3.33vw and still misses the 6.5vw portrait * floor. Feed the panel 4K." That is no longer true and was only ever true in * ONE state. Tier 1 now restores the orb to the page's own * clamp(110px,21vw,170px) in the `.has-content` gap state, so at 1920 the * portrait is 170px = 8.85vw = ~137 mm in every state, over the floor. Feeding * the panel 4K is still better (8.9vw = 342px) but it is no longer required * for the face to read. Measured, both widths, scripts/aq737_verify.js. * * Specificity is written to beat talk-shell.css's `body.has-content` !important * block and cale-talk.html's own `.transcript-tall` !important block, both of * which are 0,2,1. These are 0,2,2 and 0,3,2 and this file loads after both. */ /* ---------- TIER 1: >=1800px, text and small controls ---------- */ @media (min-width: 1800px) { /* transcript body text. .msg inherits this, and .msg .label is 0.58em of it, so one declaration lifts the bubble text and its ALL-CAPS speaker label together. 1.45vw = 27.8px at 1920 and 55.7px at 3840, both clear 1.2vw. */ html body[data-ai-slug="cale"] #transcript, html body[data-ai-slug="cale"].has-content #transcript, html body[data-ai-slug="cale"].transcript-tall #transcript { font-size: max(20px, 1.45vw) !important; } /* the typed-input fallback for a noisy room. Both ids are per-slug across the fleet (32 variants), hence the suffix match. */ html body[data-ai-slug="cale"] [id$="-text-input"] { font-size: max(17px, 0.78vw) !important; } html body[data-ai-slug="cale"] [id$="-text-send"] { font-size: max(15px, 0.72vw) !important; min-height: max(47px, 2.6vw) !important; min-width: max(85px, 2.6vw) !important; } html body[data-ai-slug="cale"] [id$="-upload-btn"] { min-height: max(44px, 2.6vw) !important; min-width: max(44px, 2.6vw) !important; } /* camera toggle and camera kill, the two things a walk-up visitor taps besides the mic */ html body[data-ai-slug="cale"] #vision-gear, html body[data-ai-slug="cale"] #vision-kill { width: max(42px, 2.6vw) !important; height: max(42px, 2.6vw) !important; font-size: max(18px, 1.05vw) !important; } /* "Tap the mic to begin" - the one instruction the room reads before anyone has spoken, so it is distance tier, not walk-up tier */ html body[data-ai-slug="cale"] .mic-instruction { font-size: max(15px, 1.25vw) !important; } /* the agent's name in the fixed top bar. height:48px in talk-shell.css would clip a larger glyph, so the box grows with it. */ html body[data-ai-slug="cale"] .henry-titlebar { height: auto !important; min-height: 48px !important; padding: 10px 12px !important; } html body[data-ai-slug="cale"] .henry-titlebar, html body[data-ai-slug="cale"] .henry-titlebar * { font-size: max(16px, 1.6vw) !important; line-height: 1.1 !important; } /* landing-state name and subtitle, on the chance the page is parked on the landing view with the top bar hidden */ html body[data-ai-slug="cale"] .brand h1 { font-size: max(48px, 3.2vw) !important; } html body[data-ai-slug="cale"] .voice-subtitle, html body[data-ai-slug="cale"] .henry-subtitle-below { font-size: max(16px, 1.3vw) !important; } html body[data-ai-slug="cale"] #live-text { font-size: max(24px, 1.45vw) !important; } /* 2026-10-02 AQ-737 pass 2. The orb is the ONLY element on this page that paints Cale's face (background-image cale_512.png on .mic-wrap), so its size is a portrait measurement and not only a tap target. talk-shell.css collapses it to a flat 64px the moment `.has-content` fires, and cale-talk.html restores it to clamp(110px,21vw,170px) only once `.transcript-tall` also fires. Between those two is a real state - the first exchange or two of a conversation, before the transcript overflows - where the face drops to 64px = 3.33vw = ~52 mm of glass at 1920, measured live. That is below the 6.5vw portrait floor, and it is INCONSISTENT with what the same page shows in the landing state and in the tall state at the same width, both 170px. So this restores the page's OWN value in the gap state rather than inventing a new one: no size here exceeds 170px, and anything under 1800px wide is untouched. Tier 2 below raises the same properties further on true panel widths and wins on source order. */ html body[data-ai-slug="cale"].has-content .mic-wrap { width: clamp(110px, 21vw, 170px) !important; height: clamp(110px, 21vw, 170px) !important; aspect-ratio: 1 / 1 !important; } html body[data-ai-slug="cale"].has-content .mic-btn { font-size: clamp(42px, 8vw, 68px) !important; } html body[data-ai-slug="cale"].has-content .mic-halo, html body[data-ai-slug="cale"].has-content .cam-halo { width: clamp(180px, 32vw, 280px) !important; height: clamp(180px, 32vw, 280px) !important; } html body[data-ai-slug="cale"].has-content #vision-pip, html body[data-ai-slug="cale"].has-content #cale-cam-dock .cam-wrap { width: clamp(110px, 21vw, 170px) !important; height: clamp(110px, 21vw, 170px) !important; aspect-ratio: 1 / 1 !important; } } /* ---------- TIER 2: >=2400px, the orb. Panel widths only. ---------- */ @media (min-width: 2400px) { /* mic hitbox AND the portrait surface - the same element. 8.9vw = 342px at 3840, which is 138 mm of glass: over the 6.5vw portrait floor and well over the 2.5vw tap floor. The background image is cale_512.png, so 342px is still a 0.67x downscale - no upscaling is introduced here, and AQ-736's note that the 512 asset only becomes the limit past 13.3vw still holds. WHY 8.9vw AND NOT THE 7vw THIS FILE SHIPPED ON 10/01. 7vw passed both floors but FAILED the parity check, and parity is the whole reason this file exists. Tier 1 renders the orb at 170px on a 1920 feed, which is 8.85vw = 137 mm of the same panel; 7vw at 3840 is 108 mm. That is the original defect in miniature - the sharper signal producing the smaller face - just introduced by this file instead of by talk-shell.css. 8.9vw is derived from the 1920 value (170/1920 = 8.854%) and rounded up, so the 4K feed can never render the face smaller than the 1080p feed does. */ html body[data-ai-slug="cale"] .mic-wrap, html body[data-ai-slug="cale"].has-content .mic-wrap, html body[data-ai-slug="cale"].transcript-tall .mic-wrap { width: max(64px, 8.9vw) !important; height: max(64px, 8.9vw) !important; aspect-ratio: 1 / 1 !important; } html body[data-ai-slug="cale"] .mic-btn, html body[data-ai-slug="cale"].has-content .mic-btn, html body[data-ai-slug="cale"].transcript-tall .mic-btn { font-size: max(26px, 3.7vw) !important; } /* the halo keeps its 1.72:1 ratio to the orb so the live/thinking/speaking states still read as a glow around it and not a ring beside it */ html body[data-ai-slug="cale"] .mic-halo, html body[data-ai-slug="cale"].has-content .mic-halo, html body[data-ai-slug="cale"].transcript-tall .mic-halo, html body[data-ai-slug="cale"] .cam-halo, html body[data-ai-slug="cale"].has-content .cam-halo, html body[data-ai-slug="cale"].transcript-tall .cam-halo { width: max(110px, 15.3vw) !important; height: max(110px, 15.3vw) !important; } /* camera circle matches the orb, or the row reads lopsided once the camera is on. Same size, same aspect. */ html body[data-ai-slug="cale"] #vision-pip, html body[data-ai-slug="cale"] #cale-cam-dock .cam-wrap, html body[data-ai-slug="cale"].has-content #vision-pip, html body[data-ai-slug="cale"].has-content #cale-cam-dock .cam-wrap, html body[data-ai-slug="cale"].transcript-tall #vision-pip, html body[data-ai-slug="cale"].transcript-tall #cale-cam-dock .cam-wrap { width: max(64px, 8.9vw) !important; height: max(64px, 8.9vw) !important; aspect-ratio: 1 / 1 !important; } /* the row has to be tall enough to hold the bigger orb without the halo clipping into the transcript */ html body[data-ai-slug="cale"] .cam-mic-row, html body[data-ai-slug="cale"].has-content .cam-mic-row, html body[data-ai-slug="cale"].transcript-tall .cam-mic-row { min-height: max(170px, 15.3vw) !important; } /* 2026-10-02 AQ-737 pass 2. THE CONVERSATION COLUMN. Caught by a screenshot, not by a number, which is why the harness now scores it: every font on this page scales with vw, but the column does not. cale-talk.html pins max-width:900px on .transcript-anchor, #transcript and .mic-anchor, so the conversation occupies 46.88% of a 1920 panel feed and 23.44% of a 3840 one - measured live, 12-message state. Three quarters of a 70 inch panel is empty dark background and the 55.68px text wraps every three or four words. This is the SAME defect the rest of this file exists to fix: a flat px value that halves in physical size when the panel is fed the sharper signal. The floor used is the page's own 1080p proportion, 900/1920 = 46.87%, so this invents nothing - it makes a 4K feed render the layout a 1080p feed already renders and that everyone has already looked at. max() means no width here can ever be narrower than the 900px shipping today, and under 2400px nothing changes at all. */ html body[data-ai-slug="cale"] .transcript-anchor, html body[data-ai-slug="cale"].has-content .transcript-anchor, html body[data-ai-slug="cale"] #transcript, html body[data-ai-slug="cale"].has-content #transcript, html body[data-ai-slug="cale"].transcript-tall #transcript, html body[data-ai-slug="cale"] .mic-anchor { max-width: max(900px, 46.87vw) !important; } /* 2026-10-02 AQ-737 pass 2. REGRESSION THIS FILE CAUSED, fixed here. Raising #transcript to 1.45vw above made the same conversation taller in px, while talk-shell.css still caps the box at calc(100vh - 200px). That 200px is a fixed reserve for the chrome BELOW the transcript inside .transcript-anchor (position:fixed; bottom:24px), and the chrome below it scales with vw, so at 3840x2160 the real reserve needed is 233.83px, not 200px. Measured live, 12-message state, before this rule: .transcript-anchor height 2177.83 in 2136 of available space #transcript top -33.83 (the oldest visible line is CUT OFF by the panel edge, not scrolled - html,body are overflow:hidden, so there is nothing to scroll to) .msg.user top -18.83 .msg .label top -8.83 1920x1080 was never affected (top +12.2) because 200px covers its 187.8px of chrome. This is a 4K-only clip and it only appeared once the text grew. The reserve below is derived from measurement at four tier widths, not guessed. Required reserve = bottom chrome + 24px anchor offset + clearance: 3840 -> 233.83 2560 -> 200.55 2400 -> 196.39 (1920 -> 187.8) max(250px, 7.2vw) yields 276.5 / 250 / 250, each above the measured need, and lands #transcript at top +42.65 / +49.45 / +53.61. Cost at 4K is 77px of box, about 1.4 lines of a 55.68px font, which is the price of not cutting the top line off. Only the max-height moves; font size, width and every other property stay exactly as they are. */ html body[data-ai-slug="cale"] #transcript, html body[data-ai-slug="cale"].has-content #transcript, html body[data-ai-slug="cale"].transcript-tall #transcript { max-height: calc(100vh - max(250px, 7.2vw)) !important; } }