/* =========================================================
   Claude Note Web - マップ機能

   配色は 6 つのテーマ（ダーク 4 / ライト 2）を CSS 変数で切り替える。
   html[data-theme="..."] が唯一の切り替えスイッチで、
   UI の枠だけでなくキャンバス・ノードカード・接続線まで一緒に変わる。
   テーマの一覧と、JS でしか使えない色（世代別カラー）は js/theme.js。
   ========================================================= */

/* ---------- テーマ非依存の形（角丸・余白など） ---------- */
:root {
  --radius: 8px;
  /* チェック済みの色。明暗どちらのテーマでも読めるようテーマ非依存にしている */
  --ok: #3fa66a;
}

/* ==================== ダーク: ミッドナイト（既定） ==================== */
:root,
html[data-theme="midnight"] {
  --bg: #14161a;
  --panel: #1b1e23;
  --panel-2: #23272e;
  --border: #333942;
  --text: #e4e7ea;
  --text-dim: #98a1ad;
  --accent: #6ea8ff;
  --accent-soft: rgba(110, 168, 255, 0.18);
  --canvas-bg: #101216;
  --grid: rgba(255, 255, 255, 0.045);
  --grid-strong: rgba(255, 255, 255, 0.085);
  --node-bg: #232830;
  /* 付箋（大きなメモの貼り紙）の下地・枠・コードの地色 */
  --sticky-note-bg: #3b3524;
  --sticky-note-border: #554d33;
  --code-bg: rgba(255, 255, 255, .09);
  --node-border: #3b424c;
  --node-radius: 10px;
  --node-border-width: 1.5px;
  --node-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  --edge: #7d8894;
  --branch: #6d7c8c;
  --selection: #6ea8ff;
  --danger: #ff6b6b;
  --shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  --anchor-ring: #14161a;
  --resizer-bg: #0c0e11;
  --group: #9a7cf0;
  --group-fill: rgba(154, 124, 240, 0.08);
  --group-fill-active: rgba(154, 124, 240, 0.15);
  --hit: #ffb020;
  --ctrl: #ffb020;
  --ctrl-ring: #14161a;
  --link: #6ec8ff;
  --on-accent: #10131a;
}

/* ==================== ダーク: ディープブルー ==================== */
html[data-theme="ocean"] {
  --bg: #0a1522;
  --panel: #0f1e30;
  --panel-2: #16293f;
  --border: #23405c;
  --text: #dbe9f7;
  --text-dim: #8ba6c4;
  --accent: #38bdf8;
  --accent-soft: rgba(56, 189, 248, 0.18);
  --canvas-bg: #071019;
  --grid: rgba(120, 190, 255, 0.05);
  --grid-strong: rgba(120, 190, 255, 0.1);
  --node-bg: #12283d;
  /* 付箋（大きなメモの貼り紙）の下地・枠・コードの地色 */
  --sticky-note-bg: #1d3550;
  --sticky-note-border: #2f4d6e;
  --code-bg: rgba(255, 255, 255, .09);
  --node-border: #27486a;
  --node-radius: 12px;
  --node-border-width: 1.5px;
  --node-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  --edge: #5f89b3;
  --branch: #4d7ba8;
  --selection: #38bdf8;
  --danger: #ff7a85;
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
  --anchor-ring: #071019;
  --resizer-bg: #040a10;
  --group: #7dd3fc;
  --group-fill: rgba(125, 211, 252, 0.07);
  --group-fill-active: rgba(125, 211, 252, 0.14);
  --hit: #ffc247;
  --ctrl: #ffc247;
  --ctrl-ring: #071019;
  --link: #7dd3fc;
  --on-accent: #05131f;
}

/* ==================== ダーク: フォレスト ==================== */
html[data-theme="forest"] {
  --bg: #101613;
  --panel: #16201a;
  --panel-2: #1d2a22;
  --border: #2c3d32;
  --text: #e2ece4;
  --text-dim: #93a89a;
  --accent: #57c98a;
  --accent-soft: rgba(87, 201, 138, 0.18);
  --canvas-bg: #0c110e;
  --grid: rgba(150, 220, 175, 0.045);
  --grid-strong: rgba(150, 220, 175, 0.09);
  --node-bg: #1a261e;
  /* 付箋（大きなメモの貼り紙）の下地・枠・コードの地色 */
  --sticky-note-bg: #26301f;
  --sticky-note-border: #3d4a33;
  --code-bg: rgba(255, 255, 255, .09);
  --node-border: #31463a;
  --node-radius: 14px;
  --node-border-width: 1.5px;
  --node-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  --edge: #6f8a78;
  --branch: #5d7d68;
  --selection: #57c98a;
  --danger: #f4736b;
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
  --anchor-ring: #0c110e;
  --resizer-bg: #070c09;
  --group: #b8a04e;
  --group-fill: rgba(184, 160, 78, 0.08);
  --group-fill-active: rgba(184, 160, 78, 0.16);
  --hit: #e5b04a;
  --ctrl: #e5b04a;
  --ctrl-ring: #0c110e;
  --link: #7fd6b0;
  --on-accent: #08160f;
}

/* ==================== ダーク: 高コントラスト ==================== */
html[data-theme="contrast"] {
  --bg: #000000;
  --panel: #0a0a0a;
  --panel-2: #171717;
  --border: #4f4f4f;
  --text: #ffffff;
  --text-dim: #bcbcbc;
  --accent: #ffd400;
  --accent-soft: rgba(255, 212, 0, 0.22);
  --canvas-bg: #000000;
  --grid: rgba(255, 255, 255, 0.09);
  --grid-strong: rgba(255, 255, 255, 0.17);
  --node-bg: #0d0d0d;
  /* 付箋（大きなメモの貼り紙）の下地・枠・コードの地色 */
  --sticky-note-bg: #1c1600;
  --sticky-note-border: #6b5a00;
  --code-bg: rgba(255, 255, 255, .14);
  --node-border: #7a7a7a;
  --node-radius: 4px;
  --node-border-width: 2px;
  --node-shadow: none;
  --edge: #d2d2d2;
  --branch: #d2d2d2;
  --selection: #ffd400;
  --danger: #ff5252;
  --shadow: 0 2px 14px rgba(255, 255, 255, 0.12);
  --anchor-ring: #000000;
  --resizer-bg: #000000;
  --group: #00e5ff;
  --group-fill: rgba(0, 229, 255, 0.1);
  --group-fill-active: rgba(0, 229, 255, 0.2);
  --hit: #ff8c00;
  --ctrl: #ff8c00;
  --ctrl-ring: #000000;
  --link: #66e0ff;
  --on-accent: #000000;
}

/* ==================== ライト: 既定 ==================== */
html[data-theme="light"] {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --panel-2: #f0f1f4;
  --border: #d8dbe0;
  --text: #1f2328;
  --text-dim: #6a737d;
  --accent: #2f6feb;
  --accent-soft: rgba(47, 111, 235, 0.14);
  --canvas-bg: #fafbfc;
  --grid: rgba(0, 0, 0, 0.055);
  --grid-strong: rgba(0, 0, 0, 0.09);
  --node-bg: #ffffff;
  /* 付箋（大きなメモの貼り紙）の下地・枠・コードの地色 */
  --sticky-note-bg: #fdf1b6;
  --sticky-note-border: #e5d582;
  --code-bg: rgba(0, 0, 0, .07);
  --node-border: #c9ced6;
  --node-radius: 8px;
  --node-border-width: 1.5px;
  --node-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  --edge: #7c8794;
  --branch: #8b96a3;
  --selection: #2f6feb;
  --danger: #d13438;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  --anchor-ring: #ffffff;
  --resizer-bg: #ffffff;
  --group: #9a7cf0;
  --group-fill: rgba(154, 124, 240, 0.07);
  --group-fill-active: rgba(154, 124, 240, 0.13);
  --hit: #ffb020;
  --ctrl: #ffb020;
  --ctrl-ring: #ffffff;
  --link: #0a84c8;
  --on-accent: #ffffff;
}

