/*
 * junction UI — Rapidus-inspired Green Palette
 * ---------------------------------------------
 * Rapidus (https://www.rapidus.inc/) の先進・精密・半導体プロセスを想起させる
 * ミニマルなトーンを踏襲しつつ, TCAD_Operator のダーク系 UI を
 * "緑色ベース" に寄せるための共通カラー定義.
 *
 * 本ファイルは `_bg.html` (全ページ共通インクルード) から読み込まれ,
 * 既存の旧パレット (indigo/purple/violet) を緑系へ一括上書きする.
 *
 * 主要マッピング (旧 → 新):
 *   #6366f1 indigo-500    → #22c55e green-500   (primary accent)
 *   #4f46e5 indigo-600    → #16a34a green-600   (hover / pressed)
 *   #a5b4fc indigo-300    → #86efac green-300   (soft text / headings)
 *   #818cf8 indigo-400    → #4ade80 green-400
 *   #c7d2fe indigo-200    → #bbf7d0 green-200
 *   #c4b5fd violet-300    → #a7f3d0 emerald-200 (Obsidian/room)
 *   #8b5cf6 violet-500    → #10b981 emerald-500
 *   #312e81 indigo-900    → #14532d green-900   (badge bg)
 *   #1e1b4b indigo-950    → #052e16 green-950
 *   rgba(49, 46, 129 …)   → rgba(20, 83, 45 …)  (user msg bg)
 *   rgba(99, 102, 241 …)  → rgba(34, 197, 94 …) (tint)
 *   rgba(139, 92, 246 …)  → rgba(16, 185, 129 …)(tint violet→emerald)
 *
 * 設計方針:
 *   - チャット機能ロジックには一切触らず, 見た目のみ上書き
 *   - KaTeX 数式やエラー赤 (#ef4444) は維持
 *   - Rapidus 由来の "余白・精密さ・ミニマル" を強調するため
 *     アクセントは強く出しすぎず, 背景は既存の dark slate を保ち
 *     差し色として緑を効かせる
 */

:root {
  /* 緑系パレット (primary: lime → deep green gradient) */
  --tcad-green-50:  #f0fdf4;
  --tcad-green-100: #dcfce7;
  --tcad-green-200: #bbf7d0;
  --tcad-green-300: #86efac;
  --tcad-green-400: #4ade80;
  --tcad-green-500: #22c55e;  /* primary accent */
  --tcad-green-600: #16a34a;  /* hover / pressed */
  --tcad-green-700: #15803d;
  --tcad-green-800: #166534;
  --tcad-green-900: #14532d;
  --tcad-green-950: #052e16;

  /* Rapidus wave — ライム (lime-400) アクセント */
  --tcad-lime-400: #a3e635;
  --tcad-lime-500: #84cc16;

  /* Emerald (violet→emerald 置換用) */
  --tcad-emerald-300: #6ee7b7;
  --tcad-emerald-400: #34d399;
  --tcad-emerald-500: #10b981;
  --tcad-emerald-200: #a7f3d0;

  /* セマンティック別名 */
  --tcad-accent:        var(--tcad-green-500);
  --tcad-accent-hover:  var(--tcad-green-600);
  --tcad-accent-soft:   var(--tcad-green-300);
  --tcad-accent-muted:  var(--tcad-green-400);
  --tcad-accent-deep:   var(--tcad-green-900);
  --tcad-accent-rgb:     34, 197, 94;    /* green-500 */
  --tcad-accent-alt-rgb: 16, 185, 129;   /* emerald-500 (旧 violet 代替) */
  --tcad-accent-deep-rgb: 20, 83, 45;    /* green-900 (旧 indigo-900 代替) */

  /* ボタン専用 pale sea-green (palette-samples #19 系, 2026-04-21 採用)
   * 現行の green-500 が目に刺さるためペールな青緑へ置換.
   * Focus outline / タブ active / テキストアクセントは green-500 のまま維持. */
  --tcad-btn-bg:         #b3cfc9;   /* #19 Sea pale */
  --tcad-btn-bg-hover:   #82aca3;   /* #22 Sea 深め (明確な hover feedback) */
  --tcad-btn-text:       #0e2420;   /* 濃い緑テキスト (WCAG AA 十分) */
  --tcad-btn-text-hover: #051a14;

  /* Muted secondary text (2026-05-14 bd 4gz, WCAG 2.1 AA 強制).
   * 旧 #64748b / #666666 / #4d5670 等は body bg #0f172a 上で contrast 3.75 以下になり
   * normal text 4.5:1 要件を満たさない. 緑系統一 (Rapidus テーマ) のまま AA を確保するため
   * green-300 #86efac を muted-text として採用 (ratio 13.5+ on #0f172a, WCAG AAA).
   * 用途: figcaption / meta info / table th / table td 補助列 / tooltip 補足 等. */
  --tcad-text-muted: var(--tcad-green-300);

  /* light-panel template 用 muted-text (admin_ocr_test_report / admin_ocr_pdf_list /
   * admin_visual_e2e 等の `rgba(255,255,255,0.55-0.78)` panel 上で読める dark text).
   * dark theme の --tcad-text-muted (green-300) は light panel 上で ratio 2.1 と
   * 不可視レベルになるため、印刷風 light-panel template は本 var を使う.
   * slate-900-ish (rgb(28,36,51)) で light panel 0.55 上 ratio 6+ を確保. */
  --tcad-text-muted-on-light: #1c2433;
}

