/*
 * 共通ダーク系ターミナルパネル: .tc-terminal-panel
 * tmux / 生ターミナル出力などダーク背景のパネル用。
 *
 * 【事故防止】
 * application.html.erb には白背景白文字事故対策として
 *   [style*="color: #c9d1d9"] { color: #1a1a1a !important }
 * のようなワイルドカードがある。テンプレート側でダーク前提の
 * `style="color: #c9d1d9"` や `style="color: white"` をインラインで
 * 書くと、この !important ルールに掴まれて黒文字化し、暗背景の上で
 * 読めなくなる（/step2/tmux の #current-target が黒背景黒文字になった事故）。
 *
 * ダーク系パネルを作るときはインラインで background / color を書かず、
 * 必ずこのクラス群を使うこと。子要素の色はクラスに集約してあり、
 * インラインで上書きすると上記グローバルルールに潰される恐れがある。
 *
 * 【カラーコード共通化方針 (PR#1428 レビュー対応)】
 * Propshaft 採用のため SCSS 変数は使えないが、CSS Custom Properties
 * (CSS 変数) で十分にカラーパレットを共通化できる。本ファイル内で
 * 使用する色は全て `.tc-terminal-panel` スコープの `--tc-term-*`
 * 変数として定義し、各ルールはハードコード値ではなく `var(--tc-term-*)`
 * を参照すること。新しい色を追加する場合も必ず変数化してから使うこと。
 * （application.html.erb の `:root` には light テーマ用の `--color-*`
 * があるが、ターミナルパネルは独立したダーク配色なのでローカル変数として
 * このファイルに集約する。）
 */
