/* ═══════════════════════════════════════════════════════════════════════════
   nv-kit.css — น้อง NV · ชุดโทเคน + คอมโพเนนต์ร่วม 3 พื้นผิว (เว็บสาธารณะ · Partner Portal · newCRM)
   Claude Design 2026-09-04 · แทน nvk-nv.css ทั้งไฟล์ (คงชื่อคลาส .nvnv-* ให้ nvk-nv.js ใช้ต่อได้)
   ─────────────────────────────────────────────────────────────────────────
   หลัก 3 ข้อ
   1. ฟองข้อความ 3 ชนิด ต่างกันในแวบเดียว: คนถาม = หมึกทึบ · น้อง NV = ขาวขอบ + ป้าย AI · พนักงาน = พื้นชมพูอ่อน + แถบแดง + ชื่อ
   2. แถบสถานะ .nvnv-status อยู่เหนือบทสนทนาเสมอ — บอกว่ากำลังคุยกับใคร รอนานแค่ไหน ใครรับ
   3. โทเคน --nv-* ชุดเดียว ใช้ทั้งบนเว็บ Ajax-style (ขาว/แดง) และใน newCRM v3 (ผ่าน mapping ท้ายไฟล์ newcrm-v3.css)
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --nv-red:#9e1115; --nv-red-dark:#7d0d11; --nv-red-soft:#faf0f0; --nv-red-line:#e6b9ba;
  --nv-ink:#181818; --nv-ink-2:#4a4744; --nv-mute:#6b6b6b;
  --nv-bg:#ffffff; --nv-surface:#f5f4f2; --nv-line:#dedbd7; --nv-line-2:#b9b5b0;
  --nv-green:#0f8a5f; --nv-green-soft:#e8f6f0; --nv-amber:#8a5a00; --nv-amber-soft:#fff4dc;
  --nv-bad:#d2331c; --nv-bad-soft:#fdeeeb; --nv-info:#1d4f9c; --nv-info-soft:#e9effa;
  --nv-font:'Anuphan','IBM Plex Sans Thai',system-ui,-apple-system,sans-serif;
  --nv-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --nv-r:16px;          /* มุมกล่อง (เว็บ) — newCRM ตั้ง 0 */
  --nv-rb:14px;         /* มุมฟอง */
  --nv-tap:44px;        /* ขั้นต่ำปุ่มกด */
  --nv-fs:15px;         /* ตัวหนังสือในฟอง */
  --nv-fs-input:16px;   /* ≥16 กัน iOS ซูม — ห้ามลด */
  --nv-shadow:0 12px 40px -12px rgba(24,24,24,.28), 0 0 0 1px var(--nv-line);
}
[data-theme="dark"]{
  --nv-red:#c0191f; --nv-red-dark:#d8232a; --nv-red-soft:#2a1a1a; --nv-red-line:#5a2a2c;
  --nv-ink:#f4f2f0; --nv-ink-2:#b8b4b0; --nv-mute:#948f8a;
  --nv-bg:#1c1a19; --nv-surface:#252321; --nv-line:#3a3735; --nv-line-2:#5a5652;
  --nv-green:#4fc98a; --nv-green-soft:#173327; --nv-amber:#e6b45a; --nv-amber-soft:#332a14;
  --nv-bad:#ff6b52; --nv-bad-soft:#3a1f1a; --nv-info:#7fb2ff; --nv-info-soft:#182a45;
  --nv-shadow:0 12px 40px rgba(0,0,0,.6), 0 0 0 1px var(--nv-line);
}

/* ── กล่อง ─────────────────────────────────────────────────────────────── */
.nvnv{font-family:var(--nv-font);color:var(--nv-ink);background:var(--nv-bg);
  border:1.5px solid var(--nv-line);border-radius:var(--nv-r);display:flex;flex-direction:column;
  max-width:760px;overflow:hidden;box-sizing:border-box;-webkit-font-smoothing:antialiased}
.nvnv *,.nvnv *::before,.nvnv *::after{box-sizing:border-box}
.nvnv--panel{position:fixed;right:18px;bottom:18px;z-index:99500;width:min(420px,calc(100vw - 24px));
  height:min(720px,calc(100vh - 36px));box-shadow:var(--nv-shadow);display:none}
.nvnv--panel.is-open{display:flex;animation:nvnv-pop .2s ease-out;transform-origin:bottom right}
body.nvnv-lift .nvnv--panel{bottom:88px;height:min(680px,calc(100vh - 106px))}
@keyframes nvnv-pop{from{opacity:0;transform:translateY(10px) scale(.98)}}

