/* =====================================================================
   เพื่อนแล้วเพื่อนเล่า — design system
   โทน: สว่าง อบอุ่น · ภาษาไทยมีพื้นที่หายใจ · ปุ่มแตะง่ายบนมือถือ
   ===================================================================== */

/* ---------- ฟอนต์ไทย (self-host — ไม่ส่ง IP ผู้ใช้ไป third party) ---------- */
@font-face{
  font-family:'Plex Thai Looped'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/vendor/fonts/plex-thai-looped-thai-400.woff2') format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:'Plex Thai Looped'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/vendor/fonts/plex-thai-looped-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plex Thai Looped'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/vendor/fonts/plex-thai-looped-thai-500.woff2') format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:'Plex Thai Looped'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/vendor/fonts/plex-thai-looped-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plex Thai Looped'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/vendor/fonts/plex-thai-looped-thai-600.woff2') format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:'Plex Thai Looped'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/vendor/fonts/plex-thai-looped-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plex Thai Looped'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/vendor/fonts/plex-thai-looped-thai-700.woff2') format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:'Plex Thai Looped'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/vendor/fonts/plex-thai-looped-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- design tokens ---------- */
:root{
  /* พื้นผิว: ครีมอุ่น ไม่ใช่ขาวจ้า */
  --bg:#FFFBF7;
  --surface:#FFFFFF;
  --card:#FFF3EA;
  --card-2:#FFE9DC;
  --line:#F0DED2;
  --line-strong:#E3C9B8;

  /* ตัวอักษร: น้ำตาลเข้ม อ่านสบายกว่าดำสนิท */
  --ink:#2E211C;
  --sub:#6F5A50;
  --dim:#9A8275;

  /* สีแบรนด์: ส้มอิฐอุ่น + เขียวมิ้นต์ */
  --primary:#E2512B;
  --primary-2:#FF8A5B;
  --grad:linear-gradient(135deg,#E2512B,#FF9066);
  --accent:#0B8C7D;
  --accent-soft:#E4F5F1;
  --danger:#C93648;
  --danger-soft:#FDECEE;
  --warn:#B57614;
  --warn-soft:#FFF6E5;

  /* ระยะ */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px;

  /* มุมโค้ง */
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-pill:999px;

  /* ตัวอักษร: ภาษาไทยต้องมี line-height สูงกว่าละติน */
  --t-xs:13px; --t-sm:14.5px; --t-base:16px; --t-lg:18px; --t-xl:21px; --t-2xl:27px;
  --lh:1.72;

  /* เงา: นุ่ม ไม่หนัก */
  --sh-1:0 1px 3px rgba(93,58,40,.06), 0 4px 12px rgba(93,58,40,.05);
  --sh-2:0 2px 6px rgba(93,58,40,.07), 0 10px 28px rgba(93,58,40,.09);
  --sh-primary:0 6px 20px rgba(226,81,43,.28);
}

/* ---------- reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; }

body{
  min-height:100dvh;
  background:#F6EDE5; color:var(--ink);
  font-family:'Plex Thai Looped','Noto Sans Thai Looped','Sarabun',system-ui,-apple-system,sans-serif;
  font-size:var(--t-base); line-height:var(--lh);
  display:flex; justify-content:center; align-items:center;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}

#app{
  width:100%; max-width:430px;
  height:100dvh; max-height:940px;
  background:var(--bg);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 0 70px rgba(93,58,40,.14);
}
@media(min-width:480px){
  #app{ border-radius:28px; height:92dvh; min-height:700px; }
}

button{ font-family:inherit; font-size:inherit; border:none; cursor:pointer; background:none; color:inherit; }
input,select{ font-family:inherit; }
a{ color:var(--accent); }

/* เปิดให้ผู้ใช้ขยายตัวอักษรได้ — สำคัญสำหรับผู้สูงวัย */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- screens ---------- */
.screen{ position:absolute; inset:0; display:none; flex-direction:column; }
.screen.active{ display:flex; animation:fadein .22s ease; }
@keyframes fadein{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

/* ---------- ปุ่ม ---------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  width:100%; min-height:56px; padding:var(--s4) var(--s5);
  border-radius:var(--r-md);
  font-size:var(--t-lg); font-weight:600; line-height:1.3;
  background:var(--grad); color:#fff;
  box-shadow:var(--sh-primary);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn:active{ transform:scale(.975); box-shadow:0 3px 10px rgba(226,81,43,.22); }
.btn:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.btn.ghost{
  background:var(--surface); color:var(--ink);
  border:1.5px solid var(--line-strong); box-shadow:none;
}
.btn.ghost:active{ background:var(--card); }
.btn.danger{ background:var(--danger); box-shadow:0 6px 18px rgba(201,54,72,.24); }
.btn:disabled{ opacity:.45; pointer-events:none; box-shadow:none; }
.btn + .btn{ margin-top:var(--s3); }

/* ปุ่มย้อนกลับ — ใช้ทั้ง onboarding / แชท / สาย */
.back{
  width:44px; height:44px; border-radius:50%;
  background:var(--surface); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:19px; color:var(--ink); flex:0 0 44px;
  box-shadow:var(--sh-1);
}
.back:active{ background:var(--card); }

.icon-btn{
  width:44px; height:44px; border-radius:var(--r-sm);
  background:var(--surface); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-1);
}
.dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); }

