/* สรุปไว: โทนวิวพิกเซลสงบ ๆ สีมิ้นต์ ฟอนต์ monospace
   กฎสี 60-30-10
   60% มิ้นต์อ่อน     : พื้นหลัง ท้องฟ้า การ์ด ช่องกรอก
   30% เขียวเข้ม       : ตัวอักษร หัวข้อ ต้นไม้ เส้นขอบ
   10% ส้มปะการัง     : ปุ่มหลัก ดอกไม้ จุดเน้น */

:root {
  --mint-50: #F6FAF8;
  --mint-100: #E4EFEA;
  --mint-200: #CBE1D8;
  --mint-300: #B9D0C6;

  --ink: #1F3B35;
  --ink-soft: #4C6660;
  --green-600: #3E6B5E;
  --green-400: #6F9886;

  --coral-600: #C94A36;
  --coral-700: #A93B2A;
  --coral-400: #E8705A;

  --warn-bg: #FFF4DA;
  --danger: #B33A28;

  --font-mono: "IBM Plex Mono", "IBM Plex Sans Thai", ui-monospace, monospace;
  --font-text: "IBM Plex Sans Thai", "IBM Plex Mono", system-ui, sans-serif;

  --radius: 14px;
  --shadow: 0 1px 0 rgba(31, 59, 53, 0.06), 0 8px 24px -12px rgba(31, 59, 53, 0.25);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }
/* ส่วนที่เกี่ยวกับแพ็กเสียเงิน: ซ่อนไว้จนกว่าเซิร์ฟเวอร์บอกว่าเปิดขาย (BILLING_MODE=off = ไม่แสดงเลย) */
html:not([data-sales="open"]) [data-paid] { display: none !important; }
html[data-sales="open"] [data-free-only] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--mint-100);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, p { margin: 0; }

a { color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- ปุ่ม ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 20px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: var(--mint-50);
  border: 1px solid var(--mint-300);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.12s, background-color 0.12s, box-shadow 0.12s;
}

.btn:hover:not(:disabled) { background: #fff; box-shadow: 0 4px 12px -6px rgba(31, 59, 53, 0.35); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--coral-400); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--primary {
  color: #fff;
  background: var(--coral-600);
  border-color: var(--coral-600);
  box-shadow: 0 6px 14px -8px rgba(169, 59, 42, 0.8);
}

.btn--primary:hover:not(:disabled) { background: var(--coral-700); }

.btn--ghost { background: rgba(246, 250, 248, 0.85); }

.btn--small { min-height: 34px; padding: 4px 14px; font-size: 0.82rem; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ---------- ส่วนบน ---------- */
.hero {
  position: relative;
  flex: 1 0 auto; /* หน้าแรก: วิวเต็มจอ ส่วนท้ายอยู่ล่างสุด */
  overflow: hidden;
  background: var(--mint-200);
  padding-bottom: 300px;
}

.hero__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.hero__scene:focus-visible { outline: 3px dashed var(--coral-600); outline-offset: -6px; }

.nav {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-decoration: none;
}

.nav__brand svg { width: 14px; height: 16px; }
.nav__brand-en { font-weight: 400; color: var(--ink-soft); font-size: 0.8rem; }

.nav__links { flex: 1; display: flex; justify-content: center; gap: 28px; }
.nav__links a { text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; }
.nav__links a:hover { border-bottom-color: var(--ink); }

.badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 2px 10px;
  background: var(--warn-bg);
  border: 1px solid #E2C27A;
  border-radius: 999px;
  white-space: nowrap;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 20px 0;
  text-align: center;
}

.hero__title {
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.hero__lead {
  max-width: 600px;
  margin: 16px auto 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.features {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature svg { width: 32px; height: 32px; image-rendering: pixelated; }
.feature h2 { margin-top: 8px; font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; }
.feature p { margin-top: 4px; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; }

.hero__actions { margin-top: 32px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

.hero__hint {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: 14px;
  padding: 2px 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink);
  background: rgba(246, 250, 248, 0.85);
  border-radius: 999px;
  pointer-events: none;
}

@media not ((min-width: 768px) and (any-pointer: fine)) {
  .hero__hint { display: none; }
}

/* ตัวละครจากภาพสไปรต์ (ตำแหน่งและเฟรมตั้งจาก js/scene.js) */
.player-sprite {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 128px;
  height: 128px;
  background-repeat: no-repeat;
  background-size: 512px 128px;
  image-rendering: pixelated;
  transform-origin: 62px 112px; /* พลิกซ้ายขวารอบกึ่งกลางตัว */
  pointer-events: none;
}

/* ป้ายเหนือหัวตัวละคร (ตำแหน่งตั้งจาก js/scene.js) */
.player-bubble {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -100%);
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  white-space: nowrap;
  color: var(--mint-50);
  background: var(--ink);
  border-radius: 10px;
  pointer-events: none;
  animation: bubble-bob 1.6s ease-in-out infinite;
}

.player-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  margin-left: -6px;
  border: 6px solid transparent;
  border-bottom: 0;
  border-top-color: var(--ink);
}

@keyframes bubble-bob {
  50% { margin-top: -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .player-bubble { animation: none; }
}

/* ---------- การ์ด ---------- */
.card {
  min-width: 0;
  padding: 20px;
  background: var(--mint-50);
  border: 1px solid var(--mint-300);
  border-top: 4px solid var(--mint-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
}

.card__head { display: flex; align-items: center; gap: 10px; scroll-margin-top: 16px; }

.card__head h2 { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; }

.card__step {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--mint-50);
  background: var(--ink);
  border-radius: 8px;
}

/* ---------- แท็บ ---------- */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--mint-100);
  border: 1px solid var(--mint-300);
  border-radius: 999px;
}