/* หัว */
.nvnv-head{flex:none;display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;
  border-bottom:1.5px solid var(--nv-line);background:var(--nv-bg)}
.nvnv-head .lion{width:40px;height:40px;flex:none}
.nvnv-head .who{flex:1;min-width:0;line-height:1.25}
.nvnv-head .who b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.nvnv-head .who small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--nv-mute);margin-top:2px}
.nvnv-head .who .dot{width:7px;height:7px;border-radius:50%;background:var(--nv-green);flex:none}
.nvnv-head .who .dot.off{background:var(--nv-line-2)}
.nvnv-head .who .avs{display:inline-flex;flex:none;margin-right:2px}
.nvnv-head .who .avs i{width:16px;height:16px;border-radius:50%;border:2px solid var(--nv-bg);margin-left:-5px;background:var(--nv-red);
  position:relative;box-shadow:0 0 0 1px var(--nv-line)}
.nvnv-head .who .avs i:first-child{margin-left:0}
.nvnv-head .who .avs i::before{content:'';position:absolute;left:50%;top:3px;width:5px;height:5px;border-radius:50%;background:#fff;transform:translateX(-50%)}
.nvnv-head .who .avs i::after{content:'';position:absolute;left:50%;top:8px;width:9px;height:5px;border-radius:5px 5px 0 0;background:#fff;transform:translateX(-50%)}
.nvnv-head .who .avs i:nth-child(2){background:var(--nv-ink-2)}
.nvnv-head .who .avs i:nth-child(3){background:var(--nv-green)}
.nvnv-head .ib.hb{display:grid;place-items:center;font-size:19px;line-height:1}
.nvnv-head .ib.hb:hover{border-color:var(--nv-red);background:var(--nv-red-soft)}
.nvnv-head .x,.nvnv-head .ib{width:40px;height:40px;border:1.5px solid transparent;border-radius:50%;background:transparent;
  color:var(--nv-ink);font:400 24px/1 var(--nv-font);display:grid;place-items:center;cursor:pointer;flex:none}
.nvnv-head .x:hover,.nvnv-head .ib:hover{background:var(--nv-surface);border-color:var(--nv-line)}
.nvnv--inline .nvnv-head .x{display:none}
/* ตัวตน (partner) */
.nvnv-head .me{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--nv-ink-2);
  border:1.5px solid var(--nv-line);border-radius:99px;padding:3px 10px 3px 4px;white-space:nowrap;max-width:46%;overflow:hidden}
.nvnv-head .me i{width:20px;height:20px;border-radius:50%;background:var(--nv-ink);color:#fff;font:700 9.5px/20px var(--nv-font);
  text-align:center;font-style:normal;flex:none}
.nvnv-head .me .tier{color:var(--nv-red);font-family:var(--nv-mono);font-size:10.5px}

/* ── แถบสถานะการสนทนา — บอกว่าตอนนี้คุยกับใคร ─────────────────────────── */
.nvnv-status{flex:none;display:none;align-items:center;gap:10px;padding:9px 16px;font-size:12.5px;font-weight:600;
  border-bottom:1.5px solid var(--nv-line);background:var(--nv-surface);color:var(--nv-ink-2);line-height:1.4}
.nvnv-status.show{display:flex}
/* NVK-LCDOCK · แถบ "พนักงานกำลังพิมพ์" — จุดเขียวกะพริบ (ลูกค้าจะได้รู้ว่ามีคนอยู่ปลายสาย) */
.nvnv-status.nvtype{color:var(--nv-green);background:var(--nv-green-soft);border-bottom-color:var(--nv-green-soft)}
.nvnv-status.nvtype i.d{background:var(--nv-green);animation:nvnv-dots 1.1s infinite}
.nvnv-status i.d{width:8px;height:8px;border-radius:50%;flex:none;background:var(--nv-mute)}
.nvnv-status b{color:var(--nv-ink);font-weight:700}
.nvnv-status .t{flex:1;min-width:0}
.nvnv-status .t small{display:block;font-weight:500;color:var(--nv-mute);font-size:11.5px}
.nvnv-status .av{width:26px;height:26px;border-radius:50%;background:var(--nv-red);color:#fff;font:700 10.5px/26px var(--nv-font);
  text-align:center;flex:none}
.nvnv-status button{border:1.5px solid var(--nv-line-2);background:var(--nv-bg);color:var(--nv-ink);border-radius:99px;
  font:700 12px var(--nv-font);padding:5px 11px;cursor:pointer;min-height:30px;white-space:nowrap}
.nvnv-status button:hover{border-color:var(--nv-ink)}
.nvnv-status.queued{background:var(--nv-amber-soft);color:var(--nv-amber);border-bottom-color:#efd9a6}
.nvnv-status.queued i.d{background:var(--nv-amber);animation:nvnv-pulse 1.6s ease-in-out infinite}
.nvnv-status.claimed{background:var(--nv-green-soft);color:var(--nv-green);border-bottom-color:#b9e3cf}
.nvnv-status.claimed i.d{background:var(--nv-green)}
.nvnv-status.closed{background:var(--nv-surface);color:var(--nv-mute)}
.nvnv-status.offhours{background:var(--nv-surface);color:var(--nv-ink-2)}
@keyframes nvnv-pulse{50%{opacity:.35}}

/* ── บทสนทนา ──────────────────────────────────────────────────────────── */
.nvnv-log{flex:1;min-height:0;overflow:auto;padding:16px 16px 6px;display:flex;flex-direction:column;gap:12px;
  scroll-behavior:smooth;background:var(--nv-bg)}
.nvnv--inline .nvnv-log{max-height:0;padding-top:0;padding-bottom:0;transition:max-height .35s ease}
.nvnv--inline.is-live .nvnv-log{max-height:min(640px,72vh);padding:16px 16px 6px}
.nvnv-m{display:flex;gap:10px;align-items:flex-end;max-width:100%}
.nvnv-m .lion.sm{width:30px;height:30px;flex:none;margin-bottom:2px}
.nvnv-m .bub{position:relative;max-width:82%;padding:10px 14px;border-radius:var(--nv-rb);font-size:var(--nv-fs);line-height:1.55;
  white-space:pre-wrap;overflow-wrap:anywhere}
/* คนถาม — หมึกทึบ ชิดขวา */
.nvnv-m.u{justify-content:flex-end}
.nvnv-m.u .bub{background:var(--nv-ink);color:var(--nv-bg);border-bottom-right-radius:4px}
[data-theme="dark"] .nvnv-m.u .bub{background:#f4f2f0;color:#1c1a19}
.nvnv-m.u .bub img{display:block;max-width:100%;max-height:240px;border-radius:10px;margin-bottom:6px}
/* น้อง NV — ขาว ขอบชัด + ป้าย AI */
.nvnv-m.a .bub{background:var(--nv-bg);border:1.5px solid var(--nv-line);border-bottom-left-radius:4px;color:var(--nv-ink)}
.nvnv-m .tag{position:absolute;top:-9px;left:12px;font:700 9.5px/1 var(--nv-mono);letter-spacing:.08em;padding:3px 6px;
  background:var(--nv-bg);border:1.5px solid var(--nv-line);color:var(--nv-mute);border-radius:4px}
/* พนักงาน — พื้นแดงอ่อน + แถบแดงซ้าย + ชื่อ */
.nvnv-m.s .bub{background:var(--nv-red-soft);border:1.5px solid var(--nv-red-line);border-left:4px solid var(--nv-red);
  border-bottom-left-radius:4px;color:var(--nv-ink)}
.nvnv-m.s .lion.sm{display:none}
.nvnv-m.s .av{width:30px;height:30px;border-radius:50%;background:var(--nv-red);color:#fff;font:700 11px/30px var(--nv-font);
  text-align:center;flex:none;margin-bottom:2px}
.nvnv-m .staff{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--nv-red);margin-bottom:4px}
.nvnv-m .staff .role{font-weight:500;color:var(--nv-mute)}
.nvnv-m .ts{display:block;font:500 10.5px var(--nv-mono);color:var(--nv-mute);margin-top:5px;text-align:right}
.nvnv-m.a .ts,.nvnv-m.s .ts{text-align:left}
/* กำลังคิด — 3 จุด + ความคืบหน้า */
.nvnv-m.wait .bub{display:flex;gap:5px;align-items:center;padding:13px 16px;min-width:64px}
.nvnv-m.wait .bub i{width:7px;height:7px;border-radius:50%;background:var(--nv-mute);animation:nvnv-dots 1.1s infinite}
.nvnv-m.wait .bub i:nth-child(2){animation-delay:.18s}.nvnv-m.wait .bub i:nth-child(3){animation-delay:.36s}
@keyframes nvnv-dots{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-4px);opacity:1}}
.nvnv-prog{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--nv-mute);padding:0 0 0 40px;margin-top:-6px}
.nvnv-prog i{width:14px;height:14px;border-radius:50%;border:2px solid var(--nv-line-2);border-top-color:var(--nv-red);
  animation:nvnv-spin .8s linear infinite;flex:none}
