@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

  :root {
    --bg: #f4f6f9;
    --surface: #ffffff;
    --border: #dde3ee;
    --text: #1a2030;
    --text-sub: #7a8aa0;
    --header-bg: #ffffff;
    --topic-bg: #eef2fa;
    --topic-active: #3a6acc;
    --topic-active-text: #fff;
    --input-bg: #fff;
    --tam-bg: #e8f0fe; --tam-border: #a8c0f0; --tam-text: #1a3a8a;
    --copi-bg: #f3e8fe; --copi-border: #c8a0f0; --copi-text: #5a1a8a;
    --kuro-bg: #e8fef0; --kuro-border: #a0e0b8; --kuro-text: #1a5a38;
    --desk-bg: #fff3e0; --desk-border: #e0a060; --desk-text: #7a3a00;
    --log-bg: #1e1e1e; --log-text: #e5e5e5; --log-border: #555;
    --shadow: 0 2px 8px rgba(0,0,0,0.06);
    --idea-badge-未検討: #f0a500; --idea-badge-検討中: #3a6acc; --idea-badge-実装済み: #2e8b57;
  }
  body.dark {
    --bg: #0e0e18; --surface: #141420; --border: #2a3050;
    --text: #c8d0e8; --text-sub: #5a6a88;
    --header-bg: #0c0c16; --topic-bg: #1a1a2e; --topic-active: #4a7adc; --input-bg: #10101c;
    --tam-bg: #1a2a4a; --tam-border: #3a5a9a; --tam-text: #88aaee;
    --copi-bg: #2a1a4a; --copi-border: #7a4aaa; --copi-text: #cc88ff;
    --kuro-bg: #1a3a28; --kuro-border: #3a8a58; --kuro-text: #66cc88;
    --shadow: 0 2px 12px rgba(0,0,0,0.3);
  }
  body.gray {
    --bg: #e4e8f0; --surface: #f0f2f8; --border: #c8d0e0;
    --header-bg: #dde3ee; --topic-bg: #d8dff0; --input-bg: #f0f2f8;
  }

  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    background: var(--bg); color: var(--text);
    font-family: 'Noto Sans JP','Hiragino Sans',sans-serif;
    font-size: 14px; height: 100vh;
    display: flex; flex-direction: column; overflow: hidden;
    transition: background 0.2s, color 0.2s;
  }

  /* ── ヘッダー ── */
  header {
    background: var(--header-bg); border-bottom: 1px solid var(--border);
    padding: 8px 16px; display: flex; align-items: center; gap: 10px;
    flex-shrink: 0; box-shadow: var(--shadow);
  }
  header h1 { font-size: 14px; font-weight: 700; color: var(--topic-active); flex-shrink: 0; }
  #ws-badge {
    font-size: 11px; padding: 2px 8px; border-radius: 10px;
    border: 1px solid var(--border); color: var(--text-sub); background: var(--topic-bg);
  }
  #ws-badge.on  { border-color: #8bc48b; color: #2e7d2e; }
  #ws-badge.off { border-color: #e08080; color: #c00; }
  #cdp-badge { font-size: 11px; color: var(--text-sub); }

  .header-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
  .hdr-btn {
    background: var(--topic-bg); border: 1px solid var(--border);
    color: var(--text-sub); padding: 3px 10px; border-radius: 6px;
    cursor: pointer; font-size: 11px; font-family: inherit; transition: all 0.15s;
  }
  .hdr-btn:hover, .hdr-btn.active {
    background: var(--topic-active); color: var(--topic-active-text); border-color: var(--topic-active);
  }

  /* ── worldline バー ── */
  #wl-bar {
    background: var(--topic-bg); border-bottom: 1px solid var(--border);
    padding: 5px 16px; display: flex; align-items: center; gap: 14px;
    flex-shrink: 0; cursor: pointer; font-size: 12px;
  }
  #wl-bar:hover { opacity: 0.82; }
  #wl-bar .wl-label { font-weight: 700; color: var(--topic-active); flex-shrink: 0; }
  #wl-bar .wl-item  { color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #wl-bar .wl-item b { color: var(--text); }
  #wl-bar .wl-hint  { margin-left: auto; font-size: 10px; color: var(--text-sub); flex-shrink: 0; }

  /* ── トピック ── */
  #topics {
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 7px 16px; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  }
  #topics .topic-label { font-size: 11px; color: var(--text-sub); margin-right: 4px; }
  .topic-btn {
    background: var(--topic-bg); border: 1px solid var(--border); color: var(--text-sub);
    padding: 3px 12px; border-radius: 16px; cursor: pointer; font-size: 12px;
    font-family: inherit; transition: all 0.15s;
  }
  .topic-btn:hover { border-color: var(--topic-active); color: var(--topic-active); }
  .topic-btn.active {
    background: var(--topic-active); color: var(--topic-active-text);
    border-color: var(--topic-active); font-weight: 700;
  }

  /* ── タイムライン ── */
  #timeline {
    flex: 1; overflow-y: auto; padding: 14px;
    display: flex; flex-direction: column; gap: 9px;
  }
  #timeline::-webkit-scrollbar { width: 5px; }
  #timeline::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

  .bubble-wrap {
    display: flex; flex-direction: column; gap: 2px; max-width: 88%;
  }
  .bubble-wrap.from-tam  { align-self: flex-end;   align-items: flex-end; }
  .bubble-wrap.from-copi { align-self: flex-start; align-items: flex-start; }
  .bubble-wrap.from-kuro { align-self: flex-start; align-items: flex-start; }
  .bubble-wrap.is-log    { max-width: 90%; align-self: center; }

  .bubble-meta {
    font-size: 12px; color: var(--text); padding: 0 6px;
    display: flex; gap: 8px; align-items: center;
  }
  .bubble-meta .from-name { font-weight: 500; }
  .from-tam  .from-name { color: var(--tam-text); }
  .from-copi .from-name { color: var(--copi-text); }
  .from-kuro .from-name { color: var(--kuro-text); }

  .bubble {
    padding: 10px 14px; border-radius: 16px; border: 1px solid;
    line-height: 1.7; font-size: 16px; word-break: break-word;
    box-shadow: var(--shadow); position: relative; cursor: context-menu;
  }
  .from-tam  .bubble { background: var(--tam-bg);  border-color: var(--tam-border);  color: var(--tam-text);  border-bottom-right-radius: 4px; }
  .from-copi .bubble { background: var(--copi-bg); border-color: var(--copi-border); color: var(--copi-text); border-bottom-left-radius: 4px; }
  .from-kuro    .bubble { background: var(--kuro-bg); border-color: var(--kuro-border); color: var(--kuro-text); border-bottom-left-radius: 4px; }
  .from-desktop .bubble { background: var(--desk-bg); border-color: var(--desk-border); color: var(--desk-text); border-bottom-left-radius: 4px; }
  .from-desktop .from-name { color: var(--desk-text); }
  .bubble-wrap.from-desktop { align-self: flex-start; align-items: flex-start; }

  /* system通知: 中央・小さめ・薄グレー */
  .bubble-wrap.from-system {
    align-self: center; align-items: center; max-width: 80%;
  }
  .from-system .bubble-meta { font-size: 11px; color: var(--text-sub); }
  .from-system .from-name   { font-weight: 400; color: var(--text-sub) !important; }
  .from-system .bubble {
    background: transparent; border: 1px dashed var(--border);
    color: var(--text-sub); font-size: 13px; border-radius: 8px;
    box-shadow: none; padding: 4px 12px; cursor: default;
  }
  .bubble.log-bubble {
    background: var(--log-bg); border-color: var(--log-border); color: var(--log-text);
    font-family: 'Menlo','Monaco',monospace; font-size: 12px;
    border-radius: 8px; white-space: pre-wrap; cursor: default;
  }
  /* バブル右クリックメニュー */
  #ctx-menu {
    display: none; position: fixed; z-index: 500;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    padding: 4px 0; min-width: 160px;
  }
  #ctx-menu button {
    display: block; width: 100%; padding: 8px 16px; text-align: left;
    background: none; border: none; color: var(--text); font-size: 13px;
    font-family: inherit; cursor: pointer;
  }
  #ctx-menu button:hover { background: var(--topic-bg); }

  /* ── 入力エリア ── */
  #input-area {
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 9px 16px; display: flex; flex-direction: column; gap: 0;
    flex-shrink: 0; box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
  }
  #input-area .buttons {
    display: flex; gap: 8px; align-items: flex-end; margin-top: 6px;
  }
  #msg-input {
    flex: 1; background: var(--input-bg); border: 1px solid var(--border);
    color: var(--text); padding: 10px 12px; border-radius: 10px;
    font-family: inherit; font-size: 14px; resize: none; min-height: 60px;
    outline: none; line-height: 1.6; transition: border-color 0.15s;
  }
  #msg-input:focus { border-color: var(--topic-active); }
  .send-btn {
    border: none; padding: 10px 14px; border-radius: 10px;
    cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700;
    line-height: 1.4; transition: all 0.15s; white-space: nowrap;
  }
  #btn-copi { background: var(--copi-bg); border: 1px solid var(--copi-border); color: var(--copi-text); }
  #btn-copi:hover { filter: brightness(0.92); }
  #btn-kuro { background: var(--kuro-bg); border: 1px solid var(--kuro-border); color: var(--kuro-text); }
  #btn-claude { background: #e8f4f8; border: 1px solid #5b9fbf; color: #1a4a6a; }
  #btn-claude:hover { filter: brightness(0.92); }
  #btn-kuro:hover { filter: brightness(0.92); }
  #btn-km11 { background: #fef8e0; border: 1px solid #e0c060; color: #7a5a00; }
  #btn-km11:hover { filter: brightness(0.92); }





  /* ── フェーズ4.4: OSに任せるボタン / ルートバッジ ── */
  #btn-auto {
    background: linear-gradient(135deg, #1e3a8a 0%, #3a6acc 100%);
    border: 1px solid #2a4acc; color: #fff;
    flex: 1; padding: 9px 12px; border-radius: 10px;
    font-size: 13px; font-weight: 700; line-height: 1.4;
    transition: all 0.15s; white-space: nowrap; cursor: pointer;
  }
  #btn-auto:hover { filter: brightness(1.12); transform: translateY(-1px); }
  #btn-auto:active { transform: translateY(0); }
  .buttons-auto { display: flex; gap: 8px; margin-bottom: 4px; align-items: center; }
  #route-badge {
    display: none; font-size: 11px; padding: 2px 10px; border-radius: 10px;
    background: #e8f0fe; border: 1px solid #a8c0f0; color: #1a3a8a;
    animation: fadeIn 0.3s ease;
  }
  #route-badge.show { display: inline-block; }
  @keyframes fadeIn { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform: translateY(0); } }
  #rec-route-wrap {
    font-size: 11px; color: var(--text-sub);
    background: var(--topic-bg); border: 1px solid var(--border);
    padding: 2px 10px; border-radius: 10px; display: none;
  }
  #rec-route-wrap.show { display: inline-block; }

  /* ── STEP-7 ファイル器官 ── */
  #btn-file {
    background: var(--topic-bg); border: 1px solid var(--border);
    color: var(--text-sub); padding: 8px 10px; border-radius: 10px;
    cursor: pointer; font-size: 16px; line-height: 1;
    transition: all 0.15s; flex-shrink: 0;
  }
  #btn-file:hover { background: var(--topic-active); color: white; border-color: var(--topic-active); }
  #drop-overlay {
    display: none; position: fixed; inset: 0; z-index: 600;
    background: rgba(58, 106, 204, 0.15);
    border: 3px dashed var(--topic-active);
    align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700; color: var(--topic-active);
    pointer-events: none;
  }
  #drop-overlay.show { display: flex; }
  #upload-status {
    display: none; position: fixed; bottom: 80px; right: 20px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 14px; font-size: 12px;
    color: var(--text); box-shadow: var(--shadow); z-index: 500;
  }
  #upload-status.show { display: block; }
  /* ── マークダウン要素 ── */
  .bubble ul, .bubble ol {
    margin: 5px 0 5px 1.4em; padding: 0;
  }
  .bubble li { margin: 4px 0; line-height: 1.7; }
  .bubble h1,.bubble h2,.bubble h3 {
    font-weight: 700; margin: 10px 0 3px;
    color: inherit; line-height: 1.4;
  }
  .bubble h1 { font-size: 1.25em; border-bottom: 1px solid rgba(128,128,128,0.2); padding-bottom: 10px; margin-bottom: 12px; }
  .bubble h2 { font-size: 1.15em; }
  .bubble h3 { font-size: 1.05em; }
  .bubble blockquote {
    border-left: 3px solid var(--border);
    margin: 8px 0; padding: 6px 12px;
    color: var(--text-sub); font-style: italic;
  }
  .bubble p { margin: 5px 0; }
  .bubble strong { font-weight: 700; }
  .bubble em { font-style: italic; }
  .bubble table { border-collapse: collapse; margin: 8px 0; font-size: 13px; }
  .bubble th, .bubble td { border: 1px solid var(--border); padding: 4px 10px; }
  .bubble th { background: var(--topic-bg); font-weight: 700; }

  /* ── バブルコピーボタン ── */
  .bubble-wrap { position: relative; }
  .bubble-copy-btn {
    display: none; position: absolute; bottom: -8px; right: 4px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 3px 8px; font-size: 11px;
    color: var(--text-sub); cursor: pointer; white-space: nowrap;
    box-shadow: var(--shadow); font-family: inherit;
    transition: all 0.15s; z-index: 10;
  }
  .bubble-copy-btn:hover { background: var(--topic-active); color: white; border-color: var(--topic-active); }
  .bubble-wrap:hover .bubble-copy-btn { display: block; }

  .bubble hr {
    border: none; border-top: 2px solid rgba(128,128,128,0.5);
    margin: 12px 0;
  }
  /* ── コードブロック ── */
  .bubble .code-block {
    margin: 8px 0; border-radius: 8px; overflow: hidden;
    border: 1px solid #444; font-size: 12px;
    max-width: 100%; box-sizing: border-box;
  }
  .bubble .code-header {
    background: #2d2d2d; color: #aaa;
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 12px; font-family: 'Menlo','Monaco',monospace; font-size: 11px;
  }
  .bubble .code-copy {
    background: none; border: none; color: #aaa; cursor: pointer;
    font-size: 11px; padding: 2px 6px; border-radius: 4px;
    font-family: inherit; transition: color 0.15s;
  }
  .bubble .code-copy:hover { color: #fff; }
  .bubble pre {
    background: #1e1e1e; color: #e5e5e5;
    padding: 10px 12px; margin: 0;
    font-family: 'Menlo','Monaco',monospace; font-size: 12px;
    overflow-x: auto; white-space: pre-wrap; word-break: break-all;
  }
  .bubble code {
    background: rgba(0,0,0,0.12); border-radius: 3px;
    padding: 1px 5px; font-family: 'Menlo','Monaco',monospace; font-size: 12px;
  }
  .bubble pre code {
    background: none; padding: 0; border-radius: 0;
  }

  /* ── autoExec トグル ── */
  #btn-auto-exec {
    font-size: 11px; padding: 3px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--topic-bg);
    color: var(--text-sub); cursor: pointer; font-family: inherit;
    transition: all 0.15s; font-weight: 700;
  }
  #btn-auto-exec.on  { background: #2a5a2a; color: #6f6; border-color: #3a7a3a; }
  #btn-auto-exec.off { background: var(--topic-bg); color: var(--text-sub); border-color: var(--border); }

  /* ── コードブロック実行 (task-055) ── */
  .bubble .code-run {
    background: none; border: none; color: #6f9; cursor: pointer;
    font-size: 11px; padding: 2px 6px; border-radius: 4px;
    font-family: inherit; transition: color 0.15s; margin-left: 6px;
  }
  .bubble .code-run:hover { color: #0f0; }
  .bubble .code-run:disabled { color: #555; cursor: default; }
  .bubble .code-result {
    background: #111; border-top: 1px solid #333;
    padding: 8px 12px; font-family: 'Menlo','Monaco',monospace;
    font-size: 11px; white-space: pre-wrap; word-break: break-all;
  }
  .bubble .code-result.ok  { color: #9e9; }
  .bubble .code-result.err { color: #f77; }
  .bubble .code-result.run { color: #aaa; }

  /* ── 添付プレビュー ── */
  #attach-preview {
    display: none;
    gap: 8px;
    margin-bottom: 6px;
    max-height: 120px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  #attach-preview.show { display: flex; align-items: center; }
  #attach-thumb {
    width: 48px; height: 48px; object-fit: cover;
    border-radius: 6px; border: 1px solid var(--border);
  }
  #attach-name { font-size: 12px; color: var(--text-sub); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #attach-clear {
    background: none; border: none; font-size: 16px; cursor: pointer;
    color: var(--text-sub); padding: 2px 6px; border-radius: 4px;
    line-height: 1; flex-shrink: 0;
  }
  #attach-clear:hover { color: #c00; background: #fee; }

  /* ── worldline モーダル ── */
  #modal {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.4); z-index: 300;
    align-items: center; justify-content: center;
  }
  #modal.show { display: flex; }
  #modal-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 20px; max-width: 640px; width: 92%;
    max-height: 80vh; overflow-y: auto; font-size: 12px;
    color: var(--text); box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  }
  #modal-close { float: right; cursor: pointer; font-size: 18px; color: var(--text-sub); }

  /* ── アイデアバンクドロワー ── */
  #idea-drawer {
    position: fixed; top: 0; right: -420px; width: 400px; height: 100vh;
    background: var(--surface); border-left: 1px solid var(--border);
    box-shadow: -4px 0 20px rgba(0,0,0,0.1); z-index: 400;
    display: flex; flex-direction: column;
    transition: right 0.25s cubic-bezier(0.4,0,0.2,1);
  }
  #idea-drawer.open { right: 0; }
  #idea-drawer-header {
    padding: 14px 16px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  }
  #idea-drawer-header h2 { font-size: 14px; font-weight: 700; flex: 1; color: var(--topic-active); }
  #idea-drawer-close {
    background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-sub);
  }
  #idea-filter {
    padding: 8px 16px; border-bottom: 1px solid var(--border);
    display: flex; gap: 6px; flex-shrink: 0;
  }
  .idea-filter-btn {
    font-size: 11px; padding: 2px 10px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--topic-bg);
    color: var(--text-sub); cursor: pointer; font-family: inherit;
  }
  .idea-filter-btn.active {
    background: var(--topic-active); color: var(--topic-active-text); border-color: var(--topic-active);
  }
  #idea-list {
    flex: 1; overflow-y: auto; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px;
  }
  #idea-list::-webkit-scrollbar { width: 4px; }
  #idea-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
  .idea-card {
    background: var(--topic-bg); border: 1px solid var(--border);
    border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: border-color 0.15s;
  }
  .idea-card:hover { border-color: var(--topic-active); }
  .idea-card-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
  .idea-card-meta  { font-size: 11px; color: var(--text-sub); display: flex; gap: 8px; align-items: center; }
  .idea-status-badge {
    font-size: 10px; padding: 1px 7px; border-radius: 8px;
    border: 1px solid; font-weight: 700;
  }
  .badge-未検討 { color: #b07000; border-color: #f0c060; background: #fff8e0; }
  .badge-検討中 { color: #1a50aa; border-color: #a0b8f0; background: #e8f0fe; }
  .badge-実装済み { color: #1a6a38; border-color: #80d0a0; background: #e0f8ec; }
  .idea-stack-count { font-size: 11px; color: var(--text-sub); }

  /* アイデア詳細パネル */
  #idea-detail {
    display: none; flex-direction: column;
    background: var(--surface); position: absolute; inset: 0; z-index: 1;
  }
  #idea-detail.show { display: flex; }
  #idea-detail-header {
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  }
  #idea-back { background: none; border: none; cursor: pointer; color: var(--text-sub); font-size: 16px; }
  #idea-detail-title { font-size: 14px; font-weight: 700; flex: 1; }
  #idea-detail-body { flex: 1; overflow-y: auto; padding: 12px 16px; font-size: 13px; }
  .idea-detail-stack { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
  .stack-entry {
    border-left: 3px solid var(--border); padding: 6px 10px; font-size: 12px; border-radius: 0 6px 6px 0;
    background: var(--topic-bg);
  }
  .stack-entry.actor-タム  { border-color: var(--tam-border); }
  .stack-entry.actor-コピ  { border-color: var(--copi-border); }
  .stack-entry.actor-クロ  { border-color: var(--kuro-border); }
  .stack-actor { font-weight: 700; font-size: 11px; margin-bottom: 2px; }
  .actor-タム  .stack-actor { color: var(--tam-text); }
  .actor-コピ  .stack-actor { color: var(--copi-text); }
  .actor-クロ  .stack-actor { color: var(--kuro-text); }
  #idea-detail-actions {
    padding: 10px 16px; border-top: 1px solid var(--border); flex-shrink: 0;
    display: flex; gap: 6px; flex-wrap: wrap;
  }
  .status-change-btn {
    font-size: 11px; padding: 3px 10px; border-radius: 10px; cursor: pointer;
    font-family: inherit; border: 1px solid var(--border); background: var(--topic-bg); color: var(--text);
  }
  .status-change-btn:hover { border-color: var(--topic-active); color: var(--topic-active); }
  #idea-stack-input {
    padding: 8px 16px; border-top: 1px solid var(--border); flex-shrink: 0; display: flex; gap: 6px;
  }
  #idea-stack-input textarea {
    flex: 1; font-size: 12px; font-family: inherit; padding: 6px 8px;
    border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg);
    color: var(--text); resize: none; height: 48px; outline: none;
  }
  #idea-stack-input textarea:focus { border-color: var(--topic-active); }
  #idea-stack-input select {
    font-size: 12px; font-family: inherit; padding: 4px 6px;
    border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); color: var(--text);
    outline: none; cursor: pointer;
  }
  #idea-stack-input button {
    font-size: 12px; padding: 6px 10px; border-radius: 6px; cursor: pointer;
    background: var(--topic-active); color: white; border: none; font-family: inherit; font-weight: 700;
  }

  /* アイデア新規作成フォーム */
  #idea-new-form {
    padding: 10px 16px; border-top: 1px solid var(--border); flex-shrink: 0;
  }
  #idea-new-form summary {
    cursor: pointer; font-size: 12px; color: var(--topic-active); font-weight: 700; padding: 4px 0;
  }
  #idea-new-form .form-inner { padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
  #idea-new-form input, #idea-new-form textarea {
    font-size: 12px; font-family: inherit; padding: 6px 8px;
    border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg);
    color: var(--text); outline: none; width: 100%;
  }
  #idea-new-form textarea { height: 52px; resize: none; }
  #idea-new-form button {
    font-size: 12px; padding: 6px 16px; border-radius: 6px; cursor: pointer;
    background: var(--topic-active); color: white; border: none; font-family: inherit; font-weight: 700;
    align-self: flex-end;
  }
  /* ドロワーオーバーレイ */
  #idea-overlay {
    display: none; position: fixed; inset: 0; z-index: 390;
    background: rgba(0,0,0,0.2);
  }
  #idea-overlay.show { display: block; }

  /* ── 作業推移 折りたたみ ── */
  .progress-details {
    align-self: stretch; margin: 2px 0;
    border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden; background: var(--topic-bg);
  }
  .progress-details > summary {
    cursor: pointer; padding: 5px 14px;
    font-size: 12px; color: var(--text-sub);
    list-style: none; display: flex; align-items: center; gap: 6px;
    user-select: none; transition: background 0.15s;
  }
  .progress-details > summary::-webkit-details-marker { display: none; }
  .progress-details > summary .pd-arrow {
    font-size: 10px; display: inline-block;
    transition: transform 0.2s; flex-shrink: 0;
  }
  .progress-details[open] > summary .pd-arrow { transform: rotate(90deg); }
  .progress-details > summary:hover { background: rgba(0,0,0,0.04); }
  .progress-details .progress-inner {
    padding: 6px 8px; display: flex; flex-direction: column; gap: 4px;
    border-top: 1px solid var(--border); max-height: 400px; overflow-y: auto;
  }
  .progress-details .progress-inner .bubble-wrap { max-width: 100%; }