.tabs [role="tab"] {
  flex: 1;
  min-height: 38px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.tabs [role="tab"][aria-selected="true"] {
  color: var(--ink);
  font-weight: 700;
  background: #fff;
  box-shadow: 0 2px 6px -2px rgba(31, 59, 53, 0.3);
}

.tabs [role="tab"]:focus-visible { outline: 3px solid var(--coral-400); outline-offset: 1px; }

/* ---------- กล่องข้อความแจ้ง ---------- */
.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  font-size: 0.88rem;
  background: #fff;
  border: 1px solid var(--mint-300);
  border-radius: 10px;
}

.notice svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.notice--warn { background: var(--warn-bg); border-color: #EBD49B; }

/* ---------- ช่องกรอก ---------- */
.field-label { font-weight: 500; font-size: 0.9rem; }

.field,
.input,
.search,
.select select {
  font-family: var(--font-text);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--mint-300);
  border-radius: 10px;
}

.field {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  padding: 12px 14px;
  line-height: 1.65;
}

.field:focus,
.input:focus,
.select select:focus,
.search:focus-within {
  outline: 3px solid rgba(232, 112, 90, 0.45);
  outline-offset: 0;
  border-color: var(--coral-400);
}

.input, .select select { min-height: 42px; padding: 6px 12px; }

/* ---------- ตัวนับตัวอักษร ---------- */
.counter { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); }
.counter[data-level="high"] { color: #9A6B12; }
.counter[data-level="over"] { color: var(--danger); font-weight: 700; }

input[type="radio"], input[type="checkbox"] { accent-color: var(--coral-600); width: 18px; height: 18px; margin: 0; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; }

.shortcut { font-size: 0.8rem; color: var(--ink-soft); }

/* ---------- ผลลัพธ์ ---------- */
.empty {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 260px;
  padding: 24px;
  text-align: center;
  color: var(--ink-soft);
  background: #fff;
  border: 1px dashed var(--mint-300);
  border-radius: 10px;
}

.empty svg { width: 48px; height: 48px; image-rendering: pixelated; }
.empty--small { min-height: 110px; padding: 16px; }

.progress {
  height: 12px;
  padding: 2px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mint-300);
  border-radius: 999px;
}

.progress__bar {
  height: 100%;
  width: 35%;
  background: var(--coral-400);
  border-radius: 999px;
  animation: slide 1.3s ease-in-out infinite;
}

@keyframes slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(300%); }
}

@media (prefers-reduced-motion: reduce) {
  .progress__bar { animation: none; width: 100%; opacity: 0.6; }
}

/* ผลตรวจแบบย่อใต้ร่าง: บรรทัดเดียว ไม่มีกรอบ (มีจุดต้องตรวจ = สีเหลืองเข้ม กดดูรายละเอียด) */
.facts { font-size: 0.8rem; color: var(--ink-soft); }
.facts--ok { color: var(--green-600); }
.facts summary { width: fit-content; cursor: pointer; font-weight: 700; color: #9A6B12; }
.facts summary:focus-visible { outline: 3px solid var(--coral-400); outline-offset: 2px; border-radius: 4px; }
.facts ul { margin: 6px 0 0; padding: 8px 12px 8px 30px; font-size: 0.85rem; color: var(--ink); background: #fff; border: 1px solid var(--mint-300); border-radius: 10px; }
.facts li[data-kind="warn"]::marker { content: "⚠ "; color: #C08A1E; }
.facts li[data-kind="ok"]::marker { content: "✓ "; color: var(--green-600); }
.facts li[data-kind="info"] { color: var(--ink-soft); }

/* เมนู "⋯" คำสั่งรองใต้ร่าง */
.more { position: relative; }
.more__toggle { list-style: none; min-width: 34px; padding: 4px 10px; font-weight: 700; letter-spacing: 1px; }
.more__toggle::-webkit-details-marker { display: none; }
.more__list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  min-width: 240px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--mint-300);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.msg--user .more__list { left: auto; right: 0; }
.more__item { padding: 8px 10px; font: inherit; font-size: 0.85rem; text-align: left; color: var(--ink); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.more__item:hover:not(:disabled), .more__item:focus-visible { background: var(--mint-100); outline: none; }
.more__item:disabled { color: var(--ink-soft); cursor: not-allowed; }

/* ---------- คลังเอกสาร ---------- */
.library { display: grid; gap: 12px; }

.library__toolbar { display: flex; flex-wrap: wrap; gap: 8px; }

.search { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 42px; }
.search svg { width: 18px; height: 18px; flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; outline: none; padding: 6px 0; }

.select { flex: 0 1 180px; }
.select select { width: 100%; }

.library__note { font-size: 0.82rem; color: var(--ink-soft); }

.filelist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 420px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--mint-300);
  border-radius: 10px;
}

.filelist:empty { display: none; }

.file {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--mint-100);
}

.file:last-child { border-bottom: 0; }
.file[data-selected="true"] { background: #FDF0EC; }
.file__icon { width: 24px; height: 28px; }
.file__main { min-width: 0; }
.file__title { font-weight: 600; overflow-wrap: anywhere; }
.file__meta { font-size: 0.8rem; color: var(--ink-soft); }
.file__actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.file__actions .btn { min-height: 32px; padding: 2px 12px; font-size: 0.8rem; }

.tag {
  display: inline-block;
  margin-right: 6px;
  padding: 0 8px;
  font-size: 0.72rem;
  color: var(--green-600);
  background: var(--mint-100);
  border-radius: 999px;
}

.library__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

#lib-selection { font-size: 0.88rem; color: var(--green-600); font-weight: 500; }

.form-grid { display: grid; gap: 6px; }
.form-grid .field-label:not(:first-child) { margin-top: 8px; }

/* ---------- ส่วนท้าย ---------- */
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--mint-300);
}

.footer__brand { font-weight: 700; color: var(--ink); }
.footer__links a { color: var(--ink-soft); }
.footer__links a:hover { color: var(--ink); }