/* ---------- welcome ---------- */
#scr-welcome{
  justify-content:center; gap:var(--s6);
  padding:calc(var(--s6) + env(safe-area-inset-top)) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom));
  background:radial-gradient(120% 62% at 50% 18%, #FFE7D6 0%, var(--bg) 66%);
}
.welcome-hero{ text-align:center; }
.welcome-hero .moon{ display:block; margin-bottom:var(--s3); }
.welcome-hero h1{
  font-size:var(--t-2xl); font-weight:700; line-height:1.38; color:var(--ink);
  letter-spacing:-0.01em;
}
.welcome-hero h1 em{ font-style:normal; color:var(--primary); }
.welcome-hero p{ color:var(--sub); font-size:var(--t-sm); margin-top:var(--s3); line-height:1.75; }

.welcome-points{ display:flex; flex-direction:column; gap:var(--s2); margin:0 0 var(--s5); }
.welcome-points li{
  list-style:none; display:flex; align-items:flex-start; gap:var(--s3);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--s3) var(--s4);
  font-size:var(--t-sm); color:var(--sub); box-shadow:var(--sh-1); line-height:1.65;
}
.welcome-points li b{ color:var(--ink); font-weight:600; }
.welcome-points .pi{ flex:0 0 22px; padding-top:1px; }

.legal{ text-align:center; font-size:var(--t-xs); color:var(--dim); margin-top:var(--s4); line-height:1.7; }
.legal a{ color:var(--sub); text-decoration:underline; text-underline-offset:2px; }

/* ---------- onboarding ---------- */
.onb{ padding:0 var(--s5) calc(var(--s5) + env(safe-area-inset-bottom)); display:flex; flex-direction:column; flex:1; min-height:0; }
.onb-top{ padding-top:calc(var(--s4) + env(safe-area-inset-top)); display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s5); }
.step-dots{ display:flex; gap:6px; align-items:center; }
.step-dots i{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); display:block; }
.step-dots i.on{ background:var(--primary); width:22px; border-radius:var(--r-pill); }
.onb h3{ font-size:var(--t-xl); font-weight:700; line-height:1.5; margin-bottom:var(--s2); }
.onb .hint{ color:var(--sub); font-size:var(--t-sm); margin-bottom:var(--s5); line-height:1.7; }

.agegrid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-bottom:var(--s4); }
.agegrid button{
  min-height:64px; padding:var(--s3) var(--s2);
  border-radius:var(--r-md); background:var(--surface);
  border:1.5px solid var(--line);
  font-size:var(--t-base); font-weight:600; color:var(--ink);
  text-align:center; transition:.14s ease; box-shadow:var(--sh-1);
}
.agegrid button small{ display:block; font-size:var(--t-xs); color:var(--dim); font-weight:400; margin-top:3px; line-height:1.4; }
.agegrid button.sel{
  border-color:var(--primary); background:#FFF0E8;
  box-shadow:0 0 0 2px rgba(226,81,43,.18);
}
.agegrid button.sel small{ color:var(--primary); }

/* consent — ให้ checkbox และปุ่มติดล่างเสมอ (เนื้อหายาวได้) */
#scr-consent .onb{ overflow:hidden; }
.consent-scroll{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-right:2px; margin-bottom:var(--s3);
}
/* เมื่อเปิดฉบับเต็ม ให้ซ่อนกล่องสรุปเพื่อให้อ่านได้เต็มตา */
.consent-scroll.full .consent-summary{ display:none; }
.terms-toggle{ margin-bottom:var(--s3); }
.consent-summary{
  background:var(--card); border:1.5px solid var(--line-strong);
  border-radius:var(--r-lg); padding:var(--s4) var(--s5); margin-bottom:var(--s4);
}
.consent-summary h4{ font-size:var(--t-base); font-weight:700; margin-bottom:var(--s3); color:var(--ink); }
.consent-summary ul{ display:flex; flex-direction:column; gap:var(--s2); padding-left:0; }
.consent-summary li{
  list-style:none; position:relative; padding-left:var(--s5);
  font-size:var(--t-sm); color:var(--sub); line-height:1.7;
}
.consent-summary li::before{
  content:'✓'; position:absolute; left:0; top:0; color:var(--accent); font-weight:700;
}
.consent-summary li b{ color:var(--ink); font-weight:600; }

