fix(ui): draw controls on the window ground, not on the panel tint

[smileygames]

目的

操作の背景を面の地色（--bg）に揃える。選択中の端末タブも同じ地色にする。

Master の指示（2026-08-24、実機に描き込み）:

すべて背景白に
選択中のタブは白表示に

矢印が指していたもの: タイトルバーの寸法ピッカーと 端末 ボタン、行の ▶️ / ⚙️ / ❌、端末ヘッダの寸法ピッカーと ✕、入力欄の 宛先 と 送信、そして選択中のタブ。

前提

いま二つの地色がある

--bg（#ffffff）が窓の地、--surface（#f4f4f7）が面の地。操作は --surface を自分の背景に持っている——#titlebar の input / select / button、#composer の select / textarea / button、#terminal-head の select / button、#account-dialog の input / select / actions button。参加者パネルの行の三つのボタンは background: none で、パネル自身の --surface がそのまま透けている。

すでに逆を向いている一箇所がある

#participants .member.shown .pick は --bg である。パネルの地が --surface なので、選択された行は白で浮く。

端末タブはその逆をやっている——ヘッダの地が --bg なので、選択されたタブは --surface で沈む。同じ「選択」を二つの面が逆向きの手で描いている状態であり、Master の指示はこれを片側へ揃えるものである。

揃えた後に何が選択を言うか

タブの地が --bg になると、選択は色では言えなくなる。未選択のタブは border: 1px solid transparent を持っているため、border-color: var(--line) が入るかどうかが選択の印になる。文字色（--muted と --speaker）も既に分かれている。参加者パネルの行と同じ形——枠のある白い箱——になる。

白ではなくトークンで書く

ダークテーマがある（prefers-color-scheme: dark で --bg は #17171a）。「白」はライトテーマでの見え方であり、指定は var(--bg) で書く。#ffffff を直接書けばダークテーマが壊れる。

決まったこと

--surface は地に、--bg は操作に。 操作（input / select / textarea / button / 選択中のタブ）は窓の地色を背景に持ち、--line の枠で輪郭を持つ。--surface は面そのものの地（参加者パネル、端末ヘッダの中で浮かせたい要素）に残す。

参加者パネル自身の地（#participants の --surface）は変えない。矢印はパネルの中の操作を指しており、パネルの地を指していない。行のボタンは background: none のままではパネルの地が透けるため、明示的に var(--bg) を持たせる。

制約

• 色を直値で書かない。var(--bg) / var(--line) を使う。ダークテーマを壊さない。
• 選択中のタブが選択に見えることを失わない。地色で言えなくなる分は枠と文字色が持つ。
• #participants の地は変えない。

対象ファイル

• src/styles.css — 上記の背景指定
• docs/0-requirements.md — 二つの地色の使い分けの記述

関連

• feat(ui): give the terminal pane a header with tabs, close and size #68 — 端末ヘッダとタブ。選択中のタブの色はここで入った。
• feat(ui): show the row lifecycle controls as icons #71 — 行の記号表示。三つのボタンはここで幅が固定された。