/* ⚠️ **画面の下の逃げは、ここ1箇所で決める。**env(safe-area-inset-bottom) が
   6箇所に散っていて、**PWA とブラウザで下の空きが違う**（報告 1788134844）、
   **詳細だけ上にずれる**（報告 1788134877）と続けて出た。2件とも根は同じで、
   safe-area を**どこで1回だけ足すか**が決まっていなかった（2026-08-31）。
   ⚠️ **safe-area を持つのは下部バーだけ。**避ける側（一覧・入力欄・検索）は
   --bar-h を見るだけで、env() も max() も書かない。
   ⚠️ ホーム画面から開いたとき(PWA)だけ足す。ブラウザのタブでは
   ブラウザ自身が下を空けるので、足すと二重になって「かなり空いて見える」。
   ⚠️ **ここは画面幅の @media の外に置くこと。**中に入れると広い画面で
   var(--safe-b) が未定義になり、calc() ごと無効になってパソコン側が壊れる */
:root { --safe-b: 0px; }
@media (display-mode: standalone), (display-mode: fullscreen) {
  :root { --safe-b: env(safe-area-inset-bottom, 0px); }
}
:root { --bar-h: calc(59px + var(--safe-b)); }

:root {
  /* 既定は白ベース。暗い方は下の [data-theme="dark"]。
     どちらにするかは時刻で決めている(app.js の applyTheme)。 */
  --bg: #ffffff;
  --surface: #f7f8fa;
  --surface-2: #eceef3;
  --border: #dcdfe6;
  --border-strong: #c8ccd4;   /* community の枠の取り方に合わせた一段濃い線 */
  --text: #16181d;
  --muted: #5a5f6a;
  --faint: #8b909b;
  --accent: #2563d8;
  --accent-strong: #1b4bad;
  --user-bubble: #2563d8;
  --user-bubble-text: #ffffff;
  --error: #c0392b;
  --warn: #96670a;
  --ok: #2e8b57;
  --shadow: 0 10px 28px rgba(16, 18, 24, 0.12);
  --shadow-lg: 0 12px 32px rgba(16, 18, 24, 0.14);
  --shadow-side: 8px 0 32px rgba(16, 18, 24, 0.18);
  --backdrop: rgba(16, 18, 24, 0.32);
  --accent-ring: rgba(37, 99, 216, 0.18);
  --accent-soft: rgba(37, 99, 216, 0.10);
  --radius: 12px;
}

:root[data-theme="dark"] {
  --bg: #141519;
  --surface: #1c1e23;
  --surface-2: #24262c;
  --border: #2e3138;
  --border-strong: #3c4048;
  --text: #e8e9ec;
  --muted: #8f939c;
  --faint: #5c6068;
  --accent: #7aa2ff;
  --accent-strong: #4d74d9;
  --user-bubble: #31456f;
  --user-bubble-text: #e8e9ec;
  --error: #e08a8a;
  --warn: #d9a441;
  --ok: #5dbb80;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-side: 8px 0 32px rgba(0, 0, 0, 0.45);
  --backdrop: rgba(0, 0, 0, 0.45);
  --accent-ring: rgba(122, 162, 255, 0.15);
  --accent-soft: rgba(122, 162, 255, 0.13);
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  transition: background-color 0.35s ease, color 0.35s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP",
    /* ⚠️ **端末が変わっても崩れないよう、Windows と Linux の和文も名乗る。**
       「手元で確認しました」は**利用者の見え方ではない**（2026-09-02、統括の
       配信。seminar が 103 で撮った画面が参加者の見え方と違っていた）。
       ⚠️ **足すだけにする。**並びを組み直すと、いま正しく出ている端末が動く */
    "Yu Gothic UI", Meiryo, "Noto Sans CJK JP", sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  font-size: 14px;

  /* 上下を固定する。
     100dvh だとスクロールのたびにアドレスバーの分だけ高さが変わり、
     画面全体が伸び縮みして「ずれる」。body を視口に貼り付けて
     ページ自体をスクロールさせないことで、アドレスバーの開閉自体を起こさない。
     スクロールするのは #chat の中だけ。 */
  position: fixed;
  inset: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

#backdrop { display: none; }

/* 畳んだあとに出る「開く」ボタン。ハンバーガーではなく、畳みの矢印(<)の
   逆向き(>)。同じ対の操作だと分かる(2026-08-22、湊さんの指示) */
#menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}
#menu-btn:hover { color: var(--text); background: var(--surface-2); }
#menu-btn svg { transition: transform 0.18s ease; }
#menu-btn:active svg { transform: translateX(4px); }

/* ⚠️ **PC は現状のまま**（湊さんの指示）。LINE 風の行はスマホだけなので、
   PC では足した部品を畳んで、これまでの1行に見えるようにする */
.avatar, .row-sub, .row-when, .row-actions { display: none; }
.row-body, .row-slide { display: contents; }

/* ---------- sidebar ---------- */

#sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

/* ⚠️ 高さと padding を topbar と揃えること。左右で行の高さが違うと、
   ロゴとタイトルの文字がずれて見える(58px vs 50px で 7.5px ずれていた)。 */
#sidebar-head {
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 18px;
}
#brand-logo {
  display: flex;
  align-items: center;
  gap: 7px;
}
#brand-logo svg { display: block; }
.brand-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
  white-space: nowrap;
  /* p と q の下端が伸びるぶん、字が上に見える。箱の中心は合っていても
     見た目が合わないので、光学的に 1px 下げる */
  transform: translateY(1px);
}
#collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
#collapse-btn:hover { color: var(--text); background: var(--surface-2); }
#collapse-btn svg { transition: transform 0.18s ease; }
/* 押した瞬間、矢印が閉じる方向(左)へ動く。押した感を出すだけで戻りは自然に */
#collapse-btn:active svg { transform: translateX(-4px); }

/* 下のリンク(community 等)と同じ素の行。⚠️ ボタンの枠を付けないこと
   (2026-08-22、湊さんの指示でサイドバー全体を同じ見た目に揃えた) */
#new-project {
  display: flex;
  align-items: center;
  gap: 7px;
  width: calc(100% - 20px);
  margin: 2px 10px 4px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
}
#new-project svg { flex-shrink: 0; }
#new-project:hover { background: var(--surface-2); color: var(--text); }

#project-list,
#archive-list {
  list-style: none;
  margin: 0;
  /* ⚠️ **周りと左端を揃える**（2026-08-30、湊さん「トップのリストの左右に
     ちょっとオフセットがあるのもやめて」）。⚠️ 0 にすると今度は
     検索欄・新規（左10px）とずれる——**目的は「揃える」ことで、
     「詰める」ことではない**（実測して気づいた）。周りと同じ 10px にする */
  padding: 0 10px;
  overflow-y: auto;
  flex: 1;
}
#project-list li,
#archive-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  /* ⚠️ 右の余白でボタンの場所を空けないこと。**ボタンの大きさを変えたときに
     必ずズレる。**以前は旧「×」の実寸に合わせた 30px を空けていたが、
     .more を pointer:coarse で 40px にしたら 14px はみ出し、スキル数の上に乗った
     (2026-08-22、デバッグ窓口の切り分け)。今は .more を in-flow に置いてある。 */
  padding: 6px 4px 6px 10px;
  margin: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
#project-list li .name,
#archive-list li .name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#project-list li .skill-count,
#archive-list li .skill-count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--accent);
  font-family: ui-monospace, "Noto Sans Mono CJK JP", monospace;
}
#project-list li .rename-input,
#archive-list li .rename-input {
  flex: 1;
  min-width: 0;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
#project-list li:hover { background: var(--surface-2); color: var(--text); }
/* ⚠️ **選択中に印を付けない**（2026-08-30、湊さん「青も太字もやめて、
   他のやつと合わせて」）。下のリンク（アーカイブ済み・イベント・
   量子ニュース）と同じ佇まいにする。
   ⚠️ 見分けが付かなくならないか確かめた: **開いた会話は先頭に来る**ので、
   通常の一覧でも検索中でも**必ず1番目**（実測。30件中1番目 / 検索18件中
   1番目）。位置で分かるため、字の飾りは要らない。
   ⚠️ 並び順を「最後に開いた順」から変えるときは、ここも見直すこと——
   先頭に来なくなると、選択中がどれか分からなくなる。
   hover の一時的な下地は残す(押せることが分かる最低限の反応) */
/* ⚠️ 色も戻さない。**他の行とまったく同じ佇まい**にする（湊さんの確認:
   「優先順位は上の方にあれば、よく使ってるって分かるので、それでいい」）。
   選択中は必ず先頭に来るので、位置で分かる（実測: 通常30件中1番目 /
   検索18件中1番目） */
#project-list li.active { }

/* ⚠️ **hover で出す作りにしないこと。**タッチには hover が無いので、
   スマホからは永久に押せない(2026-08-22、デバッグ窓口の切り分け)。常に出す。 */
#project-list .more,
#archive-list .more {
  flex: none;
  /* ⚠️ **右端に固定すること。**題のすぐ後ろに置くと、題の長さで左右に動き、
     短い題の行では**押すつもりの無い場所**に来る（2026-08-30、湊さん
     「タイトルの長さによって場所が左にきて間違えて押しそう」）。
     行のどこを押しても同じ所にあるのが正しい */
  margin-left: auto;
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  padding: 4px 4px;
  border-radius: 6px;
  opacity: 0.55;
}
#project-list .more:hover, #project-list li.active .more { opacity: 1; }

/* 指で押す端末では当たり判定を広げる。見た目(アイコン)は変えない。
   24x24 だと小さく、隣の行を誤爆する。 */
@media (pointer: coarse) {
  #project-list .more, #title-menu {
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
    opacity: 0.75;
  }
  /* ⚠️ 当たり判定(40px)が行を押し広げないように、はみ出す分を負の余白で
     打ち消す。行は薄いまま、指の当たりは 40px のまま */
  #project-list .more { margin-top: -8px; margin-bottom: -8px; }
}

.popmenu {
  position: fixed;
  z-index: 200;
  min-width: 140px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.popmenu button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  /* 指で押せる高さ。狭いと隣を誤爆する */
  padding: 9px 12px;
  border-radius: 7px;
  cursor: pointer;
}
.popmenu button:hover { background: var(--surface-2); }
.popmenu button.danger { color: var(--error); }

/* ⚠️ 案内を title 属性(tooltip)でやらないこと。**スマホでは出ない。**
   タイトルが押せることは、鉛筆の絵で見せている。 */
/* ⚠️ **右寄せの塊の「先頭」に置いている。**末尾(スキルの留め具の隣)に置くと、
   一覧で「スキルボタンとハンバーガーが近い」と言われたのと同じ並びになる。
   margin-left:auto はここが持つ(#status-chip から移した)。 */
/* ⚠️ **押しのけ役はタイトルが持つ。**以前は釦の側が `margin-right: auto` を
   持っており、**釦を右へ動かすと押しのけ役がいなくなって後ろが左へ流れる**
   （2026-09-04、窓口の指摘。先に移してから動かした） */