/* ==================== ライト: セピア ==================== */
html[data-theme="sepia"] {
  --bg: #efe6d5;
  --panel: #f8f2e6;
  --panel-2: #eae0cd;
  --border: #d3c4a8;
  --text: #3b3226;
  --text-dim: #7d6f5b;
  --accent: #a9683a;
  --accent-soft: rgba(169, 104, 58, 0.16);
  --canvas-bg: #f4ecdb;
  --grid: rgba(90, 70, 40, 0.07);
  --grid-strong: rgba(90, 70, 40, 0.13);
  --node-bg: #fdf8ee;
  /* 付箋（大きなメモの貼り紙）の下地・枠・コードの地色 */
  --sticky-note-bg: #f7e6b0;
  --sticky-note-border: #ddc98a;
  --code-bg: rgba(0, 0, 0, .07);
  --node-border: #cdbb9c;
  --node-radius: 10px;
  --node-border-width: 1.5px;
  --node-shadow: 0 1px 3px rgba(90, 70, 40, 0.2);
  --edge: #99866a;
  --branch: #a4906f;
  --selection: #a9683a;
  --danger: #b1443c;
  --shadow: 0 2px 12px rgba(90, 70, 40, 0.22);
  --anchor-ring: #fdf8ee;
  --resizer-bg: #fdf8ee;
  --group: #8a6a9e;
  --group-fill: rgba(138, 106, 158, 0.09);
  --group-fill-active: rgba(138, 106, 158, 0.16);
  --hit: #c98a1e;
  --ctrl: #c98a1e;
  --ctrl-ring: #fdf8ee;
  --link: #1a6f9e;
  --on-accent: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Segoe UI", "Yu Gothic UI", "Hiragino Sans", Meiryo, system-ui, sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
}

button {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}
button:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.primary:hover { filter: brightness(1.1); background: var(--accent); }
button.danger { color: var(--danger); }
button.icon-btn { padding: 5px 9px; min-width: 30px; }
button.link-btn { background: none; border: none; color: var(--text-dim); padding: 4px 6px; }
button.link-btn:hover { color: var(--accent); background: none; }
button.has-caret::after { content: " ▾"; opacity: .6; }

input[type="text"], input[type="search"], input[type="number"], select, textarea {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input[type="color"] {
  width: 38px; height: 28px; padding: 1px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--panel); cursor: pointer;
}

/* ==================== 画面最上部のメニューバー ====================

   画面をまたぐ移動リンクとテーマ切り替えを、一番上の帯にまとめる。
   サイドバーの見出し行に詰め込むと、幅を狭めたときに右側の 💾 や 🌙 が
   押し出されて見えなくなるため、ここへ逃がしている。
   使う側の <body> に class="has-topbar" を付けること。
   ================================================================= */

/* body を縦並びにして、帯の下に本体（#app / #page）を敷き詰める。
   body は overflow:hidden なので、帯は常に画面の一番上に留まる */
body.has-topbar { display: flex; flex-direction: column; }
body.has-topbar > #app,
body.has-topbar > #page { flex: 1 1 auto; min-height: 0; height: auto; }

/* ==================== 単体表示（マップだけを全画面で出す） ====================

   ⛶ ボタン（または Esc で戻る）で body に .map-solo を付ける。
   隠すのは「別の場所へ行くための部品」だけ＝メニューバーとマップ一覧で、
   ツールバー・ステータスバーは残す（単体表示のまま編集を続けられるようにするため）。
   スマホは画面が狭く、一覧が常に幅を食うのでこの状態が既定に近い使い方になる。
   ========================================================================= */
body.map-solo > .topbar { display: none; }
body.map-solo #sidebar { display: none; }
/* アウトライン・AI パネルは自分で閉じられるので触らない（開いたまま単体表示にできる） */

/* 単体表示に入ると ⛶ が「戻る」の意味になる。押し間違えないよう色を変える */
body.map-solo #btn-solo { background: var(--accent); color: #fff; }

.topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  z-index: 50;
}
.topbar .brand {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 14px; font-weight: 600; white-space: nowrap; flex: 0 0 auto;
}
.topbar .brand .page-name { font-size: 12px; font-weight: 400; color: var(--text-dim); }

/* ==================== 共有ページ（/share/<札>） ====================
   ログインしていない相手が見る唯一の画面。編集画面と同じ CSS を使うが、
   「触っても変わらない画面だ」と最初に分かるように印を出す。
   ================================================================= */
.share-badge {
  flex: 0 0 auto;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent);
}
/* 共有ページのマップ名は帯の主役なので、他の画面の page-name より強く出す */
.share-page .topbar .brand .page-name {
  font-size: 14px; font-weight: 600; color: var(--text);
}
/* 道具は右端へ寄せる（この画面には移動リンクの列が無い） */
.share-page .topbar-tools { margin-left: auto; }

/* 移動リンクの並び。幅が足りないときはここだけが横スクロールし、
   右端の道具（テーマなど）を画面外へ押し出さない */
.topbar-nav {
  display: flex; align-items: center; gap: 4px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.topbar-nav::-webkit-scrollbar { height: 0; }

.topbar .nav-link {
  color: var(--text-dim); text-decoration: none; font-size: 12px;
  padding: 4px 9px; border-radius: 6px; border: 1px solid transparent;
  white-space: nowrap; flex: 0 0 auto;
}
.topbar .nav-link:hover {
  color: var(--accent); border-color: var(--border); background: var(--panel-2);
}
.topbar .nav-link.current {
  color: var(--accent); border-color: var(--accent); background: var(--accent-soft);
}

.topbar-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* 右端に置くメニューは画面外へはみ出さないよう右揃えで開く */
.topbar-tools .dropdown { left: auto; right: 0; }

/* 幅が狭いときは文字を畳んで絵文字だけにする */
@media (max-width: 900px) {
  .topbar .nav-link .nav-text { display: none; }
  .topbar .nav-link { padding: 4px 7px; }
}

/* ==================== レイアウト ==================== */

#app { display: flex; height: 100%; }

#sidebar {
  position: relative;      /* 右端の #sidebar-resizer を置くため */
  width: 250px;
  min-width: 190px;
  flex: 0 0 auto;          /* 幅はドラッグで決めた値をそのまま使う */
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--border);
}

/* サイドバー右端の掴み手（js/sidebar-resize.js が差し込む） */
#sidebar-resizer {
  position: absolute; top: 0; right: -3px; width: 6px; height: 100%;
  cursor: ew-resize; z-index: 6;
}
#sidebar-resizer:hover, #sidebar-resizer.dragging { background: var(--accent); opacity: .35; }

/* ドラッグ中は本文の選択を止めて、どこでも矢印カーソルにする */
body.col-resizing { cursor: ew-resize; user-select: none; }

.sidebar-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.sidebar-head h1 { font-size: 15px; margin: 0; flex: 1; }
/* マップ画面 ⇔ メモ画面 の行き来 */
.sidebar-head .nav-link {
  color: var(--text-dim); text-decoration: none; font-size: 12px;
  padding: 3px 7px; border-radius: 6px; border: 1px solid transparent; white-space: nowrap;
}
.sidebar-head .nav-link:hover { color: var(--accent); border-color: var(--border); }

.sidebar-tools { display: flex; gap: 6px; padding: 8px 10px; }
.sidebar-tools input { flex: 1; min-width: 0; }

.map-list { list-style: none; margin: 0; padding: 0 6px; overflow-y: auto; flex: 1; }
.map-list li {
  padding: 7px 9px; border-radius: 6px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.map-list li:hover { background: var(--panel-2); }
.map-list li.active { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.map-list .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-list .meta { font-size: 11px; color: var(--text-dim); }
.map-list.trash { flex: 0 0 auto; max-height: 180px; border-top: 1px solid var(--border); }

.sidebar-foot { display: flex; gap: 4px; padding: 6px 8px; border-top: 1px solid var(--border); }

/* ==================== サイドバーの会話検索 ==================== */

/* 折りたたみ節（会話画面・メモ画面の .side-section と同じ見た目） */
.side-section { border-top: 1px solid var(--border); flex: 0 0 auto; }
.side-section > summary {
  padding: 6px 10px; cursor: pointer; color: var(--text-dim); font-size: 12px; user-select: none;
}
.side-section > summary:hover { color: var(--accent); }
.side-section-body { padding: 0 10px 8px; max-height: 260px; overflow-y: auto; }
.side-section-body > input[type="search"] { width: 100%; margin-bottom: 6px; }

.conv-hits { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.conv-hit {
  padding: 5px 7px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent;
}
.conv-hit:hover { background: var(--panel-2); border-color: var(--border); }

.conv-hit-head { display: flex; align-items: center; gap: 4px; }
.conv-hit-name {
  flex: 1; min-width: 0; font-weight: 600; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-hit-head button { padding: 2px 6px; min-width: 0; font-size: 11px; }

.conv-hit-sub { font-size: 11px; color: var(--text-dim); }
.conv-hit-snippet {
  font-size: 11px; color: var(--text-dim); line-height: 1.5; margin-top: 3px;
  padding-left: 6px; border-left: 2px solid var(--border);
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}

/* ==================== カテゴリ（プロジェクト） ==================== */

.cat-tools { padding-top: 0; align-items: center; }
.cat-tools select { flex: 1; min-width: 0; }

/* マップ一覧のカテゴリ見出し */
.map-list li.cat-head {
  flex-direction: row; align-items: center; gap: 6px;
  margin-top: 6px; padding: 5px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-dim); text-transform: none;
  border-left: 3px solid var(--border); border-radius: 0 6px 6px 0;
  background: var(--panel-2);
}
.map-list li.cat-head:first-child { margin-top: 0; }
.map-list li.cat-head .caret { width: 10px; flex: 0 0 auto; }
.map-list li.cat-head .cname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-list li.cat-head .ccount {
  flex: 0 0 auto; padding: 0 6px; border-radius: 9px;
  background: var(--bg); color: var(--text-dim); font-weight: 600;
}
.map-list li.in-cat { margin-left: 8px; }
.map-list li.placeholder { cursor: default; }
.map-list li.placeholder:hover { background: none; }

/* カテゴリ管理ダイアログ */
.cat-manager { min-width: 420px; }
.cat-manager-tools { display: flex; gap: 6px; margin-bottom: 10px; }
.cat-rows { display: flex; flex-direction: column; gap: 2px; }
.cat-rows.trash { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.cat-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
}
.cat-row:hover { background: var(--panel-2); }
.cat-row .cdot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.cat-row .cname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-row .ccount { color: var(--text-dim); font-size: 11px; }
.cat-row .link-btn.danger { color: var(--danger); }

/* ==================== アウトラインパネル ==================== */

#outline {
  position: relative;
  width: 260px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--border);
  min-width: 0;
}
#outline[hidden] { display: none; }

.outline-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 6px 8px 12px; border-bottom: 1px solid var(--border);
}
.outline-title { font-size: 13px; font-weight: 600; flex: 1; }
.outline-count { font-size: 11px; color: var(--text-dim); }