.terms-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s4); border-radius:var(--r-md);
  background:var(--surface); border:1.5px solid var(--line);
  font-size:var(--t-sm); color:var(--ink); font-weight:600; text-align:left;
  box-shadow:var(--sh-1);
}
.terms-toggle .chev{ transition:transform .2s ease; color:var(--dim); }
.terms-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }

.terms-full{ display:none; margin-top:var(--s3); }
.terms-full.open{ display:block; }

.toc{ padding-bottom:var(--s4); }
.toc h4{ font-size:var(--t-sm); font-weight:700; color:var(--ink); margin:var(--s5) 0 var(--s2); }
.toc h4.first{ margin-top:var(--s2); }
.toc p,.toc li{ font-size:var(--t-sm); color:var(--sub); line-height:1.8; }
.toc p{ margin-bottom:var(--s3); }
.toc ul{ margin:0 0 var(--s3) var(--s5); display:grid; gap:var(--s2); }
.toc b{ color:var(--ink); font-weight:600; }

.consent{
  display:flex; gap:var(--s3); align-items:flex-start;
  background:var(--surface); border:1.5px solid var(--line-strong);
  border-radius:var(--r-md); padding:var(--s4);
  font-size:var(--t-sm); color:var(--sub); margin:var(--s4) 0;
  line-height:1.7;
}
.consent{ position:relative; }
.consent input{
  width:26px; height:26px; margin-top:1px; flex:0 0 26px;
  accent-color:var(--primary); border-radius:7px;
  border:2px solid var(--line-strong); appearance:none; background:var(--surface);
  cursor:pointer; transition:.14s ease;
}
.consent input:checked{
  background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/16px no-repeat;
  border-color:var(--primary);
}
.consent input:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.consent b{ color:var(--ink); font-weight:600; }

/* ---------- home ---------- */
#scr-home{ padding:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.home-head{
  padding:calc(var(--s5) + env(safe-area-inset-top)) var(--s5) var(--s3);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
}
.home-head .who{ display:flex; align-items:center; gap:var(--s3); min-width:0; }
.avatar{
  width:46px; height:46px; border-radius:50%; flex:0 0 46px;
  background:var(--card-2); display:flex; align-items:center; justify-content:center;
  font-size:22px; border:1.5px solid var(--line);
}
.home-head .hello b{ display:block; font-size:var(--t-base); font-weight:700; }
.home-head .hello span{ font-size:var(--t-xs); color:var(--sub); }

