/* ============================================================================ Ecochat / 株式会社リサイクルマイスター ― 統合スタイルシート app.css ---------------------------------------------------------------------------- これは唯一のスタイルシートです。HTML / JS は一切変更していません。 既存のクラス名・ID・DOM 構造・app.js が書き込むインライン style を そのまま前提にしています。 ■ 対応バージョン index.html : 現行（ / h1.chat-head-name / #pinBar / #newPill / .more-wrap + #composerMore / .panel-close / .ch-title + #btnHangupTop / .cb-sub / 各ボタンの ） app.js : 現行（2,650 行 / 131KB） 第2次 差分対応ぶんを取り込み済み。新機能は下記のとおり本文系セクションの 中に配置してあり、末尾追記のパッチ層は存在しません。 ■ 第2次で新規対応した機能（どのセクションに入っているか） 固定メッセージ（ピン留め）バー .pin-* → 09 アンケート / 出欠確認カード .poll-* → 10 メッセージのインライン編集 .edit-ta/.edit-btns → 10 新着メッセージ誘導ピル .new-pill → 10 オーバーフローメニュー .more-wrap/.more-menu → 11 と 22 右パネル再設計 .panel-room/.panel-info/.panel-leave/ .panel-add/.panel-tabbar/.panel-close → 13 予約投稿の一覧行 .sched-* → 14 通話ヘッダ / 共有中の状態 .ch-title/.btn-hangup-top/.call-ctrl button.on → 15 接続断バナーの補足文 .cb-sub → 16 エラートースト .toast-error → 16 空表示 / 読み込み失敗 .list-empty(.err/.sm) → 08 ■ 構成（上から順に読む / 下にあるものほど強い） 00 デザイントークン（ライト） 01 ダークモードのトークン上書き 02 リセット・ベース要素 03 ボタン 04 スクロールバー 05 認証画面 06 レイアウト骨格 07 サイドバー 08 チャットヘッダー / 空状態 / 空表示（.list-empty） 09 固定メッセージ（ピン留め）バー 10 メッセージ領域（本文・アンケート・インライン編集・新着ピル） 11 入力欄（composer / オーバーフローメニュー） 12 TODO リスト 13 右パネル 14 モーダル / 絵文字ピッカー / 予約投稿行 15 通話画面 16 トースト / 接続断バナー 17 アニメーション 18 フォーカスリング 19 ダークモード：コンポーネント個別の上書き 20 レスポンシブ（1100px / 760px / 520px / 420px / タップ端末） 21 アクセシビリティ（コントラスト / forced-colors / モーション低減） 22 絵文字ボタンの SVG アイコン化 23 app.js のインライン style 救済 ■ ダークモードの仕組み - 自動: @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { … } } - 手動: html[data-theme="dark"] { … } （将来 JS で data-theme を差すだけで効く） - 固定: html[data-theme="light"] （OS がダークでもライトを保つ） この 3 つは必ず「対」で書くこと。自動用と手動用は同一の値を二重定義している。 値を触るときは必ず両方直すこと（01 節・19 節）。 ■ 編集時の注意 1. 生の 16 進カラーを書いてよいのは 00 節・01 節（トークン定義）と 22 節の SVG data URI の中だけ。それ以外は必ず var() を経由すること。 2. --brand-strong は「濃緑のサーフェス（面）」。文字色には使わない。 濃緑を文字色に使いたいときは --brand-ink（ダークでは明緑に反転する）を使う。 --brand-strong の上に載せる文字は --on-brand-strong（常に白）。 3. --green-900 / --green-700 / --bg / --panel / --line / --txt / --txt-sub / --red / --amber / --blue / --radius / --shadow は app.js のインライン style からも参照されている。名前を消さないこと。 4. フォーカスリングは 18 節で全域一括定義。個別コンポーネントでは 色を再定義せず、必要なら outline-offset だけ調整する。 5. !important を使ってよいのは .hidden / .mobile-only / モーション低減 / forced-colors / インライン style の救済（23 節と、14 節の .modal-foot > span[style*="flex"] の 1 件）だけ。 6. モバイル（760px 以下）の input / textarea / select は font-size 16px 以上を 下回らせないこと。16px 未満だと iOS がフォーカス時に勝手に拡大する。 7. app.js が書き込むインライン style は上書きしない。 とくに .poll-bar の style="width:○%"（得票率そのもの）と .pollOpt の style="flex:1"、アバター / ルームアイコンの background は CSS 側から絶対に触らないこと。 8. 状態クラスは JS が付け外しする。CSS 側で別名を作らない。 .on / .off / .done / .over / .mine / .closed / .force / .chat-open / .tapped / .hidden / .pin-flash / .toast-error / .muted / .err / .sm 9. .err .sm .closed .muted は単独で出現しない。必ず親クラスとの複合 （.list-empty.err / .poll-opt.closed / .badge.muted / .panel-desc .muted） で書くこと。 10. `.c` というクラスは実在しない（app.js の三項演算子を抽出器が誤検出した もの。実出力は class="on" か class="" のみ）。定義を足さないこと。 ■ 前提ブラウザと、古い環境での落ち方 2023 年以降の Chrome / Edge / Safari / Firefox を前提にしている。 古い環境でも「読めなくなる」ことはなく、装飾から順に落ちるようにしてある。 - color-mix() … 面の淡い色づけ（引用・コード・タグ・タスク枠・通話画面）。 非対応だと色が付かないだけで、文字は地の色を継いで読める。 - :has() … 未読行の名前を太くする強調 / 編集中の pre-wrap 解除。 非対応でも未読バッジは出る。編集中は 1 行ぶん余白が残るだけ。 - mask-image … 22 節のアイコン化。非対応時は @supports not 側が働き、 元の絵文字がそのまま表示される（22 節末尾）。 ■ 検証済みの範囲（Chromium で実描画して計測） ・表示: 1440 / 1000 / 390px × ライト / ダーク （ピン留めバー / アンケート 3 状態 / 予約一覧 / インライン編集 / その他メニュー展開 / 右パネル 4 タブ / 通話画面 / 接続断バナー / 新着ピル / 空表示・読み込み失敗 を含む） ・横はみ出し: 320 / 360 / 390 / 520 / 760 / 1000 / 1280 / 1440 / 1920px の全幅で scrollWidth == innerWidth（横スクロールなし） ・コントラスト: 文字色は computedStyle、背景は「文字を透明にした 実レンダリング」からピクセル採取して実測。新機能の文字は すべて WCAG AA（本文 4.5:1 / 大文字 3:1）以上。 色を変えるときは必ずコントラストを測り直すこと。 ============================================================================ */ /* ============================================================ 00. デザイントークン（ライト） コントラスト実測値（WCAG 2.1 相対輝度）は行末コメントに記載。 ============================================================ */ :root { color-scheme: light; /* 下バーのぶんとして空ける高さ。 ★ 固定値にしないこと。下バーの中身 (絵 23px・字 10px) は文字の大きさ設定 (--ui-scale) で伸びるため、「最大」にすると帯が 82px を超え、 68px しか空けていないと送信ボタンや保存ボタンが帯の裏に隠れる。 実際の高さは app.js が測って書き換える。ここはその前の初期値。 */ --nav-h: 68px; /* --- ブランド緑（既存名。app.js からも参照されるので絶対に消さない） --- */ --green-900: #1e5138; /* 濃緑サーフェス 白文字と 9.17:1 */ --green-700: #2f7d55; /* 主操作色 白文字と 5.02:1 */ --green-600: #3a9265; /* hover */ --green-500: #3aa06b; /* アクセント罫線 / app.js のアバター既定色 */ --green-100: #e2f2e9; /* 選択・チップの面 */ --green-50: #f2f9f5; /* 極薄 hover 面 */ /* --- ブランド意味トークン（他はこちらを優先して使う） --- */ --brand: var(--green-700); /* 主操作の面/線 */ --brand-hover: var(--green-600); --brand-active: #276a48; --brand-strong: var(--green-900); /* 濃緑「サーフェス」。文字色には使わない */ --brand-ink: var(--green-900); /* 濃緑「文字色」。ダークでは明緑に反転する */ --brand-weak: var(--green-100); /* 選択中・チップの面 */ --brand-tint: var(--green-50); /* 最も薄い hover 面 */ --on-brand: #ffffff; /* --brand の上の文字 5.02:1 */ --on-brand-strong: #ffffff; /* --brand-strong の上の文字 9.17:1（常に白） */ --on-brand-weak: #1a4a33; /* --brand-weak の上の文字 8.74:1 */ --on-accent: #ffffff; /* --red/--amber/--blue の上（各 4.7:1 以上） */ /* --- サーフェス --- */ --bg: #f2f6f3; /* アプリ地。ほんのり緑に振ったニュートラル */ --bg-sunken: #e8eeea; /* 一段沈んだ面（入力欄・行ホバー・空状態） */ --panel: #ffffff; /* カード / サイドバー / ヘッダー */ --panel-2: #f8fbf9; /* パネル内の副次面 */ --field: #ffffff; /* 入力欄の既定地（:where() の素の値） */ --field-focus:#ffffff; --hover-bg: #eef4f0; /* 予備: 行ホバー（現状は --bg-sunken を使用） */ --active-bg: var(--brand-weak); --scrim: rgba(20, 40, 30, .45); /* モーダル背面 */ /* --- 罫線 --- */ --line: #dde5df; /* 標準の区切り線（既存名） */ --line-strong: #c3d1c8; /* 入力欄・ゴーストボタンの縁 */ /* --- テキスト --- */ --txt: #1f2b25; /* 本文 panel 14.68:1 / bg 13.46:1 */ --txt-sub: #57665e; /* 補助 panel 6.06:1 / bg 5.55:1 */ /* 補助の下段（時刻・小見出し・placeholder）。 旧値 #626f68 は --bg-sunken の上が実測 4.47:1 で AA を割っていた （コメントの 4.82:1 は誤り）。輝度をわずかに落として全面で 4.5 を確保。 実測: panel 5.56:1 / panel-2 5.34:1 / bg 5.10:1 / bg-sunken 4.73:1 / mention-me の琥珀地 4.68:1 */ --txt-faint: #5f6b64; /* --- 状態色（いずれも白と 4.5:1 以上 = 文字色でも面としても使える） --- */ --red: #bf3b3b; /* 白と 5.38:1 */ --amber: #8f6210; /* 白と 5.35:1 / --warn-bg 上 5.05:1 */ --blue: #30699b; /* 白と 5.80:1（予備） */ --online: #2f9c58; --offline: #a8b6ad; --avatar-fallback: #647268; /* 白文字と 5.06:1 */ /* --- 状態サーフェス（淡い面 + その上の文字） --- */ --danger-bg: #fdecec; --danger-line: #f2cccc; --danger-txt: #9b2c2c; /* danger-bg 上で 6.59:1 */ --warn-bg: #fdf8ec; --warn-line: #ecd9ae; --warn-txt: #6f4e0c; /* warn-bg 上で 7.15:1 */ --warn-solid: #9c5f22; /* 接続断バナーの地。白文字と 5.16:1 */ --ok-bg: #eef8f1; --ok-line: #cfe6d6; --info-bg: #e7f6ec; /* --- メンション / TO --- */ --mention-bg: #fdf6e8; --mention-chip-bg: #f7e2b8; --mention-chip-txt:#6f4f0f; /* chip-bg 上で 5.90:1 */ /* --- コードブロック（予備。実体は --l3-code-* を使用） --- */ --code-bg: #263129; --code-txt: #d9e8dd; /* 10.64:1 */ /* --- 認証画面のグラデーション --- */ --auth-grad-1: #eaf5ee; --auth-grad-2: #d7ebde; --auth-grad-3: #cfe6e2; /* --- ボタン無効 --- */ --btn-disabled-bg: #d3ded7; --btn-disabled-txt: #56635b; /* 4.56:1 */ /* --- スクロールバー --- */ --scroll-thumb: #c6d4ca; --scroll-thumb-hover: #a9bdb0; /* --- 角丸 --- */ --radius-xs: 6px; --radius-sm: 8px; --radius: 10px; /* 既存名 */ --radius-lg: 14px; --radius-pill: 999px; /* --- 影 --- */ --shadow-1: 0 1px 2px rgba(24, 48, 36, .06), 0 1px 3px rgba(24, 48, 36, .08); --shadow-2: 0 4px 18px rgba(30, 60, 45, .12); --shadow-3: 0 18px 48px rgba(20, 45, 33, .20); --shadow: var(--shadow-2); /* 既存名 */ --shadow-press: inset 0 2px 5px rgba(0, 0, 0, .18); /* --- 余白（4px グリッド） --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* --- タイポ --- */ --font-ja: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Consolas, "Courier New", "Hiragino Kaku Gothic ProN", monospace; /* 文字の大きさの倍率。画面の「文字の大きさ」から書き換える。 1 = 標準 / 1.15 = 大きめ / 1.3 = 特大 / 0.9 = 小さめ ここ1か所を変えれば、下の生の px 指定もまとめて追従する。 */ --ui-scale: 1; --fs-2xs: calc(10.5px * var(--ui-scale)); --fs-xs: calc(11.5px * var(--ui-scale)); --fs-sm: calc(12.5px * var(--ui-scale)); --fs-md: calc(13.5px * var(--ui-scale)); --fs-lg: calc(15px * var(--ui-scale)); --fs-xl: calc(17px * var(--ui-scale)); --fs-2xl: calc(22px * var(--ui-scale)); --lh-tight: 1.35; --lh: 1.6; --lh-loose: 1.75; /* --- モーション --- */ --ease: cubic-bezier(.2, .7, .35, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: 110ms; --dur: 190ms; --dur-slow: 280ms; /* --- フォーカス --- */ --focus: #2f7d55; /* リングの実線色 */ --focus-ring: 0 0 0 3px rgba(47, 125, 85, .30); /* 予備: box-shadow 版 */ --focus-on-dark: var(--on-brand-strong); /* 濃緑サーフェス上のリング色 */ /* --- 本文まわり（メッセージ領域のローカルトークン / --l3-*） --- */ --l3-msg-fs: 14px; /* 日本語本文 */ --l3-msg-lh: 1.8; /* 長時間読んでも疲れない行間 */ --l3-msg-track: .015em; /* わずかな字間で密着を防ぐ */ --l3-measure: 46em; /* 行長: 全角約46文字で折り返す */ --l3-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Roboto Mono", "Noto Sans Mono", "Osaka-Mono", "MS Gothic", monospace; --l3-msg-hover: color-mix(in srgb, var(--txt) 5%, transparent); --l3-mine-bg: color-mix(in srgb, var(--brand) 6%, transparent); --l3-mention-bg: color-mix(in srgb, var(--amber) 13%, var(--panel)); --l3-mention-bar: var(--amber); --l3-sys-bg: color-mix(in srgb, var(--brand) 7%, var(--bg-sunken)); /* コードブロック: 明暗どちらでも「コード」として読める深色面 */ --l3-code-bg: color-mix(in srgb, var(--green-900) 26%, var(--txt)); --l3-code-fg: color-mix(in srgb, white 84%, var(--brand)); --l3-code-line: color-mix(in srgb, white 14%, transparent); /* 装飾記法 */ --l3-tag-bg: color-mix(in srgb, var(--brand) 16%, var(--panel)); --l3-tag-fg: var(--brand-ink); --l3-tag-line: color-mix(in srgb, var(--brand) 34%, transparent); --l3-tagme-bg: color-mix(in srgb, var(--amber) 24%, var(--panel)); --l3-tagme-fg: color-mix(in srgb, var(--amber) 40%, var(--txt)); --l3-tagme-line: color-mix(in srgb, var(--amber) 58%, transparent); --l3-quote-bg: color-mix(in srgb, var(--brand) 6%, var(--bg-sunken)); --l3-info-bg: var(--panel-2); --l3-info-head: color-mix(in srgb, var(--brand) 13%, var(--panel-2)); --l3-task-bg: color-mix(in srgb, var(--amber) 10%, var(--panel)); --l3-task-line: color-mix(in srgb, var(--amber) 38%, transparent); --l3-taskdone-bg: color-mix(in srgb, var(--brand) 9%, var(--panel)); --l3-taskdone-line: color-mix(in srgb, var(--brand) 30%, transparent); /* リアクション */ --l3-chip-bg: var(--panel); --l3-chip-line: var(--line-strong); --l3-chipmine-bg: color-mix(in srgb, var(--brand) 14%, var(--panel)); --l3-chipmine-line: var(--brand); --l3-chipmine-fg: var(--brand-ink); /* 危険色テキスト（ライトでは濃く落として可読性を確保） */ --l3-danger-ink: color-mix(in srgb, var(--red) 72%, var(--txt)); /* 本文リンク色（ダークでは白寄りに持ち上げる） */ --l3-link: var(--brand-ink); /* 入力欄 */ --l3-field-bg: var(--bg-sunken); --l3-field-focus-bg: var(--panel); /* アイコン既定サイズ（ストローク幅 1.7 は data URI 内に固定） */ --icon-size: 18px; font-size: calc(14px * var(--ui-scale)); } /* ============================================================ 01. ダークモードのトークン上書き 真っ黒にせず、緑寄りニュートラルの #12181x 系。 bg(#121815) → panel(#1a221d) → panel-2(#212b25) で段差を明示する。 ------------------------------------------------------------ ※ 自動（@media）版と手動（html[data-theme="dark"]）版は 完全に同一の値を二重定義している。片方だけ直さないこと。 ============================================================ */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { color-scheme: dark; /* ブランド緑: ダークで沈まないよう明度を上げる */ --green-900: #1e4634; /* 濃緑サーフェスのまま（白文字と 10.60:1） */ --green-700: #4fb583; /* panel 上で 6.41:1 = 文字にも使える */ --green-600: #63c795; --green-500: #57bd8b; --green-100: #22392e; --green-50: #1a231e; --brand: var(--green-700); --brand-hover: var(--green-600); --brand-active: #45a173; --brand-strong: var(--green-900); --brand-ink: var(--green-700); /* 濃緑文字 → 明緑に反転 */ --brand-weak: var(--green-100); --brand-tint: var(--green-50); --on-brand: #08130d; /* --brand の上 7.46:1 */ --on-brand-strong: #ffffff; /* --brand-strong の上 10.60:1 */ --on-brand-weak: #a9e3c3; /* --brand-weak の上 8.54:1 */ --on-accent: #0d1411; /* --red の上 6.38:1 ほか */ --bg: #121815; --bg-sunken: #0d1210; --panel: #1a221d; --panel-2: #212b25; --field: #141b17; --field-focus:#171f1a; --hover-bg: #1e2823; --active-bg: var(--brand-weak); --scrim: rgba(0, 0, 0, .70); --line: #2b3630; --line-strong: #3d4b44; --txt: #e8efea; /* panel 13.92:1 / bg 15.39:1 / panel-2 12.50:1 */ --txt-sub: #a4b4ab; /* panel 7.51:1 / bg 8.31:1 / panel-2 6.75:1 */ --txt-faint: #8b9a92; /* panel 5.53:1 / panel-2 4.97:1 */ --red: #e07a6f; /* panel 5.57:1 */ --amber: #dfa94f; /* panel 7.69:1 */ --blue: #74afd4; /* panel 6.84:1 */ --online: #4fc57e; --offline: #5c6a62; --avatar-fallback: #46534c; /* 白文字と 8.07:1 */ --danger-bg: #2a1a18; --danger-line: #4d2e2a; --danger-txt: #f0a89e; /* 8.58:1 */ --warn-bg: #241f14; --warn-line: #4a3d20; --warn-txt: #e2c17e; /* 9.49:1 */ --warn-solid: #96591a; /* 白文字と 5.61:1 */ --ok-bg: #14251b; --ok-line: #2c4433; --info-bg: #162a1f; --mention-bg: #262013; --mention-chip-bg: #3a2f14; --mention-chip-txt:#f2cf8c; /* 8.82:1 */ --code-bg: #0e1411; --code-txt: #cfe3d6; /* 13.85:1 */ --auth-grad-1: #16241c; --auth-grad-2: #101a15; --auth-grad-3: #0e1a1a; --btn-disabled-bg: #262f2a; --btn-disabled-txt: #909d95; /* 4.89:1 */ --scroll-thumb: #35443c; --scroll-thumb-hover: #47594f; --shadow-1: 0 1px 2px rgba(0, 0, 0, .5); --shadow-2: 0 6px 22px rgba(0, 0, 0, .55); --shadow-3: 0 22px 56px rgba(0, 0, 0, .70); --shadow: var(--shadow-2); --shadow-press: inset 0 2px 5px rgba(0, 0, 0, .45); --focus: #6ecf9f; --focus-ring: 0 0 0 3px rgba(110, 207, 159, .32); /* --- 本文まわり --- */ --l3-msg-hover: color-mix(in srgb, var(--txt) 7%, transparent); --l3-mine-bg: color-mix(in srgb, var(--brand) 10%, transparent); --l3-mention-bg: color-mix(in srgb, var(--amber) 10%, var(--panel)); --l3-sys-bg: color-mix(in srgb, var(--brand) 8%, var(--panel-2)); --l3-code-bg: color-mix(in srgb, black 38%, var(--panel)); --l3-code-fg: color-mix(in srgb, white 74%, var(--brand)); --l3-code-line: color-mix(in srgb, white 10%, transparent); --l3-tag-bg: color-mix(in srgb, var(--brand) 20%, var(--panel)); --l3-tag-fg: color-mix(in srgb, var(--brand) 55%, white); --l3-tag-line: color-mix(in srgb, var(--brand) 42%, transparent); --l3-tagme-bg: color-mix(in srgb, var(--amber) 18%, var(--panel)); --l3-tagme-fg: color-mix(in srgb, var(--amber) 72%, white); --l3-tagme-line: color-mix(in srgb, var(--amber) 55%, transparent); --l3-quote-bg: color-mix(in srgb, var(--brand) 8%, var(--panel-2)); --l3-info-bg: var(--panel-2); --l3-info-head: color-mix(in srgb, var(--brand) 16%, var(--panel-2)); --l3-task-bg: color-mix(in srgb, var(--amber) 12%, var(--panel)); --l3-task-line: color-mix(in srgb, var(--amber) 32%, transparent); --l3-taskdone-bg: color-mix(in srgb, var(--brand) 11%, var(--panel)); --l3-taskdone-line: color-mix(in srgb, var(--brand) 28%, transparent); --l3-chip-bg: var(--panel-2); --l3-chip-line: var(--line-strong); --l3-chipmine-bg: color-mix(in srgb, var(--brand) 20%, var(--panel)); --l3-chipmine-line: var(--brand); --l3-chipmine-fg: color-mix(in srgb, var(--brand) 50%, white); --l3-danger-ink: var(--red); --l3-link: color-mix(in srgb, var(--brand) 82%, white); --l3-field-bg: color-mix(in srgb, black 24%, var(--panel)); --l3-field-focus-bg: var(--panel-2); } } /* 手動切替フック（将来 JS で html[data-theme] を差すだけで効く） */ html[data-theme="dark"] { color-scheme: dark; --green-900: #1e4634; --green-700: #4fb583; --green-600: #63c795; --green-500: #57bd8b; --green-100: #22392e; --green-50: #1a231e; --brand: var(--green-700); --brand-hover: var(--green-600); --brand-active: #45a173; --brand-strong: var(--green-900); --brand-ink: var(--green-700); --brand-weak: var(--green-100); --brand-tint: var(--green-50); --on-brand: #08130d; --on-brand-strong: #ffffff; --on-brand-weak: #a9e3c3; --on-accent: #0d1411; --bg: #121815; --bg-sunken: #0d1210; --panel: #1a221d; --panel-2: #212b25; --field: #141b17; --field-focus:#171f1a; --hover-bg: #1e2823; --active-bg: var(--brand-weak); --scrim: rgba(0, 0, 0, .70); --line: #2b3630; --line-strong: #3d4b44; --txt: #e8efea; --txt-sub: #a4b4ab; --txt-faint: #8b9a92; --red: #e07a6f; --amber: #dfa94f; --blue: #74afd4; --online: #4fc57e; --offline: #5c6a62; --avatar-fallback: #46534c; --danger-bg: #2a1a18; --danger-line: #4d2e2a; --danger-txt: #f0a89e; --warn-bg: #241f14; --warn-line: #4a3d20; --warn-txt: #e2c17e; --warn-solid: #96591a; /* 白文字と 5.61:1 */ --ok-bg: #14251b; --ok-line: #2c4433; --info-bg: #162a1f; --mention-bg: #262013; --mention-chip-bg: #3a2f14; --mention-chip-txt:#f2cf8c; --code-bg: #0e1411; --code-txt: #cfe3d6; --auth-grad-1: #16241c; --auth-grad-2: #101a15; --auth-grad-3: #0e1a1a; --btn-disabled-bg: #262f2a; --btn-disabled-txt: #909d95; --scroll-thumb: #35443c; --scroll-thumb-hover: #47594f; --shadow-1: 0 1px 2px rgba(0, 0, 0, .5); --shadow-2: 0 6px 22px rgba(0, 0, 0, .55); --shadow-3: 0 22px 56px rgba(0, 0, 0, .70); --shadow: var(--shadow-2); --shadow-press: inset 0 2px 5px rgba(0, 0, 0, .45); --focus: #6ecf9f; --focus-ring: 0 0 0 3px rgba(110, 207, 159, .32); --l3-msg-hover: color-mix(in srgb, var(--txt) 7%, transparent); --l3-mine-bg: color-mix(in srgb, var(--brand) 10%, transparent); --l3-mention-bg: color-mix(in srgb, var(--amber) 10%, var(--panel)); --l3-sys-bg: color-mix(in srgb, var(--brand) 8%, var(--panel-2)); --l3-code-bg: color-mix(in srgb, black 38%, var(--panel)); --l3-code-fg: color-mix(in srgb, white 74%, var(--brand)); --l3-code-line: color-mix(in srgb, white 10%, transparent); --l3-tag-bg: color-mix(in srgb, var(--brand) 20%, var(--panel)); --l3-tag-fg: color-mix(in srgb, var(--brand) 55%, white); --l3-tag-line: color-mix(in srgb, var(--brand) 42%, transparent); --l3-tagme-bg: color-mix(in srgb, var(--amber) 18%, var(--panel)); --l3-tagme-fg: color-mix(in srgb, var(--amber) 72%, white); --l3-tagme-line: color-mix(in srgb, var(--amber) 55%, transparent); --l3-quote-bg: color-mix(in srgb, var(--brand) 8%, var(--panel-2)); --l3-info-bg: var(--panel-2); --l3-info-head: color-mix(in srgb, var(--brand) 16%, var(--panel-2)); --l3-task-bg: color-mix(in srgb, var(--amber) 12%, var(--panel)); --l3-task-line: color-mix(in srgb, var(--amber) 32%, transparent); --l3-taskdone-bg: color-mix(in srgb, var(--brand) 11%, var(--panel)); --l3-taskdone-line: color-mix(in srgb, var(--brand) 28%, transparent); --l3-chip-bg: var(--panel-2); --l3-chip-line: var(--line-strong); --l3-chipmine-bg: color-mix(in srgb, var(--brand) 20%, var(--panel)); --l3-chipmine-line: var(--brand); --l3-chipmine-fg: color-mix(in srgb, var(--brand) 50%, white); --l3-danger-ink: var(--red); --l3-link: color-mix(in srgb, var(--brand) 82%, white); --l3-field-bg: color-mix(in srgb, black 24%, var(--panel)); --l3-field-focus-bg: var(--panel-2); } /* 明示的にライト固定（OS がダークでもライトを保つ） */ html[data-theme="light"] { color-scheme: light; } /* ============================================================ 02. リセット / ベース要素 ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } html { scrollbar-color: var(--scroll-thumb) transparent; scrollbar-width: thin; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-ja); color: var(--txt); background: var(--bg); overflow: hidden; line-height: var(--lh); letter-spacing: .01em; /* 日本語の約物詰め（palt）と字形の安定化。外部フォントは使わない */ font-feature-settings: "palt" 1; font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } /* 等幅が要る場所は palt を切る */ :where(code, pre, kbd, samp) { font-feature-settings: normal; font-family: var(--font-mono); } /* 見出しは本文サイズを継承（アプリ UI なのでブラウザ既定を殺す） */ :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: 700; line-height: var(--lh-tight); } :where(ul, ol) { list-style: none; } :where(img, svg, video, canvas) { max-width: 100%; } :where(svg) { display: block; flex-shrink: 0; } :where(hr) { border: none; border-top: 1px solid var(--line); } .hidden { display: none !important; } a { color: var(--brand-ink); text-decoration: none; text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--brand-hover); text-decoration: underline; } ::selection { background: var(--brand-weak); color: var(--on-brand-weak); } /* --- フォーム要素 --- */ button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; font-size: inherit; line-height: var(--lh-tight); -webkit-tap-highlight-color: transparent; } button:disabled { cursor: default; } input, textarea, select { font-family: inherit; font-size: calc(14px * var(--ui-scale)); color: var(--txt); } /* 入力欄の既定の面と縁。:where() で詳細度 0 なので各コンポーネントが自由に上書きできる。 app.js がインラインで生成する textarea もこれで最低限の見た目になる。 */ :where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range])), :where(textarea), :where(select) { background-color: var(--field); border: 1px solid var(--line); border-radius: var(--radius-sm); line-height: var(--lh); } ::placeholder { color: var(--txt-faint); opacity: 1; } :where(input[type=checkbox], input[type=radio]) { accent-color: var(--brand-ink); cursor: pointer; } /* --- 共通トランジション --- :where() で詳細度 0。各コンポーネントが個別に書いた transition が常に勝つので、 これは「取りこぼしの穴埋め」として働く。 */ :where(a, button, summary, [tabindex], input[type="checkbox"], input[type="radio"]) { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), outline-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } :where(input, textarea, select) { transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), outline-color var(--dur-fast) var(--ease); } /* 行・カード・チップ類（クリックできる「面」） */ :where(.chat-item, .msg, .react-chip, .file-row, .member-row, .pick-row, .search-result, .file-chip, .task-card, .todo-row, .color-dots span, .avatar, .room-icon, .msg-actions button, .load-more button) { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } /* ============================================================ 03. ボタン 押した瞬間に 1px 沈む。影は「浮いている量」を表す。 ============================================================ */ .btn-primary, .btn-ghost, .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--fs-md); font-weight: 600; line-height: var(--lh-tight); white-space: nowrap; user-select: none; } /* --- 主操作 --- */ .btn-primary { background: var(--brand); color: var(--on-brand); /* ライト 5.02:1 / ダーク 7.46:1 */ padding: 9px 18px; box-shadow: var(--shadow-1); } .btn-primary:hover { background: var(--brand-hover); } .btn-primary:active { background: var(--brand-active); transform: translateY(1px); box-shadow: var(--shadow-press); } .btn-primary:disabled { background: var(--btn-disabled-bg); color: var(--btn-disabled-txt); cursor: default; box-shadow: none; transform: none; } /* --- 副操作（枠線） --- */ .btn-ghost { border: 1px solid var(--line-strong); padding: 8px 14px; background: var(--panel); color: var(--txt); } .btn-ghost:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--on-brand-weak); } .btn-ghost:active { background: var(--brand-weak); transform: translateY(1px); } .btn-ghost:disabled { background: var(--panel); border-color: var(--line); color: var(--btn-disabled-txt); cursor: default; transform: none; } /* --- 小サイズ（.btn-primary / .btn-ghost / .btn-danger と併用） --- */ .btn-sm { padding: 5px 12px; font-size: var(--fs-sm); border-radius: var(--radius-sm); } /* --- 破壊的操作 --- */ .btn-danger { background: var(--red); color: var(--on-accent); padding: 8px 14px; box-shadow: var(--shadow-1); } .btn-danger:hover { filter: brightness(1.07); } .btn-danger:active { transform: translateY(1px); box-shadow: var(--shadow-press); filter: none; } .btn-danger:disabled { background: var(--btn-disabled-bg); color: var(--btn-disabled-txt); cursor: default; box-shadow: none; transform: none; filter: none; } /* ============================================================ 04. スクロールバー ここで全域確定。個別コンポーネントでは再定義しない （例外: .box-code は暗い面なので専用配色を持つ）。 ============================================================ */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ============================================================ 05. 認証画面 グラデーションは --auth-grad-1/2/3 が明暗で切り替わるので ダーク用の上書きは不要。 ============================================================ */ .auth { height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background-color: var(--auth-grad-2); background-image: radial-gradient(1100px 620px at 12% -10%, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 62%), radial-gradient(900px 560px at 92% 108%, color-mix(in srgb, var(--brand-strong) 16%, transparent) 0%, transparent 60%), linear-gradient(158deg, var(--auth-grad-1) 0%, var(--auth-grad-2) 58%, var(--auth-grad-3) 100%); } .auth-card { width: 380px; max-width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: var(--space-6) calc(var(--space-5) + var(--space-1)); animation: eco-modal-in var(--dur-slow) var(--ease-out) both; } .auth-logo { display: flex; align-items: center; gap: var(--space-2); justify-content: center; } .auth-logo svg { flex-shrink: 0; } .auth-logo h1 { font-size: calc(26px * var(--ui-scale)); line-height: 1.15; color: var(--brand-ink); letter-spacing: .04em; font-weight: 700; } .auth-sub { text-align: center; color: var(--txt-sub); margin: var(--space-2) 0 var(--space-5); font-size: var(--fs-sm); line-height: 1.6; } .auth-card label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--txt-sub); letter-spacing: .02em; margin: var(--space-3) 0 var(--space-1); } .auth-card input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-sunken); color: var(--txt); } .auth-card input::placeholder { color: var(--txt-faint); } .auth-card input:hover { border-color: var(--line-strong); } .auth-card input:focus, .auth-card input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; background: var(--panel); } .auth-card .btn-primary { width: 100%; margin-top: var(--space-5); padding: 12px; } .auth-switch { text-align: center; margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--txt-sub); } .auth-switch a { color: var(--brand-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--brand) 45%, transparent); padding-bottom: 1px; } .auth-switch a:hover { border-bottom-color: var(--brand); } .auth-error { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger-txt); border-radius: var(--radius-sm); padding: 10px 12px; font-size: var(--fs-sm); line-height: 1.55; margin-bottom: var(--space-1); } /* ---------------- サーバー停止時の案内 ---------------- Service Worker がキャッシュを返すため、サーバーが止まっていても ページ自体は開いてしまう。何も出さないと真っ白な画面になり、 利用者には「壊れた」としか見えないので必ず理由と直し方を出す。 背景は .auth と揃えて、別のアプリに見えないようにする。 */ .server-down { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--space-4); overflow-y: auto; background-color: var(--auth-grad-2); background-image: radial-gradient(1100px 620px at 12% -10%, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 62%), radial-gradient(900px 560px at 92% 108%, color-mix(in srgb, var(--brand-strong) 16%, transparent) 0%, transparent 60%), linear-gradient(158deg, var(--auth-grad-1) 0%, var(--auth-grad-2) 58%, var(--auth-grad-3) 100%); } .sd-card { width: 100%; max-width: 460px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: var(--space-6) calc(var(--space-5) + var(--space-1)); text-align: center; animation: eco-modal-in var(--dur-slow) var(--ease-out) both; } .sd-icon { font-size: calc(44px * var(--ui-scale)); line-height: 1; } .sd-card h1 { font-size: calc(20px * var(--ui-scale)); color: var(--brand-ink); margin: var(--space-3) 0 10px; font-weight: 700; } .sd-lead { font-size: var(--fs-sm); color: var(--txt-sub); line-height: 1.8; margin-bottom: var(--space-5); } /* 手順は「読むもの」なので左寄せ。 全体リセットの :where(ul, ol) { list-style: none } で番号が消えるため、 ここだけ番号を戻す (「上から順に」の案内が意味を成さなくなる) */ .sd-steps { text-align: left; background: var(--brand-tint); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px 14px 34px; margin-bottom: var(--space-4); list-style: decimal; } .sd-steps li { font-size: var(--fs-sm); line-height: 1.9; color: var(--txt); } .sd-steps b { color: var(--brand-ink); font-weight: 700; } .sd-note { font-size: var(--fs-sm); color: var(--warn-txt); background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: var(--space-5); line-height: 1.7; } .server-down .btn-primary { width: 100%; padding: 12px; font-size: var(--fs-md); } .sd-sub { font-size: var(--fs-xs); color: var(--txt-sub); margin-top: var(--space-3); } /* ============================================================ 06. レイアウト骨格 ============================================================ */ /* 上のバーを画面の横いっぱいに置くため、.app は縦積みにして 「上のバー」+「3カラム(.app-body)」の2段にしている。 3カラム側の並び方はこれまでと同じなので、下の指定はすべてそのまま効く。 */ .app { display: flex; flex-direction: column; height: 100vh; background: var(--bg); } .app-body { flex: 1; display: flex; min-height: 0; /* これが無いと中の一覧がスクロールせず画面外へ伸びる */ } .sidebar { width: var(--side-w, 300px); min-width: var(--side-w, 300px); background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); } /* .chat-pane が縦フレックスでないとメッセージ領域がスクロールしなくなる。 position: relative は #newPill（10 節）の z-index 解決を素直にするため。 ⚠ .panel は .chat-pane の子孫ではない（.app > .main > .chat-pane / .app > .panel） ので、20 節の .panel.force の absolute には影響しない。 */ .chat-pane { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; } .panel { width: 290px; min-width: 290px; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; } /* モバイル専用要素（#btnBack / #btnPanelClose）。760px 以下でだけ現れる。 JS 側が display を触らないため !important で確実に切り替える。 */ .mobile-only { display: none !important; } /* ============================================================ 07. サイドバー ------------------------------------------------------------ 濃緑ヘッダー（--brand-strong サーフェス）の上の文字・アイコンは 必ず --on-brand-strong（常に白）を使う。--on-brand はダークで 暗色に反転する設計なので、ここで使うと約 1.4:1 まで落ちて読めない。 ============================================================ */ .side-head, .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); color: var(--on-brand-strong); background: linear-gradient(180deg, color-mix(in srgb, var(--green-900) 84%, var(--green-700)) 0%, var(--green-900) 100%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-brand-strong) 15%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--green-900) 60%, transparent), 0 1px 0 color-mix(in srgb, var(--green-900) 22%, transparent); position: relative; z-index: 2; flex-shrink: 0; } /* ロゴはサイドバーの幅にそろえる。真ん中の検索欄が チャット一覧との境目から始まって見えるようにするため。 */ .topbar .brand { width: calc(var(--side-w, 300px) - var(--space-4) - var(--space-3)); flex-shrink: 0; } /* 上のバーの検索欄。1本で「一覧の絞り込み」と「発言の中身の検索」を兼ねる。 */ .topbar-search { /* flex-basis は 0 + min-width:0。auto のままだと中の の既定幅が 縮まらない下限になり、上のバーが画面からはみ出す(スマホで実際に起きた)。 */ flex: 1 1 0; min-width: 0; max-width: 560px; display: flex; align-items: center; gap: 6px; padding: 0 10px; height: 34px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--on-brand-strong) 16%, transparent); border: 1px solid color-mix(in srgb, var(--on-brand-strong) 22%, transparent); } .topbar-search:focus-within { background: var(--panel); border-color: var(--panel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--on-brand-strong) 35%, transparent); } .topbar-search .ts-ico { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; opacity: .85; } .topbar-search input { flex: 1; min-width: 0; border: none; background: none; color: var(--on-brand-strong); font-size: var(--fs-sm); height: 100%; } .topbar-search input::placeholder { color: color-mix(in srgb, var(--on-brand-strong) 78%, transparent); } .topbar-search input:focus { outline: none; } /* 入力中は白地になるので、文字色も地に合わせて反転させる */ .topbar-search:focus-within .ts-ico { opacity: 1; } .topbar-search:focus-within input { color: var(--txt); } .topbar-search:focus-within input::placeholder { color: var(--txt-faint); } .ts-clear { flex-shrink: 0; width: 22px; height: 22px; border: none; background: none; color: inherit; font-size: calc(16px * var(--ui-scale)); line-height: 1; border-radius: 50%; cursor: pointer; opacity: .8; } .ts-clear:hover { background: color-mix(in srgb, currentColor 18%, transparent); opacity: 1; } .topbar-search:focus-within .ts-clear { color: var(--txt-sub); } .brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--fs-lg); letter-spacing: .04em; min-width: 0; color: var(--on-brand-strong); } .brand svg { flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); } .brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .22); } .side-actions { display: flex; gap: 2px; align-items: center; flex-shrink: 0; } .side-actions button { position: relative; font-size: var(--fs-lg); line-height: 1; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: var(--radius-sm); color: var(--on-brand-strong); } .side-actions button:hover { background: color-mix(in srgb, var(--on-brand-strong) 16%, transparent); } .side-actions button:active { transform: scale(.93); } /* 小バッジ: 小さくても必ず読めるサイズを維持し、濃緑ヘッダー上で 輪郭が消えないようノッチリング（box-shadow）を付ける。 */ .mini-badge { position: absolute; top: -2px; right: -2px; background: var(--red); color: var(--on-accent); font-size: calc(11px * var(--ui-scale)); line-height: 18px; min-width: 18px; height: 18px; border-radius: var(--radius-pill); text-align: center; padding: 0 4px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; box-shadow: 0 0 0 2px var(--green-900); pointer-events: none; } .side-search { display: flex; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--line); flex-shrink: 0; } .side-search input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-sunken); color: var(--txt); } .side-search input::placeholder { color: var(--txt-faint); } .side-search input:hover { border-color: var(--line-strong); } .side-search input:focus, .side-search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; background: var(--panel); } .side-search button { width: 36px; min-width: 36px; border-radius: var(--radius-sm); background: var(--brand-strong); color: var(--on-brand-strong); font-size: calc(18px * var(--ui-scale)); line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .side-search button:hover { background: var(--brand); color: var(--on-brand); } .side-search button:active { transform: scale(.95); } /* 絞り込みタブ。5 つ（すべて/未読/To/ダイレクト/タスクあり）あるので 幅 300px のサイドバーでは 2 段に折り返る。これは意図した挙動で、 横スクロールに逃がすとタブが画面外に隠れて気づけなくなるため折返しを選んでいる。 （モバイルは全幅になるので 1 段に収まる） */ /* 絞り込みタブ + 「＋ 新しいチャット」を1行に置く。 検索欄が上のバーへ移ったので、その行の代わりになる。 */ .side-tabs-row { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-1); border-bottom: 1px solid var(--line); flex-shrink: 0; } .side-tabs-row > #btnNewChat { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-lg); line-height: 1; border-radius: var(--radius-sm); background: var(--brand); color: var(--on-brand-strong); font-weight: 700; } .side-tabs-row > #btnNewChat:hover { background: var(--brand-hover); } .side-tabs-row > #btnNewChat:active { transform: scale(.93); } .side-tabs { display: flex; gap: var(--space-1); padding: 0; flex: 1; min-width: 0; flex-wrap: wrap; flex-shrink: 1; } .side-tabs button { font-size: var(--fs-xs); line-height: 1; padding: 6px 10px; border-radius: var(--radius-pill); color: var(--txt-sub); font-weight: 600; border: 1px solid transparent; } .side-tabs button:hover { background: var(--bg-sunken); color: var(--txt); } .side-tabs button:active { transform: scale(.93); } /* 選択中。app.js 463行が class="on" と aria-selected を必ず同時に更新するので 属性側も併記する（JS が片方だけ更新した場合の保険）。 */ .side-tabs button.on, .side-tabs button[aria-selected="true"] { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 28%, transparent); color: var(--brand-ink); font-weight: 700; } /* --- チャット一覧 --- */ .chat-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: var(--space-2) var(--space-2) var(--space-6); } .chat-item { display: flex; /* 名前 / 旗 / 時刻 / バッジが 300px の一覧に同居するので隙間は詰める */ gap: var(--space-2); padding: 10px 10px 10px 12px; border-radius: var(--radius); cursor: pointer; align-items: center; position: relative; } /* 未読アクセントバーの土台（既定は高さ 0 = 非表示） */ .chat-item::before { content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 3px; height: 0; border-radius: var(--radius-pill); background: var(--brand); transition: height var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .chat-item:hover { background: var(--bg-sunken); } .chat-item:active { transform: scale(.994); } /* 選択中。app.js 523行が class="on" と aria-selected を同時に出力する。 */ .chat-item.on, .chat-item[aria-selected="true"] { background: var(--brand-tint); } .chat-item.on::before, .chat-item[aria-selected="true"]::before { height: 60%; background: var(--brand-ink); } .chat-item .ci-txt { flex: 1; min-width: 0; } .ci-top { display: flex; align-items: baseline; gap: 5px; min-width: 0; overflow: hidden; /* 縮むのは名前だけ（旗と時刻は原寸のまま） */ } .ci-name { font-weight: 600; font-size: var(--fs-md); line-height: 1.35; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; /* 旗+時刻に押されて 1〜2 文字まで潰れるのを防ぐ下限。 ただし下限を上げすぎると行があふれて「時刻」が切れるので、 旗 3 個 + To + 未読バッジが全部乗る最悪ケースが収まる値にしてある。 */ min-width: 3.4em; } /* 📌🔕📞 の状態旗。絵文字は途中で切れると「壊れた四角」に見えるので、 縮ませずに必ず丸ごと描く（幅が足りないときは名前側が「…」で詰まる＝ 意図した省略に見える）。旗が 0 個のときは gap ごと消す。 */ .ci-flags { font-size: calc(10px * var(--ui-scale)); line-height: 1; flex: 0 0 auto; letter-spacing: -1px; opacity: .85; } .ci-flags:empty { display: none; } .ci-time { font-size: var(--fs-xs); color: var(--txt-faint); flex-shrink: 0; font-variant-numeric: tabular-nums; } .ci-last { font-size: var(--fs-sm); color: var(--txt-sub); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } /* 未読の可視化: JS が未読クラスを付けないので :has() でバッジの有無から判定する。 ⚠ .badge.muted（通知ミュート中チャットの未読 / app.js 534行）はここから除外する。 renderBadges() でも総未読から外される「見なくてよい未読」なので、 行まで強調すると .badge.muted を淡くした意味が消える。 .badge.mention には .muted が付かないので、To 付きの行は従来どおり強調される。 :has() 非対応環境ではバッジだけで判別できるフォールバック挙動になる。 */ .chat-item:has(.badge:not(.task):not(.muted))::before { height: 62%; } .chat-item:has(.badge:not(.task):not(.muted)) .ci-name { font-weight: 700; color: var(--txt); } .chat-item:has(.badge:not(.task):not(.muted)) .ci-last { color: var(--txt); font-weight: 500; } .chat-item:has(.badge:not(.task):not(.muted)) .ci-time { color: var(--brand-ink); font-weight: 700; } .chat-item:has(.badge.mention)::before { background: var(--red); } .chat-item:has(.badge.mention) .ci-time { color: var(--red); } /* メッセージがまだ 1 件も無い行（app.js 519行 ）。 親の .ci-last が既に --txt-sub なので、一段落として斜体で 「実データではない」ことを示す。 ⚠ 上の .chat-item:has(.badge:not(.task)) .ci-last は【.ci-last 要素そのもの】に 効くので、子を直接指すこちらとは詳細度勝負にならず必ず勝つ。 継承してくる font-weight だけ 400 に戻しておく。 */ .chat-item .ci-last .ci-none { color: var(--txt-faint); font-style: italic; font-weight: 400; } /* バッジ: 最小可読サイズを死守する */ .badge { background: var(--brand-strong); color: var(--on-brand-strong); border-radius: var(--radius-pill); font-size: calc(11px * var(--ui-scale)); min-width: 20px; height: 20px; line-height: 20px; text-align: center; padding: 0 6px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; align-self: center; letter-spacing: .01em; box-shadow: 0 1px 2px color-mix(in srgb, var(--green-900) 22%, transparent); } .badge.mention { background: var(--red); color: var(--on-accent); } /* 琥珀のベタ塗りは白文字が読めないので、淡い面 + 内側リング + 濃色文字にする */ .badge.task { background: color-mix(in srgb, var(--amber) 16%, var(--panel)); color: color-mix(in srgb, var(--amber) 72%, var(--txt)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 45%, transparent); font-weight: 700; } /* 通知ミュート中チャットの未読（app.js 534行）。renderBadges() でも総未読から 除外される「見なくてよい未読」なので、ブランド濃緑のベタ塗りをやめて 沈んだ面 + 枠線だけにする。数は読めるが視線は奪わない。 */ .badge.muted { background: var(--bg-sunken); color: var(--txt-sub); /* --bg-sunken 上 5.15:1 / ダーク 8.73:1 */ box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 600; } /* --- アバター / ルームアイコン --- background は app.js のインライン style で入るため絶対に上書きしない。 内側リング + 文字影で、どんな地色でも頭文字が読めるようにする。 */ .avatar { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--on-brand-strong); font-weight: 700; font-size: calc(15px * var(--ui-scale)); line-height: 1; flex-shrink: 0; position: relative; user-select: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), inset 0 -8px 14px rgba(0, 0, 0, .10), 0 0 0 1px color-mix(in srgb, var(--txt) 8%, transparent); } .avatar-s { width: 26px; height: 26px; font-size: calc(11px * var(--ui-scale)); } .avatar-l { width: 64px; height: 64px; font-size: calc(26px * var(--ui-scale)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24), inset 0 -14px 24px rgba(0, 0, 0, .12), 0 2px 8px color-mix(in srgb, var(--green-900) 20%, transparent); } .avatar .dot { position: absolute; bottom: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--offline); border: 2px solid var(--panel); box-shadow: none; transition: background-color var(--dur) var(--ease); } .avatar .dot.on { background: var(--online); } .avatar-s .dot { width: 9px; height: 9px; border-width: 1.5px; } .avatar-l .dot { width: 16px; height: 16px; border-width: 3px; } .room-icon { width: 38px; height: 38px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; color: var(--on-brand-strong); font-weight: 700; font-size: var(--fs-lg); line-height: 1; flex-shrink: 0; user-select: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), inset 0 -8px 14px rgba(0, 0, 0, .10), 0 0 0 1px color-mix(in srgb, var(--txt) 8%, transparent); } /* ============================================================ 08. チャットヘッダー / 空状態 / 空表示 ============================================================ */ .chat-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); min-height: 56px; background: var(--panel); border-bottom: 1px solid var(--line); flex-shrink: 0; position: relative; z-index: 1; } .chat-head-txt { flex: 1; min-width: 0; } /* index.html 93行で
→

になった。ブラウザ既定の font-size:2em / margin:.67em は 02 節（* リセット / :where(h1..h6){font-size:inherit}）で 既に潰れているが、02 節が将来削られても崩れないよう念押しする。 ⚠ 詳細度は (0,1,0) のまま保つこと。.chat-head-txt h1.chat-head-name のように 強めると 20 節（≤760px）の font-size 縮小に勝ってしまう。 */ .chat-head-name { margin: 0; padding: 0; font-weight: 700; font-size: var(--fs-lg); line-height: 1.3; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-head-sub { font-size: var(--fs-xs); color: var(--txt-sub); line-height: 1.4; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-head-actions { display: flex; gap: 2px; flex-shrink: 0; } .chat-head-actions button { font-size: var(--fs-lg); line-height: 1; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: var(--radius-sm); color: var(--txt-sub); } .chat-head-actions button:hover { background: var(--bg-sunken); color: var(--txt); } .chat-head-actions button:active { transform: scale(.93); } /* ピン留め中 / ミュート中。app.js 660-663行が .on と aria-pressed を同時に更新する。 ⚠ 通話コントロール（15 節）の aria-pressed は意味が反転するものがあるため、 同じ書き方をそちらへ持ち込まないこと。 */ .chat-head-actions button.on, .chat-head-actions button[aria-pressed="true"] { color: var(--brand-ink); background: var(--brand-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 26%, transparent); } .call-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--brand-tint); border-bottom: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line)); box-shadow: inset 3px 0 0 var(--brand); font-size: var(--fs-md); font-weight: 600; color: var(--brand-ink); flex-shrink: 0; animation: eco-slide-down var(--dur) var(--ease) both; } .call-bar span { flex: 1; min-width: 0; } .empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); color: var(--txt-sub); padding: var(--space-6); text-align: center; background: radial-gradient(720px 420px at 50% 42%, color-mix(in srgb, var(--brand) 6%, transparent) 0%, transparent 70%); } .empty-state p { font-size: var(--fs-md); line-height: 1.7; letter-spacing: .02em; } /* --- 空表示 / 読み込み中 / 読み込み失敗（.list-empty） --- 出現箇所は 7 つあり、置かれる面は 3 種類。 #chatList (--panel / 幅 300px) #msgList (--bg / 広い) #panelBody (--panel / 幅 290px) どこに置いても成立する「中央寄せブロック」として組む。 子は

が常に1個、 が 0〜1個、