#project-title { margin-right: auto; }
#title-menu {
  /* ⭐ **2つとも右端へ寄せる**（2026-09-04、報告 1788491679。湊さん
     「アーカイブとゴミ箱ボタンはもうちょっと大きくして右側に両方寄せて」）。
     ⚠️ 2026-08-22 に「タイトルの右」と指示された配置の**手直し**。
     実際に触っての判断なので、戻すときは指示を確かめること */
  margin-right: 4px;   /* ⭐ タイトルの**左**に置く（2026-09-05） */
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  /* ⚠️ **触る的を広げる。**絵は 16、余白 4 で **24×24 しかなかった**——
     指で押す的の目安（44×44）の半分ちょっと。
     ⭐ **絵は 16 のまま、押せる範囲だけ広げる**（見た目を大きくしない） */
  padding: 14px;   /* ⭐ 16 + 14×2 = 44。指で押す的の目安ちょうど */
  border-radius: 8px;
  flex: none;
}
#title-menu:hover { background: var(--surface-2); }
#title-menu[hidden] { display: none; }
#project-title { cursor: pointer; }
.title-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 3px 8px;
}

#sidebar-footer {
  padding: 4px 10px 8px;
}
/* 線は、名前が素の行になったときに要る区切り。青いログインボタンは
   それ自体で区切りが分かるので引かない(2026-08-22、湊さんの指示) */
#sidebar-footer:has(#user-menu:not([hidden])) {
  border-top: 1px solid var(--border);
}
#user-menu {
  position: relative;
  display: block;
  padding: 0;
}
#user-menu.active #user-email {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#settings-dropdown {
  display: none;
  position: absolute;
  bottom: 40px;
  right: 4px;
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: var(--shadow);
  padding: 5px;
  z-index: 30;
}
#user-menu.active #settings-dropdown { display: block; }
#settings-dropdown a, #settings-dropdown button {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
}
#settings-dropdown a:hover, #settings-dropdown button:hover { background: var(--surface-2); }
#settings-dropdown button {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

/* サイドバーの折りたたみ(デスクトップ)。折りたたみ時はtopbarのメニューボタンで再表示 */
/* ⚠️ display:none で消さないこと。一瞬で消えて、押した感が無い。
   幅を 0 にして滑り出す。中身は overflow で隠れる */
#sidebar { transition: width 0.22s ease, min-width 0.22s ease; overflow: hidden; min-width: 240px; }
body.sidebar-collapsed #sidebar {
  width: 0;
  min-width: 0;
  border-right: none;
}
body.sidebar-collapsed #menu-btn { display: flex; }

/* ---------- main ---------- */

#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* 「最新まで移動」を会話の上に浮かせるため */
  position: relative;
}

/* ホームでは上の帯を空にする。⚠️ 帯自体は残すこと——狭い画面では
   サイドバーを開く釦がここにしかない(2026-08-23、湊さん) */
body.home-open #project-title,
body.home-open #title-menu,
body.home-open #status-chip,
body.home-open #skill-menu { display: none; }
body.home-open #topbar { border-bottom: 0; background: transparent; backdrop-filter: none; }

/* 量子開発の画面では、道具の選択を出さない（窓口に道具は関係ない） */
/* ---------- 不具合の報告（会話の中の吹き出し） ---------- */
/* ⚠️ モーダルではなく会話に出す。送った内容も返事も同じ場所に並ぶ */
/* ⚠️ 地に色を敷きすぎないこと。--warn は明色 #96670a / 暗色 #d9a441 と
   明度が大きく違い、濃く敷くと片方で文字が沈む(2026-08-24、統括の指摘)。
   **地は薄く、区別は左の罫で**つける */
.debug-compose {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: 4px 12px 12px 4px;
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
  color: var(--text);
}
/* ⚠️ 見出しは主役でない。本文(14px)より小さく淡くする(2026-08-24、湊さん) */
.debug-compose .dh { font-size: 11px; font-weight: 400; color: var(--muted);
  margin-bottom: 4px; letter-spacing: 0.02em; }
