/*
 * 対話の画面（public/js/chat.js chatHTML、2026-10-06）。
 *
 * > 斉藤さん「UXは、できるだけclaudeやGPTで対話しているのと間違うぐらいの、慣れたUXにしたい」
 * > 「トップに人がはいっちゃうと、対話が見える面積がすくなくなってしまう。これ使いにくいんだよね」
 *
 * 上は細い一行（顔・名前・分け方、対話／ジョブ整理、持ち帰る）。人の紹介と選んだ理由は、会話のはじめに置いて一緒に流れる。
 * 会話は高さいっぱい、読みやすい幅で真ん中に。入力欄は下に固定した丸い箱で、送るボタンは箱の中。
 * 広い画面では、左に聞きたい人、右に はじめの企画・気になる言葉・改善した企画。
 * chat.css の古い重ね書きより後に読み込み、body.is-chat .cv で上書きする。
 */
body.is-chat .cv {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0 var(--space-6);
  padding: 0;
  align-items: stretch;
}
body.is-chat .cv .chat-people {
  display: none;
}
@media (min-width: 1280px) {
  body.is-chat .cv.has-people {
    grid-template-columns: 13.5rem minmax(0, 1fr) 17rem;
  }
  body.is-chat .cv .chat-people {
    display: block;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4) var(--space-4) 0;
    border-right: 1px solid var(--line-soft);
  }
  body.is-chat .cv .job-side .ask-band {
    display: none;
  }
}
body.is-chat .cv .chat-people .ask-band h2,
body.is-chat .cv .job-side .ask-band h2 {
  margin: var(--space-1) var(--space-2) var(--space-2);
  font-size: var(--fs-tag);
  font-weight: 400;
  color: var(--text-muted);
}
body.is-chat .cv .ask-band-p {
  border-radius: var(--radius-card);
}
body.is-chat .cv .ask-band-p.on {
  border-color: transparent;
  background: var(--surface-quiet);
}
body.is-chat .cv .chat-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  position: relative;
}

/* 上の帯は、片づけたい用事・打ち手を考えると同じ作業の帯（parts.css .work-bar）。三つの列の上に全幅で。
   左に戻る道と、話している人（顔・名前・分け方）。 */
body.is-chat .cv .chat-bar {
  grid-column: 1 / -1;
  display: block;
  margin: 0;
  padding: 0;
}
body.is-chat .cv .chat-bar .work-bar-start {
  gap: var(--space-4);
}

body.is-chat .cv .chat-bar .portrait {
  display: block;
  flex: none;
  width: 2rem;
  height: 2rem;
  margin-right: calc(var(--space-2) - var(--space-4));
  border-radius: var(--radius-face);
  object-fit: cover;
  object-position: center 18%;
  background: var(--surface-quiet);
}
body.is-chat .cv .chat-bar .initial {
  display: grid;
  place-items: center;
  font-size: 1rem;
}
/* 話している人：顔32px・名前17px/600・分け方13px・英語名12px を1行に（Claude Design の画面デザイン）。
   収まらないときは、名前・分け方の中で折り返す。1行に固定すると、長い名前や分け方が右の「気になる言葉」の下に潜った。 */
body.is-chat .cv .chat-bar-who {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
body.is-chat .cv .chat-bar-who > * {
  min-width: 0;
}
body.is-chat .cv .chat-who-h {
  display: block;
  margin: 0;
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
}
body.is-chat .cv .chat-who {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
body.is-chat .cv .chat-who > span {
  margin-left: var(--space-2);
  color: var(--text-muted);
  font-weight: 400;
}
body.is-chat .cv .chat-group {
  font-size: var(--fs-note);
  color: var(--text-muted);
}

/* 対話・ジョブ整理は同じ形のタブ（いまの場所に下線）。右端の保存は小さな枠のボタン。3つが別々の見た目にならないように。 */

/* 知らせ（「気になる言葉に入れました」など）は、質問欄にも上の帯にも重ならないよう、PCは右下、スマホは帯の下に出す。 */
body.is-chat #toast,
body:has(.job-sheet) #toast,
body:has(.vs-page) #toast {
  left: auto;
  right: 2rem;
  bottom: 2rem;
  transform: none;
}
@media (max-width: 700px) {
  body.is-chat #toast,
  body:has(.job-sheet) #toast,
  body:has(.vs-page) #toast {
    top: 8.25rem;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    /* 短い知らせは1行、長い知らせは画面の端の余白の内側で折り返す（1行に固定すると、長い文は左右が欠けた） */
    width: max-content;
    max-width: calc(100% - 2 * var(--gutter));
  }
}
body.is-chat .cv .head-clues {
  display: none;
}

/* 会話。中で縦に動く箱を位置の基準にする（position）：中の読み上げ用の字（.sr-only、absolute）が、箱の外のページの基準で奥の位置に
   置かれ、ページ全体を下へ伸ばしていた。書き始めると窓がずれ、低い窓では会話が23pxしか見えなかった（C1 2026-10-28） */
body.is-chat .cv .chat-log {
  position: relative;
  flex: 1;
  min-height: 3rem;
  height: auto;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  padding: 0;
}
body.is-chat .cv .chat-thread {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-4);
}
body.is-chat .cv .chat-intro {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin: 0 0 var(--space-6);
  padding: 0 0 var(--space-5);
  border-bottom: 1px solid var(--line-soft);
}
body.is-chat .cv .chat-intro .portrait {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-face);
  object-fit: cover;
  object-position: center 18%;
  background: var(--surface-quiet);
}
body.is-chat .cv .chat-intro .chat-title {
  min-width: 0;
}
body.is-chat .cv .chat-intro p {
  margin: 0.125rem 0 0;
}
body.is-chat .cv .chat-intro-name {
  font-size: var(--fs-lead);
  font-weight: 600;
}
body.is-chat .cv .chat-intro .stance-line {
  margin: var(--space-2) 0 0;
  font-size: var(--type-note);
  line-height: 1.8;
  word-break: auto-phrase;
}
body.is-chat .cv .chat-intro-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
}