/* ---------- หน้าข้อกำหนดและนโยบายความเป็นส่วนตัว ---------- */
.legal-page .nav { width: 100%; }
.legal {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 20px 56px;
  display: grid;
  gap: 28px;
}
.legal h1 { font-family: var(--font-mono); font-size: 1.6rem; line-height: 1.3; }
.legal h2 { font-family: var(--font-mono); font-size: 1.05rem; margin-bottom: 8px; }
.legal__date { margin-top: -20px; font-size: 0.85rem; color: var(--ink-soft); }
.legal__notice { padding: 12px 16px; background: var(--mint-50); border: 1px solid var(--mint-300); border-radius: 10px; }
.legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.legal p + p, .legal ul + p, .legal table + p { margin-top: 10px; }
.legal code { font-family: var(--font-mono); font-size: 0.88em; }
.legal__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: var(--mint-50); border-radius: 10px; overflow: hidden; }
.legal__table th, .legal__table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mint-300); }
.legal__table th { font-family: var(--font-mono); font-size: 0.82rem; background: var(--mint-200); }
.legal__contact { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; padding: 14px 16px; background: var(--mint-50); border: 1px solid var(--mint-300); border-radius: 10px; }
.legal__contact dt { font-weight: 600; }
.legal__contact dd { margin: 0; overflow-wrap: anywhere; }

.not-found { align-content: center; justify-items: start; gap: 12px; }
.not-found__code { font-family: var(--font-mono); font-size: 3rem; font-weight: 700; color: var(--coral-600); line-height: 1; }

@media (max-width: 640px) {
  .legal__table thead { display: none; }
  .legal__table tr { display: grid; padding: 10px 12px; border-bottom: 1px solid var(--mint-300); }
  .legal__table td { padding: 2px 0; border: 0; }
  .legal__table td:first-child { font-weight: 600; }
  .legal__contact { grid-template-columns: 1fr; }
  .legal__contact dd { margin-bottom: 6px; }
}

/* ---------- กล่องโต้ตอบ ---------- */
.dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  color: var(--ink);
  background: var(--mint-50);
  border: 1px solid var(--mint-300);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px -16px rgba(31, 59, 53, 0.45);
}

.dialog::backdrop { background: rgba(31, 59, 53, 0.35); }
.dialog form { margin: 0; }
.dialog__title { padding: 16px 20px 0; font-family: var(--font-mono); font-size: 1rem; font-weight: 700; }
.dialog__body { display: flex; gap: 14px; align-items: flex-start; padding: 14px 20px; }
.dialog__body.form-grid { display: grid; }
.dialog__icon svg { width: 32px; height: 32px; }
.dialog__body p { white-space: pre-line; }
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 0 20px 18px; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  font-size: 0.9rem;
  color: var(--mint-50);
  background: var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow);
}

/* ---------- เครดิตบนแถบบน + แถบเตือนหมดอายุ ---------- */
.chip {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 3px 12px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  background: rgba(246, 250, 248, 0.9);
  border: 1px solid var(--mint-300);
  border-radius: 999px;
}