.debug-compose .dn { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.debug-compose textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px;
}
.debug-compose .da { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
/* ⚠️ 小さい文字は地との差が出にくい。--accent をそのまま敷くと
   白文字で 2.5:1 しか出なかった(実測)。少し沈めた青にする */
.debug-compose .da button {
  padding: 5px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 78%, #000);
  background: color-mix(in srgb, var(--accent) 78%, #000);
  color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.debug-compose .da button.ghost {
  background: transparent; color: var(--text); font-weight: 400;
  border-color: var(--border);
}
/* 報告と返事。色を変えて普通の発言と区別する */
.debug-head {
  display: flex; align-items: baseline; gap: 8px;
  /* ⚠️ --faint は明色で 3.2:1 しか出ない(実測)。--muted にする。
     ⚠️ 太字にしないこと——**色が付いているので、それだけで分かる**
     (2026-08-24、湊さん)。ラベルで主張させない */
  font-size: 11px; font-weight: 400; color: var(--muted); margin: 0 0 4px;
}
.debug-head.mine { justify-content: flex-end; }
/* 報告の状態。⚠️ 主張しすぎない——本文が主役 */
.rep-state {
  padding: 1px 7px; border-radius: 999px;
  font-size: 10px; line-height: 15px;
  border: 1px solid var(--border); color: var(--muted);
}
.rep-state:empty { display: none; }
.rep-state.g { border-color: var(--warn); color: var(--warn); }   /* 確認中 */
.rep-state.a { border-color: var(--accent); color: var(--accent); } /* 返答あり */
.debug-head .st {
  padding: 1px 7px; border-radius: 999px; font-size: 10px; line-height: 15px;
  color: #fff; font-weight: 600;
  background: color-mix(in srgb, var(--muted) 72%, #000);
}
.debug-head .st.done { background: color-mix(in srgb, var(--accent) 78%, #000); }
.debug-head .st.wontfix { background: var(--faint); }
/* 報告の吹き出し。⚠️ 地は薄く保ち、左の罫で普通の発言と区別する */
/* 報告の吹き出しは**茶色のまま**。分かりやすいと言われている(2026-08-24、湊さん)。
   ⚠️ 直すのは「文字が読めるか」であって、色を消すことではない。
   地は --warn を混ぜて残し、**文字色を var(--text) にする**——
   --text は明暗で反転するので、どちらでも地との差が出る。
   (以前は --user-bubble-text の白のままで、明色の薄茶に白が乗って沈んでいた) */
.bubble.user.debug {
  background: color-mix(in srgb, var(--warn) 20%, var(--surface));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
  border-right: 3px solid var(--warn);
}
/* 返事。⚠️ 縦のバーは残すこと——「引用みたいで分かりやすい」と
   言われている(2026-08-24、湊さん)。少し太くして伸ばす */
.debug-msg {
  padding: 10px 14px; border-left: 3px solid var(--warn); color: var(--text);
  font-size: 14px; line-height: 1.7; white-space: pre-wrap;
}

.debug-reply-btn {
  margin: 6px 0 0 17px;
  padding: 3px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit; font-size: 11px; line-height: 16px; cursor: pointer;
}
.debug-reply-btn:hover { color: var(--warn); border-color: var(--warn); }

/* ボタンの右に出すキー。⚠️ ラベルより目立たせない */
.kbd {
  margin-left: auto;
  padding-left: 12px;
  font-size: 10px;
  color: var(--faint);
  font-family: ui-monospace, "SF Mono", "Noto Sans Mono CJK JP", monospace;
  white-space: nowrap;
}
/* ⚠️ display を書いたら hidden の打ち消しも必ず足す(今日3回目の同じ穴) */
#debug-menu-item { display: flex; align-items: center; }
#debug-menu-item[hidden] { display: none; }
.report-link .kbd { margin-left: 6px; padding-left: 0; }

/* 新着のお知らせ。⚠️ 読んでいないものだけ印を付ける */
.feed-row.unread .ttl { font-weight: 600; }
.feed-row.unread::after {
  content: "新着";
  flex: none;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  line-height: 15px;
}
/* ⚠️ ロゴの点は 2026-09-05 に外した（報告 1788568591）。
   `#brand-logo { position: relative; }` は他で使うので残す */
#brand-logo { position: relative; }

/* 通知の種類のトグル。⚠️ ブラウザの許可とは別物なので、未許可だと薄く出す */
#push-kinds { padding: 4px 0 6px; border-top: 1px solid var(--border); }
#push-kinds[hidden] { display: none; }
.pk-note { padding: 4px 14px; font-size: 11px; color: var(--warn); }
.pk-row {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 14px; font-size: 12px; color: var(--text); cursor: pointer;
}
.pk-row span { flex: 1; }
.pk-row.off { color: var(--faint); cursor: default; }
.pk-row:hover:not(.off) { background: var(--surface-2); }

/* 外部の新着。⚠️ 中身が主役、リンクは控えめ */
.feed-item {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px 12px 12px 4px;
  background: var(--surface);
}
.fi-title { font-size: 14px; font-weight: 600; color: var(--text); }
.fi-flag {
  flex: none; white-space: nowrap;   /* ⚠️ 2行に折れると読みにくい(実測) */
  margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--warn); color: var(--warn);
  font-size: 10px; font-weight: 400; vertical-align: middle;
}
.fi-meta { margin-top: 3px; font-size: 11px; color: var(--muted); }
.fi-body { margin-top: 8px; font-size: 13px; line-height: 1.75; color: var(--text); white-space: pre-wrap; }
.fi-body.clipped {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fi-more {
  margin: 4px 0 0; padding: 0; border: 0; background: transparent;
  color: var(--accent); font: inherit; font-size: 11px; cursor: pointer;
}
.fi-link {
  /* ⚠️ 「つづきを読む」と並ぶので間隔を空ける(実測でくっついていた) */
  display: inline-block; margin: 8px 0 0 14px;
  font-size: 11px; color: var(--faint); text-decoration: none;
}
.fi-link:hover { color: var(--accent); text-decoration: underline; }

/* 畳める枠。⚠️ 畳んでいても新着の数は見える */
.home-block h2 .fold {
  padding: 0; border: 0; background: transparent; color: inherit;
  font: inherit; cursor: pointer;
}
.home-block h2 .fold::before {
  content: "▾"; display: inline-block; width: 12px;
  font-size: 9px; color: var(--faint); transition: transform 0.15s;
}
.home-block.folded h2 .fold::before { transform: rotate(-90deg); }
.home-block h2 .fold-badge {
  margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 10px; line-height: 15px;
}
.home-block.folded .feed-row { display: none; }

/* 行を開いてその場で読む。⚠️ 外へ飛ばさない */
.feed-entry { border-radius: 8px; }
.feed-row.shown { background: var(--surface-2); }
.feed-open {
  padding: 2px 12px 10px 46px;
  border-left: 2px solid var(--border);
  margin: 0 0 6px 12px;
}
.feed-open[hidden] { display: none; }
.feed-open .fi-meta { margin: 0 0 6px; }
.feed-open .fi-body { margin: 0; font-size: 13px; }
.feed-open .fi-link { margin-top: 8px; }
.home-block.folded .feed-entry { display: none; }

/* サイドバーの一覧ページへの入り口。⚠️ 他のリンク(mcp)と体裁を揃える */
#side-feeds { display: flex; flex-direction: column; }
.side-feed {
  /* ⚠️ **mcp と同じ値にすること。**目分量で似せると揃わない。
     実測(2026-08-24、報告 1787559031): mcp は 図左20/字左41/高35、
     こちらは 14/38/31 でずれていた。#site-links a と同じ
     gap 7px・margin 0 10px 4px・padding 8px 10px に合わせる */
  text-decoration: none;
  display: flex; align-items: center; gap: 7px;
  margin: 0 10px 4px; padding: 8px 10px;
  border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  border-radius: 8px;
}
.side-feed svg { flex: none; }
.side-feed span:first-child { flex: 1; }
.side-feed:hover { background: var(--surface-2); color: var(--text); }
.side-badge {
  flex: none; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 10px; line-height: 15px;
}

/* アーカイブの中身。⚠️ 体裁は #project-list と共有(上のセレクタで両方に効く)。
   ここでは「アーカイブ済みの下にぶら下がっている」ことだけ示す */
#archive-list { flex: none; max-height: 40vh; padding-left: 18px; }
#archive-list[hidden] { display: none; }

/* 回答の下の小さな行。⚠️ 主張しすぎない——本文が主役 */
.answer-bar {
  display: flex; align-items: center; gap: 12px;
  margin-top: 6px; font-size: 11px;
}
.ab-copy {
  display: flex; align-items: center;
  padding: 0; border: 0; background: transparent;
  color: var(--faint); cursor: pointer;
}
.ab-copy:hover { color: var(--accent); }
.ab-copy.done { color: var(--accent); }   /* 押した直後だけ */
.ab-at { color: var(--faint); }
.answer-bar .report-link { margin-left: auto; }

/* ---------- 文を出す入れ物は、必ず折り返す ---------- */
/* ⚠️ **1クラスずつ直さないこと。**空白の無い長い文字列(URL・識別子)は
   pre-wrap や nowrap だけでは折り返さず、入れ物を突き破ってページごと
   横に伸びる。2026-08-24 に3回報告された(利用者の発話 → インライン数式 →
   窓口の返事)。同じ形が残っている所をまとめてここで塞ぐ。
   ⚠️ **新しい吹き出しを足したら、このリストにも足すこと。**
   ⚠️ nowrap が要る要素(.math)はここに入れない——あちらは
   「途中で改行しない」が意図なので、代わりに自分の中でスクロールさせる。
   ⚠️ break-all にしないこと。普通の単語まで途中で切れる。
   anywhere は「切らないと収まらないものだけ」切る */
.bubble,
.assistant-msg,
.reply-row .rb,
.debug-msg,
.debug-compose .dn,
.fi-body,
.fi-title,
.home-row .s,
.rep-state { overflow-wrap: anywhere; }

/* ---------- ホーム画面 ---------- */
/* ロゴを押すと出る。⚠️ 入力を一番上に置くこと——お知らせを読ませるための
   画面ではなく、**すぐ書き始められる**ための画面(2026-08-23、湊さん) */
#home {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: calc(56px + 24px) 20px 40px;
}
#home[hidden] { display: none; }
#home-inner { max-width: 680px; margin: 0 auto; }
#home-greet {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}
#home-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
#home-form:focus-within { border-color: var(--accent); }
#home-q {
  flex: 1;
  min-width: 0;
  max-height: 180px;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 1.6;
}
#home-send {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
#home-send:disabled { opacity: 0.4; cursor: default; }
.home-block { margin-top: 28px; }
.home-block h2 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.home-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.home-row:hover { background: var(--surface-2); }
.home-row .t { font-size: 14px; color: var(--text); }
.home-row .s { font-size: 12px; color: var(--faint); margin-top: 2px; }
.home-row .s .new {
  color: var(--accent);
  font-weight: 600;
  margin-right: 6px;
}
/* 配信の欄。⚠️ 小さく保つこと——ホームは書き始めるための画面 */
.home-block h2 { display: flex; align-items: baseline; gap: 8px; }
.home-block h2 .more {
  /* ⚠️ ボタンに見せない。枠も地色も持たせず、文字だけにする
     (2026-08-24、湊さん「ボタンのデザインになっていて違和感がある」) */
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 400;
  color: var(--faint);
  text-decoration: none;
  cursor: pointer;
}
.home-block h2 .more:hover { color: var(--accent); }
.feed-row {
  /* ⚠️ button でも a でも同じ見た目にすること。既定のままだと button に
     枠2px・灰色の背景・別のフォント・中央揃えが付き、「続きから」の行だけ
     枠付きで浮く(2026-08-24、湊さんの「枠とかいらない」)。実測で確認 */
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
}
.feed-row:hover { background: var(--surface-2); }
/* 続きから: 題は左、件数と時刻は右へ。1行に収める */
.feed-row .meta {
  flex: none;
  padding-left: 12px;
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
}
.feed-row .at {
  flex: none;
  width: 34px;
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.feed-row .meta.when { color: var(--faint); margin-left: auto; }        /* いつ・どれだけ */
.feed-row .meta.go { color: var(--accent); padding-left: 10px; margin-left: 0; }
.feed-row:hover .meta.go { text-decoration: underline; }
.feed-row .ttl {
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-empty { padding: 10px 12px; font-size: 13px; color: var(--faint); }
/* ロゴは押せる。ホームへ戻る入口 */
#brand-logo { cursor: pointer; }

/* ---------- 見るための窓（右から出る） ---------- */
/* 今後、レポートやサイトをここに出す。⚠️ 会話を隠さないこと——広い画面では
   横に並べて、話しながら見られるようにする(2026-08-23、湊さんの指示) */
#viewer {
  flex: none;
  width: 420px;
  max-width: 46vw;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
}
#viewer[hidden] { display: none; }
#viewer-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--border);
}
#viewer-title {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#viewer-open {
  flex: none;
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
#viewer-open[hidden] { display: none; }
#viewer-close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
#viewer-close:hover { background: var(--surface-2); color: var(--text); }
#viewer-body { flex: 1; min-height: 0; overflow: auto; }
#viewer-body iframe { width: 100%; height: 100%; border: 0; display: block; }
#viewer-body .viewer-doc { padding: 14px 16px; font-size: 14px; line-height: 1.7; }
.viewer-empty { padding: 18px 16px; font-size: 13px; color: var(--faint); }
#viewer-scrim[hidden] { display: none; }

/* 上の方を読んでいるときだけ出る。入力欄のすぐ上に浮かせる */
#to-latest {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  box-shadow: var(--shadow);
  z-index: 10;
  animation: fadeUp 0.18s ease;
  transition: color 0.15s, border-color 0.15s;
}
#to-latest:hover { color: var(--accent); border-color: var(--accent); }
#to-latest[hidden] { display: none; }

#topbar {
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  /* 下の会話がうっすら透ける(community のヘッダーと同じ作り)。
     ⚠️ 透かすには #chat と重なっている必要がある。並んでいるだけだと
        何も透けないので、topbar を重ね、#chat の上に同じ高さの余白を足す */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* topbar が浮いたぶん、下の中身を押し下げる */
#main > #chat { padding-top: calc(56px + 20px); }

#project-title { font-size: 13.5px; font-weight: 500; color: var(--muted); }
/* 畳んだとき、矢印とタイトルの間は、開いた状態のサイドバーとタイトルの間
   (topbar の padding = 24px)と同じにする */
body.sidebar-collapsed #menu-btn { margin-right: 24px; }

#status-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", "Noto Sans Mono CJK JP", monospace;
}

/* ---------- status indicators ---------- */

.status-dot {
  display: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.working { display: inline-block; background: var(--accent); animation: pulse 0.9s ease-in-out infinite; }
.status-dot.attention { display: inline-block; background: var(--warn); }
.status-dot.done { display: inline-block; background: var(--ok); }

.spinner {
  width: 11px;
  height: 11px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 有効なスキルを上部に留めておく。押すと一覧が開く */
#skill-pins {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.skill-pin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  max-width: 160px;
  padding: 3px 9px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  /* ⚠️ 行の高さは端数にしないこと。11px × 1.5 = 16.5px で行の箱が
     半ピクセルになり、丸めが上に寄って文字が1pxほど上にずれて見える
     (2026-08-23、湊さんの指摘)。16px なら 3+16+3+枠2 = 24px で全部整数 */
  line-height: 16px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s;
}
.skill-pin:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
/* 使っている道具の名前。色は青のまま、太さで見やすく
   (赤も試したが大げさだった。2026-08-23) */
.skill-pin.on { font-weight: 600; }
/* 1つも入っていないときの「スキル」。控えめに */
.skill-pin.empty {
  border-color: var(--border);
  background: transparent;
  color: var(--muted);
}
.skill-pin.empty:hover { color: var(--text); border-color: var(--faint); background: transparent; }

/* ---------- skill dropdown ---------- */

#skill-menu { position: relative; flex-shrink: 0; margin-left: 12px;
  display: flex; align-items: center; }
#skill-dropdown {
  display: none;
  position: absolute;
  top: 34px;
  right: 0;
  width: 268px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 30;
}
#skill-menu.active #skill-dropdown { display: block; }
.skill-dd-title {
  font-size: 11px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px 8px;
}
.skill-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 8px;
}
.skill-item:hover { background: var(--surface-2); }
/* 選ぶ形の行。ボタンだが、見た目は今までの行のまま */
.skill-item.pick {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  align-items: center;
}
.skill-item.pick:hover:not(:disabled) { background: var(--surface-2); }
.skill-item.pick:disabled { cursor: default; }
/* チェックは選ばれている行にだけ出す。場所は常に取っておき、
   選び直しても行の幅が動かないようにする */
.skill-item .check {
  flex: none;
  width: 16px;
  height: 16px;
  position: relative;
}
.skill-item.chosen .check::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.skill-item.chosen .nm { color: var(--accent); font-weight: 600; }
/* 「道具を1つ選ぶ」欄と「作るもの」欄の区切り */
/* 作ったページの出し方: 新しいタブが主、横の窓が従 */
.md-page { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.md-view {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 16px;
  cursor: pointer;
}
.md-view:hover { color: var(--accent); border-color: var(--accent); }

/* 「どれでもない」の行。言葉を置くと浮くので横線1本で表す */
.skill-item .dash {
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--faint);
  vertical-align: middle;
}
.skill-item.chosen .dash { background: var(--accent); height: 2px; }

.skill-sep {
  margin: 10px 8px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
#tool-block[hidden] { display: none; }
.skill-item .info { flex: 1; min-width: 0; }
/* 名前は左、説明の ? は右へ寄せる */
.skill-item .nm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}
.skill-item .help {
  flex: none;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--faint);
  font-size: 10px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.skill-item .help:hover { color: var(--accent); border-color: var(--accent); }
.skill-item .help.open {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.skill-item .ds {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.55;
  animation: fadeUp 0.15s ease;
}
.skill-item .ds[hidden] { display: none; }
.skill-item.disabled .nm { color: var(--faint); }
.skill-item .lock { font-size: 11px; color: var(--faint); margin-top: 3px; }

/* toggle switch */
.switch {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  margin-top: 1px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 20px;
  transition: background 0.15s;
  cursor: pointer;
}
.switch .track::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s;
}
.switch input:checked + .track { background: var(--accent-strong); }
.switch input:checked + .track::before { transform: translateX(14px); }
.switch input:disabled + .track { opacity: 0.4; cursor: not-allowed; }

#chat {
  flex: 1;
  overflow-y: auto;
  /* 端まで来たときにスクロールが親へ伝わると、引っ張り更新やゴムのような
     跳ね返りが起きて画面がずれる */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* ⚠️ display を書いた要素は hidden 属性が効かない。#ctx-meter・#inputbar と
   同じ穴。ホームを出しても会話が下半分に残り、画面が割れていた
   (2026-08-23、湊さん) */