body.is-chat .cv .chat-intro .chat-intro-topic {
  margin-top: 0;
}
@media (min-width: 1001px) {
  body.is-chat .cv.has-people .chat-intro-topic {
    display: none;
  }
}
body.is-chat .cv .message {
  max-width: 100%;
  margin: 0 0 var(--space-6);
  padding: 0;
  border: 0;
  background: none;
  scroll-margin-bottom: 12rem;
}
body.is-chat .cv .message p {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.9;
  word-break: auto-phrase;
}
body.is-chat .cv .message.user p {
  font-size: var(--fs-body);
  line-height: var(--lh-lead);
}
body.is-chat .cv .message.user {
  width: fit-content;
  max-width: 80%;
  margin-left: auto;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-composer);
  background: var(--surface-quiet);
}
body.is-chat .cv .message.assistant .speaker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: var(--type-note);
  color: var(--text-muted);
}
body.is-chat .cv .message .speaker .portrait {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-face);
  object-fit: cover;
  object-position: center 18%;
  background: var(--surface-quiet);
}
/* 返答の下の「気になる」は小さい脇役のボタン（押したあと「気になる ✓」）。見える枠の左を本文の左にそろえる。 */
body.is-chat .cv .message-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
/* 質問のヒントの横の「?」（もとの考え方を開く）。丸い印は、ヒントの枠の中で右に */
body.is-chat .cv .hint-why {
  flex: none;
  align-self: center;
  margin: 0 var(--space-1) 0 calc(-1 * var(--space-2));
}

/* まだ何も聞いていないとき。 */
body.is-chat .cv .conversation-empty {
  padding: var(--space-2) 0 var(--space-4);
}
body.is-chat .cv .conversation-empty h2 {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-title);
  font-weight: 500;
}
body.is-chat .cv .conversation-empty .opening-questions {
  display: grid;
  gap: var(--space-3);
  max-height: none;
  overflow: visible;
}
body.is-chat .cv .conversation-empty .hint {
  display: flex;
}

/* 質問のヒント：質問と、その横にもとの考え方（押すと説明が開く）。 */
body.is-chat .cv .hint {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  overflow: hidden;
}
body.is-chat .cv .hint-q {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-body);
  line-height: 1.6;
  text-align: left;
  word-break: auto-phrase;
  /* 問いの文は短くしない（送る文そのもの）。入らない幅では、文節の切れ目で、2行の長さをならして折る（saito-review 2026-10-28：
     360 で「…いちばん手間に感じるのは／どこですか。」と、2行目が短く残った） */
  text-wrap: balance;
  cursor: pointer;
}

body.is-chat .cv .hint-q:hover {
  background: var(--surface-quiet);
}
/* 答えに合わせた次の問いを作っているあいだ（数秒まで）：ヒントの場所は空けて待つ（chat.js stanceHintHTML）。押せるものは置かない。 */
body.is-chat .cv .hint-wait {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.6;
}
body.is-chat .cv .stance-hint.is-waiting .hint {
  border-style: dashed;
}

body.is-chat .cv .stance-hint {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}
body.is-chat .cv .hint-label {
  flex: none;
  font-size: var(--fs-tag);
  color: var(--text-muted);
}
body.is-chat .cv .question-hints {
  margin: 0 0 var(--space-2);
}
body.is-chat .cv .question-hints summary {
  display: inline-flex;
  min-height: 2.25rem;
  font-size: var(--type-note);
  color: var(--text-muted);
}
body.is-chat .cv .question-hints .opening-questions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  max-height: 30dvh;
  overflow-y: auto;
  margin: 0 0 var(--space-1);
}

/* 入力欄。 */
body.is-chat .cv .chat-dock {
  position: relative;
  flex: none;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0.5rem 1rem max(0.5rem, env(safe-area-inset-bottom));
  border: 0;
  background: none;
}
body.is-chat .cv .new-reply {
  position: absolute;
  top: -3.25rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-field);
}
body.is-chat .cv .composer-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 't t t' 'a l s';
  align-items: end;
  gap: 0.125rem var(--space-2);
  padding: var(--space-3) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-composer);
  background: var(--surface);
  box-shadow: var(--shadow-field);
}
body.is-chat .cv .composer-box:focus-within {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-field-focus);
}
body.is-chat .cv .composer {
  display: contents;
}
body.is-chat .cv .composer textarea {
  grid-area: t;
  width: 100%;
  min-height: 2.75rem;
  max-height: 12rem;
  margin: 0;
  padding: var(--space-1) var(--space-2) 0 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: none;
  box-shadow: none;
  font-size: var(--fs-lead);
  line-height: 1.7;
  field-sizing: content;
  resize: none;
}
body.is-chat .cv .composer button {
  grid-area: s;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-face);
  background: var(--fill);
  color: var(--on-fill);
  font-size: var(--fs-lead);
}
body.is-chat .cv .composer button:disabled {
  opacity: 0.35;
}
/* 「全員に聞く」は小さい脇役のボタン（parts.css .small-button）。質問欄の左下に */
body.is-chat .cv .composer-box .ask-all {
  grid-area: a;
  align-self: center;
  margin: 0;
}
/* 残りの回数は、それを使う「全員に聞く」と送るの段に（trial.js trialParts。質問欄の上に一行を取らない） */
body.is-chat .cv .composer-box .trial-left {
  grid-area: l;
  justify-self: end;
  align-self: center;
  min-width: 0;
  margin: 0;
  padding: 0 var(--space-1);
}
body.is-chat .cv .chat-caution {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-tag);
  color: var(--text-muted);
  text-align: center;
}