/* ============================================================
 * Global color overrides (旧 purple/indigo を緑系へ)
 * -----------------------------------------------------------
 * できる限り属性セレクタで広範に当てる. color / background /
 * border-*-color に限定してレイアウト・機能に影響しないようにする.
 * ============================================================ */

/* --- テキスト系 (旧 indigo-300 #a5b4fc) --- */
[style*="#a5b4fc"],
.msg-assistant h1, .msg-assistant h2, .msg-assistant h3,
.gen-timer,
.iv-chart-title,
.iv-chart-fullscreen,
.msg-count,
.badge-admin,
.tab.active,
.commit-item.selected,
.diff-file-item.selected,
.info-block h3,
.graph-tooltip .tt-hash,
.sess-link,
.tcad-menu-btn {
  /* will be handled per-rule below via specific overrides */
}

/* ============================================================
 * 明示的な色マッピングによる上書き
 * ------------------------------------------------------------
 * 既存テンプレの inline style / CSS block を `!important` で塗り替え.
 * CSS 変数 (:root) は将来のテーマ切り替え用, 下記は実体適用.
 * ============================================================ */

/* --- Primary accent button (2026-04-21: pale sea-green #b3cfc9 採用) --- */
.btn-sm.btn-primary,
.btn-sm.active,
.btn-primary,
#send-btn,
.btn-upload,
.page-controls button,
.tcad-menu-btn[aria-expanded="true"] {
  background: var(--tcad-btn-bg) !important;
  border-color: var(--tcad-btn-bg) !important;
  color: var(--tcad-btn-text) !important;
}
.btn-sm.btn-primary:hover,
.btn-primary:hover,
#send-btn:hover,
.btn-upload:hover,
.page-controls button:hover {
  background: var(--tcad-btn-bg-hover) !important;
  border-color: var(--tcad-btn-bg-hover) !important;
  color: var(--tcad-btn-text-hover) !important;
}
#send-btn:disabled,
.btn-upload:disabled {
  background: #334155 !important;
  color: #94a3b8 !important;
  border-color: #475569 !important;
}

/* ============================================================
 * Site logo (header の <h1>junction</h1> 画像置換 / 2026-04-21)
 * ------------------------------------------------------------
 * 各ページのヘッダ <h1 class="site-logo"><img ...></h1> に対し
 * ・高さを header 行高に揃える (~36px)
 * ・pale sea-green の drop-shadow 3 重で光彩
 * ・hover でグロー強化
 * --page-suffix で ルーム名/通知 等の補助テキストを付記可
 * ============================================================ */