.nvnv-prog b{color:var(--nv-ink-2);font-weight:600}
@keyframes nvnv-spin{to{transform:rotate(360deg)}}
/* ข้อความระบบ */
.nvnv-sys{align-self:center;text-align:center;font-size:12px;color:var(--nv-mute);padding:4px 12px;max-width:92%;line-height:1.5}
.nvnv-sys.line{display:flex;align-items:center;gap:10px;width:100%;max-width:none}
.nvnv-sys.line::before,.nvnv-sys.line::after{content:"";flex:1;height:1.5px;background:var(--nv-line)}
.nvnv-sys.nvnv-pb{align-self:stretch;text-align:left;background:var(--nv-red-soft);border:1.5px solid var(--nv-red-line);
  color:var(--nv-ink);padding:10px 14px;border-radius:10px;font-size:13px;max-width:none}
.nvnv-sys.nvnv-pb a{color:var(--nv-red);font-weight:700}
.nvnv-new{align-self:center;font:700 11px var(--nv-mono);letter-spacing:.06em;color:var(--nv-red);border:1.5px solid var(--nv-red);
  border-radius:99px;padding:3px 10px;background:var(--nv-bg);cursor:pointer}
/* ให้คะแนน */
.nvnv-rate{display:flex;gap:6px;align-items:center;padding-left:40px;margin-top:-4px;font-size:12px;color:var(--nv-mute)}
.nvnv-rate button{width:30px;height:30px;border:1.5px solid var(--nv-line);border-radius:50%;background:var(--nv-bg);cursor:pointer;
  font-size:13px;display:grid;place-items:center}