/* 右の欄。 */
body.is-chat .cv .chat-side {
  display: block;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3) 0 var(--space-4) var(--space-5);
  border: 0;
  border-left: 1px solid var(--line-soft);
  background: none;
}

/* 説明（ヒントの横の言葉を押したとき）。 */
.learn-from {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-tag);
  color: var(--text-muted);
}

@media (max-width: 1000px) {
  body.is-chat .cv,
  body.is-chat .cv.has-people {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  body.is-chat .cv .chat-side {
    display: none;
  }
  body.is-chat .cv .head-clues {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: var(--type-note);
    white-space: nowrap;
  }
  /* 気になる言葉は、会話の代わりに出る（一行はそのまま、戻るボタン付き）。聞きたい人をいちばん上に。 */
  body.is-chat .cv.show-clues {
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  body.is-chat .cv.show-clues .chat-log,
  body.is-chat .cv.show-clues .chat-dock {
    display: none;
  }
  body.is-chat .cv.show-clues .chat-side {
    display: block;
    padding: var(--space-3) 0 var(--space-4);
    border: 0;
  }
}
/* 聞きたい人が左に出ない幅（1280px 未満）：欄の並びは 話して→はじめの企画→気になる言葉→改善した企画→聞きたい人→詳しく
   知りたい人へ→ファイル、主役（レポートにまとめる）がいちばん下（斉藤さんが本番で 2026-10-10：主役の下に聞きたい人の一覧が
   続き、主役が欄の終わりでなかった）。 */
@media (max-width: 1279px) {
  body.is-chat .cv .job-side {
    display: flex;
    flex-direction: column;
  }
  body.is-chat .cv .job-side .analysis-bottom {
    order: 1;
  }
  body.is-chat .cv .job-side .ask-band {
    display: block;
    margin: var(--space-5) 0 0;
  }
  body.is-chat .cv .job-side .ask-band ul {
    grid-auto-flow: row;
  }
}
@media (max-width: 1000px) and (min-width: 701px) {
  body.is-chat .cv .chat-group {
    display: none;
  }
}
/* スマホ：分け方は名前の下に小さく（英語名は出さない） */
@media (max-width: 700px) {
  body.is-chat .cv .chat-bar-who {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  /* 名前の押せる範囲は44px のまま、上下に広げた分は前後に重ねる（帯の高さは変えない）。
     広げる分は1行の高さから決める。名前が2行に折り返しても、分け方の行には重ならない（1lh を知らないブラウザは前の形） */
  body.is-chat .cv .chat-bar-who .chat-who {
    min-height: var(--tap);
    margin-block: -10px;
    min-height: calc(0 * 1lh);
    padding-block: calc((var(--tap) - 1lh) / 2);
    margin-block: calc((1lh - var(--tap)) / 2);
  }
  body.is-chat .cv .chat-group {
    font-size: var(--fs-tag);
    line-height: var(--lh-tag);
  }
  body.is-chat .cv .chat-group .term-en {
    display: none;
  }

  /* スマホの帯では、保存も「気になる言葉」と同じ文字のリンクにそろえる。 */

  body.is-chat .cv .chat-bar .portrait {
    width: 2rem;
    height: 2rem;
  }
  body.is-chat .cv .chat-who-h {
    font-size: var(--fs-lead);
  }

  body.is-chat .cv .chat-thread {
    padding: var(--space-4) 0 var(--space-2);
  }
  body.is-chat .cv .chat-dock {
    padding: 0.375rem 0 max(0.375rem, env(safe-area-inset-bottom));
  }
  body.is-chat .cv .message.user {
    max-width: 88%;
  }
  body.is-chat .cv .hint-label {
    display: none;
  }
  body.is-chat .cv .stance-hint {
    margin-bottom: var(--space-2);
  }
  body.is-chat .cv .composer textarea {
    max-height: 7rem;
  }
  body.is-chat .cv .conversation-empty h2 {
    font-size: var(--fs-title);
  }
}

@media (hover: none) {
  body.is-chat .cv .hint-q:hover {
    background: none;
  }
}
@media (max-width: 700px) {
  body.is-chat .cv .hint-q {
    padding-left: var(--space-4);
    font-size: var(--fs-note);
  }
  body.is-chat .cv .hint-wait {
    font-size: var(--fs-note);
  }

}
@media (max-width: 420px) {
  body.is-chat .cv .conversation-empty h2 {
    font-size: var(--fs-lead);
  }
}
body.is-chat .cv .stance-hint {
  flex-wrap: nowrap;
}
dialog:has(.learn-from) {
  max-width: 38rem;
}

/* スマホ・狭い画面：次の一歩（打ち手を考える）は、質問欄の下にいつも見える帯で。気になる言葉を開いたときは、その欄のいちばん上に。
   対話のファイルは、帯ではなく気になる言葉の欄の終わりに置く（帯は名前と「気になる言葉」だけ）。 */
/* 対話の帯は「戻る・名前・三つの場所」だけ。対話のファイルは、右の欄（スマホでは気になる言葉の欄）の終わりに。 */
body.is-chat .cv .dock-next {
  display: none;
}
body.is-chat .cv .side-save {
  margin: var(--space-5) 0 0;
}

@media (max-width: 1000px) {
  body.is-chat .cv .dock-next {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-2);
  }
  body.is-chat .cv .dock-next {
    flex-wrap: wrap;
  }
  /* 同じ条件の人たちに聞く道（pool.js）：次の一歩の下に、右寄せの一行 */
  body.is-chat .cv .dock-next .dock-many {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin: 0;
  }
  body.is-chat .cv .dock-next .small {
    margin-right: auto;
    word-break: auto-phrase;
  }
  body.is-chat .cv .dock-next .primary {
    white-space: nowrap;
  }

  body.is-chat .cv .head-clues.on {
    color: var(--text);
    font-weight: 600;
  }
}
/* 全員に聞く のあと、「聞きたい人」が横に出ない幅（1280px 未満）では、対話の上に一行で知らせる（chat.js askStripHTML）。
   押すと聞いた人が横に並び、押した人に切り替わる。 */
body.is-chat .cv .ask-strip {
  display: none;
}
@media (max-width: 1279px) {
  body.is-chat .cv .ask-strip {
    display: block;
    flex: none;
    border-bottom: 1px solid var(--line-soft);
  }
}
body.is-chat .cv .ask-strip-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: var(--type-note);
  text-align: left;
  cursor: pointer;
}
body.is-chat .cv .ask-strip-text {
  min-width: 0;
}
body.is-chat .cv .ask-strip-more {
  flex: none;
  color: var(--fill-text);
  white-space: nowrap;
}
/* 知らせが1行に入らないときだけ（fit.js）、「人を選ぶ」の字を読み上げだけに残し、印だけを出す。 */
body.is-chat .cv .ask-strip-line.fit-short .ask-strip-word {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
body.is-chat .cv .ask-strip .ask-band {
  overflow-x: auto;
  padding: 0 0 var(--space-2);
}
body.is-chat .cv .ask-strip .ask-band h2 {
  display: none;
}
body.is-chat .cv .ask-strip .ask-band ul {
  grid-auto-flow: column;
  grid-auto-columns: max-content;
}
/* 全員に聞く のあと、「聞きたい人」の名前の下に、答えが届いたかを小さく。 */
.ask-band-p > span {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
}
.ask-band-mark,
.ask-band-wait,
.ask-band-failed {
  font-size: var(--fs-tag);
  line-height: 1.4;
  color: var(--text-muted);
}
.ask-band-mark {
  color: var(--fill-text);
}
/* スマホ（縦）：三つの場所（対話｜片づけたい用事｜打ち手を考える）は、帯の二段目に（品質確認 2026-10-10：出ていなかった）。
   「←」は押せる幅を44pxに。 */
/* 帯の幅：広い画面（1280px 以上）は、戻る道の字・分け方・保存の状態まで。狭くなるほど、言葉の短いほうへ。
   対話のファイルは、1000px 以下では帯ではなく気になる言葉の欄の終わりに（chat.js sideSaveHTML）。 */
/* 対話の帯に保存は置かない（右の欄、スマホでは気になる言葉の欄の終わりに。Claude Design の画面デザイン） */
body.is-chat .cv .chat-bar .work-save {
  display: none;
}
/* 新しい流れ：ファイルに保存は、広い画面では上の帯の右、1000px 以下では気になる言葉の欄の終わり（前の流れと同じ幅の分け方）。
   どの幅でも見える入口は一つ（斉藤さん 2026-10-25「下の方のこれは必要なの？」）。帯の保存を隠したままだと、どこからも保存できなかった
   （C1 2026-10-28） */
@media (min-width: 1001px) {
  html[data-top='new'] body.is-chat .cv .chat-bar .work-save {
    display: flex;
  }
  html[data-top='new'] body.is-chat .cv .chat-side .side-save {
    display: none;
  }
}
@media (max-width: 1000px) {
  body.is-chat .cv .chat-bar .nav-back-word {
    display: none;
  }
}
/* 高さの低い画面（スマホの横向き、キーボードが出たとき）：頭のメニューをしまい、質問のヒントは一行、質問欄は一段にして、
   会話を読む場所を残す（品質確認 2026-10-10：会話の欄が48pxしかなかった）。打ち手を考えるは帯の三つの場所から。
   キーボードで見える高さが縮む電話でも、同じ形になる（次の一歩と注意書きをしまう）。 */
@media (max-height: 560px) and (max-width: 1000px) {
  body.is-chat > .header {
    display: none;
  }
  body.is-chat .cv .chat-bar .work-bar-start,
  body.is-chat .cv .chat-bar .work-bar-end {
    min-height: 3rem;
  }
  body.is-chat .cv .stance-hint {
    margin-bottom: var(--space-2);
  }
  body.is-chat .cv .hint-label {
    display: none;
  }
  body.is-chat .cv .stance-hint .hint-q {
    min-height: 2.75rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  body.is-chat .cv .composer-box {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: 'a t l s';
    align-items: center;
    padding: var(--space-1) var(--space-2);
  }
  body.is-chat .cv .composer textarea {
    min-height: 2.75rem;
    max-height: 5.5rem;
    padding: var(--space-2) var(--space-1) 0;
  }
  body.is-chat .cv .dock-next,
  body.is-chat .cv .chat-caution {
    display: none;
  }
  body.is-chat .cv .chat-dock {
    padding-top: var(--space-1);
  }
}
/* とても低いとき（キーボードが出た電話・タブレットの横向き、低い窓）は、書いているあいだ、頭のメニュー、質問欄より上の
   ヒントと三つの場所もしまう。幅によらず、見える高さで決める（PR #192 の確認 2026-10-11：1024×400 では帯とメニューが
   残り、会話の欄が58px）。質問欄より下のもの（次の一歩）は、書く・押すで出入りさせない（押す指の下で「全員に聞く」が
   ずれるため）。
   iPhone の Safari などはキーボードが出てもページの高さが縮まないので、chat.js watchKeyboard が見えている高さ
   （visualViewport）を見て body に chat-low・chat-kbd を付ける。高さの条件（@media）は、それが使えないブラウザの予備。 */
@media (max-height: 420px) {
  body.is-chat:has(#message:focus) > .header,
  body.is-chat .cv:has(#message:focus) .stance-hint,
  body.is-chat .cv:has(#message:focus) .chat-bar .journey-steps,
  body.is-chat .cv:has(#message:focus) .trial-band {
    display: none;
  }
}
/* お試しの登録の案内（trial.js trial-band）も、書いているあいだだけしまう（残りの回数の一行は残す。C1 2026-10-28：本番の形の
   お試しで、1440×400 の会話が101px、1024×768 にキーボード400px で69px しか見えなかった） */
body.is-chat.chat-low > .header,
body.is-chat.chat-low .cv .stance-hint,
body.is-chat.chat-low .cv .chat-bar .journey-steps,
body.is-chat.chat-low .cv .trial-band {
  display: none;
}
/* キーボードが出ているあいだは、画面を見えている部分の高さにそろえる（質問欄がキーボードの下に隠れず、しまったぶんが
   会話の欄に回る）。 */
body.is-chat.chat-kbd {
  height: var(--chat-room, 100dvh);
  translate: 0 var(--chat-room-top, 0px);
}
/* 見える高さが低いあいだ（chat-low）は、質問欄を一段にし、次の一歩と注意書きをしまう（iPhone SE の 375×667 にキーボード300pxでは、
   残すと会話の欄が102pxだった）。新しい流れの質問欄は広い幅でも二段（書く欄の下に「全員に聞く」と送る）なので、幅によらず
   （C1 2026-10-28：1024×400 で会話が110px、iPad 横向き 1024×768 にキーボード400pxで123px だった） */
body.is-chat.chat-low .cv .composer-box {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: 'a t l s';
  align-items: center;
  padding: var(--space-1) var(--space-2);
}
body.is-chat.chat-low .cv .composer textarea {
  min-height: 2.75rem;
  max-height: 5.5rem;
  padding: var(--space-2) var(--space-1) 0;
}
body.is-chat.chat-low .cv .dock-next,
body.is-chat.chat-low .cv .chat-caution {
  display: none;
}
body.is-chat.chat-low .cv .chat-dock {
  padding-top: var(--space-1);
}
/* スマホで書いているあいだ（chat-low）は、会話と書く欄に高さと幅を回す（iPhone SE にキーボードでは、名前と分け方が二行ずつに
   折れて帯が85px、書く欄は一段で「全員に聞く」と送るに挟まれて123px 幅になり、案内も書いた字も6字ずつ折れ、会話の欄は67pxだった。
   E 2026-10-28）。
   書き終えて質問欄を離れると、どれも戻る。
   - 話している人の帯は一行：名前と分け方（どの種類の人に聞いているかは、書いているときこそ要る）。「←」と顔（会話の中にも出る）と
     「気になる言葉」はしまう
   - 書く欄は幅いっぱいの二段（下）*/
@media (max-width: 700px) {
  body.is-chat.chat-low .cv .chat-back,
  body.is-chat.chat-low .cv .chat-bar .portrait,
  body.is-chat.chat-low .cv .chat-bar .work-bar-end {
    display: none;
  }
  /* 帯の高さは、名前を押せる高さ（44px）だけ。上の余白（しまったヘッダーとのあいだ）も詰める */
  body.is-chat.chat-low .cv {
    margin-top: 0;
  }
  body.is-chat.chat-low .cv .chat-bar .work-bar,
  body.is-chat.chat-low .cv .chat-bar .work-bar-start {
    min-height: var(--tap);
  }
  /* 会話の終わり（最後の答えと「気になる」）が欄の下の端に来るように、最後の発言の下の余白を詰める（saito-review 2026-10-29：
     最後の答えの下に約40px の空白が残り、答えの行が帯の線で切れていた） */
  body.is-chat.chat-low .cv .chat-thread {
    padding-bottom: 0;
  }
  body.is-chat.chat-low .cv .chat-thread > :last-child {
    margin-bottom: var(--space-1);
  }
  /* 名前と分け方は、それぞれ切らずに一行で。並んで入らない長さなら、分け方は名前の下へ */
  body.is-chat.chat-low .cv .chat-bar-who {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
  }
  body.is-chat.chat-low .cv .chat-bar-who > * {
    white-space: nowrap;
  }
  /* 書く欄は、キーボードの前と同じ二段（書く欄の下に「全員に聞く」と送る。押す所が欄を押したときに動かず、会話の中の文字だけの
     ボタンとも欄の枠で分かれる。saito-review 2026-10-29）。詰めるのは余白と行の高さだけ。伸びる上限は chat.js watchKeyboard が
     見える高さから決める（会話の欄を残せる行数まで。そこから先は欄の中で送る） */
  body.is-chat.chat-low .cv .composer-box {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 't t t' 'a l s';
    align-items: center;
    gap: 0 var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-1) var(--space-4);
  }
  /* 欄の中で送るときに上の行が余白にのぞかないよう、欄の上の余白は枠の側に持たせる */
  body.is-chat.chat-low .cv .composer textarea {
    min-height: 0;
    line-height: 1.5;
    padding-top: 0;
  }
}
/* スマホ（縦）：質問のヒントは二行まで（押すと全文が質問欄に入る）。会話を読む場所を削らない。 */
@media (max-width: 700px) {
  body.is-chat .cv .stance-hint .hint-q {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.5;
    /* 上下の余白は透明な枠で（余白に三行目がのぞかないように）。 */
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0.5rem solid transparent;
    border-bottom: 0.5rem solid transparent;
  }
}
/* 改善した企画（右の欄、スマホでは「気になる言葉」の欄）：書く欄と、その下の「AIの案を見る」。案は欄の下に三つ並び、
   押すと欄に入る（chat.js planIdeasHTML）。選んだ案は淡い面と紺の枠。 */
body.is-chat .cv .job-side #job-plan {
  display: block;
  min-height: 6.5rem;
  font-size: var(--fs-body);
  line-height: 1.7;
  word-break: normal;
  resize: vertical;
}
body.is-chat .cv .plan-ideas {
  margin: 0;
}
body.is-chat .cv .plan-ideas-wait {
  margin: var(--space-1) 0 0;
}
body.is-chat .cv .plan-ideas .flow-error {
  margin: var(--space-1) 0 0;
  font-size: var(--type-note);
}
body.is-chat .cv .plan-ideas-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}
body.is-chat .cv .plan-idea {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  text-align: left;
}
body.is-chat .cv .plan-idea b {
  display: block;
  font-size: var(--fs-note);
  font-weight: 600;
  line-height: 1.5;
}
body.is-chat .cv .plan-idea span {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--fs-note);
  line-height: 1.7;
  color: var(--text-muted);
}
body.is-chat .cv .plan-idea:hover {
  border-color: var(--fill-text);
  background: var(--surface-quiet);
}
/* 選んだ案は、紺の塗りに白い字（選んだ印の決まり。指を置いたままでも字が消えない） */
body.is-chat .cv .plan-idea.on,
body.is-chat .cv .plan-idea.on:hover {
  border-color: var(--fill);
  background: var(--fill);
  color: var(--on-fill);
}
body.is-chat .cv .plan-idea.on b,
body.is-chat .cv .plan-idea.on span {
  color: var(--on-fill);
}
/* 置き換える前の確かめ（小窓）：いま書いてある企画を、そのまま見せる。 */
.plan-replace-was {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--line-strong);
  background: var(--surface-quiet);
  white-space: pre-wrap;
  max-height: 12rem;
  overflow-y: auto;
}
.plan-replace-actions {
  justify-content: flex-end;
}
/* 広い画面：案を開いて右の欄が長くなっても、主役（レポートにまとめる）は欄の下に見えたまま。 */
@media (min-width: 1001px) {
  body.is-chat .cv .job-side .analysis-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-bottom: 0;
    padding: var(--space-3) 0 var(--space-4);
    background: var(--surface);
  }
  /* 欄の下の余白は欄の中に持たせる（外の余白があると、貼り付いた主役の下に案の字がのぞく）。 */
  body.is-chat .cv .chat-side:has(.job-side) {
    padding-bottom: 0;
  }
  body.is-chat .cv .job-side .side-save {
    margin-bottom: var(--space-4);
  }
}
/* 主役が欄の最後になる幅（1280px 未満、上の並び）では、ファイルの下の余白は主役の段の上の線までに任せる。 */
@media (min-width: 1001px) and (max-width: 1279px) {
  body.is-chat .cv .job-side .side-save {
    margin-bottom: 0;
  }
}
/* 右の欄を読みやすく（斉藤さん 2026-10-10「右の欄のデザインが見にくい」）。
   - 区切り：欄の中を「話した相手」「はじめの企画」「気になる言葉」「改善した企画」の段に分け、段の頭に細い線と同じ形の見出し。
   - 主役の段：改善した企画は、書く場所だと分かる白い欄（角を丸め、淡い線）に。見出しは本文の色で、ほかの段より一段強く。
   - 案：題と本文の差をはっきり、間を詰めすぎない。
   - 貼り付いた主役の上に淡い線を引き、下を流れる案と重なって見えないように。 */