.chip:hover { background: #fff; }
.chip:focus-visible { outline: 3px solid var(--coral-400); outline-offset: 2px; }

/* ใต้ช่องพิมพ์: ป้ายแพ็ก · หลอดส่วนที่ใช้ไป (แบบเดียวกับแถบในหน้าเครดิต) · จำนวนครั้งที่เหลือ */
/* เม็ดยาแบบเดียวกับกล่องเลือกความยาว/น้ำเสียง: จุดสีแพ็ก · "เหลือ N ครั้ง" ตัวหนา + ชื่อแพ็กสีอ่อน · หลอดบาง */
.credit-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 14px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--mint-50);
  border: 1px solid var(--mint-300);
  border-radius: 999px;
}
.credit-meter__plan { flex: none; font-weight: 600; color: var(--ink); white-space: nowrap; }
/* เลือกแพ็กที่จะใช้: ดูเหมือนชื่อแพ็กตัวหนามีลูกศร (ไม่มีกรอบซ้อนในเม็ดยา) */
.credit-meter__select {
  flex: none;
  max-width: 170px;
  min-height: 26px;
  padding: 0 2px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.credit-meter__select:focus-visible { outline: 3px solid var(--coral-400); outline-offset: 2px; }
.credit-meter__link { display: flex; align-items: center; gap: 8px; min-width: 0; color: inherit; text-decoration: none; border-radius: 999px; }
.credit-meter__link:hover .credit-meter__text strong { text-decoration: underline; }
.credit-meter__link:focus-visible { outline: 3px solid var(--coral-400); outline-offset: 2px; }
.credit-meter__dot { flex: none; width: 9px; height: 9px; background: var(--mint-300); border-radius: 50%; }
.credit-meter__dot[data-plan="small"] { background: var(--green-600); }
.credit-meter__dot[data-plan="big_flex"] { background: #E2C27A; }
.credit-meter__dot[data-plan="big_std"] { background: var(--coral-600); }
.credit-meter__dot[data-plan="monthly"],
.credit-meter__dot[data-plan="yearly"] { background: var(--ink); }
.credit-meter__text { flex: none; white-space: nowrap; }
.credit-meter__text strong { font-weight: 600; color: var(--ink); }
.credit-meter__bar { flex: 1; min-width: 50px; height: 6px; overflow: hidden; background: var(--mint-100); border-radius: 999px; }
.credit-meter__bar span { display: block; height: 100%; width: 0; background: var(--green-600); border-radius: inherit; }
.credit-meter[data-level="high"] .credit-meter__bar span { background: var(--coral-600); }

/* ป้ายแพ็ก: สีต่างกันตามแพ็กที่ใช้อยู่ */
.plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 999px;
}

.plan-badge[data-plan="free"] { color: var(--ink); background: var(--mint-100); border-color: var(--mint-300); }
.plan-badge[data-plan="small"] { color: #fff; background: var(--green-600); }
.plan-badge[data-plan="big_flex"] { color: #6B4A00; background: var(--warn-bg); border-color: #E2C27A; }
.plan-badge[data-plan="big_std"] { color: #fff; background: var(--coral-600); }
.plan-badge[data-plan="monthly"] { color: var(--mint-50); background: var(--ink); }
.plan-badge[data-plan="yearly"] { color: var(--mint-50); background: var(--ink); border-color: var(--coral-400); box-shadow: inset 0 0 0 1px var(--coral-400); }
.plan-badge--sm { padding: 0 8px; font-size: 0.7rem; }
.plan-badge--lg { padding: 4px 14px; font-size: 1.05rem; }

/* หน้า "เครดิตของฉัน": การใช้งาน (ครั้งที่เหลือ + แถบของสิทธิ์แต่ละอย่าง) สิทธิ์ที่ได้ และประวัติการซื้อ */
.usage {
  display: grid;
  gap: 12px;
  padding: 20px 22px;
  background: var(--mint-50);
  border: 1px solid var(--mint-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.usage__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.usage__head h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; }
.usage__tier { font-size: 0.85rem; color: var(--ink-soft); }
.usage__headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 1.6rem; font-weight: 700; line-height: 1.3; }
.usage__headline small { font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); }
.usage__next { font-size: 0.88rem; color: var(--green-600); }
.usage__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.usage__pick small { font-size: 0.8rem; color: var(--ink-soft); }
.usage__title { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; }
.usage .actions { margin-top: 4px; }

/* แถบการใช้งาน: ชื่อ | แถบ | ใช้ไปกี่ % (จอแคบ: แถบลงไปอยู่แถวล่าง) */
.meters { display: grid; margin: 0; padding: 0; list-style: none; }
.meter {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 1.6fr) minmax(120px, auto);
  align-items: center;
  gap: 8px 20px;
  padding: 14px 0;
  border-top: 1px solid var(--mint-300);
}
.meter__label { display: grid; gap: 2px; }
.meter__label strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.95rem; }
.meter__label small,
.meter__value small { font-size: 0.8rem; color: var(--ink-soft); }
.meter__tag { margin: 0; }
.meter__tag--first { background: var(--coral-400); color: #fff; }
.meter__bar { height: 10px; overflow: hidden; background: var(--mint-100); border: 1px solid var(--mint-300); border-radius: 999px; }
.meter__bar span { display: block; height: 100%; background: var(--green-600); border-radius: inherit; }
.meter[data-level="high"] .meter__bar span { background: var(--coral-600); }
.meter__value { display: grid; justify-items: end; text-align: right; }
.meter__value strong { font-size: 0.9rem; }
@media (max-width: 640px) {
  .meter { grid-template-columns: minmax(0, 1fr) auto; }
  .meter__bar { grid-column: 1 / -1; grid-row: 2; }
}

.plan-now__rights { display: grid; gap: 6px; align-content: start; margin: 0; padding: 0; list-style: none; font-size: 0.88rem; }
.plan-now__rights li { padding-left: 22px; text-indent: -22px; }
.plan-now__rights li::before { content: "✓"; display: inline-block; width: 22px; text-indent: 0; font-weight: 700; color: var(--green-600); }
.plan-now__rights li[data-ok="no"] { color: var(--ink-soft); }
.plan-now__rights li[data-ok="no"]::before { content: "–"; color: var(--ink-soft); }
.plan-now__rights small { color: var(--ink-soft); }

/* การ์ดแพ็กที่ใช้อยู่ในหน้าแพ็กเกจ */
.plans .plan--current { border-color: var(--green-600); box-shadow: 0 0 0 2px var(--green-600), var(--shadow); }
.plan__current { margin-bottom: -6px; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: var(--green-600); }

.expiry { align-items: center; margin: 8px 16px 0; }
.expiry p { flex: 1; }

/* ---------- แพ็กเกจ ---------- */
.pricing { display: grid; gap: 16px; scroll-margin-top: 16px; }

.pricing__head { display: grid; justify-items: center; gap: 4px; text-align: center; }
.pricing__head h2 { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; }
.pricing__head p { color: var(--ink-soft); font-size: 0.92rem; }
.pricing__head .badge { color: var(--ink); margin-top: 4px; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; align-items: stretch; }
.plans--single { grid-template-columns: minmax(0, 400px); justify-content: center; } /* แท็บรายเดือน/รายปี มีการ์ดเดียว */

/* แท็บประเภทแพ็กเกจ: ซื้อเป็นครั้ง / รายเดือน / รายปี */
.pricing__tabs { width: min(100%, 460px); justify-self: center; }
.pricing__tabs [role="tab"] { padding: 0 10px; white-space: nowrap; }
.pricing__tab-note { max-width: 640px; justify-self: center; text-align: center; font-size: 0.9rem; color: var(--ink-soft); }
.tab-mark { margin-left: 6px; color: var(--green-600); }
.plans__loading { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); }

.plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--mint-50);
  border: 1px solid var(--mint-300);
  border-top: 4px solid var(--mint-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.plan--featured { border-top-color: var(--coral-400); }

.plan__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; }
.plan__name .tag { margin: 0; }

.plan__price { color: var(--ink-soft); font-size: 0.88rem; }
.plan__lead { font-size: 0.85rem; color: var(--ink-soft); }
.plan__price strong { font-family: var(--font-mono); font-size: 1.8rem; color: var(--ink); }

.plan__features { flex: 1; margin: 0; padding-left: 20px; font-size: 0.9rem; display: grid; gap: 4px; align-content: start; }
.plan__features .soon { color: var(--ink-soft); }
.plan__features .soon .tag { margin: 0 0 0 4px; background: var(--warn-bg); color: var(--ink); }