.outline-tools { display: flex; gap: 4px; padding: 6px 8px; }
.outline-tools button { flex: 1; font-size: 11px; padding: 4px 2px; }

.outline-tree { flex: 1; overflow: auto; padding: 2px 4px 10px; }
.outline-empty { color: var(--text-dim); font-size: 12px; padding: 10px 8px; }

.outline-row {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 6px 3px 0; border-radius: 5px;
  cursor: pointer; user-select: none;
  border-top: 2px solid transparent; border-bottom: 2px solid transparent;
}
.outline-row:hover { background: var(--panel-2); }
.outline-row.selected { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.outline-row.dragging { opacity: 0.45; }

/* ドロップ位置の目印: 上下＝兄弟として割り込む / 枠＝その子にする */
.outline-row.drop-before { border-top-color: var(--accent); }
.outline-row.drop-after { border-bottom-color: var(--accent); }
.outline-row.drop-child { box-shadow: inset 0 0 0 2px var(--accent); }

.oc-caret {
  width: 13px; flex: 0 0 13px; text-align: center;
  color: var(--text-dim); font-size: 10px;
}
.oc-caret:hover { color: var(--accent); }
.oc-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; }
.oc-title {
  flex: 1; min-width: 0; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oc-title.empty { color: var(--text-dim); font-style: italic; }
.oc-title[contenteditable="true"] {
  outline: 2px solid var(--accent); border-radius: 4px;
  background: var(--panel-2); text-overflow: clip; cursor: text;
}
.oc-badge {
  font-size: 10px; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 8px; padding: 0 5px;
}
.oc-badge.session { color: var(--accent); border-color: var(--accent); }
.oc-badge.weight { color: var(--accent); border-color: var(--accent); }
.oc-badge.check { font-variant-numeric: tabular-nums; }
.oc-badge.check.done { color: var(--ok); border-color: var(--ok); }

/* 行のチェックボックス */
.oc-check {
  width: 13px; height: 13px; flex: 0 0 13px; margin-right: 1px;
  border: 1.5px solid var(--border); border-radius: 4px;
  font-size: 10px; line-height: 10px; text-align: center;
  color: transparent;
}
.oc-check:hover { border-color: var(--ok); }
.oc-check.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.outline-row.checked .oc-title { text-decoration: line-through; color: var(--text-dim); }

/* 思考フレームの階層番号（1-1-2） */
.oc-no {
  font-size: 10.5px; color: var(--text-dim); flex: 0 0 auto;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}

#outline-resizer {
  position: absolute; top: 0; right: -3px; width: 6px; height: 100%;
  cursor: ew-resize; z-index: 5;
}

#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

#toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.current-map { font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sep { width: 1px; height: 18px; background: var(--border); }
.spacer { flex: 1; }
.save-state { font-size: 11px; color: var(--text-dim); min-width: 60px; text-align: right; }

.menu-wrap { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 4px; min-width: 170px;
  display: flex; flex-direction: column;
}
.dropdown button { background: none; border: none; text-align: left; border-radius: 5px; }
.dropdown button:hover { background: var(--accent-soft); }
.dropdown .dd-title {
  font-size: 11px; color: var(--text-dim); padding: 5px 9px 3px;
}
.dropdown .dd-divider { height: 1px; background: var(--border); margin: 4px 2px; }
.dropdown .dd-hint {
  font-size: 11px; color: var(--text-dim); padding: 4px 9px;
  line-height: 1.6; white-space: pre-line;
}
/* 項目名が長いメニュー（思考フレーム） */
.dropdown.wide { min-width: 270px; }

/* チェック付きメニュー項目（マインドマップの ON/OFF） */
.dropdown button.check::before {
  content: "✓"; display: inline-block; width: 14px; opacity: 0;
}
.dropdown button.check.on::before { opacity: 1; color: var(--accent); }

/* 押し込み表示のツールバーボタン */
button.toggled { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }

/* ==================== テーマ選択メニュー ==================== */

#menu-theme { min-width: 200px; left: auto; right: 0; }
.theme-item {
  display: flex !important; align-items: center; gap: 9px;
  padding: 6px 8px !important;
}
.theme-item.on { background: var(--accent-soft); }
.theme-item .tswatch {
  flex: 0 0 auto; width: 34px; height: 18px; border-radius: 4px;
  border: 1px solid var(--border); overflow: hidden; display: flex;
}
.theme-item .tswatch i { flex: 1; }
.theme-item .tname { flex: 1; }
.theme-item .tkind { font-size: 10px; color: var(--text-dim); }

#findbar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: var(--panel-2); border-bottom: 1px solid var(--border);
}
#find-count { font-size: 11px; color: var(--text-dim); min-width: 70px; }

/* ==================== キャンバス ==================== */

#viewport {
  position: relative; flex: 1; overflow: hidden;
  background-color: var(--canvas-bg);
  cursor: default;
  touch-action: none;
}
#viewport.panning { cursor: grabbing; }
#viewport.connecting { cursor: crosshair; }

/* will-change を常時付けると、ブラウザが world を「一度描いた絵」として保持し、
   拡大縮小はその絵の引き伸ばしになるため文字がかすれる。
   ドラッグ・ズーム中だけ .transforming を付け、止まったら外して描き直させる。 */
#world { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
#world.transforming { will-change: transform; }

#edge-layer, #handle-layer {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: visible;
}
#edge-layer { z-index: 2; }
#handle-layer { z-index: 4; pointer-events: none; }
#handle-layer .hit { pointer-events: auto; }
#group-layer { position: absolute; top: 0; left: 0; z-index: 1; }
#node-layer { position: absolute; top: 0; left: 0; z-index: 3; }

.empty-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); pointer-events: none; font-size: 14px;
}

#rubber {
  position: absolute; z-index: 50;
  border: 1px dashed var(--selection);
  background: var(--accent-soft);
  pointer-events: none;
}

/* ---- ノードカード ---- */
.node {
  position: absolute;
  background: var(--node-bg);
  border: var(--node-border-width) solid var(--node-border);
  border-radius: var(--node-radius);
  overflow: visible;
  cursor: move;
  user-select: none;
  display: flex; flex-direction: column;
  box-shadow: var(--node-shadow);
}
.node.selected { border-color: var(--selection); box-shadow: 0 0 0 2px var(--accent-soft), var(--node-shadow); }
.node.search-hit { outline: 2px solid var(--hit); outline-offset: 1px; }
.node.search-current { outline: 3px solid var(--selection); outline-offset: 2px; }
.node.dimmed { opacity: .35; }

