/* ============================================================================
 * threads.css — M4(アウトバウンド/メールスレッド寄り添い型)専用スタイル。
 * tokens.css のデザイントークン(var(--x))のみを参照する(生hex直書き禁止・04 §6)。
 * 基盤(F4)所有の tokens.css を編集せず、本モジュールのUI部品クラスをここに閉じる。
 * 各ページ(threads_list / thread_detail)が body 末尾でリンク読込する。
 * ========================================================================== */

/* --- 共通フィールド --- */
.field-label {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-right: var(--sp-2);
}
.field-input {
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.section-heading {
  font-size: var(--fs-base);
  margin: 0 0 var(--sp-2);
  color: var(--ink);
}
.pane-heading {
  font-size: var(--fs-base);
  margin: 0 0 var(--sp-3);
  color: var(--ink);
}
.error-banner {
  padding: var(--sp-2) var(--sp-3);
  background: var(--danger-soft);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

/* --- バッジ類(色+アイコン+文言の3点・a11y §9) --- */
.phase-badge,
.conf-badge,
.ttl-meter {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.ttl-meter__dots {
  letter-spacing: 1px;
  font-family: var(--font-mono);
}

/* --- 参加者チップ --- */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  min-height: var(--tap-min);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: var(--fs-sm);
}
.chip--unresolved {
  background: var(--danger-soft);
}
.chip__resolve {
  display: inline;
}
.chip__form {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  align-items: center;
}

/* --- 一覧テーブル --- */
.thread-table th,
.thread-table td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.thread-row:focus-visible {
  outline: 2px solid var(--accent);
}
.thread-row__link {
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}
.thread-row__link:hover {
  color: var(--accent);
}
.filter-chip--active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* --- 候補スロットカード --- */
.slot-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.slot-card {
  border-radius: var(--radius);
  padding: var(--sp-3);
  background: var(--surface);
}
.slot-card--selected {
  background: var(--accent-soft);
}
.slot-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.slot-card__title {
  font-weight: 600;
}
.slot-card__edit {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  margin-right: var(--sp-3);
}
.slot-card__normalized {
  margin-top: var(--sp-2);
  color: var(--ink-2);
}
.slot-card__actions {
  margin-top: var(--sp-3);
}

/* --- 会議グリッド/下書きグリッド --- */
.meeting-grid,
.draft-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-1) var(--sp-3);
  margin: 0;
}
.meeting-grid dt,
.draft-grid dt {
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

/* --- evidence ハイライト(双方向) --- */
.evidence-msg {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.evidence-mark {
  background: var(--state-tentative-soft);
  color: var(--ink);
  border-bottom: 2px solid var(--state-tentative);
  border-radius: 2px;
}
.evidence-mark--hot {
  background: var(--accent-soft);
  border-bottom-color: var(--accent);
}

/* --- 2ペイン(レスポンシブ §8) --- */
.pane-tabs {
  display: flex;
  gap: var(--sp-1);
  margin-top: var(--sp-4);
}
.pane-tab {
  flex: 1 1 auto;
  min-height: var(--tap-min);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pane-tab--active {
  background: var(--accent-soft);
  color: var(--ink);
  border-color: var(--accent);
}

/* モバイル基底: タブで1ペインずつ。active のみ表示。 */
.pane[data-pane="extract"] {
  display: none;
}
.pane[data-active="1"] {
  display: block;
}
.pane[data-active="0"] {
  display: none;
}

/* デスクトップ: 2ペイン併置・タブ非表示(§8 ≧1024) */
@media (min-width: 1024px) {
  .pane-tabs {
    display: none;
  }
  .two-pane {
    grid-template-columns: 2fr 3fr;
  }
  .pane[data-pane="extract"],
  .pane[data-active] {
    display: block;
  }
}

/* --- トースト --- */
.toast {
  display: flex;
  align-items: center;
}
.toast__undo {
  min-height: var(--tap-min);
}

/* --- 確定モーダル --- */
.confirm-modal::backdrop {
  background: rgba(16, 24, 40, 0.45);
}
.confirm-modal__draft {
  margin-top: var(--sp-4);
}

/* 横スクロール防止(AC10) */
.thread-detail,
.two-pane,
.pane {
  min-width: 0;
  max-width: 100%;
}
.evidence-msg__body {
  overflow-wrap: anywhere;
}