.plan__buy { width: 100%; }
.plan__note { font-size: 0.85rem; color: var(--green-600); text-align: center; min-height: 42px; display: grid; place-items: center; }

.plan__tier { display: grid; gap: 6px; }
.plan__tier p { font-size: 0.82rem; color: var(--ink-soft); }

.seg {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 4px;
  background: var(--mint-100);
  border: 1px solid var(--mint-300);
  border-radius: 999px;
}

.seg label {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 36px;
  padding: 2px 10px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  border-radius: 999px;
  cursor: pointer;
}

.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--ink); color: var(--mint-50); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--coral-400); outline-offset: 1px; }

.terms {
  padding: 12px 16px;
  font-size: 0.9rem;
  background: var(--mint-50);
  border: 1px solid var(--mint-300);
  border-radius: var(--radius);
}

.terms summary { cursor: pointer; font-family: var(--font-mono); font-weight: 700; color: var(--green-600); }
.terms ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }

/* ---------- เครดิตของฉัน ---------- */
.wallet { scroll-margin-top: 16px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0; }
.stat { padding: 10px 14px; background: var(--mint-100); border-radius: 10px; }
.stat dt { font-size: 0.78rem; color: var(--ink-soft); }
.stat dd { margin: 0; font-family: var(--font-mono); font-weight: 700; }

.lots { list-style: none; margin: 0; padding: 0; border: 1px solid var(--mint-300); border-radius: 10px; background: #fff; }
.lots:empty { display: none; }

.lot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--mint-100);
}

.lot:last-child { border-bottom: 0; }
.lot[data-status="cancelled"], .lot[data-status="expired"] { color: var(--ink-soft); }
.lot__title { font-weight: 600; }
.lot__title .tag { margin: 0 0 0 4px; }
.lot[data-status="cancelled"] .tag, .lot[data-status="expired"] .tag { background: var(--warn-bg); color: var(--ink); }
.lot__meta { font-size: 0.8rem; color: var(--ink-soft); }
.lot__actions { display: flex; gap: 6px; }

.wallet__note { font-size: 0.82rem; color: var(--ink-soft); }

.devtools {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  font-size: 0.85rem;
  border: 1px dashed var(--green-400);
  border-radius: 10px;
}

/* รหัสกู้คืนเครดิต */
.recovery { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; background: var(--mint-100); border-radius: 10px; }
.recovery__code { flex: 1 1 260px; min-width: 0; font-family: var(--font-mono); font-size: 0.92rem; overflow-wrap: anywhere; user-select: all; }
.recovery__warn { flex-basis: 100%; font-size: 0.8rem; color: var(--ink-soft); }
.recovery__input { flex: 1 1 260px; min-width: 0; font-family: var(--font-mono); }

/* ---------- กล่องซื้อและใบเสร็จ ---------- */
.dialog--wide { width: min(540px, calc(100vw - 32px)); }

.buy-summary { display: grid; gap: 2px; padding: 12px 14px; background: var(--mint-100); border-radius: 10px; }
.buy-summary strong { font-family: var(--font-mono); font-size: 1.05rem; }
.buy-summary__tier { font-size: 0.82rem; color: var(--ink-soft); }

.buy-terms { margin: 0; padding-left: 20px; font-size: 0.88rem; display: grid; gap: 2px; }

.buy-test { padding: 6px 12px; font-size: 0.85rem; background: var(--warn-bg); border: 1px solid #EBD49B; border-radius: 8px; }

.check { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 500; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--coral-600); }

.receipt { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 0.9rem; }
.receipt dt { color: var(--ink-soft); }
.receipt dd { margin: 0; overflow-wrap: anywhere; }
.receipt small { color: var(--ink-soft); }

.rights { display: grid; gap: 4px; padding: 12px 14px; font-size: 0.9rem; background: #FDF0EC; border: 2px solid var(--coral-400); border-radius: 10px; }
.rights strong { font-family: var(--font-mono); color: var(--coral-700); }

/* ==========================================================================
   หน้าทำงาน (/app): แถบซ้าย + พื้นที่หลักแบบแชต
   ========================================================================== */
body.app { height: 100dvh; min-height: 0; overflow: hidden; }

.shell {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  height: 100dvh;
  transition: grid-template-columns 0.2s;
}

.shell--collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.shell--collapsed .sidebar { visibility: hidden; padding-left: 0; padding-right: 0; border-right: 0; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover:not(:disabled) { background: rgba(31, 59, 53, 0.08); }
.icon-btn:focus-visible { outline: 3px solid var(--coral-400); outline-offset: 1px; }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* แถบซ้าย */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px 10px;
  overflow: hidden;
  background: var(--mint-200);
  border-right: 1px solid var(--mint-300);
}

.sidebar__top { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 0 8px; }

.brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-weight: 700; text-decoration: none; }
.brand svg { width: 14px; height: 16px; }

.sidebar__new { justify-content: flex-start; padding-left: 16px; }
.sidebar__new svg { width: 12px; height: 12px; }

.sidebar__nav { display: grid; gap: 2px; }

.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 10px;
}

.side-link svg { width: 18px; height: 18px; flex: none; }
.side-link:hover { background: rgba(246, 250, 248, 0.6); }
.side-link[aria-current="page"] { background: var(--mint-50); font-weight: 600; }
.side-link:focus-visible { outline: 3px solid var(--coral-400); outline-offset: -1px; }

.sidebar__search { flex: none; min-height: 38px; background: rgba(255, 255, 255, 0.7); }
.sidebar__search svg { width: 16px; height: 16px; }
.sidebar__search input { font-size: 0.9rem; }

.history { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.history__group h2 { padding: 10px 10px 4px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); }
.history__group ul { list-style: none; margin: 0; padding: 0; }
.history__empty { padding: 12px 10px; font-size: 0.85rem; color: var(--ink-soft); }