#chat[hidden] { display: none; }
#chat > * { width: 100%; max-width: 720px; }

/* ⭐ 描けなかった数式の命令。⛔ **消さずに、薄く出す**（2026-09-10）。
   ⚠️ 消すと「何かあった」ことまで消え、⛔ **読み手が気づけません。** */
.tex-unknown { opacity: 0.45; font-size: 0.9em; }

/* ⭐ 一覧の中の「部屋」（2026-09-10、湊さん「⛔ プロジェクトの一つに入れちゃって」）。
   ⚠️ 会話ではなく**別の場所へ行く行**なので、⭐ ごく薄く地を変えて見分ける。
   ⛔ 派手にしない（⚠️ 「少し」と仰っています）。 */
/* ⭐ 見た目は会話と揃える（⛔ 湊さん「インターフェースも揃えて」）。
   ⚠️ ⛔ **中身が違うことに気づける印**は、⭐ 開いた先の見出し（「部屋（3人）」）で残す。
   ⛔ 一覧では**ごく薄く**だけ地を変える（⚠️ 並びから浮かせない）。 */
#project-list li.room-row {
  background: linear-gradient(rgba(120, 150, 200, 0.07), rgba(120, 150, 200, 0.07));
}

/* ⭐ 一般と専門を分ける横線（2026-09-10、湊さん「⛔ 上に置いて、横線で区切る」）。
   ⚠️ 言葉にしない——⛔ そこだけ説明文の調子になって浮く（2026-08-23 の教訓）。
   ⛔⛔ **名前をぶつけないこと。**⚠️ 最初 `.skill-sep` にしたが、⭐ 同じ名前が
   既にあり（**見出し付きの区切り**・`border-top` を持つ）、⛔ **両方 効いて
   「1px の枠線 ＋ 1px の帯」＝ 2 本分の太さ**になった（⚠️ 湊さん「⛔ 横線が太すぎる」）。 */
.skill-split {
  height: 1px;
  margin: 6px 10px;
  background: var(--line, rgba(127, 127, 127, 0.25));
}

/* ⭐ 走っている仕事があるときだけ出す帯（2026-09-09）。
   ⛔ **無言のまま待たせない。**⚠️ 仕事は止まっていないのに、
   画面が黙っているだけで「中断された」と読まれた（湊さんの報告）。 */
.running-note {
  margin: 8px 0 4px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--panel, rgba(127, 127, 127, 0.08));
  color: var(--faint);
  font-size: 13px;
  text-align: center;
}

.chat-hint {
  margin-top: 24vh;
  text-align: center;
  font-size: 13px;
  color: var(--faint);
  animation: fadeUp 0.4s ease;
}

/* ---------- messages ---------- */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.turn { margin-bottom: 26px; animation: fadeUp 0.18s ease; }

.user-row { display: flex; justify-content: flex-end; }
.bubble.user {
  display: inline-block;
  background: var(--user-bubble);
  color: var(--user-bubble-text);
  padding: 10px 15px;
  border-radius: 16px 16px 4px 16px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  /* ⚠️ pre-wrap は改行と空白を保つだけで、**空白の無い長い文字列は
     折り返さない。**URL を貼ると箱から突き抜けて横幅が崩れた
     (2026-08-24、報告 1787489775・1787524584。実測で箱272pxに対し
      中身509px)。回答側(.assistant-msg)と作業ログ(.trace-line)は既に
     対策済みで、利用者の発話だけが取り残されていた。
     ⚠️ break-all にしないこと——普通の単語まで途中で切れる。
     anywhere なら「切らないと収まらないもの」だけ切る */
  overflow-wrap: anywhere;
  max-width: 72%;
}

.assistant-msg {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text);
  /* Markdown を組み立てて入れるので pre-wrap は使わない(改行は <br>/<p> で表現) */
  word-break: break-word;
}
.assistant-msg > *:first-child { margin-top: 0; }
.assistant-msg > *:last-child { margin-bottom: 0; }
.assistant-msg p { margin: 0 0 0.9em; }
.assistant-msg h2, .assistant-msg h3, .assistant-msg h4,
.assistant-msg h5, .assistant-msg h6 {
  margin: 1.4em 0 0.5em;
  line-height: 1.4;
  font-weight: 600;
}
.assistant-msg h2 { font-size: 1.24em; }
.assistant-msg h3 { font-size: 1.12em; }
.assistant-msg h4 { font-size: 1.04em; }
.assistant-msg h5, .assistant-msg h6 { font-size: 1em; color: var(--muted); }
.assistant-msg ul, .assistant-msg ol { margin: 0 0 0.9em; padding-left: 1.5em; }
.assistant-msg li { margin: 0.25em 0; }
.assistant-msg code {
  font-family: ui-monospace, "SF Mono", "Noto Sans Mono CJK JP", monospace;
  font-size: 0.88em;
  background: var(--surface-2);
  border-radius: 5px;
  padding: 0.12em 0.35em;
}
.assistant-msg pre {
  margin: 0 0 0.9em;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  /* 長い行は折り返さず横スクロール。折り返すとコードが読みにくい */
  overflow-x: auto;
}
.assistant-msg pre code { background: none; padding: 0; font-size: 0.86em; }
.assistant-msg blockquote {
  margin: 0 0 0.9em;
  padding: 0.1em 0 0.1em 12px;
  border-left: 3px solid var(--border);
  color: var(--muted);
}
.assistant-msg hr { border: none; border-top: 1px solid var(--border); margin: 1.3em 0; }
.assistant-msg a { color: var(--accent); }

/* ---------- 数式 ---------- */
/* 外部ライブラリを使わず自前で組むので、完全な組版ではなく「読める」形を狙う */
.math {
  font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", Georgia, serif;
  font-size: 1.05em;
  /* ⚠️ nowrap だけだと、長い式が吹き出しを突き破ってページごと横に伸びる
     (2026-08-24、報告 1787606627。412px で48本中2本が幅を超えた)。
     式の途中で改行しない意図は保ったまま、**長すぎるものだけ自分の中で
     スクロールさせる**。.math-block は元から overflow-x があり正しい作り */
  white-space: nowrap;
}
/* ⚠️ **短い式は素の inline のままにすること。**inline-block にすると
   行の高さが 17px → 28px に変わり、本文に混ざる式の見た目が崩れる
   (2026-08-24、実測)。長い式だけ中でスクロールさせる */
.math.math-long {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  vertical-align: bottom;
}
.math-block {
  display: block;
  margin: 0.8em 0;
  text-align: center;
  font-size: 1.15em;
  overflow-x: auto;
}
.math sup, .math sub { font-size: 0.72em; }
/* 分数は縦積み。
   ⚠️ vertical-align に固定値(em)を入れると、行から落ちて見える。
   middle にして「要素の中心」を文字の中心に合わせるのが素直。
   行が膨らみすぎないよう、分子分母は行間を詰めて少し小さくする。 */
.frac {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  text-align: center;
  margin: 0 0.18em;
  font-size: 0.88em;
  line-height: 1.12;
}
.frac .num { padding: 0 0.3em; border-bottom: 1px solid currentColor; }
.frac .den { padding: 0 0.3em; }
/* 根号や上下付きも同じ考えで中心に合わせる */
.math .sqrt { vertical-align: middle; }
/* 根号は √ に上線を付けて中身を囲う */
.sqrt { white-space: nowrap; }
.sqrt .rad {
  border-top: 1px solid currentColor;
  padding: 0 0.15em 0 0.1em;
  margin-left: -0.1em;
}
/* 表は幅を超えたら横に送る。画面ごと横スクロールさせない */
.assistant-msg table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 0.9em;
  font-size: 0.94em;
}
.assistant-msg th, .assistant-msg td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
}
.assistant-msg th { background: var(--surface-2); font-weight: 600; }

/* 実行の証跡。agent が実際にツールを呼んだときだけ出る */
.runs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  font-size: 11.5px;
}
.run-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border: 1px solid var(--ok);
  border-radius: 999px;
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  text-decoration: none;
  font-family: ui-monospace, "SF Mono", "Noto Sans Mono CJK JP", monospace;
  white-space: nowrap;
}
.run-chip:hover { background: color-mix(in srgb, var(--ok) 22%, transparent); }
.run-chip.bad {
  border-color: var(--error);
  color: var(--error);
  background: color-mix(in srgb, var(--error) 12%, transparent);
}
.runs.unverified {
  color: var(--warn);
  font-family: inherit;
}

/* 検索したときの出典。回答の下に控えめに並べる */
.sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 11.5px;
}
.sources-label {
  color: var(--faint);
  font-family: ui-monospace, "SF Mono", "Noto Sans Mono CJK JP", monospace;
}
.sources a {
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.sources a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- trace ---------- */

.trace {
  margin: 10px 0;
  font-family: ui-monospace, "SF Mono", "Noto Sans Mono CJK JP", monospace;
  font-size: 12px;
  animation: fadeUp 0.18s ease;
}
.trace summary {
  cursor: pointer;
  color: var(--faint);
  list-style: none;
  user-select: none;
  transition: color 0.15s;
  display: flex;
  align-items: baseline;
  gap: 8px;
  /* 畳んだ状態でこの行だけを読むので、中身(12px)より少し大きくする */
  font-size: 13px;
}
.trace summary:hover { color: var(--muted); }
.trace summary::-webkit-details-marker { display: none; }
.trace summary::before { content: "\25B8"; flex: none; }
.trace[open] summary::before { content: "\25BE"; }

/* 今どこを実行しているか。差し替わるときだけフェードする */
.trace-phase {
  flex: none;
  transition: opacity 0.16s ease;
  /* 文言の長短で右の数字が動かないよう、一番長いラベル(タイトル生成中)ぶん確保する */
  min-width: 7em;
}
.trace-phase.swap { opacity: 0; }
.trace-meta { opacity: 0.7; }

@keyframes pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
.trace.live summary::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  align-self: center;
  /* 行ボックスの中央は、小文字が並ぶ見た目の中心より上に来る。
     計算上は中央でも上にズレて見えるので、1px 下げて光学的に合わせる。 */
  position: relative;
  top: 1px;
  animation: pulse 1.1s ease-in-out infinite;
}

.trace-body {
  margin: 8px 0 0 5px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.6;
}
/* ⚠️ break-all にしないこと。**キーの途中で折り返されて余計に読めない。**
   anywhere なら、切れ目が無いとき(base64 など)だけ途中で折る。 */
.trace-line { word-break: normal; overflow-wrap: anywhere; }
.trace-label { color: var(--faint); }
.trace-payload {
  /* 整形した改行と字下げを潰さない */
  white-space: pre-wrap;
  margin: 2px 0 0 8px;
  padding: 6px 8px;
  background: var(--surface);
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", "Noto Sans Mono CJK JP", monospace;
  font-size: 11px;
  line-height: 1.5;
  max-height: 320px;
  overflow: auto;
}
.trace-more {
  margin: 3px 0 0 8px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}
.trace-more:hover { background: var(--surface-2); color: var(--text); }
.trace-line.format_error { color: var(--error); }
.trace-line.truncated { color: var(--warn); }

/* ---------- input ---------- */

