* { box-sizing: border-box; }
body {
  margin: 0; background: #FAFBFC; color: #1F2733;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans JP', sans-serif;
  font-size: 14px; line-height: 1.6;
}
a { color: #2563EB; text-decoration: none; }
header { background: #fff; border-bottom: 1px solid #ECEEF1; position: sticky; top: 0; z-index: 10; }
.header-inner { max-width: 1240px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 16px; height: 52px; }
.header-inner .btn { white-space: nowrap; }
.brand { font-weight: 700; font-size: 16px; color: #1F2733; white-space: nowrap; }
.brand-sub { font-weight: 400; font-size: 12px; color: #98A2B3; }
nav { display: flex; gap: 12px; }
nav a { color: #667085; padding: 4px 2px; white-space: nowrap; }
nav a.active { color: #1F2733; font-weight: 600; border-bottom: 2px solid #2563EB; }
.chip.prj-chip { background: #F0F9FF; color: #026AA2; border: 1px solid #B9E6FE; font-weight: 500; margin-right: 4px; vertical-align: 1px; }
.spacer { flex: 1; }
.whoami { color: #98A2B3; font-size: 12px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1280px) { .brand-sub { display: none; } }
main { max-width: 1240px; margin: 0 auto; padding: 20px 16px 60px; }
.loading { color: #98A2B3; padding: 40px; text-align: center; }

.card { background: #fff; border: 1px solid #ECEEF1; border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; }
.btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 7px;
  border: 1px solid #D0D5DD; background: #fff; color: #1F2733; font-size: 13px; cursor: pointer; }
.btn:hover { background: #F8F9FA; }
.btn-primary { background: #2563EB; border-color: #2563EB; color: #fff; }
.btn-primary:hover { background: #1D4ED8; }
.btn-ghost { border-color: transparent; color: #667085; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
input[type=text], input[type=url], input[type=datetime-local], input[type=date], input[type=number], textarea, select {
  width: 100%; padding: 8px 10px; border: 1px solid #D0D5DD; border-radius: 7px; font: inherit; background: #fff;
}
textarea { min-height: 120px; resize: vertical; }
label { display: block; font-size: 12px; color: #667085; margin: 14px 0 4px; }
label:first-child { margin-top: 0; }
label.btn { margin: 0; } /* ボタン化した label(ファイル選択)は見出しの余白を持たない(#290-2 縦ずれ対策) */

.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.tab-sep { width: 1px; align-self: stretch; background: #E4E7EC; margin: 2px 10px; }
.tab { padding: 5px 12px; border-radius: 999px; border: 1px solid #ECEEF1; background: #fff; color: #667085; cursor: pointer; font-size: 13px; }
.tab.active { background: #1F2733; border-color: #1F2733; color: #fff; }

.req-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff;
  border: 1px solid #ECEEF1; border-radius: 10px; margin-bottom: 8px; cursor: pointer; }
.req-row:hover { border-color: #C6CBD3; }
.req-title { font-weight: 600; }
.req-meta { color: #98A2B3; font-size: 12px; }
.req-main { flex: 1; min-width: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #2563EB; flex: none; }
.chip { flex: none; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
/* バッジの役割ルール: 状態=淡地塗りピル(コントラスト確保) / 種別=アウトライン / ボール=黄。
   色相は Backlog 準拠(未着手=赤系 / 対応中=青 / 完了=黄緑) */
.chip.open { background: #FEE4E2; color: #B42318; border: 1px solid #FECDCA; }
.chip.in_progress { background: #DEEBFA; color: #1D5FA6; border: 1px solid #BCD7F2; }
.chip.done { background: #EEF3D2; color: #5C6B12; border: 1px solid #DDE7AC; }
.chip.on_hold { background: #EDE9F7; color: #5B3FA6; border: 1px solid #D9D0EE; }
.chip.ball { background: #F2F4F7; color: #98A2B3; }
.chip.pending { background: #FEF0C7; color: #B54708; border: 1px solid #FEDF89; } /* 承認待ちエージェント(#33) */
.chip.ball.mine { background: #FEF0C7; color: #B45309; }
.chip.prio-high { background: #FEE4E2; color: #B42318; }
.chip.prio-low { background: #F2F4F7; color: #98A2B3; }
.chip.deadline { background: #EFF4FF; color: #2563EB; }
.chip.deadline.overdue { background: #FEE4E2; color: #B42318; font-weight: 700; }
.unread-badge { flex: none; min-width: 20px; height: 20px; border-radius: 10px; background: #2563EB; color: #fff;
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.chip.type-request { background: #fff; border: 1px solid #BCD7F2; color: #2563EB; }
.chip.type-consult { background: #fff; border: 1px solid #DACFF5; color: #6D28D9; }
.chip.type-report { background: #fff; border: 1px solid #BFE5CB; color: #067647; }
.chip.type-notice { background: #fff; border: 1px solid #F5DCB0; color: #B45309; }
.activity-list { background: #fff; border: 1px solid #ECEEF1; border-radius: 10px; overflow: hidden; }
.activity-row { display: flex; gap: 10px; align-items: baseline; padding: 8px 14px;
  border-bottom: 1px solid #F2F4F7; font-size: 13px; }
.activity-row:last-child { border-bottom: none; }
.act-chip { flex: none; font-size: 11px; font-weight: 600; color: #475467; background: #F2F4F7;
  border-radius: 5px; padding: 1px 8px; white-space: nowrap; }

/* 一覧の凡例(帯色: 自分の番=白 / 相手の番=黄土 / 完了=グレー) */
.legend { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #667085; }
.swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #D0D5DD; flex: none; }
.swatch-mine { background: var(--c-mine, #fff); }
.swatch-theirs { background: var(--c-theirs, #EFE3C4); }
.swatch-hold { background: var(--c-hold, #E9E3F3); }
.swatch-done { background: var(--c-done, #ECEDEF); }

/* 一覧テーブル(Backlog の課題一覧を参考にした固定レイアウト。件名だけが伸縮し、他列は幅固定で崩れない) */
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid #ECEEF1; border-radius: 10px; }
.task-table { width: 100%; min-width: 960px; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.task-table th { text-align: left; font-size: 11px; font-weight: 600; color: #667085; background: #F4F6F8;
  padding: 7px 8px; border-bottom: 1px solid #E4E7EC; white-space: nowrap; overflow: hidden; }
.task-table td { padding: 7px 8px; border-bottom: 1px solid #F2F4F7; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; }
.task-table tbody tr:last-child td { border-bottom: none; }
.task-row { cursor: pointer; }
/* 一覧のワンタッチ完了(#1837)。行の帯色の上でも押せる物と分かるよう白地にする */
.task-table td.cell-quick { padding: 4px 8px 4px 0; text-align: right; overflow: visible; }
.task-table .row-close { height: 24px; padding: 0 8px; background: #fff; }
.task-row:hover td { background: #F0F6FF; }
/* 帯色で鑑別: 自分の番=白(既定) / 相手の番=黄土色 / 完了=グレー */
.task-row.row-mine { background: var(--c-mine, #fff); }
.task-row.row-theirs { background: var(--c-theirs, #EFE3C4); }
.task-row.row-theirs td { border-bottom-color: rgba(0, 0, 0, .08); }
.task-row.row-hold { background: var(--c-hold, #E9E3F3); color: #667085; }
.task-row.row-hold td { border-bottom-color: rgba(0, 0, 0, .06); }
.task-row.row-done { background: var(--c-done, #ECEDEF); color: #667085; }
.task-row.row-done .cell-title .t { color: #667085; }
.task-row.unread .cell-title .t { font-weight: 700; }
.cell-title .t { line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 一覧の添付件数(#33) */
.att-count { display: inline-flex; align-items: center; gap: 1px; flex: none; margin-left: 4px; padding: 0 6px; border-radius: 999px;
  background: #F2F4F7; color: #667085; font-size: 11px; font-weight: 600; line-height: 16px; vertical-align: 1px; }
.task-row.unread .att-count { font-weight: 600; }
.cell-title .sub { color: #98A2B3; font-size: 11px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.nowrap { white-space: nowrap; }
.overdue-cell { color: #B42318; font-weight: 700; white-space: nowrap; }
.task-table th:last-child, .task-table td:last-child { text-align: right; }
/* 優先度は Backlog 風の矢印アイコン(高=赤↑ / 中=青緑→ / 低=↓) */
.prio-up { color: #D9626E; font-weight: 700; font-size: 15px; }
.prio-mid { color: #148BA8; font-weight: 700; font-size: 15px; }
.prio-down { color: #5EB5A6; font-weight: 700; font-size: 15px; }
/* ボール(番)の表示 */
.ball-mine { display: inline-block; background: #FDB022; color: #1F2733; border-radius: 999px;
  font-size: 11px; font-weight: 700; padding: 2px 9px; white-space: nowrap; }
.ball-theirs { display: inline-block; border: 1px solid #E4E7EC; color: #98A2B3; border-radius: 999px;
  font-size: 11px; padding: 2px 9px; white-space: nowrap; }
/* レビュー要回答(担当ではないが、返信で宛先指定され回答待ち) */
.ball-review { display: inline-block; background: #FEF0C7; color: #93370D; border-radius: 999px;
  font-size: 11px; font-weight: 700; padding: 2px 8px; white-space: nowrap; }

/* 詳細: 属性のフィールド表(Backlog の課題属性ボックス風。2列固定で値の折返し・見切れを防ぐ) */
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  border: 1px solid #E4E7EC; border-radius: 8px; overflow: hidden; margin-bottom: 12px; background: #F9FAFB; }
.field { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid #EEF1F4;
  min-height: 42px; }
.field:nth-child(odd) { border-right: 1px solid #EEF1F4; }
.field:nth-last-child(-n+2) { border-bottom: none; }
.field label { margin: 0; flex: none; width: 80px; font-size: 12px; color: #98A2B3; }
.field span { font-size: 13px; min-width: 0; flex: 1; display: flex; align-items: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.field input, .field select { padding: 5px 8px; font-size: 13px; width: 100%; max-width: 240px; }
@media (max-width: 720px) { .fields { grid-template-columns: 1fr; } .field { border-right: none !important; } }

/* 詳細: やり取り = 発言ごとに独立したカード(旧社内依頼システムの「ヘッダ帯+本文」形式)。
   誰が・いつ答えたかをヘッダ帯で常時明示する */
.timeline { margin-top: 4px; }
.entry-card { border: 1px solid #E4E7EC; border-radius: 8px; margin-bottom: 12px; background: #fff; overflow: hidden; }
/* ヘッダ帯は旧社内依頼システムに寄せた緑で統一(モノクロのMarkdownと対比して「やり取りの単位」が際立つ)。
   人/AIの区別はアバターと種別ラベルで行う */
.entry-card-head { display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: #E2EFDA; border-bottom: 1px solid #C9DFBC; font-size: 12px; color: #44603A; }
.entry-card { border-color: #D5E5CC; }
.entry-card-head strong { color: #1F2733; font-size: 13px; }
.entry-kind { font-size: 11px; color: #4A7C43; }
.entry-date { color: #3D5535; font-weight: 600; font-size: 12px; }
.entry-card-body { padding: 10px 14px; }
.avatar { width: 24px; height: 24px; border-radius: 50%; background: #E4E7EC; color: #475467;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.avatar.agent { background: #E4DAF8; }
.entry-copy { height: 22px; padding: 0 6px; }
.entry-sys { padding: 3px 4px 3px 12px; margin: 0 0 10px; border-left: 3px solid #ECEEF1; color: #98A2B3; font-size: 12px; }
/* 操作履歴は既定で隠す(#33)。「操作履歴を表示」で .timeline に show-sys が付く */
.timeline:not(.show-sys) .entry-sys { display: none; }
/* やり取りの折り畳み(#290): 既読の古い返信は畳み、先頭の「以前のやり取り n件を表示」で開く(.timeline に unfolded。全部開いたらバーごと隠す) */
.timeline:not(.unfolded) .folded { display: none; }
.fold-bar { margin: 0 0 12px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.fold-bar a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border: 1px dashed #C9D2DE; border-radius: 999px;
  background: #F7F9FC; color: #475467; font-size: 12px; text-decoration: none; }
.fold-bar a:hover { background: #EEF3FA; color: #1F2733; }
.fold-bar[hidden], .fold-bar a[hidden] { display: none; } /* 「以前の5件を表示」は畳んだ件数が5件以下・全部開いているときは出さない */
.syslog-toggle { font-size: 12px; text-decoration: none; }
.syslog-toggle:hover { text-decoration: underline; }
.entry-recipients { padding: 6px 14px 0; font-size: 12px; color: #667085; }
/* 自分宛の要回答(#33): 返信全体を琥珀色で囲み、上部に帯を出して見落とさないようにする */
.entry-card.ask-me { border: 2px solid #F59E0B; box-shadow: 0 0 0 4px #FEF3C7; background: #FFFCF2; }
.entry-card.ask-me .entry-card-head { background: #FDE68A; border-bottom-color: #F59E0B; color: #78350F; }
.ask-me-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 12px; background: #F59E0B; color: #fff;
  font-size: 13px; cursor: pointer; }
.ask-me-banner b { font-weight: 700; }
.ask-me-go { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: #fff; color: #B45309; font-weight: 700; font-size: 12px; }
.ask-me-banner:hover .ask-me-go { background: #FFFBEB; }
.ask-me-done { padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .85); background: transparent; color: #fff;
  font: inherit; font-weight: 700; font-size: 12px; cursor: pointer; }
.ask-me-done:hover { background: rgba(255, 255, 255, .2); }
.ask-me-done:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ask-done-modal { max-width: 440px; margin-top: 12vh; }
.ask-done-modal h2 { margin: 0 0 8px; }
.chip.ask-me-count { margin-left: 10px; background: #F59E0B; color: #fff; text-decoration: none; cursor: pointer; }
.reply-box { margin-top: 14px; }

/* 画像添付のサムネイル */
.thumbs { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.thumb { margin: 0; }
.thumb img { display: block; max-height: 140px; max-width: 220px; border-radius: 8px; border: 1px solid #ECEEF1;
  object-fit: cover; background: #F8F9FA; }
.thumb img:hover { border-color: #93B4F5; }
.thumb figcaption { font-size: 11px; color: #667085; margin-top: 3px; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files > div { margin-bottom: 4px; }
.action-picker { display: flex; flex-direction: column; gap: 4px; margin-top: 10px;
  border-top: 1px solid #F2F4F7; padding-top: 10px; }
.picker-label { font-size: 11px; color: #98A2B3; margin: 0; }
.type-hint { font-size: 12px; color: #667085; margin: 6px 0 0; }
.btn-danger { color: #B42318; border-color: #FCA5A5; }
.btn-danger:hover { background: #FEF3F2; }
.action-option { display: flex; gap: 8px; align-items: baseline; margin: 0; font-size: 13px; color: #1F2733; cursor: pointer; }
.dir { flex: none; font-size: 11px; color: #667085; background: #F2F4F7; border-radius: 5px; padding: 2px 7px; }
.dir.agent { background: #F0EBFF; color: #6D28D9; }

.thread { margin-top: 16px; }
.msg { margin-bottom: 10px; }
.msg .msg-head { font-size: 12px; color: #98A2B3; margin-bottom: 2px; }
.msg .msg-body { background: #F8F9FA; border: 1px solid #ECEEF1; border-radius: 8px; padding: 8px 12px; white-space: pre-wrap; word-break: break-word; }
.msg.by-agent .msg-body { background: #F7F4FF; border-color: #E4DAFB; }
.msg.status-line { color: #98A2B3; font-size: 12px; }
.status-buttons { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }

.kv { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: #F8F9FA;
  border: 1px solid #ECEEF1; border-radius: 6px; padding: 6px 10px; word-break: break-all; }
.muted { color: #98A2B3; font-size: 12px; }
.error { color: #B42318; font-size: 13px; margin-top: 8px; }
.ok { color: #067647; font-size: 13px; margin-top: 8px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
h1 { font-size: 20px; margin: 0 0 16px; }
h2 { font-size: 15px; margin: 0 0 10px; }
/* Markdown 描画(本文・返信)。表示スタイルは body の data 属性で切り替える(設定画面・ブラウザ単位) */
.md { line-height: 1.7; }
.md img.md-img { max-width: 100%; height: auto; }
/* 密度: compact / relaxed */
body[data-md-density="compact"] .md { font-size: 13px; line-height: 1.55; }
body[data-md-density="compact"] .md p { margin: 3px 0; }
body[data-md-density="compact"] .md h1 { font-size: 15px; margin: 10px 0 4px; }
body[data-md-density="compact"] .md h2 { font-size: 14px; margin: 8px 0 4px; }
body[data-md-density="compact"] .md h3, body[data-md-density="compact"] .md h4 { font-size: 13px; margin: 6px 0 3px; }
body[data-md-density="compact"] .md ul, body[data-md-density="compact"] .md ol { margin: 3px 0; padding-left: 18px; }
body[data-md-density="compact"] .md pre { padding: 7px 10px; margin: 5px 0; }
body[data-md-density="relaxed"] .md { font-size: 15px; line-height: 1.95; }
body[data-md-density="relaxed"] .md p { margin: 10px 0; }
body[data-md-density="relaxed"] .md h1 { font-size: 19px; margin: 20px 0 10px; }
body[data-md-density="relaxed"] .md h2 { font-size: 17px; margin: 16px 0 8px; }
body[data-md-density="relaxed"] .md ul, body[data-md-density="relaxed"] .md ol { margin: 10px 0; }
/* 見出しスタイル: underline(下線) / bar(左バー) / band(帯) */
body[data-md-heading="underline"] .md h1 { border-bottom: 2px solid #1F2733; padding-bottom: 6px; }
body[data-md-heading="underline"] .md h2 { border-bottom: 1px solid #C6CBD3; padding-bottom: 4px; }
body[data-md-heading="underline"] .md h3 { border-bottom: 1px dashed #E4E7EC; padding-bottom: 3px; }
body[data-md-heading="bar"] .md h1 { border-left: 5px solid #2563EB; padding-left: 10px; border-bottom: none; }
body[data-md-heading="bar"] .md h2 { border-left: 4px solid #7AA7EE; padding-left: 10px; }
body[data-md-heading="bar"] .md h3 { border-left: 3px solid #C6CBD3; padding-left: 10px; }
body[data-md-heading="band"] .md h1 { background: #1F2733; color: #fff; padding: 6px 12px; border-radius: 6px; border-bottom: none; }
body[data-md-heading="band"] .md h2 { background: #EEF2F7; padding: 5px 12px; border-radius: 6px; border: 1px solid #D6E0EE; border-left: 4px solid #2563EB; }
body[data-md-heading="band"] .md h3 { border-left: 3px solid #2563EB; padding-left: 10px; }
/* mono: カラー無しの報告書様式(H1=黒帯白抜き / H2=グレー帯・通常ウェイト / H3=左縦帯+下線) */
body[data-md-heading="mono"] .md h1 { background: #1A1F27; color: #fff; padding: 6px 12px; border-radius: 4px; border-bottom: none; }
body[data-md-heading="mono"] .md h2 { background: #E7EAEE; color: #1F2733; font-weight: 700; padding: 5px 12px; border-radius: 4px; border: 1px solid #C2C8D0; }
body[data-md-heading="mono"] .md h3 { border-left: 4px solid #1F2733; padding-left: 10px; border-bottom: 1px solid #C6CBD3; padding-bottom: 3px; }

/* 本文フォント: serif(明朝) */
body[data-md-font="serif"] .md, body[data-md-font="serif"] .pre-wrap {
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif; }
/* コードブロック: light */
body[data-md-code="light"] .md pre { background: #F6F8FA; color: #1F2733; border: 1px solid #E4E7EC; }
body[data-md-code="light"] .md pre code { color: inherit; }
/* コードのライト配色バリエーション(#16) */
body[data-md-code="light-blue"] .md pre { background: #EFF6FF; color: #1E3A5F; border: 1px solid #D6E6F9; }
body[data-md-code="light-green"] .md pre { background: #EFFAF3; color: #14532D; border: 1px solid #CBEBD7; }
body[data-md-code="light-yellow"] .md pre { background: #FEFBE8; color: #713F12; border: 1px solid #F5EBB8; }
body[data-md-code="light-red"] .md pre { background: #FEF2F2; color: #7F1D1D; border: 1px solid #F9D6D6; }
body[data-md-code="light-blue"] .md pre code, body[data-md-code="light-green"] .md pre code,
body[data-md-code="light-yellow"] .md pre code, body[data-md-code="light-red"] .md pre code { color: inherit; }
/* 角丸なし(#16): md 内の帯・コード・表・引用をスクエアに */
body[data-md-corner="square"] .md pre,
body[data-md-corner="square"] .md h1,
body[data-md-corner="square"] .md h2,
body[data-md-corner="square"] .md h3,
body[data-md-corner="square"] .md code,
body[data-md-corner="square"] .md .md-table,
body[data-md-corner="square"] .md .md-table table,
body[data-md-corner="square"] .md blockquote { border-radius: 0; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3, .md h4 { margin: 14px 0 6px; line-height: 1.4; }
.md h1 { font-size: 17px; border-bottom: 1px solid #ECEEF1; padding-bottom: 4px; }
.md h2 { font-size: 15px; font-weight: 700; }
.md h3, .md h4 { font-size: 14px; }
.md p { margin: 6px 0; }
.md ul, .md ol { margin: 6px 0; padding-left: 22px; }
/* 字下げでネストしたリスト(#290)は上下の余白を詰める(表示密度の設定より優先) */
.md li > ul, .md li > ol, body[data-md-density] .md li > ul, body[data-md-density] .md li > ol { margin: 2px 0; }
.md code { background: #F2F4F7; border-radius: 4px; padding: 1px 5px; font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.md pre { background: #1F2733; color: #E4E7EC; border-radius: 8px; padding: 10px 14px; overflow-x: auto; margin: 8px 0; }
.md pre code { background: none; color: inherit; padding: 0; }
.md blockquote { margin: 8px 0; padding: 2px 12px; border-left: 3px solid #D0D5DD; color: #667085; }
.md hr { border: none; border-top: 1px solid #ECEEF1; margin: 12px 0; }
.md-table { overflow-x: auto; margin: 8px 0; }
.md details { margin: 8px 0; padding: 6px 12px; border: 1px solid #E4E7EC; border-radius: 8px; background: #FAFBFC; }
.md details[open] { padding-bottom: 10px; }
.md summary { cursor: pointer; font-weight: 600; user-select: none; margin: -6px -12px; padding: 6px 12px; }
.md details[open] > summary { margin-bottom: 6px; border-bottom: 1px solid #EEF1F4; }
.md table { border-collapse: collapse; font-size: 13px; }
.md th, .md td { border: 1px solid #E4E7EC; padding: 4px 10px; text-align: left; }
.md th { background: #F8F9FA; }
.msg .msg-body .md { background: none; }
.files { margin-bottom: 6px; }
.file-link { font-weight: 600; }

.login-wrap { display: grid; place-items: center; min-height: 70vh; }
.login-card { text-align: center; max-width: 380px; padding: 40px 32px; }
.google-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 24px;
  border: 1px solid #747775; border-radius: 6px; color: #1F1F1F; font-size: 14px; font-weight: 500; background: #fff; }
.pre-wrap { white-space: pre-wrap; word-break: break-word; }

/* モーダル(新規タスク) */
.modal-overlay { position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 80; /* ドロワー(60)より前面(#65 プレビュー背面回り込み対策) */
.ap-overlay { z-index: 90; } /* 添付ピッカーは新規タスク・テンプレート・スケジュールのモーダル(80)の上に重ねる(#245 追加対応4) */
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.modal { background: #fff; border-radius: 12px; max-width: 760px; width: 100%; padding: 20px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25); margin-bottom: 40px; }
.modal textarea { min-height: 140px; }
/* 新規タスクの全画面表示(#290-3) */
.modal-overlay.modal-fullscreen { padding: 0; }
.modal-overlay.modal-fullscreen > .modal { max-width: none; width: 100%; min-height: 100vh; border-radius: 0; margin-bottom: 0; box-shadow: none; }
.modal-overlay.modal-fullscreen > .modal textarea { min-height: 40vh; }

/* メンバーカード(#26) */
.card-summary { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 13px; line-height: 1.5; }
.chip.card-skill { background: #EEF2F7; color: #344054; font-weight: 500; }
.card-note { font-size: 12px; margin-top: 2px; white-space: pre-wrap; }
.member-cards td { vertical-align: top; }
.card-form label { margin-top: 8px; }
.card-form input[type=text], .card-form textarea { width: 100%; }
.member-card-hint { display: none; margin: 4px 0 0; padding: 6px 10px; background: #F8FAFC; border: 1px solid #E4E7EC; border-radius: 8px; }

/* HTML添付のプレビュー(#35) */
.modal-preview { max-width: 1100px; width: 96vw; }
.lightbox .lb-stage { display: flex; align-items: center; gap: 8px; }
.lightbox #lb-body { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: center; }
.lightbox .lb-img { max-width: 100%; max-height: 74vh; border-radius: 8px; box-shadow: 0 2px 12px rgba(16,24,40,.18); }
/* 画像の拡大(#33): 縦長のスクリーンショットなどが 74vh に縮められて読めないのを、クリック/ボタンで拡大してスクロールで見る */
.lightbox .lb-img.lb-can-zoom { cursor: zoom-in; }
.lightbox #lb-body.lb-zoomed { display: block; overflow: auto; max-height: 80vh; text-align: center; border: 1px solid #E4E7EC; border-radius: 8px; background: #F9FAFB; overscroll-behavior: contain; }
.lightbox #lb-body.lb-zoomed .lb-img { max-height: none; border-radius: 0; box-shadow: none; cursor: zoom-out; display: inline-block; vertical-align: top; }
.lightbox #lb-body.lb-zoom-width .lb-img { width: 100%; max-width: 100%; }
.lightbox #lb-body.lb-zoom-orig .lb-img { width: auto; max-width: none; }
.lb-zoom { display: inline-flex; }
.lb-zoom .btn { border-radius: 0; margin-left: -1px; }
.lb-zoom .btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.lb-zoom .btn:last-child { border-radius: 0 6px 6px 0; }
.lb-zoom .btn.on { background: #EEF4FF; border-color: #93B4F5; color: #1D4ED8; font-weight: 600; position: relative; }
@media (max-width: 640px) { .lb-zoom, #lb-dim { display: none !important; } } /* 狭い画面はボタンを畳む(画像タップで拡大できる) */
.lightbox .lb-nav { flex: none; width: 40px; height: 64px; border: 1px solid #E4E7EC; border-radius: 10px; background: #fff;
  font-size: 26px; line-height: 1; color: #475467; cursor: pointer; }
.lightbox .lb-nav:hover { background: #F2F4F7; }
.lightbox .lb-video { max-width: 100%; max-height: 72vh; border-radius: 8px; background: #000; }
.lightbox .lb-audio { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 0; width: 100%; }
.lightbox .lb-audio audio { width: min(480px, 92%); }
.lightbox .lb-doc { width: 100%; max-height: 72vh; overflow: auto; border: 1px solid #E4E7EC; border-radius: 8px; padding: 14px 18px; background: #fff; text-align: left; }
/* プレビューの全画面表示(#439): 新規タスクと同じ modal-fullscreen。中身を画面の高さいっぱいに(見出し行・余白の分を引く) */
.lb-overlay.modal-fullscreen .lb-img, .lb-overlay.modal-fullscreen .lb-video { max-height: calc(100vh - 90px); }
.lb-overlay.modal-fullscreen #lb-body.lb-zoomed, .lb-overlay.modal-fullscreen .lb-doc { max-height: calc(100vh - 90px); }
.lb-overlay.modal-fullscreen .html-preview { height: calc(100vh - 110px); }
.lightbox .lb-pre { font-size: 12.5px; white-space: pre-wrap; word-break: break-all; margin: 0; }
/* #65 Phase1: 詳細ヘッダの圧縮 */
.metaline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13px; color: #475467; margin: 2px 0 6px; }
.head-fold > summary { cursor: pointer; font-size: 12.5px; color: #667085; padding: 4px 0; user-select: none; }
.head-fold > summary:hover { color: #2E5AAC; }
.head-fold[open] > summary { margin-bottom: 6px; }
/* 見出しと本文を同じカードに収め、区切り線で分ける(#33) */
.body-sep { border-top: 1px solid #ECEEF1; margin: 12px 0 10px; }
/* #65 Phase1: 未読ジャンプ */
.unread-sep { background: #FEF0C7; color: #93370D; font-size: 11.5px; font-weight: 700; text-align: center; padding: 2px 0; }
/* 追従バー(#33): 右下に「完了にする」「↓ 最新へ」 */
.float-bar { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: flex; gap: 8px; }
.float-bar .btn { box-shadow: 0 2px 10px rgba(16,24,40,.18); background: #fff; }
.float-bar .float-done { border-color: #12B76A; color: #027A48; font-weight: 600; }
.float-bar .float-done:hover { background: #ECFDF3; }
/* #65 Phase1: 新規タスクの詳細オプション */
.new-adv > summary { cursor: pointer; font-size: 13px; color: #2E5AAC; user-select: none; padding: 2px 0; }
.new-adv[open] { border: 1px dashed #E4E7EC; border-radius: 8px; padding: 8px 12px; }
.to-item.picked { background: #EDF3FF; font-weight: 600; }
.pick-check { color: #2E5AAC; font-weight: 700; }
/* #65 Phase2: 受信箱 */
.ghead { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 12.5px; font-weight: 700; color: #475467; }
.gcnt { background: #F59E0B; color: #fff; border-radius: 999px; padding: 0 8px; font-size: 11px; font-weight: 700; }
.inbox-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border: 1px solid #E4E7EC; border-radius: 10px;
  margin-bottom: 6px; background: #fff; cursor: pointer; }
.inbox-row:hover { background: #F8FAFC; }
.inbox-row.hot { border-left: 4px solid #F59E0B; background: #FFFDF7; }
.inbox-row.hot:hover { background: #FFF8E8; }
.inbox-row.active { outline: 2px solid #2E5AAC; }
.inbox-row .type-chip { flex: none; background: #EDF3FF; color: #2E5AAC; }
.inbox-row .irow-main { flex: 1; min-width: 0; }
.inbox-row .irow-main b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.inbox-row .irow-main small { color: #98A2B3; font-size: 12px; }
.inbox-row.unread .irow-main b { font-weight: 800; }
.irow-new { color: #B45309; font-weight: 600; }
.inbox-row .irow-when { flex: none; font-size: 12px; }
.inbox-row .irow-cta { flex: none; }
.gdone > summary { cursor: pointer; font-size: 12.5px; color: #667085; margin: 14px 0 6px; user-select: none; }
#filter-fold > summary { cursor: pointer; font-size: 12.5px; color: #667085; user-select: none; padding: 2px 0; }
@media (max-width: 720px) {
  .inbox-row { flex-wrap: wrap; gap: 4px 8px; }
  .inbox-row .irow-main { flex: 1 1 100%; order: 2; }
  .inbox-row .irow-cta { display: none; } /* 行全体タップで開く */
}
/* #75: サイドパネル(ドロワー) */
#drawer { position: fixed; inset: 0; background: rgba(16,24,40,.35); z-index: 60; }
#drawer .drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: max(70vw, min(1000px, 94vw)); background: #F7F8FA;
  box-shadow: -6px 0 24px rgba(16,24,40,.25); display: flex; flex-direction: column; animation: drawer-in .18s ease-out; }
@keyframes drawer-in { from { transform: translateX(40px); opacity: .6; } to { transform: none; opacity: 1; } }
#drawer .drawer-bar { flex: none; display: flex; gap: 8px; justify-content: flex-end; padding: 8px 14px; background: #fff; border-bottom: 1px solid #E4E7EC; }
#drawer .drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
#drawer .float-bar { position: absolute; } /* パネル内ではパネル基準に */
/* #78: パフォーマンス */
.perf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.perf-table th { text-align: left; font-size: 11.5px; color: #667085; font-weight: 600; padding: 8px 12px; border-bottom: 1px solid #E4E7EC; background: #FAFBFC; white-space: nowrap; }
.perf-table td { padding: 8px 12px; border-bottom: 1px solid #F2F4F7; white-space: nowrap; }
.perf-table tr.inactive td { color: #98A2B3; }
.spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 26px; vertical-align: middle; }
.spark i { display: inline-block; width: 6px; background: #2E5AAC; border-radius: 2px 2px 0 0; }
.spark i.z { background: #E4E7EC; }
.html-preview { width: 100%; height: 72vh; border: 1px solid #E4E7EC; border-radius: 8px; background: #fff; }

/* 返信に付いた添付(#33) */
.entry-files { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #E4E7EC; }
.entry-card-body > .entry-files:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* 複数選択のドロップダウン(#33): 閉じた箱から開く。人数が増えてもポップアップ内でスクロール */
/* #290: 選択済みの名前の幅に縮まないよう最低幅を確保(「閲覧できる人」の編集など、行内に置いたとき) */
.msel { position: relative; min-width: 200px; max-width: 420px; }
.msel-btn { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 1px solid #D0D5DD; border-radius: 7px; background: #fff; font: inherit; font-size: 13px;
  cursor: pointer; text-align: left; }
.msel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1F2733; }
.msel-label.empty { color: #98A2B3; }
.msel-caret { flex: none; color: #667085; font-size: 11px; }
.msel-pop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; background: #fff;
  border: 1px solid #D0D5DD; border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
  max-height: 240px; overflow-y: auto; padding: 4px; }
.msel-pop label { display: flex; gap: 8px; align-items: center; margin: 0; padding: 7px 10px; border-radius: 6px;
  font-size: 13px; color: #1F2733; cursor: pointer; }
.msel-pop label:hover { background: #F2F6FC; }
.msel-pop input[type=checkbox] { width: auto; flex: none; }
/* 一覧の検索中・検索後(#290): 結果が同じでも実行されたことが分かるように */
.list-loading { opacity: .45; pointer-events: none; transition: opacity .1s; }
.search-flash { animation: search-flash 1.2s ease-out; border-radius: 4px; }
@keyframes search-flash { 0%, 30% { background: #FEF0C7; color: #1F2733; } 100% { background: transparent; } }

/* To: ショートカットの候補ポップアップ(#33) */
.to-suggest { position: absolute; z-index: 40; background: #fff; border: 1px solid #D0D5DD; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12); max-height: 220px; overflow-y: auto; padding: 4px; width: 300px; left: 16px; }
.to-item { padding: 6px 10px; border-radius: 6px; font-size: 13px; color: #1F2733; cursor: pointer; }
.to-item.active, .to-item:hover { background: #EFF4FF; }

/* 返信対象のチップ(#33): 見出し横に宛先を明示。× で外せる */
.reply-to-chip { display: inline-flex; align-items: center; gap: 4px; background: #FEF0C7; color: #93370D; font-weight: 600; }
.chip-x { border: 0; background: transparent; color: #B45309; font-size: 13px; line-height: 1; cursor: pointer; padding: 0 0 0 2px; }
.chip-x:hover { color: #7C2D12; }

/* 添付の選択キュー(#33): 送信前に選んだファイルをチップで並べ、× で外せる。ドロップ先は青の破線で示す */
.att-list { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.att-chip { display: inline-flex; align-items: center; gap: 4px; background: #F2F6FC; color: #1F2733; border: 1px solid #D0D5DD;
  font-size: 12px; font-weight: 500; padding: 3px 6px 3px 9px; max-width: 320px; }
.att-chip .att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.att-chip .muted { font-size: 11px; }
.att-chip .chip-x { color: #667085; }
.drop-hot { outline: 2px dashed #2563EB; outline-offset: -2px; background: #EFF4FF; border-radius: 8px; }

/* 返信への後付け評価(#33): カード右下の 👍/👎 */
.entry-review { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 0 10px 6px; }
.rev-btn { border: 1px solid transparent; background: transparent; font-size: 14px; padding: 2px 8px; border-radius: 999px;
  cursor: pointer; opacity: .45; }
.rev-btn:hover { opacity: 1; background: #F2F4F7; }
.rev-btn.active { opacity: 1; background: #FEF0C7; border-color: #F5D989; }
.rev-badge { font-size: 12px; color: #93370D; background: #FEF0C7; padding: 2px 10px; border-radius: 999px; font-weight: 600; }

/* Slack風のエージェント状態ドット(#33): 緑=稼働中(塗り)、黄土=1回無反応(塗り)、グレー=2回連続(輪郭のみ) */
.hdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: 1px; margin-right: 2px; flex: none; }
.field .hdot { display: inline-block; flex: none; }
.hdot-green { background: #2BAC76; }
.hdot-yellow { background: #C9A227; }
.hdot-gray { background: transparent; border: 2px solid #98A2B3; width: 7px; height: 7px; }

/* #65: UIアイコン(絵文字の代替)。currentColor で塗る CSS mask。--i は app.js が ICONS から生成 */
.ic { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background: currentColor; flex: none;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.btn .ic, .chip .ic, .tab .ic { margin-right: 1px; }
.rev-btn .ic { width: 1.15em; height: 1.15em; }
/* #65: 個別タスク画面の背景色(自分の番/相手の番/完了)。一覧では付かない */
body[data-state="mine"] { background: var(--cp-mine, #F7F8FA); }
body[data-state="theirs"] { background: var(--cp-theirs, #FAF5E9); }
body[data-state="hold"] { background: var(--cp-hold, #F3F0F8); }
body[data-state="done"] { background: var(--cp-done, #F1F2F4); }
#drawer .drawer-body[data-state="mine"] { background: var(--cp-mine, #F7F8FA); }
#drawer .drawer-body[data-state="theirs"] { background: var(--cp-theirs, #FAF5E9); }
#drawer .drawer-body[data-state="hold"] { background: var(--cp-hold, #F3F0F8); }
#drawer .drawer-body[data-state="done"] { background: var(--cp-done, #F1F2F4); }
.theme-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; max-width: 640px; }
.theme-row label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.theme-row input[type="color"] { width: 44px; height: 30px; padding: 2px; border: 1px solid #D0D5DD; border-radius: 6px; background: #fff; }

/* #33: 最上部のお知らせバナー */
.banner { background: #FFF4D6; color: #7A4B00; border-bottom: 1px solid #F3D89A; padding: 8px 20px; font-size: 13px;
  font-weight: 600; white-space: pre-wrap; text-align: center; }

/* #33: 添付の取り込みピッカー */
.ap-list { max-height: 320px; overflow-y: auto; border: 1px solid #E4E7EC; border-radius: 8px; padding: 4px; }
.ap-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ap-row:hover { background: #F2F4F7; }
.ap-file { align-items: center; }
.ap-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid #E4E7EC; flex: none; background: #fff; }
.ap-kind { width: 40px; height: 40px; border-radius: 6px; background: #F2F4F7; color: #667085; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.ap-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ap-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 返信の内部リンク(#33): 見出しの #N がリンク。開いた/クリックした返信を一瞬強調 */
.msg-anchor { font-size: 11px; text-decoration: none; padding: 0 4px; border-radius: 4px; }
.msg-anchor:hover { background: #EEF2FF; color: #2E5AAC; text-decoration: none; }
.entry-card.msg-target { animation: msg-flash 2.4s ease-out; }
@keyframes msg-flash { 0% { box-shadow: 0 0 0 3px #F59E0B; background: #FFF7E0; } 60% { box-shadow: 0 0 0 3px #F59E0B; } 100% { box-shadow: none; } }

/* 一時通知(#33): 右下に数秒だけ出る */
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; gap: 10px; align-items: center;
  padding: 10px 14px; background: #1D2939; color: #fff; border-radius: 10px; font-size: 13.5px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.toast a { color: #FFD666; font-weight: 600; text-decoration: none; }
.toast .chip-x { color: #fff; opacity: .7; font-size: 15px; margin-left: 4px; }

/* 投稿メタデータ(#111): フッター行(good/bad と同じ行)の左端にボタン。通常は閉じていて、開くと行の下にキー/値の表 */
.meta-toggle { border: 0; background: transparent; font-size: 12px; color: #667085; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 6px; }
.meta-toggle:hover { background: #F2F4F7; }
.meta-toggle.open { color: #344054; background: #F2F4F7; }
.meta-panel { padding: 0 14px 8px; }
.meta-table { margin: 2px 0; border-collapse: collapse; font-size: 12px; }
.meta-table th { text-align: left; font-weight: 600; color: #667085; padding: 3px 12px 3px 6px; white-space: nowrap; vertical-align: top; }
.meta-table td { padding: 3px 6px; color: #344054; word-break: break-all; }
.meta-table code { font-size: 11px; background: #F2F4F7; padding: 1px 5px; border-radius: 4px; }

/* メンバー画面のエージェント一覧(#33) */
.agent-table { min-width: 760px; }
.agent-table tbody.inactive > tr:first-child td { color: #98A2B3; }
.agent-table tbody { border-bottom: 1px solid #E4E7EC; }
.agent-table tbody:last-child { border-bottom: none; }
.agent-table tr.agent-detail td { background: #FAFBFC; white-space: normal; overflow: visible; padding: 4px 14px 14px; }
.agent-table tr.agent-detail label { margin-top: 10px; }
/* プロジェクト編集モーダルの所属マトリクス(#214 機能B)。.task-table の min-width: 960px はモーダル(760px)からはみ出して
   「所属」「管理者」のチェックボックスが横スクロールしないと見えなくなるので解除し、名前列だけを伸縮(折り返し)させる */
.prj-matrix { min-width: 0; }
.prj-matrix th, .prj-matrix td, .prj-matrix th:last-child, .prj-matrix td:last-child { text-align: center; }
.prj-matrix th:first-child, .prj-matrix td:first-child { text-align: left; white-space: normal; word-break: break-word; }
.prj-matrix input[type=checkbox] { margin: 0; }

/* タスクテンプレート(#196): 「何をしてほしいか」で選ぶカード */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tpl-card { background: #fff; border: 1px solid #ECEEF1; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.tpl-card:hover { border-color: #BCD7F2; box-shadow: 0 1px 4px rgba(16, 24, 40, .06); }
.tpl-name { font-size: 15px; margin: 2px 0 0; line-height: 1.35; }
.tpl-desc { font-size: 13px; color: #344054; margin: 0; white-space: pre-wrap; flex: 1; }
.tpl-to { font-size: 12.5px; margin-top: 2px; }
.tpl-foot { font-size: 11.5px; line-height: 1.5; }
.tpl-actions { margin-top: 6px; gap: 4px; flex-wrap: nowrap; }
.tpl-actions .btn-ghost { padding: 0 6px; }
/* テンプレート一覧のリスト型(#33 既定)。タスク一覧(.task-table)の体裁を流用 */
.tpl-table { min-width: 960px; }
.tpl-row[data-tpl-row-use] { cursor: pointer; }
.tpl-row[data-tpl-row-use]:hover td { background: #F0F6FF; }
.tpl-row.tpl-row-cannot { color: #667085; }
.tpl-row .tpl-name { font-weight: 600; }
.tpl-row .tpl-desc { white-space: nowrap; }
.tpl-row .tpl-by .sub, .tpl-row .tpl-used .sub { display: block; color: #98A2B3; font-size: 11px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.tpl-row td.tpl-actions { display: table-cell; }
.tpl-row td.tpl-actions .btn { vertical-align: middle; }
.tpl-row td.tpl-actions .btn + .btn { margin-left: 4px; }
.tpl-table th:last-child, .tpl-table td:last-child { text-align: left; }
.tpl-view-toggle .tab { padding: 3px 10px; font-size: 12.5px; }
.tpl-banner { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; padding: 6px 10px; margin-bottom: 8px;
  background: #EFF4FF; border: 1px solid #BCD7F2; border-radius: 8px; color: #1D4ED8; }
.tpl-banner .muted { font-size: 12px; }

/* ツール(#33): 一覧カードと SSH 鍵の表示 */
.tool-card { color: inherit; text-decoration: none; min-height: 120px; }
.tool-card:hover { text-decoration: none; }
.tool-name { font-weight: 600; font-size: 14px; }
.sk-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; white-space: pre; overflow: auto; word-break: normal; }
.sk-fp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; background: #F2F4F7; padding: 1px 5px; border-radius: 4px; }
.sk-key-wrap { white-space: pre-wrap; word-break: break-all; }

/* サブタスクの担当者・自分が担当のステップ(#240/#285) */
.step-mine { background: #FFFBEF; border-radius: 6px; margin: 0 -6px; padding: 3px 6px !important; }
.step-chip { background: #F2F4F7; color: #475467; font-weight: 500; }
.step-chip-mine { background: #FEF0C7; color: #93370D; font-weight: 600; }
.step-chip-inactive { background: #FEE4E2; color: #B42318; }
.step-assignee-sel { width: auto; max-width: 150px; font-size: 12px; padding: 2px 6px; height: 26px; color: #667085; }
.step-assignee-sel:has(option:checked:not([value=""])) { color: #344054; }
.steps-editor .step-row .step-title { height: 32px; }
.steps-editor .step-row select { height: 32px; font-size: 13px; }
.chip.tpl-steps { background: #EFF8FF; color: #175CD3; font-weight: 500; }

/* スケジュール(#245): 台帳と各回の帯 */
.chip.sch-chip { background: #EEF4FF; color: #3538CD; border: 1px solid #C7D7FE; font-weight: 500; margin-right: 4px; vertical-align: 1px; text-decoration: none; }
.sch-table { min-width: 1080px; }
.sch-row { cursor: pointer; }
.sch-row:hover td { background: #F0F6FF; }
.sch-row.sch-alert td { background: #FFF5F5; }
.sch-row.sch-alert:hover td { background: #FFEBEB; }
.sch-row.sch-paused { color: #667085; }
.sch-row .sch-name { font-weight: 600; }
.sch-row .sub { display: block; color: #98A2B3; font-size: 11px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-band { display: inline-flex; gap: 2px; align-items: center; }
.sch-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; background: #D0D5DD; }
.sch-dot.ok { background: #12B76A; }
.sch-dot.late { background: #F79009; }
.sch-dot.missed { background: #F04438; }
.sch-dot.skipped { background: #98A2B3; }
.sch-dot.pending { background: #fff; border: 2px solid #98A2B3; box-sizing: border-box; }
.sch-result { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.sch-result.ok { background: #ECFDF3; color: #027A48; }
.sch-result.late { background: #FFFAEB; color: #B54708; }
.sch-result.missed { background: #FEE4E2; color: #B42318; }
.sch-result.skipped { background: #F2F4F7; color: #475467; }
.sch-result.pending { background: #F2F4F7; color: #667085; }
.sch-streak { font-weight: 700; color: #B42318; }
.sch-detail td { background: #FAFBFC; padding: 10px 14px 14px; }
.sch-runs { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.sch-runs th, .sch-runs td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #ECEEF1; }
.sch-runs th { color: #667085; font-weight: 500; }

/* スケジュール(#245): 「ここに書く」依頼内容の折りたたみ表示 */
.sch-content { margin: 6px 0 0; text-align: left; }
.sch-content-body { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 13px; background: #F9FAFB; border: 1px solid #ECEEF1; border-radius: 6px; padding: 8px 10px; margin: 4px 0 0; max-height: 240px; overflow: auto; }

/* ---- サイドメニュー(#290 追加対応: プロジェクトの一覧表示と切り替え) ---- */
.layout { display: flex; align-items: flex-start; }
.layout > main { flex: 1; min-width: 0; }
.sidebar { flex: none; width: 220px; position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto;
  background: #fff; border-right: 1px solid #ECEEF1; padding: 14px 10px 16px; display: flex; flex-direction: column; gap: 6px; }
.sidebar-toggle { width: 34px; padding: 0; justify-content: center; flex: none; }
.sb-head { font-size: 11px; font-weight: 600; color: #98A2B3; letter-spacing: .04em; padding: 0 10px 4px; }
.sb-list { display: flex; flex-direction: column; gap: 2px; }
.sb-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; color: #344054; font-size: 13.5px; min-width: 0; }
.sb-item:hover { background: #F2F4F7; }
.sb-item.active { background: #E8F0FE; color: #1D4ED8; font-weight: 600; }
.sb-item.active .ic { color: #1D4ED8; }
.sb-item.muted { color: #98A2B3; }
.sb-item .ic { flex: none; width: 16px; height: 16px; color: #667085; }
.sb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-sub { flex: none; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #98A2B3; font-size: 11px; font-weight: 400; }
.sb-sep { height: 1px; background: #ECEEF1; margin: 6px 8px; }
.sb-archived { margin-top: 4px; }
.sb-archived summary { cursor: pointer; color: #98A2B3; font-size: 12px; padding: 4px 10px; list-style: none; }
.sb-archived summary::before { content: '▸ '; }
.sb-archived[open] summary::before { content: '▾ '; }
.sb-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid #ECEEF1; display: flex; flex-direction: column; gap: 2px; }
.sb-new { color: #2563EB; font-weight: 600; }
.sb-new .ic { color: #2563EB; }
.sb-manage { font-size: 12.5px; color: #667085; }
.sidebar-backdrop { position: fixed; inset: 52px 0 0 0; background: rgba(16, 24, 40, .35); z-index: 45; }
/* 広い画面: 畳むと幅 0(記憶)。狭い画面: ドロワー(ヘッダの ≡ で開く) */
body.sidebar-closed .sidebar { display: none; }
@media (max-width: 999px) {
  .sidebar { position: fixed; left: 0; top: 52px; bottom: 0; height: auto; z-index: 50; transform: translateX(-100%); transition: transform .15s ease; box-shadow: none; }
  body.sidebar-open .sidebar { transform: none; box-shadow: 4px 0 16px rgba(16, 24, 40, .12); }
}
.sidebar[hidden], .sidebar-toggle[hidden] { display: none; }
/* 2026-10-02 #552: サブタスクに固定した内容(本文/返信の写し)と、付ける前の選択表示 */
.step-source { margin: 0 0 6px 26px; font-size: 13px; }
.step-source > summary { cursor: pointer; color: #475467; }
.step-source-body { margin-top: 4px; padding: 8px 12px; border-left: 3px solid #D0D5DD; background: #F9FAFB; border-radius: 4px; }
.step-source-files { margin-top: 6px; }
.step-from-chip { margin-top: 8px; padding: 6px 10px; background: #EFF4FB; border: 1px solid #C7D7EE; border-radius: 6px; font-size: 13px; }
/* 2026-10-02 #552 追加対応: 本文/返信の「＋」から出す小メニュー(サブタスクを追加 / 新規タスクを起票) */
.pick-menu { position: absolute; z-index: 40; min-width: 260px; max-width: 340px; background: #fff; border: 1px solid #D0D5DD;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); padding: 4px; }
.pick-menu-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px;
  background: none; font: inherit; font-size: 13px; color: #1F2733; text-align: left; cursor: pointer; }
.pick-menu-item:hover, .pick-menu-item:focus-visible { background: #F2F6FC; outline: none; }
.pick-menu-item .ic { margin-top: 2px; color: #475467; }
.pick-menu-item b { display: block; font-weight: 600; }
.pick-menu-item .muted { display: block; font-size: 12px; }

/* 並列ラン(#868): 起票フォームの切替・一覧のバッジ・比較画面。採用=緑 / 不採用=グレー */
.par-box { margin: 10px 0 0; padding: 8px 12px; background: #F8FAFC; border: 1px solid #E4E7EC; border-radius: 8px; }
.par-toggle { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.par-toggle .muted { font-weight: 400; font-size: 12px; }
.par-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 4px; }
.par-preset { display: inline-flex; align-items: center; border: 1px solid #C7D7FE; background: #EEF4FF; border-radius: 999px; overflow: hidden; }
.par-preset > button { border: 0; background: none; padding: 3px 12px; font-size: 12.5px; color: #3538CD; cursor: pointer; }
.par-preset > .chip-x { padding: 3px 8px 3px 0; color: #667085; }
.par-preset.on { background: #2563EB; border-color: #2563EB; }
.par-preset.on > button { color: #fff; }
.par-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin-top: 6px; }
.par-agent { display: flex; gap: 6px; align-items: center; margin: 0; padding: 5px 10px; font-size: 13px; font-weight: 400; background: #fff; border: 1px solid #E4E7EC; border-radius: 8px; cursor: pointer; }
.par-agent.on { border-color: #2563EB; background: #EFF4FF; }
.par-hint { font-size: 12.5px; margin: 8px 0 0; }
.par-foot { display: flex; gap: 14px; align-items: center; margin: 8px 0 0; }
.chip.par-chip { background: #EEF4FF; color: #3538CD; border: 1px solid #C7D7FE; font-weight: 500; margin-right: 4px; vertical-align: 1px; text-decoration: none; }
.chip.par-ok { background: #ECFDF3; color: #027A48; border: 1px solid #ABEFC6; }
.chip.par-ng { background: #F2F4F7; color: #667085; border: 1px solid #E4E7EC; }
.par-grid { display: grid; grid-template-columns: repeat(var(--par-n, 2), minmax(280px, 1fr)); gap: 12px; margin-top: 14px; overflow-x: auto; align-items: start; }
.par-card { background: #fff; border: 1px solid #E4E7EC; border-radius: 10px; padding: 12px 14px; min-width: 0; }
.par-card-ok { border-color: #12B76A; box-shadow: 0 0 0 1px #12B76A; }
.par-card-ng { background: #FAFAFB; }
.par-card > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.par-agent-name { font-weight: 600; }
.par-dl { display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px; margin: 0 0 8px; font-size: 13px; }
.par-dl dt { color: #667085; }
.par-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.par-reply { margin: 8px 0; padding: 6px 0; border-top: 1px solid #F2F4F7; }
.par-reply > summary { cursor: pointer; font-size: 13px; color: #344054; }
.par-reply .md, .par-reply .pre-wrap { max-height: 360px; overflow: auto; margin-top: 6px; font-size: 13px; }
.par-pick { display: inline-flex; gap: 6px; align-items: center; margin: 0; padding: 5px 12px; font-size: 13px; font-weight: 600; color: #344054; background: #fff; border: 1px solid #D0D5DD; border-radius: 8px; cursor: pointer; }
.par-pick:hover { background: #F9FAFB; }
.par-card-pick { border-color: #12B76A; box-shadow: 0 0 0 1px #12B76A; }
.par-card-pick .par-pick { color: #027A48; background: #ECFDF3; border-color: #ABEFC6; }
.par-decide { margin-top: 12px; padding: 12px 14px; }
.par-panel { margin: 0 0 12px; padding: 12px 14px; background: #F5F8FF; border: 1px solid #C7D7FE; border-radius: 10px; }
.par-result { font-weight: 600; color: #344054; }
.par-mine { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; margin: 0 0 8px; padding: 8px 12px; background: #fff; border: 1px solid #C7D7FE; border-radius: 8px; font-size: 13.5px; }
.btn.par-on-ok { background: #ECFDF3; border-color: #12B76A; color: #027A48; font-weight: 600; }
.btn.par-on-ng { background: #F2F4F7; border-color: #667085; color: #344054; font-weight: 600; }
.chip.par-plan-ok { background: #fff; color: #027A48; border: 1px dashed #12B76A; }
.chip.par-plan-ng { background: #fff; color: #667085; border: 1px dashed #98A2B3; }
.par-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 0; font-size: 13px; }
/* 2026-10-19 #1351: 採否の理由1行(任意。全NGは全体の理由が必須) */
.par-reason-input { width: 100%; flex-basis: 100%; font-size: 13px; padding: 5px 10px; }
.par-reason-text { font-size: 12.5px; overflow-wrap: anywhere; }
.par-result-ok { color: #027A48; }
.par-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; border: 1px solid #E4E7EC; border-radius: 8px; }
.par-table th { text-align: left; font-weight: 500; color: #667085; padding: 6px 10px; border-bottom: 1px solid #E4E7EC; }
.par-table td { padding: 7px 10px; border-bottom: 1px solid #F2F4F7; }
.par-table tr:last-child td { border-bottom: 0; }
.par-table tr.par-here td { background: #EFF4FF; font-weight: 600; }
.chip.par-here-chip { background: #2563EB; color: #fff; font-weight: 500; }

/* 共有リンクのダイアログ(#938) */
.share-created { background: #ECFDF3; border: 1px solid #ABEFC6; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.share-created .row { display: flex; gap: 8px; }
.share-form label.action-option { display: block; margin: 4px 0; font-size: 13px; color: #1F2733; }
.share-users { max-height: 160px; overflow: auto; border: 1px solid #E4E7EC; border-radius: 7px; padding: 6px 10px; margin-top: 4px; }
.warn-note { background: #FFFAEB; border: 1px solid #FEDF89; color: #93370D; border-radius: 7px; padding: 6px 10px; font-size: 12px; margin: 10px 0 0; }
.share-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.share-table th { text-align: left; color: #98A2B3; font-weight: 500; padding: 4px 8px; border-bottom: 1px solid #ECEEF1; }
.share-table td { padding: 6px 8px; border-bottom: 1px solid #F2F4F7; vertical-align: top; }
/* #1397 メンバー画面: タブの件数・検索・右パネル(人/エージェントの詳細)・グループの検索ピッカー */
.mtabs-row { justify-content: space-between; margin-bottom: 12px; }
.mtabs-row #member-q { max-width: 280px; }
.tab .mtab-count { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #F2F4F7; color: #475467; font-size: 11px; font-weight: 600; }
.tab.active .mtab-count { background: #F59E0B; color: #fff; }
.mpager { font-size: 12px; margin: 8px 0 0; }
.task-row.inactive td { color: #98A2B3; }
#member-panel { position: fixed; inset: 0; background: rgba(16,24,40,.35); z-index: 60; }
#member-panel .mpanel { position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 96vw); background: #fff;
  box-shadow: -6px 0 24px rgba(16,24,40,.25); display: flex; flex-direction: column; animation: drawer-in .18s ease-out; }
#member-panel .mpanel-bar { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-bottom: 1px solid #E4E7EC; }
#member-panel .mpanel-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.mp-sec { border-top: 1px solid #F2F4F7; margin-top: 12px; padding-top: 12px; }
.mp-sec h3 { margin: 0 0 6px; font-size: 13px; color: #475467; }
.gm-chips { gap: 6px; flex-wrap: wrap; }
.gm-chip { display: inline-flex; align-items: center; gap: 4px; background: #F2F4F7; color: #1F2733; font-weight: 500; }
.gm-x { border: none; background: none; color: #667085; cursor: pointer; padding: 0 2px; font-size: 11px; }
.gm-results { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; max-height: 240px; overflow-y: auto; }
.gm-cand { text-align: left; padding: 6px 10px; border: 1px solid #ECEEF1; border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; }
.gm-cand:hover:not([disabled]) { background: #F5F8FF; border-color: #C7D7FE; }
.gm-cand[disabled] { opacity: .5; cursor: not-allowed; }