.history__row { display: flex; align-items: center; border-radius: 10px; }
.history__row:hover, .history__row:focus-within { background: rgba(246, 250, 248, 0.6); }
.history__row[data-current] { background: var(--mint-50); }

.history__item {
  flex: 1;
  min-width: 0;
  padding: 7px 4px 7px 10px;
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.history__row[data-current] .history__item { font-weight: 600; }
.history__item:focus-visible, .history__more:focus-visible { outline: 3px solid var(--coral-400); outline-offset: -2px; }

.history__more {
  flex: none;
  width: 30px;
  height: 30px;
  margin-right: 2px;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
}

.history__row:hover .history__more, .history__row:focus-within .history__more, .history__row[data-current] .history__more { opacity: 1; }
.history__more:hover { background: var(--mint-100); }

@media (hover: none) {
  .history__more { opacity: 1; }
}

/* แถวตั้งค่าท้ายแถบซ้าย: บอกสิทธิ์และเครดิตคงเหลือ */
.side-settings {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  text-decoration: none;
  background: rgba(246, 250, 248, 0.5);
  border: 1px solid var(--mint-300);
  border-radius: 12px;
}

.side-settings svg { width: 20px; height: 20px; flex: none; }
.side-settings__text { display: grid; min-width: 0; line-height: 1.35; }
.side-settings__text > span { font-size: 0.9rem; font-weight: 600; }
.side-settings small { font-size: 0.72rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-settings:hover { background: var(--mint-50); }
.side-settings[aria-current="page"] { background: var(--mint-50); border-color: var(--green-400); }
.side-settings:focus-visible { outline: 3px solid var(--coral-400); outline-offset: -1px; }

/* เมนู ⋯ */
.menu {
  position: fixed;
  z-index: 40;
  display: grid;
  min-width: 160px;
  padding: 4px;
  background: var(--mint-50);
  border: 1px solid var(--mint-300);
  border-radius: 12px;
  box-shadow: 0 12px 28px -10px rgba(31, 59, 53, 0.45);
}

.menu button {
  padding: 8px 12px;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.menu button:hover, .menu button:focus-visible { background: var(--mint-100); outline: none; }
.menu [data-action="delete"] { color: var(--danger); }

/* พื้นที่หลัก */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100dvh; }

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--mint-300);
}

.topbar__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.98rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.view { flex: 1; min-height: 0; overflow-y: auto; }
.view__inner { display: grid; gap: 20px; max-width: 1040px; margin: 0 auto; padding: 24px 20px 48px; }
.view__inner--narrow { max-width: 720px; }
.view__foot { text-align: center; font-size: 0.88rem; color: var(--ink-soft); }
.view__foot a { color: var(--green-600); font-weight: 600; }

.card__head-action { margin-left: auto; }

/* หน้าตั้งค่า */
.settings__rows { display: grid; margin: 0; }

.settings__rows > div,
.settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 52px;
  padding: 8px 0;
  border-bottom: 1px solid var(--mint-100);
}

.settings__rows > :last-child { border-bottom: 0; }
.settings__rows dt { flex: none; color: var(--ink-soft); font-size: 0.9rem; white-space: nowrap; }
.settings__rows dd { margin: 0; font-family: var(--font-mono); font-weight: 700; text-align: right; }
.settings__rows dd.settings__plain { font-family: var(--font-text); font-weight: 400; font-size: 0.88rem; }
/* บัญชีผู้ใช้: อีเมล + ปุ่มออกจากระบบ หรือปุ่มล็อกอิน + คำอธิบาย */
.settings__account { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.settings__account small { flex-basis: 100%; text-align: right; color: var(--ink-soft); }
.settings__row > span { font-size: 0.92rem; }
.settings__row small { display: block; font-size: 0.78rem; color: var(--ink-soft); font-weight: 400; }
.settings__row .input { width: auto; min-width: 170px; }
.settings__row--check { cursor: pointer; }

/* สวิตช์เปิด/ปิด */
.settings input.switch {
  appearance: none;
  flex: none;
  position: relative;
  width: 44px;
  height: 26px;
  margin: 0;
  background: var(--mint-300);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s;
}

.settings input.switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(31, 59, 53, 0.35);
  transition: transform 0.15s;
}

.settings input.switch:checked { background: var(--green-600); }
.settings input.switch:checked::before { transform: translateX(18px); }
.settings input.switch:focus-visible { outline: 3px solid var(--coral-400); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .settings input.switch, .settings input.switch::before { transition: none; }
}

