Chat chrome: one gutter, one radius scale, one even glass recipe

The header and composer were full-bleed bands (flush to the top/right/bottom
viewport edges, composer corners off-screen) next to a rail that floats with a
12px margin. The new --layout-gutter (12px) spaces the rail, header, empty-state
card and composer identically on every side; --radius-panel/-control/-chip
(-pill) replace the ad-hoc radii across the shared classes, so every panel is
rounded on all four corners and shared controls match in every theme. The
desktop-only ::after hairlines and the left-corner-only radius are gone.

Aero: the rail and the chat chrome (answers included) share one even recipe -
the wallpaper extra-blurred into a hue-free wash (background-glass.webp) under a
uniform ~50% white veil and a whisper of gloss. Measured within ~10 RGB units
across the rail top->bottom and the card/composer left->right; the blue->green
smear and the teal composer are gone. The composer's field is a clean even tile
with no wallpaper gradient inside it.

Chat fixes: send is a filled primary tile shaped exactly like attach (dimmed
while the input is empty), suggestion/context chips use the shared .chip token
(40/44px target, visible rim, full-contrast text, raw model id in the tooltip),
the AI note reads at 12px --text-muted (.ai-disclaimer), the selected sidebar
row carries the accent border + accent icon, the theme toggle is back in Aero
(the moon flips to Dark; Settings brings Aero back), and the empty state is
centered exactly between header and composer.

Outside CSS: the wallpaper's top-left HUD-circle decoration (it peeked through
the 12px gutters on wide windows) was healed out of background.webp and
background-blur.webp; the orbs/bubbles ride one masked .ice-floats layer that
fades them under the chrome bands and the rail strip, so none is sliced by a
panel edge (still parked under reduced motion).

Version 0.6.0, SW -> freezmo-v82. Tests: chat suite pins the new geometry (12px
gutter, 24px corners, even wash on all four panels, send-vs-attach shape,
chips/input radii); mobile pins the phone chrome and the Aero toggle; bubbles
pins the floats layer + its reduced-motion opt-out.
This commit is contained in:
Martin Dvořák 2026-10-14 21:32:50 +00:00
commit 786d6cf1ae
21 changed files with 562 additions and 290 deletions

View file

@ -1423,6 +1423,39 @@ Things I chose while building, with the reasoning:
(measured: 268..1280 at a 1280 window) — a flat pane floating 40px inside the scene read as
"cut off next to the sidebar".
91. **The chat chrome floats: one gutter, one radius scale, one glass recipe.** The header and
the composer were full-bleed bands inside the main pane — flush to the viewport's top, right
and bottom edges, with the composer's bottom corners cropped off-screen — while the rail
floated with a 12px margin. `--layout-gutter` (12px, the rail's own inset) now spaces the
rail, the header, the empty-state card and the composer identically on all four sides, and
the radius scale (`--radius-panel` 24px, `--radius-control` 14px, `--radius-chip` 12px,
`--radius-pill`) replaced the ad-hoc values across the shared classes (`.card`, `.glass-panel`,
`.sidebar-surface`, buttons, nav rows, `.segmented`, chips), so every panel is rounded on all
four corners and shared controls match in every theme. The desktop-only `::after` hairlines
and the left-corner-only radius of decision 87 are gone.
In Aero the rail and the chat chrome (answers included) share **one even recipe**: the
wallpaper, extra-blurred into a hue-free wash (`background-glass.webp`), under a uniform
~50% white veil and a whisper of gloss. Measured: the rail top→bottom and the card/composer
left→right stay within ~10 RGB units (the old rail ran clear blue into a muddy green smear,
and the composer picked up the river's teal). Chat-specific fixes: **send** is a filled
primary tile shaped exactly like attach (dimmed while the input is empty — it used to be a
pale outline that read as disabled), the suggestion/context **chips** use the shared `.chip`
token (40px target, 44px on phones, visible rim, full-contrast text, the raw model id in the
tooltip), the AI note reads at 12px `--text-muted` (`.ai-disclaimer`), the sidebar's selected
row carries the accent border + accent icon (it looked like one more tinted action button),
the **theme toggle** is back in Aero — the moon flips to Dark, the Settings picker brings Aero
back — and the empty state is centered exactly between the header and the composer (the
trailing spacer only exists under a conversation now). Three fixes live outside CSS: the
wallpaper's **HUD-circle decoration** in the top-left corner (it peeked through the 12px
gutters on wide windows and read as a glitch) was healed out of `background.webp` and
`background-blur.webp`; the orbs and bubbles ride one masked `.ice-floats` layer that fades
them out under the chrome bands and the rail's strip, so none is sliced by a panel edge (still
parked under reduced motion); and the panel shadows/highlights come from the shared glass
tokens. The chat suite pins the geometry (12px gutter on all sides, 24px corners, the even
wash on all four panels, send-vs-attach shape, chips/input radii) and mobile pins the phone
chrome plus the Aero toggle.
90. **Copy pass on the shell (`lib/i18n-dict.ts`).** A user-authored wording pass: the library heading
is now "Your freezer" (matching the Czech "Tvůj mrazák"), the key gate's subtitle speaks about
grades ("První krok k dobrým známkám"), and several Czech strings read more naturally ("Schovat /