@charset "UTF-8";
/* ==========================================================================
   デモ3「取引スキーム図の自動生成」（demo03.js）
   共通の見た目は pages/demo.css（チャット・解説パネル・図の枠 .lab-demo-diagram・タブ .lab-demo-tabs）。ここはデモ3だけの部品
   推測の強調：negative-red ＋ bg-3 の面（コンポーネントシート 05 のネガティブなマーカー）。
             責任分界の4区分の濃淡（bg-1／bg-2／navy／ink）とは別の色にして、意味を混同させない（仕様書 7章）
   図の配色（表示時の classDef）：当社＝navy の塗り＋白文字／相手方＝bg-2＋navy の線／第三者＝白＋ink-3 の破線
   ========================================================================== */

/* --------------------------------------------------------------------------
   解説を折りたたむ（1024px以上・図の表示中だけ。チャットを11カラムに広げ、パネルは縦書きの「解説を開く」だけにする）
   -------------------------------------------------------------------------- */
.lab-demo3 {
  & .lab-demo__layout.is-panel-folded > .lab-demo__main {
    grid-column: 1 / span 11;

    @media (max-width: 1023px) {
      grid-column: 1 / -1;
    }
  }

  & .lab-demo-panel.is-folded {
    grid-column: 12 / span 1;
    overflow: visible;

    @media (max-width: 1023px) {
      grid-column: 1 / -1;
    }

    & .lab-demo-panel__body {
      display: none;

      @media (max-width: 1023px) {
        display: none;
      }
    }

    &.is-open .lab-demo-panel__body {
      @media (max-width: 1023px) {
        display: flex;
      }
    }
  }
}

.lab-demo3-fold {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 44px;
  padding: 12px 24px 0;
  border: 0;
  background: transparent;
  font-size: var(--lab-fs-small);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--lab-navy);
  text-align: right;

  @media (max-width: 1023px) {
    display: none;
  }

  & .lab-demo3-fold__label {
    text-decoration: underline;
    text-underline-offset: 6px;
  }

  &:hover .lab-demo3-fold__label {
    text-decoration-thickness: 2px;
  }

  &:focus-visible {
    outline-offset: -2px;
  }

  /* 折りたたんだとき：縦書きの「解説を開く」（パネルの細い面全体を押せる） */
  .lab-demo-panel.is-folded > & {
    justify-content: center;
    min-height: 200px;
    padding: 24px 8px;
    writing-mode: vertical-rl;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   入力欄・ユーザーの発言（相談メールは改行を保つ）
   -------------------------------------------------------------------------- */
.lab-demo3 {
  & .lab-demo-input__draft.lab-demo3-draft--mail,
  & .lab-demo-msg__bubble.lab-demo3-mail {
    white-space: pre-line;
  }
}

/* --------------------------------------------------------------------------
   初回出力（5節）
   -------------------------------------------------------------------------- */
.lab-demo3-msg {
  & .lab-demo-msg__body {
    gap: 32px;

    @media (max-width: 767px) {
      gap: 24px;
    }
  }
}

/* 「AIが推測した部分を見る」（回答の先頭） */
.lab-demo3-guessbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  padding: 4px 16px;
  border-radius: var(--lab-radius-md);
  background: var(--lab-bg-1);

  /* bg-1 の上の小さい文字は紺（デザイントークン 01：青の24px未満の文字は白の上だけ）。共通のトグルは ON・ホバーで青になるため置き換える */
  & .lab-demo-switch[aria-checked="true"] .lab-demo-switch__state,
  & .lab-demo-switch:hover .lab-demo-switch__label {
    color: var(--lab-navy);
  }

  & .lab-demo3-guessbar__lead {
    flex: 1 1 240px;
    padding: 4px 0 8px;
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);

    @media (max-width: 767px) {
      padding-top: 0;
    }
  }
}

.lab-demo3-list {
  display: flex;
  flex-direction: column;
  gap: 8px;

  & .lab-demo3-list__item {
    position: relative;
    padding-left: 20px;
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;

    &::before {
      content: '';
      position: absolute;
      top: .8em;
      left: 4px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--lab-navy);
    }
  }

  & .lab-demo3-list__name {
    font-weight: 700;
  }
}

/* 「※推測」を「※」と「推測」の間で折り返さない（demo03.js の keepGuess）。
   inline のまま折り返しだけを止める（inline-block の .lab-nowrap は、直前の「「」「（」との間で折り返せてしまうため使わない） */
.lab-demo3-keep {
  white-space: nowrap;
}

/* 文中の「※推測」：トグル ON で bg-3＋赤のマーカー（図の強調色と対応させる） */
.lab-demo3-guess {
  padding: 2px 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition:
    background-color var(--lab-dur-fast) var(--lab-ease-out),
    color var(--lab-dur-fast) var(--lab-ease-out);
}

.lab-demo3.is-guess .lab-demo3-guess {
  padding: 2px 4px;
  background: var(--lab-bg-3);
  font-weight: 700;
  color: var(--lab-negative-red);
}