.node-inner { padding: 6px 8px; overflow: hidden; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.node-badges { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; min-height: 0; }
.node-badge {
  font-size: 9px; line-height: 1.4; padding: 0 5px; border-radius: 8px;
  color: #fff; white-space: nowrap;
}
.node-badge.type { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }

/* ---- 思考フレーム（階層番号・比率・MECE の注意） ---- */
.node-badge.no {
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border); font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.node-badge.weight {
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent); font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.node-badge.mece {
  background: var(--hit); color: #1f2328; font-size: 10px; font-weight: 700;
  cursor: help;
}

/* ---- チェック（枝の進み具合） ---- */
.node-badge.check {
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border); font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums; cursor: help;
}
.node-badge.check.done { color: var(--ok, #3fa66a); border-color: currentColor; }

/* ---- ロック（位置・大きさの固定） ---- */
.node-badge.lock {
  background: transparent; border: 1px solid var(--border);
  font-size: 10px; line-height: 1.3; padding: 0 3px; cursor: help;
}
.node-title { font-weight: 600; word-break: break-word; white-space: pre-wrap; }
.node-title[contenteditable="true"] {
  outline: 2px solid var(--accent); border-radius: 4px; cursor: text; background: var(--panel);
  user-select: text; -webkit-user-select: text;
}
.node-content { color: var(--text-dim); word-break: break-word; white-space: pre-wrap; overflow: hidden; flex: 1; }
.node-image { max-width: 100%; min-height: 0; flex: 1 1 auto; border-radius: 4px; object-fit: contain; }
.node.collapsed .node-content,
.node.collapsed .node-image { display: none; }

.node-strip {
  height: 4px; flex: 0 0 auto;
  border-radius: calc(var(--node-radius) - 2px) calc(var(--node-radius) - 2px) 0 0;
}
.node-session-mark {
  position: absolute; right: 4px; top: -8px; font-size: 10px;
  background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 0 6px;
}

/* 内容テキスト内のリンク（URL / claudenote://session/...） */
.node-content a.node-link { color: var(--link); text-decoration: underline; cursor: pointer; }
.node-content a.node-link:hover { filter: brightness(1.2); }

/* ==========================================================================
   付箋（大きなメモの貼り紙 / js/sticky-note.js）

   ふつうのノードと同じ .node の上に .sticky-note を足したもの。
   ・敷物として使うので、ほかのカードより奥に描く。奥行きは z-index ではなく
     **DOM の並び順**で付ける（Canvas.orderStickyNotes）。全ノードに z-index を振ると
     カードごとに重ね合わせの箱ができて、枠からはみ出す −/＋ や ☐ が
     隣のカードの下に潜ってしまうため
   ・本文は Markdown を整形した HTML。はみ出したぶんはカードの中でスクロールする
   ・色を指定していないときは、テーマに合わせた「紙」の色を当てる
   ========================================================================== */
/* 色を指定していない付箋の下地。背景色を選んだ付箋は
   updateNodeEl が inline style を書くので、そちらが勝つ */
.node.sticky-note {
  border-radius: 3px;
  background: var(--sticky-note-bg, #fdf6c8);
  border-color: var(--sticky-note-border, rgba(0, 0, 0, .12));
  box-shadow: 2px 3px 10px rgba(0, 0, 0, .18);
}
.node.sticky-note > .node-inner { padding: 10px 12px; gap: 6px; }
.node.sticky-note .node-title { font-weight: 700; flex: 0 0 auto; }

/* 既定を block にしておくのは、updateNodeEl が付箋のとき style.display = '' で
   インラインの指定を外すため（'none' を書いてあると付箋の本文が消える）。
   ふつうのノードでは JS が 'none' を書いて隠す */
.sticky-note-body {
  /* 本文の中の罫線（表・引用・見出しの下線・区切り線）の色。
     テーマの --border ではなく**その付箋の文字色**から作る。付箋の下地は
     --sticky-note-bg か利用者が選んだカード色で、テーマの面とは別物のため、
     --border だとダークテーマで表の罫線がほとんど見えなくなる（2026-08-12 実描画で確認）。
     currentColor 基準なので、下地に濃い色を選んでも薄い色を選んでも見える。 */
  --sticky-note-rule: color-mix(in srgb, currentColor 30%, transparent);
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  word-break: break-word;
  line-height: 1.6;
  /* 本文の上でも「掴んで動かす」。文字を選んでコピーするのは編集中（textarea）に行う。
     ここだけ選択できるようにすると、ドラッグが選択に化けて付箋が動かせなくなる */
}
.sticky-note-body.raw { white-space: pre-wrap; }
.sticky-note-body.empty { display: flex; align-items: center; justify-content: center; }
.sticky-note-hint { color: var(--text-dim); font-size: 11px; opacity: .8; text-align: center; }

/* ---- 付箋の中の Markdown（メモ画面より詰めた寸法にする） ---- */
.sticky-note-body > :first-child { margin-top: 0; }
.sticky-note-body > :last-child { margin-bottom: 0; }
.sticky-note-body h1, .sticky-note-body h2, .sticky-note-body h3,
.sticky-note-body h4, .sticky-note-body h5, .sticky-note-body h6 {
  margin: .7em 0 .35em; line-height: 1.3; font-weight: 700;
}
.sticky-note-body h1 { font-size: 1.5em; border-bottom: 1px solid var(--sticky-note-rule); padding-bottom: .15em; }
.sticky-note-body h2 { font-size: 1.3em; border-bottom: 1px solid var(--sticky-note-rule); padding-bottom: .12em; }
.sticky-note-body h3 { font-size: 1.15em; }
.sticky-note-body h4, .sticky-note-body h5, .sticky-note-body h6 { font-size: 1em; }
.sticky-note-body p { margin: .45em 0; }
.sticky-note-body ul, .sticky-note-body ol { margin: .4em 0; padding-left: 1.4em; }
.sticky-note-body li { margin: .12em 0; }
/* チェックボックスは <li> ではなく段落の中に <br> 区切りで並ぶ
   （NoteMarkdownService が CommonMark より先に HTML 化するため） */
.sticky-note-body input.todo-check { margin: 0 .4em 0 0; vertical-align: -1px; cursor: pointer; }
.sticky-note-body blockquote {
  margin: .5em 0; padding: .1em .8em;
  border-left: 3px solid var(--sticky-note-rule); opacity: .85;
}
.sticky-note-body code {
  font-family: Consolas, 'Courier New', monospace; font-size: .92em;
  background: var(--code-bg, rgba(127, 127, 127, .16)); border-radius: 3px; padding: .05em .3em;
}
.sticky-note-body pre {
  margin: .5em 0; padding: .5em .7em; border-radius: 5px; overflow-x: auto;
  background: var(--code-bg, rgba(127, 127, 127, .16));
}
.sticky-note-body pre code { background: none; padding: 0; }
.sticky-note-body table { border-collapse: collapse; margin: .5em 0; font-size: .95em; }
.sticky-note-body th, .sticky-note-body td { border: 1px solid var(--sticky-note-rule); padding: .25em .6em; }
.sticky-note-body th { background: rgba(127, 127, 127, .12); font-weight: 700; }
.sticky-note-body hr { border: none; border-top: 1px solid var(--sticky-note-rule); margin: .7em 0; }
.sticky-note-body img { max-width: 100%; border-radius: 4px; cursor: zoom-in; }
.sticky-note-body a.node-link { color: var(--link); text-decoration: underline; cursor: pointer; }
.sticky-note-body a.node-link:hover { filter: brightness(1.2); }

/* ---- 本文の編集（カードにかぶせる textarea） ---- */
.node.sticky-note.editing { z-index: 20; }
.sticky-note-edit {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; margin: 0;
  padding: 10px 12px 26px;
  box-sizing: border-box; resize: none;
  border: 2px solid var(--accent); border-radius: 3px;
  background: var(--panel); color: var(--text);
  font-family: Consolas, 'Courier New', monospace; font-size: 12px; line-height: 1.6;
  white-space: pre-wrap;
  user-select: text; -webkit-user-select: text; cursor: text;
}
.sticky-note-edit:focus { outline: none; }
.sticky-note-edit-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 5px;
  padding: 2px 8px; font-size: 10px; line-height: 1.6;
  color: var(--text-dim); background: var(--panel);
  border-top: 1px solid var(--border);
  border-radius: 0 0 3px 3px;
  pointer-events: none;
}
.sticky-note-edit-bar .key {
  border: 1px solid var(--border); border-radius: 3px; padding: 0 4px;
  font-family: Consolas, monospace; color: var(--text);
}

/* 折りたたみボタン（子ノードを持つノードの右上） */
.collapse-btn {
  position: absolute; right: -8px; top: -8px; z-index: 7;
  width: 18px; height: 18px; padding: 0; line-height: 1;
  border-radius: 50%; border: 1px solid var(--node-border);
  background: var(--panel); color: var(--text);
  font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.collapse-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---- チェックボックス（カード左上） ----
   既定ではホバー・選択中・チェック済みのときだけ出る。
   「表示」メニューの「チェックボックスを常に表示」で #viewport.show-checks が付く。 */
.check-btn {
  position: absolute; left: -8px; top: -8px; z-index: 7;
  width: 18px; height: 18px; padding: 0; line-height: 1;
  border-radius: 5px; border: 1.5px solid var(--node-border);
  background: var(--panel); color: transparent;
  font-size: 12px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .1s linear;
}
.node:hover .check-btn,
.node.selected .check-btn,
#viewport.show-checks .check-btn,
.check-btn.on { opacity: 1; }
.check-btn:hover { border-color: var(--ok); color: var(--ok); }
.check-btn.on { background: var(--ok); border-color: var(--ok); color: #fff; }

/* チェック済みのカード: タイトルに取り消し線、枠を確認色に */
.node.checked { border-color: var(--ok); }
.node.checked .node-title { text-decoration: line-through; text-decoration-thickness: 1.5px; }
#viewport.dim-checked .node.checked { opacity: .55; }
#viewport.dim-checked .node.checked.selected { opacity: 1; }

/* 接続先の候補（ドラッグ中／スティッキー接続中のハイライト） */
.node.connect-target { border-color: var(--hit); box-shadow: 0 0 0 3px var(--accent-soft); }
/* 繋ぎ替え候補では、吸着先が分かるよう接続点を強調する */
.node.connect-target .anchor { background: var(--hit); }

/* スティッキー接続中のヒント */
#sticky-hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 55;
  padding: 5px 14px; border-radius: 16px; font-size: 12px;
  background: var(--panel); border: 1px solid var(--accent); color: var(--text);
  box-shadow: var(--shadow); pointer-events: none;
}

/* 接続点（アンカー）: 未選択ノードのホバー時、またはエッジ選択時に表示 */
.node .anchor { display: none; }
.node:hover:not(.selected) .anchor,
.node.connect-target .anchor,
.node.show-anchors .anchor { display: block; }

/* リサイズハンドル: 選択中のみ表示 */
.node .resizer { display: none; }
.node.selected .resizer { display: block; }

/* ロック中: 掴めないことが分かるように、カーソルとサイズ変更つまみを止める
   （接続点は残す。ロックが縛るのは位置と大きさだけ） */
.node.locked { cursor: default; }
.node.locked .resizer { display: none !important; }

.anchor {
  position: absolute; width: 9px; height: 9px; margin: -5px 0 0 -5px;
  background: var(--accent); border: 1.5px solid var(--anchor-ring); border-radius: 50%;
  cursor: crosshair; z-index: 6;
}
.anchor:hover { transform: scale(1.45); }

/* リサイズハンドル */
.resizer {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: var(--resizer-bg); border: 1.5px solid var(--selection); z-index: 6;
}

/* グループ枠 */
.group-frame {
  position: absolute;
  border: 1.5px dashed var(--group);
  border-radius: 12px;
  background: var(--group-fill);
  pointer-events: none;
}
.group-frame.active { border-style: solid; background: var(--group-fill-active); }
.group-frame.selected { border-color: var(--selection); background: var(--accent-soft); }
/* 枝（サブツリー）のグループは実線寄りにして、手で束ねたグループと見分ける */
.group-frame.branch { border-style: solid; border-width: 1.5px; }
.group-frame .group-name {
  position: absolute; top: -9px; left: 10px; font-size: 10px;
  background: var(--canvas-bg); padding: 0 6px; color: var(--group);
  pointer-events: auto; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.group-frame .group-name.branch::before { content: '⌥'; opacity: .75; }
.group-frame .group-name:hover { color: var(--accent); text-decoration: underline; }
.group-frame.selected .group-name { color: var(--selection); }

/* 枠の縁だけを掴めるようにする帯（中はクリックが素通りしてノードに届く） */
.group-frame .group-edge { position: absolute; pointer-events: auto; }
.group-frame .group-edge.top { left: 0; right: 0; top: -5px; height: 11px; cursor: move; }
.group-frame .group-edge.bottom { left: 0; right: 0; bottom: -5px; height: 11px; cursor: move; }
.group-frame .group-edge.left { top: 0; bottom: 0; left: -5px; width: 11px; cursor: move; }
.group-frame .group-edge.right { top: 0; bottom: 0; right: -5px; width: 11px; cursor: move; }

/* 折りたたみ / 展開ボタン（枠の右上・たたんだカードの右端） */
.group-collapse-btn {
  position: absolute; top: -10px; right: 8px; width: 18px; height: 18px; padding: 0;
  border-radius: 50%; border: 1px solid var(--group);
  background: var(--canvas-bg); color: var(--group);
  font-size: 12px; line-height: 1; cursor: pointer; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
}
.group-collapse-btn:hover { background: var(--group); color: var(--canvas-bg); }

/* 折りたたんだグループ（1 枚のカードにまとまる） */
.group-collapsed {
  position: absolute; display: flex; flex-direction: column; justify-content: center;
  gap: 2px; padding: 4px 26px 4px 12px; border-radius: 10px;
  border: 1.5px solid var(--group); background: var(--group-fill-active);
  color: var(--group); cursor: move; user-select: none; pointer-events: auto;
  box-sizing: border-box; overflow: hidden;
}
.group-collapsed.selected { border-color: var(--selection); box-shadow: 0 0 0 2px var(--accent-soft); }
.group-collapsed .group-collapsed-name {
  font-size: 12px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.group-collapsed .group-collapsed-count { font-size: 10px; opacity: .75; }
.group-collapsed .group-collapse-btn { top: 50%; right: 6px; margin-top: -9px; }

/* エッジ */
#edge-layer path.edge-hit { stroke: transparent; stroke-width: 14; fill: none; cursor: pointer; }
#edge-layer path.edge-line { fill: none; stroke-linecap: round; pointer-events: none; }
#edge-layer path.edge-line.selected { stroke: var(--selection) !important; }
#edge-layer .edge-label {
  font-size: 11px; fill: var(--text); paint-order: stroke;
  stroke: var(--canvas-bg); stroke-width: 3px; stroke-linejoin: round;
  pointer-events: none; user-select: none;
}
#edge-layer path.arrow { pointer-events: none; }
#handle-layer circle.ctrl { fill: var(--ctrl); stroke: var(--ctrl-ring); stroke-width: 1.5; cursor: move; }
/* 端点ハンドル: 始点は白抜き・終点は塗りつぶしで向きが分かるようにする */
#handle-layer circle.endpoint { fill: var(--danger); stroke: var(--ctrl-ring); stroke-width: 2; cursor: grab; }
#handle-layer circle.endpoint.source { fill: var(--ctrl-ring); stroke: var(--danger); }
#handle-layer circle.endpoint:hover { stroke-width: 3; }
#handle-layer circle.endpoint-preview {
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 3; pointer-events: none;
}
#handle-layer line.ctrl-line { stroke: var(--ctrl); stroke-dasharray: 3 3; stroke-width: 1; }
#handle-layer path.temp-edge { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; fill: none; }

/* ==================== ステータスバー ==================== */

#statusbar {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 12px; font-size: 11px; color: var(--text-dim);
  background: var(--panel); border-top: 1px solid var(--border);
}

/* チェックの進み具合（クリックで次の未チェックへ） */
.check-state {
  padding: 1px 7px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.check-state:hover { border-color: var(--ok); color: var(--ok); }
.check-state.done { color: var(--ok); border-color: var(--ok); }

/* グリッド吸着が有効なときだけ出る目印 */
.grid-state {
  padding: 1px 7px; border-radius: 9px;
  border: 1px solid var(--border);
  color: var(--accent); white-space: nowrap;
}

/* ==================== 右クリックメニュー ==================== */

.ctxmenu {
  position: fixed; z-index: 200; min-width: 190px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px;
}
.ctxmenu .item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 9px; border-radius: 5px; cursor: pointer; position: relative;
  white-space: nowrap;
}
.ctxmenu .item:hover { background: var(--accent-soft); }
.ctxmenu .item.danger { color: var(--danger); }
.ctxmenu .item .sub-caret { margin-left: auto; opacity: .6; }
.ctxmenu .divider { height: 1px; background: var(--border); margin: 4px 2px; }
.ctxmenu .submenu { position: fixed; z-index: 201; }
.ctxmenu .swatch { width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--border); }

/* ==================== 浮くパレット（編集道具） ====================
   選択したカード・接続のそばに出るツールバー。
   バー（アイコンの並び）＋引き出し（押した道具の中身）の 2 段構え。
   右クリックメニュー（.ctxmenu, z-index 200）より下、モーダル（300）より下。 */

.palette {
  position: fixed; z-index: 190;
  display: flex; flex-direction: column; gap: 6px;
  max-width: min(94vw, 560px);
  /* バーの真上に引き出しを出したいので、下寄せ配置が既定 */
  align-items: flex-start;
}
/* display:flex は [hidden] の display:none より強いので、明示的に消す */
.palette[hidden] { display: none; }
/* カードの下に回り込んだときは、バー → 引き出し の順に並べる */
.palette.below { flex-direction: column; }
.palette:not(.below) { flex-direction: column-reverse; }

.palette-bar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 4px 5px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow);
}
.pal-btn {
  min-width: 28px; height: 28px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  color: var(--text); cursor: pointer;
}
.pal-btn:hover { background: var(--accent-soft); }
.pal-btn.on { background: var(--accent-soft); border-color: var(--accent); }
.pal-btn.danger { color: var(--danger); }
.pal-sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }

.palette-drawer {
  min-width: 240px; max-width: min(94vw, 560px); max-height: 46vh; overflow-y: auto;
  padding: 6px 9px 9px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow);
}
.pal-drawer-head {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.pal-drawer-title { font-size: 12px; font-weight: 600; }
.pal-x {
  margin-left: auto; background: transparent; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 12px; padding: 0 2px;
}
.pal-x:hover { color: var(--text); }

.pal-sec { margin-bottom: 7px; }
.pal-sec:last-child { margin-bottom: 0; }
.pal-sec-t { font-size: 10.5px; color: var(--text-dim); margin-bottom: 4px; }
.pal-sec-b { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.pal-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; font-size: 11.5px; line-height: 1.5;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 13px;
  color: var(--text); cursor: pointer; white-space: nowrap;
}
.pal-chip:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.pal-chip.on { border-color: var(--accent); background: var(--accent-soft); }
.pal-chip.danger { color: var(--danger); }
.pal-chip:disabled { opacity: .4; cursor: default; }
.pal-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--border); }

.pal-swatches { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.pal-sw {
  width: 20px; height: 20px; border-radius: 5px;
  border: 1px solid var(--border); cursor: pointer; padding: 0;
}
.pal-sw:hover { transform: scale(1.12); }
.pal-sw.on { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ==================== モーダル ==================== */

#modal-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0, 0, 0, .42);
  display: flex; align-items: center; justify-content: center;
}
#modal {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow);
  min-width: 340px; max-width: min(760px, 92vw); max-height: 88vh;
  display: flex; flex-direction: column;
}
.modal-head { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; }
.modal-body { padding: 14px 16px; overflow-y: auto; }
.modal-foot {
  padding: 10px 16px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end;
}