#inputbar {
  flex-shrink: 0;
  /* ホームバー(iPhone)やジェスチャーバー(Android)に潜り込ませない */
  padding: 14px 24px calc(18px + var(--safe-b));
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
}
/* ⚠️ display を書いた要素は hidden 属性が効かない。ここが抜けていて、
   ホームを出しても入力欄が下に残り、画面が上下に割れていた
   (2026-08-23、湊さんの「上半分下半分に分かれてる」)。#ctx-meter と同じ穴 */
#inputbar[hidden] { display: none; }
.input-col {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.input-inner {
  display: flex;
  gap: 6px;
  width: 100%;
  align-items: flex-end;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 6px 6px 6px 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input-inner:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
#model-badge {
  /* 送信ボタンの真下だと押し間違えるので左寄せ */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* モデル選択。押すと上に開く(画面の下端にあるため) */
#model-menu { position: relative; }
#model-btn {
  padding: 3px 12px;
  border-radius: 999px;   /* 検索窓・アカウントまわりと同じ半円の角丸 */
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", "Noto Sans Mono CJK JP", monospace;
  font-size: 11px;
  /* ⚠️ ここは 1.6 のままにすること。等幅フォントは字の入り方が違い、
     整数(18px)にすると逆に1px上へ寄る。実測(headless Chrome)で
     1.6 → 上6.00/下6.59、18px → 上6.00/下7.00。2026-08-23 */
  line-height: 1.6;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
#model-btn:hover:not(:disabled) { color: var(--text); border-color: var(--faint); }
#model-btn:disabled { opacity: 0.45; cursor: default; }
#model-menu.active #model-btn { color: var(--accent); border-color: var(--accent); }

#model-dropdown {
  display: none;
  position: absolute;
  bottom: 30px;          /* 上に開く */
  left: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 5px;
  z-index: 30;
}
#model-menu.active #model-dropdown { display: block; }

.model-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-family: ui-monospace, "SF Mono", "Noto Sans Mono CJK JP", monospace;
  font-size: 12px;
  cursor: pointer;
}
.model-item:hover:not(:disabled) { background: var(--surface-2); }
.model-item.selected { color: var(--accent); background: var(--accent-soft); }
.model-item:disabled { opacity: 0.4; cursor: default; }

/* ---------- 文脈の残量 ---------- */
/* 数字は出さず、灰色の溝に青→赤の帯で示す。押すと古いやり取りを畳む */
#ctx-meter {
  display: inline-flex;
  align-items: center;
  padding: 4px 2px;          /* 掴みやすいよう上下に余白だけ持たせる */
  border: none;
  background: transparent;
  cursor: pointer;
  --pct: 0%;
  --tone: #4a8cff;
  transition: opacity 0.15s;
}
/* ⚠️ display を書いた要素は、hidden 属性が効かなくなる。
   ここが抜けていて、**会話がまだ無いのに空のメーターが1本出ていた**
   (2026-08-23、湊さんの「トップページがバグってる」)。
   hidden を使う要素に display を足したら、必ずこの1行も足すこと */
#ctx-meter[hidden] { display: none; }
#ctx-meter:hover:not(:disabled) { opacity: 0.75; }
#ctx-meter:disabled { cursor: default; opacity: 0.5; }

.ctx-bar {
  position: relative;
  width: 52px;
  height: 5px;               /* 細めだが、指で狙える程度に */
  border-radius: 999px;      /* 端は半円 */
  background: var(--surface-2);
  overflow: hidden;
}
.ctx-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct);
  border-radius: 999px;
  background: var(--tone);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s;
}
/* 満杯に近いときだけ、静かに脈打たせて気づかせる */
#ctx-meter.full .ctx-fill { animation: ctxPulse 1.6s ease-in-out infinite; }
@keyframes ctxPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* 畳んでいる間は、バーが少しずつ縮む(圧縮されて短くなる様子)。
   ⚠️ 流れる(まだらの)アニメはやめた(2026-08-23、湊さんの指示)。
   幅を右端から詰めていき、色も落ち着ける。実際に畳み終わると
   selectProject で 0 から本来の残量に描き直される */
#ctx-meter.busy .ctx-fill {
  background: var(--tone);
  animation: ctxShrink 1.4s ease-in-out infinite;
}
@keyframes ctxShrink {
  0%   { width: 100%; opacity: 1; }
  70%  { width: 18%;  opacity: 0.85; }
  100% { width: 100%; opacity: 1; }
}

#question {
  flex: 1;
  padding: 7px 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  resize: none;
  outline: none;
  max-height: 160px;
}
/* 送信ボタンは枠の中に収め、控えめな色のアイコンに */
#send {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#send:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
#send:active:not(:disabled) { transform: scale(0.94); }
#send:disabled { opacity: 0.4; cursor: default; }

/* ---------- mobile ---------- */

@media (max-width: 700px) {
  #menu-btn { display: flex; }

  /* 狭い画面では横に並べる幅が無いので、会話に重ねて出す */
  #viewer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 88vw;
    max-width: none;
    transform: translateX(100%);
    transition: transform 0.2s ease;
    z-index: 20;
    box-shadow: var(--shadow-side);
  }
  body.viewer-open #viewer { transform: translateX(0); }
  body.viewer-open #viewer-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--backdrop);
    z-index: 15;
  }

  /* 16px 未満だと、入力欄をタップしたときにブラウザが勝手に拡大する */
  #question { font-size: 16px; }

  /* ---------- スマホは「一覧 → 会話」の2画面にする ----------
     ⚠️ 引き出しが少し出てくる形をやめた（2026-08-28、湊さん
     「LINE のインターフェースに近くして、一覧からプロジェクトを選ぶと
     　中で会話が始まる。戻るボタンやブラウザの戻るで一覧へスライドで戻る」）。
     ⚠️ **PC は現状のまま**（湊さんの指示）。ここは 700px 以下だけ。
     一覧が下の層、会話がその上に右から重なる。戻ると右へ滑って外れる */
  #sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    /* 引き出しではなく**下の層**。常にそこにある */
    transform: none;
    z-index: 5;
    /* ⚠️ **一覧も一緒に動かす。**会話だけ動かすと、行きも帰りも
       「右から出て右へ消える」に見えて、向きの違いが感じられない
       （2026-08-28、湊さん「行きと帰りで逆向きのスライドに」）。
       一覧を少しだけ左へ送ると、行き＝左へ送られる／帰り＝左から戻る、
       という対になる。送りすぎない——全部動かすと2枚が別々に滑って騒がしい */
    transition: transform 0.24s ease;
  }
  body.chat-open #sidebar { transform: translateX(-22%); }
  @media (prefers-reduced-motion: reduce) {
    #sidebar { transition: none; }
  }
  #main {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: var(--bg);
    transform: translateX(100%);
    transition: transform 0.24s ease;
    /* ⚠️ 会話を開いていない間は触らせない。透明な板が一覧に被さって
       「押しても反応しない」になる */
    visibility: hidden;
  }
  body.chat-open #main {
    transform: translateX(0);
    visibility: visible;
    box-shadow: var(--shadow-side);
  }
  /* ⚠️ 動きを減らす設定の人には滑らせない */
  @media (prefers-reduced-motion: reduce) {
    #main { transition: none; }
  }
  /* 一覧が下の層になったので、覆いは要らない */
  #backdrop { display: none !important; }
  /* ⚠️ 折りたたみは PC 用。一覧が1画面になったスマホでは意味が無く、
     戻ると紛らわしい向きの矢印が出るだけ（2026-08-28、実物を見て気づいた） */
  #collapse-btn { display: none; }
  /* 戻るボタン。⚠️ 会話を開いている間だけ矢印を左に向ける */
  body.chat-open #menu-btn svg { transform: scaleX(-1); }

  /* ⚠️ **一覧の行は指で押す大きさにする。**PC の 13px・上下 6px のままだと
     スマホでは細くて押しにくい（2026-08-28、湊さん「LINE みたいに少し縦を
     大きく」）。PC は現状のままなので、ここ（700px 以下）だけで太らせる */
  /* ---------- LINE の行（左に絵・上に題・下に前回・右に時刻） ---------- */
  #project-list li,
  #archive-list li {
    /* ⚠️ 器がすでに 10px を持っている。ここで足すと**行だけ内側**になる
       （湊さんの指摘。もとは左12px・右8pxで、周りとも左右とも食い違っていた）。
       ⚠️ 上下の余白も**行では持たない**——持つと滑る箱がその内側になり、
       上下 10px ずつ地が残って**滑らせた行だけ色が違って見える**
       （2026-08-30、実測で 44px と 64px の食い違いを確認）。
       高さは中の箱が持つ */
    padding: 0;
    gap: 12px;
    font-size: 15px;
    border-radius: 0;
    align-items: center;
  }
  .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    overflow: hidden;
  }
  .avatar .ini { font-size: 17px; font-weight: 600; color: var(--muted); }
  /* 供給元（イベント・ニュース）は、それと分かる色にする */
  .avatar.feed { background: color-mix(in srgb, var(--accent) 16%, transparent);
                 color: var(--accent); }
  .row-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;      /* ⚠️ これが無いと長い題で行が横に伸びる */
    flex: 1 1 auto;
  }
  .row-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  #project-list li .name,
  #archive-list li .name {
    font-size: 15px;
    line-height: 1.35;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .row-when {
    display: block;
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .row-sub {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    /* ⚠️ 概要は**題より弱く**。同じ濃さだと、どちらを読めばいいか分からない
       （2026-08-28、湊さん「少し色を抑えて」） */
    /* ⚠️ 変数名は必ず実在を確かめること。--text-dim は無く、
       指定が丸ごと無効になって題と同じ濃さのままだった
       （2026-08-28、実測の色で気づいた） */
    color: color-mix(in srgb, var(--muted) 78%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* ⚠️ **行と行の間に線を引かない**（2026-08-31、湊さんに確認して確定。
     「行と行の間の線を全部」）。余白だけで区切る。
     ⚠️ 線を消すと見分けが余白だけになるので、**行間を少し広げる**——
     詰まって見えないことを実物で確かめてある */
  #project-list li + li,
  #archive-list li + li { box-shadow: none; }

  /* ⚠️ **「…」は出さない**（2026-08-28、湊さん）。長押しと横スライドで
     同じことができるので、置いておくと行が狭くなるだけ。
     ⚠️ PC には残す——あちらには長押しも横スライドも無い */
  #project-list li .more,
  #archive-list li .more { display: none; }

  /* ---------- 横に滑らせて操作（2026-08-28、湊さんの指示） ---------- */
  #project-list li, #archive-list li { overflow: hidden; }
  .row-slide {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 行の高さはここが決める。64px→54px にしたら「詰まりすぎ」だったので
       +4px 戻す（2026-08-30、湊さん「3〜4ピクセルぐらい高くして」）。
       ⚠️ **高さ以外は触らない**——「全体的にはいい感じ」とのこと */
    padding: 9px 0;
    flex: 1 1 auto;
    min-width: 0;
    /* ⚠️ **行いっぱいの高さにすること。**内容の高さ(44px)しか無いと、
       行(64px)の上下 10px ずつが地のままで、**滑らせた行だけ色が違って
       見える**（2026-08-30、湊さん「手前が少し小さいボックスで白になる」。
       実測で 44px と 64px の食い違いを確認）*/
    align-self: stretch;
    /* ⚠️ 後ろの操作を隠すため、地の色を敷く。透けると2枚重なって見える */
    background: var(--bg);
    transition: transform 0.18s ease;
    will-change: transform;
    /* ⚠️ **上に載せること。**position が付いていないと、後ろに置いた
       操作（absolute）の方が上に描かれ、**全部の行に緑と赤が出たまま**に
       なる（2026-08-28、実物を見て気づいた）。滑らせて初めて見える形にする */
    position: relative;
    z-index: 1;
    /* 行いっぱいに敷く。狭いと右端から操作が覗く */
    padding-right: 4px;
  }
  li.swiped .row-slide { transform: translateX(-132px); }
  .row-actions {
    display: flex;
    position: absolute;
    /* ⚠️ **行の右隣に置く**（親＝滑る箱の中）。親ごと動くので、
       行と操作が**一体で**動く。別々に動かすと遅れて見える */
    top: 0; bottom: 0;
    left: 100%;
    /* ⚠️ **覆って隠さない。**上に地の色を敷いて隠す作りにしたら、行の
       上下の余白から緑と赤が覗いた（2026-08-28、実物で気づいた）。
       いったん**枠の外へ出しておく**（li は overflow:hidden）。
       これなら隙間から覗きようがない */
  }
  .row-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 66px;
    border: 0;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
  }
  /* アーカイブは緑、削除は赤（湊さんの指定） */
  .row-act.archive { background: #2e9e5b; }
  .row-act.delete { background: var(--danger, #d9463e); }
  .row-act:active { filter: brightness(0.9); }

  /* ⚠️ **下の固定は外す**（2026-08-28、湊さん）。イベント・量子ニュースは
     一覧の行に入ったので、同じものが2箇所にある状態だった。
     mcp は外部リンクなので、ここではなくアカウントの中から辿る */
  #site-links { display: none; }

  /* ⚠️ アカウントは**丸1つ**にする（2026-08-28、湊さん「一番下の固定の
     ところには一番左か右に丸で、クリックしたら同じようになるように」）。
     幅いっぱいの帯だと、一覧の行と見分けがつかず1件に見える。
     ⚠️ 押したときの中身（設定・通知・ログアウト）は今までと同じ */
  #sidebar-footer { padding: 8px 12px; display: flex; justify-content: flex-end; }
  #account-pill {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    background: var(--surface-2);
  }
  #account-pill #user-email, #account-pill .caret { display: none; }
  #account-pill .who { width: 20px; height: 20px; }
  /* 行が高くなったぶん、区切りが無いと塊に見える */
  #project-list li + li,
  #archive-list li + li { box-shadow: 0 -1px 0 var(--border); }
  /* ⚠️ **一覧を内側で別スクロールさせない。**PC は「一覧だけ流れて、
     リンクとアカウントは下に留まる」で正しいが、スマホでは一覧が
     1画面まるごとなので、窓の中に窓がある形になる。行を高くしたら
     7行しか見えなくなった（2026-08-28、実物を見て気づいた）。
     LINE のように**上から下まで一続きで流れる**ようにする。
     ⚠️ アカウントの行だけは下に留める（設定への入口がここにしかない） */
  /* ⚠️ **一覧の地は本文と同じ色にする。**PC は「脇の柱」なので --surface で
     区切るのが正しいが、スマホでは**一覧が1画面まるごと**なので、
     行（地の色）の周りだけ違う色が残って板が浮いて見える
     （2026-08-30、湊さん「一覧リストの裏の黒い背景いらないかも」）。
     ⚠️ 区切りの線も要らない——隣に何も無い */
  #sidebar {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
    border-right: 0;
  }
  #project-list, #archive-list { overflow: visible; flex: 0 0 auto; }
  #sidebar-footer { position: sticky; bottom: 0; background: var(--bg); }

  #new-project { padding: 14px 10px; font-size: 15px; }
  .side-feed, #archive-toggle { padding: 13px 10px; font-size: 15px; }

  #topbar { padding: 0 10px 0 6px; gap: 8px; }
  /* 幅が足りないので、留めたスキルは印だけにする */
  .skill-pin { max-width: 110px; }
  #project-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #status-chip { flex-shrink: 0; }

  #chat { padding: 16px 12px; }
  .bubble.user { max-width: 85%; }

  #inputbar { padding: 10px 12px 14px; }
  /* iOS Safariはフォント16px未満の入力にフォーカスすると自動ズームするため */
  #question { font-size: 16px; }
}

/* ---------- scrollbar ---------- */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }


/* ---------- 不具合の報告 ---------- */
/* 許可された人にだけ、設定メニューの中に出る。
   ⚠️ 会話の右下に浮かせるのはやめた。応答ごとの入口(buildReportLink)ができた後は
      役目が「特定の応答に紐づかない不具合」だけになり、常時見えている必要が無い。
      2026-08-22、デバッグ窓口と相談のうえ移した。 */

#debug-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--backdrop);
  z-index: 50;
}
#debug-modal[hidden] { display: none; }
.debug-card {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  animation: fadeUp 0.18s ease;
}
/* ⚠️ ここにあった .debug-head の15px・太字は削除した。モーダルは廃止済みで、
   後ろにあるぶん吹き出し用(上の11px)に勝っていた。**「直したのに効かない」
   ときは、まず後ろに同じセレクタが無いかを見る**(2026-08-24、統括の指摘) */