/* パターンA・B のタブ */
.lab-demo3-tabs {
  & .lab-demo3-tab__label {
    font-size: var(--lab-fs-body);
    font-weight: 700;
  }

  & .lab-demo3-tab__title {
    font-size: var(--lab-fs-small);
    line-height: 1.6;
  }
}

/* 違い（パターンA／パターンB） */
.lab-demo3-diff {
  min-width: 0;
  overflow-x: auto;

  & .lab-demo3-diff__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
  }

  & .lab-demo3-diff__caption {
    padding-bottom: 8px;
    font-weight: 700;
    color: var(--lab-ink-2);
    text-align: left;
  }

  & th,
  & td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--lab-line);
    text-align: left;
    vertical-align: top;

    @media (max-width: 767px) {
      padding: 8px;
    }
  }

  & thead th {
    border-bottom: 2px solid var(--lab-navy);
    font-weight: 700;
    color: var(--lab-navy);
  }

  & tbody th {
    width: 28%;
    font-weight: 700;
    color: var(--lab-ink-2);
  }
}

/* 初回出力の下の小さい「相談する」（主の相談ボタンは確定図の下の1つ） */
.lab-demo3-consult-sm {
  display: flex;
  padding-top: 8px;
  border-top: 1px solid var(--lab-line);
}

/* --------------------------------------------------------------------------
   図の凡例・見本（図の下／解説パネルの「図の読み方」）
   -------------------------------------------------------------------------- */
.lab-demo3-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--lab-radius-md);
  background: var(--lab-bg-1);

  & .lab-demo3-legend__title {
    font-size: var(--lab-fs-label);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    color: var(--lab-navy);
  }

  & .lab-demo3-legend__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;

    &.lab-demo3-legend__list--nodes {
      gap: 4px 16px;
    }
  }

  & .lab-demo3-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink);
  }

  & .lab-demo3-legend__note {
    font-size: var(--lab-fs-label);
    line-height: 1.6;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  /* 図を描けなかったとき（代替表示）：色の見本と配色の注記は、画面にない図の説明になるため出さない。
     線の凡例（契約・提供・※推測）は文章の代替が「点線の両矢印」「実線の矢印」と書くため残す */
  .lab-demo-diagram[data-state="error"] & {
    & .lab-demo3-legend__list--nodes,
    & .lab-demo3-legend__note {
      display: none;
    }
  }
}

.lab-demo3-swatch {
  position: relative;
  flex: none;
  display: inline-block;

  /* 契約：点線（両矢印） */
  &.lab-demo3-swatch--contract {
    width: 32px;
    height: 0;
    border-top: 2px dashed var(--lab-ink-2);
  }

  /* 提供：実線の矢印 */
  &.lab-demo3-swatch--flow {
    width: 32px;
    height: 0;
    border-top: 2px solid var(--lab-ink-2);

    &::after {
      content: '';
      position: absolute;
      top: -6px;
      right: -4px;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 8px solid var(--lab-ink-2);
    }
  }

  /* ※推測：ラベルの末尾（トグル ON で強調色） */
  &.lab-demo3-swatch--guess {
    padding: 0 4px;
    border: 1px solid var(--lab-line);
    border-radius: var(--lab-radius-sm);
    background: var(--lab-white);
    font-size: var(--lab-fs-label);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;
    color: var(--lab-ink-2);

    .lab-demo3.is-guess & {
      border-color: var(--lab-bg-3);
      background: var(--lab-bg-3);
      color: var(--lab-negative-red);
    }
  }

  &.lab-demo3-swatch--own,
  &.lab-demo3-swatch--counterparty,
  &.lab-demo3-swatch--third {
    width: 24px;
    height: 16px;
    border-radius: var(--lab-radius-sm);
  }

  &.lab-demo3-swatch--own {
    background: var(--lab-navy);
  }

  &.lab-demo3-swatch--counterparty {
    border: 1px solid var(--lab-navy);
    background: var(--lab-bg-2);
  }

  &.lab-demo3-swatch--third {
    border: 1px dashed var(--lab-ink-3);
    background: var(--lab-white);
  }
}

/* 文章の代替（取引関係の箇条書き） */
.lab-demo3-alt__h {
  font-weight: 700;
}

.lab-demo3-alt__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;

  & > li {
    position: relative;
    padding-left: 16px;

    &::before {
      content: '';
      position: absolute;
      top: .75em;
      left: 2px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--lab-navy);
    }
  }
}

/* --------------------------------------------------------------------------
   事業部への確認メッセージ・佐藤さんの回答
   -------------------------------------------------------------------------- */
.lab-demo3-confirm {
  & .lab-demo3-confirm__doc {
    margin: 0;
    padding: 24px;
    border-radius: var(--lab-radius-md);
    background: var(--lab-bg-1);
    font-family: inherit;
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;

    @media (max-width: 767px) {
      padding: 16px;
    }

    &:focus-visible {
      outline-offset: 2px;
    }
  }
}

/* 返答ボタンの枠（AIの発言ではなく、事業部からの回答を選ぶ場面） */
.lab-demo3-ask {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 32px;
  border: 2px solid var(--lab-navy);
  border-radius: var(--lab-radius-md);

  @media (max-width: 767px) {
    padding: 16px;
  }

  & .lab-demo3-ask__title {
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .08em;
    color: var(--lab-navy);
  }

  & .lab-demo3-ask__lead {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-demo3-ask__quote {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-left: 4px solid var(--lab-navy);
    border-radius: 0 var(--lab-radius-sm) var(--lab-radius-sm) 0;
    background: var(--lab-bg-1);
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
  }

  & .lab-demo3-ask__q {
    font-weight: 700;
  }

  /* 長い選択肢（「当社が受け取り、D社に直接払う（D社とも契約する）」）は2行になるため、高さを文字に合わせる（1行のときは48px のまま） */
  & .lab-demo-reply {
    height: auto;
    min-height: 48px;
    padding-block: 12px;
    white-space: normal;
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   図の書き換え・確定図（確認済み ◯件／書き換えた矢印／まだ確認が必要なこと）
   -------------------------------------------------------------------------- */
.lab-demo3-confirmed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 16px 24px;
  border-radius: var(--lab-radius-md);
  background: var(--lab-bg-2);

  @media (max-width: 767px) {
    padding: 16px;
  }

  & .lab-demo3-confirmed__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--lab-radius-sm);
    background: var(--lab-white);
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    color: var(--lab-navy);
  }

  & .lab-demo3-confirmed__icon {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--lab-navy);

    &::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 5px;
      width: 4px;
      height: 7px;
      border-right: 2px solid var(--lab-white);
      border-bottom: 2px solid var(--lab-white);
      transform: rotate(45deg);
    }
  }

  & .lab-demo3-confirmed__text {
    flex: 1 1 240px;
    min-width: 0;
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink);
  }

  & .lab-demo3-confirmed__total {
    display: block;
    color: var(--lab-navy);
  }
}

.lab-demo3-changes {
  display: flex;
  flex-direction: column;
  gap: 8px;

  & .lab-demo3-changes__item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    column-gap: 12px;
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;

    & .lab-demo-change {
      justify-content: center;
      margin-top: 4px;
    }
  }

  & .lab-demo3-changes__note {
    font-size: var(--lab-fs-small);
    color: var(--lab-ink-2);
  }

  & .lab-demo3-changes__item--removed .lab-demo3-changes__text {
    color: var(--lab-ink-3);
    text-decoration: line-through;
  }
}

.lab-demo3-remaining {
  & .lab-demo3-remaining__list {
    display: flex;
    flex-direction: column;
    gap: 4px;

    & > li {
      position: relative;
      padding-left: 20px;
      font-size: var(--lab-fs-body);
      line-height: 1.85;
      letter-spacing: .04em;

      /* 中抜きの印：まだ分からないこと（デモ2の「確認させてください」と同じ表現） */
      &::before {
        content: '';
        position: absolute;
        top: .7em;
        left: 3px;
        width: 8px;
        height: 8px;
        border: 1px solid var(--lab-navy);
        border-radius: 50%;
        background: var(--lab-white);
      }
    }
  }
}

/* --------------------------------------------------------------------------
   解説パネル（図の読み方・推測の一言・確定図の契約・見落としの候補・プロンプトの要点）
   -------------------------------------------------------------------------- */
.lab-demo3-guide__lead,
.lab-demo3-prompt__lead {
  font-size: var(--lab-fs-body);
  line-height: 1.85;
  letter-spacing: .04em;
}

.lab-demo3-guide {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  border-radius: var(--lab-radius-md);
  background: var(--lab-white);

  @media (max-width: 767px) {
    padding: 0 12px;
  }

  /* 解説パネルは狭い（5／12カラム）ため、どの幅でも1列（見本＋用語の下に説明） */
  & .lab-demo3-guide__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--lab-line);

    &:last-child {
      border-bottom: 0;
    }
  }

  & .lab-demo3-guide__term {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
  }

  & .lab-demo3-guide__desc {
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink);
  }
}

.lab-demo-now {
  & .lab-demo3-now-guess {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--lab-line);
  }

  & .lab-demo3-now-guess__label {
    align-self: flex-start;
    padding: 2px 4px;
    background: var(--lab-bg-3);
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.6;
    color: var(--lab-negative-red);
  }
}

.lab-demo3-contracts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--lab-line);

  & .lab-demo3-contracts__title {
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-navy);
  }

  & .lab-demo3-contracts__list > li {
    position: relative;
    padding-left: 32px;
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;

    /* 契約の線（点線）の見本 */
    &::before {
      content: '';
      position: absolute;
      top: .9em;
      left: 2px;
      width: 20px;
      border-top: 2px dashed var(--lab-ink-2);
    }
  }
}

/* 見落としの候補（［仮］）：パネルの淡色面の上は紺、赤は bg-3 のカードの中だけ */
.lab-demo3-provisional-note {
  padding: 8px 12px;
  border-left: 4px solid var(--lab-navy);
  background: var(--lab-white);
  font-size: var(--lab-fs-small);
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--lab-ink);
}

.lab-demo3-miss {
  & .lab-demo3-miss__title {
    font-size: var(--lab-fs-body);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
  }
}