.btn--danger { color: var(--danger); border-color: #E7B5AB; }
.btn--danger:hover:not(:disabled) { background: #FDF0EC; }

.wallet__subhead { font-family: var(--font-mono); font-size: 0.88rem; font-weight: 700; color: var(--green-600); }
.view--chat { display: flex; flex-direction: column; overflow: hidden; }
.view--chat[hidden] { display: none; }

.chat { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 20px 12px; scroll-padding-top: 16px; }

/* หน้าเริ่มงาน */
.welcome { display: grid; justify-items: center; gap: 10px; max-width: 560px; margin: 8vh auto 0; text-align: center; }
.welcome__character { display: grid; place-items: center; min-height: 96px; }

/* ---------- ตัวละคร (characters.js) ---------- */
/* สไปรต์ชีต 4 เฟรมเรียงแนวนอน: ย่อทั้งแผ่นให้ 1 เฟรม = กล่อง --s แล้วเลื่อนทีละเฟรม */
.char-avatar { display: inline-block; flex: none; width: var(--s); height: var(--s); image-rendering: pixelated; }
span.char-avatar { background-repeat: no-repeat; background-size: calc(var(--s) * 4) var(--s); background-position: 0 0; }
span.char-avatar[data-faces="-1"] { transform: scaleX(-1); } /* ภาพเดิมหันซ้าย → กลับให้หันขวา */
.char-avatar--walk { animation: char-walk 0.6s steps(4) infinite; }
@keyframes char-walk { to { background-position: calc(var(--s) * -4) 0; } }
/* ตัวละครพิกเซล (canvas กว้าง/สูง = --ratio) ให้สูงพอ ๆ กับตัวละครในสไปรต์ชีต แล้วเติมขอบให้กล่องเท่ากัน */
canvas.char-avatar--pixel {
  box-sizing: content-box;
  width: calc(var(--s) * 0.78 * var(--ratio));
  height: calc(var(--s) * 0.78);
  padding: calc(var(--s) * 0.14) calc((var(--s) - var(--s) * 0.78 * var(--ratio)) / 2) calc(var(--s) * 0.08);
}
@media (prefers-reduced-motion: reduce) {
  .char-avatar--walk { animation: none; }
}

.char-now { display: flex; align-items: center; gap: 14px; }
.char-now__text { display: grid; gap: 4px; justify-items: start; }
.char-now__text span { font-size: 0.88rem; color: var(--ink-soft); }
.char-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; border: 0; }
.char-option--locked { opacity: 0.55; cursor: not-allowed; }
/* ช่องใส่รหัสรับตัวละครพิเศษ */
.char-unlock { display: grid; gap: 6px; margin-top: 12px; padding: 12px 14px; background: var(--mint-100); border-radius: 10px; }
.char-unlock__row { display: flex; flex-wrap: wrap; gap: 8px; }
.char-unlock__row .input { flex: 1 1 200px; min-width: 0; font-family: var(--font-mono); text-transform: uppercase; }
.char-option--locked:has(input:checked) { opacity: 1; }
.char-option {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px;
  text-align: center;
  background: var(--mint-100);
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}
.char-option input { position: absolute; opacity: 0; pointer-events: none; }
.char-option:has(input:checked) { border-color: var(--green-600); background: #fff; }
.char-option:has(input:focus-visible) { outline: 3px solid var(--coral-400); outline-offset: 1px; }
.char-option__name { font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; }
.char-option small { font-size: 0.75rem; color: var(--ink-soft); }
.welcome h2 { font-family: var(--font-mono); font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 700; }
.welcome p { color: var(--ink-soft); }
.suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }

/* ข้อความในงาน */
.messages { display: grid; gap: 22px; max-width: 800px; margin: 0 auto; padding: 0; list-style: none; }
.messages:empty { display: none; }

.msg { display: grid; gap: 8px; min-width: 0; scroll-margin-top: 16px; }
.msg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); }
.msg__meta .tag { margin: 0; background: var(--warn-bg); color: var(--ink); }
.msg__actions { display: flex; flex-wrap: wrap; gap: 6px; }

.msg--user { justify-items: end; margin-left: 12%; }
.msg--user .msg__actions { justify-content: flex-end; }

.bubble {
  max-width: 100%;
  padding: 12px 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--mint-50);
  border: 1px solid var(--mint-300);
  border-radius: 18px 18px 4px 18px;
}

.bubble--collapsed {
  max-height: 11.5em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}

.linklike {
  padding: 0;
  font: inherit;
  font-size: 0.82rem;
  color: var(--green-600);
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}

.msg--draft { grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 12px; }
.msg__body { display: grid; gap: 10px; min-width: 0; }

.msg__avatar { display: grid; place-items: center; width: 32px; height: 32px; background: var(--ink); border-radius: 10px; }
.msg__avatar svg { width: 12px; height: 14px; }

.draft__text {
  padding: 16px 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.75;
  background: #fff;
  border: 1px solid var(--mint-300);
  border-radius: 4px 18px 18px 18px;
}

.draft__edit { display: grid; gap: 8px; }
.draft__editor { min-height: 200px; resize: vertical; }


.msg--pending .pending__text { font-size: 0.9rem; color: var(--ink-soft); }
.msg--pending .progress { max-width: 320px; }

/* ช่องพิมพ์ */
.composer {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  padding: 8px 20px 12px;
}

.composer__tabs { justify-self: start; }
.composer__tabs [role="tab"] { flex: none; min-height: 32px; padding: 0 14px; font-size: 0.84rem; }