.debug-note { margin: 0 0 14px; font-size: 12px; color: var(--faint); }
.debug-card label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}
.debug-card input,
.debug-card textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;   /* スマホで勝手に拡大されないよう 16px 未満にしない値は下で上書き */
  resize: vertical;
}
.debug-card input:focus,
.debug-card textarea:focus { outline: none; border-color: var(--accent); }
.debug-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
#debug-msg { flex: 1; font-size: 12px; color: var(--muted); }
#debug-msg.ok { color: var(--ok); }
#debug-msg.bad { color: var(--error); }
.debug-actions button {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}
.debug-actions button:hover { color: var(--text); border-color: var(--faint); }
.debug-actions button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.debug-actions button.primary:hover { background: var(--accent-strong); }
.debug-actions button:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 700px) {
  /* 16px 未満だとタップで勝手に拡大される */
  .debug-card input, .debug-card textarea { font-size: 16px; }
}

/* 応答ごとのデバッグ入口。目立たせない */
.report-link {
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--faint);
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.report-link:hover { color: var(--warn); }
#debug-summary-row[hidden] { display: none; }


#archive-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  width: calc(100% - 20px);
  margin: 2px 10px 4px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
}
#archive-toggle:hover { background: var(--surface-2); color: var(--text); }
#archive-toggle.on { background: var(--accent-soft); color: var(--accent); }
#archive-toggle[hidden] { display: none; }
#project-list .list-empty {
  padding: 14px 12px;
  color: var(--faint);
  font-size: 12px;
  cursor: default;
}

/* MCP から受け取った図(回路図など)。
   ⚠️ 白地を敷くこと。**線画は背景が透明**なので、暗い配色だと黒い線が消える。 */
.md-img {
  display: block;
  max-width: 100%;
  /* ⚠️ 読み込む前から場所を取る。無いと後から高さが伸びて、
     一番下へ飛ばしたはずの位置が押し流される(2026-08-24、報告 1787556283)。
     ⚠️ 比率が分からないので min-height で最低限だけ確保する——
     aspect-ratio を決め打ちすると、横長の画像で余白が出る */
  min-height: 120px;
  margin: 10px 0;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* 流し込み中の本文。整形前なので改行だけ生かす */

/* 生成中だと分かるように、末尾に印を出す */
.assistant-msg.streaming::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--accent);
  opacity: 0.7;
  animation: caret 1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.model-name { font-size: 13px; }
.model-desc {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--faint);
  white-space: normal;
}
.model-item { text-align: left; }

/* 現在地を使っている印。モデル名・コンテクスト残量と同じ並びに置く */
#geo-pin {
  display: inline-flex;
  align-items: center;
  padding: 4px 2px;          /* ctx-meter と同じ掴みしろ */
  border: none;
  background: transparent;
  color: var(--faint);       /* 切ってあるときは灰色 */
  cursor: pointer;
}
#geo-pin.on { color: var(--accent); }   /* 使っているときは青 */
#geo-pin:hover { opacity: 0.75; }
#geo-pin[hidden] { display: none; }
@media (pointer: coarse) {
  /* 指で押せる大きさに。⚠️ 隣の Auto より高くしないこと(行の高さが変わる) */
  #geo-pin { min-width: 34px; min-height: 30px; justify-content: center; }
}
/* 位置を問い合わせている間だけ点滅させる */
#geo-pin.locating { animation: geo-blink 0.9s ease-in-out infinite; }
@keyframes geo-blink { 50% { opacity: 0.25; } }

/* chat が作った音声・動画 */
.md-media {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 10px 0;
  border-radius: 8px;
}
video.md-media { background: #000; }

/* 会話を探す。ロゴのすぐ下に置く */
#search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  /* 上の区切り線に貼り付かないよう、少し下げる */
  margin: 10px 10px 6px;
  padding: 5px 9px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--faint);
}
#search-box:focus-within { border-color: var(--accent); color: var(--muted); }
#project-search {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;      /* 下のリンクと同じ */
  outline: none;
}
/* ⚠️ iOS Safari だけは 16px 未満の入力にフォーカスすると勝手に拡大する。
   -webkit-touch-callout は iOS にしか無いので、これで iOS だけ 16px を保つ */
@supports (-webkit-touch-callout: none) {
  #project-search { font-size: 16px; }
}
#project-search::placeholder { color: var(--faint); }

/* アーカイブの下。外のサイトへ出るので、見た目も少し控えめに */
#site-links a {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 10px 4px;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  border-radius: 8px;
}
#site-links a:hover { background: var(--surface-2); color: var(--text); }
/* 外のサイトへの並び。会話の一覧と混ざらないよう、上に細い線を引く */
#site-links { margin-top: 2px; padding-top: 4px; padding-bottom: 2px; border-top: 1px solid var(--border); }

/* 左下のアカウント。community の囲いに合わせた形 */
#account-pill {
  /* 下のリンク(community 等)と同じ素の行。上に線を引いて区切る
     (2026-08-22、囲い→全幅→枠なし、と試して最終的にこの形に落ち着いた) */
  display: flex;
  width: 100%;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
#account-pill:hover { background: var(--surface-2); color: var(--text); }
#account-pill .who { flex: none; }
#account-pill .caret { flex: none; margin-left: auto; transition: transform 0.15s; }
#user-menu.active #account-pill .caret { transform: rotate(180deg); }
#user-email {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12ch;      /* community と同じ。長い名前でも囲いが崩れない */
}
#user-menu[hidden] { display: none; }

/* 切れているときは、迷わないよう大きく出す */
/* ログイン後のアカウントの囲いと同じ寸法(高さ29px・半円・中央寄せ)。
   色だけ塗って「押すところ」だと分かるようにする */
#login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
}
#login-btn:hover { background: var(--accent-strong); }
#login-btn[hidden] { display: none; }

/* 1つも使えないときの一言。選べないことと、その理由は別に伝える */
.model-note {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
}

/* おためし中の案内。入力欄のすぐ上に控えめに */
#guest-note {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface);
  border-top: 1px solid var(--border);
}
#guest-note[hidden] { display: none; }
#guest-note a { color: var(--accent); font-weight: 600; text-decoration: none; }
#guest-note a:hover { text-decoration: underline; }