h1.site-logo {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: inherit !important;
  margin-right: auto !important;
}
h1.site-logo img {
  height: 31px;
  width: auto;
  display: block;
  filter:
    drop-shadow(0 0 6px rgba(179, 207, 201, 0.48))
    drop-shadow(0 0 13px rgba(134, 176, 165, 0.28))
    drop-shadow(0 1px 4px rgba(0, 0, 0, 0.42));
  transition: filter 0.25s ease, transform 0.2s ease;
}
h1.site-logo img:hover {
  filter:
    drop-shadow(0 0 10px rgba(179, 207, 201, 0.72))
    drop-shadow(0 0 18px rgba(134, 176, 165, 0.42))
    drop-shadow(0 1px 4px rgba(0, 0, 0, 0.42));
  transform: translateY(-1px);
}
h1.site-logo .site-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tcad-green-200, #bbf7d0);
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow:
    0 0 8px rgba(179, 207, 201, 0.45),
    0 0 18px rgba(134, 176, 165, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.55);
}
h1.site-logo .page-suffix {
  font-size: 1rem;
  font-weight: 500;
  color: var(--tcad-accent-soft, #86efac);
  opacity: 0.85;
  letter-spacing: 0.02em;
}

/* --- Focus outlines (#6366f1 → green-500) --- */
input:focus,
textarea:focus,
select:focus,
#user-input:focus,
.form-group input:focus,
.form-group select:focus,
#search-input:focus,
.search-input:focus,
.graph-search-input:focus {
  outline-color: var(--tcad-green-500) !important;
}

/* --- タブ active 下線 (#6366f1 / #8b5cf6 → green-500) --- */
.tab.active,
.tab-btn.active {
  color: var(--tcad-green-300) !important;
  border-bottom-color: var(--tcad-green-500) !important;
}

/* --- 見出し・タイトル系 (#a5b4fc / #c4b5fd / #c7d2fe → green-300) --- */
.msg-assistant h1,
.msg-assistant h2,
.msg-assistant h3,
.gen-timer,
.iv-chart-title,
.msg-count,
.badge-admin,
.info-block h3,
.graph-tooltip .tt-hash,
.sess-link,
.md-content h2,
.md-content h3,
.stat-card h3,
.note-item.selected .title,
.msg.ai .meta,
.tcad-menu-btn {
  color: var(--tcad-green-300) !important;
}

/* --- ヘッダー h1 (チャット等) にも緑のブランド差し色 --- */
header h1 {
  color: var(--tcad-green-300) !important;
  letter-spacing: 0.02em;
}

/* --- Blockquote / アクセントボーダー (#6366f1 → green-500) --- */
.msg-assistant blockquote,
.md-content blockquote,
.session-item.selected,
.commit-item.selected,
.diff-file-item.selected,
.note-item.selected {
  border-left-color: var(--tcad-green-500) !important;
}

/* --- IV チャートカード accent border --- */
.iv-chart-card {
  border-color: rgba(var(--tcad-accent-rgb), 0.35) !important;
}
.iv-chart-fullscreen {
  color: var(--tcad-green-400) !important;
  border-color: var(--tcad-green-500) !important;
}
.iv-chart-fullscreen:hover {
  background: var(--tcad-green-500) !important;
  color: #022c16 !important;
}
.iv-guidance {
  background: rgba(var(--tcad-accent-rgb), 0.10) !important;
  border-color: rgba(var(--tcad-accent-rgb), 0.30) !important;
}
.iv-clarify-btn {
  border-color: var(--tcad-green-500) !important;
}
.iv-clarify-btn:hover {
  background: var(--tcad-green-500) !important;
  color: #022c16 !important;
}
.gen-timer {
  background: rgba(var(--tcad-accent-rgb), 0.12) !important;
  border-color: rgba(var(--tcad-accent-rgb), 0.40) !important;
}

/* --- 系列表 (#a5b4fc → green-300) --- */
.iv-series-table th {
  color: var(--tcad-green-300) !important;
}

/* --- 図検索カード (既存 #10b981 → 変更せず緑系を維持) --- */
.fig-chat-title { color: var(--tcad-emerald-300) !important; }
.fig-chat-body a.fig-src { color: var(--tcad-emerald-300) !important; }

/* --- ユーザーメッセージ吹き出し (indigo-900 → green-900) --- */
.msg-user {
  background: rgba(var(--tcad-accent-deep-rgb), 0.55) !important;
}
.msg.user,
.msg-user.room {
  background: rgba(var(--tcad-accent-deep-rgb), 0.55) !important;
}
/* floating-lines.css の user tint も上書き (0.28 相当 → green-500) */
body .msg-user {
  background: rgba(var(--tcad-accent-rgb), 0.22) !important;
}

/* --- ドロップゾーン / ドラッグオーバー (indigo tint → green tint) --- */
.drop-zone.dragover {
  border-color: var(--tcad-green-500) !important;
  background: rgba(var(--tcad-accent-rgb), 0.10) !important;
  color: var(--tcad-green-300) !important;
}

/* --- セッションドロップダウン / セッション選択 --- */
.session-item.selected {
  background: #1e2b36 !important;
}

/* --- ナビメニュー: active ホバー アクセント (#6366f1/#8b5cf6) --- */
.tcad-menu a:hover,
.tcad-menu .tcad-nav-link:hover {
  background: rgba(var(--tcad-accent-rgb), 0.16) !important;
  border-left-color: var(--tcad-emerald-500) !important;
  color: #fff !important;
}
.tcad-menu-btn {
  border-color: #3b5c4a !important;
}
.tcad-menu-btn:hover {
  background: rgba(var(--tcad-accent-rgb), 0.18) !important;
  color: #ecfdf5 !important;
}

/* --- Badge (indigo-900 → green-900) --- */
.badge-admin,
.msg-count {
  background: var(--tcad-green-900) !important;
  color: var(--tcad-green-200) !important;
}

/* --- Ingest tab underline (inline style) --- */
#tab-upload[style*="#6366f1"],
#tab-delete[style*="#6366f1"] {
  /* inline style has higher specificity; handled via JS-safe fallback below */
}
/* When tab-upload is in its default inline "active" state, overlay color */
#tab-upload {
  color: var(--tcad-green-300) !important;
  border-bottom-color: var(--tcad-green-500) !important;
}