.form-grid { display: grid; grid-template-columns: auto 1fr; gap: 9px 12px; align-items: center; }
.form-grid label { color: var(--text-dim); white-space: nowrap; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid textarea { width: 100%; min-height: 110px; resize: vertical; }
.form-grid input[type="text"], .form-grid input[type="search"], .form-grid select { width: 100%; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hint { font-size: 11px; color: var(--text-dim); }

.session-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.session-list div { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--border); }
.session-list div:last-child { border-bottom: none; }
.session-list div:hover { background: var(--accent-soft); }
.session-list .sub { font-size: 11px; color: var(--text-dim); }

/* ==================== MECE チェック ==================== */
.mece-body { min-width: 460px; max-width: 620px; }
.mece-ok { padding: 18px 4px; color: var(--accent); font-weight: 600; }
.mece-list {
  margin-top: 8px; max-height: 380px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 6px;
}
.mece-row {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 10px; cursor: pointer; font-size: 12.5px; line-height: 1.5;
  border-bottom: 1px solid var(--border);
}
.mece-row:last-child { border-bottom: none; }
.mece-row:hover { background: var(--accent-soft); }
.mece-icon { flex: 0 0 16px; font-weight: 700; }
.mece-row.error .mece-icon { color: var(--danger); }
.mece-row.warn .mece-icon { color: var(--hit); }

.help-body { line-height: 1.75; white-space: pre-wrap; font-size: 12px; max-height: 62vh; }
.help-body b { color: var(--accent); }

/* CSV 取り込みダイアログ */
.csv-import { min-width: min(70vw, 460px); display: flex; flex-direction: column; gap: 9px; }
.csv-info { white-space: pre-line; font-size: 12px; color: var(--text-dim); line-height: 1.6; }
.csv-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.csv-check input[type="text"] { flex: 1; }
.csv-modes {
  display: flex; flex-direction: column; gap: 5px;
  border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
}
.csv-preview {
  margin: 0; padding: 8px 10px; max-height: 240px; overflow: auto;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  font-size: 11.5px; line-height: 1.65; white-space: pre;
}

/* Markdown 取り込みダイアログ（CSV の見た目を引き継ぐ） */
.md-import { min-width: min(80vw, 580px); }
.md-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.md-tabs button {
  border: none; background: none; color: var(--text-dim);
  padding: 6px 12px; border-radius: 6px 6px 0 0; font-size: 12.5px;
}
.md-tabs button:hover { background: var(--accent-soft); }
.md-tabs button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.md-pane { display: flex; flex-direction: column; gap: 7px; }
.md-paste {
  width: 100%; min-height: 160px; resize: vertical; box-sizing: border-box;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Courier New", monospace;
  font-size: 12px; line-height: 1.6;
}
.md-file { display: flex; align-items: center; gap: 10px; }
.md-file .name { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; }
.md-notes {
  max-height: 190px; overflow: auto;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2);
}
.md-notes > div {
  padding: 5px 9px; font-size: 12.5px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.md-notes > div:last-child { border-bottom: none; }
.md-notes > div:hover { background: var(--accent-soft); }
.md-notes > div.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.md-notes > div.dim { color: var(--text-dim); cursor: default; }
.md-notes > div.dim:hover { background: none; }
.md-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.md-opts .csv-check { flex: none; }

/* ==================== ノードのひな形 ==================== */

/* ツールバーの「ノード追加 ▾」（本体ボタン＋ ▾ ボタン） */
.split-btn { display: flex; }
.split-btn > button:first-of-type { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-btn > .caret-btn {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-left: none; padding: 5px 7px; color: var(--text-dim);
}
.split-btn > .caret-btn:hover { color: var(--text); }

/* 一覧・メニューに出す色見本 */
.tpl-swatch {
  display: inline-block; width: 11px; height: 11px; margin-right: 7px;
  border-radius: 3px; border: 1px solid var(--border); vertical-align: -1px;
  flex: 0 0 auto;
}

.tpl-manager { display: flex; gap: 14px; min-width: min(76vw, 660px); }

.tpl-side { width: 190px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.tpl-list {
  list-style: none; margin: 0; padding: 4px; flex: 1; min-height: 180px; max-height: 52vh;
  overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2);
}
.tpl-list li {
  display: flex; align-items: center; padding: 6px 8px; border-radius: 5px; cursor: pointer;
}
.tpl-list li:hover { background: var(--accent-soft); }
.tpl-list li.active { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.tpl-list li.empty { color: var(--text-dim); font-size: 11.5px; cursor: default; }
.tpl-list li.empty:hover { background: none; }
.tpl-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-side-tools { display: flex; gap: 4px; flex-wrap: wrap; }
.tpl-side-tools button { padding: 4px 8px; font-size: 12px; }

.tpl-edit { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tpl-preview {
  position: relative; overflow: auto;
  border: 1px solid var(--border); border-radius: 6px;
  background-color: var(--canvas-bg);
}
/* プレビューではドラッグしないので、接続点・リサイズ枠・カーソルは出さない */
.tpl-preview .node { cursor: default; }
.tpl-preview .anchor, .tpl-preview .resizer,
.tpl-preview .collapse-btn, .tpl-preview .check-btn { display: none !important; }

/* 画像ビューア */
.image-viewer { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.image-viewer img { max-width: min(70vw, 880px); max-height: 68vh; border-radius: 6px; }

/* 共有リンクのダイアログ（発行・確認・停止） */
.share-dialog { min-width: min(78vw, 620px); }
.share-new { display: flex; gap: 8px; margin: 10px 0 14px; }
.share-new input { flex: 1 1 auto; min-width: 0; }
.share-list { display: flex; flex-direction: column; gap: 10px; max-height: 48vh; overflow-y: auto; }
.share-row {
  border: 1px solid var(--border); border-radius: 8px; padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
/* 停止した札は薄く。消さずに残すのは「いつ止めたか」を追えるようにするため */
.share-row.off { opacity: .6; }
.share-row-head { display: flex; align-items: center; gap: 8px; }
.share-label { font-weight: 600; }
.share-state {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}
.share-row.off .share-state { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.share-url { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.share-row-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.share-info { color: var(--text-dim); font-size: 11px; margin-left: auto; }

/* 会話ビューア */
.session-view { max-height: 66vh; min-width: min(70vw, 720px); }
.session-view-head { margin-bottom: 10px; }
.session-view-head .name { font-weight: 600; font-size: 14px; }
.session-view-head .sub { font-size: 11px; color: var(--text-dim); }
.session-view .msg {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 10px; background: var(--panel-2);
}
.session-view .role { font-size: 11px; color: var(--text-dim); margin: 4px 0 2px; }
.session-view .text { white-space: pre-wrap; word-break: break-word; }

/* ==================== AI アシスタントパネル ==================== */
/* 色はすべてテーマ変数から取るので、6 テーマすべてでそのまま馴染む */

#ai-panel {
  position: relative;
  width: 340px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--border);
  min-width: 0;
}
#ai-panel[hidden] { display: none !important; }
#ai-panel.busy { opacity: .75; }

#ai-resizer {
  position: absolute; top: 0; left: -3px; width: 6px; height: 100%;
  cursor: ew-resize; z-index: 5;
}

#btn-ai.active { background: var(--accent-soft); border-color: var(--accent); }

.ai-head {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 6px 8px 12px; border-bottom: 1px solid var(--border);
}
.ai-title { font-size: 13px; font-weight: 600; }
.ai-model {
  flex: 1; min-width: 0; font-size: 10.5px; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-model.off { color: var(--danger); }

.ai-tasks { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px 4px; }
.ai-task { font-size: 11.5px; padding: 3px 8px; }
.ai-task.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.ai-desc { padding: 2px 12px 6px; font-size: 11px; color: var(--text-dim); line-height: 1.45; }

.ai-input {
  margin: 0 10px; resize: vertical; min-height: 62px;
  font-size: 12.5px; line-height: 1.5;
}

.ai-check {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 12px 3px; font-size: 11.5px; color: var(--text-dim);
}
.ai-check input { margin: 0; }
.ai-sel-count { color: var(--text-dim); }
.ai-sel-count.warn { color: var(--danger); }

.ai-run-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px; }
.ai-run-row .primary { flex: 1; }
.ai-run-row .hint { font-size: 10.5px; color: var(--text-dim); }

.ai-status {
  margin: 0 10px 8px; padding: 6px 8px; border-radius: 6px;
  background: var(--panel-2); font-size: 11.5px; color: var(--text-dim);
  white-space: pre-wrap; word-break: break-word;
}
.ai-status.error { color: var(--danger); border: 1px solid var(--danger); }

.ai-result { flex: 1; overflow: auto; padding: 0 10px 14px; }
.ai-summary { font-size: 12.5px; line-height: 1.6; margin-bottom: 8px; }
.ai-answer {
  font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; margin-bottom: 4px;
}
.ai-warn { font-size: 11px; color: var(--hit); margin: 3px 0; line-height: 1.45; }
.ai-empty { font-size: 12px; color: var(--text-dim); padding: 8px 2px; }
.ai-meta { font-size: 10px; color: var(--text-dim); text-align: right; margin-top: 10px; }

.ai-proposal {
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--panel-2); padding: 8px 10px; margin-bottom: 8px;
}
.ai-proposal.done { opacity: .6; border-color: var(--accent); }
.ai-p-title { font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.ai-p-detail { font-size: 11.5px; color: var(--text-dim); line-height: 1.55; }
.ai-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ai-actions .primary { font-size: 11.5px; padding: 4px 10px; }
.ai-nops { font-size: 11px; color: var(--text-dim); }

.ai-ops { margin: 6px 0 0; padding-left: 16px; }
.ai-ops li {
  font-size: 11px; color: var(--text-dim); line-height: 1.55;
  word-break: break-word; margin-bottom: 2px;
}

/* 実行履歴ダイアログ */
.ai-history { max-height: 60vh; min-width: min(70vw, 560px); overflow: auto; }
.ai-hrow { border-bottom: 1px solid var(--border); padding: 8px 2px; }
.ai-hhead { display: flex; align-items: center; gap: 6px; }
.ai-htask { font-size: 12px; font-weight: 600; }
.ai-hdate { flex: 1; font-size: 11px; color: var(--text-dim); }
.ai-hbadge {
  font-size: 10px; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 8px; padding: 0 6px;
}
.ai-hbadge.err { color: var(--danger); border-color: var(--danger); }
.ai-hinst { font-size: 11.5px; margin-top: 3px; word-break: break-word; }
.ai-hsum { font-size: 11px; color: var(--text-dim); margin-top: 2px; word-break: break-word; }

/* 設定ダイアログ */
.ai-settings { min-width: min(70vw, 480px); }
.ai-srow { display: flex; gap: 10px; padding: 4px 0; font-size: 12px; }
.ai-skey { width: 120px; flex: 0 0 120px; color: var(--text-dim); }
.ai-sval { flex: 1; word-break: break-all; }
.ai-help {
  margin-top: 10px; padding: 9px 11px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.6; white-space: pre-wrap;
}

/* ==================== トースト ==================== */

#toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 400; padding: 9px 18px; border-radius: 20px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow);
}
#toast.error { border-color: var(--danger); color: var(--danger); }

/* ==================== 📥 バージョンアップ ====================

   新しいビルドが配信されたことを知らせる帯と、その確認ダイアログ。
   配線は js/app-version.js（全ページが最後に読む）。
   全画面が app.css を読むので、ここに置けば .topbar 系（マップ・メモ・会話）と
   .page-head 系（横断検索・しおり・ゴミ箱・バックアップ）の両方に効く。
   ============================================================ */

/* 帯を出している間だけ body を縦フレックスにして、本体を帯のぶん縮める。
   body は overflow:hidden で #app / #page は height:100% なので、
   .topbar と同じ方式にしないと下端がはみ出して切れる */
body.cn-has-update-banner { display: flex; flex-direction: column; }
body.cn-has-update-banner > #app,
body.cn-has-update-banner > #page { flex: 1 1 auto; min-height: 0; height: auto; }

.cn-update-banner {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; padding: 6px 12px;
  background: var(--accent-soft);
  border-bottom: 2px solid var(--accent);
  font-size: 12px;
  z-index: 60;
}
.cn-update-banner .cn-update-msg { font-weight: 600; white-space: nowrap; }
.cn-update-banner .cn-update-when { color: var(--text-dim); white-space: nowrap; }
.cn-update-banner button { font-size: 12px; }
.cn-update-banner button.cn-update-later { background: none; color: var(--text-dim); }

/* 📥 ボタン。更新があるときだけ右肩に NEW を出す */
.cn-update-btn { position: relative; overflow: visible; }
.cn-update-btn.has-update { border-color: var(--accent); }
.cn-update-badge {
  position: absolute; top: -7px; right: -9px;
  padding: 0 4px; border-radius: 7px;
  background: var(--accent); color: var(--on-accent);
  font-size: 9px; font-weight: 700; line-height: 14px;
  pointer-events: none;
}

/* ダイアログ。各画面の #modal は画面ごとの状態に結びついているため、
   どのページからでも同じように出せるよう専用の器を持つ */
.cn-update-backdrop {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0, 0, 0, .42);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.cn-update-modal {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow);
  width: min(520px, 100%); max-height: 88vh;
  display: flex; flex-direction: column;
}
.cn-update-head {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-weight: 600; color: var(--accent);
}
.cn-update-body { padding: 14px 16px; overflow-y: auto; line-height: 1.7; }
.cn-update-lead { margin: 0 0 10px; }
.cn-update-table { border-collapse: collapse; font-size: 12px; margin-bottom: 12px; }
.cn-update-table th {
  text-align: left; font-weight: 400; color: var(--text-dim);
  padding: 2px 16px 2px 0; white-space: nowrap;
}
.cn-update-table td { padding: 2px 0; }
.cn-update-table td.is-new { font-weight: 700; color: var(--accent); }
.cn-update-note {
  padding: 9px 11px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.6; color: var(--text-dim);
}
.cn-update-note.warn {
  border-color: var(--danger); color: var(--danger); background: none;
}
.cn-update-foot {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--border);
}

/* ==================== 👤 利用者メニューとログイン切れの帯（js/auth.js） ====================

   全画面が読む js/auth.js が動的に挿すので、CSS も全画面が読む app.css に置く。
   ログイン画面そのものの見た目は css/login.css。
   ==================================================================== */

/* ---------- ログインが切れたときの帯 ---------- */

/* 帯は body の先頭に入る。上部メニューバーのある画面は body が縦フレックスなので
   そのまま最上段に積まれ、無い画面でも通常フローの先頭に出る */
.auth-notice {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  background: color-mix(in srgb, var(--danger) 14%, var(--panel));
  border-bottom: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--text);
  font-size: 12.5px;
}
.auth-notice-text { flex: 1 1 auto; min-width: 0; }
.auth-notice-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 13px; line-height: 1; padding: 5px 7px; border-radius: 5px; cursor: pointer;
}
.auth-notice-close:hover { color: var(--text); background: var(--panel-2); }

