/* chat-novel.css — 💬 นิยายแชท [23 ต.ค. 2569 · แม่บท 5-2 · ม็อคอัพ mock-chat-novel v4 ผ่าน]
   ใช้ตัวแปรสีจาก app.css · โหลดเฉพาะหน้าเขียนบทความ + หน้าอ่านบทความ (ไม่กวาดทั้งเว็บ)
   ส่วน A = แผงบทสนทนา + การ์ดในกล่องพิมพ์ · ส่วน B = บับเบิลหน้าอ่าน · ส่วน C = ป้าย 💬 บนการ์ด (อยู่ใน app.css ไม่ได้ เพราะไฟล์นี้ไม่โหลดทุกหน้า → ป้ายอยู่ท้าย app.css) */

/* ===== A) หน้าเขียน ===== */
.mae-cc-chip-chat span { border-style: dashed; }
.mae-cc-chip-chat input:checked + span { border-style: solid; }
.mae-cc-chip.is-off { opacity: .45; pointer-events: none; }
/* ซีรีส์ล็อกรูปแบบ "นิยาย" ไว้ → ชิป 💬 ยังกดได้ (ชิปอื่นจางตาม article-editor.css) */
.mae-cc.is-locked .mae-cc-chip-chat:not(.is-off) span { opacity: 1; cursor: pointer; }