body.is-chat .cv .job-side > h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--track-head);
  color: var(--text);
}
/* 段の見出し（はじめの企画・気になる言葉・改善した企画）は、同じ形・同じ大きさ（欄の名前の段）。
   書く場所の改善した企画だけ、字を本文の色に。 */
body.is-chat .cv .job-side h3 {
  margin: var(--space-5) 0 var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-note);
  font-weight: 400;
  line-height: var(--lh-note);
  letter-spacing: 0;
  color: var(--text-muted);
}
body.is-chat .cv .job-side .job-product {
  font-size: var(--fs-body);
  line-height: var(--lh-lead);
  color: var(--text);
}
body.is-chat .cv .job-side .clue-empty {
  margin: 0;
  font-size: var(--fs-note);
  line-height: var(--lh-note);
}
/* 書く場所の「改善した企画」だけ、小見出しの段（17px・600） */
body.is-chat .cv .job-side h3:has(label[for='job-plan']) {
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: var(--lh-title);
  color: var(--text);
}
body.is-chat .cv .job-side #job-plan {
  min-height: 7.5rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}
/* 欄の外に出る outline は、右の欄の端で切れる。枠の内側に2本目の線を引いて、同じ太さに見せる。 */
body.is-chat .cv .job-side #job-plan:focus-visible {
  outline: 0;
  border-color: var(--focus);
  box-shadow: inset 0 0 0 1px var(--focus);
}
body.is-chat .cv .job-side #job-plan::placeholder {
  color: var(--text-faint);
}
/* 「AIの案を見る」は欄のすぐ下、左を欄の左にそろえる（押せる範囲の余白は上に食い込ませる） */
body.is-chat .cv .plan-ideas > .small-button {
  margin: var(--space-1) 0 0;
}
body.is-chat .cv .plan-ideas-list {
  gap: var(--space-2);
  margin-top: var(--space-2);
}
body.is-chat .cv .plan-idea {
  padding: var(--space-3) var(--space-4);
  border-color: var(--line);
  border-radius: var(--radius-card);
}
body.is-chat .cv .plan-idea b {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-title);
}
body.is-chat .cv .plan-idea span {
  margin-top: var(--space-1);
  font-size: var(--fs-note);
  line-height: var(--lh-note);
}
body.is-chat .cv .plan-idea:hover,
body.is-chat .cv .plan-idea.on {
  border-color: var(--fill);
  background: var(--chosen-bg);
}
body.is-chat .cv .plan-idea.on b {
  color: var(--fill);
}
/* 主役（打ち手を考える／レポートにまとめる）の段。右の欄の終わりに、全幅で */
body.is-chat .cv .job-side .analysis-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
}
body.is-chat .cv .job-side .analysis-bottom .primary {
  width: 100%;
}
/* 詳しく知りたい人へ：小さい字の見出しと、小さい脇役のボタン（ジョブ理論で整理する） */
body.is-chat .cv .job-side .deeper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-top: var(--space-6);
  font-size: var(--fs-note);
  color: var(--text-muted);
}
body.is-chat .cv .job-side .deeper > span {
  line-height: var(--lh-note);
}