/* ---------- 👤 メニュー ---------- */

.auth-menu { min-width: 210px; left: auto; right: 0; }
.auth-menu-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 9px 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.auth-menu-head strong { font-size: 12.5px; }
.auth-menu-dim { font-size: 10.5px; color: var(--text-dim); }

/* a と button が混ざるので、見た目をここで揃える */
.auth-menu-item {
  display: block; text-align: left;
  padding: 6px 9px; border-radius: 5px;
  font-size: 12.5px; color: var(--text); text-decoration: none;
  background: none; border: none; cursor: pointer;
}
.auth-menu-item:hover { background: var(--accent-soft); color: var(--text); }

/* ==================== 狭い画面（スマホ・小さいタブレット） ====================

   境目は 760px。**js/mobile.js が同じ値を持っているので片方だけ変えないこと**
   （CSS が並べ替えを、JS が開け閉め = body.nav-open / body.tools-open を持つ）。

   考え方:
   - 幅を食う常設の柱（マップ一覧・アウトライン・AI）は「重ねる引き出し」にする
   - ツールバーは既定でよく使う数個だけ出し、残りは ⋯ で開く
     （20 個超が折り返すと縦を 4 段食い、キャンバスが残らない）
   - 引き出しメニュー・右クリックメニューは画面下の帯に置く
     （ボタンの真下だと画面外へはみ出し、指も届きにくい）
   - 指で押す大きさは幅ではなく入力装置（pointer: coarse）で決める。
     マウスの繋がった小さい窓まで太らせない
   ========================================================================= */

