/* ===========================================================================
   dpg-t-monologue.css — 2026-10-29 区間T11 担当H1「独り言の解決」（本人だけに見える 't-monologue'。dpg-t-monologue.js が描く）
   index.html の最後の CSS（dpg-t-steps.css）の後に読む。札が無い時は .dpg-mono が1つも無いので、何も変わらない。
   置き場所: 「わからないときは」の段（.qz-help。container-type: inline-size）の中の最後。スマホは結論のカードの中、PC の2列は右の列。
   色・角丸・余白・字の大きさはトークン（design/dpg/00-tokens.css・dpg-guide.css の :root）だけ。新しい色は作らない。
   地は今のクリーム（--surface-2）。紫は問題集の中の操作（［聞いてみる］［メモに残す］の字）だけ。赤と緑は使わない。
   押す所は 44px 以上（--g-hit 48px）。待つ間の点の動きは、動きを減らす設定では止める（下の @media）。
   =========================================================================== */
:root .qz-app .dpg-mono {
  display: grid;
  gap: var(--g-s1);
  min-width: 0;
  margin: 0;
  padding: var(--g-s1) var(--g-s1) var(--g-s1) var(--g-s2);
  border-radius: var(--g-radius-btn);
  background: var(--surface-2);
  color: var(--text);
}
:root .qz-app .dpg-mono__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--g-s1);
  min-width: 0;
}

/* 独り言の2行（長い時は押すと全部） */
:root .qz-app .dpg-mono__said {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--g-fs-small);
  line-height: 1.6;
  text-align: left;
  overflow-wrap: anywhere;
}
:root .qz-app button.dpg-mono__said { min-height: var(--g-hit); cursor: pointer; -webkit-tap-highlight-color: transparent; }
:root .qz-app button.dpg-mono__said:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
:root .qz-app .dpg-mono[data-open="1"] .dpg-mono__said { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
/* 開いた時は独り言を全幅に（ボタンは下の右へ）。長い時は終わりの300字だけ（dpg-t-monologue.js）。直し H1 小5 */
:root .qz-app .dpg-mono[data-open="1"] .dpg-mono__row { grid-template-columns: minmax(0, 1fr); }
:root .qz-app .dpg-mono[data-open="1"] .dpg-mono__act { justify-self: end; }
:root .qz-app .dpg-mono__label { margin-right: 0.4em; color: var(--text-2); font-weight: 800; }

/* ［聞いてみる］［メモに残す］: 2番手のボタン（白地・控えめなふち・紫の字）。わからないときはの面と同じ角 */
:root .qz-app .dpg-mono__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--g-hit);
  min-height: var(--g-hit);
  margin: 0;
  padding: 0 var(--g-s1);
  border: 1.5px solid var(--control-border);
  border-radius: var(--g-radius-btn);
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: var(--g-fs-small);
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:root .qz-app .dpg-mono__act:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
:root .qz-app .dpg-mono__act[aria-disabled="true"] { color: var(--text-2); cursor: default; }
@media (hover: hover) {
  :root .qz-app .dpg-mono__act:not([aria-disabled="true"]):hover { background: var(--accent-soft); }
}
:root .qz-app .dpg-mono__face {
  flex: none;
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
:root .qz-app .dpg-mono__face--btn { width: 24px; height: 24px; }

/* ドパガキくんの返事（2〜3行）・知らせの1行。顔は文の頭に小さく並べ、2行目からは全幅（行を増やさない） */
:root .qz-app .dpg-mono__reply { display: block; min-width: 0; }
:root .qz-app .dpg-mono__reply[data-kind="idle"] { display: none; }
:root .qz-app .dpg-mono__reply-text > .dpg-mono__face { display: inline-block; margin: 0 6px 0 0; vertical-align: middle; }
:root .qz-app .dpg-mono__reply-text,
:root .qz-app .dpg-mono__note {
  min-width: 0;
  margin: 0;
  font-size: var(--g-fs-small);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
:root .qz-app .dpg-mono__reply-text { color: var(--text); }
:root .qz-app .dpg-mono__reply-text--wait { color: var(--text-2); }
:root .qz-app .dpg-mono__note { color: var(--text-2); }
:root .qz-app .dpg-mono__left { color: var(--text-2); }
:root .qz-app .dpg-mono__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--g-hit);
  color: var(--accent);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
:root .qz-app .dpg-mono__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* 待つ間の3つの点（動きを減らす設定では、薄い点のまま止める） */
:root .qz-app .dpg-mono__dots { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
:root .qz-app .dpg-mono__dots > span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.45; }
@media (prefers-reduced-motion: no-preference) {
  :root .qz-app .dpg-mono__dots > span { animation: dpg-mono-dot 1.2s ease-in-out infinite; }
  :root .qz-app .dpg-mono__dots > span:nth-child(2) { animation-delay: 0.2s; }
  :root .qz-app .dpg-mono__dots > span:nth-child(3) { animation-delay: 0.4s; }
}
@keyframes dpg-mono-dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* 段の幅が 240px 未満（200% 拡大の約 187px）: ボタンを独り言の下に全幅で */
@container (max-width: 239.98px) {
  :root .qz-app .dpg-mono { padding: var(--g-s1); }
  :root .qz-app .dpg-mono__row { grid-template-columns: minmax(0, 1fr); }
  :root .qz-app .dpg-mono__act { width: 100%; white-space: normal; }
  :root .qz-app .dpg-mono__act > .dpg-mono__face--btn { display: none; } /* 字を1行に（顔は返事の頭にある） */
  :root .qz-app .dpg-mono__reply-text > .dpg-mono__face { width: 24px; height: 24px; }
}