chocomint 1.0.0

data/public/edit/edit.css

@@ -0,0 +1,414 @@
+*, *::before, *::after { box-sizing: border-box; }
+/* スクロールバーは細く控えめに (Firefox: scrollbar-width、Chromium系: ::-webkit-scrollbar)。 */
+* { scrollbar-width: thin; scrollbar-color: #c7c7c7 transparent; }
+*::-webkit-scrollbar { width: 8px; height: 8px; }
+*::-webkit-scrollbar-track { background: transparent; }
+*::-webkit-scrollbar-thumb { background: #c7c7c7; border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
+*::-webkit-scrollbar-thumb:hover { background: #a5a5a5; background-clip: content-box; }
+*::-webkit-scrollbar-corner { background: transparent; }
+/* UI 部品 (メニュー/一覧/見出し/バッジ等) はテキスト選択不可にする。
+   エディタ・コンソール・チャット本文・入力欄など、読む/コピーする領域だけ選択可に戻す。 */
+body { user-select: none; -webkit-user-select: none; }
+#editor, #console, .msg .bubble, .msg .step .out,
+textarea, input { user-select: text; -webkit-user-select: text; }
+/* フォーム部品はブラウザ既定フォントに逃げるので UI フォントを継承させる。 */
+button, input, textarea, select { font-family: inherit; }
+/* UI 全体のフォント (monaco-editor / ターミナルは各自で別途指定)。 */
+html, body { margin: 0; height: 100%;
+             font-family: "Noto Sans JP", system-ui, sans-serif; color: #222; }
+/* パネル幅/高さは CSS 変数で保持し、リサイザーのドラッグで書き換える。 */
+#app { display: grid; height: 100vh;
+       --files-w: 220px; --chat-w: 320px; --editor-h: 1fr;
+       grid-template-rows: auto var(--editor-h) 6px 1fr auto;
+       grid-template-columns: var(--files-w) 6px 1fr 6px var(--chat-w);
+       grid-template-areas:
+         "menu    menu   menu       menu   menu"
+         "files   rc-l   editorwrap rc-r   chat"
+         "files   rc-l   rr         rc-r   chat"
+         "files   rc-l   console    rc-r   chat"
+         "status  status status     status status"; }
+/* 「表示」メニューのトグルでパネルを非表示にする。非表示分はエディタが埋める
+   (列/行を折りたたみ、対応するリサイザーも一緒に隠す)。 */
+#app.hide-files { grid-template-columns: 0 0 1fr 6px var(--chat-w); }
+#app.hide-files #files, #app.hide-files #rc-l { display: none; }
+#app.hide-chat { grid-template-columns: var(--files-w) 6px 1fr 0 0; }
+#app.hide-chat #chat, #app.hide-chat #rc-r { display: none; }
+#app.hide-files.hide-chat { grid-template-columns: 0 0 1fr 0 0; }
+#app.hide-console { grid-template-rows: auto var(--editor-h) 0 0; }
+#app.hide-console #console-wrap, #app.hide-console #rr { display: none; }
+/* リサイザー本体 (縦=列幅, 横=行高)。ドラッグ中の選択防止は JS で body に付与。 */
+.resizer { background: #ddd; z-index: 5; }
+.resizer:hover, .resizer.active { background: #a2d7dd; }
+.resizer.col { cursor: col-resize; }
+.resizer.row { cursor: row-resize; }
+#rc-l { grid-area: rc-l; } #rc-r { grid-area: rc-r; } #rr { grid-area: rr; }
+/* メニューバー: VSCode 風の「ファイル/編集/…/ヘルプ」ドロップダウン群。 */
+#menu { grid-area: menu; display: flex; align-items: center;
+        padding: 0 0.4rem; background: #a2d7dd; color: #16393d;
+        font-size: 0.85rem; position: relative; z-index: 20; }
+.menu-item { position: relative; }
+.menu-btn { background: transparent; color: #16393d; border: none;
+            padding: 0.45rem 0.7rem; font-size: 0.85rem; cursor: pointer; }
+.menu-item:hover .menu-btn, .menu-item.open .menu-btn { background: #82c3cb; }
+.menu-dropdown { display: none; flex-direction: column;
+                 position: absolute; top: 100%; left: 0;
+                 min-width: 200px; padding: 0.25rem 0; background: #fff;
+                 border: 1px solid #bcdfe3; border-radius: 0 0 6px 6px;
+                 box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
+.menu-item.open > .menu-dropdown { display: flex; }
+.menu-entry { display: flex; align-items: center; justify-content: space-between;
+              width: 100%; background: transparent; color: #222; border: none;
+              padding: 0.4rem 0.9rem; font-size: 0.85rem; text-align: left;
+              cursor: pointer; text-decoration: none; white-space: nowrap; }
+.menu-entry:hover { background: #e3f4f6; }
+.menu-entry .shortcut { margin-left: 1.5rem; color: #888; font-size: 0.78rem; }
+/* チェック式メニュー項目 (自動保存 ON/OFF)。チェック + ラベルを左に固める
+   (親の space-between に流されて両端に離れないようにする)。
+   OFF のときはチェックを不可視にして位置は保つ。 */
+.menu-entry.menu-check-item { justify-content: flex-start; }
+.menu-entry .menu-check { width: 1.1em; margin-right: 0.3rem; color: #137333;
+                          font-size: 0.8rem; visibility: hidden; flex-shrink: 0; }
+.menu-entry.checked .menu-check { visibility: visible; }
+.menu-sep { height: 1px; margin: 0.25rem 0.4rem; background: #eee; }
+/* メニュー項目に何も無いときは「開いても何も出ない」ことが分かるよう素通しにする。 */
+.menu-dropdown:empty { display: none !important; }
+/* アイコンのみのボタン (一覧更新など)。テキストラベルを持たない操作用。 */
+.menu-icon-btn { background: transparent; color: #16393d; border: none;
+                 width: 1.9rem; height: 1.9rem; margin-left: 0.3rem;
+                 border-radius: 4px; font-size: 1.05rem; line-height: 1;
+                 cursor: pointer; display: flex; align-items: center; justify-content: center; }
+.menu-icon-btn:hover { background: #82c3cb; }
+/* メニューバー右端: 保存状態インジケーターだけを右寄せで置く (ファイル名はタブへ移した)。 */
+#menu .path { margin-left: auto; color: #2d5459; font-size: 0.85rem; padding-right: 0.4rem; }
+/* 保存状態インジケーター: 保存中(グレー)/保存済み(緑)/失敗(赤)を控えめに表示。 */
+.save-status { margin-left: 0.5rem; font-size: 0.78rem; vertical-align: middle;
+               transition: opacity 0.15s; }
+.save-status.saving { color: #7a7a7a; }
+.save-status.saved { color: #137333; }
+.save-status.error { color: #c5221f; }
+#files { grid-area: files; background: #f5f5f7; border-right: 1px solid #ddd;
+         display: flex; flex-direction: column; min-height: 0; }
+/* WORKING DIRECTORY (ファイルツリー) とソース管理 (Git パネル) は排他表示。
+   #app.show-git のときだけ Git パネルを表示し、ツリーを隠す (既定はツリー表示)。 */
+#files-tree-view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
+#git-panel { display: none; flex-direction: column; min-height: 0; flex: 1; }
+#app.show-git #files-tree-view { display: none; }
+#app.show-git #git-panel { display: flex; }
+#files-head { display: flex; align-items: center; justify-content: space-between;
+              padding: 0.5rem 0.4rem 0.2rem 0.7rem; flex-shrink: 0; }
+#files h2 { font-size: 0.8rem; color: #666; margin: 0; }
+#files-actions { display: flex; align-items: center; gap: 0.1rem; }
+#files-actions .menu-icon-btn { color: #555; width: 1.6rem; height: 1.6rem; font-size: 0.9rem; margin-left: 0; }
+#files-actions .menu-icon-btn:hover { background: #dcecee; }
+#file-list { overflow: auto; flex: 1 1 auto; min-height: 3rem; }
+#files ul { list-style: none; margin: 0; padding: 0; }
+#files ul ul { display: none; padding-left: 0.9rem; } /* 折りたたみ + 階層インデント */
+#files li.dir.open > ul { display: block; }
+#files .row { display: flex; align-items: center; gap: 0.2rem;
+            padding: 0.25rem 0.7rem; font-size: 0.83rem; cursor: pointer;
+            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+#files .row:hover { background: #e3f4f6; }
+#files li.file.active > .row { background: #a2d7dd; font-weight: 600; }
+#files li.dir.selected > .row { background: #d3ecee; font-weight: 600; }
+#files li.multi-selected > .row { background: #cfe8a8; }
+#files .twist { display: inline-block; width: 1em; color: #888;
+            transition: transform 0.1s; }
+#files li.dir.open > .row .twist { transform: rotate(90deg); }
+#files .icon { width: 1.1em; text-align: center; }
+/* ソース管理パネル (WORKING DIRECTORY と排他表示。display は #app.show-git 側で制御)。 */
+#git-panel-head { display: flex; align-items: center; justify-content: space-between;
+                   padding: 0.5rem 0.4rem 0.2rem 0.7rem; flex-shrink: 0; }
+#git-panel-head h2 { font-size: 0.8rem; color: #666; margin: 0; }
+#git-panel-head .menu-icon-btn { color: #555; width: 1.6rem; height: 1.6rem; font-size: 0.9rem; }
+#git-panel-head .menu-icon-btn:hover { background: #dcecee; }
+#git-panel-body { overflow: auto; padding: 0.4rem 0.4rem 0.6rem; flex: 1 1 auto; min-height: 0; }
+.git-hint { font-size: 0.78rem; color: #666; margin: 0.2rem 0.3rem 0.6rem; line-height: 1.4; }
+#git-uninit { padding: 0 0.3rem; }
+#git-uninit .vwin-btn { width: 100%; }
+.git-section { margin-bottom: 0.5rem; }
+.git-section-head { display: flex; align-items: center; gap: 0.4rem;
+                     font-size: 0.75rem; color: #666; padding: 0.2rem 0.3rem; }
+.git-section-head > span:first-child { flex-shrink: 0; }
+.git-count { color: #999; margin-right: auto; }
+.git-section-action { flex-shrink: 0; background: transparent; border: none; cursor: pointer;
+                       color: #2d5459; font-size: 0.72rem; padding: 0.15rem 0.4rem;
+                       border-radius: 4px; white-space: nowrap; }
+.git-section-action:hover { background: #cfe9ec; }
+.git-section-action.danger { color: #c5221f; }
+.git-section-action.danger:hover { background: #fce8e6; }
+.git-file-list { list-style: none; margin: 0; padding: 0; }
+.git-file-row { display: flex; align-items: center; gap: 0.3rem;
+                padding: 0.2rem 0.3rem; font-size: 0.8rem; border-radius: 4px; }
+.git-file-row:hover { background: #e3f4f6; }
+.git-file-status { flex-shrink: 0; width: 1.1em; text-align: center; font-weight: 700;
+                    font-family: "Cascadia Code", monospace; font-size: 0.75rem; }
+.git-file-status.status-M { color: #b06000; }
+.git-file-status.status-A { color: #137333; }
+.git-file-status.status-D { color: #c5221f; }
+.git-file-status.status-R { color: #7b1fa2; }
+.git-file-status.status-untracked { color: #999; }
+.git-file-path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.git-file-toggle { flex-shrink: 0; background: transparent; border: none; cursor: pointer;
+                    color: #16393d; font-size: 0.85rem; width: 1.4rem; height: 1.4rem;
+                    border-radius: 4px; display: flex; align-items: center; justify-content: center; }
+.git-file-toggle:hover { background: #cfe9ec; }
+.git-file-toggle.danger { color: #c5221f; }
+.git-file-toggle.danger:hover { background: #fce8e6; }
+.git-empty { font-size: 0.76rem; color: #999; padding: 0.2rem 0.3rem; font-style: italic; }
+#git-commit-form { margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e3e3e3; }
+#git-commit-message { width: 100%; resize: vertical; font-family: inherit; font-size: 0.8rem;
+                       padding: 0.4rem 0.5rem; border: 1px solid #ccc; border-radius: 6px;
+                       box-sizing: border-box; }
+.git-commit-actions { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
+.git-commit-actions .vwin-btn { flex: 1; font-size: 0.8rem; padding: 0.35rem 0.5rem; }
+/* 下部ステータスバー: ブランチ表示 + 切り替え。 */
+#statusbar { grid-area: status; display: flex; align-items: center;
+             background: #16393d; color: #dff2f4; font-size: 0.78rem;
+             padding: 0 0.3rem; min-height: 1.6rem; }
+#statusbar-branch { display: flex; align-items: center; gap: 0.3rem; background: transparent;
+                     border: none; color: inherit; font-size: inherit; padding: 0.2rem 0.6rem;
+                     cursor: pointer; border-radius: 4px; }
+#statusbar-branch:hover { background: rgba(255,255,255,0.15); }
+.statusbar-branch-icon { font-size: 0.85rem; }
+/* ブランチ切り替えダイアログの一覧。 */
+.branch-list { list-style: none; margin: 0 0 0.7rem; padding: 0; max-height: 12rem;
+               overflow: auto; border: 1px solid #eee; border-radius: 6px; }
+.branch-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem;
+               font-size: 0.83rem; cursor: pointer; }
+.branch-item:hover { background: #e3f4f6; }
+.branch-item.current { font-weight: 700; color: #16393d; background: #f0f9fa; }
+.branch-item .branch-check { width: 1em; color: #137333; }
+/* エディタ領域: タブバー + Monaco 本体を縦に積む。Monaco インスタンスは 1 つだけ
+   使い回し、タブ切り替えはモデル (ITextModel) の差し替えで行う。 */
+#editor-wrap { grid-area: editorwrap; min-height: 0; min-width: 0;
+               display: flex; flex-direction: column; }
+#editor { flex: 1; min-height: 0; min-width: 0; }
+/* 開いているタブが無いときは Monaco を隠し、代わりにプレースホルダーを見せる。 */
+#app.no-tabs #editor { display: none; }
+#editor-empty { display: none; flex: 1; align-items: center; justify-content: center;
+                color: #999; font-size: 0.9rem; user-select: none; }
+#app.no-tabs #editor-empty { display: flex; }
+/* エディタのタブバー (ターミナルのタブバーと同系統の見た目。背景は明るめ)。 */
+#editor-tabs { display: flex; align-items: stretch; flex-shrink: 0;
+               background: #ececec; border-bottom: 1px solid #ddd;
+               font-size: 0.8rem; overflow-x: auto; overflow-y: hidden;
+               scrollbar-width: thin; }
+#app.no-tabs #editor-tabs { display: none; }
+/* タブ幅は一定にする (ファイル名が長くても短くても同じ幅)。名前は余白を埋め、
+   はみ出しは省略記号で切る。flex-shrink: 0 でタブ数が増えても縮まないようにし、
+   溢れたぶんはタブバーの横スクロールで見せる。 */
+.editor-tab { display: flex; align-items: center; gap: 0.4rem;
+              padding: 0.35rem 0.55rem; cursor: pointer; white-space: nowrap;
+              color: #555; background: #ececec; border-right: 1px solid #ddd;
+              width: 11rem; flex-shrink: 0; }
+.editor-tab:hover { background: #e0e0e0; }
+.editor-tab.active { background: #fff; color: #16393d; font-weight: 600; }
+.editor-tab .editor-tab-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+/* 未保存インジケーター (●)。ホバー/アクティブ時は閉じるボタンと入れ替える。 */
+.editor-tab .editor-tab-dot { color: #16393d; font-size: 0.7rem; line-height: 1;
+                              width: 1.1em; text-align: center; flex-shrink: 0; }
+.editor-tab:not(.dirty) .editor-tab-dot { display: none; }
+.editor-tab .editor-tab-close { opacity: 0; width: 1.3em; height: 1.3em; flex-shrink: 0;
+                                display: flex; align-items: center; justify-content: center;
+                                border-radius: 3px; line-height: 1; }
+.editor-tab:hover .editor-tab-close { opacity: 0.7; }
+.editor-tab:hover.dirty .editor-tab-dot { display: none; }
+.editor-tab .editor-tab-close:hover { opacity: 1; background: #ccc; }
+#console-wrap { grid-area: console; min-height: 0; background: #1e1e1e;
+                border-top: 1px solid #333; overflow: hidden;
+                display: flex; flex-direction: column; }
+/* ターミナルのタブバー (複数セッションの切り替え + 新規/分割ボタン)。 */
+#term-tabs { display: flex; align-items: center; flex-shrink: 0;
+             background: #252526; padding: 0 4px; gap: 2px;
+             font-size: 0.78rem; color: #ccc; overflow-x: auto; }
+.term-tab { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.6rem;
+            cursor: pointer; border-radius: 4px 4px 0 0; white-space: nowrap;
+            color: #969696; }
+.term-tab:hover { background: #2d2d2e; color: #ccc; }
+.term-tab.active { background: #1e1e1e; color: #fff; }
+.term-tab .term-tab-close { opacity: 0; width: 1.3em; height: 1.3em; flex-shrink: 0;
+                             display: flex; align-items: center; justify-content: center;
+                             border-radius: 3px; }
+.term-tab:hover .term-tab-close { opacity: 0.7; }
+.term-tab .term-tab-close:hover { opacity: 1; background: #444; }
+/* タブバー右端の「新しいターミナル」追加ボタン。 */
+#term-tab-add { flex-shrink: 0; width: 1.7rem; height: 1.7rem; margin-left: 2px;
+                background: transparent; color: #969696; border: none; border-radius: 4px;
+                font-size: 1rem; line-height: 1; cursor: pointer;
+                display: flex; align-items: center; justify-content: center; }
+#term-tab-add:hover { background: #2d2d2e; color: #fff; }
+#term-panes { flex: 1; min-height: 0; padding: 8px; }
+.term-pane-row { display: none; height: 100%; }
+.term-pane-row.active { display: flex; }
+.term-pane { flex: 1; min-width: 0; height: 100%; }
+.term-pane + .term-pane { border-left: 1px solid #333; margin-left: 8px; padding-left: 8px; }
+.term-pane .xterm-wrap { height: 100%; width: 100%;
+           font-family: "Cascadia Code", "Noto Sans JP", monospace;
+           scrollbar-color: #666 transparent; }
+/* xterm のビューポートは真っ黒背景の上に乗るため、グレーを少し明るく・太めにして掴みやすくする。 */
+.xterm-wrap .xterm-viewport::-webkit-scrollbar { width: 10px; }
+.xterm-wrap .xterm-viewport::-webkit-scrollbar-thumb { background: #666; border: none; }
+.xterm-wrap .xterm-viewport::-webkit-scrollbar-thumb:hover { background: #888; }
+#chat { grid-area: chat; display: flex; flex-direction: column;
+        border-left: 1px solid #ddd; min-height: 0; }
+#chat h2 { font-size: 0.85rem; color: #444; margin: 0; padding: 0.5rem 0.7rem;
+           border-bottom: 1px solid #eee; }
+#chat-log { flex: 1; overflow: auto; padding: 0.6rem 0.7rem; font-size: 0.85rem;
+            display: flex; flex-direction: column; gap: 0.7rem; }
+/* /compact の結果: これまでの会話のまとめを控えめな枠で残す。 */
+.msg.ai.compact-summary .bubble { border: 1px dashed #cdd8da; border-radius: 8px;
+                                  background: #f7fafb; padding: 0.5rem 0.6rem; }
+.compact-head { font-size: 0.78rem; font-weight: 600; color: #4a7a80;
+                margin-bottom: 0.35rem; }
+.msg { display: flex; flex-direction: column; }
+/* ユーザー: 吹き出し(幅自動・右寄せ)。角丸は大きめで右下だけ角ばらせる。 */
+.msg.user { align-items: flex-end; }
+.msg.user .bubble { background: #a2d7dd; color: #16393d; padding: 0.45rem 0.75rem;
+                    max-width: 85%; width: fit-content;
+                    border-radius: 18px 18px 4px 18px;
+                    white-space: pre-wrap; word-break: break-word; }
+/* AI: 枠なし・地の文。ステータス色は who ではなく行頭のバッジで表す。 */
+.msg.ai .bubble { background: transparent; padding: 0; white-space: pre-wrap;
+                  word-break: break-word; color: #333; }
+/* Markdown バブルは HTML 構造で余白を持つため pre-wrap を無効化する。 */
+.msg.ai .bubble.markdown { white-space: normal; }
+.msg .badge { display: inline-block; font-size: 0.72rem; font-weight: 600;
+              padding: 0.05rem 0.4rem; border-radius: 4px; margin-bottom: 0.25rem; }
+.msg.status-PASS .badge { background: #e6f4ea; color: #137333; }
+.msg.status-FAIL .badge { background: #fce8e6; color: #c5221f; }
+.summary { margin-top: 0.4rem; color: #222; }
+/* Markdown レンダリング: 余白を詰め、コードは等幅・淡色背景で表示。 */
+.markdown { white-space: normal; }
+.markdown p { margin: 0.3rem 0; }
+.markdown h1, .markdown h2, .markdown h3,
+.markdown h4, .markdown h5, .markdown h6 { margin: 0.5rem 0 0.3rem; line-height: 1.3; }
+.markdown h1 { font-size: 1.15rem; } .markdown h2 { font-size: 1.05rem; }
+.markdown h3 { font-size: 0.95rem; }
+.markdown ul { margin: 0.3rem 0; padding-left: 1.3rem; }
+.markdown li { margin: 0.15rem 0; }
+.markdown code { font-family: "Cascadia Code", "Noto Sans JP", monospace;
+                 font-size: 0.85em; background: #f0f0f3; padding: 0.05rem 0.3rem;
+                 border-radius: 4px; }
+.markdown pre { background: #f3f3f5; border-radius: 6px; padding: 0.5rem 0.6rem;
+                overflow: auto; margin: 0.4rem 0; }
+.markdown pre code { background: none; padding: 0; white-space: pre; }
+.markdown a { color: #3a6df0; }
+.markdown table { border-collapse: collapse; margin: 0.4rem 0; font-size: 0.85em; }
+.markdown th, .markdown td { border: 1px solid #ccc; padding: 0.25rem 0.5rem;
+                             text-align: left; }
+.markdown th { background: #f0f0f3; font-weight: 600; }
+.msg.ai details { margin-top: 0.35rem; }
+.msg.ai details > summary { font-size: 0.75rem; color: #777; cursor: pointer; }
+.steps { font-size: 0.78rem; color: #555; margin-top: 0.35rem;
+         display: flex; flex-direction: column; gap: 0.5rem; }
+/* 1 ステップ = 見出し行 (番号/ラベル/対象/成否) + 出力ブロック。 */
+.step { border: 1px solid #e6e6ea; border-radius: 8px; padding: 0.4rem 0.5rem;
+        background: #fcfcfd; }
+.step.failed { border-color: #f3c9c6; background: #fdf6f5; }
+.step-head { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
+.step-no { flex-shrink: 0; width: 1.3rem; height: 1.3rem; border-radius: 50%;
+           background: #e3f4f6; color: #2d5459; font-size: 0.72rem; font-weight: 600;
+           display: flex; align-items: center; justify-content: center; }
+.step.failed .step-no { background: #fce8e6; color: #c5221f; }
+.step-label { font-weight: 600; color: #333; }
+.step-target { font-family: "Cascadia Code", "Noto Sans JP", monospace;
+               font-size: 0.72rem; background: #eef; color: #33407a;
+               padding: 0.05rem 0.35rem; border-radius: 4px;
+               max-width: 100%; overflow: hidden; text-overflow: ellipsis;
+               white-space: nowrap; }
+.step-mark { margin-left: auto; font-size: 0.75rem; font-weight: 600; flex-shrink: 0; }
+.step-mark.ok { color: #137333; }
+.step-mark.ng { color: #c5221f; }
+.step .out { display: block; margin-top: 0.35rem; padding: 0.3rem 0.5rem;
+             background: #f3f3f5; border-radius: 6px; color: #444;
+             font-family: "Cascadia Code", "Noto Sans JP", monospace;
+             font-size: 0.75rem; white-space: pre-wrap; word-break: break-word;
+             max-height: 12rem; overflow: auto; }
+.step .out.empty { color: #999; font-style: italic; background: transparent;
+                   padding: 0.1rem 0; }
+/* 入力欄: 相対配置にして送信ボタン(飛行機)を内側に重ねる。 */
+#chat-form { position: relative; padding: 0.5rem; border-top: 1px solid #eee; }
+#chat-input { width: 100%; resize: none; font-family: inherit; font-size: 0.85rem;
+              padding: 0.5rem 2.4rem 0.5rem 0.6rem; border: 1px solid #ccc;
+              border-radius: 10px; line-height: 1.4; min-height: 4.4rem; }
+#chat-send { position: absolute; right: 0.9rem; bottom: 1.2rem;
+             width: 1.9rem; height: 1.9rem; padding: 0; border: none;
+             border-radius: 50%; background: #a2d7dd; color: #16393d; cursor: pointer;
+             display: flex; align-items: center; justify-content: center; }
+#chat-send:hover { background: #82c3cb; }
+#chat-send:disabled { background: #d6ecef; color: #7ba3a8; cursor: default; }
+#chat-send svg { width: 1rem; height: 1rem; fill: currentColor; }
+/* 送信中は紙飛行機を隠し、点字スピナーをぐるぐる回す。 */
+#chat-send .send-spinner { display: none; font-size: 1rem; line-height: 1;
+                           font-family: monospace; }
+#chat-form.busy #chat-send .send-icon { display: none; }
+#chat-form.busy #chat-send .send-spinner { display: inline; }
+#chat-log .pending-spinner { font-family: monospace; display: inline-block;
+                             width: 1em; text-align: center; }
+/* AI 実行中のツール進捗行 (SSE)。実行中は点字スピナー、完了で ✓ / ✕ に変わる。 */
+.pending-head { color: #555; }
+.pending-tools { display: flex; flex-direction: column; gap: 0.3rem;
+                 margin-top: 0.4rem; }
+.ptool { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem;
+         color: #444; }
+.ptool-mark { flex-shrink: 0; width: 1em; text-align: center; font-weight: 600; }
+.ptool-mark.ok { color: #137333; }
+.ptool-mark.ng { color: #c5221f; }
+.ptool-label { font-weight: 600; color: #333; }
+.ptool-target { font-family: "Cascadia Code", "Noto Sans JP", monospace;
+                font-size: 0.72rem; background: #eef; color: #33407a;
+                padding: 0.05rem 0.35rem; border-radius: 4px;
+                max-width: 100%; overflow: hidden; text-overflow: ellipsis;
+                white-space: nowrap; }
+/* ツール実行結果を進捗行の直後に都度表示するブロック。 */
+.ptool-out { display: block; margin: 0.1rem 0 0.2rem 1.4rem;
+             padding: 0.3rem 0.5rem; background: #f3f3f5; border-radius: 6px;
+             color: #444; font-family: "Cascadia Code", "Noto Sans JP", monospace;
+             font-size: 0.75rem; white-space: pre-wrap; word-break: break-word;
+             max-height: 12rem; overflow: auto; }
+.ptool-out.empty { color: #999; font-style: italic; background: transparent;
+                   padding: 0.1rem 0 0.1rem 1.4rem; }
+/* 実行結果に添える注記 (未完了の可能性など)。控えめな警告色で。 */
+.result-note { margin-top: 0.35rem; font-size: 0.78rem; color: #8a6d00;
+               background: #fff8e1; border: 1px solid #f0e0a0;
+               border-radius: 6px; padding: 0.3rem 0.5rem; }
+.busy { opacity: 0.6; pointer-events: none; }
+/* 右クリックのコンテキストメニュー */
+#ctx-menu { position: fixed; z-index: 1000; min-width: 180px; padding: 0.25rem 0;
+            background: #fff; border: 1px solid #ccc; border-radius: 6px;
+            box-shadow: 0 4px 16px rgba(0,0,0,0.18); font-size: 0.85rem;
+            display: none; }
+#ctx-menu.open { display: block; }
+#ctx-menu .item { padding: 0.4rem 0.9rem; cursor: pointer; white-space: nowrap; }
+#ctx-menu .item:hover { background: #eef; }
+#ctx-menu .item.danger { color: #c5221f; }
+#ctx-menu .sep { height: 1px; margin: 0.25rem 0; background: #eee; }
+/* 汎用の仮想ウィンドウ (ブラウザ内で完結するモーダル風ダイアログ)。
+   タイトルバーをドラッグして移動できる。初期位置は JS 側で画面中央に置く。 */
+.vwin { position: fixed; z-index: 2000; min-width: 360px;
+        background: #fff; border: 1px solid #bbb; border-radius: 8px;
+        box-shadow: 0 8px 32px rgba(0,0,0,0.28); user-select: none; }
+.vwin[hidden] { display: none; }
+.vwin-titlebar { display: flex; align-items: center; justify-content: space-between;
+                 padding: 0.5rem 0.6rem; background: #a2d7dd; color: #16393d;
+                 border-radius: 8px 8px 0 0; cursor: move; font-size: 0.85rem; font-weight: 600; }
+.vwin-close { background: transparent; border: none; color: #16393d; font-size: 1rem;
+              line-height: 1; width: 1.6rem; height: 1.6rem; border-radius: 4px; cursor: pointer; }
+.vwin-close:hover { background: #82c3cb; }
+.vwin-body { padding: 0.8rem 0.9rem; user-select: text; }
+.vwin-body label { display: block; font-size: 0.78rem; color: #555; margin-bottom: 0.35rem; }
+.vwin-body input { width: 100%; box-sizing: border-box; padding: 0.4rem 0.5rem;
+                    border: 1px solid #ccc; border-radius: 6px; font-size: 0.85rem;
+                    font-family: "Cascadia Code", "Noto Sans JP", monospace; }
+.vwin-message { margin: 0; font-size: 0.85rem; color: #333; line-height: 1.5;
+                white-space: pre-wrap; word-break: break-word; }
+.vwin-error { min-height: 1.1rem; color: #c5221f; font-size: 0.78rem; margin-top: 0.4rem; }
+.vwin-actions { display: flex; justify-content: flex-end; gap: 0.5rem;
+                padding: 0.6rem 0.9rem; border-top: 1px solid #eee; }
+.vwin-btn { padding: 0.4rem 0.9rem; border: 1px solid #ccc; border-radius: 6px;
+            background: #f5f5f5; color: #333; font-size: 0.85rem; cursor: pointer; }
+.vwin-btn:hover { background: #ececec; }
+.vwin-btn.primary { background: #a2d7dd; border-color: #82c3cb; color: #16393d; font-weight: 600; }
+.vwin-btn.primary:hover { background: #82c3cb; }
+.vwin-btn.danger { background: #fce8e6; border-color: #f3c9c6; color: #c5221f; font-weight: 600; }
+.vwin-btn.danger:hover { background: #f8d7d4; }