.mae-chat-panel {
  margin: 10px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line, #2e2323);
  border-radius: var(--radius, 14px);
  background: var(--surface, #1a1414);
}
.mae-chat-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-bottom: 8px; font-size: .92rem; }
.mae-chat-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; }
@media (max-width: 640px) { .mae-chat-cols { grid-template-columns: minmax(0, 1fr); } }
.mae-chat-col { min-width: 0; }
.mae-chat-col label { display: block; font-size: .86rem; margin-bottom: 4px; }
.mae-chat-panel textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: .92rem; line-height: 1.5;
  padding: 8px 10px; border-radius: var(--radius-sm, 9px); border: 1px solid var(--line, #2e2323);
  background: var(--bg-soft, #141010); color: var(--text, #ece5e0); resize: vertical;
}
#mae-chat-script { font-family: ui-monospace, SFMono-Regular, Menlo, "Noto Sans Thai", monospace; }
.mae-chat-castrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mae-chat-castchip {
  display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; padding: 2px 8px 2px 3px;
  border: 1px solid var(--line, #2e2323); border-radius: 999px; background: var(--surface-2, #221a1a);
}
.mae-chat-castchip i, .mae-chat-castchip img {
  width: 20px; height: 20px; border-radius: 50%; object-fit: cover; font-style: normal; font-size: .7rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.mae-chat-help { font-size: .82rem; color: var(--text-dim, #a1938c); margin-top: 6px; }
.mae-chat-help summary { cursor: pointer; }
.mae-chat-help ul { margin: 6px 0 0 18px; line-height: 1.6; }
.mae-chat-help code { background: var(--surface-2, #221a1a); padding: 0 4px; border-radius: 4px; }
.mae-chat-preview {
  margin-top: 10px; padding: 10px; border-radius: var(--radius-sm, 9px);
  background: var(--bg, #0c0a0a); border: 1px solid var(--line, #2e2323); max-height: 320px; overflow: auto;
}
.mae-chat-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.mae-chat-foot .btn-primary { margin-left: auto; }
.mae-chat-warn { color: var(--red-soft, #e0434d); font-size: .82rem; }
.mae-chat-warn:empty { display: none; }

/* การ์ดบล็อกแชทในกล่องพิมพ์ (ข้างในเป็นข้อความธรรมดา "ชื่อ: ประโยค") */
.mes-chat-card {
  position: relative; margin: 10px 0; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, .45); background: rgba(212, 175, 55, .06);
}
.mes-chat-card.is-editing { outline: 2px solid var(--gold, #d4af37); }
.mes-chat-card-head {
  display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; color: var(--gold-soft, #f0d98a); margin-bottom: 6px;
}
.mes-chat-card-tools { margin-left: auto; display: inline-flex; gap: 6px; }
.mes-chat-card-tools button {
  font: inherit; font-size: .74rem; padding: 2px 8px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line, #2e2323); background: var(--surface-2, #221a1a); color: var(--text, #ece5e0);
}
.mes-chat-card-body { font-size: .9rem; line-height: 1.55; max-height: 220px; overflow: auto; }
.mes-chat-line { margin: 0 0 3px; }
.mes-chat-sys { color: var(--text-dim, #a1938c); text-align: center; }
.mes-chat-break { color: var(--text-mute, #6f6360); text-align: center; letter-spacing: .3em; }

/* ===== B) หน้าอ่าน (ใช้ใน .mae-article-body และพรีวิวในแผง) ===== */
.cn-bar {
  position: sticky; top: calc(var(--shell-topbar-h, 56px) + 6px); z-index: 5;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; margin: 0 0 10px; border-radius: 10px;
  background: var(--surface, #1a1414); border: 1px solid var(--line, #2e2323); font-size: .82rem;
}
.cn-bar-t { font-weight: 700; color: var(--gold-soft, #f0d98a); }
.cn-bar-ctl { margin-left: auto; display: inline-flex; gap: 6px; }
.cn-btn {
  font: inherit; font-size: .8rem; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line, #2e2323); background: var(--surface-2, #221a1a); color: var(--text, #ece5e0);
}
.cn-btn.is-on { border-color: var(--gold, #d4af37); color: var(--gold-soft, #f0d98a); }
.cn-btn-ico { padding: 4px 8px; }

.cn-chat { position: relative; margin: 10px 0; padding: 10px 8px 6px; border-radius: 14px; background: var(--bg-soft, #141010); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cn-chat.is-done { cursor: auto; }
.cn-list { display: flex; flex-direction: column; gap: 8px; }
.cn-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; animation: cn-in .22s ease-out; }
.cn-msg.cn-r { flex-direction: row-reverse; margin-left: auto; }
.cn-av {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; color: #fff;
}
.cn-body { min-width: 0; }
.cn-nm { font-size: .72rem; color: var(--text-dim, #a1938c); margin: 0 6px 2px; }
.cn-r .cn-nm { text-align: right; }
.cn-bub {
  display: inline-block; padding: 8px 12px; border-radius: 16px; line-height: 1.5; font-size: 1rem;
  background: var(--surface-2, #221a1a); border: 1px solid var(--line, #2e2323); border-left: 3px solid var(--cn-c, var(--gold, #d4af37));
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.cn-r .cn-bub { background: color-mix(in srgb, var(--cn-c, #d4af37) 28%, var(--surface-2, #221a1a)); border-left: 1px solid var(--line, #2e2323); border-right: 3px solid var(--cn-c, var(--gold, #d4af37)); }
.cn-sys { text-align: center; font-size: .82rem; color: var(--text-dim, #a1938c); padding: 2px 10px; animation: cn-in .22s ease-out; }
.cn-break { letter-spacing: .4em; color: var(--text-mute, #6f6360); }
.cn-warn { color: var(--red-soft, #e0434d); }
.cn-tap {
  display: block; width: 100%; margin-top: 8px; font: inherit; font-size: .8rem; padding: 6px; border-radius: 10px; cursor: pointer;
  border: 1px dashed var(--line, #2e2323); background: transparent; color: var(--text-dim, #a1938c);
}
.cn-tap[hidden] { display: none; }
.cn-end { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 6px; font-size: .9rem; }
.cn-end[hidden] { display: none; }
@keyframes cn-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cn-msg, .cn-sys { animation: none; } }
/* [23 ต.ค.] ตัวอย่างในช่องต้องดูเป็น "ตัวอย่าง" ชัด ๆ — เจ้าของเคยเข้าใจว่าเป็นรายชื่อจริง */
.mae-chat-panel textarea::placeholder { color: var(--text-mute, #6f6360); font-style: italic; opacity: .8; }