/* ========================================== Chat Mode — Voice Practice Overlay Desktop only. 和の感性 design system. Premium polish: 13-point upgrade. ========================================== */ /* ========================================== THE ROOM'S TYPE SCALE (2026-07-25) — FOUR VOICES, NOT SIXTEEN SIZES ========================================== The room had 67 font-size declarations across 16 values, and 52 of them sat between 8.5 and 13.5px in half-pixel steps. Half a pixel is under what the eye resolves at reading distance, so those eleven "sizes" told the learner nothing — they were variety, not hierarchy. That is the mechanical reason the room read detailed but never composed. Worse, the hierarchy ran BACKWARDS: the hover card's headword was 20px while Sensei's Japanese speech was 17px and his English 13.5px. The apparatus out-shouted the speech it exists to serve — the same inversion T1.4 already forbids on WIDTH ("apparatus can never out-measure the speech it serves"), just never enforced on size. Five voices now, each a step you can actually see: --rm-jp the Japanese — speech (both speakers) and the card's echo of the same word. The biggest thing in the room, because the learner cannot read kanji yet and this is what he came for. --rm-en the English — speech, both speakers. 15px matches the Voice Portal's written Sensei (15.5px) inside half a pixel, i.e. indistinguishably: his spoken voice and his written voice are finally the same size. --rm-support the card's supporting stack — reading, romaji, meaning, word rows. One size, distinguished by ink and slant. --rm-control every button, chip, tag, timer and hint. One size. --rm-caption the micro-label voice — uppercase tracked eyebrows, section labels, tiny badges, fold captions. The SAME SIZE as --rm-control by decision (2026-07-28): 10px and below is under the practical reading floor, so the portal's 9.5/10/ 10.5 tier does not survive as a size. It gets its own name anyway, so a caption can dress differently from a control — case, tracking, ink — without a sixth size entering the room. The S5 contrast pass therefore touches only COLOUR: the size question was settled here. Plus --rm-ruby, which is furigana and NOTHING else (0.53 of the base, just over the conventional half). ⛔ GLYPH SIZES ARE A SEPARATE AXIS and are deliberately NOT folded in: the tray caret (16). An icon is sized by its target, not by the reading hierarchy. The ＋ and the ✕ left this axis entirely on 2026-07-28 — they are strokes now, in the letter key's 16px SVG family, sized by their own viewBox and answering to no font at all. The hold's ⏸/▶ followed in slice four: one stroke pair at 18, so the room's centre control no longer changes font AND size between its two states. ⛔ --rm-line IS A BASELINE PIN, not a preference. English and Japanese share one line box, so its height is set by the LARGER: Klee 19px at 32px is 1.68 leading, inside the JLReq range for Japanese body text (1.5-1.75). Change a speech size and you must re-derive this, or a line with Japanese in it stops being the same height as one without and turns jump as text arrives. ⛔ THE THREE SCOPES ARE LOAD-BEARING (2026-07-28, when the portal chrome joined the scale). The portal is a designed steady state with the room CLOSED — Study plan and New words call closeRoomForNav → exitChatMode while the portal stays opaque (voice-portal.js) — so body.chat-mode is absent exactly when the portal is being read. The letter panel is a body-level node and sits outside the container too. A var() with no definition in scope does not fall back to the room's size; it falls back to the browser's 16px, silently, on the surface nobody re-checks. Mirrors the tint seam at voice-portal.css:182. Pinned by tests/css/type_voice_test.js. ── ONE LIGHT (2026-07-28) ──────────────────────────────────────────────── The three --rm-pop-* values below are the popover spec, and they live here for the same reason the sizes do: five floating surfaces across two files read them, under all three scopes. A popover is ONE object in the learner's head — paper lifted off the page — so it gets one light: T1.9's warm-sumi channel, already the .chat-pop values, now the whole family's. What it replaced was five private answers (two lit from a warm brown that exists nowhere else in the app, two borrowed a RESTING card's shadow for a surface that floats, and the radii ran 8 · 8 · 10 · 10 · 12 with nothing telling them apart but their write dates). ⛔ RESTING SURFACES ARE NOT IN THIS FAMILY and must not read these: a docked placard, a card, the recovery sheet and the bar are furniture SITTING on the page — --shadow-rest is theirs. The distinction is float, not importance. Pinned by tests/css/popover_spec_test.js. ── THREE RUNGS OF INK (2026-08-06, owner ruling — B9) ──────────────────── The --rm-ink-* values below are the ink ladder, and they live here for the third time for the same reason: two files read them, under all three scopes. What they replaced: 134 fractional alphas across the two files, an unbroken run of 21 distinct values from 0.16 to 0.95 with no gap wider than 0.03 — structurally the same disease as the sixteen font-sizes above, and cured the same way. Nothing in the room ever wrote ink as a colour alpha; every fade is the `opacity` property, which is why the ladder governs that property alone. ⛔ THERE IS NO FOURTH "WHISPER" RUNG, AND THAT IS THE RULING'S POINT. Transparency on text is not a free design axis here — it is an accessibility function of the paper behind it, and fading multiplies against whatever that paper is. Warm stone (--color-stone) on the portal's paper (--color-paper) measures 6.53:1 at full · 5.40:1 at 0.92 · 4.59:1 at 0.85 · 4.10:1 at 0.80 · 3.68:1 at 0.75 · 2.70:1 at 0.60. WCAG AA asks 4.5:1, and every size on the scale above (19/15/13/11/11/10px) is "normal text" — not one of them reaches the large-text exemption. A fourth rung below QUIET would have been an officially blessed way to ship text the reader cannot comfortably read. 0.92 is the one number that clears AA for the room's quiet ink on its DARKEST paper, with headroom for the surfaces between; a rung that is only legal on some papers is not a rung. ⭐ SO WHERE DOES "QUIETER" COME FROM? THE INK'S COLOUR, AT FULL STRENGTH. The system already carries warm stone beside sumi. Stone at 1.0 reads quiet to the eye and keeps 6.53:1 in hand; black faded toward the paper reads quiet and keeps nothing. Every hierarchy in this room that used to be said in alpha is now said in hue — and a hover that brightens quiet ink lands on FULL, which is where --rm-ink-full earns its tenants rather than documenting an intention (see the --color-learner tombstone below for how that ends). MARK is a different standard and always was: non-text UI answers to WCAG 1.4.11's 3:1, not 4.5:1, and 0.68 was measured for exactly that (3.41:1 on card-bright, 3.17:1 on paper). It was argued three times in this file before it had a name — at the room's corner keys, at .cu-dock-close and at .ctp-x — and it is pinned by tests/css/control_room_test.js and by CDP. ⛔ MARKS ONLY: an entry that puts TEXT on this rung is a law break, not an exception. Pinned by tests/css/ink_law_test.js. ⛔ AND #chatSaveFailed IS ON THIS LIST (B4, 2026-08-10) FOR A REASON THE OTHER THREE SCOPES ALREADY RECORD: it is a body-level node that OUTLIVES the room. `exitChatMode` removes `body.chat-mode` (js/chat-mode.js) eleven lines after firing the save, so on the close-the-room path the POST answers 0-8s later with the scope already gone — and every `var(--rm-…)` on the banner would silently fall back. That is worse than a raw number: it is a surface that wears the type scale on one path and its own fallbacks on another, invisible to every gate, decided by how the learner happened to leave. */ body.chat-mode, #voicePortalOverlay, .chat-thread-panel, #chatSaveFailed { --rm-jp: 19px; --rm-en: 15px; --rm-support: 13px; --rm-control: 11px; --rm-caption: 11px; --rm-ruby: 10px; --rm-line: 32px; /* THE CAPTION'S DRESS (slice five, 2026-09-18). The uppercase micro-label family ran ten trackings and four weights across the two files, so peers on one screen read as two ranks. One tracking, one weight, the course page's shipped --e4-track. The size was settled above: --rm-caption. */ --rm-track: 0.12em; --rm-track-weight: 600; /* The one argued second step: a surface head's caps English sits beside a 24px display word, so it tracks wider than a section eyebrow. */ --rm-track-display: 0.18em; /* The bar's ONE hand mass. Standby word, live hold and paused pill share one seat, so they share one size: the press changes the occupant's WORD, never the silhouette. They ran 44 and 64 against each other until here. */ --hand-h: 64px; --rm-pop-shadow: 0 12px 32px -18px rgba(44, 44, 44, 0.25); /* T1.9: the one warm-sumi channel */ --rm-pop-line: rgba(44, 44, 44, 0.08); --rm-pop-radius: 12px; /* THE ROOM'S TWO RESTING EDGES, NAMED (slice five). Raw until now in this file while the portal already named them; its --vp-line / --vp-line-strong alias these now. Same channel as the light above, T1.9's rgba(44,44,44): a warm brown was measured and ruled out. 0.07 is the internal divider, 0.12 a handed object's hairline (.cat-thumb). 0.08 (structure), 0.14 (the ghost family) and 0.18 (controls) keep their own written jobs. */ --rm-edge: rgba(44, 44, 44, 0.07); --rm-edge-strong: rgba(44, 44, 44, 0.12); /* The ink ladder (B9). Three rungs, and the header above says why there is no fourth. Content · supporting text · non-text marks. */ --rm-ink-full: 1; --rm-ink-quiet: 0.92; --rm-ink-mark: 0.68; /* ⭐ SLICE ONE (owner pick 2026-09-17, candidate C staged on the live record): SENSEI'S ENGLISH IS WARM INK. Her speech wore --color-stone, the app's SECONDARY colour, so the main content of the room sat in the ink the family reserves for chrome and captions. The course page found the same thing in September (CT-4: "the neutral sumi was the one cold colour on a warm page") and set its English in the drawer's warm sumi, --slip-ink (tokens.css:106). One token, read by the one speech rule. Measured on the room's darkest paper (#E3DFD5): 9.0:1. ⛔ The learner's English is NOT on this token: R3.8 is an owner-picked lever that softens HIS scaffolding to faint-warm, and it stands (the rule below at "R3.8"). */ --rm-speech-ink: var(--slip-ink, #3A3633); } /* ---- Custom Properties (driven by JS) ---- */ .chat-mode-container { --rms: 0; --breath-duration: 3.5s; /* ⛔ --color-learner DELETED 2026-07-27, and the deletion is the honest part. Its comment claimed "ONE decision for TWO surfaces (the user turn's hairline + the user-speaking ensō fill)". Only ONE ever consumed it: the ensō. There is no hairline rule in this file and there never was — the token was documenting an intention, and a test counting `>= 2` usages passed anyway because the ensō's stroke AND its echo both read it. The one-warm-light ruling retired the ensō's hue, which left the property with zero consumers. So the room marks no voice by COLOUR at all now: the lamp says a voice is in the room, the transcript says whose. If a learner-coloured surface is ever wanted back, define it where it renders and let the test count what actually paints. */ } /* Dragging over text is the one place the OS gets to choose a colour in this product, and its answer is a flat system blue. The hall already refused it (css/home-hall.css) with the app's indigo at 0.18; the room and the letter panel say the same. ⛔ THE PANEL IS NAMED SEPARATELY on purpose — it is a body-level node, outside both overlays, and it is the one surface a learner really does select text on (Sensei's letter). */ #chatModeOverlay ::selection, .chat-thread-panel ::selection { background: rgba(61, 90, 128, 0.18); } /* ---- Overlay — Shoji entrance ---- */ .chat-mode-overlay { position: fixed; inset: 0; /* ⛔ NO --vp-rail-w BINDING (2026-07-27, owner ruling: "we do not need two screens"). This used to read `left: var(--vp-rail-w, 0px)` — the room was a SECOND body-level overlay holding itself in alignment with the portal's rail by copying the rail's own width. Two screens agreeing to look like one, and every disagreement between them was a bug: collapsing the rail slid the whole room 122px sideways, and the room's z-index meant nothing next to the hall's. The room is now SEATED inside the portal's stage (.vp-stage — see ensureShell/seatRoom in voice-portal.js) and the GRID does the aligning, so there is nothing left to keep in sync. `.in-portal` below is that seat; the fixed inset here is the room standing alone, which is still the whole truth off localhost, where the portal does not exist. */ /* ⛔ THE ROOM NO LONGER YIELDS TO THE LETTER (S12, 2026-07-29). It insetted its right edge for the panel for as long as the panel sat BESIDE the talk; the owner's ruling made the panel a cover, and a covered room has nothing to move out of the way of. The panel reads this edge instead — see --ctp-left in openThreadPanel. */ right: 0; /* The room's seat on the body-level ladder (enterChatMode lifts it out of #app; see the note there). It was 5000, which read as 5000 among #app's children and put it UNDER the 玄関 hall. The ladder, low to high: 9500 hall · 9550 THE ROOM · 9580 journey composer · 9600 portal rail · 9601 rail handle · 9610 the letter panel · 9612 the page viewer · 9619 session-decision (recovery scrim + the rail's ⋯ menu) · 9620 the recovery/leave/delete cards Everything the room must not cover is above it and stays there. ⛔ A rung here is only real for a node that actually sits on the BODY: the portal overlay carries a transform, so anything inside it is capped at its 9600 whatever number it declares — that is how the ⋯ menu's old "9610" painted UNDER the letter panel, and why A6 re-parented the menu and the rail handle to document.body. The ENFORCED map is tests/voice/zindex_ladder_test.js, which also reads inline cssText in js/ (showSaveFailed's 10000 is invisible to a CSS-only grep). */ z-index: 9550; /* T1.1 mat-paper-world: the room stands on the gallery's paper with the genkan's one light (home-hall.css's morning-window wash). Card material is henceforth reserved for OBJECTS handed to the learner (unpack, kintsugi, recovery/leave, settings); speech and labels are ink on paper. */ background-color: var(--color-paper, #F0EDE8); /* ONE LIGHT (2026-07-25 composition pass): the hall's morning window, indoors. A wide warm pool centred on where the talk lives, cooling to the edges — the room reads as a lit space instead of a flat sheet with a column of text on it. Depth from light, never from new material (T1.1 holds: card material stays reserved for handed objects). */ background-image: radial-gradient(118% 74% at 50% 42%, #FFFDF8 0%, #FAF7F0 32%, #F1EEE7 62%, #E9E5DC 86%, #E3DFD5 100%); display: flex; align-items: center; justify-content: center; opacity: 0; clip-path: inset(50% 50% 50% 50%); /* ⛔ ONE transition shorthand per rule. A second one REPLACES the first — it does not add to it — and the two insets above were declared in their own `transition: left…, right…` for as long as that was true, which made them dead: the rail's inset and the letter panel's both SNAPPED while the CSS claimed 0.34s. Anything new that transitions here joins THIS list. (Same mistake, same file family: voice-portal.css's `body.chat-mode` rule had killed the portal's own entrance fade.) */ transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), left 0.34s var(--ease-settle, ease), right 0.34s var(--ease-settle, ease); } /* ── THE ROOM SEATED IN SENSEI'S PLACE (2026-07-27) ───────────────────────── ONE SCREEN. The portal's shell is a two-column grid — rail | stage — and the room fills the stage. It is the same element and the same renderer either way; only its containing block changes, which is why a live session survives the move (a DOM reparent touches no socket and no audio node). `position: fixed` would still measure against the VIEWPORT here and put the room back over the rail, so the seat must say absolute. The seat fills the stage outright: since S12 the letter panel covers the room rather than insetting it, so there is no inset left to carry. */ .chat-mode-overlay.in-portal { position: absolute; inset: 0; /* inside the stage the room needs no ladder of its own — the portal already stands above the hall, and the letter panel is its own body-level layer */ z-index: 1; } .chat-mode-overlay.visible { opacity: 1; clip-path: inset(0% 0% 0% 0%); } /* ---- The room as the PORTAL'S CONTENT: one place arrives once ---- The shoji iris above, and the curtain-raise staged behind it (orb at 0.25s, caption at 0.45s, transcript at 0.6s), were written for a room that arrived ALONE over the gallery. There they are right and they stay. Inside the portal they lie. The rail is painted at frame one and the room then grows out of a point in the middle of it — measured on the live tree: rail full at 0ms, room fully open only at 608ms, orb not settled until 930ms. So Sensei's place appeared to load in two halves, history first and the room second, which is exactly what it is NOT: one place. So when the room comes up as the portal's content it crosses on the same calm fade as the paper around it, and everything inside it comes with it rather than making its own entrance. */ body.voice-portal-open .chat-mode-overlay { clip-path: none; transition: opacity 0.4s var(--ease-settle, ease), left 0.34s var(--ease-settle, ease), right 0.34s var(--ease-settle, ease); } /* ⛔ .voice-viz-label is NOT in this list, and must never be added back. These rules cancel ENTRANCE fades for elements that are always visible; the status line's opacity is its message, and forcing it to 1 here would leave "Connecting…" burned onto the room for the whole session. */ body.voice-portal-open .voice-viz, body.voice-portal-open .chat-transcript { animation: none; opacity: 1; } /* The grain. LOAD-BEARING, not decoration: a warm ramp this soft bands visibly on this palette (measured on the light above), and 1-2% noise is what kills the banding. It doubles as the room's ONE textured surface — design law #6, one surface is elegant, every surface is wallpaper. Paints under the container: both are positioned, source order decides. */ .chat-mode-overlay::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.4; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"); } /* ⭐ SLICE ONE (owner pick 2026-09-17, candidate C of three staged on the live record): AT REST THE LIGHT LANDS ON THE GREETING. The room's one light (the radial above, peak at 42% of the height) was composed for a LIVE talk, where the column of speech lives mid-stage. At rest that column is empty: the lamp sits at the ceiling, the greeting at the floor, and the pool's peak fell dead centre of the 700px band between them — the brightest paper in the room lit nothing, and the one word in the room was the least lit thing on it. This layer is the landing's own pool: tighter (70% × 46%), centred on the greeting (74%), opaque over the base light, and it FADES out on the settle curve the moment the landing leaves — a talk's first line arrives on the talk's light, never a snap. Paints below the grain (negative z-index inside the overlay's own stacking context) so the grain still kills the banding on it. Nothing moves; only the light. */ .chat-mode-overlay::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(70% 46% at 50% 74%, #FFFDF8 0%, #FAF7F0 34%, #F1EEE7 66%, #E9E5DC 88%, #E3DFD5 100%); opacity: 0; transition: opacity 0.6s var(--ease-settle, ease); } /* ON while the landing is seated and no turn has landed: the first line of a talk (or a reopened night's record) is what sends the pool away. Keyed on the presence of a turn rather than on state, because a reopened night keeps the landing head above its record. */ .chat-mode-overlay:has(.chat-mode-container.has-landing):not(:has(.chat-message))::after { opacity: 1; } /* Depth separation — grid blurs behind during shoji entrance */ body.chat-mode .grid-container, body.chat-mode .flashcard-container, body.chat-mode .bottom-action-bar, body.chat-mode .premium-progress-wrapper { filter: blur(3px); opacity: 0.6; transition: filter 0.5s ease, opacity 0.5s ease; } /* ---- Container ---- */ .chat-mode-container { position: relative; width: 100%; max-width: 640px; height: 100vh; display: flex; flex-direction: column; padding: 20px 32px 16px; box-sizing: border-box; } /* ---- Header ---- */ .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0 4px; flex-shrink: 0; /* the clock hangs off this box instead of sitting in it — see below */ position: relative; } /* ---- Session Timer (with heartbeat) ---- */ /* ⛔ THE CLOCK MAY NOT MOVE THE ROOM (2026-07-27, owner: "the orb slightly moves down when the session starts"). It did, by exactly 14px, and the orb was innocent: the header's only in-flow child is this clock, it is display:none while empty, and startSessionTimer() fills it. So the header grew from its bare padding to a full line box the instant a session opened and pushed the lamp — and everything under it — down a row. A layout shift is not a transition; nothing can smooth it, because the box it happens in changes size between two frames. The keys already left the flow for their own reason (they pin to the room's corner). The clock leaves it for this one: it hangs off the header, so the header is the same height in every state and the lamp has one seat. */ .chat-session-timer { position: absolute; top: 0; left: 2px; font-family: 'Inter', sans-serif; font-size: var(--rm-control); font-variant-numeric: tabular-nums; color: var(--color-stone); opacity: var(--rm-ink-quiet); letter-spacing: 0.03em; min-width: 3em; } .chat-session-timer:empty { display: none; } /* ⛔ NO BREATH ON THE CLOCK (slice four). It ran `timerHeartbeat 4s infinite` for the whole session — a pace that answered to nothing, in a room whose one motion language is the lamp's 7s→9s. B9 had re-based its stops onto the ladder (0.45→0.6 was under the AA floor for 11px digits); the rule above now carries that ink outright — stone at the quiet rung, 6.08:1 → 4.82:1 across the room's paper. ⛔ Never --color-faint here: 3.60:1 at the lamp's centre, 2.75:1 at the paper's edge — it would re-open exactly what B9 closed. */ /* ---- Close Button ---- */ /* ── the room's keys, in the room's own corner (owner, 2026-07-27) ────────── The header lives inside .chat-mode-container, which is capped at the transcript's reading measure (640px — the 860px-at-rest this once named was deleted by the ONE MEASURE ruling below). A control at the far end of THAT box lands three quarters of the way across the room and reads as floating in the middle of the paper, not as a corner mark. So the keys leave the column and pin to the ROOM. ⛔ These are measured from the VIEWPORT, not from the overlay. The overlay carries a clip-path, which the spec says makes it the containing block for fixed descendants — it does not here, and the difference is invisible until something insets the room. ⛔ NOTHING TRACKS THE LETTER PANEL ANY MORE (S12, 2026-07-29). These keys and the dock rail carried a `calc(… + --ctp-w)` term and a `transition: right` to glide off an opening panel's edge. The panel COVERS now: it sits at 9610 over the room's 9550 and simply hides them, which is the intended grammar — the panel's own fold mark and Escape are the ways back. A key that slid out from under a cover would be chrome floating beside a reading. */ .chat-room-keys { position: fixed; top: 18px; right: 22px; display: flex; align-items: center; /* 8, not 6: the 44px hit expanders below reach 5px past each key's paper, and at a 6px gap the ✕'s would cover a pixel of the letter key's own box. The ✕ is the way OUT of a live room — the worst mis-tap in the room. */ gap: 8px; z-index: 2; } /* ── the top row: the way OUT (owner, 2026-07-27) ─────────────────────────── One mark, one job: the 30px square, the hairline ring and the warm paper that arrive under the pointer. (The letter KEY sat beside it in the same dress until S10 retired the letter; the rail's keys and the panel's fold mark still wear this spec, pinned by tests/css/control_room_test.js.) ⛔ The 2026-07-26 ruling is intact: it banned a SINGLE control doing two things (hide the history / quit the place). */ .chat-close-btn { display: inline-grid; place-items: center; position: relative; width: 30px; height: 30px; padding: 0; box-sizing: border-box; color: var(--color-stone); background: rgba(253, 252, 249, 0); border: 1px solid rgba(44, 44, 44, 0); border-radius: 9px; cursor: pointer; line-height: 1; flex-shrink: 0; transition: color 0.2s, background 0.24s var(--ease-settle, ease), border-color 0.24s var(--ease-settle, ease), box-shadow 0.24s var(--ease-settle, ease), transform 0.12s; /* 0.68, not 0.35 (2026-07-25): stone at 0.35 on the room's paper measures 1.73:1, and the only way out of a live session is a control — WCAG 1.4.11 wants 3:1 for its boundary. 0.68 measures 3.20:1 and still reads as the quietest thing on the header. */ opacity: var(--rm-ink-mark); } /* ---- the 44px touch floor (iPad is a primary device here) ---- A 30px mark is a 30px mark; what has to reach 44 is the HIT. The expander is the house idiom — css/vocab-panel.css:621, "Expanded hit area (44pt) without visual bloat" — a pseudo-element with a negative inset, invisible, inheriting its host's pointer-events, costing the layout nothing. ⛔ The insets are ASYMMETRIC where a neighbour is close: an expander may overlap another expander in the dead space between two controls, never a neighbour's own visible box. Here 30 + 7×2 = 44 tall, 30 + 5×2 = 40 wide, and the two 5s meet in the middle of the cluster's 8px gap. Every expanded control below carries `position: relative` for it. */ .chat-close-btn::after { content: ''; position: absolute; inset: -7px -5px; } /* the paper only arrives under the pointer: at rest both are bare marks, which is what keeps a header with two controls in it from reading as a toolbar */ .chat-close-btn:hover { color: var(--color-ink); opacity: 1; background: rgba(253, 252, 249, 0.97); border-color: rgba(44, 44, 44, 0.10); /* ⛔ NO box-shadow, and there never was one on screen: a --shadow-rest decl sat here for weeks and never painted — `.chat-header button:hover { box-shadow: none }` (:2135) outranks it (0,2,1) over (0,2,0). Found 2026-07-28 when the rail's keys adopted this dress and the copied line DID paint there, lifting them off paper the room's own keys rest on. The flat hover is the true dress: cards rest. */ } .chat-close-btn:active { transform: scale(0.94); } .chat-close-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* (.chat-letter-key.open — the key standing down while its letter was out — and .chat-letter-key.is-writing — its seat as a promise mark while Sensei wrote — left with the letter, S10.) */ @media (prefers-reduced-motion: reduce) { .chat-close-btn { transition: color 0.2s, opacity 0.2s; } .chat-close-btn:active { transform: none; } } /* ---- THE ROOM'S MARK: the lantern (owner ruling, 2026-07-27) ---- A LAMP, not a diagram. It answers one question — whose turn is it — and it answers with LIGHT: the glow's hue says who, its depth says how alive the room is. Loudness breathes ONLY the scale (law #747, carried over verbatim from the ensō it replaces); the aura is the echo and rises with the voice. ⛔ WHY THE ENSŌ LOST, since it was the better drawing. Its own 2026-07-25 note names the risk exactly: "pale + thin + broken ring is a loading spinner's vocabulary". It answered that with ink DENSITY — real, and it works while a session is running. It cannot work at REST, where density is at its lowest by design: a still, pale, broken ring on warm paper is a spinner, and the owner read it as one on sight. A room that greets you must not look like a room that is loading. A lamp cannot be misread: lit, or not. ⛔ ONE MARK, ONE SEAT. The portal drew its own copy of this sphere on the landing, which is exactly why pressing Talk swapped one object for another. The room owns the mark; nothing else draws an orb, ever. */ .voice-viz { flex-shrink: 0; display: flex; align-items: center; justify-content: center; /* ⛔ ONE SIZING RULE, AND IT IS THIS ONE. A second `.voice-viz { height }` lived 1500 lines below (a leftover from the ensō pass) and quietly won the cascade, so this rule said 116px while the room drew 78px — a file that disagrees with the screen is worse than no comment at all. The numbers below are what is actually on the paper, and the duplicate is deleted. The 92px lamp deliberately overhangs this 78px band into the header's empty strip: that is what keeps it near the top without opening a gap between the light and the words it sits over. */ height: 78px; position: relative; margin: 6px 0 2px; opacity: 0; animation: vizFadeIn 0.6s ease 0.25s forwards; } @keyframes vizFadeIn { to { opacity: 1; } } /* WHO IS SPEAKING is a hue, set on the stage and inherited by both light layers — so a state rule changes ONE property and the whole lamp answers. Idle is a warm neutral on purpose: it must not claim a speaker. */ .voice-viz-orb { position: relative; display: grid; place-items: center; width: 92px; height: 92px; /* ⛔ ONE WARM LIGHT, AND IT IS THE BALL'S OWN (owner, 2026-07-27: "reduce the glow and make it non-blue, same colour as the ball"). The lamp had been changing HUE to say whose turn it was — indigo for Sensei, sage for you — and indigo at depth 0.5 put a blue halo round a cream sphere. It read as a notification, not as light. A lamp does not change colour; it changes how brightly it burns. So the hue is fixed to the ball's own warmth and every state moves --orb-lift alone. */ --orb-hue: #d8cdb6; --orb-lift: 0.12; /* how brightly it burns; states move this ONLY */ } /* The body of the lamp. Scale is the VOICE and nothing else. */ .voice-viz-orb .vo-ball { position: relative; z-index: 2; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 38% 33%, #f6f2ea 0%, #e7dccb 38%, #cbbda3 100%); box-shadow: inset 0 2px 3px rgba(255, 252, 244, 0.65), inset 0 -5px 11px rgba(120, 105, 78, 0.15), 0 10px 26px -12px rgba(120, 105, 78, 0.35); transform: scale(calc(1 + var(--rms) * 0.045)); transition: transform 0.25s ease, opacity 0.5s ease, filter 0.9s ease; } /* the specular — where the light is coming from; it is what makes it a sphere and not a disc, and it is the whole reason this reads as an object */ .voice-viz-orb .vo-ball::before { content: ''; position: absolute; top: 19%; left: 22%; width: 34%; height: 30%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 253, 247, 0.9), rgba(255, 253, 247, 0) 70%); } /* The glow — the lamp's own light on the paper. Hue = whose turn. */ .voice-viz-orb .vo-glow { position: absolute; z-index: 1; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 42% 40%, var(--orb-hue), var(--orb-hue) 55%, transparent 78%); filter: blur(14px); opacity: var(--orb-lift); transform: scale(calc(1.18 + var(--rms) * 0.09)); /* ⛔ THE TRANSITION MUST NOT OUTRUN THE ANIMATION. This was 0.6s, and since --orb-lift is animated (via @property) while opacity READS it, every keyframe move arrived through a 0.6s lag — the arrival bloom peaks at 0.42 in 370ms and measured 0.132 on the glass. The room was drawing a smear of the animation, not the animation. 0.2s still ate half of it (0.219); 0.09s is short enough to track a keyframe within a frame or two, and still takes the edge off the states that set --orb-lift as a FLAT value (speaking, paused, error) instead of letting them snap. */ transition: opacity 0.09s linear, background 1s ease, transform 0.3s ease; } /* The aura = the ensō's ECHO, in light: invisible until a voice is live, and its opacity IS the loudness. Nothing here animates on its own. */ .voice-viz-orb .vo-aura { position: absolute; z-index: 0; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 50% 46%, var(--orb-hue), transparent 68%); filter: blur(24px); opacity: 0; transform: scale(calc(2 + var(--rms) * 0.34)); transition: opacity 0.18s ease, background 1s ease, transform 0.3s ease; } /* ── CONNECTING → CONNECTED: THE ONE THING THE LAMP HAS TO SAY ────────────── Owner, 2026-07-27: "it should show something like 'connection is being established' and then the glow kicks in when it is done." The room used to say it in words and the owner cut them for being loud and western ("it should just show the change in connection status, this is it"). But cutting the label left nothing behind: connecting swelled 0.08→0.20, resting 0.12→0.21, connected 0.15→0.24 — three states inside four hundredths of an opacity, which is to say one state. Measured live, the glow read 0.196 at rest and 0.181 connected. Nothing arrived, because nothing changed. So the light carries it, and it carries it the only way a lamp can: by how much of it there is. Connecting the lamp is turned DOWN — dim, desaturated, breathing shallowly, plainly not ready. Then the connection lands and it BLOOMS, up eight-fold in a third of a second, and settles into the session's breath. A learner never has to be told; he watches the room light up. ⛔ Light only. Not one of these states may move the lamp — see the header note on the 14px drop. Position is a promise; brightness is the message. */ /* Connecting — the lamp is turned down while the line is found. */ .chat-mode-container.state-connecting .voice-viz-orb { /* one-shot dim off whatever it was burning at, then a shallow wait-breath. Two animations on one property: the later-listed wins once it starts, so the delay hands off cleanly with no step. */ animation: orbDim 0.6s ease-out forwards, orbSettle 2.8s ease-in-out 0.6s infinite; } @keyframes orbDim { to { --orb-lift: 0.05; } } @keyframes orbSettle { 0%, 100% { --orb-lift: 0.05; } 50% { --orb-lift: 0.11; } } /* …and the body of the lamp goes with it, so "not yet" is unmistakable even at a glance. Both properties are already transitioned on .vo-ball. */ .chat-mode-container.state-connecting .vo-ball { opacity: 0.84; filter: saturate(0.88); } .chat-mode-container.state-connecting .vo-aura { opacity: 0; } /* Ready — THE ARRIVAL. The glow kicks in: 0.05 → 0.42 in a quarter of a second, then settles. This is the whole announcement. ⛔ 0.6s, AND THAT NUMBER IS A HANDSHAKE. state-ready lasts exactly 600ms (chat-mode.js hands over to state-connected on a timer), so the animation must finish inside it: at 1.1s the breath took over mid-fall from 0.39 and yanked the light down to 0.17 in one step — a flicker at the exact moment the room is supposed to look calm and arrived. It now lands on 0.20 against the breath's 0.17 opening, a step too small to see. Change one and change the other. */ .chat-mode-container.state-ready .voice-viz-orb { animation: orbReady 0.6s ease-out forwards; } @keyframes orbReady { 0% { --orb-lift: 0.05; } 45% { --orb-lift: 0.42; } 100% { --orb-lift: 0.20; } } /* Connected idle ("your turn") — the lamp breathes at the session's pace, and it burns clearly brighter than it did while it was still finding the line. */ .chat-mode-container.state-connected .voice-viz-orb { animation: orbBreath var(--breath-duration, 7s) ease-in-out infinite; } @keyframes orbBreath { 0%, 100% { --orb-lift: 0.17; } 50% { --orb-lift: 0.26; } } /* THE QUIET ASK (slice four). Two minutes with no word from either side used to raise the card a dropped line wears. It is not an alarm: the lamp draws back a little and takes up the STANDBY breath — the one the room already uses for "waiting for you, and alive while it waits" — while the caption under it asks once. No new motion language, no new hue, and the first word from either side takes both away (noteActivity). Speaking outranks it: the two rules below own the lamp whenever a voice is in the room. */ .chat-mode-container.state-idle-ask .voice-viz-orb { --orb-lift: 0.13; animation: orbWaiting 9s ease-in-out infinite; } /* Speaking — no idle animation: the VOICE carries the life, through the ball's scale and the aura's depth. Same warm light for both turns; a voice in the room is a voice in the room, and the transcript already says whose it is. */ .chat-mode-container.state-speaking .voice-viz-orb, .chat-mode-container.state-user-speaking .voice-viz-orb { animation: none; --orb-lift: 0.26; } .chat-mode-container.state-speaking .vo-aura, .chat-mode-container.state-user-speaking .vo-aura { opacity: calc(var(--rms) * 0.22); } /* PAUSED — a held breath. The light drawn back and nothing moving, because a lesson set down mid-sentence should look held, not idling. */ .chat-mode-container.state-paused .voice-viz-orb { animation: none; --orb-lift: 0.09; } /* STANDBY — waiting for you, and ALIVE while it waits. ⛔ This is the one state that parts company with paused, and it is deliberate. The ensō ruled them identical ("a room waiting to be started and a room holding mid-lesson are the same thing to look at"), which is true of INK: a stroke at rest is a stroke at rest. It is not true of a LAMP, and it is not true of a tutor. The landing is the first thing the learner sees and its job is to say someone is here — a still lamp says the room is empty, and the owner has now rejected that read twice (once as a portal rebuild that "dropped the breathing orb", once as the ensō's spinner). So standby breathes: slower and shallower than a live turn, because it is waiting rather than listening, but it breathes. Held is still; waiting is alive. */ .chat-mode-container.state-standby .voice-viz-orb { animation: orbWaiting 9s ease-in-out infinite; } @keyframes orbWaiting { 0%, 100% { --orb-lift: 0.12; } 50% { --orb-lift: 0.21; } } .chat-mode-container.state-paused .vo-ball, .chat-mode-container.state-standby .vo-ball { transform: scale(0.97); filter: saturate(0.92); } .chat-mode-container.state-paused .vo-aura, .chat-mode-container.state-standby .vo-aura { opacity: 0; } /* Error — the light pales to muted stone, NOT gold (the design system reserves kintsugi gold for RECOVERY; the recovery card carries it). */ .chat-mode-container.state-error .voice-viz-orb { animation: none; --orb-hue: var(--color-faint); --orb-lift: 0.14; } .chat-mode-container.state-error .vo-ball { filter: saturate(0.35); } .chat-mode-container.state-error .vo-aura { opacity: 0; } /* --orb-lift is animated through @property-less custom properties, which do NOT interpolate — the keyframes above therefore STEP rather than glide in engines without registration. Registering it makes the breath a real fade. */ @property --orb-lift { syntax: ''; inherits: true; initial-value: 0.12; } /* ---- Viz Label — ⛔ THE ROOM DOES NOT NARRATE ITSELF (owner, 2026-07-27) ---- "all these messy text labels, too loud and western as well, need to go — it should just show the change in connection status, this is it." This line was the room saying out loud what its own mark was already saying: "Connecting…", then "Sensei is speaking", then "Your turn". Three English sentences appearing and disappearing under a lamp, in a room whose entire design language is that the LIGHT tells you. It also broke the branch's one promise — press play and nothing changes but the state — by making text arrive on the press. ⛔ THIS IS THE CONNECTION LINE. NOT A NARRATOR. (owner, 2026-07-27: "shall we add connection status so the user can see when the connection is being established and once it is established") Two rulings, one line, and they are not in conflict. The first cut this element for chattering: it narrated every turn — "Your turn", "Sensei is speaking", "Sensei is listening…" — which the lamp already says better than words can, and which read as loud and western over washi. So it was hidden outright. That threw out the honest half with the noisy half: a blocked microphone, a failed token, a shared tab with no audio in it, all went silent, and so did the one fact a learner genuinely cannot infer — whether the room has reached Sensei yet. So the element comes back with exactly one job: the state of the CONNECTION and of the DEVICE. Connecting, resuming, connected, ended, and every honest failure. Nothing about whose turn it is — that is the lamp's, permanently. Call sites were audited one by one; the turn cues are deleted at the source (setVizState), not hidden here, so nothing can leak back in through CSS. ⛔ ZERO HEIGHT, ALWAYS. The line paints out of a 0px box and is nudged clear of the lamp with a transform, so it can appear and vanish without moving one pixel of the room. The whole reason this pass exists is a 14px layout jump (see the header note); a status line that shoves the lamp to announce itself would be the same bug wearing a different hat. Visibility has ONE owner: setVizLabel adds .is-on for non-empty text and drops it for empty. No state class may show or hide this line — a rule like `.state-standby .voice-viz-label {opacity:0}` is a second owner, and two owners is how "Connecting…" ends up invisible on the one path that matters. */ .voice-viz-label { display: block; height: 0; overflow: visible; position: relative; z-index: 2; transform: translateY(14px); /* clears the lamp's overhang; costs no layout */ text-align: center; font-family: 'Inter', sans-serif; font-size: var(--rm-control); /* the room's one size for a hint or caption */ letter-spacing: 0.04em; color: var(--color-stone); opacity: 0; pointer-events: none; transition: opacity 0.55s var(--ease-settle, ease); } .voice-viz-label.is-on { /* 0.92, not 0.5 (2026-07-28). Stone at 0.5 over the lamp's bright core (#FAF7F0 → #F1EEE7) measures 2.29:1 → 2.23:1 — half the 4.5:1 AA floor for 11px text, and this text carries "Microphone blocked" and the share-audio hints: the room's whole honest-failure channel, unreadable. 0.92 measures 5.82:1 → 5.44:1, and it is not a new number — it is the one already ruled for the ♪ door on this same paper (:1659). */ opacity: var(--rm-ink-quiet); } /* ⛔ NOT "once conversation starts, the label fades permanently" — that comment outlived its behaviour and misled a room review into redesigning around a captionless ring. The P1 pass deleted appendMessage's hideVizLabel() call on purpose: the caption PERSISTS as the turn cue ("Your turn" / "Sensei is speaking" / "Sensei is listening…") for the whole session, and it is also the room's error channel. Nothing in app code adds .hidden any more; only a screenshot harness ever did. Keep the class — resetTranscript still removes it — but never hide the cue. */ .voice-viz-label.hidden { opacity: 0 !important; animation: none; } /* Dead-mic line (1.5): pale-stone DEVICE diagnostic under the enso — stands only while a live session's mic reports muted/ended (or a sustained exact-zero flatline), gone the instant the track unmutes or energy returns. Quiet by design: it questions the input, never the learner. */ .voice-mic-silent { flex-shrink: 0; text-align: center; font-family: 'Inter', sans-serif; font-size: var(--rm-support); color: var(--color-stone); /* Same defect one size up, same answer: 0.8 measured 4.13:1 on the lamp's paper, under the floor for a line that says the device is not working. */ opacity: var(--rm-ink-quiet); height: 16px; line-height: 16px; margin-bottom: 6px; } .voice-mic-silent[hidden] { display: none; } /* ---- Transcript Area (with top edge fade) ---- */ .chat-transcript { flex: 1; overflow-y: auto; /* ⛔ STRUCTURAL, not cosmetic. `overflow-y: auto` alone computes overflow-x to auto as well, so ANY overlay poking past the column earns a 15px horizontal scrollbar — and a horizontal scrollbar eats 15px of this box's clientHeight, which the bottom-anchored record below absorbs as a 15px jump under the learner's eyes. A session record never scrolls sideways; say so, and the whole class of bug is closed at the source. (The card's own left clamp keeps it from being clipped — this is the backstop for the frame where a card grows before the clamp re-runs.) */ overflow-x: hidden; scrollbar-width: thin; /* the Firefox half of the 3px hairline below */ scroll-behavior: smooth; padding: 16px 0; display: flex; flex-direction: column; /* named because the bottom-anchor's spacer below has to cancel exactly one of these — a literal there would drift the day this changes */ --chat-turn-gap: 6px; gap: var(--chat-turn-gap); min-height: 0; opacity: 0; animation: vizFadeIn 0.4s ease 0.6s forwards; /* Both edges dissolve now. The old 28px top fade was shorter than one 32px line box, so Sensei's first line was cut in half rather than faded (worst on iPad, where the band is tighter); and the bottom had no fade at all, so the record collided with the bar's paper. ⛔ THE TOP FADE CLEARS THE LAMP (S6, 2026-07-28). The 92px lamp overhangs its 78px band ~5px into this box, and its glow reaches ~25px further — and the old 44px ramp left a scrolled line ~60% readable inside that light (measured at 28px in). The first 16px are now fully transparent (the ball's own overhang), then the ramp runs to 72px, so a line dissolves before it enters the lamp's field instead of passing, still readable, behind it. */ -webkit-mask-image: linear-gradient(to bottom, transparent 16px, black 72px, black calc(100% - 26px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 16px, black 72px, black calc(100% - 26px), transparent 100%); padding-bottom: 22px; } /* THE TALK GROWS FROM WHERE YOU SPEAK (landed 2026-07-25, third attempt). A young session used to hang from the ceiling with ~450px of nothing between the last line and the bar — the room's worst look, in its opening minutes. The record now rests ON the bar and grows upward, the way every chat the learner already uses behaves; the empty space moves above, where it reads as sky. Once the talk outgrows the port the auto margin resolves to 0 by itself and the scroller takes over — and scrollTranscript()'s 120px stick-to-bottom means that handover is invisible. THE THREE TRAPS, all paid for once: ⛔ NEVER `justify-content: flex-end` here. Both Chrome and WebKit strand the START edge of an overflowing scroller, and THIS scroller is the session record (Copy transcript reads it). ⛔ Scope by :has() to a transcript that actually holds turns. The empty state carries `flex: 1` and would fight an unconditional spacer. ⛔ The pseudo is a flex ITEM, so it earns a `gap` of its own: without the negative bottom margin the record silently gained 6px of dead air (measured: scrollHeight 1728 -> 1734 on a 14-turn room). The 2026-07-25 reversal was right that a first-item spacer makes free space absorb every perturbation, and right to demand the overlay be made provably inert first. It named the wrong culprit twice, and both were worth chasing: · The 15px it measured on hover was NOT the placard — the identical 15px lands with no card on screen at all. It was the line's own reading attachment settling late in a staging that hand-writes textContent after the append (see the S3c note in verify_voice_transcript.py). · But a REAL placard perturbation was hiding underneath: expanding a word tray grew the card past the column, which bought a horizontal scrollbar, which ate 15px of clientHeight. Fixed at the source (overflow-x above) and at the card (clamp-last + a ResizeObserver, js/chat-mode.js). With both fixed, the overlay is inert: measured frame-by-frame on the real dev server — young room and scrolled overflowing room, hover / pin-dock / word-tray-expand, 1440 and 820 — it moves no message top, no scrollTop, no scrollHeight, no clientWidth, at any animation frame. `tests/desktop/verify_voice_transcript.py` S53 pins that as a law now, instead of a comment claiming it. */ /* ⛔ .chat-landing-head COUNTS AS RECORD (2026-07-27). The spacer is what makes a young session rest ON the bar instead of floating mid-room (S53). The landing is the record's first block now, so it must sit where a first block sits — otherwise the greeting hangs in the middle at rest and drops the moment Sensei's first line makes the spacer apply, which is the 149px half of the jump the owner reported. */ .chat-transcript:has(.chat-message, .chat-attach-turn, .chat-landing-head)::before { content: ''; flex: 0 0 auto; margin-top: auto; margin-bottom: calc(-1 * var(--chat-turn-gap)); } /* Subtle scrollbar */ .chat-transcript::-webkit-scrollbar { width: 3px; } .chat-transcript::-webkit-scrollbar-track { background: transparent; } .chat-transcript::-webkit-scrollbar-thumb { background: rgba(44, 44, 44, 0.08); border-radius: 3px; } .chat-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 0 24px; color: var(--color-stone); font-family: 'Inter', sans-serif; } /* ── THE ROOM AT REST IS THE LANDING (owner ruling 2026-07-26) ────────────── S2 made the room the entry and the lobby went with it. It comes back here — not as a surface of its own, but seated in the room while it rests, so nothing has to move to start talking. The lobby's own CSS (.vp-lobby, .vp-welcome, voice-portal.css) is untouched and still the one definition; these rules only give it a seat. (.vp-shelf was named here too until 2026-07-28 — the shelf is gone from the landing and its rule with it.) */ .chat-empty-state .ces-lobby { width: 100%; } .chat-empty-state .ces-lobby:empty { display: none; } /* ⛔ ONE SEAT, AND #cesLobby IS NOT IT (corrected 2026-07-28). This block used to say "TWO SEATS, ONE DRESS" and pair every landing rule with a `.chat-empty-state .ces-lobby …` half. The socket is real — #cesLobby is in index.html — but the ONLY thing any JS ever writes to it is emptiness (renderDoorCard: `seat.textContent = ''`); the landing is seated in `.chat-landing-head` inside the transcript. So no DESCENDANT of .ces-lobby can ever match, and those halves have been dressing an empty box. The two lines above STAY and are load-bearing: the :empty hide is what keeps the empty socket from taking up room in the door card. The rule below still needs its .chat-landing-head half for the original reason — .vp-lobby's own `min-height: calc(100vh - 150px)` (voice-portal.css) would come straight back and shove the whole talk off screen. */ .chat-landing-head .vp-lobby { width: 100%; min-height: 0; /* it is not filling a viewport here — the room is */ margin-inline: auto; padding: 0 8px; /* (text-align:left left this seat 2026-07-28 — the landing centres on the room's one axis now, and the alignment is the lobby's own dress: .vp-lobby, voice-portal.css. One alignment, every width, every seat.) */ animation: none; /* the room already has an entrance */ } /* …but the RECORD's arrival is not an entrance. The seat's animation:none above out-ranks .vp-record-in (0,2,0 over 0,1,0), which silently killed the S5 one-crossfade law on the landing while the rail faded alone — the file claimed a fade the screen never drew. This twin re-arms exactly the record crossfade at seat specificity; base opacity stays 1 and the keyframe carries only `from`, so the reduce kill below lands the end state by construction. */ .chat-landing-head .vp-lobby.vp-record-in { animation: vpRecordIn 0.22s ease-out; } /* (the ≤900px .vp-welcome single-column twin left with the orb — the orbless welcome IS one column at every width: .vp-welcome--noorb, voice-portal.css) */ /* Promoted, it is the record's first block and the talk's head. No rule, no seam, no card: it is not a new object, it is the same greeting one beat later. ⛔ The 24px side padding is LOAD-BEARING and is copied from .chat-empty-state deliberately. The landing is measured in its door-card seat, which carries that padding; a head without it re-lays the same text 24px left and 48px wider the instant it is promoted. Measured before this line: the greeting moved x 734→710, w 504→552 on the press. The two seats must agree to the pixel or "nothing moves" is not true. */ .chat-landing-head { flex: 0 0 auto; padding: 0 24px; } /* …and the same argument vertically. room-open gives .chat-empty-state a 12px top padding, which at rest sits ABOVE the landing and after the promotion sits above the RESCUE TRIO instead — i.e. it crosses from one side of the greeting to the other, and the greeting rises 12px to pay for it (measured: the last 14px of the press's movement). The head takes that padding over, and the door card gives it up for exactly as long as a head is carrying it, so the total mass and the greeting's offset inside it are both unchanged. */ .chat-mode-container.room-open .chat-landing-head { padding-top: 12px; } .chat-mode-container.room-open .chat-transcript:has(.chat-landing-head) .chat-empty-state { padding-top: 0; } /* the generic promise is the fallback for a room opened without the portal */ .chat-empty-state.has-aim .ces-line, .chat-empty-state.has-aim .ces-sub { display: none; } /* ⛔ NOT WHERE THE LANDING IS (owner 2026-07-26, amended 2026-07-27). The TRIO is ruled content and KEEPS its home — it just stops appearing where it says nothing: it is permission before panic (#936), for a stall that has not started, and at rest he is reading his history, not about to freeze. (Its partner here, the letter's ECHO, left with the letter, S10.) The TRIO keeps .state-standby: it is not a duplicate of anything, it is new content, and "Connecting…" is still the right beat to teach the three moves the learner may always play. ⛔ visibility, NOT display, for the trio. The room at rest centres its content as one mass, so a trio that arrives with `display:none → flex` grows that mass by its own 138px and lifts everything above it by half — measured: the whole greeting rose 69px on the press, which is the learner's own reading matter moving under his eyes at the one moment we promised it would not. `visibility: hidden` keeps the box and spends the space up front. It costs a band of blank paper below the greeting at rest, on a surface whose whole design is an empty room, and buys a press that moves NOTHING. */ /* ⛔ AND THE TRIO GOES WITH THEM (owner, 2026-07-27). It was authored for the "Connecting…" beat and it is real teaching — もう一度 (mou ichido, "again"), ゆっくりお願いします (yukkuri onegaishimasu, "slowly, please"), 英語で？ (eigo de?, "in English?") — but it ARRIVED ON THE PRESS: a letterspaced English rubric ("YOU CAN ALWAYS SAY") plus three glossed lines materialising in a room that had just promised nothing would change. Loud, western, and the wrong moment. The press shows one thing: the lamp changing. ⛔ NOT DELETED — the markup and its dress stay whole, and the phrases are owed a calmer home (a rest-state fold, or Sensei simply teaching them). This is a retirement from the connect beat, not from the curriculum. (S12c: the show-a-page line travels with the trio for the same reason and under the same rule — where the landing speaks, this card says nothing, and there Sensei carries the teaching instead.) */ .chat-mode-container.has-landing .ces-rescue, .chat-mode-container.has-landing .ces-page-hint { display: none; } .chat-empty-state .ces-line { font-family: 'Klee One', 'Noto Sans JP', serif; font-size: var(--rm-en); color: var(--color-ink); opacity: var(--rm-ink-full); } .chat-empty-state .ces-sub { font-size: var(--rm-support); line-height: 1.5; max-width: 32ch; opacity: var(--rm-ink-quiet); } /* The way in for a page, said once and quietly — the sub's own recipe, its own class (S12c). It is the portal-less fallback's copy of what Sensei says. */ .chat-empty-state .ces-page-hint { margin-top: 14px; font-size: var(--rm-support); line-height: 1.5; max-width: 34ch; opacity: var(--rm-ink-quiet); } /* Rescue phrases (1.4) — the legal moves, taught at the door before the first stall. Quiet reference, never a lesson: JP in ink, romaji reach in stone. Since the one-bar build (#936) this is the trio's ONLY home: the door card folds when the talk starts, so there is no mid-session reminder — the named, owner-gated loss of that slice. */ .chat-empty-state .ces-rescue { margin-top: 18px; display: flex; flex-direction: column; gap: 3px; } .cr-lead { font-family: 'Inter', sans-serif; font-size: var(--rm-caption); letter-spacing: var(--rm-track); font-weight: var(--rm-track-weight); text-transform: uppercase; color: var(--color-stone); opacity: var(--rm-ink-quiet); margin-bottom: 2px; } .cr-row { font-size: var(--rm-support); line-height: 1.55; } .cr-jp { font-family: 'Klee One', 'Noto Sans JP', serif; color: var(--color-ink); opacity: var(--rm-ink-full); } .cr-gloss { font-family: 'Inter', sans-serif; font-size: var(--rm-control); color: var(--color-stone); opacity: var(--rm-ink-quiet); margin-left: 2px; } /* (Scope line retired — owner 2026-07-23: the session aim is Sensei's marching order, never learner-facing copy.) */ /* ---- Messages (variable rhythm) ---- */ .chat-message { display: flex; flex-direction: column; /* T1.2: anchor for absolutely-positioned per-line surfaces (the replay mark today, the T1.5R disclosure placard next) — migrated here from .agent.has-replay so every message can anchor an overlay. */ position: relative; } /* Adjacency air — the cross-role rhythm is the transcript's main beat. BUBBLE-DRESS ruling (owner 2026-07-23, superseding the same-day breathing pass's indent-and-labels grammar): follow the established voice/chat convention (claude.ai, iMessage) instead of inventing one — the learner speaks from a soft right-aligned bubble, Sensei speaks in plain left text, and that per-turn asymmetry IS the speaker identity, continuous at any scroll position. The vertical rules stay retired (breathing), the role labels stop painting (sr-only below), and the air stays 20px. Ghost blocks sit on the 6px baseline gap (A2). */ .chat-message.agent + .chat-message.user:not(.is-pending), .chat-message.user + .chat-message.agent { margin-top: 20px; } /* Agent message — plain left text, the convention's assistant side. No rule, no wash, no indent beyond breathing padding (T1.8's ink law); gold never dresses a speaker (repair-only). */ .chat-message.agent { padding: 6px 10px; animation: agentFadeIn 0.4s ease; } /* User message — the learner's bubble (bubble-dress ruling): a quiet ink wash (3% since 07-25), radius 12, right-aligned via margin-left auto so short lines hug the scroller's 14px lane (legacy fix #2) and long lines keep the measure cap. Text inside stays left-aligned — the bubble sits right, the words do not. */ .chat-message.user { padding: 4px 0; animation: userFadeIn 0.3s ease; } .chat-message.user .chat-message-text { width: fit-content; margin-left: auto; margin-right: 14px; padding: 3px 14px; /* 3%, not 5% (2026-07-25). R3.8's faint-warm ink HOLDS AA on bare paper (4.78:1); it was this wash underneath that pushed the learner's own words to 4.35:1, under the 4.5 floor for 12.5px. Lightening the wash clears the floor (4.55:1) and leaves the owner-picked ink lever alone. The bubble dress is unchanged in kind: wash + radius + right seat. */ background: rgba(44, 44, 44, 0.03); /* slice five: 14 → the room's 12, one radius fewer. It borrows the popover's CORNER, never its light (no pop shadow, no pop hairline: a wash rests). The wash above is a measured AA floor and stays as it is. */ border-radius: var(--rm-pop-radius); } /* ---- WHOSE VOICE (A5, 2026-08-01) ---------------------------------------- Share-audio puts a textbook CD into the same stream the microphone feeds, so the transcription filed a 本間先生 monologue as the learner's own speech. The record now says which it was, and the room has to say it too — the tag would otherwise be a truth only a JSON file knows. A PLAYED line is material he BROUGHT, not language he produced. It keeps his side of the room (he did bring it) and loses the two things that mean "he said this": the ink wash of his bubble, and his name. In their place it wears the handed-object grammar the shown-page card already owns — one hairline on bright card paper, `.cat-thumb`'s exact border — because a recording and a photographed page are the same kind of thing. No new hue, no new size, no new mark family. */ /* THE CARD IS THE BLOCK (rec-card, 2026-08-26): the dress moved up from the text span so the caption and the words bind into ONE leaf — the caption used to float as a stray right-aligned line over a separate box, which is what made the surface read unfinished. The material is unchanged and the material is the argument: his speech is a WASH — flat ink on the paper, no edge, because a spoken line is not a thing. A recording is a thing he carried in, so it wears exactly what the page card wears (.cat-thumb: card paper, one hairline, one resting shadow — T1.1's "a handed object MAY wear card material"). ⛔ Rests, never floats. */ .chat-message.user.played { width: fit-content; max-width: calc(100% - 14px); margin-left: auto; margin-right: 14px; background: var(--color-card-bright, #FEFDFB); border: 1px solid var(--rm-edge-strong); border-radius: 8px; padding: 6px 13px; box-shadow: var(--shadow-subtle, 0 1px 2px rgba(44, 44, 44, 0.03)); } .chat-message.user.played .chat-message-text { background: none; border: none; border-radius: 0; box-shadow: none; padding: 0; margin: 0; width: auto; } /* A change of KIND entering the talk earns the same air a change of SPEAKER does (the 20px cross-role rule above), so a recording never looks like the next thing he said. */ .chat-message.user.played { margin-top: 20px; } .chat-message.user.played + .chat-message.user:not(.played) { margin-top: 20px; } /* The only labels in the transcript that are NOT orientation. Every other speaker label is sr-only, read off the seat and the dress instead — but provenance cannot be read off a seat he still occupies, so these are spoken. ONE grammar for one fact: the caption says whose voice, and the dress says whether the words are his. (A hairline was tried first and measured invisible against the bubble's own edge — a mark nobody can see is not a quieter mark, it is a missing one.) */ .chat-message.user.played .chat-message-role, .chat-message.user.over-played .chat-message-role { position: static; display: block; width: auto; height: auto; /* 6px to its object, the same gap the page card keeps between its status line and the page (.cat-side) — one rhythm for both brought things. */ margin: 0 14px 6px auto; padding: 0; overflow: visible; clip: auto; text-align: right; font-family: 'Inter', sans-serif; font-size: var(--rm-control); line-height: 1.5; color: var(--color-stone); /* 0.92, not 0.75: stone × 0.75 at 11px measures 3.7-4.2:1 on this paper — under the 4.5:1 AA floor the file has already ruled on twice at this size (see the 0.5 and 0.8 notes above). The line that says whose voice a played turn was — the whole point of A5 — may not be the least legible text on the surface (A10). */ opacity: var(--rm-ink-quiet); } /* He talked OVER the recording: the words ARE his, so the bubble is untouched and only the caption changes. Nothing is re-seated. */ /* THE EYEBROW (rec-card): on a played card the caption stops floating above the object and becomes its own top line — same voice, same ink, now part of the leaf. The ♪ in front is the Share-audio family's existing mark, so the door that created this turn and the line that names it wear one sign (alt-text empty: the caption already says it in words). It is also the card's STANDING control — the one re-fold door on an open card, so the word doors inside keep every other click. */ .chat-message.user.played .chat-message-role { margin: 0 0 4px 0; text-align: left; cursor: pointer; } .chat-message.user.played .chat-message-role::before { content: '♪ ' / ''; } .chat-message.user.played .chat-message-role:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* AT REST A LONG RECORDING FOLDS (rec-card): ~3 lines in the support voice, reading as a RECORD entry beside the live speech — a 2-minute listening drill takes the space of a footnote, not a monologue (T1.4's deeper rule: apparatus never out-masses the speech it serves). Opened, it returns to full reading dress: once he chooses to read it, the Japanese is what he came for. Voices re-scoped through the CHARTERED tokens — no sixth size enters the room, and --rm-line is re-derived for the support size per the baseline-pin law (13px in a 20px box = 1.54 leading, inside JLReq range). Quiet said in HUE at full strength (B9): the local --color-ink hands the folded card's Japanese the stone the room already owns — never a new alpha. */ .chat-message.user.played.rec-folded { --rm-jp: var(--rm-support); --rm-en: var(--rm-support); --rm-line: 20px; --color-ink: var(--color-stone); cursor: pointer; } .chat-message.user.played.rec-folded .chat-message-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* The dissolve edge IS the door: one ::after does both — the last line fades into the card paper (the fade says "more"; no counter, no caption), and the overlay makes the folded card itself the click target, so a folded tap can never land on a word door underneath. Removed the moment the card opens. */ .chat-message.user.played.rec-folded::after { content: ''; position: absolute; inset: 0; z-index: 1; cursor: pointer; border-radius: 8px; background: linear-gradient(to bottom, transparent 55%, var(--color-card-bright, #FEFDFB) 96%); } /* The door affordance is the page-card door's own: the hairline warms to the indigo hover tone — ink changes, geometry never moves. */ .chat-message.user.played.rec-folded:hover { border-color: rgba(61, 90, 128, 0.5); } @media (prefers-reduced-motion: reduce) { .chat-message.user.played, .chat-message.user.over-played { animation: none; } } @keyframes agentFadeIn { from { opacity: 0; transform: translateY(3px) translateX(-4px); } to { opacity: 1; transform: translateY(0) translateX(0); } } @keyframes userFadeIn { from { opacity: 0; transform: translateY(3px) translateX(4px); } to { opacity: 1; transform: translateY(0) translateX(0); } } /* ---- Message Text ---- */ /* T1.3 type-barbell-two-voices: one line, two voices. English speech rests in Inter stone at the base size; Japanese runs wear Klee at full ink INSIDE the same line (.jp-run/.jp-wide rules at the Tier 1 block below). Px line-heights pin the baseline grid so mixed sizes never shift turn heights. BOTH SPEAKERS NOW SHARE ONE SIZE AND ONE BOX (2026-07-25 type scale). The learner used to speak 1px smaller in a 27px box — a size difference nobody can see, doing the work of saying whose turn it is, which the bubble dress already says outright. In a room whose whole purpose is getting HIM to speak, his words are not the junior voice. (R3.8's ink lever is untouched: his English stays faint-warm by owner ruling. That is colour, not size.) */ .chat-message-text { font-family: 'Inter', 'Noto Sans JP', sans-serif; font-size: var(--rm-en); line-height: var(--rm-line); color: var(--rm-speech-ink); /* slice one: Sensei's English is content, in warm ink */ word-break: break-word; /* 禁則 kinsoku — a wrapped Japanese line never OPENS with a small kana or a mark that belongs to the character before it (ゃゅょっー、。」). At the default `line-break: auto` Chrome resolves small kana to ideographic and a break before ゃ is legal, so 「じゃあ」 wrapped as じ / ゃあ in the owner's 2026-08-01 screenshot. `line-break` is the ONLY property that carries this tailoring — word-break and overflow-wrap do not touch CJK. House precedent: css/study-walk.css. Costs no lines: strict changes where a break may fall, never how many there are. */ line-break: strict; } .chat-message.user .chat-message-text { font-size: var(--rm-en); line-height: var(--rm-line); } /* Reading fetch failed: a pale tappable hairline stands where the reading would be — the helper may never fail silently over raw kanji. DOM-only (outside sessionTurns), so Copy transcript never carries it. Sits in the reading line's seat: if the annotation gutter (2.9) indents the .chat-reading/.chat-en/.chat-gloss decks, indent this with them. */ .chat-reading-retry { display: block; margin-top: 4px; padding: 0; background: none; border: none; font-family: 'Inter', sans-serif; font-size: var(--rm-control); line-height: 1.5; font-style: italic; color: var(--color-stone); opacity: var(--rm-ink-quiet); cursor: pointer; text-align: left; } .chat-reading-retry:hover, .chat-reading-retry:focus-visible { opacity: var(--rm-ink-full); } /* The unpack card: the full pack for one phrase — kana, romaji, meaning, and the corpus-known words inside. Paper on paper, one hairline; content is the decoration. */ /* T1.7 mat-object-frames-hug: the placard is exactly as big as what it says — fit-content, hard-capped at the deck measure (318px + 28px padding + border = 352px), min-width guarding the narrow diff case. Material: card-bright SOLID (its documented role — a translucent wash would sit on T1.1's paper), one hairline, the subtle shadow. */ .chat-unpack { margin-top: 8px; padding: 10px 14px 11px; width: fit-content; /* Both bounds yield to the column (--cu-available-width, set by anchorPlacard). A card wider than the column overflows the transcript horizontally, and since `overflow-y: auto` computes overflow-x to auto, the browser answers with a 15px horizontal scrollbar that eats 15px of clientHeight — which the bottom-anchored record then absorbs as a jump. The min-width yields too: on a narrow room, 240px of frame is not worth a scrollbar. */ min-width: min(240px, var(--cu-available-width, 240px)); max-width: min(352px, var(--cu-available-width, 352px)); max-height: min(72vh, 560px, var(--cu-available-height, 560px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; background: var(--color-card-bright, #FEFDFB); border: 1px solid var(--rm-pop-line); border-radius: var(--rm-pop-radius); /* ⚖️ AMENDED 2026-07-28 (the popover spec). This carried --shadow-rest, the house's RESTING shadow — chosen in the 2026-07-25 pass over an even fainter --shadow-subtle, which was the right call between those two and still the wrong family. The placard does not rest: it is an abspos overlay hanging beside a line of the record, i.e. the same object as the bar's slips and the row menu. It lights like them now. ⛔ .cu-docked overrides all of this back to --shadow-rest, and that is correct — docked, the card really is sitting in the rail. */ box-shadow: var(--rm-pop-shadow); animation: unpackIn 0.22s ease; } .chat-unpack::-webkit-scrollbar { width: 3px; } .chat-unpack::-webkit-scrollbar-thumb { background: rgba(44, 44, 44, 0.08); border-radius: 3px; } @keyframes unpackIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } } .chat-unpack .cu-surface { font-family: 'Klee One', 'Noto Sans JP', sans-serif; font-size: var(--rm-jp); line-height: 1.6; color: var(--color-jp-text); /* slice one: the house's Japanese ink */ } /* (.cu-kana DELETED 2026-08-06, B9. Nothing has ever emitted it — the placard's fragment builder mints cu-surface / cu-romaji / cu-en, and no `cu-` class in this room is ever built by concatenation, so that check is exact rather than a guess. Found by the ink ladder's gate-hygiene pass: a dead rule only surfaces when something is finally forced to make a decision about its value.) */ .chat-unpack .cu-romaji { font-family: 'Inter', sans-serif; font-size: var(--rm-support); font-style: italic; color: var(--color-romaji); } .chat-unpack .cu-en { font-family: 'Inter', sans-serif; font-size: var(--rm-support); color: var(--color-ink); opacity: var(--rm-ink-quiet); margin-top: 3px; } .chat-unpack .cu-words { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--rm-edge); display: flex; flex-direction: column; gap: 1px; } .chat-unpack .cu-w { display: block; margin: 0 -6px; padding: 4px 6px; border-radius: 6px; align-items: baseline; font-size: var(--rm-support); line-height: 1.55; } .chat-unpack .cu-w-main, .chat-unpack button.cu-w-summary { display: grid; grid-template-columns: minmax(64px, auto) minmax(76px, auto) minmax(0, 1fr) 16px; align-items: baseline; column-gap: 12px; min-width: 0; } .chat-unpack .cu-w-jp { font-family: 'Klee One', 'Noto Sans JP', sans-serif; font-size: var(--rm-support); color: var(--color-jp-text); /* slice one: the house's Japanese ink */ } .chat-unpack .cu-w-read { font-family: 'Inter', sans-serif; font-style: italic; color: var(--color-romaji); } .chat-unpack .cu-w-gloss { font-family: 'Inter', sans-serif; color: var(--color-stone); min-width: 0; } .chat-unpack .cu-w:not(.cu-w-actionable) .cu-w-gloss { grid-column: 3 / 5; } .chat-unpack .cu-w-actionable { transition: background 0.15s ease; } .chat-unpack .cu-w-actionable:hover, .chat-unpack .cu-w-actionable:focus-within, .chat-unpack .cu-w-actionable.actions-open { background: color-mix(in srgb, var(--color-accent) 4%, transparent); } .chat-unpack button.cu-w-summary, .chat-unpack button.cu-w-summary:hover, .chat-unpack button.cu-w-summary:active { width: 100%; margin: 0; padding: 0; border: 0; border-radius: 3px; background: none; box-shadow: none; transform: none; font: inherit; line-height: inherit; color: inherit; text-align: left; cursor: pointer; } .chat-unpack button.cu-w-summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-accent) 72%, transparent); outline-offset: 2px; } .chat-unpack .cu-w-caret { align-self: center; justify-self: end; width: 16px; font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1; text-align: center; color: var(--color-stone); opacity: var(--rm-ink-mark); transform-origin: center; transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease; } .chat-unpack .cu-w-actionable:hover .cu-w-caret, .chat-unpack button.cu-w-summary:focus-visible .cu-w-caret, .chat-unpack .cu-w-actionable.actions-open .cu-w-caret { color: var(--color-accent); opacity: var(--rm-ink-full); } .chat-unpack .cu-w-actionable.actions-open .cu-w-caret { transform: rotate(90deg); } .chat-unpack .cu-word-actions { margin-top: 5px; padding: 8px 0 2px; border-top: 1px solid var(--rm-edge); } .chat-unpack .cu-word-actions[hidden] { display: none; } @media (hover: none), (pointer: coarse) { .chat-unpack button.cu-w-summary { min-height: 44px; } .chat-unpack button.cu-verb { min-height: 44px; } /* (the caret's coarse-pointer lift to 0.45 LEFT here 2026-08-06, B9. It existed because a touch device has no hover to reveal a 0.28 mark — but 0.45 measures 1.89:1, still under WCAG 1.4.11's 3:1, so it was half a fix. The rest state is the mark rung now (3.41:1) on every pointer, which is what the lift was reaching for; keeping it would make the caret LIGHTER on iPad than on a mouse, backwards on a primary device.) */ } /* ⛔ THE cu-keep ANATOMY IS DELETED (2026-07-28). Eleven selectors dressing a `.cu-keep` row inside the placard — a row NO JS has written since the R3.3 ruling replaced it with the named .cu-verb rows. Its own comment admitted as much and then kept it anyway, "for the historical elevation screenshot harness". A screenshot harness is not a reason to dress a surface the product cannot render: nothing it shot can be re-shot, because nothing emits the markup. One of the eleven was NOT dead — the kept dot — and it was hiding in a shared declaration block with a dead sibling, which is exactly how a live rule gets deleted by the next person to read this. It now stands on its own beside the .jp-run rules it belongs to. (残す itself is alive and well; it is a JP-RUN door in the record now, not a row in the placard.) */ /* Per-line replay (2.3 → T1.5R): the resting "listen" mark and its 58px reserved padding DIED with the second ruling (kill row 21) — the listen → slower → stop ladder rides the hover placard of any door on a Sensei range whose audio is still buffered (.cu-listen in the Tier 1 block). Replay mechanics (buffer, seal, evict, barge-in yield, own element — law #747) are untouched. */ /* The kintsugi repair seam (2.8) is RETIRED (owner, 2026-08-01). It underlined one word of Sensei's line in gold whenever a kana edit-distance heuristic guessed she had just recast the learner's slip. Two findings killed it, measured by replaying the live detector over all 46 captured sessions: it fired 322 times (1 in 4 eligible replies) and under 1 in 10 was a real recast — 寒い→寒いです, します→仕事, 130 on lines opening "Yes, that's correct". And because the seam was a BUTTON spliced into the middle of a run, it cut that clause's hover door into fragments 66% of the time, so the learner asking for the sentence's meaning got half a sentence translated alone, while the gold word's own card carried no English at all. Corrections keep their honest home: the letter's correction block, authored after the session by a Teacher that read the whole night. */ @media (prefers-reduced-motion: reduce) { .chat-unpack { animation: none; } .chat-message-text .jp-run[role="button"] { transition: none; } } /* ---- Role Label — sr-only ALWAYS (bubble-dress ruling, owner 2026-07-23): the speaker reads from the dress (learner bubble right / Sensei plain left), so no label paints. The labels stay in the DOM for assistive tech, and the orientation-moment emission rhythm (T1.10) keeps deciding which carry .role-hidden — a class distinction that no longer changes paint. */ .chat-message-role { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* T1.10 — suppressed labels are SR-ONLY (kept for assistive tech), never display:none: identity must survive for a screen reader even when the eye reads it from the hairline grammar. */ .chat-message-role.role-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- Screen reader only ---- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- Hide app chrome when voice overlay is active ---- */ body.chat-mode .hero-top-bar, body.chat-mode .app-branding-topleft, body.chat-mode .grid-filter-bar, body.chat-mode .grid-search-bar, body.chat-mode .nav-tools-row, body.chat-mode .intro-mode-indicator { display: none !important; } /* ---- Desktop Only ---- */ @media (max-width: 768px) { .chat-mode-overlay, /* body-level, so the overlay's hide cannot reach them — every body-level room surface leaves with the room, or it stands over a vanished room as a locked door. A10 took the page viewer; A7 finishes the roster: the letter panel, the recovery family (the portal's delete ask rides the same .chat-recovery classes) and the save-failed banner (inline-styled, so this is its only stylesheet word — display wins because its cssText never sets one). */ .cat-viewer, .chat-thread-panel, .chat-recovery, .chat-recovery-scrim, #chatSaveFailed { display: none !important; } } /* ⛔ NO "NARROWER DESKTOPS" OVERRIDE (deleted 2026-07-28). It read `@media (min-width: 769px) and (max-width: 1024px) { .chat-mode-container { max-width: 100%; padding: 20px 24px 16px } }` — written when the room was a floating overlay that needed to earn back its side air on a small laptop. It outlived that: it sits LATER in this file than the 640px cap, at the same specificity, so on every viewport in the band it simply won, and the room ran the full width of its stage against the owner's own ⛔ ruling below ("THE ROOM IS 640px WIDE. ALWAYS"). Measured on the iPad's 820×1180 with the rail put away: container 820px wide, i.e. the reading measure the whole room is composed around, gone. Deleting it is not a new decision — it is the 2026 -07-27 ruling finally reaching the viewport where the owner reads. */ /* ---- Reduced Motion ---- */ @media (prefers-reduced-motion: reduce) { .chat-mode-overlay { transition: opacity 0.3s ease; clip-path: none; } .chat-mode-overlay.visible { clip-path: none; } /* the portal-content rule above outranks the one two lines up (it carries body.voice-portal-open), so reduced motion has to say it again there */ body.voice-portal-open .chat-mode-overlay { transition: opacity 0.3s ease; } .chat-message, .chat-message.agent, .chat-message.user { animation: none; } .voice-viz { animation: none; opacity: 1; } /* A still lamp: state reads through the glow's hue and depth alone. The breath and the voice's scale both stop; the light does not, because it is what says whose turn it is and reduced motion is not reduced meaning. ⛔ The end state must LAND (reference_reduced_motion_must_land): killing the animation over an `--orb-lift: 0` base would leave an unlit lamp forever, which is the exact class of bug that once blanked mobile search. */ .voice-viz-orb { animation: none !important; --orb-lift: 0.18; } /* ⛔ REDUCED MOTION IS NOT REDUCED MEANING. Killing the animations left one flat 0.18 for every state, so the one thing the lamp exists to say — finding the line vs. connected — stopped being said at all to the people who asked for less movement. The breath goes; the DIFFERENCE stays, as two held levels the glow's own transition crossfades between. */ .chat-mode-container.state-connecting .voice-viz-orb { --orb-lift: 0.05; } .chat-mode-container.state-ready .voice-viz-orb, .chat-mode-container.state-connected .voice-viz-orb { --orb-lift: 0.24; } .voice-viz-orb .vo-ball { transform: none !important; transition: filter 0.4s ease; } .voice-viz-orb .vo-glow { transform: scale(1.18); transition: opacity 0.4s ease, background 0.4s ease; } .voice-viz-orb .vo-aura { display: none; } /* the status line keeps its meaning under reduced motion — only the crossfade goes. ⛔ Never a flat `opacity: .5` here: that pins it ON, and a permanent "Connecting…" is a lie the moment the room connects. */ .voice-viz-label { transition: none; } .chat-transcript { animation: none; opacity: 1; scroll-behavior: auto; } /* the quiet ask lands its drawn-back light with no breath */ .chat-mode-container.state-idle-ask .voice-viz-orb { animation: none; --orb-lift: 0.13; } body.chat-mode .grid-container, body.chat-mode .flashcard-container, body.chat-mode .bottom-action-bar, body.chat-mode .premium-progress-wrapper { filter: none; opacity: 1; transition: none; } } /* ========================================== Bar controls (share door + slip furniture) ========================================== */ /* (The 調 gear, its settings sheet, and the "?" rescue pop retired with the one-bar build — slice 4, the owner's razor: every control earns a bar seat or becomes a default. The rescue trio's ONE surface is the door card.) */ /* (The header pause pill died with the dock — the hold is the room's central control now: .chat-dock-hold, in the 一枚の盤 section at the end of this file.) */ /* Share audio — the labeled door for computer-played sound (listening exercises), re-homed from the header to the bar's left cluster. It KEEPS its words: Sensei's own prompt says "press Share audio", so the words must exist on screen. While the channel is open a small accent dot breathes in place of the glyph: a live tap into the machine's audio must never be a silent state. */ .chat-share-btn { background: none; border: none; font-family: 'Inter', system-ui, sans-serif; font-size: var(--rm-control); color: var(--color-stone); cursor: pointer; padding: 0 12px; line-height: 1; transition: color 0.2s, opacity 0.2s, background 0.2s, border-color 0.2s; flex-shrink: 0; /* 0.92, matching the chip beside it (2026-07-25). At 0.6 this measured ~2.8:1 on the bar's paper — a hard AA failure on 12.5px text, and this text is load-bearing INSTRUCTION: Sensei's own prompt tells the learner to "press Share audio" by name. The chip 40px away had already been measured and raised to 0.92 for exactly this reason; its sibling never got the pass. Same paper, same size, same answer. */ opacity: var(--rm-ink-quiet); display: inline-flex; align-items: center; gap: 5px; position: relative; } .chat-share-btn[hidden] { display: none; } /* 34 → 44 tall (the touch floor above); the width already clears it, and a sideways expander would eat into the cluster's 5px pill rhythm. */ .chat-share-btn::after { content: ''; position: absolute; inset: -5px 0; } .chat-share-btn:hover { color: var(--color-accent); opacity: var(--rm-ink-full); } .chat-share-btn:active { transform: scale(0.92); } /* The one bar hand that had no ring of its own and fell through to the app's 4px halo — the seam S2 closed everywhere else on this surface. */ .chat-share-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .chat-share-btn.sharing { color: var(--color-accent); opacity: var(--rm-ink-full); } .chat-share-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); animation: chatSharePulse 2.4s ease-in-out infinite; } @keyframes chatSharePulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .chat-share-dot { animation: none; } } /* The chips' paper slips (one-bar build) — small frosted-paper pops rising from the bar itself: children of #chatDock, anchored above its top edge, right-aligned with the picker cluster that opens them, so they track the bar on any viewport. Same [hidden] discipline as every room surface: the author `display` would beat the UA rule, so it's restored explicitly. */ .chat-pop { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5001; box-sizing: border-box; background: rgba(250, 250, 247, 0.96); -webkit-backdrop-filter: blur(14px) saturate(1.04); backdrop-filter: blur(14px) saturate(1.04); border: 1px solid var(--rm-pop-line); border-radius: var(--rm-pop-radius); box-shadow: var(--rm-pop-shadow); /* these three values ARE the spec — this slip is where they were set */ padding: 14px 16px; display: flex; flex-direction: column; animation: chatPopRise 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .chat-pop[hidden] { display: none; } @keyframes chatPopRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .chat-pop { animation: none; } } /* Each slip names its subject in one word — the chip shows the VALUE ("leo", "0.85×"), the slip says what that value governs. */ .chat-pop-title { font-family: 'Inter', sans-serif; font-size: var(--rm-caption); letter-spacing: var(--rm-track); font-weight: var(--rm-track-weight); text-transform: uppercase; color: var(--color-stone); opacity: var(--rm-ink-quiet); padding: 0 9px; margin-bottom: 8px; } /* Voice slip — a plain list, the saved voice marked. The hint line beneath is the honest provider lock ("new voice starts your next session"), written by JS only while a session is live; :empty keeps its seat from costing height. */ .chat-voice-pop { min-width: 150px; padding: 12px 10px 10px; gap: 1px; } .chat-voice-pop .cvp-rows { display: flex; flex-direction: column; gap: 1px; } .cvp-row { display: flex; align-items: center; gap: 8px; border: none; background: none; font-family: 'Inter', sans-serif; font-size: var(--rm-support); color: var(--color-stone); text-align: left; padding: 7px 9px 7px 26px; border-radius: 7px; cursor: pointer; position: relative; transition: color 0.18s, background 0.18s; } .cvp-row:hover { color: var(--color-ink); background: rgba(44, 44, 44, 0.03); } /* Polish · the voice sample key beside each name: quiet stone, ink on hover, the accent while it plays (and its mark turns to stop). It seats 2px after the NAME, not at the slip's right edge, so it reads as that voice's key and not as a disclosure chevron for the row: the row shrinks to its text. The mark is a stroke (index.html), so the key sets no type of its own. */ .cvp-line { display: flex; align-items: center; gap: 2px; } .cvp-line .cvp-row { flex: 0 1 auto; padding-right: 0; } .cvp-play { flex: 0 0 auto; display: inline-flex; align-items: center; border: none; background: none; color: var(--color-stone); opacity: var(--rm-ink-quiet); padding: 6px 8px; border-radius: 7px; cursor: pointer; transition: color 0.18s, background 0.18s; } .cvp-play:hover { color: var(--color-ink); background: rgba(44, 44, 44, 0.03); opacity: 1; } .cvp-play.is-playing { color: var(--color-accent); opacity: 1; } /* While a conversation is live or paused the key refuses the way the share door does before Sensei is there: dimmed, no pointer, no answer. */ .cvp-play:disabled { opacity: 0.34; cursor: default; pointer-events: none; } .cvp-row.current { color: var(--color-accent); background: rgba(61, 90, 128, 0.06); font-weight: 600; } .cvp-row.current::before { content: '\2713'; position: absolute; left: 9px; font-size: var(--rm-control); font-weight: 400; } .chat-pop-hint { font-family: 'Inter', sans-serif; font-size: var(--rm-control); color: var(--color-stone); opacity: var(--rm-ink-quiet); line-height: 1.35; margin-top: 7px; padding: 0 9px; } .chat-pop-hint:empty { display: none; } /* Tempo slip — Speed + Patience together (both are how the conversation breathes; both push live via session.update on release). */ .chat-tempo-pop { width: min(280px, calc(100vw - 96px)); gap: 18px; padding: 18px 20px; } .chat-tempo-pop .chat-pop-title { padding: 0; margin-bottom: -8px; } .vs-row { display: flex; flex-direction: column; gap: 7px; } .vs-label { font-family: 'Inter', sans-serif; font-size: var(--rm-support); color: var(--color-ink); letter-spacing: 0.01em; } .vs-label em { font-style: normal; color: var(--color-accent); font-variant-numeric: tabular-nums; margin-left: 4px; } .vs-row input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; border-radius: 2px; background: rgba(44, 44, 44, 0.12); cursor: pointer; } /* The thumb answers in INK, never in size. It used to swell 12% under the press — the one control in the room that grew when every other one squashes or holds — and its hover grew the halo 4 → 6px. Now the ring keeps its 4px and only deepens (0.08 → 0.14), and a press darkens the dot to the app's pressed indigo (#34507a, base.css's retry-button press). The keyboard ring is the room's own 2px accent outline, drawn once on the input rather than the browser's default on the thumb. The Firefox thumb wears every state the WebKit one does; the two pseudos cannot share one selector list (an unknown pseudo voids the whole rule), so each is spelled out. */ .vs-row input[type="range"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } .vs-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px rgba(61, 90, 128, 0.08); outline: none; cursor: pointer; transition: background-color 0.12s, box-shadow 0.2s; } .vs-row input[type="range"]::-webkit-slider-thumb:hover { box-shadow: 0 0 0 4px rgba(61, 90, 128, 0.14); } .vs-row input[type="range"]::-webkit-slider-thumb:active { background: #34507a; } .vs-row input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border: none; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px rgba(61, 90, 128, 0.08); outline: none; cursor: pointer; transition: background-color 0.12s, box-shadow 0.2s; } .vs-row input[type="range"]::-moz-range-thumb:hover { box-shadow: 0 0 0 4px rgba(61, 90, 128, 0.14); } .vs-row input[type="range"]::-moz-range-thumb:active { background: #34507a; } /* The thumb's ink change lands at once under reduced motion. */ @media (prefers-reduced-motion: reduce) { .vs-row input[type="range"]::-webkit-slider-thumb { transition: none; } .vs-row input[type="range"]::-moz-range-thumb { transition: none; } } /* ========================================== End-of-session / recovery card ========================================== */ /* S2: these FOUR surfaces are appended to document.body, so they centre on the VIEWPORT, not on the room. With the session rail out, the end-of-session card would land half the rail's width left of the room it belongs to, and its scrim would dim the rail. They follow the same inset the room does. ⛔ EVERY NEW BODY-LEVEL SURFACE OWES THIS LIST A LINE (A10): the #1072 page viewer shipped without one, so a page opened 122px off the axis of the thumb he tapped, over the rail — the exact bug this block was written to end. */ body.voice-portal-open .chat-recovery { left: calc(50% + var(--vp-rail-w, 0px) / 2); } body.voice-portal-open .chat-recovery-scrim { left: var(--vp-rail-w, 0px); } body.voice-portal-open .cat-viewer { left: var(--vp-rail-w, 0px); } /* ⛔ …EXCEPT THE DELETE ASK (A6), which is ABOUT a rail row, not about the room: the inset above left the rail — the very surface the ask came from — unveiled and pressable under a destructive confirm (caught by the suite's scrim probe, 2026-08-04: scrim x started at the rail's edge). Its veil covers the whole viewport and its card centres on the true middle. */ body.voice-portal-open .chat-recovery.is-delete { left: 50%; } body.voice-portal-open .chat-recovery-scrim.is-delete { left: 0; } /* …and the page it fits must measure the veil it is centred in, not the window — a wide page otherwise paints out over the rail the veil no longer covers. */ body.voice-portal-open .cat-viewer .cat-panel-page { max-width: calc(100vw - var(--vp-rail-w, 0px) - 70px); } /* the save-failed bar centres on the room, not the window, when the rail is out. (B4 dropped the `!important` this carried: it was fighting the bar's own inline cssText, and the bar has a stylesheet now — (1,1,1) over (1,0,0) is all it ever needed.) */ body.voice-portal-open #chatSaveFailed { left: calc(50% + var(--vp-rail-w, 0px) / 2); } /* ⛔ …AND THEY TRAVEL WITH THE COLUMN (slice four, 2026-09-17). The stage's grid track is animated now (.vp-shell, css/voice-portal.css), so a surface that reads --vp-rail-w raw arrives a third of a second before the room it belongs to unless it rides the same curve. Same duration, same easing, one gesture — the letter panel's own `left 0.34s` has had this partner in its comment since S12. The page cap rides its own property. A LINE HERE IS OWED BY EVERY NEW MEMBER OF THE LIST ABOVE. */ body.voice-portal-open .chat-recovery, body.voice-portal-open .chat-recovery-scrim, body.voice-portal-open .cat-viewer, body.voice-portal-open #chatSaveFailed { transition: left 0.34s var(--ease-settle, ease); } body.voice-portal-open .cat-viewer .cat-panel-page { transition: max-width 0.34s var(--ease-settle, ease); } /* …and their reduce companions, at the scope their live rules wear: the `.chat-recovery-scrim { transition: none }` further down this file is one class weaker and could never win here. The fold lands, it does not travel. */ @media (prefers-reduced-motion: reduce) { body.voice-portal-open .chat-recovery, body.voice-portal-open .chat-recovery-scrim, body.voice-portal-open .cat-viewer, body.voice-portal-open #chatSaveFailed, body.voice-portal-open .cat-viewer .cat-panel-page { transition: none; } } .chat-recovery { position: fixed; left: 50%; top: 44%; transform: translate(-50%, -50%); /* ⛔ ABOVE EVERYTHING IT IS ABOUT (2026-07-27). This was 9000 — written when the room was z 5000 inside #app and 9000 genuinely cleared it. Two moves since then left it buried and NOBODY SAW, because a card that is painted under an opaque room is not a visible failure, it is a card that "did not appear": the room went body-level at 9550 (2026-07-26), and the portal at 9600 now CONTAINS it. Measured with elementFromPoint at the card's own centre — the answer came back `chat-landing-head`, i.e. the room. That is every card this file raises: Leaving?, Session ended, Connection lost, Microphone blocked, and the mid-lesson switch ask. A decision ABOUT the session must outrank every surface the session is drawn on, so it sits one rung above the top of the room's own ladder (…9600 portal rail · 9601 handle · 9610 letter panel · 9612 page viewer · THIS). ⛔ Do not "fix" a future burial by nudging this number — check the whole ladder in that note, and remember z-index is local to its stacking context, so a container moving is what usually breaks it. */ z-index: 9620; width: calc(100% - 48px); max-width: 340px; box-sizing: border-box; /* T1.1: token and fallback finally agree — the card is card material on the paper room (never paper-on-card, the audit's inverted figure/ground). */ background: var(--color-card, #FAFAF7); border: 1px solid rgba(44, 44, 44, 0.08); border-radius: 12px; /* S15: furniture SITTING on the page wears --shadow-rest by the written ruling at the top of this file — the private third shadow this rule carried (0 18px 50px, claiming "token law") was exactly the drift that ruling forbids. The scrim already separates the card; the rest shadow is all the lift a resting sheet earns. */ box-shadow: var(--shadow-rest, 0 1px 2px rgba(44, 44, 44, 0.03), 0 8px 28px rgba(44, 44, 44, 0.045)); padding: 22px 24px 20px; text-align: center; font-family: 'Inter', system-ui, sans-serif; /* Own keyframes (the card used to borrow the settings wall's vsPanelIn, whose bare transform stomped the centering translate mid-entrance): these carry the -50%,-50% so the card rises in place. */ animation: recoveryIn 0.32s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes recoveryIn { from { opacity: 0; transform: translate(-50%, -50%) translateY(8px); } to { opacity: 1; transform: translate(-50%, -50%); } } @media (prefers-reduced-motion: reduce) { .chat-recovery { animation: none; } } /* A dropped session heals on reconnect — the kintsugi-gold hairline is the recovery cue. */ .chat-recovery.is-error { border-color: rgba(201, 169, 110, 0.55); } /* (family/weight live in the one late rule — the Klee declaration that sat here lost the cascade to it for a year and read as a lie; S15 removed it) */ .chat-recovery-title { font-size: var(--rm-en); color: var(--color-ink); margin-bottom: 6px; } .chat-recovery-sub { font-size: var(--rm-support); color: var(--color-stone); line-height: 1.5; margin-bottom: 16px; } /* S8 · the receipt's one quiet line — the sub's ink, one step smaller. It sits UNDER THE DOORS now (slice four), the card's last line: the money is the footnote, not something standing between the letter promise and the way out. The -10px that tucked it against the sub went with the move; as the last child its own bottom margin would only pad the card's foot twice. The min-height holds the seat while the save is still answering (the figure lands IN the line, it does not grow the card under him). */ .chat-recovery-actions + .chat-recovery-cost { margin-top: 14px; } .chat-recovery-cost { font-size: var(--rm-control); color: var(--color-stone); opacity: var(--rm-ink-quiet); line-height: 1.5; min-height: calc(var(--rm-control) * 1.5); margin-bottom: 0; } .chat-recovery-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .chat-recovery-btn { flex: 0 0 auto; border: 1px solid rgba(44, 44, 44, 0.18); background: transparent; /* paper doors on a paper card — the #fff read as chrome */ color: var(--color-ink); border-radius: 8px; min-height: 44px; /* the honest touch floor — iPad is a primary device */ padding: 10px 16px; font-size: var(--rm-support); font-family: inherit; cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.1s; } .chat-recovery-btn:hover { border-color: var(--color-accent); } .chat-recovery-btn:active { transform: scale(0.97); } .chat-recovery-btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .chat-recovery-btn.primary:hover { filter: brightness(1.06); } /* ========================================================================== THE SAVE-FAILURE BAR (B4, 2026-08-10) — the last surface in this room that still looked like a different app. It was built entirely from inline strings in showSaveFailed(): four font sizes off the room's four-voice scale (14 / 13 / 12 / 12.5), gold spelled as a raw hex and painted on FOUR button borders (gold means "a repair", not "press me"), `background:#fff` on the doors — the exact value this file deleted from .chat-recovery-btn with the note "the #fff read as chrome" — 31px targets against the room's 44px floor, and a private cast shadow in rgba(44,42,40), an ink that exists nowhere else in the product. ⛔ IT DOES NOT WEAR THE RECOVERY CARD'S SEAT, only its MATERIAL. The card is fixed at top:46%, and the event that raises this bar has, moments earlier, raised a card at that exact seat: sayGoodbye → persistSession (the POST) → settleFarewell, all one synchronous turn, with the answer landing seconds later. Adopting the seat as well as the dress would drop this notice on top of おつかれさまでした and hide the ending of the learner's own lesson behind a technical message. Measured at 1440×913: card bottom 570, this bar top ~643. They do not meet. ⛔ AND IT MAY ARRIVE WITH NO ROOM AT ALL. exitChatMode fires the same save, so the ✕ path answers over a closed room — which is why the seat below clears the bar only WHEN the bar is there, and why this id is in the type scale's scope list up at :121. */ #chatSaveFailed { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); /* one rung over the card family, so a notice about the record is never painted under the card discussing the same night. Registered in tests/voice/zindex_ladder_test.js: …9619 scrim · 9620 card · 9621 this. */ z-index: 9621; width: calc(100% - 48px); max-width: 420px; box-sizing: border-box; background: var(--color-card, #FAFAF7); /* THE ONE GOLD, AND IT IS THE CARD'S OWN HAIRLINE — the same 0.55 border .chat-recovery.is-error wears, for the same reason: kintsugi marks a repair. The four gold BUTTON borders it replaces were the defect. */ border: 1px solid rgba(201, 169, 110, 0.55); border-radius: 12px; box-shadow: var(--shadow-rest, 0 1px 2px rgba(44, 44, 44, 0.03), 0 8px 28px rgba(44, 44, 44, 0.045)); padding: 18px 20px 16px; font-family: 'Inter', system-ui, sans-serif; /* ⛔ ITS OWN KEYFRAMES, NOT THE CARD'S. recoveryIn bakes in translate(-50%,-50%) — the card's centring — and borrowing it would drag this bar half its own height up the screen mid-entrance. The card learned this the same way when it borrowed the settings wall's vsPanelIn. */ animation: saveFailedIn 0.32s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes saveFailedIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { #chatSaveFailed { animation: none; } } /* Clear the bar only while the bar is there. The dock is 88px on a 16px foot; 16 more is the room's own breathing gap. On the closed-room path there is no dock to clear and the notice rests at the foot of the page. */ body.chat-mode #chatSaveFailed, body.voice-portal-open #chatSaveFailed { bottom: 120px; } /* The transcript's own quiet aside — "the reading helper is not answering", and its kin. B4 gave it a stylesheet: until today it had NONE, the only element in the room dressed entirely from one JS string, which is exactly why its raw 12.5px (off the four-voice scale) and its 0.8 alpha survived every sweep the room has had. ⛔ 0.8 was not a taste: warm stone at 0.8 measures 4.10:1 on the room's paper, under AA, on the line a learner reads when something has gone wrong. --rm-ink-quiet is the measured floor. */ .chat-system-note { text-align: center; font-size: var(--rm-support); line-height: 1.5; color: var(--color-stone, #57534e); opacity: var(--rm-ink-quiet); margin: 10px auto; max-width: 80%; } .chat-fail-title { font-family: 'Inter', 'Noto Sans JP', sans-serif; font-weight: 600; font-size: var(--rm-en); color: var(--color-ink); margin-bottom: 4px; } .chat-fail-sub { font-size: var(--rm-support); color: var(--color-stone); opacity: var(--rm-ink-quiet); line-height: 1.5; margin-bottom: 14px; } .chat-fail-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; } /* the dismiss sits apart from the two doors that DO something */ .chat-fail-actions .is-dismiss { margin-left: auto; } /* ⛔ THE RING HAS TO BE SAID HERE. `#chatSaveFailed button { box-shadow: none }` used to carry it by accident: at (1,0,1) it out-ranked base.css's app-wide `button:focus-visible { box-shadow: 0 0 0 4px … }` (0,1,1), so the banner showed the 2px outline alone — which is exactly the room's ONE FOCUS RING law (voice-portal.css). Deleting that roster entry, which B4 must, would have handed the 4px halo back and turned the one accessibility detail the banner had right into a regression. .chat-recovery-btn has no :focus-visible of its own to inherit, so it is stated. */ #chatSaveFailed .chat-recovery-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; box-shadow: none; } /* ========================================== Polish pass: recovery scrim/recap ========================================== */ /* Recovery scrim — focuses the end/reconnect decision without hiding the talk. */ .chat-recovery-scrim { position: fixed; inset: 0; z-index: 9619; /* one under its card — see the ladder note on .chat-recovery */ background: rgba(44, 44, 44, 0.14); /* token law (T1.9) */ -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: recoveryScrimIn 0.3s ease; } /* The leave card stands over a still-live session: the scrim must not swallow the second ✕ press (the same-trigger confirm) or block Pause/調. The ended cards' veil is hit-through too (R4, S15): the session is over and the record behind it is his to scroll and replay — a veil, not a wall. Only the failure cards (error / mic) keep the full stop. */ .chat-recovery-scrim.is-leave, .chat-recovery-scrim.is-rest { pointer-events: none; } /* The settle lifts the veil (S15): a farewell is not a decision. The remove is JS's at 260ms — this fade is decoration a reduced-motion room never sees. */ .chat-recovery-scrim.is-lift { opacity: 0; transition: opacity 0.24s ease; } @keyframes recoveryScrimIn { from { opacity: 0; } to { opacity: 1; } } /* (The recap stat line and the win echo's caption died with the S15 re-cut — owner: too many words, too western. The quote stands alone; the numbers live on the rail row.) */ /* The win echo: his longest mostly-Japanese line, quoted back — evidence, not praise. The reading rides beneath in the session's chosen script; helper down → the line stands alone, never a blocked card. */ .chat-recovery-win { margin-bottom: 14px; padding-top: 10px; border-top: 1px solid rgba(44, 44, 44, 0.08); } .chat-recovery-win-line { font-family: 'Klee One', 'Noto Sans JP', serif; font-size: var(--rm-en); line-height: 1.6; color: var(--color-jp-text); /* slice one: the house's Japanese ink */ overflow-wrap: break-word; } .chat-recovery-win-reading { margin-top: 2px; /* the seat is mounted with the card and filled when the helper answers — one line of its own type, held empty, so nothing grows under him */ min-height: calc(var(--rm-support) * 1.5); font-family: 'Inter', sans-serif; font-size: var(--rm-support); line-height: 1.5; font-style: italic; color: var(--color-romaji); overflow-wrap: break-word; } /* Kana reading (hiragana mode): real Japanese text — JP type, never italic. */ .chat-recovery-win-reading.is-kana { font-style: normal; font-family: 'Klee One', 'Noto Sans JP', sans-serif; font-size: var(--rm-support); color: var(--color-stone); } /* The farewell (S15, owner pick A): the settled card's title becomes the one brush word — おつかれさまでした in the room's JP voice, romaji beneath. Both sizes are the room's own tokens; no new type voice. */ .chat-recovery.is-farewell .chat-recovery-title { margin-bottom: 10px; } .chat-recovery.is-farewell .chat-recovery-title .jp { display: block; font-family: 'Klee One', 'Noto Sans JP', serif; font-size: var(--rm-jp); font-weight: 400; color: var(--color-jp-text); /* slice one: the house's Japanese ink */ } .chat-recovery.is-farewell .chat-recovery-title .rom { display: block; margin-top: 3px; font-family: 'Inter', sans-serif; font-size: var(--rm-control); font-style: italic; font-weight: 400; letter-spacing: 0.02em; color: var(--color-stone); opacity: var(--rm-ink-quiet); } /* the farewell's one quiet door takes the full row (no primary on a goodbye) */ .chat-recovery.is-farewell .chat-recovery-btn { flex: 1 0 100%; } /* THE SETTLE (slice four). The ask becomes the ending in the same node, and reassigning className restarts nothing — so the whole swap used to land in one frame, growing a card that is centred by a translate and throwing both its edges. The height eases from the ask's to the ending's on recoveryIn's OWN curve (no second motion language in this room), and the new children soak in behind it, staggered in the order he reads them (the delays are written by stageSettle: title · win · sub+receipt · doors). 340ms of 間 is the difference between a dialog swapping strings and a bow. */ .chat-recovery.is-settling { overflow: hidden; transition: height 0.34s cubic-bezier(0.22, 1, 0.36, 1); } .chat-recovery.is-settling > * { opacity: 0; transition: opacity 0.22s var(--ease-settle); } .chat-recovery.is-settled > * { opacity: 1; } @media (prefers-reduced-motion: reduce) { .chat-recovery-scrim { animation: none; transition: none; } /* ⛔ AND THE SETTLE LANDS ITS END STATE: no ease, no soak — but every child VISIBLE, which is the whole point the motion was making. (stageSettle returns early here too, so the inline height is never written.) */ .chat-recovery.is-settling { transition: none; } .chat-recovery.is-settling > *, .chat-recovery.is-settled > * { opacity: 1; transition: none; } } /* ============================================================ ELEVATION PASS — 2026-07-09 (陽だまり / Hidamari) A premium detail pass over the room: a warm dimensional "lantern" orb lit from within, deliberate header grouping, a real Pause/Resume control, a held-not-broken pause, a quieter reading helper, and gold retired to recovery-only. Layered on top (this file already uses append-and-override, see "Polish pass" above); later rules win the cascade. ============================================================ */ /* ---- Header: pure witness chrome (one-bar build) ---- The timer holds the left; the ✕ holds the right. flex-end (not the base space-between) so the ✕ stays right even when the timer is empty (display:none) and can no longer push — with the timer visible, its margin-right:auto makes the two layouts identical. */ .chat-header { gap: 6px; padding-top: 2px; justify-content: flex-end; } /* (the timer's margin pair retired with the flow — it hangs off the header now, see "THE CLOCK MAY NOT MOVE THE ROOM" above; .chat-room-keys places the ✕) */ /* (The pause pill's elevation dress died with the header pill — the paused fill grammar lives on the dock hold now, 文机 section below.) */ /* ---- Viz sizing: MOVED to the .voice-viz rule in the lantern section above. It sat here overriding that rule by 1500 lines of cascade, which made the main rule read as a lie. One rule, one place. ---- */ /* PAUSED — the record keeps its ink (2026-07-25). Dimming the whole transcript to 0.6 took the learner's own words to ~2.2:1, the worst contrast in the room, in the one state where he is most likely to read back what he just said. The pause already speaks three times over: the ensō stills and draws back, the hold widens into the indigo Resume pill, and the caption says so. Dim the chrome, never the record. */ .chat-mode-container.state-paused .chat-transcript { opacity: 1; transition: opacity 0.5s var(--ease-settle, ease); } /* ---- Turn-cue label ---- */ /* T0.7 — silence wears a ghost, not a turn: a breath mark while the learner might still speak (T0.6 sweeps it when the exchange moves on). No label, faint small ink. (The hairline exemption it used to carry died with the hairline itself — breathing ruling.) */ .chat-message.user.is-pending .chat-message-role { display: none; } .chat-message.user.is-pending .chat-message-text { opacity: 0.35; font-size: var(--rm-en); background: none; /* the ghost never wears the bubble — a breath mark, */ padding: 0; /* not a spoken turn (it keeps the right-side seat) */ } /* ---- Recovery card: no awkward 2+1 wrap; calmer paper buttons ---- Primary takes its own full row; the quiet actions sit together beneath. S15: one control hairline (0.18) for every door — the quiet 0.14 made four hairline alphas in one card; two remain, each with a job (0.08 structure, 0.18 controls). */ .chat-recovery { top: 46%; padding: 26px 28px 24px; } .chat-recovery-actions { gap: 9px; } .chat-recovery-btn.primary { flex: 1 0 100%; padding: 10px 16px; } .chat-recovery-btn:not(.primary) { background: transparent; border-color: rgba(44, 44, 44, 0.18); color: var(--color-stone); font-size: var(--rm-support); padding: 10px 16px; } .chat-recovery-btn:not(.primary):hover { border-color: var(--color-accent); color: var(--color-ink); } /* ---- Native fidelity: opt out of the app's raised-button chrome ---- components.css styles every