/* 押したあとの「気になる ✓」：選んだものの面と紺の枠 */
body.is-chat .cv .keep-word[data-action='unkeep-word']::before {
  background: var(--chosen-bg);
  border-color: var(--fill);
}
/* 気になる言葉：言葉は本文の字で、左に細い線。項目と項目の間だけに線を引く（段の区切りの線と二重にしない） */
body.is-chat .cv .job-side .job-notes li {
  padding: 0 0 var(--space-3);
}
body.is-chat .cv .job-side .job-notes li + li {
  padding-top: var(--space-3);
}
body.is-chat .cv .job-side .job-notes li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
body.is-chat .cv .job-side .clue-word {
  min-height: 0;
  margin: 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  font-size: var(--fs-body);
  line-height: var(--lh-lead);
  color: var(--text);
}
body.is-chat .cv .job-side .note-comment {
  margin-top: var(--space-2);
  font-size: var(--fs-note);
}

/* 対話の横の「聞けたこと」（public/js/talk-checks.js、斉藤さん 2026-10-24）。そろったら次へのボタンが金色（tc-go）、対話の中に一言。
   金と紺は kosei.css の名前（新しい流れのとき）。古い流れには同じ値を予備に */
.talk-checks { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.chat-side .talk-checks h3 { margin: 0 0 var(--space-2); padding: 0; border: 0; font-size: var(--fs-note); display: flex; align-items: baseline; gap: var(--space-2); }
.talk-checks h3 span { color: var(--text-muted); font-weight: 400; font-size: var(--fs-tag); }
.talk-checks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.talk-checks li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-note); color: var(--text-muted); }
.talk-checks li.on { color: var(--text); }
.tc-mark { flex: none; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1.5px solid var(--line-strong); font-size: 0.75rem; font-weight: 700; }
.talk-checks li.on .tc-mark { background: var(--gold, #f2c14e); border-color: var(--gold, #f2c14e); color: var(--brand-12); }
.tc-note { margin: var(--space-2) 0 0; }
.talk-checks.ready { border-color: var(--gold, #f2c14e); }
/* そろったときの主役は、形は parts.css の主役のまま、塗りだけ金に紺の字 */
.chat-side .primary.tc-go, .dock-next .primary.tc-go { background: var(--gold, #f2c14e); color: var(--brand-12) !important; border-color: var(--gold, #f2c14e); }
@media (hover: hover) {
  .chat-side .primary.tc-go:hover:not(:disabled), .dock-next .primary.tc-go:hover:not(:disabled) { background: var(--gold-hover, #e6b43c); border-color: var(--gold-hover, #e6b43c); }
}
/* 対話の中の一言：白い地に金の線（色の面を足さない） */
.talk-ready { margin: var(--space-4) auto; max-width: 34rem; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--gold, #f2c14e); color: var(--brand-12); text-align: center; font-size: var(--fs-note); word-break: auto-phrase; }

/* 聞きたい人：名前の下にどの立場で選んだ人か、マウスを合わせると紹介（chat.js showAskPeek、斉藤さん 2026-10-24） */
body.is-chat .cv .ask-band-kind { display: block; font-size: 0.75rem; font-weight: 400; color: var(--text-mark); line-height: 1.4; }
.ask-peek { position: fixed; z-index: 60; display: none; gap: 12px; width: 320px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 10px 30px rgba(10, 18, 36, .18); pointer-events: none; }
.ask-peek.on { display: flex; }
.ask-peek .portrait { width: 56px; height: 56px; border-radius: 50%; flex: none; object-fit: cover; }
.ask-peek p { margin: 0; }
.ask-peek-name { font-size: 15px; font-weight: 700; }
.ask-peek-kind { font-size: 0.75rem; color: var(--text-mark); margin-top: 2px !important; }
.ask-peek-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px !important; }
.ask-peek-sum { font-size: 0.8125rem; line-height: 1.7; margin-top: 6px !important; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
body.is-chat .cv .talking-profile { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line-soft); }
body.is-chat .cv .talking-profile h3 { margin: 0 0 4px; font-size: var(--fs-note); }
body.is-chat .cv .talking-profile p { margin: 2px 0 0; }
body.is-chat .cv .talking-profile .ask-peek-sum { -webkit-line-clamp: unset; display: block; }
body.is-chat .cv .talking-profile .ask-peek-sum p { font-size: 0.8125rem; line-height: 1.7; margin-top: 6px; }
body.is-chat .cv .talking-profile .small-button { margin-top: 10px; }
.ask-peek-sum p { margin: 0; }

/* 新しい流れの右の欄（chat.js questSideHTML）。道のりは上の紺の帯（band.js）にあるので、ここは
   進み具合の線・聞けたこと・話を聞いた人・次へのボタンを一枚のカードに。見出しは紺、カードは全ページと同じ角と線 */
/* 見出しの決まり（統括 2026-10-25）：h3 はゴシック 15px・700・紺 */
body.is-chat .cv .quest-side h3 { margin: 0 0 6px; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0; color: var(--brand-12); border-top: 0; padding-top: 0; }
/* 本文の h2 は明朝 800・21px・紺、左に金の細い縦線（作戦の画面と同じ形） */
html[data-top='new'] body.is-chat .cv .conversation-empty h2 { padding-left: 12px; border-left: 3px solid var(--gold); font-family: var(--font-mincho); font-size: 1.3125rem; font-weight: 800; line-height: 1.4; color: var(--brand-12); }
body.is-chat .cv .quest-card { margin-top: 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
body.is-chat .cv .quest-bar { height: 6px; margin: 0 0 var(--space-3); border-radius: 99px; background: var(--line-soft); overflow: hidden; }
body.is-chat .cv .quest-bar span { display: block; height: 100%; min-width: 6px; border-radius: 99px; background: var(--gold); transition: width .6s ease; }
body.is-chat .cv .quest-card .talk-checks { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
body.is-chat .cv .quest-card .quest-go { width: 100%; margin-top: var(--space-3); }
body.is-chat .cv .quest-card .small-button { margin-top: var(--space-2); }
body.is-chat .cv .quest-memo, body.is-chat .cv .quest-words, body.is-chat .cv .quest-first { margin-top: var(--space-5); }
body.is-chat .cv .quest-memo textarea { width: 100%; }
/* 書く欄は入力欄の角（ボタンの丸ではなく）、見出しはほかの h3 と同じ大きさ */
html[data-top='new'] body.is-chat .cv .job-side #job-plan { border-color: var(--line); border-radius: var(--radius-field); font-size: var(--fs-body); }
html[data-top='new'] body.is-chat .cv .quest-side h3:has(label[for='job-plan']) { font-size: 0.9375rem; font-weight: 700; color: var(--brand-12); }
body.is-chat .cv .quest-memo p { margin: 0 0 6px; line-height: 1.6; word-break: auto-phrase; }
body.is-chat .cv .quest-side .talking-profile h3 { color: var(--brand-12); }
body.is-chat .cv .ask-band-talked { display: inline-block; margin-left: 6px; padding: 0 6px; font-style: normal; font-size: 0.75rem; font-weight: 700; line-height: 1.6; color: var(--brand-12); background: var(--gold, #f2c14e); border-radius: 99px; vertical-align: 1px; }
body.is-chat .cv .ask-band-p .ask-band-talked { display: inline-block; width: auto; align-self: flex-start; margin: 2px 0 0; }
/* 送るボタン（新しい流れ）：金の丸に紺の太い矢印。字を書くまでは淡く */
html[data-top='new'] body.is-chat .cv .composer button { width: 2.9rem; height: 2.9rem; background: var(--gold); color: var(--brand-12); box-shadow: 0 4px 12px rgba(154, 116, 19, .28); transition: transform .15s ease, box-shadow .15s ease; }
html[data-top='new'] body.is-chat .cv .composer button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(154, 116, 19, .35); }
html[data-top='new'] body.is-chat .cv .composer:not(:has(textarea:not(:placeholder-shown))) button { background: var(--surface-quiet); color: var(--text-muted); box-shadow: none; }
html[data-top='new'] body.is-chat .cv .composer button:disabled { opacity: .5; }
.chat-side .talk-checks .tc-people { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); font-size: var(--fs-note); }
.chat-side .talk-checks .tc-people b { font-weight: 700; color: var(--brand-12); }
.chat-side .talk-checks .tc-people span { font-weight: 800; color: var(--text-mark); }
.chat-side .talk-checks .tc-why { margin: 2px 0 0; font-size: 0.75rem; line-height: 1.6; word-break: auto-phrase; }

/* 新しい流れの対話：白いヘッダー → 紺の帯（band.js）→ 話している人の段 → 対話。帯は画面の高さを分け合う列の一つ
   （body.is-chat #main は縦に並べる箱で、上の余白が 0）。帯の上下に余白を足さない（帯の下が白く空いていた） */
html[data-top='new'] body.is-chat .page-band { flex: none; margin-top: 0; margin-bottom: 0; }
/* 上の切り替えと「← 6人の第一印象」は、帯の道のりと同じことなので出さない（狭い画面は道のりの名前が隠れるので戻る道を残す）。
   帯に道のりがあるのは企画の対話（has-people）だけ：一人との対話では、上の切り替え（対話｜本当にしたいこと）が、作った整理へ
   AI を呼ばずに戻るただ一つの道なので残す（隠すと「ジョブ理論で整理し直す」しかなく、作り直していた。C1 2026-10-28） */
html[data-top='new'] body.is-chat .cv.has-people .work-bar:not(.journey-nav) .journey-steps { display: none; }
@media (min-width: 901px) {
  html[data-top='new'] body.is-chat .cv .chat-bar .chat-back { display: none; }
}
/* キーボードが出ているとき・低い画面では、ヘッダーと同じく帯もしまう（質問欄と会話を見せる） */
body.is-chat.chat-low .page-band { display: none; }
@media (max-height: 420px) {
  body.is-chat:has(#message:focus) .page-band { display: none; }
}
/* スマホの対話は会話の高さがいちばん大事：帯の一行の説明はしまう（見出しと道のりは残す） */
@media (max-width: 700px) {
  html[data-top='new'] body.is-chat .page-band-lead { display: none; }
}
/* 聞きたい人の列：分け方（「使いにくい事情がある人」）が12pxで1行に収まる幅に */
@media (min-width: 1280px) {
  html[data-top='new'] body.is-chat .cv.has-people { grid-template-columns: 14.5rem minmax(0, 1fr) 17rem; }
}
/* 人の種類の呼び名は、どの画面でも濃い金（第一印象のカード・聞きたい人の一覧と同じ）。英語名は小さく薄く添えるだけ */
html[data-top='new'] body.is-chat .cv .chat-group-ja,
html[data-top='new'] body.is-chat .cv .stance-name { color: var(--text-mark); font-weight: 600; }
html[data-top='new'] body.is-chat .cv .chat-group .term-en { font-size: 0.75rem; color: var(--text-faint); }

.talk-checks .tc-asks { margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }