/* キャラメーカー — ダークモード標準UI。
   モバイル390px幅を基準に横スクロールが出ない設計にする。
   外部フォント・外部CDN不使用。system-ui系のフォントスタックのみ。 */

:root {
  color-scheme: dark;

  --bg: #0b0e14;
  --bg-elevated: #121722;
  --surface: #171d29;
  --surface-2: #1e2634;
  --border: #2a3243;
  --border-soft: #232b3a;

  --text: #e7ecf3;
  --text-dim: #a7b0c0;
  --text-faint: #6b7486;

  --accent: #6ea8fe;
  --accent-dim: #3d6fd6;
  --accent-ink: #0a1220;

  --danger: #ff6b6b;
  --danger-bg: #331414;
  --danger-border: #6b2626;

  --warn: #f2c14e;
  --warn-bg: #322a10;
  --warn-border: #6b551c;

  --ok: #4fd67a;
  --ok-bg: #12261a;
  --ok-border: #245c3a;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  /* 横スクロール封じ込め: ページ自体は常に縦のみ */
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}

img,
svg {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  font-size: inherit;
}

.app {
  /* height(固定)にする: min-heightのままだと.screenがflex:1でも
     はみ出た分だけ.app自体が伸び、チャット画面の内部スクロール(.chat-log)が
     効かなくなる(チャット欄が縦スクロールできなくなるバグの原因)。
     .chat-logは既にmin-height:0+overflow-y:autoを持つので、.appを
     ビューポート高に固定するだけでチャット欄だけが正しく内部スクロールする。
     他画面(出力・生成中)はmin-height:autoのまま中身の分だけ.screenが
     はみ出し、従来通り文書全体のスクロールに委ねられるため挙動は変わらない。 */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  animation: fade-in 0.25s ease both;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen,
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============ 共通部品 ============ */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-style: italic;
  font-size: 13px;
  line-height: 1;
  color: var(--accent-ink);
}

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius-m);
  padding: 12px 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  min-height: 44px;
}

.btn:hover {
  border-color: var(--accent-dim);
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn-primary:hover {
  background: #86b8ff;
  border-color: #86b8ff;
}

.btn-block {
  width: 100%;
}

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-dim);
}

.btn-sm {
  padding: 7px 12px;
  min-height: 32px;
  font-size: 13px;
  border-radius: var(--radius-s);
}

.btn-danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

.btn-danger:hover {
  border-color: var(--danger);
}

.field-error {
  color: var(--danger);
  font-size: 13px;
  margin-top: 6px;
}

.banner {
  border-radius: var(--radius-m);
  padding: 12px 14px;
  font-size: 13.5px;
  border: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.banner-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  margin-top: 1px;
}

.banner-danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: #ffb3b3;
}
.banner-danger .banner-icon {
  background: var(--danger);
  color: var(--accent-ink);
}

.banner-warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: #f4dfa0;
}
.banner-warn .banner-icon {
  background: var(--warn);
  color: var(--accent-ink);
}

.banner-ok {
  background: var(--ok-bg);
  border-color: var(--ok-border);
  color: #b6f0c8;
}
.banner-ok .banner-icon {
  background: var(--ok);
  color: var(--accent-ink);
}

/* ============ ヒーロー ============ */

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding-top: 4px;
  padding-bottom: 8px;
}

.hero-copy h1 {
  font-size: clamp(22px, 6.2vw, 30px);
  line-height: 1.32;
  margin: 10px 0 0;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ヒーローのミニモック: 「チャットの吹き出し → 貼り付けカード(コピー付き)」を1枚で見せる。
   語で説明する代わりに、実際にできあがるものの縮図を見せる。 */
.hero-mock {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
}

.hero-mock-bubble {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  border-top-left-radius: 4px;
  padding: 10px 12px;
  width: 92px;
}

.hero-mock-bubble-text {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-dim);
}

.hero-mock-arrow {
  flex: 0 0 auto;
  width: 20px;
  height: 2px;
  background: var(--border);
  position: relative;
}

.hero-mock-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-50%) rotate(-45deg);
}

.hero-mock-card {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-m);
  padding: 10px 10px;
}

.hero-mock-card-text {
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-mock-copy {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-s);
  padding: 4px 8px;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.hero-fineprint {
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
}

/* ============ チャット画面 ============ */

.chat-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(var(--bg) 78%, transparent);
  padding-bottom: 10px;
  margin: -4px -4px 4px;
  padding-left: 4px;
  padding-right: 4px;
}

/* .screenの下パディングをapp.js側でインラインstyleで12pxに上書きしていたため
   env(safe-area-inset-bottom)が丸ごと捨てられ、ホームインジケータのある端末で
   送信ボタンがジェスチャー領域と重なっていた。ここでCSS側から安全域を含めて指定する。 */
.chat-screen {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  /* .screenのflex:1だけでは、自身の自動最小サイズ(min-height:auto)が中身の
     フルの高さをフロアにしてしまい、.appを100dvhに固定しても.chat-screen自体が
     それを超えて伸びてしまう。結果、子の.chat-log(flex:1; min-height:0; overflow-y:auto)
     に有限の高さが渡らず内部スクロールが発火しなかった。.chat-screenだけ
     min-height:0にして自身を.appの高さにきちんと収め、.chat-logへ実際に
     残り高さを配ってスクロール領域として機能させる。 */
  min-height: 0;
}

.chat-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* .slot-chip: 進捗チップの並び(7個)は廃止(2026-07-28)。「これで作る」導線の
   不足表示だけがこの見た目を引き続き使う(force-generate-hatch参照)。 */
.slot-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}

.slot-chip .slot-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}

.chat-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 2px 16px;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.msg {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: var(--radius-l);
  font-size: 14.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.msg-assistant {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-top-left-radius: 4px;
}

.msg-user {
  align-self: flex-end;
  background: var(--accent-dim);
  color: #eef4ff;
  border-top-right-radius: 4px;
}

.msg-system {
  align-self: center;
  background: transparent;
  color: var(--text-faint);
  font-size: 12.5px;
  border: none;
  text-align: center;
  max-width: 100%;
}

/* 対照的な仮案の二択タップUI(枠組みのみ・未配線)。吹き出しの直後に横並びで
   出す想定。文章での説明は付けず、ボタン自体のラベル(例:「守る側」「壊す側」)
   だけで選ばせる。 */
.choice-options {
  display: flex;
  gap: 8px;
  align-self: flex-start;
  max-width: 88%;
}

.choice-option {
  flex: 1 1 0;
  padding: 10px 12px;
  border-radius: var(--radius-m);
  border: 1px solid var(--accent-dim);
  background: rgba(110, 168, 254, 0.08);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.choice-option:active {
  background: rgba(110, 168, 254, 0.18);
  transform: scale(0.98);
}

.typing-cursor::after {
  content: "▌";
  margin-left: 2px;
  color: var(--accent);
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* ============ 育っていくドラフト(常時表示のキャラカード) ============
   このツールの核。チャットヘッダーに常駐し、対話するほど育つ。
   デフォルトは開いた状態(<details open>)。畳んでも要約行(名前+一言)だけは残る。
   本体はmax-heightで頭打ちにして、会話領域(.chat-log)を圧迫しない。 */

.draft-strip {
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-l);
  background: var(--surface-2);
  margin-top: 8px;
  overflow: hidden;
}

.draft-strip-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.draft-strip-summary::-webkit-details-marker {
  display: none;
}

.draft-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-style: italic;
  font-size: 13px;
  color: var(--accent-ink);
}

.draft-strip-name {
  flex: 0 1 auto;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.draft-strip-tagline {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.draft-strip-chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--text-faint);
  border-bottom: 1.5px solid var(--text-faint);
  transform: rotate(45deg);
  margin-right: 2px;
  transition: transform 0.2s ease;
}

.draft-strip[open] .draft-strip-chevron {
  transform: rotate(-135deg);
}

.draft-strip-body {
  padding: 2px 12px 12px;
  max-height: 34dvh;
  overflow-y: auto;
  border-top: 1px solid var(--border-soft);
}

/* 思想の宣言。短く一度だけ。verbatimマークがその常時可視化になる。 */
.draft-manifesto {
  margin: 8px 0 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.draft-grow-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.draft-grow-name {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

.draft-grow-empty {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-faint);
}

.draft-grow-tagline {
  margin: 0;
  font-size: 13px;
  color: var(--accent);
}

.draft-grow-personality {
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.draft-grow-personality li {
  border-radius: var(--radius-s);
  transition: background-color 0.3s ease;
}

.draft-grow-signature {
  font-size: 13px;
  color: var(--text);
  font-style: italic;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  border-top-left-radius: 4px;
  padding: 8px 11px;
  align-self: flex-start;
  max-width: 100%;
}

.draft-grow-setting {
  margin: 0;
  font-size: 12px;
  color: var(--text-faint);
}

/* 積み上げた要素(userEmphasis): draftSummaryがまだ無い序盤から育つ様子を見せる主役。
   「ラベル: 値」の形で来る想定だが、無ければ値だけを出す。 */
.draft-grow-emphasis {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.emphasis-item {
  font-size: 12.5px;
  color: var(--text-dim);
  border-radius: 3px;
  padding: 1px 2px;
}

.emphasis-label {
  color: var(--text-faint);
  margin-right: 5px;
}

/* 更新された項目だけを一瞬光らせる。フラッシュは要素がDOMに挿入された瞬間に自動再生される
   (このアプリは再描画のたびにDOMを作り直す方式のため、classを最初から付与するだけで
   毎回のマウント時に animation が発火する = トグル不要)。 */
@keyframes field-flash {
  0% {
    background-color: rgba(110, 168, 254, 0.38);
  }
  100% {
    background-color: transparent;
  }
}

.field-flash {
  animation: field-flash 1.8s ease-out;
  border-radius: 3px;
}

/* あなたの言葉のまま: ユーザーの原文がそのまま採用された箇所のマーク。
   説明文は付けず、引用符+破線下線という書体表現だけで伝える。 */
.field-verbatim {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--accent-dim);
  text-underline-offset: 3px;
}

.field-verbatim::before {
  content: "\201C";
  color: var(--accent);
  margin-right: 1px;
  font-style: normal;
}

/* 往復数の告知。残り回数は出さず、到達時にだけ控えめに知らせる(soft/hard)。
   警告色は使わず、hardだけわずかに強める程度に留める。 */
.turn-notice {
  margin: 6px 2px 0;
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
}

.turn-notice-hard {
  color: var(--warn);
}

.chat-composer {
  position: sticky;
  bottom: 0;
  background: linear-gradient(transparent, var(--bg) 26%);
  padding-top: 10px;
}

.composer-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 8px 8px 8px 14px;
}

.composer-row textarea {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  resize: none;
  max-height: 120px;
  padding: 8px 0;
  line-height: 1.5;
}

.composer-row textarea:focus {
  outline: none;
}

.composer-send {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
}

/* 見た目は40x40のまま、タップ判定だけ推奨サイズ(44px)相当まで広げる */
.composer-send::before {
  content: "";
  position: absolute;
  inset: -6px;
}

.composer-send:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.composer-meta {
  display: flex;
  justify-content: space-between;
  padding: 6px 4px 0;
  font-size: 11.5px;
  color: var(--text-faint);
}

.composer-meta.over {
  color: var(--danger);
}

.composer-inline-error {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  border: 1px solid var(--danger);
  background: rgba(255, 92, 92, 0.08);
  color: var(--danger);
  font-size: 12.5px;
}

/* 「これで作る」の小さい導線。生成はいつでも押せる方針だが、通常の送信導線より
   ずっと控えめに(下寄せ・小さい文字・枠なし)。ほぼ空の状態で押された時だけ、
   何が未充足かをチップで見せてもう一段階の確認を挟む。 */
.force-generate-hatch {
  margin-top: 10px;
  text-align: center;
}

.force-generate-link {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-faint);
  font-size: 11.5px;
  padding: 4px 6px;
  cursor: pointer;
}

.force-generate-link:hover {
  color: var(--text-dim);
}

.force-generate-panel {
  margin-top: 4px;
  padding: 10px;
  border: 1px dashed var(--danger-border);
  border-radius: var(--radius-m);
  background: var(--danger-bg);
}

.force-generate-missing {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  margin-bottom: 10px;
}

.slot-chip.missing {
  border-style: dashed;
  border-color: var(--danger-border);
  color: var(--danger);
}

.slot-chip.missing .slot-dot {
  background: transparent;
  border: 1.5px solid var(--danger);
}

.force-generate-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ============ 生成中 ============ */

.generating {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
  padding: 24px 8px;
}

.spinner {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.generating-stage {
  font-size: 15.5px;
  font-weight: 600;
  min-height: 1.6em;
}

.generating-sub {
  color: var(--text-dim);
  font-size: 13px;
  max-width: 38ch;
}

.generating-timer {
  color: var(--text-faint);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* 走馬灯: 待ち時間(約2分)にユーザー自身が打った言葉を逐語で1つずつ流す。
   「積み上げたものの確認」にするための演出で、原文以外は出さない。 */
.generating-echo-wrap {
  width: 100%;
  max-width: 320px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
}

.generating-echo {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-dim);
  font-style: italic;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.generating-echo::before,
.generating-echo::after {
  color: var(--accent-dim);
}

.generating-echo::before {
  content: "\201C";
  margin-right: 1px;
}

.generating-echo::after {
  content: "\201D";
  margin-left: 1px;
}

.generating-echo.echo-visible {
  opacity: 1;
  transform: none;
}

.generating-stagelist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 320px;
  text-align: left;
  margin-top: 4px;
}

.generating-stagelist li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-faint);
}

.generating-stagelist li.done {
  color: var(--text-dim);
}

.generating-stagelist li.current {
  color: var(--text);
  font-weight: 600;
}

.stagelist-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}

.generating-stagelist li.done .stagelist-dot {
  background: var(--ok);
}

.generating-stagelist li.current .stagelist-dot {
  background: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(110, 168, 254, 0.5);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(110, 168, 254, 0);
  }
}

/* ============ 出力画面 ============ */

/* 公開不可逆バナー: 最重要警告を最短文言＋アイコン＋強い色で単独表示する */
.lock-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  color: #ffd7d7;
  border-radius: var(--radius-m);
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 12px;
}

.lock-icon {
  flex-shrink: 0;
  width: 13px;
  height: 11px;
  border: 2px solid currentColor;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  position: relative;
  margin-top: 6px;
}

.lock-icon::after {
  content: "";
  position: absolute;
  top: 9px;
  left: -3px;
  width: 15px;
  height: 10px;
  background: currentColor;
  border-radius: 2px;
}

/* 違反・warningを短い語のチップで示す（文章バナーの代替） */
.warning-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.warning-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  cursor: default;
}

.warning-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn);
  flex-shrink: 0;
}

.warning-chip.over {
  border-color: var(--danger);
  color: #ffb3b3;
}
.warning-chip.over .warning-chip-dot {
  background: var(--danger);
}

.warning-chip.fixed {
  border-color: var(--ok-border);
  color: var(--ok);
}
.warning-chip.fixed .warning-chip-dot {
  background: var(--ok);
}

/* 貼り付け順ステッパー: 文章の代わりに番号+短語+接続線で順序を示す */
.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 4px 0 18px;
  padding: 12px 4px;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.stepper-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 0;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

.stepper-item:not(:last-child)::after {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--border);
  margin-left: 8px;
}

.stepper-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--text-faint);
}

/* 強調色は上部の warning-chip と同じ amber を使う。
   「この色 = 上に出ている注意チップと同じ落とし穴」という一貫した規則にする。 */
.stepper-item.emphasis {
  color: var(--text);
  font-weight: 700;
}

.stepper-item.emphasis .stepper-num {
  background: var(--warn);
  border-color: var(--warn);
  color: var(--accent-ink);
}

/* 設定タブ: トグルの見た目だけを提示する（文章で説明しない） */
.settings-toggle-mock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: 12px 14px;
  font-size: 13px;
}

.toggle-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.toggle-pill.off {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-faint);
}

/* 受け取りの演出: 名前 → 一言 → 決めセリフの順に数秒ずつ開ける。
   一括表示ではなく、対話で積み上げたものが形になる瞬間として見せる。
   prefers-reduced-motionでは.screenと同じグローバルルールでtransitionが
   ほぼ即時になるため、動きを尊重しつつ内容は変わらず出る。 */
.reveal-sequence {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.reveal-step {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-step.revealed {
  opacity: 1;
  transform: none;
}

.reveal-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.reveal-tagline {
  font-size: 14px;
  color: var(--accent);
}

.reveal-signature {
  font-size: 14px;
  font-style: italic;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  border-top-left-radius: 4px;
  padding: 10px 13px;
  align-self: flex-start;
  max-width: 100%;
}

/* キャラから作者への第一声。名前→タグライン→決めセリフの最後に開く、この演出の目玉。
   キャラ本人からの吹き出しとして見せるため、accent色のチャットバブルにする
   (決めセリフのニュートラルなバブルと見分けがつくように)。 */
.reveal-greeting {
  font-size: 13.5px;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--radius-m);
  border-top-left-radius: 4px;
  padding: 11px 14px;
  align-self: flex-start;
  max-width: 92%;
  font-weight: 600;
}

.output-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.output-head h2 {
  margin: 0;
  font-size: 19px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.counter-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 6px;
}

.counter-pill {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  padding: 8px 8px;
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.counter-pill .counter-value {
  display: block;
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.counter-pill.over {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.counter-pill.over .counter-value {
  color: var(--danger);
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: 12px 14px;
  font-size: 13px;
}

.checklist-title {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-dim);
  text-transform: none;
}

.checklist ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checklist li {
  color: var(--text-dim);
}

.checklist li strong {
  color: var(--text);
}

.warning-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tabs-wrap {
  position: relative;
}

.tabs-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 1px;
  width: 28px;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none;
}

.tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
  margin-top: 6px;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-faint);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-panel {
  padding: 16px 2px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: 12px 14px;
}

.field-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.field-card-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-count {
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.field-count.over {
  color: var(--danger);
  font-weight: 700;
}

.field-body {
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--text);
}

.field-body.empty {
  color: var(--text-faint);
  font-style: normal;
}

/* 貼り付けリスト: zetaに貼る順そのものをカードの並び順にする（タブは使わない）。 */
.paste-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.paste-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  padding: 12px 14px;
}

.paste-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.paste-card-num {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
}

.paste-card-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dim);
}

.paste-card-tag {
  appearance: none;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--warn);
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  border-radius: 999px;
  padding: 2px 8px;
  cursor: pointer;
}

/* タップで開閉する注意書き。titleのホバーはタッチ端末に届かないための代替。
   関係するカードの位置にだけ出し、常時は隠して説明文を並べない方針を保つ。 */
.paste-card-note {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 11.5px;
  line-height: 1.5;
}

.paste-card-head .copy-btn {
  margin-left: auto;
}

.paste-card-issue {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--danger);
}

/* 設定カード内では上部専用バナーではなく、カード内の一要素として振る舞う */
.paste-card .lock-banner {
  margin: 10px 0 0;
}

.style-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.style-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-soft);
}

.style-row:last-child {
  border-bottom: none;
}

.style-row-label {
  color: var(--text-faint);
  flex-shrink: 0;
}

.style-row-value {
  color: var(--text);
  text-align: right;
}

.copy-btn {
  position: relative;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  border-radius: var(--radius-s);
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  min-width: 56px;
}

/* コピーは主機能なので、見た目のサイズは変えずタップ判定だけ推奨サイズ相当に広げる */
.copy-btn::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.copy-btn.copied {
  border-color: var(--ok);
  color: var(--ok);
  background: var(--ok-bg);
}

.line-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.line-item {
  display: flex;
  gap: 8px;
  font-size: 13.5px;
}

.line-speaker {
  flex-shrink: 0;
  color: var(--text-faint);
  font-size: 11.5px;
  padding-top: 2px;
  width: 56px;
}

.line-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.empty-note {
  color: var(--text-faint);
  font-size: 13px;
  padding: 6px 2px;
}

.invite-card {
  margin-top: 22px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-l);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.invite-card h3 {
  margin: 0;
  font-size: 15.5px;
}

.invite-card p {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
}

.invite-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.invite-link-row a {
  color: var(--accent);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.zeta-cta {
  margin-top: 4px;
}

.zeta-cta a {
  color: var(--accent);
  font-size: 13px;
}

.restart-row {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.session-tag {
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
  margin-top: 10px;
  overflow-wrap: anywhere;
}

.hidden {
  display: none !important;
}

/* ============ 確認ダイアログ(はじめから等の破壊的操作) ============ */

.confirm-dialog {
  width: min(340px, calc(100vw - 48px));
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--bg-elevated);
  color: var(--text);
}

.confirm-dialog::backdrop {
  background: rgba(4, 6, 10, 0.6);
}

.confirm-dialog-body {
  margin-bottom: 18px;
}

.confirm-dialog-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
}

.confirm-dialog-desc {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
}

.confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* スクロールバー(webkit)を目立たせすぎないダークトーンに */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}
::-webkit-scrollbar-track {
  background: transparent;
}