/* --- Room / Obsidian violet系 → emerald系 --- */
.room-item:hover { background: rgba(var(--tcad-accent-rgb), 0.10) !important; }
.msg.ai {
  background: linear-gradient(135deg, #052e16 0%, #14532d 100%) !important;
}
.msg.ai .meta,
.composer .hint,
.composer label,
.msg.ai + .meta {
  color: var(--tcad-emerald-200) !important;
}
.composer textarea:focus,
.graph-search-input:focus,
.search-input:focus {
  border-color: var(--tcad-emerald-500) !important;
}
.link-chip {
  background: rgba(var(--tcad-accent-alt-rgb), 0.14) !important;
  color: var(--tcad-emerald-200) !important;
}
.link-chip:hover {
  background: rgba(var(--tcad-accent-alt-rgb), 0.28) !important;
  border-color: var(--tcad-emerald-500) !important;
}
.stat-number {
  color: var(--tcad-emerald-400) !important;
}
.folder-chip.active {
  background: var(--tcad-emerald-500) !important;
  border-color: var(--tcad-emerald-500) !important;
}
.fm-key {
  color: var(--tcad-emerald-400) !important;
}

/* --- Agent card hover --- */
.agent-card:hover {
  border-color: var(--tcad-green-500) !important;
}

/* --- Board / Agents — accent tinted cards --- */
.board-card.active,
.agent-card.active {
  border-color: var(--tcad-green-500) !important;
}

/* --- Figure card hover / title (#6366f1 → green-500) --- */
.figure-card:hover {
  border-color: var(--tcad-green-500) !important;
}

/* --- 通知リスト hover tint --- */
.notif-item:hover,
.notif-item.unread {
  background: rgba(var(--tcad-accent-rgb), 0.08) !important;
}

/* --- Git page graph row --- */
.graph-row:hover { background: rgba(var(--tcad-accent-rgb), 0.08) !important; }
.graph-row.selected { background: rgba(var(--tcad-accent-rgb), 0.15) !important; }

/* --- Figures page h1 brand color --- */
header h1[style],
.figures-header h1 {
  color: var(--tcad-green-300) !important;
}

/* --- Figures / 他ページの page-title / jump-top link --- */
.page-title {
  color: var(--tcad-green-200) !important;
}
.page-subtitle .jump-top,
.jump-top {
  color: var(--tcad-green-400) !important;
}
.page-subtitle .jump-top:hover,
.jump-top:hover {
  color: var(--tcad-green-300) !important;
}

/* --- Rapidus テイストの細い緑ライン (header 下辺) --- */
body > header {
  border-bottom: 1px solid rgba(var(--tcad-accent-rgb), 0.28) !important;
  box-shadow: 0 1px 0 rgba(var(--tcad-accent-rgb), 0.08);
}

/* --- Sticky header (2026-04-28) ---------------------------------------
 * メニューバーをビューポート上端に固定. スクロールしても画面内に残る.
 *  - palette.css は _bg.html / 一部 template から全ページで読まれるため
 *    ここに置くだけで junction 全ページに適用される.
 *  - !important は chat.html / tasks.css の inline
 *    `header { position:relative; z-index:1 }` / `header { z-index:20 !important }`
 *    を上書きするため.
 *  - z-index:50 はドロップダウン (.tcad-menu z-index:100) の親 stacking context
 *    として安全な値. ページ内の sticky/floating 要素 (z<=20) より上に出る.
 *  - PC は body スクロール (min-height:100vh 系), モバイル含め sticky は
 *    全モダンブラウザで GPU 合成で動く. height:100vh 系 (chat/room/obsidian
 *    等) では body がそもそもスクロールしないので無害.
 *  - background は元の rgba(30,41,59,.72/.85) だとスクロールコンテンツが
 *    透けて「メニューバーが消えた」と見えるため (図一覧/タスク/ガントで顕著),
 *    sticky 時は不透明寄りの 0.92 まで上げる + backdrop-filter blur で
 *    背後を均してさらに可読性を担保.
 * ----------------------------------------------------------------------- */
:root {
  /* junction 共通ヘッダの高さ. .tasks-subheader / .page-controls 等の
   * "サブナビ" を sticky させる時の top オフセットで参照する. */
  --tcad-header-height: 58px;
}

body > header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  /* 完全不透明 (#0f172a = html/floating-lines base color と一致). 半透明 + blur
   * だと裏のコンテンツが「ぼやけて潜って」見えてしまうため, sticky 領域より
   * 上に行ったコンテンツを完全に背景に隠す要件 (磯谷さん 2026-04-28) に対応. */
  background-color: #0f172a !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* admin_database / admin_alerts 等で body リセットを持たない template がある.
 * UA デフォルトの 8px margin が残ると sticky header が viewport 上端に
 * 貼り付かず 8px 浮いて見えるため, ここで一括ゼロ化. 既存の
 * `* { margin:0 }` リセットを持つ template には影響なし. */
body {
  margin: 0;
}

/* --- Sub-navigation bars --- (2026-04-28)
 * tasks/gantt の `📋一覧 / 📊ガント / ⬇CSV` タブ行や figures の
 * `ページ/件/ページ` 操作行 + `絞り込み検索` 行も、メイン header だけ
 * 残してスクロールで流れ去ると "現ページ内ナビ" が消える体験になる.
 * メイン header の直下に DOM 順で stack 配置で固定する.
 *  - .page-controls は header の真下 (top: --tcad-header-height = 58px).
 *  - .search-bar は page-controls のさらに下 (top: 58 + 56 = 114px).
 *    ※ 56px は figures.html の .page-controls 実測高 (padding 込み).
 *  - z-index: 40 < 50 でメイン header の方が前. dropdown menu は z=100.
 *  - 完全不透明 #0f172a で「見えない境界」を作る. blur は使わない
 *    (背後を「隠す」要件のため). */
body > .tasks-subheader,
.page-controls {
  position: sticky;
  top: var(--tcad-header-height);
  z-index: 40;
  background-color: #0f172a !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* (旧 .search-bar 専用 sticky ルールは撤去.
 *  検索 input は page-controls form 内に同居させたので, page-controls の
 *  sticky ルール 1 つで一緒に固定される 2026-04-28.) */

/* (Blur halo は 2026-04-28 の検討で sticky 領域真下の境界がそもそも
 *  solid #0f172a で十分だと判断され撤去. 図カードは sticky bottom 直下から
 *  通常表示, viewport 上端方向に行くと完全に隠される.) */

/* --- Verify ページの戻りリンク (#6366f1 → green-300) --- */
a.back {
  color: var(--tcad-green-300) !important;
}

/* --- Login ページ subtitle はそのまま (#94a3b8) --- */

/* --- Sessions 画面の .msg-user (session viewer) --- */
body .sess-msg-user,
body .session-msg.user {
  background: rgba(var(--tcad-accent-deep-rgb), 0.55) !important;
}

/* --- Logout button: danger 維持 (赤) --- */
/* intentional no-op: .tcad-menu-logout button は既存 red のまま */

/* --- KaTeX 可読性維持: 色指定なし (素のまま) --- */
/* .katex, .katex-display は触らない (式色は白系) */

/* --- コードブロック: 可読性維持 (緑化しない) --- */
/* pre/code は既存 slate tint のまま */

/* ============================================================
 * Cell_H chat-citations — 引用リンク UL スタイル
 * (spec: docs/specs/cell_H_chat-citations_spec.md v1.1)
 * 既存パレット変数のみ使用。長大 title は省略表示。
 * ============================================================ */
.msg-assistant > ul.citations {
  list-style: none;
  margin: 0.75em 0 0 0;
  padding: 0.5em 0 0 0;
  border-top: 1px solid rgba(var(--tcad-accent-rgb), 0.25);
  font-size: 0.85em;
}

.msg-assistant > ul.citations li {
  margin: 0.25em 0;
  padding: 0;
  color: var(--tcad-green-300);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.msg-assistant > ul.citations li a {
  color: var(--tcad-green-300);
  text-decoration: underline;
  text-decoration-color: rgba(var(--tcad-accent-rgb), 0.4);
}

.msg-assistant > ul.citations li a:hover {
  color: var(--tcad-green-200);
  text-decoration-color: var(--tcad-accent);
}

.msg-assistant > ul.citations li span {
  color: var(--tcad-green-400);
  opacity: 0.8;
}