/* แถบสถานะเดียว — แทนแบนเนอร์ 3 ชั้นเดิม */
.status-bar{
  margin:0 var(--s5) var(--s2);
  display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  background:var(--accent-soft); border:1px solid #CDEBE5;
  border-radius:var(--r-sm); padding:10px var(--s4);
  font-size:var(--t-xs); color:#0A6B60;
}
.status-bar .live{ display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.status-bar .live i{ width:7px; height:7px; border-radius:50%; background:var(--accent); display:block;
  box-shadow:0 0 0 3px rgba(11,140,125,.16); }
.status-bar .sep{ opacity:.45; }
.status-bar .safe{ display:inline-flex; align-items:center; gap:5px; }

.resume-bar{
  margin:0 var(--s5) var(--s2); display:none; align-items:center; gap:var(--s3);
  background:var(--warn-soft); border:1px solid #F0DCB4; color:#7A5210;
  border-radius:var(--r-sm); padding:10px var(--s4); font-size:var(--t-xs);
}
.resume-bar b{ font-weight:600; }
.resume-bar button{
  margin-left:auto; background:#fff; border:1px solid #E9D3A8; color:#7A5210;
  border-radius:var(--r-pill); padding:6px 14px; font-size:var(--t-xs); font-weight:600; white-space:nowrap;
}

.mode-title{ padding:var(--s4) var(--s5) var(--s3); font-size:var(--t-sm); color:var(--sub); font-weight:600; }
.mode-list{ padding:0 var(--s5); display:flex; flex-direction:column; gap:var(--s3); }
.mode{
  display:flex; align-items:center; gap:var(--s4); width:100%;
  padding:var(--s4) var(--s4); min-height:82px;
  border-radius:var(--r-lg); background:var(--surface);
  border:2px solid var(--line); text-align:left;
  transition:.15s ease; box-shadow:var(--sh-1);
}
.mode.sel{ border-color:var(--primary); background:#FFF6F0; box-shadow:0 0 0 2px rgba(226,81,43,.14), var(--sh-1); }
.mode .ic{
  flex:0 0 52px; height:52px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; font-size:25px;
  background:var(--card);
}
.mode.sel .ic{ background:var(--card-2); }
.mode .tx{ flex:1; min-width:0; }
.mode .tx b{ display:block; font-size:var(--t-lg); font-weight:700; }
.mode .tx span{ font-size:var(--t-xs); color:var(--sub); line-height:1.6; }
.mode .radio{
  width:22px; height:22px; border-radius:50%; flex:0 0 22px;
  border:2px solid var(--line-strong); transition:.15s ease;
}
.mode.sel .radio{ border-color:var(--primary); background:radial-gradient(circle at center,var(--primary) 42%,transparent 46%); }

.home-cta{ margin:var(--s5) var(--s5) 0; }
.wait-est{
  text-align:center; margin-top:var(--s3); font-size:var(--t-xs); color:var(--sub); line-height:1.7;
}
.wait-est b{ color:var(--ink); font-weight:600; }
.home-foot{
  margin-top:var(--s5); padding:var(--s4) var(--s5) calc(var(--s4) + env(safe-area-inset-bottom));
  text-align:center; font-size:var(--t-xs); color:var(--dim); line-height:1.9;
}
.home-foot a{ color:var(--sub); text-decoration:underline; text-underline-offset:2px; }
.home-foot .danger-link{ color:var(--danger); }

/* ---------- queue ---------- */
#scr-queue{ justify-content:center; align-items:center; text-align:center; padding:var(--s6) var(--s5); }
.pulse{ position:relative; width:170px; height:170px; margin:0 auto var(--s6); }
.pulse .ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(226,81,43,.32);
  animation:ring 2s ease-out infinite;
}
.pulse .ring:nth-child(2){ animation-delay:.66s; }
.pulse .ring:nth-child(3){ animation-delay:1.33s; }
@keyframes ring{ 0%{ transform:scale(.6); opacity:1 } 100%{ transform:scale(1.3); opacity:0 } }
.pulse .core{
  position:absolute; inset:34px; border-radius:50%;
  background:var(--grad); display:flex; align-items:center; justify-content:center;
  font-size:48px; box-shadow:0 8px 30px rgba(226,81,43,.3);
}
#scr-queue h3{ font-size:var(--t-xl); font-weight:700; }
#scr-queue .st{ color:var(--sub); font-size:var(--t-sm); margin-top:var(--s3); min-height:52px; line-height:1.7; }
#scr-queue .meta{ margin-top:var(--s4); display:flex; gap:var(--s2); justify-content:center; flex-wrap:wrap; }
.cancel-q{
  margin-top:var(--s7); color:var(--sub); font-size:var(--t-sm);
  text-decoration:underline; text-underline-offset:3px; padding:var(--s3);
}

/* ---------- chat ---------- */
.chat-head{
  padding:calc(var(--s3) + env(safe-area-inset-top)) var(--s4) var(--s3);
  background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:var(--s3);
}
.chat-head .title{ font-size:var(--t-base); font-weight:700; line-height:1.4; }
.chat-head .sub{
  font-size:var(--t-xs); color:var(--accent);
  display:flex; align-items:center; gap:6px; line-height:1.4;
}
.chat-head .sub i{ width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; }
.flag-btn{
  margin-left:auto; width:44px; height:44px; border-radius:50%;
  background:var(--danger-soft); border:1.5px solid #F4C9CE;
  flex:0 0 44px;
  display:flex; align-items:center; justify-content:center;
}
.chat-body{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:var(--s4) var(--s4) var(--s3);
  display:flex; flex-direction:column; gap:var(--s2);
  background:var(--bg);
}
/* ดันข้อความชิดล่างเมื่อมีน้อย แต่ยังเลื่อนอ่านย้อนหลังได้เมื่อมีมาก */
.chat-body > :first-child{ margin-top:auto; }
.sysmsg{ text-align:center; font-size:var(--t-xs); color:var(--dim); margin:var(--s3) 0; }
.sysmsg .pill{
  display:inline-block; background:var(--surface); border:1px solid var(--line);
  padding:7px 16px; border-radius:var(--r-pill); line-height:1.6;
}
.bubble{
  max-width:80%; padding:12px 16px; border-radius:20px;
  font-size:var(--t-base); line-height:1.62; word-break:break-word;
  box-shadow:var(--sh-1);
}
.bubble.me{ align-self:flex-end; background:var(--primary); color:#fff; border-bottom-right-radius:7px; }
.bubble.them{ align-self:flex-start; background:var(--surface); border-bottom-left-radius:7px; }
.bubble .t{ display:block; font-size:11px; opacity:.62; margin-top:4px; text-align:right; letter-spacing:.2px; }
.typing{
  align-self:flex-start; display:flex; gap:5px; padding:16px 18px;
  background:var(--surface); border-radius:20px; border-bottom-left-radius:7px;
  box-shadow:var(--sh-1);
}
.typing i{ width:7px; height:7px; border-radius:50%; background:var(--dim); animation:tp 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.18s; }
.typing i:nth-child(3){ animation-delay:.36s; }
@keyframes tp{ 0%,60%,100%{ transform:translateY(0); opacity:.45 } 30%{ transform:translateY(-5px); opacity:1 } }

.chat-foot{
  padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  background:var(--surface); border-top:1px solid var(--line);
  display:flex; gap:var(--s2); align-items:center;
}
.chat-foot .attach{
  width:48px; height:48px; border-radius:var(--r-sm); flex:0 0 48px;
  background:var(--card); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.chat-foot input{
  flex:1; min-height:48px; padding:var(--s3) var(--s4);
  border-radius:var(--r-pill); border:1.5px solid var(--line);
  background:var(--bg); color:var(--ink); font-size:var(--t-base);
  outline:none; transition:.15s ease;
}
.chat-foot input:focus{ border-color:var(--primary); background:var(--surface); }
.chat-foot input::placeholder{ color:var(--dim); }
.chat-foot .send{
  width:48px; height:48px; border-radius:50%; flex:0 0 48px;
  background:var(--grad); display:flex; align-items:center; justify-content:center;
  font-size:18px; color:#fff; box-shadow:0 4px 14px rgba(226,81,43,.28);
}
.blocked-note{
  font-size:var(--t-xs); color:var(--danger); text-align:center;
  background:var(--danger-soft); padding:var(--s2) var(--s4);
  border-radius:var(--r-sm); margin:var(--s2) var(--s4) 0; line-height:1.6;
}

/* ---------- หน้าสายเสียง (ก่อนมีใครเปิดกล้อง) ---------- */
.voice-stage{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s3);
  padding:calc(var(--s8) + env(safe-area-inset-top)) var(--s6)
          calc(var(--s8) + var(--s7) + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 80% at 50% 12%, #2E4B47 0%, #16211F 58%, #0E1615 100%);
  transition:opacity .28s ease, visibility .28s ease;
  text-align:center;
}
/* เมื่อเข้าสู่โหมดวิดีโอ ให้ fade voice stage ออก */
.call-stage[data-mode="video"] .voice-stage{
  opacity:0; visibility:hidden; pointer-events:none;
}
.call-stage[data-mode="voice"] .vid-tile.remote{ opacity:0; visibility:hidden; }
.call-stage[data-mode="voice"] .vid-tile.mine.pip{ display:none; }

.voice-avatar{
  position:relative; width:132px; height:132px; border-radius:50%;
  background:linear-gradient(150deg,#2F5D56,#24403C);
  display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(127,217,200,.28);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
  margin-bottom:var(--s4);
}
.voice-avatar svg{ width:52px; height:52px; color:#8FE3D2; z-index:2; }
.voice-avatar .voice-ring{
  position:absolute; inset:-10px; border-radius:50%;
  border:1.5px solid rgba(127,217,200,.28);
  animation:voicepulse 2.6s ease-out infinite;
}
.voice-avatar .voice-ring.d2{ animation-delay:1.3s; }
@keyframes voicepulse{
  0%{ transform:scale(.92); opacity:.85 }
  70%{ transform:scale(1.18); opacity:0 }
  100%{ opacity:0 }
}

.voice-who{ font-size:var(--t-xl); font-weight:700; color:#fff; letter-spacing:.01em; }
.voice-status{
  font-size:var(--t-sm); color:#8FE3D2;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.voice-status i{ width:7px; height:7px; border-radius:50%; background:#25C8A8; display:inline-block; }
.voice-timer{
  font-size:var(--t-lg); font-weight:600; color:rgba(255,255,255,.68);
  font-variant-numeric:tabular-nums; letter-spacing:.06em;
  margin-top:var(--s2);
}
.voice-hint{
  /* ไม่ใช้ absolute — ให้อยู่ใน flow ของ voice-stage เพื่อไม่ถูกแถบควบคุมทับ */
  margin-top:var(--s6);
  font-size:var(--t-xs); color:rgba(255,255,255,.55);
  line-height:1.7; padding:0 var(--s5); max-width:32ch;
}

/* ---------- หน้าสาย: วิดีโอคู่สายเต็มจอ + ภาพตัวเองเป็น PiP (แบบ LINE) ---------- */
.call-stage{
  position:absolute; inset:0;
  background:#1B1512;
  overflow:hidden;
  display:flex; flex-direction:column;
}

/* วิดีโอ/ภาพคู่สาย — เต็มพื้นที่ */
.vid-tile.remote{
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
  background:#1B1512;
}
.vid-tile.remote video{
  width:100%; height:100%; object-fit:cover; z-index:1;
}
.vid-tile.remote .cam-off-fx{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:var(--s3);
  background:radial-gradient(120% 90% at 50% 30%, #3A2C24 0%, #1B1512 70%);
}
.vid-tile.remote .cam-off-fx .face svg{ width:64px; height:64px; color:#8B7568; }

/* ภาพของเรา — หน้าต่างเล็กมุมขวาบน */
.vid-tile.mine.pip{
  position:absolute; z-index:20;
  top:calc(env(safe-area-inset-top) + 92px);
  right:var(--s4);
  width:104px; height:148px;
  border-radius:var(--r-md);
  overflow:hidden;
  border:2px solid rgba(255,255,255,.42);
  box-shadow:0 8px 24px rgba(0,0,0,.42);
  background:#2A211D;
  display:flex; align-items:center; justify-content:center;
  transition:transform .16s ease;
}
.vid-tile.mine.pip:active{ transform:scale(.97); }
.vid-tile.mine.pip video{
  width:100%; height:100%; object-fit:cover; z-index:1;
  transform:scaleX(-1);           /* mirror ให้เหมือนส่องกระจก */
}
.vid-tile.mine.pip .cam-off-fx{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px;
  background:linear-gradient(160deg,#40332B,#241C18);
}
.vid-tile.mine.pip .cam-off-fx .face svg{ width:26px; height:26px; color:#B39C8D; }
.vid-tile.mine.pip .waiting-cam{ font-size:10.5px; line-height:1.3; color:#C9B5A9; text-align:center; padding:0 4px; }
.vid-tile.mine.pip.cam-on .cam-off-fx{ display:none; }
/* ไม่มีกล้อง = ไม่ต้องมีหน้าต่าง PiP (โหมดเสียงอยู่แล้ว) */
.vid-tile.mine.pip:not(.cam-on){ display:none; }
.vid-tile.mine.pip .vlabel{
  display:block; position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  z-index:3; font-size:11px; font-weight:600; letter-spacing:.2px;
  background:rgba(0,0,0,.62); color:#fff; padding:3px 10px; border-radius:var(--r-pill);
  backdrop-filter:blur(4px); white-space:nowrap;
}

/* แถบหัวเรื่อง ลอยเหนือวิดีโอ */
.call-head{
  position:relative; z-index:30;
  padding:calc(var(--s3) + env(safe-area-inset-top)) var(--s4) var(--s5);
  display:flex; align-items:center; gap:var(--s3);
  background:linear-gradient(to bottom, rgba(8,5,4,.86) 0%, rgba(8,5,4,.55) 55%, rgba(8,5,4,0) 100%);
}
.call-head .back{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(10px); box-shadow:none;
}
.call-head .back svg{ color:#fff; }
.call-who{ flex:1; min-width:0; }
.call-head .title{ font-size:var(--t-base); font-weight:700; line-height:1.4; color:#fff; }
.call-head .sub{ font-size:var(--t-xs); color:#7FD9C8; display:flex; align-items:center; gap:5px; }
.call-head .sub i{ width:7px; height:7px; border-radius:50%; background:#25C8A8; display:inline-block; }
.call-head .flag-btn{
  margin-left:0;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(10px);
}
.call-head .flag-btn svg{ color:#FF8E9B; }

/* แถบควบคุมล่าง ลอยเหนือวิดีโอ */
.call-bottom{
  position:relative; z-index:30; margin-top:auto;
  padding:var(--s4) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(8,5,4,.9) 0%, rgba(8,5,4,.62) 45%, rgba(8,5,4,0) 100%);
}
.video-hint{
  text-align:center; font-size:var(--t-xs); color:rgba(255,255,255,.78);
  line-height:1.6; margin-bottom:var(--s4); padding:0 var(--s4);
}

.call-controls{ display:flex; justify-content:center; gap:var(--s5); }
.cbtn{
  width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(12px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; transition:.15s ease;
  color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.28);
}
.cbtn:active{ transform:scale(.94); }
.cbtn .cbtn-ico{ font-size:22px; line-height:1; }
.cbtn .cbtn-lbl{ font-size:11px; color:rgba(255,255,255,.8); line-height:1.3; font-weight:500; }
.cbtn.off{ background:rgba(255,255,255,.9); border-color:rgba(255,255,255,.9); }
.cbtn.off .cbtn-lbl{ color:var(--danger); }
.cbtn.off svg{ color:var(--danger); }
.cbtn.end{
  background:var(--danger); border:none; width:72px; height:72px;
  box-shadow:0 6px 20px rgba(201,54,72,.32);
}
.cbtn.end .cbtn-ico{ font-size:26px; }
.cbtn.vid{ background:rgba(255,255,255,.9); border-color:rgba(255,255,255,.9); }
.cbtn.vid svg{ color:var(--ink); }
.cbtn.vid .cbtn-lbl{ color:var(--sub); }

.call-foot{ padding:var(--s2) var(--s5) calc(var(--s4) + env(safe-area-inset-bottom)); }
.video-hint{
  text-align:center; font-size:var(--t-xs); color:var(--sub);
  line-height:1.75; padding:0 var(--s4);
}

/* ---------- sheets ---------- */
.sheet-wrap{
  position:absolute; inset:0; background:rgba(46,33,28,.42);
  z-index:50; display:none; align-items:flex-end;
  backdrop-filter:blur(2px);
}
.sheet-wrap.show{ display:flex; animation:fadein .18s ease; }
.sheet{
  width:100%; background:var(--surface);
  border-radius:28px 28px 0 0;
  padding:var(--s2) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom));
  max-height:88%; overflow-y:auto; -webkit-overflow-scrolling:touch;
  margin-top:auto;
  box-shadow:0 -8px 40px rgba(93,58,40,.18);
  animation:up .26s cubic-bezier(.2,.9,.3,1);
}
@keyframes up{ from{ transform:translateY(70px); opacity:.5 } to{ transform:none; opacity:1 } }
.sheet .grab{
  width:44px; height:5px; border-radius:var(--r-pill);
  background:var(--line-strong); margin:var(--s2) auto var(--s4);
}
.sheet h3{ font-size:var(--t-xl); font-weight:700; text-align:center; line-height:1.5; }
.sheet .sh-sub{
  text-align:center; color:var(--sub); font-size:var(--t-sm);
  margin:var(--s2) 0 var(--s5); line-height:1.7;
}

.end-opts{ display:flex; flex-direction:column; gap:var(--s3); margin-bottom:var(--s2); }
.end-opt{
  display:flex; align-items:center; gap:var(--s4); width:100%;
  min-height:72px; padding:var(--s4); text-align:left;
  border-radius:var(--r-md); background:var(--bg);
  border:1.5px solid var(--line); transition:.14s ease;
}
.end-opt:active{ background:var(--card); }
.end-opt .ic{
  font-size:24px; flex:0 0 40px; height:40px; border-radius:var(--r-sm);
  background:var(--surface); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
}
.end-opt .tx b{ display:block; font-size:var(--t-base); font-weight:600; }
.end-opt .tx span{ font-size:var(--t-xs); color:var(--sub); line-height:1.6; }
.end-opt.flag{ border-color:#F4C9CE; background:var(--danger-soft); }
.end-opt.flag .tx b{ color:var(--danger); }
.end-opt.flag .ic{ background:#fff; border-color:#F4C9CE; }

.rep-cats{ display:flex; flex-direction:column; gap:var(--s2); }
.rep-cat{
  display:flex; align-items:center; gap:var(--s3); width:100%;
  min-height:58px; padding:var(--s3) var(--s4); text-align:left;
  border-radius:var(--r-md); background:var(--bg);
  border:1.5px solid var(--line); font-size:var(--t-base); transition:.14s ease;
}
.rep-cat:active{ background:var(--card); }
.rep-cat.danger{ border-color:#F4C9CE; color:var(--danger); background:var(--danger-soft); font-weight:600; }

.done-big{ text-align:center; padding:var(--s4) 0 var(--s2); }
.done-big .big{ font-size:60px; line-height:1; }
.done-big h3{ margin-top:var(--s3); }
.done-big p{ color:var(--sub); font-size:var(--t-sm); margin-top:var(--s3); line-height:1.75; }
.done-big p b{ color:var(--ink); }
.pay-note{ text-align:center; font-size:var(--t-xs); color:var(--dim); margin-top:var(--s3); line-height:1.7; }
.sheet .btn{ margin-top:var(--s5); }

/* filter sheet */
.agegrid.small button{ min-height:52px; font-size:var(--t-sm); }
.filter-label{ font-size:var(--t-sm); color:var(--ink); font-weight:600; margin:var(--s4) 0 var(--s3); }
.filter-grid{ margin-bottom:var(--s2); }

/* privacy sheet */
.privacy-box{ font-size:var(--t-sm); color:var(--sub); line-height:1.85; }
.privacy-box p{ margin-bottom:var(--s4); }
.privacy-box b{ color:var(--ink); font-weight:600; }
.privacy-box code{
  background:var(--card); padding:2px 8px; border-radius:6px;
  font-size:var(--t-xs); color:var(--ink);
}

/* ---------- toast ---------- */
#toast{
  /* แถบแจ้งเตือนบนสุด — ใช้ position:fixed เทียบ viewport ของ #app
     และ translate ออกนอกจอเมื่อซ่อน จึงไม่ทับปุ่ม/เนื้อหาของหน้าใด ๆ */
  position:absolute; left:50%; bottom:calc(env(safe-area-inset-bottom) + 200px);
  transform:translateX(-50%) translateY(130%);
  background:rgba(46,33,28,.96); color:#fff;
  border-radius:var(--r-md); padding:11px 18px;
  font-size:var(--t-sm); line-height:1.55;
  z-index:400; opacity:0; transition:.24s cubic-bezier(.2,.9,.3,1);
  pointer-events:none; max-width:92%; width:max-content;
  text-align:center;
  box-shadow:0 10px 30px rgba(46,33,28,.34);
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- online pill ---------- */
.online-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--t-xs); color:var(--sub);
  background:var(--surface); padding:7px 14px;
  border-radius:var(--r-pill); border:1px solid var(--line);
}
.online-pill i{ width:7px; height:7px; border-radius:50%; background:var(--accent); }

/* ---------- reconnect overlay ---------- */
.reconnect-overlay{
  position:absolute; inset:0; z-index:150; display:none;
  align-items:center; justify-content:center;
  background:rgba(20,16,14,.7); backdrop-filter:blur(6px);
}
.reconnect-overlay .rc-box{
  display:flex; flex-direction:column; align-items:center; gap:var(--s3);
  background:#241D19; border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg); padding:var(--s6) var(--s7);
  text-align:center; max-width:84%; box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.reconnect-overlay .rc-box b{ font-size:var(--t-lg); font-weight:700; color:#fff; }
.reconnect-overlay .rc-box span{ font-size:var(--t-sm); color:rgba(255,255,255,.75); line-height:1.7; }
.reconnect-overlay .rc-sub{ font-size:var(--t-xs); color:rgba(255,255,255,.5); margin-top:var(--s1); }
.rc-spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(255,255,255,.16); border-top-color:#FF9066;
  animation:rcspin .9s linear infinite;
}
@keyframes rcspin{ to{ transform:rotate(360deg) } }

/* ---------- utility ---------- */
#remote-audio{ display:none; }
.spacer{ flex:1; }

/* ---------- SVG icons ---------- */
.ic-xs{ width:15px; height:15px; flex:0 0 15px; display:inline-block; vertical-align:-2px; }
.ic-sm{ width:19px; height:19px; flex:0 0 19px; display:inline-block; vertical-align:-3px; }
.ic-md{ width:24px; height:24px; flex:0 0 24px; display:block; }
.ic-xl{ width:34px; height:34px; flex:0 0 34px; display:block; }

/* ไอคอนในปุ่ม/ป้ายที่ต้องจัดกึ่งกลาง */
.mode .ic svg{ color:var(--primary); }
.mode:not(.sel) .ic svg{ color:var(--sub); }
.pulse .core svg{ color:#fff; width:46px; height:46px; }
.welcome-hero .moon svg{ color:var(--primary); width:56px; height:56px; margin:0 auto; }
.avatar svg{ color:var(--primary); }
.icon-btn svg{ color:var(--sub); }
.flag-btn svg{ color:var(--danger); }
.chat-foot .attach svg{ color:var(--sub); }
.chat-foot .send svg{ color:#fff; }
.cbtn svg{ color:#fff; }
.cbtn.end svg{ color:#fff; }
.end-opt .ic svg{ color:var(--sub); }
.end-opt.flag .ic svg{ color:var(--danger); }
.back svg{ color:var(--ink); }
.done-big .big svg{ color:var(--accent); width:56px; height:56px; margin:0 auto; }
.welcome-points .pi svg{ color:var(--primary); }
.status-bar .safe svg{ color:var(--accent); }
.home-foot svg{ color:var(--danger); }

/* ปุ่มที่ไอคอนอยู่ข้างข้อความ */
.btn svg{ flex:0 0 auto; }
.btn.ghost svg{ color:var(--danger); }