:root{
  --bg:#1a140d; --panel:#241b12; --panel2:#2d2216; --ink:#f3e7d2; --muted:#bfa97f;
  --gold:#d8b25a; --gold-dim:#a8853c; --line:#4a3a26; --accent:#caa24a; --free:#6fae6f; --paid:#d99a55;
  --shadow:0 6px 24px rgba(0,0,0,.45);
  --topbar-h:58px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html{height:100%}
body{
  margin:0; color:var(--ink); line-height:1.7;
  font-family:"Sarabun","Noto Sans Thai","Segoe UI",system-ui,sans-serif;
  background:radial-gradient(1200px 700px at 50% -8%, #2a2013 0%, #100c07 65%);
  /* ล็อกความสูงเท่าหน้าจอ — ตัวเฟรมไม่เลื่อน เลื่อนเฉพาะเนื้อหาด้านใน */
  height:100vh; height:100dvh; overflow:hidden;
  display:flex; flex-direction:column;
}
/* พื้นที่เนื้อหาใต้แถบหัว — เลื่อนภายในตัวเอง */
#content{flex:1 1 auto; min-height:0; overflow:hidden; position:relative}
#content > .view, #content > #view-chat{height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch}
#content > #view-chat{overflow:hidden; padding:0}   /* แชทเต็มขอบ — แถบพิมพ์ชิดล่าง */
a{color:var(--gold)}
.hidden{display:none !important}
.gold{color:var(--gold)} .muted{color:var(--muted)}
button{font-family:inherit}

/* ---------- scrollbar (เข้าธีม ทอง/เข้ม) ---------- */
*{scrollbar-width:thin; scrollbar-color:var(--gold-dim) transparent}
::-webkit-scrollbar{width:9px; height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold-dim),var(--line)); border-radius:9px; border:2px solid var(--bg); background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
::-webkit-scrollbar-corner{background:transparent}

/* ---------- top bar ---------- */
.topbar{flex:0 0 auto; z-index:30; display:flex; align-items:center; gap:10px;
  padding:12px 20px; padding-top:calc(12px + env(safe-area-inset-top));
  padding-left:calc(20px + env(safe-area-inset-left)); padding-right:calc(20px + env(safe-area-inset-right));
  background:rgba(26,20,13,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:10px; cursor:pointer; min-width:0}
.brand .seal{font-size:1.4rem; flex:0 0 auto}
.brandtxt{display:flex; flex-direction:column; line-height:1.12; min-width:0; overflow:hidden}
.brand b{color:var(--gold); font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* คำเตือน (disclaimer) ใต้ชื่อ — แสดงนิ่ง ไม่เลื่อน (wrap หลายบรรทัด อ่านครบ) */
.brandsub{font-size:.52rem; color:var(--muted); font-style:normal; letter-spacing:.1px;
  display:none; white-space:normal; line-height:1.3; max-width:min(58vw, 560px)}
/* หน้าแชท: top-left โชว์เฉพาะ disclaimer (ซ่อนชื่อ); หน้าอื่น: โชว์เฉพาะชื่อ */
#brandHome.is-chat b{display:none}
#brandHome.is-chat .brandsub{display:block}
.topbar .spacer{flex:1}
.chip{background:var(--panel2); border:1px solid var(--line); color:var(--accent);
  border-radius:999px; padding:5px 12px; font-size:.82rem; font-weight:600; white-space:nowrap; cursor:pointer}
.chip:hover{border-color:var(--gold-dim)}
#app-shell{display:flex; gap:8px; margin-left:8px}
#app-shell .ic{display:none}

/* ---------- buttons ---------- */
.btn{border:none; border-radius:13px; padding:13px 18px; font-size:1rem; font-weight:600; cursor:pointer; width:100%}
.btn.gold{background:linear-gradient(180deg,var(--gold),var(--gold-dim)); color:#231a0f}
.btn.ghost{background:var(--panel); color:var(--ink); border:1px solid var(--line)}
.btn.apple{background:#000; color:#fff; border:1px solid #333}
.btn.google{background:#fff; color:#222}
.btn.line{background:#06C755; color:#fff}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.small{width:auto; padding:9px 16px; font-size:.9rem}

/* ---------- landing ---------- */
.hero{max-width:880px; margin:0 auto; padding:54px 22px 20px; text-align:center}
.hero .ring{width:150px;height:150px;border-radius:50%;margin:0 auto 14px;
  background:radial-gradient(circle at 50% 40%, #3a2c16, #14100a 70%);
  border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; font-size:3rem;
  box-shadow:inset 0 0 30px rgba(216,178,90,.18), var(--shadow)}
.hero h1{color:var(--gold); font-size:2.1rem; margin:.2em 0 .1em}
.hero .sub{color:var(--muted); max-width:560px; margin:.4em auto 1.2em}
.hero .cta{max-width:320px; margin:0 auto}
.section{max-width:880px; margin:0 auto; padding:26px 22px}
.section h2{color:var(--gold); text-align:center; margin-bottom:4px}
.section .lead{color:var(--muted); text-align:center; margin-bottom:20px}

/* example chat cards */
.examples{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.excard{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.excard .tag{display:inline-block; font-size:.72rem; color:var(--accent); border:1px solid var(--gold-dim);
  border-radius:999px; padding:2px 10px; margin-bottom:10px}
.exq{align-self:flex-end; background:linear-gradient(180deg,#3a2c16,#2d2216); border:1px solid var(--gold-dim);
  border-radius:14px 14px 4px 14px; padding:9px 13px; margin:0 0 10px auto; max-width:90%; font-size:.92rem}
.exa{background:var(--panel2); border:1px solid var(--line); border-radius:14px 14px 14px 4px;
  padding:11px 14px; font-size:.92rem; white-space:pre-wrap}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:8px}
.step{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px}
.step .n{display:inline-flex; width:30px;height:30px; align-items:center; justify-content:center;
  border-radius:50%; background:var(--panel2); border:1px solid var(--gold-dim); color:var(--gold); font-weight:700; margin-bottom:8px}
.pricerow{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.pricecard{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 22px; text-align:center; min-width:120px}
.pricecard.best{border-color:var(--gold)}
.pricecard .c{color:var(--gold); font-size:1.4rem; font-weight:700}
.pricecard .p{color:var(--accent); font-weight:600}
.disc{color:var(--muted); font-size:.72rem; text-align:center; margin-top:18px}

/* ---------- app shell (after login) ---------- */
.app{max-width:680px; margin:0 auto; min-height:100%; display:flex; flex-direction:column; width:100%}
.view{padding:18px 18px 40px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:12px}
label.fld{display:block; color:var(--muted); font-size:.84rem; margin:14px 0 6px}
input,select,textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel2); color:var(--ink); font:inherit; font-size:.95rem; outline:none;
  transition:border-color .15s, box-shadow .15s}
/* กรอบไฮไลท์ตอนคลิก/โฟกัส — ขอบทอง + เรืองแสงนวล */
input:focus,select:focus,textarea:focus{border-color:var(--gold); box-shadow:0 0 0 2px rgba(216,178,90,.28)}
input[type="checkbox"],input[type="radio"]{width:auto; padding:0; margin:0; accent-color:var(--gold); flex:0 0 auto}
input[type="checkbox"]:focus,input[type="radio"]:focus{box-shadow:none}
textarea{resize:none}
.check label{cursor:pointer}
.row{display:flex; gap:10px} .row>*{flex:1}
.check{display:flex; align-items:center; gap:8px; margin-top:10px; color:var(--muted); font-size:.88rem}

/* chat */
#view-chat > .app{height:100%}   /* ให้ความสูง definite เพื่อให้ .chat เต็มพื้นที่ + .msgs เลื่อนได้ */
.chat{display:flex; flex-direction:column; height:100%; min-height:0}
.msgs{min-height:0}
.chat .head{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line)}
.avatar{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#3a2c16,#14100a);
  border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center}
.msgs{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px}
.bub{max-width:82%; padding:11px 14px; border-radius:16px; font-size:.95rem; white-space:pre-wrap; line-height:1.65}
.bub.bot{align-self:flex-start; background:var(--panel); border:1px solid var(--line); border-bottom-left-radius:5px}
.bub.me{align-self:flex-end; background:linear-gradient(180deg,#3a2c16,#2d2216); border:1px solid var(--gold-dim); border-bottom-right-radius:5px}
.bub.teaser{border-color:var(--gold-dim)}
.bub .tlabel{font-size:.7rem; color:var(--accent); margin-bottom:4px}
.inbar{padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--panel)}
.inrow{display:flex; gap:8px; align-items:flex-end}
#buyPrompt{margin-top:10px}   /* กันปุ่ม "ซื้อเครดิต" มาเกยช่องพิมพ์ (ตอนโชว์พร้อมกันในโหมดทดสอบ) */
.send{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;flex:0 0 auto;
  background:linear-gradient(180deg,var(--gold),var(--gold-dim)); color:#231a0f; font-size:1.1rem}
.send:disabled{cursor:not-allowed; opacity:.6}
.send.loading{color:transparent; position:relative}
.send.loading::after{content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
  border:2px solid rgba(35,26,15,.35); border-top-color:#231a0f; border-radius:50%; animation:sp .7s linear infinite}
.credline{text-align:center; color:var(--muted); font-size:.7rem; margin-top:6px; line-height:1.5}

/* reading catalog */
.prod{display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:13px 15px; margin-bottom:10px; cursor:pointer}
.prod:hover{border-color:var(--gold-dim)}
.prod .ic{font-size:1.5rem}
.prod .cost{margin-left:auto; background:var(--panel2); border:1px solid var(--gold-dim); color:var(--gold);
  border-radius:999px; padding:6px 12px; font-weight:700; font-size:.85rem}

/* QR / buy */
.qrbox{background:#fff; border-radius:14px; padding:18px; width:240px; margin:14px auto; text-align:center}
.qrbox img,.qrbox canvas{width:200px;height:200px}
.refbox{display:flex; gap:8px; align-items:center}
.refbox code{flex:1; background:var(--panel2); border:1px solid var(--gold-dim); color:var(--gold);
  padding:10px 14px; border-radius:10px; font-size:1.1rem; letter-spacing:2px; text-align:center}

/* modal */
.overlay{position:fixed; inset:0; background:rgba(8,6,3,.7); display:flex; align-items:center; justify-content:center; z-index:50; padding:18px}
.modal{background:var(--panel); border:1px solid var(--gold-dim); border-radius:18px; padding:22px; max-width:380px; width:100%; max-height:calc(100dvh - 32px); overflow-y:auto; box-shadow:var(--shadow)}
.modal h3{color:var(--gold); margin:0 0 8px}
/* แจ้งเตือน (toast) — กลางบนสุด เหนือแชท, ไถลลงมาจากด้านบน */
.toast{position:fixed; left:50%; top:calc(env(safe-area-inset-top) + 64px); transform:translate(-50%,-16px);
  background:#1d2a1d; border:1px solid var(--free); color:#d8f0d8; padding:10px 18px; border-radius:999px;
  z-index:60; opacity:0; transition:opacity .3s, transform .3s; max-width:calc(100% - 28px); text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.45)}
.toast.show{opacity:1; transform:translate(-50%,0)}
.spin{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;
  animation:sp 1s linear infinite; display:inline-block; vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}
.typing{align-self:flex-start; display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.85rem; padding:8px 4px}
.typing .spin{width:18px;height:18px;border-width:2px}
.tdots::after{content:""; animation:dots 1.4s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}}
/* จุดสถานะ "มีชีวิต" — หายใจ + เรืองแสงช้า ๆ ให้ดูศักดิ์สิทธิ์ */
.livedot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--free);
  vertical-align:middle; margin-right:3px; animation:breathe 2.8s ease-in-out infinite}
@keyframes breathe{
  0%,100%{ opacity:.45; transform:scale(.82); box-shadow:0 0 2px var(--free) }
  50%{ opacity:1; transform:scale(1.12); box-shadow:0 0 10px 2px var(--free) }
}
@media (prefers-reduced-motion: reduce){ .livedot{ animation:none; opacity:.9 } }

/* ===================== RESPONSIVE ===================== */

/* แท็บเล็ต — กว้างขึ้นนิดให้อ่านสบาย */
@media (min-width: 641px) and (max-width: 1024px){
  .app{ max-width:560px; }
}

/* แชทเป็น "module" กลางจอ + มีกรอบซ้าย-ขวา (จอ tablet ขึ้นไป) */
@media (min-width: 641px){
  #view-chat > .app{
    max-width:760px;
    border-left:1px solid var(--line); border-right:1px solid var(--line);
    box-shadow:0 0 48px rgba(0,0,0,.4);
  }
}
@media (min-width: 1280px){ #view-chat > .app{ max-width:860px; } }

/* มือถือ (≤640px) — เน้นแนวตั้ง */
@media (max-width: 640px){
  :root{ --topbar-h:54px; }
  .topbar{ padding:9px 12px; padding-top:calc(9px + env(safe-area-inset-top)); gap:8px; }
  .brand b{ font-size:1rem; }
  .brandsub{ font-size:.5rem; }
  .chip{ padding:5px 10px; font-size:.76rem; }

  /* แถบนำทางบนหัว → ไอคอนล้วน (กันล้น) */
  #app-shell{ gap:6px; margin-left:6px; }
  #app-shell .lbl{ display:none; }
  #app-shell .ic{ display:flex; align-items:center; justify-content:center; line-height:1; }
  #app-shell .btn.small{ width:40px; height:40px; padding:0; font-size:1.2rem; border-radius:12px; }

  /* landing */
  .hero{ padding:34px 18px 12px; }
  .hero .ring{ width:120px; height:120px; font-size:2.4rem; }
  .hero h1{ font-size:1.7rem; }
  .hero .sub{ font-size:.92rem; }
  .hero .cta, .section .cta{ max-width:none; }
  .section{ padding:22px 16px; }
  .section h2{ font-size:1.3rem; }
  .examples{ grid-template-columns:1fr; gap:12px; }
  .steps{ grid-template-columns:1fr; }
  .pricecard{ min-width:0; flex:1 1 40%; padding:14px 10px; }
  .pricecard .c{ font-size:1.25rem; }

  /* แอป (auth/birth/chat/อื่นๆ) */
  .view{ padding:16px 14px 32px; }
  .msgs{ padding:14px 12px; }
  .bub{ max-width:88%; }

  /* กัน iOS zoom ตอนแตะช่องกรอก (ต้อง ≥16px) */
  input, select, textarea{ font-size:16px; }
}

/* มือถือเล็กมาก (≤360px) — ย่อแบรนด์เหลือสัญลักษณ์ */
@media (max-width: 360px){
  .brandsub{ max-width:60vw; font-size:.46rem; }   /* จอเล็กมาก: จำกัดความกว้าง + ย่อฟอนต์ */
  #app-shell{ gap:5px; }
  #app-shell .btn.small{ width:36px; height:36px; font-size:1.1rem; }
  .chip{ font-size:.72rem; padding:4px 8px; }
  .hero h1{ font-size:1.55rem; }
}

/* มือถือแนวนอน (เตี้ย) — ลด hero ไม่ให้ล้นจอ */
@media (orientation: landscape) and (max-height: 520px){
  .hero{ padding:18px 18px 8px; }
  .hero .ring{ width:84px; height:84px; font-size:1.8rem; margin-bottom:8px; }
  .hero h1{ font-size:1.5rem; margin:.1em 0; }
  .hero .sub{ margin:.3em auto .8em; }
  .section{ padding:16px; }
}

/* จอใหญ่ (PC) */
@media (min-width: 1025px){
  .hero h1{ font-size:2.3rem; }
  .hero{ padding-top:64px; }
}