/* 最初は入力欄ごと中央に。会話が始まったら下に降りる(ChatGPT と同じ見え方)。
   ⚠️ 文だけ中央にしないこと。入力欄が下に残ると「中央」に見えない。
   上下の margin:auto で、案内+入力欄の塊を topbar と画面下端の真ん中に置く */
body.chat-empty #chat {
  flex: 0 0 auto;
  margin-top: auto;
  padding-bottom: 8px;
}
body.chat-empty #inputbar {
  margin-bottom: auto;
  border-top: none;
}
body.chat-empty .chat-hint {
  margin-top: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
body.chat-empty #guest-note { border-top: none; background: transparent; }
#model-menu[hidden], #skill-menu[hidden] { display: none; }

/* chat が作った PDF(スライド等)。開く先は別タブ */
.md-file {
  display: inline-block;
  margin: 8px 0;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}
.md-file:hover { background: var(--surface-2); }

/* 中断したときの再送信 */
#retry-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface);
  border-top: 1px solid var(--border);
}
#retry-bar button, .retry-inline {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
#retry-bar button:hover, .retry-inline:hover { background: var(--accent-soft); }
.retry-inline { align-self: flex-start; margin: 2px 0 10px; }

/* 資料の添付 */
#attach-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  align-self: flex-end;
}
#attach-btn:hover { color: var(--text); background: var(--surface-2); }
#attach-btn[hidden] { display: none; }
#attach-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 6px; }
#attach-chips[hidden] { display: none; }
.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface);
}
.attach-chip button {
  border: none; background: none; color: var(--faint); cursor: pointer; font-size: 13px;
}

/* 生成中は送信が「中止」になる。⚠️ 赤塗りにしない(大げさに見える)。
   ふだんの送信ボタンと同じ佇まいで、絵だけ ■ に変わる */
#send.stop::before { content: "■"; font-size: 11px; }
#send.stop svg { display: none; }

/* 待っている間の経過。⚠️ 主役ではないので控えめに——数字が目立つと
   「遅い」が強調される。動いていると分かれば足りる（2026-08-26） */
.elapsed { opacity: .55; font-variant-numeric: tabular-nums; }

/* 待たせすぎたときの逃げ道（2026-08-28、報告：熟考で1手119秒）。
   ⚠️ 入力欄の上に出す。会話の中に混ぜると、あとから履歴を読んだ人に
   「そのとき何が起きたか」と誤解される */
#escape-hint {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92%, 520px);
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-side);
  font-size: 13px;
  color: var(--muted);
}
#escape-hint[hidden] { display: none; }
#escape-hint button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
#escape-hint button:active { filter: brightness(0.92); }

/* 一覧の未読。⚠️ サイドバーの入り口を消したので、新着はここだけで伝わる
   （2026-08-28、湊さんの「イベントとニュースを削除して」） */
.row-unread {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ⚠️ サイドバーの供給元の入り口は無くした（一覧の行になったため）。
   要素は残してあるので、場所だけ塞ぐ（2026-08-28、湊さんの指示） */
#side-feeds { display: none; }

/* ⚠️ **一覧に状態のポチを出さない**（2026-08-30、湊さん）。
   要素は残す（renderStatus が触る）が、見せない。
   実行中は上の帯に「考えています…＋経過秒」が出るので、そちらで分かる。
   ⚠️ hidden 属性ではなく **display で消すこと**——renderStatus が
   className を入れ直すと、CSS の display が hidden に勝って出てくる */
#project-list .status-dot,
#archive-list .status-dot { display: none !important; }

/* PC では下部バーを出さない（サイドバーが常にあるので要らない） */
.bar-btn { display: none; }

@media (max-width: 700px) {
  /* ⚠️ **下端に固定する**（2026-08-30、湊さん「追従じゃなくて一番下に固定、
     テキストと一緒に」）。sticky だと中身に応じて動いて「付いてくる」ように
     見える。位置を決め打ちにして、一覧はその上で流す */
  /* ⚠️ **下部バーの高さは、ここ1箇所で決める。**避ける側（一覧・入力欄）が
     それぞれ勝手な数字を持つと、片方だけ直って**もう片方が重なる**
     （2026-08-31、報告 1788134490。一覧には逃げがあったのに会話側に無く、
     入力欄が 59px まるごと下部バーに隠れていた）*/
  /* ⚠️ **画面の下の逃げも1箇所で決める。**env(safe-area-inset-bottom) が
     6箇所に散っていて、**PWA とブラウザで空き方が違う**と報告された
     （2026-08-31、報告 1788134844）。避ける側が個別に env() を持つと、
     また片方だけ直る。
  ⚠️ **safe-area を持つのは下部バーだけ。**避ける側は --bar-h を見るだけで、
     env() も max() も書かない。--bar-h は**バーの実物の高さ**（中身
     55px ＋ 上下の余白 ＋ ジェスチャーバーぶん）なので、これを避ければ
     PWA でもブラウザでも過不足なく合う。
     （実体はこのファイルの先頭で決めている）*/

  #sidebar-footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: stretch;
    /* ⚠️ **等幅で均等に並べる**（2026-08-30、湊さん「配列がバラバラ」）。
       space-between だと中身の幅がまちまちで、間隔が不揃いに見える。
       ⚠️ アカウントは #user-menu に包まれているので、**そちらにも同じ
       flex を効かせないと1つだけ幅が違う** */
    gap: 0;
    padding: 4px 4px calc(4px + var(--safe-b));
    background: var(--bg);
    /* ⚠️ 線は引かない（2026-08-31、湊さん「一番下の固定の上の横線も無くていい」）。
       地の色と余白で十分に分かれる。
       ⚠️ **別の指定が線を引いている**（:has(#user-menu) の規則）。
       打ち消さないと残る（実測で 1px 残っていた）*/
    border-top: 0;
    z-index: 20;
  }
  #sidebar-footer:has(#user-menu:not([hidden])) { border-top: 0; }
  /* 下部バーのぶん、一覧の下に余白を作る（最後の行が隠れないように） */
  #sidebar { padding-bottom: var(--bar-h); }

  .bar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 4px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    cursor: pointer;
  }
  .bar-btn:active { color: var(--text); }

  /* アカウントも同じ佇まいに（丸ではなく、絵＋文字） */
  /* ⚠️ アカウントだけ幅が違って見えていた（#user-menu の中身が伸びない）。
     **同じ flex を親子とも効かせる** */
  /* ⚠️ flex を揃えても幅が違った。**中身の最小幅**（名前の文字）が効いていた。
     min-width:0 だけでは足りず、**基準幅を同じ**にする必要がある
     （2026-08-30、実測で 78px と 70px の差を確認）*/
  /* ⚠️ 隠れている要素(ログイン)まで数に入れない。**出ているものだけ**揃える */
  /* ⚠️ **等幅は割合で指定する。**flex-basis:0 だと中身の最小幅が効いて
     1つだけ狭くなった（実測 78px と 70px。width:0 を強制しても直らず、
     推測を重ねるより確実な指定に変えた。2026-08-30）*/
  #sidebar-footer > *:not([hidden]) { flex: 1 1 20%; min-width: 0; }
  #user-menu { display: flex; }
  #user-menu > #account-pill { flex: 1 1 0; min-width: 0; width: 0; }
  .bar-btn span, #account-pill #user-email {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ⚠️ **検索は下から出す**（2026-08-30、湊さん「上にあると大変。下の固定に
     検索アイコンがあって、押したら下の方に出る」）。普段は畳んでおく */
  #search-box {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 8;
    padding: 8px 10px 8px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    transform: translateY(110%);
    transition: transform 0.2s ease;
  }
  body.search-open #search-box { transform: translateY(0); }
  #account-pill {
    width: auto;
    height: auto;
    flex-direction: column;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
  }
  #account-pill .who { width: 20px; height: 20px; }
  #account-pill .caret { display: none; }
  /* ⚠️ **メールをそのまま出さない。**長くて枠を壊すうえ、他人に見える
     場所でもある。名前の部分だけを出す */
  #account-pill #user-email {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ⚠️ 見出しのサービス名を出さない（2026-08-30、湊さん「一番上のタイトルの
     ポケットは外していい。アプリだと付いていないのがよくある」）。
     絵は残す——押すと一覧に戻れる入口なので */
  /* ⚠️ 2026-08-30 に「一旦一番上のロゴマーク撤去」で消したが、
     ⭐ **2026-09-04、湊さんのご要望で戻した**（報告 1788484620。
     「一覧リストの上がリストから始めると違和感あるので、真ん中に poqet の
       ロゴマークつけて真ん中の上。スマホ」）。
     ⚠️ ⛔ **2つ目のロゴを作らないこと。**`#brand-logo` は id で掴まれており
     （app.js の未読の印）、**増やすと印が意図しない方に付く。**
     ⭐ **消していたものを、中央に置き直すだけ**にする */
  #sidebar-head {
    display: flex;
    justify-content: center;    /* ⭐ 真ん中 */
    align-items: center;
    padding: 14px 0 10px;
    border-bottom: 0;           /* ⚠️ 線は引かない（行と行の間と同じ方針） */
  }
  /* ⚠️ たたむ釦はスマホに要らない（サイドバーが全画面なので） */
  #sidebar-head #collapse-btn { display: none; }
}

@media (max-width: 700px) {
  /* ⚠️ **設定はドロップダウンではなく、普通のページにする**（2026-08-30、
     湊さん「押すとドロップダウンなんですけど、それも普通のページに」）。
     狭い画面で下から小さな箱が出るより、1画面で開く方が読みやすく押しやすい。
     ⚠️ 中身と動き（通知の入切・不具合の報告・ログアウト）は今のまま——
     置き場所だけ変える */
  #user-menu.active #settings-dropdown {
    position: fixed;
    inset: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 14px 14px 0 0;
    padding: 8px 0 12px;
    z-index: 30;
  }
  #user-menu.active #settings-dropdown > button,
  #user-menu.active #settings-dropdown > a {
    padding: 15px 18px;
    font-size: 15px;
  }
  /* 後ろを暗くして、外を押すと閉じられることを示す。
     ⚠️ **疑似要素(::before)にしない。**押せないうえ #user-menu の中なので、
     「外を押した」と判定されず**閉じられなくなる**（2026-08-30、実測で
     気づいた）。本物の覆い(#settings-scrim)を使う */
  /* ⚠️ **hidden の打ち消しを必ず書く。**display を指定すると hidden 属性が
     負けて、覆いが出っぱなしになる（今日3度目。§display と hidden）*/
  #settings-scrim[hidden] { display: none !important; }
  body.settings-open #settings-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--backdrop);
    z-index: 29;
  }
  /* ⛔⛔ **ドロップダウンにも覆いが掛かっていた**（2026-09-10、湊さん
     「⭐ ドロップダウンのウィンドウまでグレーがかかっている」）。
     ⚠️ ⛔ **数字は正しく並んでいたのに、⭐ 比べる相手が違っていた**:
       #sidebar-footer が `position: fixed; z-index: 20` で**階を作る**ので、
       その中の #settings-dropdown の 30 は ⛔ **その階の中でしか効かない**。
       ⚠️ 外から見れば「20 の階の中身」で、⭐ 覆い(29) のほうが上になる。
     ⭐ **開いている間だけ、footer を覆いより上の階へ上げる。**
     ⚠️ ⛔ 覆い(29) は #main(20) を暗くしたまま——⭐ 背景は暗いまま保てる。
     ⛔ 覆いを 19 に下げても直らない（⚠️ #main も 20 なので背景が暗くならない）。 */
  body.settings-open #sidebar-footer { z-index: 30; }

  /* ⚠️ 上の「＋新規プロジェクト」は下部バーと同じ役目。**二重に置かない** */
  #new-project { display: none; }
}