/* ---------- 指で押す前提の大きさ ---------- */
@media (pointer: coarse) {
  button { min-height: 34px; }
  button.icon-btn { min-width: 36px; }
  .dropdown button { padding: 9px 10px; }
  .ctxmenu .item { padding: 10px 11px; }
  .pal-btn { min-width: 34px; height: 34px; font-size: 16px; }
  .pal-chip { padding: 6px 11px; }
  .pal-sw { width: 26px; height: 26px; }
  .map-list li { padding: 10px 9px; }
  .outline-row { padding: 7px 6px 7px 0; }
  .oc-check { width: 18px; height: 18px; flex: 0 0 18px; line-height: 15px; font-size: 12px; }
  .conv-hit { padding: 8px 7px; }
}

/* ---------- 画面の幅で変えるもの ---------- */

/* ☰（一覧）・⋯（ほかの道具）・✕（引き出しを閉じる）は狭い画面専用。
   js/mobile.js が差し込むので、広い画面では出さない */
#btn-nav, #btn-tools, #sidebar-close { display: none; }

@media (max-width: 760px) {
  /* iOS は URL バーの出入りで 100% の高さが伸び縮みする。dvh があればそちらを使う */
  html, body { height: 100dvh; }

  /* 16px 未満の入力欄に触れると iOS が勝手に画面を拡大する */
  input, select, textarea { font-size: 16px; }

  #btn-nav, #btn-tools, #sidebar-close {
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ---- 上の帯 ----

     狭い画面では**この帯だけが他の画面（メモ・会話・検索…）への入口**なので、
     何があっても消さない。実際に消えていた経路が 2 つあった:

     1. 単体表示（⛶）。広い画面では「一覧とメニューバーを畳んで場所を作る」道具だが、
        狭い画面では一覧が元々引き出しなので、稼げるのは帯の 40px だけ。
        引き換えにメモ・会話へ行く手段が全部消え、しかも localStorage に
        記憶されるので開き直しても直らない。
        → 帯は出したままにし、意味の無くなった ⛶ 自体を隠す（後段）
     2. 移動リンクのはみ出し。390px では 7 本で 73px あふれ、
        右端の 🔖 🗑 💾 が切れる（横スクロールできるが掴み手を隠してあるので気付けない）。
        → 「Claude Note」の字を落とし、リンクの内側の余白を詰めて収める */
  .topbar { padding: 5px 8px; gap: 6px; }
  .topbar .brand { min-width: 0; overflow: hidden; }
  .topbar .brand .page-name { overflow: hidden; text-overflow: ellipsis; }
  /* アプリ名は畳んで、いまどの画面かを示す名前だけ残す。
     共有ページは移動リンクを持たない（あふれない）ので、名乗りをそのまま出す */
  body:not(.share-page) .topbar .brand .brand-name { display: none; }
  .topbar .nav-link { padding: 4px 5px; }

  /* 単体表示にしても帯は消さない（上のコメント 1 の理由）。
     .map-solo の規則より後に書いて勝たせる */
  body.map-solo > .topbar { display: flex; }
  /* 消せるものが無くなるので ⛶ 自体を出さない。
     すでに単体表示のまま保存されている端末でも、上の規則で帯は戻る */
  #btn-solo { display: none; }

  /* ---- マップ一覧: 左から出る引き出しにする ---- */
  #sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 120;
    /* 幅ドラッグで覚えたインライン幅を打ち消す（指では掴めない部品なので使わない） */
    width: min(86vw, 320px) !important;
    transform: translateX(-101%);
    transition: transform .18s ease;
    box-shadow: var(--shadow);
  }
  body.nav-open #sidebar { transform: none; }
  /* 単体表示でも引き出しは使えるようにする（でないとマップを替えられない）。
     .map-solo が #sidebar を消す規則より強く書く */
  body.is-mobile.map-solo #sidebar { display: flex; }
  #sidebar-resizer { display: none; }

  /* 引き出しの足元の並び（ゴミ箱・タグ管理…）は折り返させる。
     折り返さないと幅からはみ出し、閉じている引き出し（左へ 101% ずらしてある）の
     はみ出した部分が画面の左端に貼り付いて見える（会話画面の4個で実際に出た） */
  .sidebar-foot { flex-wrap: wrap; }

  #drawer-backdrop { position: fixed; inset: 0; z-index: 119; background: rgba(0, 0, 0, .42); }

  /* ---- アウトライン・AI パネル: 画面いっぱいに重ねる（自前の ✕ で閉じる） ---- */
  #outline, #ai-panel {
    position: fixed; inset: 0; z-index: 118;
    width: auto !important; border: none;
  }
  #outline-resizer, #ai-resizer { display: none; }

  /* ---- 上の帯: よく使う数個 ＋ ⋯ ----
     どの帯を畳むかは HTML の data-mobile-bar が決める
     （マップは #toolbar、メモは題名の行）。js/mobile.js が同じ印を見る。

     隠す側だけを書き、⋯ を開いた状態では**何も指定しない**のが要点。
     display:revert で出し直すと .menu-wrap の inline-flex まで巻き戻って
     ボタンの並びが縦積みになる。[hidden] の要素も隠れたままにできる */
  #toolbar { gap: 5px; padding: 5px 7px; }
  body:not(.tools-open) [data-mobile-bar] > *:not([data-m="keep"]) { display: none; }
  /* 帯の外にあって ⋯ で一緒に出す部品（メモのタグ行など）。
     .editor-row 等より詳しく書いて、後から読む notes.css にも勝たせる */
  body:not(.tools-open) [data-m="fold"] { display: none; }
  body.tools-open [data-mobile-bar] { max-height: 46vh; overflow-y: auto; }
  .current-map { max-width: 34vw; font-size: 12.5px; }

  /* ---- 引き出しメニュー（▾）と右クリックメニューは画面下の帯にする ----
     #menu-theme のように id で位置を決めている規則や、
     JS が付ける left/top（インライン）を上書きするため !important を使う
     （作者スタイルの !important はインラインより強い） */
  .dropdown:not([hidden]) {
    position: fixed !important;
    left: 8px !important; right: 8px !important;
    top: auto !important; bottom: 8px !important;
    max-height: 62vh; overflow-y: auto; z-index: 210;
  }
  .ctxmenu {
    left: 8px !important; right: 8px !important;
    top: auto !important; bottom: 8px !important;
    max-height: 66vh; overflow-y: auto; min-width: 0;
  }
  .ctxmenu .item { white-space: normal; }

  /* ---- 浮くパレット・モーダル ---- */
  .palette { max-width: calc(100vw - 16px); }
  .palette-drawer { min-width: 0; max-width: calc(100vw - 16px); }
  #modal { min-width: 0; width: 96vw; max-width: 96vw; max-height: 92vh; }
  .cat-manager, .mece-body, .csv-import, .md-import, .tpl-manager,
  .share-dialog, .session-view, .ai-history, .ai-settings {
    min-width: 0; max-width: none;
  }
  .tpl-manager { flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid label { white-space: normal; }

  /* 案内文は1行に収まらないので、端で折り返させる */
  .empty-hint { padding: 0 24px; text-align: center; }

  /* ---- 検索バー・ステータスバー ---- */
  #findbar { flex-wrap: wrap; }
  #find-input { flex: 1 1 auto; min-width: 0; }
  #statusbar { gap: 8px; padding: 4px 8px; }
  #status-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

[hidden] { display: none !important; }