.composer__box {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--mint-300);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.composer__box:focus-within { border-color: var(--green-400); box-shadow: 0 0 0 3px rgba(111, 152, 134, 0.25), var(--shadow); }
.composer__box.is-dragover { border-style: dashed; border-color: var(--coral-600); background: #FDF0EC; }
/* ปุ่ม + ช่องพิมพ์ 1 บรรทัด และปุ่มส่ง สูง 40px เท่ากัน จึงอยู่แนวเดียวกัน
   พิมพ์หลายบรรทัดแล้วปุ่มทั้งสองยังอยู่ชิดล่าง */
.composer__add { width: 40px; height: 40px; border-radius: 50%; }
.composer__add svg { width: 14px; height: 14px; }

.composer__box textarea {
  flex: 1;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  max-height: 40vh;
  padding: 8px 4px;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
  resize: none;
}

.composer__box textarea:disabled { cursor: default; }
.composer__box textarea:disabled::placeholder { color: var(--green-600); }

/* ไฟล์ PDF ที่แนบให้ AI อ่านเอง (แพ็กเล็ก/แพ็กใหญ่) */
.attach-area { display: grid; gap: 6px; }
.attach-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.attach-note { padding: 0 4px; font-size: 0.75rem; color: var(--ink-soft); }
.attach-note .linklike { font-size: 0.75rem; }
.attach__icon { display: inline-flex; }
.attach__icon svg { width: 24px; height: 28px; }
.attach .icon-btn span { display: grid; place-items: center; }

.attach {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  max-width: 100%;
  padding: 6px 6px 6px 10px;
  background: #fff;
  border: 1px solid var(--mint-300);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.attach__icon { width: 24px; height: 28px; flex: none; }
.attach__text { display: grid; min-width: 0; line-height: 1.35; }
.attach__text strong { font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach__text small { font-size: 0.75rem; color: var(--ink-soft); }
.attach .icon-btn { width: 32px; height: 32px; }
.attach .icon-btn svg { width: 16px; height: 16px; }

.bubble--file { display: grid; gap: 2px; border-left: 4px solid var(--coral-400); }
.bubble--file small { font-size: 0.78rem; color: var(--ink-soft); }
.msg__note { font-size: 0.8rem; color: var(--ink-soft); text-align: right; }

.composer__box textarea::placeholder { color: #7A8F89; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.send-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  color: #fff;
  background: var(--coral-600);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.send-btn svg { width: 20px; height: 20px; }
.send-btn:hover:not(:disabled) { background: var(--coral-700); }
.send-btn:focus-visible { outline: 3px solid var(--coral-400); outline-offset: 2px; }
.send-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.composer.is-busy .send-btn { opacity: 0.6; animation: pulse 1.2s ease-in-out infinite; }

@keyframes pulse {
  50% { transform: scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .composer.is-busy .send-btn { animation: none; }
}

.composer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 2px 4px; }
/* เครดิตอยู่ท้ายแถวเดียวกับความยาว/น้ำเสียง (หลอดสั้นลง) */
.composer__bar .credit-meter { margin-left: auto; }
.composer__bar .credit-meter__bar { flex: none; width: 90px; }
.composer__bar .counter { font-family: var(--font-text); font-size: 0.82rem; }
@media (max-width: 640px) {
  .composer__bar .credit-meter { flex: 1 1 100%; margin-left: 0; }
  .composer__bar .credit-meter__link { flex: 1; }
  .composer__bar .credit-meter__bar { flex: 1; width: auto; }
}
/* คำแนะนำท้ายช่องพิมพ์ แสดงเฉพาะก่อนเริ่มงาน (มีข้อความในงานแล้วซ่อน ให้หน้าดูไม่รก) */
.view--chat:has(#messages:not(:empty)) .composer__note { display: none; }

/* กล่องเลือกแบบเม็ดยา: ชื่อ (สีอ่อน) และค่าที่เลือก (ตัวหนา) อยู่ในเม็ดเดียวกัน ไม่มีขอบซ้อน */
.mini-select {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 34px;
  padding: 0 4px 0 14px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: var(--mint-50);
  border: 1px solid var(--mint-300);
  border-radius: 999px;
  cursor: pointer;
}
.mini-select:hover { background: #fff; }
.mini-select:focus-within { outline: 3px solid var(--coral-400); outline-offset: 2px; }
.mini-select select {
  min-height: 32px;
  padding: 0 6px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.mini-select select:focus { outline: none; }

.composer__note { padding: 0 6px; font-size: 0.72rem; color: var(--ink-soft); text-align: center; }

.scrim { position: fixed; inset: 0; z-index: 25; background: rgba(31, 59, 53, 0.35); }

/* จอใหญ่: แถบซ้ายแสดงอยู่แล้ว ซ่อนปุ่มเปิดบนแถบบน */
@media (min-width: 900px) {
  .shell:not(.shell--collapsed) #sidebar-open { display: none; }
}

/* จอเล็ก: แถบซ้ายเลื่อนออกมาทับ */
@media (max-width: 899px) {
  .shell, .shell--collapsed { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(300px, 86vw);
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.2s, visibility 0.2s;
    box-shadow: 0 0 40px -10px rgba(31, 59, 53, 0.5);
  }
  .shell--open .sidebar { visibility: visible; transform: none; }
  .topbar { padding: 8px 10px; }
  .chat { padding: 16px 12px 8px; }
  .composer { padding: 6px 10px 10px; }
  .msg--user { margin-left: 6%; }
  .msg--draft { grid-template-columns: minmax(0, 1fr); }
  .msg__avatar { display: none; }
  .composer__note { display: none; }
  .view__inner { padding: 16px 12px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .shell, .sidebar { transition: none; }
}

/* ---------- จอเตี้ย (โน้ตบุ๊ก): ย่อส่วนบนให้สะพานและตัวละครอยู่ในจอตั้งแต่เปิดหน้า ---------- */
@media (min-width: 761px) and (max-height: 860px) {
  .hero { padding-bottom: 215px; }
  .nav { padding-top: 12px; padding-bottom: 8px; }
  .hero__content { padding-top: 4px; }
  .hero__title { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
  .hero__lead { margin-top: 8px; font-size: 0.9rem; }
  .features { margin-top: 16px; gap: 16px; }
  .feature svg { width: 24px; height: 24px; }
  .feature h2 { margin-top: 4px; font-size: 0.88rem; }
  .feature p { font-size: 0.8rem; }
  .hero__actions { margin-top: 16px; }
  .hero__actions .btn { min-height: 38px; }
}

@media (min-width: 761px) and (max-height: 620px) {
  .hero { padding-bottom: 190px; }
  .hero__lead { display: none; }
  .feature p { display: none; }
  .features { margin-top: 12px; }
  .hero__actions { margin-top: 12px; }
}

/* ---------- จอเล็ก ---------- */
@media (max-width: 760px) {
  .hero { padding-bottom: 190px; }
  .nav { padding: 14px 16px; gap: 10px; }
  .nav__links { display: none; }
  .nav .btn--small { margin-left: auto; }
  .receipt { grid-template-columns: 1fr; gap: 0; }
  .receipt dd { margin-bottom: 6px; }
  .nav__brand-en { display: none; }
  .hero__content { padding: 12px 16px 0; }
  .features { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; text-align: left; }
  .feature { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; }
  .feature svg { grid-row: span 2; }
  .feature h2 { margin-top: 0; }
  .card { padding: 16px; }
  .actions .btn { flex: 1 1 auto; }
  .file { grid-template-columns: auto auto 1fr; }
  .file__actions { grid-column: 1 / -1; justify-content: flex-start; }
  .select { flex: 1 1 140px; }
}