/* 下に引っ張って更新。⚠️ 高さ0で置いておき、引いたぶんだけ開く */
.pull-ind {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--muted);
  transition: height 0.18s ease;
}

/* ⚠️ **アーカイブは一覧の中に置かない**（2026-08-30、湊さん「一番下にまだ
   アーカイブ済みが残ってるので撤去。代わりに下の固定のアイコンから
   そのページへ行けるように」）。先日の「その場で折りたたむ」形は撤回された */
#archive-toggle { display: none !important; }
body.archive-view #project-list { display: none; }
body:not(.archive-view) #archive-list { display: none !important; }
body.archive-view #archive-list { display: block !important; }
.archive-head {
  display: none;
  padding: 12px 10px 6px;
  font-size: 13px;
  color: var(--muted);
}
body.archive-view .archive-head { display: block; }
.list-empty { padding: 24px 12px; color: var(--muted); font-size: 14px; text-align: center; }

/* ⚠️ **道具はモデルの隣に置く**（2026-08-30、湊さん「右上にあるスキルを
   一番下のモデル選択の横に」）。どちらも「この会話をどう動かすか」の設定なので
   隣り合うのが筋。⚠️ サイドバーの下部固定バーとは**別の場所** */
#model-badge #skill-menu { margin-left: 8px; }
#model-badge #skill-dropdown,
#model-badge #model-dropdown {
  /* 入力欄の下なので、**上に開く** */
  top: auto;
  bottom: calc(100% + 6px);
}
/* ⚠️ **右上にあった頃の `right: 0` が残っていた。**入力欄の下（左寄り）で
   そのまま使うと、一覧が左へはみ出して切れる（2026-08-31、実物で気づいた）。
   置き場所を変えたら、**開く向きも一緒に見直すこと** */
#model-badge #skill-dropdown {
  right: auto;
  left: 0;
  /* 狭い画面では画面幅に収める */
  max-width: calc(100vw - 24px);
}

@media (max-width: 700px) {
  /* ⚠️ **入力欄も下部バーのぶん逃がす。**一覧にだけ逃げがあって、
     会話側に無かった（2026-08-31、湊さん「入力欄がかぶる」）*/
  #inputbar { padding-bottom: calc(var(--bar-h) + 10px); }
  /* 検索は一覧の中なので、下部バーの上に出す（バーに重ならないように） */
  #search-box { bottom: var(--bar-h); }

  /* ⚠️ **会話（詳細）に下部バーは無い。**#main が画面を覆うので、
     バーは見えていない。それなのに --bar-h ぶん空けていたため、
     入力欄の下に**バーがあるつもりの空白**が残った
     （2026-08-31、報告 1788136387。湊さん「メッセージ画面の下の
     マージン治ってないかな」、実物の写真で確認）。
     ⚠️ **画面のいちばん下にあるものが safe-area を持つ。**一覧では
     下部バー、会話では入力欄。二重にも、ゼロにもしない */
  body.chat-open #sidebar-footer { display: none; }
  body.chat-open #inputbar { padding-bottom: calc(10px + var(--safe-b)); }
  /* 逃げ道の案内は入力欄の上。バーが無いので --bar-h は足さない */
  #escape-hint { bottom: calc(96px + var(--safe-b)); }
  /* 線を引かない（塊の区切りは余白で） */
  #site-links { border-top: 0; }
}

/* ⚠️ **止まったことを画面に出す。**黙って真っ白にしない
   （2026-09-02、湊さん「バックエンドが目で分かる時には、フロントエンドに
   エラーコードというかエラーメッセージを出してもらえますか」）。
   ⚠️ 下部バーではなく**上**に出す——下は指で隠れるし、入力欄と重なる */
#err-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px calc(10px);
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--error, #b3261e);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
}
#err-bar[hidden] { display: none !important; }   /* ⚠️ display は hidden を打ち消す */
#err-bar span { flex: 1 1 auto; min-width: 0; }
#err-bar button {
  flex: 0 0 auto;
  border: 0;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  font: inherit;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}

/* ⚠️ **待っている間、空白のまま置かない**（2026-09-02、湊さん「読み込み中
   みたいなやつを入れてもらってもいいですか」）。
   ⚠️ **賑やかにしない。**行と同じ高さの薄い帯を並べるだけにして、中身が
   来たときに位置が動かないようにする——動くとちらついて、かえって遅く見える */
#project-list li.skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 59px;                 /* ⚠️ 本物の行と同じ高さ（--bar-h と同源） */
  padding: 0 14px;
  pointer-events: none;         /* 押せてしまわないように */
}
.sk-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-2); flex: 0 0 auto;
}
.sk-lines { flex: 1 1 auto; min-width: 0; display: grid; gap: 7px; }
.sk-line { height: 10px; border-radius: 4px; background: var(--surface-2); }
.sk-line.short { width: 55%; }
/* ⚠️ ゆっくり。速い明滅は目に障る */
.skeleton-row .sk-avatar, .skeleton-row .sk-line { animation: sk 1.6s ease-in-out infinite; }
@keyframes sk { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.chat-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 0;
  color: var(--faint);
  font-size: 13px;
}

/* ⚠️ **色は明示された指示**（2026-09-02、報告 1788386903。湊さん
   「ゴミ箱はタイトルの右側に赤で」「アーカイブも…左に緑で」）。
   ⚠️ 一連の見直しは「素直に薄く」が方針だったので、**彩度は既存の
   成功色・警告色に合わせる**——ここだけ派手にしない */
#title-menu[hidden] { display: none !important; }

/* ⭐ サービス稼働状況（2026-09-06、湊さん）。⛔ 左下に固定。ゲストにも出す。
   ⚠️ 色は5つ。**3つでは足りない**——実機は普段 止まっているので、
   ⛔ それを赤にすると「故障」と読まれる（blueqatmcp の指摘）。 */
/* ⛔ **浮かせないこと。**2026-09-06、湊さん「⛔ フロートが画面に被って色々使えない。
   ⭐ リストの下の mcp の下に固定で」。⚠️ 一度 fixed で左下に出したが、
   ⛔ **本文の上に乗って邪魔になった。**⭐ サイドバーの並びの中に置く。 */
/* ⭐ **mcp と同じ扱い**（湊さん「固定ってリストに固定ね。mcp と同じ扱い」）。
   ⛔ 浮かせない・下へ寄せない。⚠️ 一覧の並びに、mcp のすぐ下に置く。 */
/* ⭐ **mcp と同じ扱い**（湊さん「固定ってリストに固定ね。mcp と同じ扱い」）。
   ⛔ 浮かせない。⚠️ 見た目も #site-links a に合わせる（gap 7・margin 0 10px 4px・
   padding 8px 10px）。 */
#svc-pill {
  display: flex; align-items: center; gap: 7px;
  width: calc(100% - 20px); margin: 0 10px 4px; padding: 8px 10px;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--fg); font: inherit; font-size: inherit;
  cursor: pointer; text-align: left;
}
#svc-pill:hover { background: var(--hover, rgba(127,127,127,.08)); }
.svc-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: #9aa0a6;                       /* 既定は灰色＝確認できていない */
}
.svc-dot.ok { background: #1e8e3e; }
.svc-dot.busy { background: #f9ab00; }
.svc-dot.window { background: #1a73e8; }     /* ⭐ 稼働時間の外。⛔ 故障ではない */
.svc-dot.down { background: #d93025; }
.svc-dot.unknown { background: #9aa0a6; }
/* ⛔ 上の帯（#topbar・z=5）が ✕ に被って押せなかった（2026-09-06、実測）。
   ⚠️ 下の会話も透けていた。⭐ 上から丸ごと重ね、帯のぶん下げる */
/* ⛔ body 直下の覆い（⚠️ #main は一覧の画面で transform が掛かるため）。
   ⭐ PC ではサイドバーを残して本文の上だけを覆う */
#svc-panel {
  position: fixed; inset: 0 0 0 240px; z-index: 40;
  background: var(--bg);
  padding: 24px 16px 40px; overflow-y: auto;
}
body.sidebar-collapsed #svc-panel { left: 0; }
@media (max-width: 700px) {
  /* ⚠️ スマホは全面。⛔ 上の帯が ✕ に被らないよう下げる */
  #svc-panel { inset: 0; padding-top: 68px; padding-bottom: 80px; }
}
#svc-inner { max-width: 720px; margin: 0 auto; }
#svc-head { display: flex; align-items: center; gap: 12px; }
#svc-head h1 { font-size: 20px; margin: 0 auto 0 0; }
#svc-close { border: 0; background: none; font-size: 18px; cursor: pointer;
             padding: 10px; color: var(--fg); }
#svc-warn { margin: 12px 0; padding: 10px 12px; border-radius: 8px;
            background: var(--error, #b3261e); color: #fff; font-size: 13px; }
#svc-list { list-style: none; padding: 0; margin: 16px 0 0; }
#svc-list li { display: flex; gap: 10px; align-items: flex-start;
               padding: 12px 2px; border-bottom: 1px solid var(--line); }
#svc-list .svc-dot { margin-top: 5px; }
#svc-list .svc-name { font-weight: 600; }
/* ⚠️ 判断の根拠を必ず添える。「混雑」だけでは見た人が判断できない */
#svc-list .svc-note { display: block; font-weight: 400; font-size: 12px;
                      color: var(--muted, #5f6368); margin-top: 2px; }
#svc-at { font-size: 12px; color: var(--muted, #5f6368); margin-top: 14px; }
#svc-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px;
              font-size: 12px; color: var(--muted, #5f6368); }
#svc-legend span { display: inline-flex; align-items: center; gap: 5px; }
/* ⛔ 「答えが違う」は停止と別の色に。⚠️ 動いているので気づかれにくい */
.svc-dot.wrong { background: #8430ce; }

/* ⛔ スマホでは、サイドバーごと画面の外に退く。⚠️ そのまま置くと丸も外へ出る
   （2026-09-06、実測: 左端から -85px＝画面外。⭐ 「見えている」の判定では
   捕まらなかった——CSS 上は可視でも、画面には無い）。
   ⭐ 画面そのものに留める。⛔ 下のバーとは重ねない（--bar-h のぶん上へ） */

/* ⭐ 「一部が使えません」は混雑と同じ黄。⛔ 色は増やさず、言葉で分ける */
.svc-dot.partial { background: #f9ab00; }
/* ⭐ poqet の外のものは、見出しで区切る */
#svc-list li.svc-sep {
  display: block; border-bottom: 0; padding: 18px 2px 4px;
  font-size: 12px; color: var(--muted, #5f6368);
}

/* ⭐ 稼働状況の並び。⚠️ #site-links と同じ見た目にする（⛔ あちらはスマホで
   出さない決まりがあるので、別の nav にした） */
#svc-links { margin-top: 2px; padding-top: 4px; padding-bottom: 2px;
             border-top: 1px solid var(--border); }
/* ⭐ 使えない理由。⛔ 説明と見分けが付くよう、少し強く出す */
.model-item .model-why { color: var(--fg); opacity: .85; }