.tc-terminal-panel {
  /* パネル本体・基本配色 */
  --tc-term-panel-bg: #1e1e1e;
  --tc-term-panel-border: #333;
  --tc-term-text: #c9d1d9;
  --tc-term-text-light: #e5e7eb;
  --tc-term-text-muted: #9ca3af;

  /* 内部の暗背景・枠線 (output / input / log-item / log-body) */
  --tc-term-surface: #0d1117;
  --tc-term-surface-border: #30363d;
  --tc-term-tag-bg: #1f2937;

  /* タイトルやアクセント色 */
  --tc-term-accent-green: #10b981;
  --tc-term-accent-yellow: #fbbf24;
  --tc-term-accent-cyan: #06b6d4;
  --tc-term-accent-blue: #2563eb;

  /* ログ tag / target / error の前景色 */
  --tc-term-tag-instruction: #c4b5fd;
  --tc-term-tag-command: #fde68a;
  --tc-term-tag-manual: #a7f3d0;
  --tc-term-target-fg: #fde68a;
  --tc-term-error: #ef4444;

  /* 再送ボタン (violet 系) */
  --tc-term-btn-bg: #1f2937;
  --tc-term-btn-fg: #c4b5fd;
  --tc-term-btn-border: #4c1d95;
  --tc-term-btn-hover-bg: #312e81;
  --tc-term-btn-hover-border: #7c3aed;
  --tc-term-btn-hover-fg: #ddd6fe;

  background: var(--tc-term-panel-bg);
  border: 1px solid var(--tc-term-panel-border);
  border-radius: 8px;
  padding: 1rem;
  color: var(--tc-term-text);
}
.tc-terminal-panel .tc-terminal-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tc-term-accent-green);
  margin: 0;
}
.tc-terminal-panel .tc-terminal-title .tc-terminal-target {
  color: var(--tc-term-accent-green);
  font-weight: 600;
}
.tc-terminal-panel .tc-terminal-title.tc-terminal-title-yellow {
  color: var(--tc-term-accent-yellow);
}
.tc-terminal-panel .tc-terminal-title.tc-terminal-title-cyan {
  color: var(--tc-term-accent-cyan);
}
.tc-terminal-panel .tc-terminal-output {
  background: var(--tc-term-surface);
  color: var(--tc-term-text);
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.tc-terminal-panel .tc-terminal-input {
  background: var(--tc-term-surface);
  color: var(--tc-term-text);
  border: 1px solid var(--tc-term-surface-border);
  border-radius: 6px;
  padding: 0.625rem 0.75rem;
  font-family: "Menlo", "Monaco", "Courier New", monospace;
  font-size: 0.85rem;
  outline: none;
}
.tc-terminal-panel .tc-terminal-input:focus {
  border-color: var(--tc-term-accent-blue);
}
.tc-terminal-panel .tc-terminal-muted {
  color: var(--tc-term-text-muted);
}

/*
 * 修正指示ログ (TmuxInstruction) の一覧表示用クラス群。
 *
 * 【事故防止 — /step2/tmux の白背景白文字事故 #836574】
 * application.html.erb のグローバル `pre { background: #f6f8fa; color: #1a1a1a }`
 * が効くため、ログ本文の <pre> にインラインで `color: #e5e7eb` だけ書くと、
 * 文字色は light gray に上書きできるが背景は #f6f8fa のまま残り、
 * 「白背景に白文字」状態で読めなくなる事故が発生した。
 * 必ず .tc-terminal-log-body クラスを使い、background と color の両方を
 * 1箇所で管理すること。インラインで色を書かない。
 */
.tc-terminal-panel .tc-terminal-log-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 360px;
  overflow-y: auto;
}
.tc-terminal-panel .tc-terminal-log-item {
  background: var(--tc-term-surface);
  border: 1px solid var(--tc-term-surface-border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--tc-term-text-light);
}
.tc-terminal-panel .tc-terminal-log-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  color: var(--tc-term-text-muted);
  margin-bottom: 0.25rem;
}
.tc-terminal-panel .tc-terminal-log-tag {
  background: var(--tc-term-tag-bg);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-weight: 600;
}
.tc-terminal-panel .tc-terminal-log-tag-instruction { color: var(--tc-term-tag-instruction); }
.tc-terminal-panel .tc-terminal-log-tag-command { color: var(--tc-term-tag-command); }
.tc-terminal-panel .tc-terminal-log-tag-manual { color: var(--tc-term-tag-manual); }
.tc-terminal-panel .tc-terminal-log-target {
  background: var(--tc-term-tag-bg);
  color: var(--tc-term-target-fg);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
}
.tc-terminal-panel .tc-terminal-log-error {
  color: var(--tc-term-error);
}
.tc-terminal-panel .tc-terminal-log-body {
  /* background も明示しないと global の `pre { background: #f6f8fa }` で
     白背景になり、light text と組み合わさって白背景白文字事故が再発する。 */
  background: var(--tc-term-surface);
  color: var(--tc-term-text-light);
  border: none;
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.4;
  border-radius: 0;
}
.tc-terminal-panel .tc-terminal-log-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}
.tc-terminal-panel .tc-terminal-log-resend-btn {
  background: var(--tc-term-btn-bg);
  color: var(--tc-term-btn-fg);
  border: 1px solid var(--tc-term-btn-border);
  border-radius: 4px;
  padding: 0.25rem 0.625rem;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.tc-terminal-panel .tc-terminal-log-resend-btn:hover {
  background: var(--tc-term-btn-hover-bg);
  border-color: var(--tc-term-btn-hover-border);
  color: var(--tc-term-btn-hover-fg);
}
.tc-terminal-panel .tc-terminal-log-resend-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tc-terminal-panel .tc-terminal-log-empty {
  font-size: 0.75rem;
  color: var(--tc-term-text-muted);
  margin: 0;
}

/*
 * 対話ビュー (#chat-section / #chat-messages) のチャットバブル共通スタイル。
 *
 * 【事故防止 — /step2/tmux 白背景白文字事故 #944774】
 * application.html.erb の global `pre { background: #f6f8fa; color: #1a1a1a }`
 * が効くため、bubble 内 <pre> にインラインで color だけ書くと、文字色は
 * light gray に上書きできるが background は #f6f8fa のまま残り「白背景白文字」
 * となる事故が再発した（同種の事故 #836574 で .tc-terminal-log-body を作ったが、
 * 別途追加された chat bubble 用 <pre> で再発）。
 * bubble の <pre> は必ず .tc-chat-bubble-body クラスを使い、background と color を
 * クラス側で 1 箇所管理する。インライン color / background は書かない。
 *
 * 色は .tc-terminal-panel スコープの CSS 変数で集約する。新色を追加するときは
 * 必ず変数化してから使うこと（ファイル冒頭の方針コメント参照）。
 */
.tc-terminal-panel {
  /* user bubble（自分の発言・青系） */
  --tc-chat-user-bg: #1e3a8a;
  --tc-chat-user-fg: #f3f4f6;
  --tc-chat-user-border: #2563eb;
  --tc-chat-user-meta-fg: #bfdbfe;

  /* claude bubble（Claude 出力・緑系） */
  --tc-chat-claude-bg: #0f1f1a;
  --tc-chat-claude-fg: var(--tc-term-text-light);
  --tc-chat-claude-border: var(--tc-term-accent-green);
  --tc-chat-claude-meta-fg: #6ee7b7;

  /* meta 行内の inline タグ */
  --tc-chat-meta-tag-bg: rgba(0, 0, 0, 0.3);

  /* error / warning */
  --tc-chat-error-fg: #fca5a5;
}

.tc-terminal-panel .tc-chat-messages {
  max-height: 480px;
  min-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.75rem;
  background: var(--tc-term-surface);
  border: 1px solid var(--tc-term-surface-border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tc-terminal-panel .tc-chat-empty-hint {
  color: var(--tc-term-text-muted);
  font-size: 0.75rem;
  text-align: center;
  margin: 1rem 0;
}
.tc-terminal-panel .tc-chat-bubble {
  padding: 0.5rem 0.75rem;
}
.tc-terminal-panel .tc-chat-bubble-user {
  align-self: flex-end;
  max-width: 85%;
  background: var(--tc-chat-user-bg);
  color: var(--tc-chat-user-fg);
  border: 1px solid var(--tc-chat-user-border);
  border-radius: 10px 10px 2px 10px;
}
.tc-terminal-panel .tc-chat-bubble-claude {
  align-self: flex-start;
  max-width: 92%;
  background: var(--tc-chat-claude-bg);
  color: var(--tc-chat-claude-fg);
  border: 1px solid var(--tc-chat-claude-border);
  border-radius: 10px 10px 10px 2px;
}
.tc-terminal-panel .tc-chat-bubble-meta {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.65rem;
  margin-bottom: 0.25rem;
}
.tc-terminal-panel .tc-chat-bubble-user .tc-chat-bubble-meta {
  color: var(--tc-chat-user-meta-fg);
}
.tc-terminal-panel .tc-chat-bubble-claude .tc-chat-bubble-meta {
  color: var(--tc-chat-claude-meta-fg);
}
.tc-terminal-panel .tc-chat-bubble-meta-name {
  font-weight: 700;
}
.tc-terminal-panel .tc-chat-bubble-meta-kind {
  opacity: 0.85;
}
.tc-terminal-panel .tc-chat-bubble-meta-target {
  background: var(--tc-chat-meta-tag-bg);
  color: var(--tc-term-target-fg);
  padding: 0 0.25rem;
  border-radius: 3px;
}
.tc-terminal-panel .tc-chat-bubble-meta-time {
  margin-left: auto;
  opacity: 0.7;
}
.tc-terminal-panel .tc-chat-bubble-body {
  /* background を明示しないと global の `pre { background: #f6f8fa }` で
     白背景になり、light text と組み合わさって白背景白文字事故が再発する。
     bubble 自体に色が付いているので transparent で透過させ、文字色は
     bubble の color を inherit する。 */
  background: transparent;
  color: inherit;
  border: none;
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 0;
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1.5;
}
.tc-terminal-panel .tc-chat-bubble-body-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.75rem;
  line-height: 1.4;
  max-height: 280px;
  overflow: auto;
}
.tc-terminal-panel .tc-chat-bubble-error {
  margin-top: 0.25rem;
  font-size: 0.65rem;
  color: var(--tc-chat-error-fg);
}