/* ============================================================
   aiCompass.css — 「🤖 AI Compass」タブ専用の見た目。
   複数タブ共有の見た目(ツールバー・ボタン・タブ・モーダル共通枠)はbase.cssを使う。
   ============================================================ */

/* サブビュー切り替えナビ(フィード/比較選定/比較/調査プロンプト生成)。
   memberBoard.jsの#btnMemberSubMatrix/#btnMemberSubCalendarと同じ「.smallボタン+.ghostトグル」方式。 */
.aiSubNav{display:flex;gap:6px;margin-bottom:12px;}

/* 「投稿」ボタン+ドロップダウンメニュー(ファイルから取り込む/テキストを貼り付ける)。
   #ioMenuWrap/#ioMenuと同じ「wrapperをposition:relative、メニューをposition:absoluteで直下に」方式。 */
.aiPostMenuWrap{position:relative;display:inline-block;}
#aiPostMenu{position:absolute;top:100%;right:0;margin-top:6px;min-width:190px;}

/* ---------- フィード ---------- */
.aiChips{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.aiChip{
  display:flex;align-items:center;gap:5px;font-size:12px;padding:5px 12px;
  border-radius:999px;border:1px solid var(--line);background:var(--panel);
  color:var(--muted);cursor:pointer;user-select:none;
}
.aiChip.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.aiChip .dot{width:6px;height:6px;border-radius:50%;display:inline-block;}
.aiFeedItem{display:flex;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);cursor:pointer;}
.aiFeedItem:hover{background:#F0EEE8;}
.aiFeedItem .bar{width:3px;border-radius:2px;flex-shrink:0;}
.aiFeedMeta{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:11px;}
.aiFeedMeta .ts{color:var(--muted);font-family:var(--font-mono);}
.aiFeedTitle{font-weight:600;font-size:14px;margin:0 0 3px;}
.aiFeedDesc{font-size:12.5px;color:var(--muted);margin:0;line-height:1.5;}
.aiBadgeNew{width:6px;height:6px;border-radius:50%;background:var(--danger);flex-shrink:0;}
.aiBadgeOld{width:6px;height:6px;border-radius:50%;background:var(--line);flex-shrink:0;}
.aiEmpty{padding:2.5rem 1rem;text-align:center;color:var(--muted);font-size:13px;}
.aiFeedItemActions{display:flex;flex-direction:column;gap:4px;flex-shrink:0;align-self:flex-start;}
.aiFeedItemActions button{white-space:nowrap;}
.aiPinBtn.active{background:var(--amber);color:#fff;border-color:var(--amber);}

/* ---------- トピックパネル(ピン留めした項目の強調表示) ---------- */
/* 通常のフィード項目より目立つ見た目にする(強調枠+薄い背景色)ことで、
   「注目記事」であることが一目で分かるようにする。ピン留めが0件の間は
   features/aiCompass.jsのrenderAiTopicPanel()がこの要素ごと.hiddenにする。 */
#aiTopicPanel{
  border:1.5px solid var(--amber);border-radius:8px;background:#FBF3E4;
  padding:4px 12px;margin-bottom:14px;
}
.aiTopicHeading{font-size:11px;font-family:var(--font-mono);letter-spacing:.08em;color:var(--amber);margin:8px 0 2px;font-weight:700;}
.aiTopicItem{display:flex;gap:12px;padding:10px 4px;border-bottom:1px solid rgba(193,137,46,.25);cursor:pointer;}
.aiTopicItem:last-child{border-bottom:none;}
.aiTopicItem:hover{background:rgba(193,137,46,.08);}
.aiTopicItem .bar{width:3px;border-radius:2px;flex-shrink:0;}

/* ---------- 比較選定(ツリー) ---------- */
.aiTreeProvider{display:flex;align-items:center;gap:8px;padding:8px 6px;border-radius:6px;}
.aiTreeModel{display:flex;align-items:center;gap:8px;padding:6px;margin-left:34px;border-left:1px solid var(--line);padding-left:12px;}
.aiTreeLabel{font-size:13px;flex:1;}
.aiTreeProvider .aiTreeLabel{font-weight:600;font-size:14px;}
.aiVendor{font-size:11px;color:var(--muted);margin-right:4px;}
.aiSelectBar{
  display:flex;justify-content:space-between;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:6px;padding:10px 14px;margin-top:1rem;
}

/* ---------- 比較 ---------- */
table.aiCompareTable{width:100%;border-collapse:collapse;font-size:13px;margin-top:0.5rem;}
table.aiCompareTable td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top;}
table.aiCompareTable td.aiCmpLabel{color:var(--muted);width:110px;}
table.aiCompareTable td.aiCmpHead{font-weight:600;}

/* ---------- 調査プロンプト生成 ---------- */
.aiPromptRow{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;align-items:center;}
.aiPromptRow input[type=text], .aiPromptRow input[type=month]{
  padding:7px 10px;border-radius:6px;border:1px solid var(--line);font-size:13px;font-family:var(--font-ui);
}
.aiPromptRow input[type=text]{flex:1;min-width:140px;}
#aiPromptOutput{
  width:100%;min-height:220px;padding:12px;border-radius:6px;border:1px solid var(--line);
  font-size:13px;font-family:var(--font-mono);color:var(--ink);background:var(--panel);resize:vertical;
}

/* ---------- 詳細/貼り付けモーダル内の追加スタイル ---------- */
#aiPasteArea{width:100%;min-height:220px;font-family:var(--font-mono);font-size:12.5px;}
/* 詳細モーダルの「普通版」/「わかりやすい版」タブ。性能・機能に平易な言葉で書いた並行フィールドを
   追加したが、常時両方表示すると冗長なため、切り替えて見る形にした(§features/aiCompass.js参照)。 */
.aiDetailTabNav{display:flex;gap:6px;margin:4px 0 12px;border-bottom:1px solid var(--line);padding-bottom:8px;}
.aiDetailField{margin-bottom:12px;}
.aiDetailFieldLabel{font-size:12px;color:var(--muted);margin:0 0 3px;font-weight:600;}
.aiDetailFieldValue{font-size:13px;margin:0;line-height:1.5;}