/* ============================================================
   Market Banzuke - styles.css
   (旧 index.html の <style> 2箇所をここに集約)
   ============================================================ */

/* === Main styles (旧 index.html line 187-576) === */
/* ════════════════════════════════════════════════════════════════
   Market Banzuke 統一カラーパレット (リファクタ #3564)
   セマンティック6カテゴリ + グレースケール + データビズ用
   将来色を変えるときはここを書き換えるだけで全体に反映される。
   ボタンは全て .btn-* クラス経由でこの変数を参照。
   ════════════════════════════════════════════════════════════════ */
:root {
  /* --- Success (Good) --- */
  --c-success-dark:  #1c5530;
  --c-success:       #1e7a45;
  --c-success-light: #43a164;
  --c-success-bg:    #e8f5e9;
  --c-success-border:#a5d6a7;

  /* --- Error (Bad/Danger) --- */
  --c-error-dark:    #6a0000;
  --c-error:         #aa2222;
  --c-error-light:   #fca5a5;
  --c-error-bg:      #fee2e2;

  /* --- Warning (Caution) --- */
  --c-warning-text:  #854d0e;  /* 被引用バッジ・警告テキスト */
  --c-warning:       #995500;
  --c-warning-light: #f5a623;
  --c-warning-bg:    #fff8e1;
  --c-warning-border:#fde68a;

  /* --- Info (Primary/Link) --- */
  --c-info-dark:     #3355cc;  /* mid/dark/base 全部統合 */
  --c-info-mid:      #3355cc;  /* mid alias (互換用) */
  --c-info:          #3355cc;
  --c-info-light:    #5577dd;
  --c-info-bg:       #eef2ff;
  --c-info-border:   #b3d4ff;

  /* --- AI (Premium/Accent) --- */
  --c-ai:            #5522aa;
  --c-ai-light:      #8b5cf6;
  --c-ai-bg:         #f5f3ff;
  --c-ai-border:     #ddd6fe;

  /* --- Banzuke (相撲番付テーマ専用、独立) --- */
  --c-banzuke-dark:  #4a2818;  /* dark/light/base 統合 */
  --c-banzuke:       #4a2818;
  --c-banzuke-light: #4a2818;
  --c-banzuke-text:  #f5ecd6;

  /* --- データビジュアライゼーション用フィールド色 (チャート専用、変更不可) --- */
  --c-viz-blue:      #3a6fd8;
  --c-viz-red:       #e05540;
  --c-viz-pink:      #d84a9c;
  --c-viz-teal:      #0ea5b0;
  --c-viz-cyan:      #06b6d4;
  --c-viz-indigo:    #6366f1;

  /* --- グレースケール --- */
  --c-bg:            #f4f4f2;
  --c-surface:       #fff;
  --c-surface-alt:   #fafafa;
  --c-surface-soft:  #f8f8f7;
  --c-border-strong: #ccc;
  --c-border:        #ddd;
  --c-border-soft:   #e5e5e5;
  --c-border-faint:  #eee;
  --c-text:          #1a1a1a;
  --c-text-mid:      #333;
  --c-text-soft:     #444;
  --c-text-muted:    #555;
  --c-text-dim:      #666;
  --c-text-faint:    #888;
  --c-text-fainter:  #999;
  --c-text-disabled: #aaa;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Yu Gothic UI","Yu Gothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Meiryo",sans-serif;background:#f4f4f2;color:#1a1a1a;font-size:14px;height:100vh;overflow:hidden;display:flex;flex-direction:row;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.container{max-width:1024px;margin:0 auto;padding:1.5rem 1rem;width:100%}
/* ─── ChatGPT風レイアウト (3577-3578): サイドバー + 上部スクロール領域 + 下部固定 dock ─── */
/* 左サイドバー (折りたたみ可能) */
.app-sidebar{flex-shrink:0;width:316px;background:#fafafa;border-right:1px solid #e5e5e5;display:flex;flex-direction:column;transition:width 0.2s,padding 0.2s;overflow:hidden}
.app-sidebar.collapsed{width:0;border-right:none}
.app-sidebar-inner{padding:14px 10px;display:flex;flex-direction:column;height:100%;min-width:316px;box-sizing:border-box}
.app-sidebar h2{font-size:19px;font-weight:600;color:#1a1a1a;margin-bottom:14px;padding:6px 10px;letter-spacing:.01em;border-radius:8px;transition:background 0.12s}
.app-sidebar h2:hover{background:#eee}
.app-sidebar nav{display:flex;flex-direction:column;gap:1px}
.app-sidebar nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;font-size:13px;color:#1a1a1a;text-decoration:none;border-radius:8px;transition:background 0.12s;cursor:pointer;border:none;background:transparent;text-align:left;font-family:inherit;width:100%}
.app-sidebar nav a:hover{background:#eee}
.app-sidebar nav a.active{background:#e5e5e5;font-weight:500}
.app-sidebar nav a .icon{flex-shrink:0;width:16px;height:16px;color:#444;display:inline-flex;align-items:center;justify-content:center}
.app-sidebar nav a .icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.app-sidebar .build-info{padding:6px 10px;font-size:10px;color:#bbb;font-family:monospace;line-height:1.6}
/* 履歴リスト (ChatGPT/Claude風: フラット、 Recents 見出し、 余裕のある間隔) */
.sidebar-history-section{margin-top:18px;display:flex;flex-direction:column;flex:1;min-height:0}
.sidebar-history-label{font-size:11px;color:#888;font-weight:600;padding:0 10px 8px;letter-spacing:.06em;text-transform:uppercase}
.sidebar-history-list{flex:1;overflow-y:scroll;overflow-x:hidden;display:flex;flex-direction:column;gap:0;padding:0 0 8px 0;min-height:0}
.sidebar-history-list::-webkit-scrollbar{width:10px}
.sidebar-history-list::-webkit-scrollbar-track{background:#f4f4f2;border-radius:5px}
.sidebar-history-list::-webkit-scrollbar-thumb{background:#bbb;border-radius:5px;border:2px solid #f4f4f2;background-clip:padding-box;min-height:30px}
.sidebar-history-list::-webkit-scrollbar-thumb:hover{background:#888;background-clip:padding-box;border:2px solid #f4f4f2}
.sidebar-history-list{scrollbar-width:thin;scrollbar-color:#bbb #f4f4f2}
.sidebar-history-item{display:flex !important;align-items:center;width:100%;min-height:36px;box-sizing:border-box;padding:6px 12px;margin-bottom:2px;font-size:14px;font-weight:400;color:#0d0d0d;border-radius:8px;cursor:pointer;text-decoration:none;line-height:1.4;background:transparent;border:none;text-align:left;font-family:inherit;transition:background 0.12s;flex-shrink:0;letter-spacing:-0.01em}
.sidebar-history-item > span{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}
.sidebar-history-item:hover{background:#eee}
.sidebar-history-item.active{background:#e5e5e5;font-weight:500}
.sidebar-history-empty{padding:14px 10px;font-size:12px;color:#aaa;font-style:italic;text-align:center}
/* 履歴コンテキストメニュー (右クリックで出現) */
.sidebar-history-menu{position:fixed;background:#fff;border:1px solid #e5e5e5;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.12);padding:4px;z-index:9000;min-width:180px;font-size:13px}
.sidebar-history-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;background:transparent;border:none;cursor:pointer;border-radius:5px;color:#1a1a1a;font-size:13px;font-family:inherit;text-align:left}
.sidebar-history-menu button:hover{background:#f4f4f2}
.sidebar-history-menu button.danger{color:#aa2222}
.sidebar-history-menu button.danger:hover{background:#fee2e2}
.sidebar-history-menu hr{border:none;border-top:1px solid #e5e5e5;margin:4px 0}
.sidebar-history-menu .menu-icon{width:14px;height:14px;color:#666;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.sidebar-history-menu .menu-icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sidebar-history-menu button.danger .menu-icon{color:#aa2222}
/* 検索モーダル (ChatGPT風) */
.history-search-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:10000;display:flex;align-items:flex-start;justify-content:center;padding:80px 20px}
.history-search-box{background:#fff;border-radius:14px;width:100%;max-width:580px;box-shadow:0 20px 60px rgba(0,0,0,0.3);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.history-search-input-wrap{padding:14px 18px;border-bottom:1px solid #e5e5e5;display:flex;align-items:center;gap:10px}
.history-search-input-wrap .icon{color:#888;display:inline-flex}
.history-search-input-wrap .icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.history-search-input{flex:1;border:none;outline:none;font-size:15px;font-family:inherit;background:transparent;padding:4px 0}
.history-search-close{background:transparent;border:none;font-size:18px;color:#888;cursor:pointer;padding:4px 8px;line-height:1}
.history-search-close:hover{color:#1a1a1a}
.history-search-results{flex:1;overflow-y:auto;padding:8px}
.history-search-result{display:block;width:100%;padding:10px 12px;font-size:13px;color:#1a1a1a;border-radius:8px;cursor:pointer;text-decoration:none;line-height:1.4;background:transparent;border:none;text-align:left;font-family:inherit;margin-bottom:2px}
.history-search-result:hover, .history-search-result.focused{background:#f4f4f2}
.history-search-result .meta{font-size:11px;color:#888;margin-top:2px}
.history-search-result mark{background:#ffeb3b;color:#1a1a1a;padding:0 1px;border-radius:2px}
.history-search-empty{padding:24px;text-align:center;color:#888;font-size:13px}
/* サイドバー切替ボタン (画面の左上隅)
   3944: collapsed 時に表示、 これは画面幅に依らず効かせる (ChatGPT/Claude と同じ挙動)。
         デスクトップでも閉じれば☰が出るのでいつでも再オープン可能。 */
.sidebar-toggle{position:fixed;top:14px;left:14px;z-index:100;width:32px;height:32px;border-radius:7px;border:1px solid #e5e5e5;background:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:14px;color:#1a1a1a;transition:background 0.15s}
.sidebar-toggle:hover{background:#f4f4f2}
.app-sidebar.collapsed ~ .sidebar-toggle{display:flex}
/* メイン領域 (サイドバーの右側) */
.app-content{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.app-main{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:0;font-size:16px}
.app-main > .container{padding-bottom:1rem}
/* dock 内textarea もメイン領域と同じフォント感 */
.app-dock{font-size:16px}
.app-dock{flex-shrink:0;background:#f4f4f2;border-top:1px solid #e5e5e5;padding:14px 0 16px 0;box-shadow:0 -1px 2px rgba(0,0,0,0.02)}
.app-dock > .container{padding-top:0;padding-bottom:0}
/* 探索タブ内の card: ChatGPT風で枠なし、 paddingのみ (3589) */
#panel-search > .card{background:transparent;border:none;border-radius:0;padding:0;margin:0;box-shadow:none}
/* ─── 白紙状態 (3588-welcome): ウェルカム画面 + dockを中央に ─── */
/* 3940: ChatGPT 風に「タイトル + 例文ボタン + 入力欄」を1つの塊として
   画面の縦中央に配置する。 旧仕様では .app-main 内で welcome-screen が中央
   寄せされる一方、 .app-dock は画面下端に固定されていたため、 大きい画面で
   入力欄が welcome-screen から離れて見えていた。
   新仕様: welcome 時だけ .app-content の justify-content を center にし、
   .app-main を flex:0 で必要な高さだけにし、 dock を welcome-screen の
   直下にまとめて配置する。 通常 (探索結果表示) 時は元の動作に戻る。 */
body[data-welcome="true"] .app-content{
  justify-content:center;  /* 子 (.app-main + .app-dock) の塊を縦中央に */
  /* 画面が縦に短い (iPhone 等) ときに塊が画面高さを超えるなら、 中央寄せを
     諦めてスクロール許可。 overflow-y:auto は justify-content:center と
     共存できる (Flex で content が container を超えると start 寄せに
     折れる仕様だが、 縦スクロール自体は親側で許可しておけば見切れない)。 */
  overflow-y:auto;
}
body[data-welcome="true"] .app-main{
  flex:0 0 auto;           /* コンテンツ分の高さだけ確保 */
  display:block;           /* 不要な flex 中央寄せを解除 */
  overflow:visible;        /* welcome-screen は短いのでスクロール不要 */
}
body[data-welcome="true"] .app-main > .container{
  display:block;           /* 不要な中央寄せを解除 (子の welcome-screen 自身が
                               text-align:center + max-width で中央寄せ) */
  padding:0;
  max-width:1024px;
}
body[data-welcome="true"] #panel-search,
body[data-welcome="true"] #panel-search > .card{background:transparent;border:none;box-shadow:none;padding:0;margin:0;width:100%}
/* 白紙時: 探索系UIを隠す (welcomeMsgが代替表示) */
body[data-welcome="true"] #stepHitsBlock,
body[data-welcome="true"] #stepValidityBlock,
body[data-welcome="true"] #faProgressBlock,
body[data-welcome="true"] #topProgressArea,
body[data-welcome="true"] #fieldResultsArea,
body[data-welcome="true"] #vendorChartSection,
body[data-welcome="true"] .tabs,
body[data-welcome="true"] #resultsSection,
body[data-welcome="true"] #qaChatSection,
body[data-welcome="true"] #panel-json{display:none !important}
/* ウェルカムメッセージ — ChatGPT 風に余白を持たせた配置 */
.welcome-screen{display:none;text-align:center;padding:140px 1rem 80px 1rem;max-width:768px;margin:0 auto;width:100%}
body[data-welcome="true"] .welcome-screen{display:block}
.welcome-title{font-size:36px;font-weight:600;color:#0d0d0d;margin-bottom:32px;line-height:1.3;letter-spacing:-0.01em}
.welcome-subtitle{font-size:16px;color:#666;margin-bottom:72px;line-height:1.8}
/* 白紙時: dock を中央寄せ + 通常時より控えめに */
body[data-welcome="true"] .app-dock{background:transparent;border-top:none;box-shadow:none;padding:0 0 24px 0}
body[data-welcome="true"] .app-dock > .container{max-width:768px}
body[data-welcome="true"] #aiQueryPrompt{box-shadow:0 4px 16px rgba(0,0,0,0.06) !important;border-color:#d4d4d4 !important}
/* 白紙時: 「この条件で探索」行は最初は不要 */
body[data-welcome="true"] #searchControlsRow{display:none !important}
/* 例文ボタン (白紙時のみ表示) — 上余白を増やしてゆったり配置 */
.welcome-examples{margin-top:48px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.welcome-example-btn{background:#fff;border:1px solid #e5e5e5;border-radius:20px;padding:11px 18px;font-size:14px;color:#1a1a1a;font-family:inherit;cursor:pointer;transition:all 0.12s}
.welcome-example-btn:hover{background:#f4f4f2;border-color:#c0c0c0}

/* ── QA チャット (探索結果に対する質問) ── ChatGPT 風 ──
   フォントサイズと padding は .user-bubble と統一して画面全体の見た目を一貫させる
   (ChatGPT 準拠で 16px / line-height 1.6 / padding 14px 18px) */
.qa-msg{display:flex;gap:12px;align-items:flex-start;animation:qaFadeIn 0.25s ease-out}
.qa-msg-user{justify-content:flex-end}
.qa-msg-assistant{justify-content:flex-start}
.qa-bubble{max-width:75%;padding:14px 18px;border-radius:18px;font-size:16px;line-height:1.65;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.qa-bubble-user{background:#f0f4ff;border:1px solid #dde6ff;color:#1a1a1a;border-radius:18px 18px 4px 18px}
.qa-bubble-assistant{background:#fff;border:1px solid #e5e5e5;color:#1a1a1a;border-radius:18px 18px 18px 4px}
.qa-bubble-assistant strong{font-weight:600;color:#0d0d0d}
.qa-bubble-assistant code{background:#f4f4f2;padding:2px 6px;border-radius:4px;font-size:14px;font-family:Consolas,Monaco,monospace}
@keyframes qaFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.qa-spinner{display:inline-block;width:12px;height:12px;border:2px solid #ddd;border-top:2px solid #1a1a1a;border-radius:50%;animation:qaSpin 0.8s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes qaSpin{to{transform:rotate(360deg)}}

/* 3806: textarea overlay 「処理中…」 用スピナー */
@keyframes textareaSpin{to{transform:rotate(360deg)}}

/* 3669: ChatGPT風ユーザーバブル — 入力テキストを画面上部に固定表示 */
.user-bubble-container{display:none;max-width:100%;padding:14px 0 6px 0;animation:bubbleFadeIn 0.25s ease-out}
.user-bubble-container.show{display:flex;justify-content:flex-end}
.user-bubble{background:#f0f4ff;border:1px solid #dde6ff;color:#1a1a1a;border-radius:18px 18px 4px 18px;padding:14px 18px;font-size:16px;line-height:1.65;max-width:75%;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 2px rgba(0,0,0,0.04);position:relative}
.user-bubble::before{content:'あなたの依頼';position:absolute;top:-18px;right:6px;font-size:10px;color:#888;font-weight:500;letter-spacing:0.04em}
html[lang="en"] .user-bubble::before{content:'Your request'}

/* 3771: 言語別表示制御 (welcome-subtitle 等で使用)
   .lang-ja-only = 日本語時だけ表示、 .lang-en-only = 英語時だけ表示 */
html[lang="ja"] .lang-en-only{display:none !important}
html[lang="en"] .lang-ja-only{display:none !important}
/* デフォルト (lang 属性が ja でも en でもない場合) は ja を出す */
html:not([lang="en"]) .lang-en-only{display:none !important}
@keyframes bubbleFadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
/* welcome 状態では非表示にする (welcome 中は textarea が中央に出ているため) */
body[data-welcome="true"] .user-bubble-container{display:none !important}
@media(max-width:640px){.user-bubble{max-width:90%;font-size:14px;padding:10px 14px}}

/* 3757: ChatGPT風アシスタント応答バブル — 探索完了/中断時に表示
   3759/3760: QA bubble (.qa-bubble-assistant) と同じスタイルに完全統一
   - 白背景 + 薄いグレー枠 + 微妙な影 + 角丸 (左下のみ尖る) */
/* 3779: 複数バブル対応 — 縦に並べて間隔を入れる */
.assistant-bubble-container{max-width:100%;padding:8px 0 12px 0;animation:bubbleFadeIn 0.25s ease-out;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.assistant-bubble{background:#fff;border:1px solid #e5e5e5;color:#1a1a1a;border-radius:18px 18px 18px 4px;padding:14px 18px;font-size:16px;line-height:1.65;max-width:75%;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 2px rgba(0,0,0,0.04);display:flex;align-items:center;gap:10px;animation:bubbleFadeIn 0.3s ease-out}
/* 完了/中断のラベル分けはアイコン (✓/⊘) のみで識別。 背景色や枠線は同じ */
/* welcome 状態では非表示 */
body[data-welcome="true"] .assistant-bubble-container{display:none !important}
@media(max-width:640px){.assistant-bubble{max-width:90%;font-size:14px;padding:10px 14px}}
@media(max-width:1024px){
  .app-sidebar{position:fixed;left:0;top:0;height:100vh;z-index:50;box-shadow:2px 0 8px rgba(0,0,0,0.1)}
  .app-sidebar.collapsed{width:0;box-shadow:none}
  /* 3944: モバイル時の `display:flex !important` は撤廃 ─
     `.app-sidebar.collapsed ~ .sidebar-toggle{display:flex}` (line 139) に任せる。
     これで「閉じてる時だけ ☰ ボタンが出る」 = サイドバー開時はオーバーレイ + 内部の閉じ動線で閉じる。
     3944: ブレークポイントを 768 → 1024 に拡大 (iPhone 横向き / iPad もモバイル扱い)。 */
}
@media(max-width:640px){.app-dock{padding:10px 0 12px 0}}
h1{font-size:18px;font-weight:500;margin-bottom:1.25rem}
.card{background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:1rem 1.25rem;margin-bottom:1rem}
.card-title{font-size:11px;font-weight:600;color:#999;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.07em}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:10px}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:12px;color:#666}
.field input{font-size:13px;padding:6px 10px;border:1px solid #ddd;border-radius:7px;background:#fafafa;color:#1a1a1a;height:34px;outline:none}
.field input:focus{border-color:#3355cc;background:#fff}
.field input[type=number]{width:88px}
.field input[type=password]{width:200px}
.field input[type=text]{width:260px}
.field input[type=file]{height:auto;padding:4px 8px;font-size:12px;background:#fff;cursor:pointer}
.btn{height:34px;padding:0 14px;font-size:13px;border:1px solid var(--c-border);border-radius:7px;background:var(--c-surface);color:var(--c-text);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--c-bg)}
.btn:active{transform:scale(.98)}
.btn:disabled{background:var(--c-text-disabled);border-color:var(--c-text-disabled);color:#fff;cursor:not-allowed}
/* セマンティック塗りつぶしボタン (色は :root 変数経由なので将来一括変更可) */
.btn-primary{background:var(--c-info);color:#fff;border-color:var(--c-info)}
.btn-primary:hover{background:var(--c-info)}
.btn-info{background:var(--c-info-mid);color:#fff;border-color:var(--c-info-mid)}
.btn-info:hover{background:var(--c-info-dark)}
.btn-success,.btn-green{background:var(--c-success);color:#fff;border-color:var(--c-success)}
.btn-success:hover,.btn-green:hover{background:var(--c-success-dark)}
.btn-warning{background:var(--c-warning);color:#fff;border-color:var(--c-warning)}
.btn-warning:hover{background:var(--c-warning-dark)}
.btn-danger{background:var(--c-error);color:#fff;border-color:var(--c-error)}
.btn-danger:hover{background:var(--c-error-dark)}
.btn-ai,.btn-purple{background:var(--c-ai);color:#fff;border-color:var(--c-ai)}
.btn-ai:hover,.btn-purple:hover{background:var(--c-ai)}
/* セマンティックアウトラインボタン (透明背景 + 色付き文字/枠線) */
.btn-outline-danger{background:transparent;color:var(--c-error);border-color:var(--c-error)}
.btn-outline-danger:hover{background:var(--c-error-bg)}
.btn-outline-success{background:transparent;color:var(--c-success);border-color:var(--c-success)}
.btn-outline-success:hover{background:var(--c-success-bg)}
.btn-outline-info{background:transparent;color:var(--c-info-mid);border-color:var(--c-info-mid)}
.btn-outline-info:hover{background:var(--c-info-bg)}
/* アイコンボタン (×閉じるボタン等。 背景・枠線なし) */
.btn-icon{background:transparent;border:none;color:var(--c-text-faint);cursor:pointer;padding:4px 8px}
.btn-icon:hover{color:var(--c-text-mid)}
/* 番付テーマ専用ボタン (相撲番付ウィンドウ表示用) */
.btn-banzuke{background:linear-gradient(135deg,var(--c-error-dark),var(--c-error-dark));color:var(--c-banzuke-text);border:2px solid var(--c-error-dark);font-family:'Noto Serif JP',serif;font-weight:900;letter-spacing:0.15em;border-radius:8px;cursor:pointer;transition:transform 0.15s}
.btn-banzuke:hover{transform:scale(1.05);background:linear-gradient(135deg,var(--c-error-dark),var(--c-error-dark));color:var(--c-banzuke-text)}
.btn-banzuke-outline{background:var(--c-surface);color:var(--c-banzuke);border:2px solid var(--c-error-dark);font-family:'Noto Serif JP',serif;font-weight:700;letter-spacing:0.05em;border-radius:8px;cursor:pointer;transition:transform 0.15s}
.btn-banzuke-outline:hover{transform:scale(1.05);background:var(--c-surface);color:var(--c-banzuke)}
/* 旧クラス互換: btn-purple は btn-ai のエイリアス、 btn-green は btn-success のエイリアス (上記で共通定義済み) */
.btn-primary:disabled,.btn-purple:disabled,.btn-ai:disabled,.btn-success:disabled,.btn-green:disabled,.btn-info:disabled,.btn-warning:disabled,.btn-danger:disabled{background:var(--c-text-disabled);border-color:var(--c-text-disabled);cursor:not-allowed}
.btn-sm{height:30px;padding:0 10px;font-size:12px}
.btn-mega{height:54px;padding:0 32px;font-size:18px;font-weight:700;border-radius:10px;letter-spacing:.05em;box-shadow:0 4px 12px rgba(51,85,204,0.35);transition:all 0.2s}
.btn-mega:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(51,85,204,0.5)}
.btn-mega:active{transform:translateY(0);box-shadow:0 2px 6px rgba(51,85,204,0.3)}
.btn-mega:disabled{box-shadow:none;transform:none}
.btn-mega:not(:disabled){animation:megaPulse 2s ease-in-out infinite}
/* ChatGPT風送信ボタン (円形矢印) のdisabled状態 */
#aiGenerateBtn:disabled{background:#aaa !important;cursor:not-allowed;opacity:0.7}
@keyframes megaPulse{
  0%,100%{box-shadow:0 4px 12px rgba(51,85,204,0.35)}
  50%{box-shadow:0 4px 20px rgba(51,85,204,0.7)}
}
/* Phase 1/2 進捗バーの斜めストライプアニメ (動いている感を強調) */
@keyframes phase-progress-stripes{
  0%{background-position:0 0,0 0}
  100%{background-position:30px 0,0 0}
}
/* 進捗バー幅0%の時はアニメも止める (見た目クリーン) */
.phase-progress-bar[style*="width: 0%"]{animation:none !important}
/* faLog: ChatGPT風ミニマル化 (3599) で常に非表示。 ログは F12 コンソールで確認 */
#faLog{display:none !important}
/* startBtn (この条件で探索) は廃止 (3602): 同じ機能は textarea を空にして送信ボタンで代替 */
#startBtn{display:none !important}
#searchControlsRow{display:none !important}
/* 旧 hidden の serpapiKeyField (互換維持の input) は常に hidden (3608: visible UI に分離後、 誤って表示されないように) */
#serpapiKeyField{display:none !important}
/* AI問い合わせ中のスピナー (3611: ぐるぐる回転して動いていることを示す) */
.ai-spinner{
  display:inline-block;
  width:14px;
  height:14px;
  border:2px solid #e5e5e5;
  border-top-color:#1a1a1a;
  border-radius:50%;
  animation:aiSpinnerRotate 0.8s linear infinite;
  vertical-align:-2px;
  margin-right:6px;
}
@keyframes aiSpinnerRotate{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
.sep{width:1px;height:24px;background:#e5e5e5;margin:0 2px}
.status-bar{display:flex;align-items:center;gap:10px;margin-top:10px;min-height:20px}
.status{font-size:14px;color:#888}
.status.err{color:#aa2222}.status.ok{color:#1e7a45}.status.warn{color:#854d0e}
.pb{flex:1;height:4px;background:#eee;border-radius:2px;overflow:hidden;display:none}
.pf{height:100%;background:#3355cc;border-radius:2px;transition:width .4s}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:1rem}
.metric{background:#f4f4f2;border-radius:8px;padding:.75rem 1rem}
.mlabel{font-size:11px;color:#999;margin-bottom:4px}
.mval{font-size:22px;font-weight:500}
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:640px){.charts-grid{grid-template-columns:1fr}}
/* 3708: 履歴アイテムの「進行中」バッジ用パルス */
@keyframes hbPulse{0%,100%{opacity:0.45;transform:scale(0.85)}50%{opacity:1;transform:scale(1.1)}}
/* 3715: 進行中の履歴アイテム — ラベル文字をフェード点滅 */
.sidebar-history-pulse{animation:hbTextPulse 1.5s ease-in-out infinite}
@keyframes hbTextPulse{0%,100%{opacity:1}50%{opacity:0.4}}
/* 3716: 中断された履歴アイテム — イタリック + 少しグレー */
.sidebar-history-cancelled{font-style:italic;color:#888}
/* 3705: ベンダー別シェア + 結果一覧 を 1 枠内で 2 列に */
.merged-pie-list-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}
@media(max-width:640px){.merged-pie-list-grid{grid-template-columns:1fr}}
.cw{background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:1rem;margin-bottom:1rem}
.ct{font-size:13px;font-weight:500;margin-bottom:.75rem}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.li{display:flex;align-items:center;gap:5px;font-size:11px;color:#555}
.ld{width:10px;height:10px;border-radius:2px;flex-shrink:0}
table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:left;padding:6px 8px;border-bottom:1px solid #eee;font-weight:500;font-size:11px;color:#999}
td{padding:6px 8px;border-bottom:1px solid #f4f4f2;vertical-align:middle}
tr:last-child td{border-bottom:none}
.hidden{display:none}
/* 装置語選択モーダル */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal-box{background:#fff;border-radius:12px;padding:1.5rem;max-width:700px;width:90%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.modal-title{font-size:15px;font-weight:600;margin-bottom:.75rem}
.modal-body{overflow-y:auto;flex:1;margin-bottom:1rem}
.modal-vendor{margin-bottom:.75rem}
.modal-vendor-head{font-size:13px;font-weight:500;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.modal-terms{display:flex;flex-wrap:wrap;gap:4px 12px;padding-left:18px;font-size:12px}
.modal-terms label{display:flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.modal-count{font-size:12px;color:#888;margin-right:auto}
.info{background:#fff8e1;border:1px solid #f5a623;border-radius:7px;padding:.6rem 1rem;font-size:12px;color:#854d0e;margin-bottom:.75rem;line-height:1.6}
.tabs{display:flex;border-bottom:2px solid #e5e5e5;margin-bottom:1rem}
.tab{padding:8px 20px;font-size:14px;font-weight:500;color:#999;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s}
.tab:hover{color:#444}
.tab.active{color:#1a1a1a;border-bottom-color:#1a1a1a}
.tab-panel{display:none}
.tab-panel.active{display:block}
/* JSON editor */
.jv-empty{font-size:12px;color:#aaa;padding:2rem;text-align:center}
.jv-meta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:1rem}
.jv-meta-card{background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:.5rem .9rem;font-size:12px}
.jv-meta-label{color:#999;font-size:10px;margin-bottom:2px}
.jv-meta-val{font-weight:500}
.jv-meta-input{font-size:12px;font-weight:500;color:#1a1a1a;border:1px solid transparent;border-radius:5px;padding:2px 5px;background:transparent;width:100%;outline:none;font-family:inherit;transition:border-color .15s,background .15s}
.jv-meta-input:hover{border-color:#ddd;background:#fafafa}
.jv-meta-input:focus{border-color:#3355cc;background:#fff}
textarea.jv-meta-input{resize:vertical;min-height:40px;line-height:1.5;font-weight:400}
.jv-vendor{background:#fff;border:1px solid #e5e5e5;border-radius:10px;margin-bottom:.75rem;overflow:hidden}
.jv-vhead{display:flex;align-items:center;gap:10px;padding:.65rem 1rem;background:#f8f8f7;border-bottom:1px solid #eee;cursor:pointer;user-select:none}
.jv-vname{font-size:13px;font-weight:500}
.jv-badge{font-size:11px;padding:2px 8px;border-radius:20px;background:#e5e5e5;color:#555;white-space:nowrap}
.jv-arrow{font-size:10px;color:#aaa;margin-left:auto;transition:transform .2s;flex-shrink:0}
.jv-arrow.open{transform:rotate(90deg)}
.jv-vbody{display:none;padding:.75rem 1rem 1rem}
.jv-section-label{font-size:11px;font-weight:600;color:#999;margin:.8rem 0 .4rem;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:8px}
.jv-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.5rem;align-items:center}
.jv-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;border-radius:4px;padding:2px 6px 2px 8px;font-family:monospace}
.jv-tag.alias{background:#eef2ff;color:#3355cc}
.jv-tag.term{background:#f4f4f2;color:#333}
.jv-tag.field-tag{background:#e8f5e9;color:#1c5530}
.jv-tag-del{background:none;border:none;cursor:pointer;color:inherit;opacity:.45;font-size:13px;line-height:1;padding:0 1px;flex-shrink:0}
.jv-tag-del:hover{opacity:1}
.jv-add-row{display:flex;gap:6px;align-items:center;margin-top:4px}
.jv-add-input{font-size:12px;padding:4px 8px;border:1px solid #ddd;border-radius:6px;background:#fafafa;color:#1a1a1a;height:28px;outline:none;font-family:monospace;flex:1;min-width:0}
.jv-add-input:focus{border-color:#3355cc;background:#fff}
.jv-add-btn{height:28px;padding:0 10px;font-size:12px;border:1px solid #3355cc;border-radius:6px;background:#3355cc;color:#fff;cursor:pointer;white-space:nowrap;flex-shrink:0}
.jv-add-btn:hover{background:#3355cc}
.jv-query-box{background:#f4f4f2;border-radius:6px;padding:.6rem .8rem;font-family:monospace;font-size:11px;color:#444;line-height:1.6;word-break:break-all;border:1px solid #e5e5e5}
.jv-save-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.jv-save-status{font-size:12px;color:#888}
.dirty-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#f5a623;margin-right:4px;vertical-align:middle}
/* 分野分析 */
.field-analysis-box{background:#f5f3ff;border:1px solid #ddd6fe;border-radius:10px;padding:1rem 1.25rem;margin-bottom:1rem}
.field-analysis-title{font-size:13px;font-weight:500;color:#1a1a1a;margin-bottom:.75rem}
.openai-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-bottom:.75rem}
.fa-status{font-size:14px;color:#666;margin-top:4px;font-weight:400;padding:0;background:transparent;border:0}
.fa-status.err{color:#aa2222;background:transparent;border:0}
.fa-status.ok{color:#1a1a1a;background:transparent;border:0}
.fa-status.warn{color:#666;background:transparent;border:0}
.fa-status.idle{color:#888;background:transparent;border:0;padding:0;font-weight:400}
.fa-pb{width:100%;height:4px;background:#f4f4f2;border-radius:2px;overflow:hidden;display:none;margin-top:6px}
.fa-pf{height:100%;background:#1a1a1a;border-radius:2px;transition:width .3s}
.fa-charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1rem}
.fa-vendor-card{background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:1rem}
.fa-vendor-name{font-size:12px;font-weight:600;margin-bottom:.5rem}
.fa-legend{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.fa-li{display:flex;align-items:center;gap:4px;font-size:10px;color:#555}
.chk-label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#555;cursor:pointer;user-select:none}
.chk-label input{width:15px;height:15px;cursor:pointer}
/* 折りたたみセクションのヘッダーボタン */
.section-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;font-size:14px;font-weight:600;color:#1a1a1a;background:#eef2ff;border:1px solid #ddd6fe;border-left:4px solid #3355cc;border-radius:8px;cursor:pointer;text-align:left;transition:background .15s,border-color .15s;font-family:inherit}
.section-toggle:hover{background:#eef2ff;border-color:#ddd6fe;border-left-color:#3355cc}
.section-toggle.closed{background:#f4f4f2;border-color:#e5e5e5;border-left-color:#aaa;color:#555}
.section-toggle.closed:hover{background:#e5e5e5;border-left-color:#888}
.section-toggle .st-caret{display:inline-block;font-size:11px;color:#3355cc;width:14px;text-align:center;transition:transform .15s}
.section-toggle.closed .st-caret{color:#888}
.section-toggle .st-label{flex:1}
.section-toggle .st-hint{font-size:10px;font-weight:400;color:#888;background:#fff;border:1px solid #ddd;border-radius:10px;padding:2px 8px;letter-spacing:.02em}
.section-toggle.closed .st-hint{background:#fafafa}

/* === Lang switcher (旧 index.html line 1463-1469) === */
/* 言語切替ボタン */
.lang-switcher{position:fixed;top:10px;right:14px;z-index:9999;display:flex;gap:0;background:#fff;border:1px solid #ccc;border-radius:6px;overflow:hidden;font-size:11px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.lang-btn{background:transparent;border:none;padding:5px 10px;cursor:pointer;color:#666;font-weight:600;font-family:inherit;font-size:11px;letter-spacing:.02em;transition:background .15s,color .15s}
.lang-btn:hover{background:#f4f4f2;color:#333}
.lang-btn.active{background:#3355cc;color:#fff}
.lang-btn:not(:last-child){border-right:1px solid #ddd}
.lang-btn.active:not(:last-child){border-right-color:#3355cc}

/* === Search context area (旧 index.html line 1241-1249) === */
    #searchContextArea { margin-bottom: 12px; }
    #aiGenerateStatus:empty { display: none !important; }
    #aiGenerateStatus:not(:empty) { display: block; }
    #searchContextLabels { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 14px; }
    /* 中身が空の searchContextLabels は表示しない */
    #searchContextLabels:not(:has(> *:not([style*="display:none"]))) { display: none; }
    /* searchContextArea 自体: 中身がなければ margin もゼロに (3589) */
    #searchContextArea:not(:has(*:not([style*="display:none"]))) { margin: 0; min-height: 0; }

/* ════════════════════════════════════════════════════════════════════
   3785→3790: 「中間報告」ブロックを段階的に表示する
   ────────────────────────────────────────────────────────────────────
   表示OK (Phase 0 完了で出る基本情報):
     - ベンダー別の論文プレゼンス (円グラフ)        … #resultPieTitleEl の親カード
     - 結果一覧(ヒット数順)                       … #resultListTitleEl の親カード

   段階的開示 (3790):

     [body.phase1-pending] = Phase 1 が未完了 (Phase 0 完了直後 〜 Phase 1 完了前)
        → 番付/地図/ネットワーク + 分野別パネル すべて非表示
        非表示対象: #midResultBannerSlot, #worldMapSection,
                  #fieldAnalysisPanel (中身全部含む), #detailSection

     [body.phase2-pending] = Phase 2 が未完了 (Phase 1 完了 〜 Phase 2 完了前)
        → 番付プレビュー、 世界地図、 ネットワーク図 を見せる (Phase 1 で揃ったので)
        → 分野別パネルの 「タイトル + 国フィルタ + 分類フィルタ」 などの装飾は隠す
           (Phase 2 でしか意味のないコントロールだから)
        → 装置語別詳細グラフ (#detailSection) も隠す (Phase 2 補正後の値を出すため)

        ポイント: ネットワーク図は #fieldAnalysisPanel > #fieldResultsArea 内に
                 描画されるので、 親 #fieldAnalysisPanel ごと隠してしまうと
                 ネットワーク図も消える。 そこで子要素のうち #fieldResultsArea
                 「以外」 を隠す方式にする。
        非表示対象: #detailSection,
                  #fieldAnalysisPanel > *:not(#fieldResultsArea)

     Phase 2 完了後 = body から両方の class が外れる
        → すべて表示。 Phase 3 完了で番付の signature が反映されて最終形に。

   解除タイミング: 中断/失敗/早期終了で両方の class を外す
   ════════════════════════════════════════════════════════════════════ */

  /* Phase 1 未完了: すべての中間成果物を隠す */
  body.phase1-pending #midResultBannerSlot,
  body.phase1-pending #worldMapSection,
  body.phase1-pending #fieldAnalysisPanel,
  body.phase1-pending #detailSection,
  body.phase1-pending #vendorFreeLogPanel {
    display: none !important;
  }

  /* Phase 2 未完了: 番付/地図/ネットワーク図は見せる、 分野別パネル系を隠す
     ─────────────────────────────────────────────────────────────────
     fieldAnalysisPanel の中で、 #fieldResultsArea (ネットワーク図の置き場所) を残し、
     それ以外の子要素 (タイトル / 分類フィルタ / 国フィルタ / 余白の div など) を非表示にする。
     CSS の :not セレクタを使って 「fieldResultsArea 以外」 をターゲットする。 */
  body.phase2-pending #detailSection {
    display: none !important;
  }
  body.phase2-pending #fieldAnalysisPanel > *:not(#fieldResultsArea) {
    display: none !important;
  }
  /* fieldAnalysisPanel の枠 (#fieldAnalysisPanel) 自体の余白も Phase 2 中は薄くしておく
     (タイトルが消えてネットワーク図だけが残るので、 上の余白が浮かないように) */
  body.phase2-pending #fieldAnalysisPanel {
    padding-top: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }


/* ════════════════════════════════════════════════════════════════════
   3788: チャットメッセージボックス (アシスタントバブル) のフォントサイズ統一
   ────────────────────────────────────────────────────────────────────
   旧 (〜3787): .assistant-bubble の font-size/line-height/padding は CSS で定義済みだが、
                  複数バブルが順次追加されると、 ブラウザのレンダリングで微妙に違って見える
                  ケースが報告された (ユーザー指摘: 添付画像でフォントサイズばらばら)。
   新 (3788)  : すべての .assistant-bubble 要素に対して !important で font-size /
                line-height / font-family / font-weight / padding を強制統一。
                これで「最初のバブル/期間バブル/完了バブル」が必ず同じ見た目になる。
   3789追記   : .thinking-bubble (処理中…バブル) も同じ font-size/padding に揃える。
   ════════════════════════════════════════════════════════════════════ */
  .assistant-bubble-container .assistant-bubble {
    font-size: 15px !important;
    line-height: 1.65 !important;
    font-family: inherit !important;
    font-weight: 400 !important;
    padding: 13px 18px !important;
    letter-spacing: 0 !important;
  }
  @media (max-width: 640px) {
    .assistant-bubble-container .assistant-bubble {
      font-size: 13px !important;
      padding: 10px 14px !important;
    }
  }

/* ════════════════════════════════════════════════════════════════════
   3789: Claude/ChatGPT 風 動作中スピナーバブル (再導入)
   ────────────────────────────────────────────────────────────────────
   - チャット末尾 (textarea ドックの直前) に表示
   - Phase 0 開始 〜 Phase 3 完了/失敗/中断 まで表示
   - QA チャット応答中は使わない (QA 側は qaChatStatus を使うため独立)
   - assistant-bubble と同系のデザインで、 左寄せ・ドット3つのアニメ
   - ユーザー方針 (3789): 「バブル中の 処理中 + スピナー」 だけにし、
                         各 Phase ヘッダー側の既存スピナーは隠す (別ルールで対応)
   ════════════════════════════════════════════════════════════════════ */
  .thinking-bubble-container {
    max-width: 100%;
    padding: 8px 0 12px 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    animation: bubbleFadeIn 0.25s ease-out;
  }
  /* 3798→3799: 表示は明示的に .show が付いた時だけ。
     - 旧: body[data-welcome="true"] のときのみ非表示 (一つの条件)
     - 新: .show が付いていないなら何があっても非表示。
       理由: ユーザー報告で welcome 画面に「処理中」テキストだけが
       ゴーストとして残るバグがあり、 ブラウザキャッシュ等で
       data-welcome 属性の検出に失敗するケースを想定して、
       強制的に「.show なしなら非表示」を最高優先度で固定する。 */
  .thinking-bubble-container:not(.show) { display: none !important; }
  .thinking-bubble-container.show { display: flex; }
  /* welcome 状態では 念のため .show が付いていても強制非表示 */
  body[data-welcome="true"] .thinking-bubble-container,
  body[data-welcome="true"] .thinking-bubble-container.show {
    display: none !important;
  }
  .thinking-bubble {
    background: #f7f8fc;             /* 3807: より目立つ薄青グレー背景に変更 (旧: 白) */
    border: 1px solid #c8d0e0;       /* 3807: 枠線も濃く (旧: #e5e5e5) */
    color: #1a1a1a;                  /* 3807: テキストもしっかり黒に (旧: #555) */
    border-radius: 18px 18px 18px 4px;
    padding: 16px 22px;              /* 3807: パディングも大きめに */
    font-size: 16px;                 /* 3807: 15px → 16px */
    font-weight: 500;                /* 3807: 中太に */
    line-height: 1.65;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);  /* 3807: 影も濃く */
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .thinking-bubble-spinner {
    width: 18px;                     /* 3807: 14px → 18px */
    height: 18px;
    border: 2.5px solid #d0d6e3;     /* 3807: 枠もはっきり */
    border-top-color: #1a1a1a;
    border-radius: 50%;
    animation: qaSpin 0.8s linear infinite;
    flex-shrink: 0;
  }
  .thinking-bubble-text {
    color: #1a1a1a;                  /* 3807: 灰色 → 黒 (くっきり) */
    font-size: 16px;                 /* 3807: 15 → 16 に統一 */
    font-weight: 500;
    letter-spacing: 0;
  }
  /* ドット 3 つの「思考中」アニメ (テキストの後ろに付く) */
  .thinking-bubble-dots {
    display: inline-flex;
    gap: 3px;
    margin-left: 4px;
    align-items: center;
  }
  .thinking-bubble-dots span {
    width: 4px; height: 4px;
    background: #888;
    border-radius: 50%;
    animation: thinkingDot 1.2s ease-in-out infinite;
  }
  .thinking-bubble-dots span:nth-child(2) { animation-delay: 0.15s; }
  .thinking-bubble-dots span:nth-child(3) { animation-delay: 0.3s; }
  @keyframes thinkingDot {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0) }
    30% { opacity: 1; transform: translateY(-2px) }
  }
  @media (max-width: 640px) {
    .thinking-bubble { font-size: 13px; padding: 10px 14px }
    .thinking-bubble-text { font-size: 13px }
  }

/* ════════════════════════════════════════════════════════════════════
   3789: 各 Phase ヘッダー (Phase 0/妥当性/1/2/3) 内の既存スピナーを隠す
   ────────────────────────────────────────────────────────────────────
   ユーザー方針: 「動作中スピナーは チャット末尾の thinking-bubble 1箇所だけ」。
   Phase 進捗ブロック内の各種スピナーは視覚的に重複なので非表示にする。

   隠す対象: AI 問い合わせ中スピナー (.ai-spinner) — Phase 0 妥当性チェック中の
            「妥当性をAIで判定中... (model: gpt-5-mini)」 等の左に出ているもの。
   ────────────────────────────────────────────────────────────────────
   注意: しましまの Phase 進捗バー (.phase-progress-bar 系) は 「動作中スピナー」 ではなく
        進捗の可視化として必要なので残す。 中断時にバーを停止させる処理は cancelAnalysis 側で。
   ════════════════════════════════════════════════════════════════════ */
  .ai-spinner { display: none !important; }

  /* ════════════════════════════════════════════════════════════════════
     3789-2 → 3790: 中断/完了時にプログレスバーのストライプアニメを CSS で強制停止
     ────────────────────────────────────────────────────────────────────
     ユーザー指摘 (3789): 中断ボタン押下後に「中断しました」バブルは出るが、
                        Phase プログレスバーのストライプアニメが止まらず、
                        「中断できていない」 ように見える、 という報告。
     原因: JS から animation を 'none' にしても、 各 Phase ループ内で再付与される
            タイミングがあり、 setInterval guard も 3秒で止まってしまう。
     対策: 「探索中ではない」 = body.search-running が無い 状態では、 CSS の
            !important でアニメと斜めストライプの背景画像を強制クリアする。
            これだと JS が再付与しても CSS specificity で必ず止まる。
     3790 改訂: 当初は phase1-pending / phase2-pending で判定しようとしたが、
                Phase 2 完了 (=phase2-pending を外す) と Phase 3 開始の間で
                プログレスバーが止まる/動くを繰り返してしまうため、 探索処理全体の
                running 状態を独立フラグ body.search-running で管理する方式に変更。
                _setSendButtonRunning(true) で付与、 (false) で解除。 Phase 3 完了
                まで search-running は持続する。
     ════════════════════════════════════════════════════════════════════ */
  body:not(.search-running) .phase-progress-bar {
    animation: none !important;
    background-image: none !important;
  }

/* ════════════════════════════════════════════════════════════════════
   3939: iPhone / モバイル全面対応
   ────────────────────────────────────────────────────────────────────
   ・100vh → 100dvh: iOS Safari のアドレスバー表示/非表示で破綻しないように
   ・safe-area-inset 対応 (ノッチ/ホームバー領域の確保)
   ・iOS の input 自動ズーム抑止: フォーカス時の font-size を 16px 以上に
   ・サイドバー オーバーレイ化 (768px 以下で既に position:fixed) の改善
     - 開いた時に背景に半透明オーバーレイを出して、 タップで閉じる手がかりに
   ・dock 周辺の余白とフォントを iPhone 用に最適化
   ・welcome-screen の上下余白を縮める (画面が縦に短いiPhoneで埋もれる防止)
   ・横スクロール禁止 + 横長コンテンツ (number map / banzuke 表) のはみ出し防止
   ・タップターゲットの最小高さ確保 (Apple HIG 準拠で 44px)
   ・welcome-examples の例文ボタン: 横並びだとはみ出すので折返し最適化
   ・ホバー前提のスタイル無効化 (タッチ環境では :hover を抑制)
   ════════════════════════════════════════════════════════════════════ */

/* --- 全環境で有効: 100dvh 対応 (古い Safari は 100vh fallback で問題なし) --- */
@supports (height: 100dvh) {
  html, body { height: 100dvh }
}

/* --- 横スクロール完全禁止 (図やテーブルは個別の overflow-x:auto で扱う) --- */
html, body { max-width: 100vw; overflow-x: hidden }

/* iPhone Safari: input フォーカス時の自動ズーム抑止のため、 主要入力欄は 16px に。
   注意: ネットワーク図やチャート内の細かい inline input (高さ 24px 等) は
   レンダリング時に固定サイズで挿入されるため、 ここでは触らない。
   触ると幅高さが破綻する (網羅的な !important は危険)。
   対象は、 ユーザーが本気で文字入力する場所だけに絞る:
   - dock の textarea (#aiQueryPrompt)  ※既に 16px なので確認のみ
   - 履歴検索モーダル (.history-search-input)
   - .field input (設定パネル系)
   それ以外 (jv-meta-input, jv-add-input, ネットワーク検索 等) は無視。 */
@media (max-width: 1024px) {
  #aiQueryPrompt,
  .history-search-input,
  .field input[type="text"],
  .field input[type="number"],
  .field input[type="password"],
  .field input[type="email"],
  .field input[type="search"],
  .field input[type="url"],
  .field input[type="tel"],
  .field textarea,
  .field select {
    font-size: 16px !important;
  }
  /* .field input は元々 height:34px だったが 16px だと窮屈なので少し拡大 */
  .field input[type="text"],
  .field input[type="number"],
  .field input[type="password"],
  .field input[type="email"] { height: 38px !important }
}

/* ──────────────────────────────────────────────────────────────────
   ≤ 1024px (3944: タブレット / iPhone 縦・横向き — 大半のモバイル端末)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* container の左右余白を控えめに (元: 1.5rem 1rem) */
  .container { padding: 1rem 0.75rem }

  /* welcome-screen: 上余白を 140px → 60px に (画面の縦サイズが小さいので) */
  .welcome-screen { padding: 60px 1rem 40px 1rem }
  .welcome-title { font-size: 26px; margin-bottom: 20px }
  .welcome-subtitle { font-size: 14px; margin-bottom: 36px; line-height: 1.7 }
  .welcome-examples { gap: 8px; margin-top: 24px }
  .welcome-example-btn { padding: 9px 14px; font-size: 13px }

  /* dock の textarea を画面幅いっぱいに使えるよう padding を圧縮 */
  .app-dock { padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px)) 0 }

  /* サイドバー切替ボタン: 親指で押しやすい位置 (左上) を維持しつつサイズUP */
  .sidebar-toggle {
    width: 40px; height: 40px;
    top: max(10px, env(safe-area-inset-top, 0px));
    left: max(10px, env(safe-area-inset-left, 0px));
    font-size: 18px;
  }

  /* card 内 padding 圧縮 */
  .card { padding: 0.875rem 0.875rem }

  /* テーブルや数値マップ系: モバイルで横スクロールできるように親側で逃がす */
  table { font-size: 12px }
  th, td { padding: 6px 8px !important }

  /* タップターゲット: 主要ボタンは最低 40px 高さに */
  .btn { min-height: 38px; padding: 0 12px }

  /* row のフィールドは折り返し (横並び崩れ防止) */
  .row { flex-direction: column; align-items: stretch; gap: 8px }
  .row > .field { width: 100% }
  .row > .field input[type="text"],
  .row > .field input[type="number"],
  .row > .field input[type="password"] { width: 100% }
}

/* ──────────────────────────────────────────────────────────────────
   ≤ 640px (iPhone 縦)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* container をさらに圧縮 */
  .container { padding: 0.75rem 0.625rem }

  /* user-bubble / assistant-bubble の最大幅を 90% → 92% に少し広げる */
  .user-bubble, .assistant-bubble { max-width: 92% }

  /* dock の textarea: 右の送信ボタンが大きいので、 placeholder が切れないよう
     右パディングは固定維持。 上下のパディングを少し縮める */
  #aiQueryPrompt {
    padding: 12px 60px 12px 16px !important;
  }
  /* 送信ボタン: 40px 維持で十分タップしやすい */

  /* welcome 時の dock 中央寄せ調整 */
  body[data-welcome="true"] .app-dock { padding: 0 0 16px 0 }

  /* タイトル/見出し */
  h1 { font-size: 16px; margin-bottom: 1rem }

  /* welcome-examples を縦に積む (1行に1つだと押しやすい) */
  .welcome-examples { flex-direction: column; align-items: stretch }
  .welcome-example-btn { text-align: left; width: 100%; box-sizing: border-box }

  /* ヘッダー部の build-info / モデル表示は隠す (狭い画面では邪魔) */
  .app-sidebar .build-info { font-size: 9px }

  /* 履歴検索モーダル: 全画面寄りに */
  .history-search-overlay { padding: 20px 12px }
  .history-search-box { max-height: 80vh }

  /* チャットバブル内のフォントを少し圧縮 */
  .qa-bubble { max-width: 92%; font-size: 14px; padding: 11px 14px }
}

/* ──────────────────────────────────────────────────────────────────
   サイドバー オーバーレイ (≤1024px でサイドバー開時に背景を暗く)
   3939: 専用 div .app-sidebar-overlay (index.html で追加) を使う方式。
   タップで onclick がサイドバーに collapsed を付けて閉じてくれる。
   3944: ブレークポイントを 768 → 1024 に拡大 (iPhone 横向き / iPad もカバー)。
   ────────────────────────────────────────────────────────────────── */
.app-sidebar-overlay {
  display: none;  /* デフォルト非表示。 モバイル & サイドバー開時のみ表示 */
}
@media (max-width: 1024px) {
  /* サイドバーが collapsed でない (=開いている) 時にオーバーレイを表示 */
  .app-sidebar:not(.collapsed) ~ .app-sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 49;  /* sidebar (50) の真下 */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: sidebarOverlayFadeIn 0.18s ease-out;
  }
  @keyframes sidebarOverlayFadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
  }
  /* 3939: 初期描画フラッシュ防止。
     <body class="m-collapse-init"> が付いている間 (ブラウザがHTMLを下から
     パースし、 まだ aside に collapsed が付与される前) は、 transition を
     無効化して width:0 を即適用する。 collapsed 付与後にこのマーカーが外れ、
     通常の transition に戻る。 */
  body.m-collapse-init .app-sidebar {
    width: 0 !important;
    border-right: none !important;
    transition: none !important;
    overflow: hidden;
  }
  body.m-collapse-init .sidebar-toggle {
    display: flex !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   ホバー前提を持つ環境のみホバー効果 (タッチデバイスでは不要)
   タッチ端末で :hover 残存による「タップ後ボタンが暗いまま」を回避
   ────────────────────────────────────────────────────────────────── */
@media (hover: none) {
  .btn:hover { background: var(--c-surface) }
  .welcome-example-btn:hover { background: #fff; border-color: #e5e5e5 }
  .sidebar-history-item:hover { background: transparent }
}

/* ──────────────────────────────────────────────────────────────────
   safe-area-inset (iPhone X 系のノッチ・ホームバー対応)
   ────────────────────────────────────────────────────────────────── */
.app-sidebar {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}
.app-dock {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  padding-right: env(safe-area-inset-right, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

/* ──────────────────────────────────────────────────────────────────
   横スクロール禁止と画像/canvas/video の最大幅 100% 強制 (モバイル限定)
   ※ SVG は番付図/ネットワーク図などで JS が width/height を計算して付与する
     ため、 ここでは触らない (触ると潰れる)。
   ※ デスクトップでは元の挙動を維持したいので @media で囲む。
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  img, canvas, video {
    max-width: 100%;
    height: auto;
  }
}

/* テーブルがコンテナをはみ出すとき、 親側で横スクロール許可
   (banzuke / number map など。 既存の overflow-x:auto は維持) */
.app-main { -webkit-overflow-scrolling: touch }

/* ════════════════════════════════════════════════════════════════════
   3942: ベンダー解析 / KOL解析 タブ UI
   ────────────────────────────────────────────────────────────────────
   ・タブ自体は目立たせる: 大きめボタン、 アクティブ側に色付き下線、 ホバーで反応
   ・data-banzuke-tab="vendor"|"kol" 属性で各セクションを振り分け
   ・body の data-banzuke-tab とアクティブタブが一致するセクションのみ表示
   ・属性の付いていない要素は両タブで表示 (=タブ分類対象外)
   ════════════════════════════════════════════════════════════════════ */

.banzuke-tabs {
  display: flex;
  gap: 8px;
  margin: 24px 0 16px 0;
  padding: 0;
  border-bottom: 2px solid #e5e5e5;
  position: relative;
}
.banzuke-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;       /* タブの下線を親 .banzuke-tabs の border-bottom に重ねる */
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.02em;
}
.banzuke-tab:hover {
  color: #1a1a1a;
  background: #fafafa;
}
.banzuke-tab.active {
  color: #1a1a1a;
  border-bottom-color: #1a1a1a;
  background: #fff;
}
.banzuke-tab-icon {
  font-size: 18px;
  line-height: 1;
}
.banzuke-tab-label {
  white-space: nowrap;
}

/* タブ表示: アクティブ側のみ表示。 data-banzuke-tab 属性がない要素は両タブで表示。 */
body[data-banzuke-tab="vendor"] [data-banzuke-tab="kol"] { display: none !important; }
body[data-banzuke-tab="kol"]    [data-banzuke-tab="vendor"] { display: none !important; }

/* 探索結果がまだない (resultsSection.hidden) ときはタブ自体を隠す
   resultsSection の中にタブ UI があるので resultsSection.hidden で自動的に隠れるが、
   念のため。 */
#resultsSection.hidden .banzuke-tabs { display: none; }

/* モバイル: タブのフォント・パディングを少し縮める */
@media (max-width: 640px) {
  .banzuke-tab { padding: 11px 12px; font-size: 13px }
  .banzuke-tab-icon { font-size: 16px }
}

/* ════════════════════════════════════════════════════════════════════
   3945: 結果アクションバー (📤 共有 + 💾 結果を保存)
   結果カードの直前に配置されるボタン群。
   3948: 探索が全 Phase 完了するまでは非表示
         (body.search-running クラスで管理 — Phase 0 開始 〜 Phase 3 完了/中断 で立つ)
         全 Phase 終わって search-running クラスが外れたタイミングで表示される。
         共有 / 保存ボタンを Phase 0 完了の段階で押せても、
         Phase 1/2/3 のデータが揃わない不完全な CSV になってしまうため、
         全 Phase 完了まで隠す。
   ================================================================ */
.results-action-bar {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin: 0 0 14px 0;
  flex-wrap: wrap;
}
body.search-running .results-action-bar {
  display: none;  /* 探索中は隠す (全 Phase 完了まで) */
}
.results-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  -webkit-tap-highlight-color: transparent;
}
.results-action-btn:hover {
  background: #fafafa;
  border-color: #1a1a1a;
}
.results-action-btn:active { transform: translateY(1px); }
.results-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f4f4f4;
}
.results-action-icon { font-size: 15px; line-height: 1 }
.results-action-label { white-space: nowrap }
/* 共有ボタンは強調色 (アプリの主要 CTA カラーに揃える) */
.results-share-btn {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.results-share-btn:hover {
  background: #000;
  border-color: #000;
}
@media (max-width: 640px) {
  .results-action-bar { gap: 8px }
  .results-action-btn { padding: 8px 12px; font-size: 12px }
}

  </style>