.nvnv-rate button:hover{border-color:var(--nv-ink)}
.nvnv-rate button.on{background:var(--nv-ink);color:var(--nv-bg);border-color:var(--nv-ink)}

/* การ์ดสินค้าในแชต */
.nvnv-cards{display:flex;gap:10px;overflow-x:auto;padding:2px 0 6px 40px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.nvnv-card{flex:0 0 190px;scroll-snap-align:start;display:flex;flex-direction:column;gap:5px;padding:10px;border:1.5px solid var(--nv-line);
  border-radius:12px;background:var(--nv-bg);color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.nvnv-card:hover{border-color:var(--nv-ink);transform:translateY(-2px)}
.nvnv-card .im{height:84px;display:grid;place-items:center;background:var(--nv-surface);border-radius:8px;overflow:hidden}
.nvnv-card .im img{max-height:74px;max-width:90%;mix-blend-mode:multiply}
.nvnv-card .im span{font:700 12px var(--nv-mono);color:var(--nv-mute);letter-spacing:.06em}
.nvnv-card .nm{font-size:12.5px;line-height:1.35;font-weight:600;max-height:34px;overflow:hidden}
.nvnv-card .sk{font:500 11px var(--nv-mono);color:var(--nv-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nvnv-card .pr{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:2px}
.nvnv-card .pr b{font-size:15px;letter-spacing:-.01em}
.nvnv-card .pr small{font:600 10px var(--nv-mono);color:var(--nv-mute);margin-left:4px;letter-spacing:.04em}
.nvnv-card .pr .av{margin-left:auto;font-size:11px;font-weight:700;color:var(--nv-green);background:var(--nv-green-soft);
  border-radius:4px;padding:1px 6px}
.nvnv-card .pr .av.no{color:var(--nv-mute);background:var(--nv-surface)}
.nvnv-card .pm{font-size:11.5px;font-weight:700;color:var(--nv-red)}
.nvnv-card .cta{margin-top:2px;font-size:12px;font-weight:700;color:var(--nv-red)}
/* ลิงก์พาไปต่อ · ชิป */
.nvnv-links{display:flex;flex-direction:column;gap:6px;padding-left:40px}
.nvnv-links a{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--nv-ink);text-decoration:none;
  border:1.5px solid var(--nv-line);border-radius:10px;padding:9px 12px;min-height:40px}
.nvnv-links a::after{content:"→";margin-left:auto;color:var(--nv-red);font-weight:700}
.nvnv-links a:hover{border-color:var(--nv-ink)}
.nvnv-chips{display:flex;flex-wrap:wrap;gap:8px;padding-left:40px}
.nvnv-starters{padding:4px 16px 12px}
.nvnv-starters .nvnv-chips{padding-left:0}
.nvnv-chips button{border:1.5px dashed var(--nv-line-2);background:var(--nv-bg);color:var(--nv-ink);border-radius:99px;
  font:600 13px var(--nv-font);padding:8px 14px;min-height:38px;text-align:left;cursor:pointer;line-height:1.3}
.nvnv-chips button:hover{border-style:solid;border-color:var(--nv-ink)}
.nvnv-chips.fu button{border-color:var(--nv-line-2)}
/* ปุ่มคุยกับคน · ฟอร์มฝากเรื่อง */
.nvnv-human{padding-left:40px;display:flex;flex-direction:column;gap:8px}
.nvnv-human button{border:1.5px solid var(--nv-red);color:var(--nv-red);background:var(--nv-bg);border-radius:99px;
  font:700 13.5px var(--nv-font);padding:0 16px;min-height:var(--nv-tap);cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  align-self:flex-start;text-align:left}
.nvnv-human button:hover{background:var(--nv-red);color:#fff}
.nvnv-human button.alt{border-color:var(--nv-line-2);color:var(--nv-ink)}
.nvnv-human button.alt:hover{background:var(--nv-ink);color:#fff;border-color:var(--nv-ink)}
.nvnv-human .hint{font-size:12px;color:var(--nv-mute)}
.nvnv-contact{margin-left:40px;background:var(--nv-surface);border:1.5px solid var(--nv-line);border-radius:12px;padding:14px;
  display:flex;flex-direction:column;gap:10px}
.nvnv-contact .h{font-size:13.5px;font-weight:700}
.nvnv-contact .h small{display:block;font-weight:500;color:var(--nv-mute);font-size:12px;margin-top:2px}
.nvnv-contact label{font-size:12px;font-weight:700;color:var(--nv-ink-2);display:flex;flex-direction:column;gap:4px}
.nvnv-contact input{font:500 var(--nv-fs-input) var(--nv-font);min-height:var(--nv-tap);padding:0 12px;border:1.5px solid var(--nv-line-2);
  border-radius:10px;background:var(--nv-bg);color:var(--nv-ink);width:100%}
.nvnv-contact input:focus{outline:2px solid var(--nv-ink);outline-offset:1px;border-color:var(--nv-ink)}
.nvnv-contact .seg{display:flex;border:1.5px solid var(--nv-line-2);border-radius:10px;overflow:hidden}
.nvnv-contact .seg button{flex:1;border:0;background:var(--nv-bg);color:var(--nv-ink-2);font:700 13px var(--nv-font);min-height:40px;cursor:pointer}
.nvnv-contact .seg button.on{background:var(--nv-ink);color:var(--nv-bg)}
.nvnv-contact .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nvnv-contact .go{flex:1;min-height:var(--nv-tap);border:0;background:var(--nv-red);color:#fff;border-radius:99px;font:700 14px var(--nv-font);cursor:pointer}
.nvnv-contact .go:hover{background:var(--nv-red-dark)}
.nvnv-contact .no{border:0;background:none;color:var(--nv-mute);font:600 13px var(--nv-font);cursor:pointer;min-height:var(--nv-tap);padding:0 10px}
.nvnv-contact .err{font-size:12.5px;color:var(--nv-bad);font-weight:600}
.nvnv-contact .fine{font-size:11.5px;color:var(--nv-mute)}
/* ปิดเรื่อง + ให้คะแนน */
.nvnv-close{margin-left:40px;border:1.5px solid var(--nv-line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--nv-surface)}
.nvnv-close .h{font-weight:700;font-size:13.5px}
.nvnv-close .stars{display:flex;gap:6px}
.nvnv-close .stars button{width:40px;height:40px;border:1.5px solid var(--nv-line-2);border-radius:50%;background:var(--nv-bg);font-size:16px;cursor:pointer}
.nvnv-close .stars button.on{background:var(--nv-ink);color:#fff;border-color:var(--nv-ink)}

/* ── ช่องพิมพ์ ─────────────────────────────────────────────────────────── */
.nvnv-form{flex:none;display:flex;gap:8px;align-items:flex-end;padding:10px 12px 10px 16px;border-top:1.5px solid var(--nv-line);background:var(--nv-bg)}
.nvnv-form .att{width:var(--nv-tap);height:var(--nv-tap);border:1.5px solid var(--nv-line);border-radius:50%;background:var(--nv-bg);
  color:var(--nv-ink-2);display:grid;place-items:center;cursor:pointer;flex:none}
.nvnv-form .att:hover{border-color:var(--nv-ink);color:var(--nv-ink)}
.nvnv-form .att svg{width:18px;height:18px}
.nvnv-form textarea{flex:1;min-height:var(--nv-tap);max-height:120px;resize:none;font:500 var(--nv-fs-input)/1.4 var(--nv-font);
  padding:11px 14px;border:1.5px solid var(--nv-line-2);border-radius:22px;background:var(--nv-bg);color:var(--nv-ink)}
.nvnv-form textarea:focus{outline:none;border-color:var(--nv-ink);box-shadow:0 0 0 3px rgba(24,24,24,.08)}
.nvnv-form textarea::placeholder{color:var(--nv-mute)}
.nvnv-form button[type=submit]{width:var(--nv-tap);height:var(--nv-tap);border:0;border-radius:50%;background:var(--nv-red);color:#fff;
  display:grid;place-items:center;cursor:pointer;flex:none;transition:background .15s}
.nvnv-form button[type=submit] svg{width:20px;height:20px}
.nvnv-form button[type=submit]:hover{background:var(--nv-red-dark)}
.nvnv-form button[type=submit]:disabled{background:var(--nv-line-2);cursor:default}
.nvnv-form.drop{outline:2px dashed var(--nv-red);outline-offset:-6px}
.nvnv-quota{font:600 11px var(--nv-mono);color:var(--nv-mute);padding:0 16px 6px;text-align:right}
.nvnv-foot{flex:none;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;padding:8px 16px 12px;
  font-size:11.5px;color:var(--nv-mute);line-height:1.5}
.nvnv-foot .lnk{border:0;background:none;color:var(--nv-ink-2);font:600 12px var(--nv-font);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;padding:0;min-height:28px}
.nvnv-foot .lnk:hover{color:var(--nv-red)}

/* ── ปุ่มลอย ───────────────────────────────────────────────────────────── */
.nvnv-fab{position:fixed;right:18px;bottom:18px;z-index:9000;display:flex;align-items:center;gap:8px;padding:6px 18px 6px 6px;
  border:1.5px solid var(--nv-line);border-radius:99px;background:var(--nv-bg);color:var(--nv-ink);cursor:pointer;
  font:700 14px var(--nv-font);box-shadow:0 10px 30px -10px rgba(24,24,24,.35);transition:transform .15s,box-shadow .15s}
.nvnv-fab:hover{transform:translateY(-2px);border-color:var(--nv-ink)}
.nvnv-fab .lion{width:40px;height:40px}
/* NVK-HUMANLABEL 2026-09-10 · ป้าย 2 บรรทัด: ชื่อทีม + สถานะ (จุดเขียว = ในเวลาทำการเท่านั้น ไม่โกหก) */
.nvnv-fab .t{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.2;min-width:0}
.nvnv-fab .t b{font-size:14px;font-weight:700;white-space:nowrap}
.nvnv-fab .t small{font-size:11px;font-weight:500;color:var(--nv-mute);margin-top:2px;white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis}
.nvnv-fab.off .b{background:var(--nv-line-2)}
.nvnv-fab .b{position:absolute;left:36px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--nv-green);border:2px solid var(--nv-bg)}
.nvnv-fab.has-new::after{content:attr(data-n);position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 6px;
  border-radius:99px;background:var(--nv-red);color:#fff;font:700 11px/22px var(--nv-mono);text-align:center;border:2px solid var(--nv-bg)}
body.nvnv-open .nvnv-fab{display:none}
body.nvnv-lift .nvnv-fab{bottom:88px}

/* ── สิงโต ─────────────────────────────────────────────────────────────── */
.lion .bob{animation:nvnv-bob 3.2s ease-in-out infinite;transform-origin:50% 60%}
.lion .mane{animation:nvnv-sway 7s ease-in-out infinite;transform-origin:50% 50%}
.lion .eye{animation:nvnv-blink 5.5s infinite;transform-origin:center}
.lion.think .eye{animation:nvnv-look 1.4s ease-in-out infinite}
@keyframes nvnv-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2.5px) rotate(1.2deg)}}
@keyframes nvnv-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes nvnv-blink{0%,92%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
@keyframes nvnv-look{0%,100%{transform:translateX(-1.6px)}50%{transform:translateX(1.6px)}}

/* ── มือถือ ≤640: แผงเป็นชีตเต็มจอ ─────────────────────────────────────── */
@media(max-width:640px){
  .nvnv--panel,body.nvnv-lift .nvnv--panel{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0;border:0;box-shadow:none}
  .nvnv-head{padding:10px 8px 10px 14px;padding-top:calc(10px + env(safe-area-inset-top))}
  .nvnv-head .who small span.long{display:none}
  .nvnv-log{padding:14px 14px 6px;gap:10px}
  .nvnv-m .bub{max-width:88%}
  .nvnv-cards,.nvnv-links,.nvnv-chips,.nvnv-human,.nvnv-rate,.nvnv-prog{padding-left:0}
  .nvnv-contact,.nvnv-close{margin-left:0}
  .nvnv-card{flex-basis:168px}
  .nvnv-form{padding:8px 10px calc(8px + env(safe-area-inset-bottom)) 12px}
  .nvnv-foot{display:none}
  .nvnv-fab{right:12px;bottom:12px;padding-right:14px}
  /* NVK-HUMANLABEL · มือถือเคยซ่อนป้ายทั้งหมด (เหลือแต่สิงโต) — แต่ traffic แอดส่วนใหญ่คือมือถือ
     ป้ายจึงต้องโชว์ แค่ย่อสถานะเหลือสั้น (data-short) */
  .nvnv-fab .t{display:flex}
  .nvnv-fab .t b{font-size:13px}
  .nvnv-fab .t small{font-size:0;max-width:150px}
  .nvnv-fab .t small::after{content:attr(data-short);font-size:10.5px}
  .nvnv-status{padding:8px 14px}
}
@media(prefers-reduced-motion:reduce){
  .lion .bob,.lion .mane,.lion .eye,.lion.think .eye,.nvnv-m.wait .bub i,.nvnv-prog i,.nvnv-status i.d{animation:none}
  .nvnv--panel.is-open{animation:none}
  .nvnv-log{scroll-behavior:auto}
}

/* ═══ ชั้นเข้ากันได้ (NVK-KITCOMPAT 2026-09-04) ═══════════════════════════════
   คลาสที่ nvk-nv.js ตัวจริงยังใช้อยู่แต่ยังไม่มีใน kit — ยกมาจาก nvk-nv.css เดิม
   ทั้งก้อนเพื่อไม่ให้ของที่เพิ่งขึ้น (NVK-PERSONA ฟองเด้งทัก) หน้าตาพัง
   ★ ถ้า kit รับคลาสพวกนี้เข้าไปแล้ว ลบบล็อกนี้ได้ */
/* NVK-PERSONA · ฟองเด้งทัก + ปุ่มคัดกลุ่ม (Ricky 2026-09-04) */
.nvnv-teaser{position:fixed;right:18px;bottom:78px;z-index:9002;width:min(330px,calc(100vw - 32px));
  background:#fff;border:1px solid #e2e2e2;border-radius:18px;padding:14px 15px 12px;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.42);animation:nvnv-pop .25s ease-out}
.nvnv-teaser .tx{position:absolute;top:8px;right:10px;border:0;background:none;font-size:18px;
  color:#9a9a9a;cursor:pointer;line-height:1}
.nvnv-teaser .msg{font-size:14px;line-height:1.5;color:#181818;padding-right:14px;margin-bottom:10px}
.nvnv-teaser .opts{display:flex;flex-direction:column;gap:7px}
.nvnv-teaser .opts button{text-align:left;border:1px solid #e0e0e0;background:#fafafa;border-radius:12px;
  padding:10px 13px;font:600 13.5px var(--nvk-font-body,'Anuphan',sans-serif);color:#181818;cursor:pointer;
  transition:.13s;min-height:42px}
.nvnv-teaser .opts button:hover{border-color:var(--nvk-red,#9e1115);background:#fff;transform:translateY(-1px)}
/* NVK-HUMANLABEL · ทางลัดไปหาคนใต้ปุ่มคัดกลุ่ม */
.nvnv-teaser .hu{display:block;width:100%;margin-top:9px;padding:6px 2px 0;border:0;border-top:1px dashed #e4e4e4;background:none;
  text-align:left;color:var(--nvk-red,#9e1115);font:600 12.5px/1.4 var(--nvk-font-body,'Anuphan',sans-serif);cursor:pointer}
.nvnv-teaser .hu:hover{text-decoration:underline}
@media (max-width:520px){.nvnv-teaser{right:12px;bottom:70px}}
.nvnv--panel{position:fixed;right:18px;bottom:18px;z-index:9001;width:min(400px,calc(100vw - 24px));height:min(680px,calc(100vh - 36px));background:#fff;border:1px solid #e8e8e8;border-radius:22px;box-shadow:0 30px 70px -30px rgba(0,0,0,.45);display:none;flex-direction:column;overflow:hidden;
  transform-origin:bottom right;animation:nvnv-pop .22s ease-out}
.nvnv--panel.is-open{display:flex}
.nvnv--panel .nvnv-head{border-bottom:1px solid var(--nv-line);flex:none}
.nvnv--panel .nvnv-head .x{display:grid;place-items:center}
.nvnv--panel .nvnv-log{flex:1;min-height:0}
.nvnv--panel .nvnv-form{flex:none;border-top:1px solid var(--nv-line);padding-top:10px}
.nvnv--panel .nvnv-foot{flex:none}
@keyframes nvnv-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
body.nvnv-open .nvnv-fab{display:none}
/* ฟองเด้งทักใช้ animation ของ kit (nvnv-pop มีอยู่แล้ว) */

/* ป้าย AI บนฟองน้อง NV — kit เตรียมคลาส .tag ไว้แล้วแต่ nvk-nv.js ยังไม่ส่ง <span class="tag">
   ระหว่างรอแก้ JS ใช้ ::before แทน (หน้า Partner ใช้ท่าเดียวกัน)
   ★ วันที่ JS ส่ง .tag เองแล้ว ให้ลบบล็อกนี้ ไม่งั้นจะได้ป้ายซ้อนสองอัน */
.nvnv-m.a:not(.wait) .bub{padding-top:12px}
.nvnv-m.a:not(.wait) .bub::before{content:"AI";position:absolute;top:-9px;left:12px;font:700 9.5px/1 var(--nv-mono);
  letter-spacing:.08em;padding:3px 6px;background:var(--nv-bg);border:1.5px solid var(--nv-line);color:var(--nv-mute);border-radius:4px}

/* หน้าเต็มจอ /nv/ — การ์ดถูกวางไว้ใน <div data-nvk-nv="inline"> อีกชั้น ชั้นนั้นไม่ได้ยืด
   การ์ดเลยสูงตามเนื้อหา ช่องพิมพ์ลอยกลางจอ (เป็นมาก่อนเปลี่ยน kit) — ยืดให้เต็มจอ */
#nvhost > [data-nvk-nv]{flex:1;min-height:0;display:flex;flex-direction:column}

/* NVK-LINKIFY 2026-09-04 · ลิงก์ในฟองแชต (URL ที่ทีมงาน/น้อง NV ส่งมา) */
.nvnv-m .bub a.nvnv-link{color:var(--nv-red);font-weight:600;text-decoration:underline;
  text-underline-offset:2px;word-break:break-all}
.nvnv-m .bub a.nvnv-link:hover{color:var(--nv-red-dark)}

/* ══ NVK-NVMOBILE 2026-09-11 · มือถือ ≤640: แผงแชตต้องเป็นชีตเต็มจอ ════════════════════════════
   บล็อก @media(max-width:640px) ข้างบนตั้งชีตเต็มจอไว้ถูกแล้ว แต่บล็อก KITCOMPAT ที่ตามมาทีหลัง
   ประกาศ .nvnv--panel ใหม่ทั้งชุด (right/bottom 18px · กว้าง 400 · มุม 22 · z 9001) ความจำเพาะเท่ากัน
   ตัวที่มาทีหลังชนะ → มือถือได้การ์ดลอยมุมมน หน้าเว็บโผล่ด้านหลังหัวแผง และสูงตาม 100vh ที่มือถือ
   นับแถบ URL ด้วย ช่องพิมพ์จึงเสี่ยงจมใต้แถบเครื่องมือ (ตระกูลเดียวกับ NVK-LCMOBILE2 ของ newCRM)
   ★ บล็อกนี้ต้องอยู่ท้ายสุดของไฟล์เสมอ */
@media(max-width:640px){
  .nvnv--panel,body.nvnv-lift .nvnv--panel{top:0;left:0;right:0;bottom:0;width:100%;max-width:none;
    height:100vh;height:100dvh;border:0;border-radius:0;box-shadow:none;z-index:99500;animation:none}
  .nvnv--panel .nvnv-log{overscroll-behavior:contain}
  body.nvnv-open{overflow:hidden}   /* หน้าเว็บด้านหลังไม่ไหลตามนิ้วตอนเลื่อนแชต */
}