/* assets/css/chat-widget.css — dipindah dari <style> di includes/chat_widget.php (11 Okt 2026), isi tidak diubah */
#nmChat{position:fixed;bottom:20px;right:20px;z-index:9999;font-family:Plus Jakarta Sans,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
#nmChatBtn{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--nm-blue,#1178D4),var(--nm-blue-dk,#0E60AA));border:none;color:#fff;cursor:pointer;box-shadow:0 6px 20px rgba(17,120,212,.35);display:none;align-items:center;justify-content:center;transition:transform .2s}
/* Di HP chat dibuka dari tombol tengah bottomnav, jadi tombol mengambang
   disembunyikan supaya pojok kanan bawah tidak penuh. Di PC tidak ada
   bottomnav, jadi tombol mengambang baru ditampilkan. */
@media(min-width:768px){ #nmChatBtn{display:flex} }
#nmChatBtn:hover{transform:scale(1.07)}
#nmChatBtn svg{width:26px;height:26px}
#nmChatPanel{display:none;position:absolute;bottom:70px;right:0;width:340px;max-width:calc(100vw - 32px);background:#fff;border-radius:var(--nm-r-lg,16px);box-shadow:0 12px 44px rgba(0,0,0,.18);overflow:hidden}
#nmChatPanel.show{display:flex;flex-direction:column;animation:nmUp .25s ease}
/* overscroll-behavior:contain menahan scroll supaya tidak "menular" ke halaman
   di belakang panel. Tanpa ini, saat isi chat masih pendek, gerakan swipe
   diteruskan ke body dan isi halaman terlihat menyembul di luar chat. */
.nmCh-body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#nmChatPanel{overscroll-behavior:contain}
@keyframes nmUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.nmCh-hdr{background:linear-gradient(135deg,var(--nm-blue,#1178D4),var(--nm-blue-dk,#0E60AA));color:#fff;padding:13px 15px;display:flex;align-items:center;gap:10px}
.nmCh-hdr .ava{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.nmCh-hdr h3{margin:0;font-size:14px;font-weight:700}
.nmCh-hdr p{margin:1px 0 0;font-size:12px;opacity:.9}
.nmCh-close{margin-left:auto;background:none;border:none;color:#fff;font-size:21px;cursor:pointer;opacity:.85;line-height:1}
.nmCh-body{padding:14px;background:#F6F9FC;height:330px;overflow-y:auto}
.nmMsg{margin-bottom:10px;display:flex}
.nmMsg.me{justify-content:flex-end}
.nmMsg span{max-width:100%;width:fit-content;padding:9px 12px;border-radius:var(--nm-r,12px);font-size:12.8px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.nmMsg.bot span{background:#fff;color:#1F2937;border:1px solid #D8EBFC;border-bottom-left-radius:4px}
.nmMsg.me span{background:var(--nm-blue,#1178D4);color:#fff;border-bottom-right-radius:4px}
.nmMsg.sys span{background:#FCE8C7;color:#8D5D0E;border:1px solid #F9CF8A;font-size:12px;max-width:100%}
.nmDot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#9CA3AF;margin-right:3px;animation:nmB 1.2s infinite}
.nmDot:nth-child(2){animation-delay:.2s}.nmDot:nth-child(3){animation-delay:.4s}
@keyframes nmB{0%,60%,100%{opacity:.3}30%{opacity:1}}
.nmCh-foot{padding:10px;background:#fff;border-top:1px solid #EEF2F1;display:flex;gap:7px}
.nmCh-foot input{flex:1;padding:10px 12px;border:1.5px solid var(--nm-line-2,#E2E8F0);border-radius:var(--nm-r-sm,8px);font-size:13px;font-family:inherit;outline:none}
.nmCh-foot input:focus{border-color:var(--nm-blue,#1178D4)}
.nmCh-foot button{background:var(--nm-blue,#1178D4);color:#fff;border:none;border-radius:var(--nm-r-sm,8px);padding:0 15px;font-weight:700;cursor:pointer;font-family:inherit;font-size:13px}
.nmCh-foot button:disabled{background:#CBD5E1;cursor:not-allowed}
.nmProd{background:#fff;border:1px solid #D8EBFC;border-radius:var(--nm-r,12px);overflow:hidden;margin-bottom:9px;display:flex;gap:0}
.nmProd img{width:88px;height:88px;object-fit:cover;flex-shrink:0;background:var(--nm-blue-lt,#E5F2FD)}
.nmProd .np-no{width:88px;height:88px;flex-shrink:0;background:var(--nm-blue-lt,#E5F2FD);display:flex;align-items:center;justify-content:center;color:var(--nm-blue,#1178D4);font-size:22px;font-weight:800}
.nmProd{align-items:stretch}
.nmProd .np-in{padding:8px 10px;flex:1;min-width:0;display:flex;align-items:center;gap:9px}
.nmProd .np-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.nmProd .np-nm{font-size:12.5px;font-weight:700;color:var(--nm-ink,#101828);line-height:1.32}
.nmProd .np-hg{font-size:13px;font-weight:800;color:var(--nm-blue-dk,#0E60AA)}
.nmProd .np-cr{font-size:12px;color:var(--nm-mut,#5F6B7D);text-decoration:line-through;margin-left:4px;font-weight:500}
.nmProd .np-gr{font-size:12px;color:var(--nm-blue-dk,#0E60AA);background:var(--nm-blue-lt,#E5F2FD);border-radius:5px;padding:2px 6px;display:inline-block;font-weight:600;align-self:flex-start}
.nmProd .np-mn{font-size:12px;color:var(--nm-mut,#5F6B7D)}
.nmProd a{flex-shrink:0;align-self:center;background:var(--nm-blue,#1178D4);color:#fff;text-decoration:none;font-size:12px;font-weight:700;padding:7px 12px;border-radius:var(--nm-r-sm,8px);white-space:nowrap}
.nmCh-note{font-size:12px;color:var(--nm-mut,#5F6B7D);text-align:center;padding:0 10px 8px;background:#fff}
.nmTime{font-size:12px;color:var(--nm-mut,#5F6B7D);margin-top:3px;text-align:right}
.nmMsg.bot .nmTime{text-align:left}
.nmMsg span{position:relative}
.nmWrap{max-width:82%;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.nmMsg.me .nmWrap{align-items:flex-end}

/* ── HP: chat jadi layar penuh, bukan panel mengambang ── */
@media(max-width:767px){
  /* 100dvh ikut menyusut saat keyboard muncul, jadi header tetap kelihatan.
     Tinggi asli dipakai lewat --nmH kalau visualViewport tersedia. */
  #nmChatPanel{position:fixed;top:0;left:0;width:100%;max-width:none;
               height:var(--nmH,100dvh);border-radius:0;box-shadow:none;bottom:auto;right:auto}
  .nmCh-hdr{flex-shrink:0}
  .nmCh-foot{flex-shrink:0}
  .nmCh-note{flex-shrink:0}
  #nmChatPanel.show{display:flex;flex-direction:column;animation:nmSlide .22s ease}
  @keyframes nmSlide{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
  .nmCh-hdr{padding:15px 16px;padding-top:calc(15px + env(safe-area-inset-top,0px))}
  .nmCh-body{flex:1;height:auto}
  .nmCh-foot{padding:11px;padding-bottom:calc(11px + env(safe-area-inset-bottom,0px))}
  #nmChat.terbuka #nmChatBtn{display:none}
  body.nmKunci{overflow:hidden}
  .nmProd img,.nmProd .np-no{width:64px;height:64px}
}

/* ══ 19 Sep 2026: chat tersambung ke Seller Center ══ */
.nmMsg.cs span{background:#0F766E;color:#fff;border-bottom-left-radius:4px}
.nmMsg.bc span{background:#ECFEFF;color:#1F4F7A;border:1px solid #A5F3FC;border-bottom-left-radius:4px}
.nmWho{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#0F766E;margin:0 0 2px 2px}
.nmMsg.bc .nmWho{color:#1A5B95}
.nmMsg.bot .nmWho{color:#6D28D9}
.nmStat{display:none;align-items:center;gap:8px;padding:8px 12px;font-size:12px;font-weight:700;border-bottom:1px solid #EEF2F1;flex-shrink:0}
.nmStat.on{display:flex}
.nmStat.antri{background:#FEF7EB;color:#8D5D0E}
.nmStat.cs{background:#ECFDF5;color:#047857}
.nmStat i{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0;animation:nmB 1.4s infinite}
/* Tombol CS dibuat kecil (permintaan Bro): selama dijawab AI, kebanyakan
   pertanyaan sudah selesai di AI — tombolnya cukup ada, tidak perlu mencolok. */
.nmCsBar{display:none;align-items:center;justify-content:center;gap:6px;padding:5px 10px;background:var(--nm-bg-3,#F9FAFB);border-top:1px solid #EEF2F1;flex-shrink:0;font-size:12px;color:var(--nm-mut,#5F6B7D)}
.nmCsBar.on{display:flex}
.nmCsBar button{border:1px solid #CFE3DF;color:#0F766E;background:#fff;border-radius:999px;padding:3px 10px 3px 8px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:4px;line-height:1.4}
.nmCsBar button:active{background:#F0FDFA}
.nmCsBar button svg{width:12px;height:12px}
/* ══ Ajakan menyalakan notifikasi (23 Sep 2026) ══
   Kenapa ada: tim sering perlu memanggil customer untuk konfirmasi desain,
   sedangkan halaman ini jarang dibuka. Tanpa izin notifikasi, panggilan itu
   tidak bisa sampai ke mana-mana. Barnya hanya muncul kalau memang BISA dan
   BELUM dinyalakan — setelah dinyalakan atau kalau ditolak, dia hilang dan
   tidak mengganggu lagi. */
.nmNotif{display:none;align-items:center;gap:8px;padding:8px 10px;background:#FFF7ED;border-top:1px solid #FED7AA;flex-shrink:0;font-size:12px;color:#9A3412;line-height:1.45}
.nmNotif.on{display:flex}
.nmNotif svg{width:16px;height:16px;flex-shrink:0;color:#EA580C}
.nmNotif span{flex:1;min-width:0}
.nmNotif button{flex-shrink:0;border:0;background:#EA580C;color:#fff;border-radius:999px;padding:5px 11px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.nmNotif button:disabled{opacity:.6;cursor:default}
.nmNotif .tutup{background:transparent;color:#9A3412;padding:5px 4px;font-weight:700}
/* ══ Kirim foto / file desain ══ */
.nmCh-foot{align-items:center}
.nmClip{flex-shrink:0;width:38px;height:38px;border:0;background:#F1F5F9 !important;color:#475467 !important;border-radius:var(--nm-r,12px) !important;padding:0 !important;display:flex;align-items:center;justify-content:center;cursor:pointer}
.nmClip svg{width:19px;height:19px}
.nmClip:active{background:var(--nm-line-2,#E2E8F0) !important}
.nmCh-foot input[type=text]{min-width:0}
.nmCh-foot #nmChatSend{align-self:stretch}
.nmPilih{display:none;align-items:center;gap:9px;padding:8px 10px;background:var(--nm-bg-3,#F9FAFB);border-top:1px solid #EEF2F1;flex-shrink:0}
.nmPilih.on{display:flex}
.nmPilih .pv{width:42px;height:42px;border-radius:var(--nm-r-sm,8px);flex-shrink:0;background:var(--nm-blue-lt,#E5F2FD) center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--nm-blue-dk,#0E60AA)}
.nmPilih .tx{flex:1;min-width:0}
.nmPilih .nm{font-size:12px;font-weight:700;color:var(--nm-ink,#101828);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nmPilih .uk{font-size:12px;color:var(--nm-mut,#5F6B7D)}
.nmPilih button{border:0;background:none;color:var(--nm-mut,#5F6B7D);font-size:20px;line-height:1;cursor:pointer;padding:4px 6px}
.nmFile{display:block;max-width:230px;text-decoration:none}
.nmFile img{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:var(--nm-r,12px);background:var(--nm-blue-lt,#E5F2FD)}
.nmMsg.me .nmFile img{border-bottom-right-radius:4px}
.nmMsg.bot .nmFile img,.nmMsg.cs .nmFile img{border-bottom-left-radius:4px}
.nmDok{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--nm-r,12px);background:#fff;border:1px solid #D8EBFC;min-width:190px}
.nmMsg.me .nmDok{border-bottom-right-radius:4px}
.nmDok .ic{width:36px;height:40px;border-radius:var(--nm-r-sm,8px);background:var(--nm-blue,#1178D4);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;box-sizing:border-box;flex-shrink:0;letter-spacing:.02em}
.nmDok .tx{min-width:0;flex:1}
.nmDok .nm{font-size:12px;font-weight:700;color:var(--nm-ink,#101828);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.nmDok .uk{font-size:12px;color:var(--nm-mut,#5F6B7D)}
.nmFileCap{margin-top:4px}
.nmUp{height:4px;border-radius:4px;background:#D8EBFC;overflow:hidden;margin-top:6px}
.nmUp i{display:block;height:100%;width:0;background:var(--nm-blue,#1178D4);transition:width .2s}
.nmDrop #nmChatPanel{outline:3px dashed var(--nm-blue,#1178D4);outline-offset:-6px}
.nmIdent{flex:1;overflow-y:auto;padding:18px 16px;background:#F6F9FC}
.nmIdent h4{margin:0 0 4px;font-size:15px;color:var(--nm-ink,#101828);line-height:1.35}
.nmIdent p{margin:0 0 14px;font-size:12px;color:var(--nm-mut,#5F6B7D);line-height:1.5}
.nmIdent label{display:block;font-size:12px;font-weight:700;color:#344054;margin:10px 0 4px}
.nmIdent label small{font-weight:500;color:var(--nm-mut,#5F6B7D)}
.nmIdent input{width:100%;box-sizing:border-box;padding:11px 12px;border:1.5px solid var(--nm-line-2,#E2E8F0);border-radius:var(--nm-r,12px);font:inherit;font-size:14px;outline:none;background:#fff}
.nmIdent input:focus{border-color:var(--nm-blue,#1178D4)}
.nmIdent .row{display:flex;gap:8px}
.nmIdent .row > div{flex:1;min-width:0}
.nmIdent button{width:100%;margin-top:16px;background:var(--nm-blue,#1178D4);color:#fff;border:0;border-radius:var(--nm-r,12px);padding:13px;font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.nmIdent button:disabled{background:#CBD5E1}
.nmIdent .err{color:var(--nm-red-dk,#B42318);font-size:12px;font-weight:600;margin-top:10px;min-height:1em}
.nmIdent .login{font-size:12px;color:var(--nm-mut,#5F6B7D);text-align:center;margin-top:12px}
.nmIdent .login a{color:var(--nm-blue,#1178D4);font-weight:700;text-decoration:none}
.nmBadge{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;border-radius:999px;background:var(--nm-red,#F04438);color:#fff;font-size:12px;font-weight:800;display:none;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 0 0 2px #fff;font-family:Plus Jakarta Sans,system-ui,sans-serif}
.nmBadge.on{display:flex}
#nmChatBtn{position:relative}

/* ═══ iPhone/iPad Safari: cegah zoom otomatis saat mengetik (20 Sep 2026) ═══
   Safari iOS otomatis memperbesar layar kalau kolom isian bertulisan < 16px,
   dan sering tidak mengembalikannya (laporan tester: kolom cari & formulir
   kenalan di chat). Hanya berlaku di iOS (-webkit-touch-callout), jadi
   tampilan Android & komputer tidak berubah. */
@supports (-webkit-touch-callout:none){
  input[type=text],input[type=search],input[type=email],input[type=tel],input[type=number],
  input[type=password],input[type=url],input:not([type]),select,textarea{font-size:16px!important}
  .nm-hdr .hs-hint{font-size:16px}
}

/* ═══ Paket 15 (14 Okt 2026): chat terasa cepat & halus — gaya WhatsApp ═══ */
.nmMsg.nmBaru{animation:nmMasuk .18s cubic-bezier(.2,.8,.2,1) both}
@keyframes nmMasuk{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nmTick{display:inline-block;width:11px;height:11px;margin-left:4px;vertical-align:-1px;background:currentColor;opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 20Q98.48 20 73.64 34.4Q48.8 48.8 34.4 73.64Q20 98.48 20 128Q20 157.52 34.4 182.36Q48.8 207.2 73.64 221.6Q98.48 236 128 236Q157.52 236 182.36 221.6Q207.2 207.2 221.6 182.36Q236 157.52 236 128Q236 98.48 221.6 73.64Q207.2 48.8 182.36 34.4Q157.52 20 128 20ZM128 208.64Q105.68 208.64 87.32 197.84Q68.96 187.04 57.8 168.68Q46.64 150.32 47 128Q47.36 105.68 58.16 87.32Q68.96 68.96 87.32 57.8Q105.68 46.64 128 47Q150.32 47.36 168.68 58.16Q187.04 68.96 198.2 87.32Q209.36 105.68 209 128Q208.64 150.32 197.84 168.68Q187.04 187.04 168.68 197.84Q150.32 208.64 128 209.36ZM114.32 119.36 92.72 133.04Q88.4 135.92 86.96 141.32Q85.52 146.72 88.4 151.76Q91.28 156.08 97.04 157.52Q102.8 158.96 107.12 156.08L133.04 139.52Q137.36 137.36 139.52 133.04Q141.68 128.72 141.68 124.4V89.84Q141.68 84.08 137.72 80.12Q133.76 76.16 128 76.16Q122.24 76.16 118.28 80.12Q114.32 84.08 114.32 89.84Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 20Q98.48 20 73.64 34.4Q48.8 48.8 34.4 73.64Q20 98.48 20 128Q20 157.52 34.4 182.36Q48.8 207.2 73.64 221.6Q98.48 236 128 236Q157.52 236 182.36 221.6Q207.2 207.2 221.6 182.36Q236 157.52 236 128Q236 98.48 221.6 73.64Q207.2 48.8 182.36 34.4Q157.52 20 128 20ZM128 208.64Q105.68 208.64 87.32 197.84Q68.96 187.04 57.8 168.68Q46.64 150.32 47 128Q47.36 105.68 58.16 87.32Q68.96 68.96 87.32 57.8Q105.68 46.64 128 47Q150.32 47.36 168.68 58.16Q187.04 68.96 198.2 87.32Q209.36 105.68 209 128Q208.64 150.32 197.84 168.68Q187.04 187.04 168.68 197.84Q150.32 208.64 128 209.36ZM114.32 119.36 92.72 133.04Q88.4 135.92 86.96 141.32Q85.52 146.72 88.4 151.76Q91.28 156.08 97.04 157.52Q102.8 158.96 107.12 156.08L133.04 139.52Q137.36 137.36 139.52 133.04Q141.68 128.72 141.68 124.4V89.84Q141.68 84.08 137.72 80.12Q133.76 76.16 128 76.16Q122.24 76.16 118.28 80.12Q114.32 84.08 114.32 89.84Z'/%3E%3C/svg%3E") center/contain no-repeat}
.nmTick.ok{opacity:.9;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M89.84 205.76Q80.48 205.76 73.28 199.28L24.32 149.6Q20 146 20 140.24Q20 134.48 24.32 130.88Q27.92 126.56 33.68 126.56Q39.44 126.56 43.04 130.88L89.84 176.96L212.96 53.84Q216.56 50.24 222.32 50.24Q228.08 50.24 231.68 53.84Q236 58.16 236 63.56Q236 68.96 231.68 73.28L106.4 199.28Q99.2 205.76 89.84 205.76Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M89.84 205.76Q80.48 205.76 73.28 199.28L24.32 149.6Q20 146 20 140.24Q20 134.48 24.32 130.88Q27.92 126.56 33.68 126.56Q39.44 126.56 43.04 130.88L89.84 176.96L212.96 53.84Q216.56 50.24 222.32 50.24Q228.08 50.24 231.68 53.84Q236 58.16 236 63.56Q236 68.96 231.68 73.28L106.4 199.28Q99.2 205.76 89.84 205.76Z'/%3E%3C/svg%3E")}
#nmChatLoad{align-items:center;gap:8px}
#nmChatLoad .nmKetik{display:inline-flex;align-items:center;gap:4px;padding:11px 13px}
#nmChatLoad .nmDot{width:7px;height:7px;margin:0;background:var(--nm-blue,#1178D4);animation:nmKetik 1s infinite ease-in-out}
#nmChatLoad .nmDot:nth-child(2){animation-delay:.14s}#nmChatLoad .nmDot:nth-child(3){animation-delay:.28s}
@keyframes nmKetik{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-4px);opacity:1}}
.nmKetikTx{font-size:11.5px;font-style:normal;color:var(--nm-mut,#5F6B7D)}
@media(prefers-reduced-motion:reduce){.nmMsg.nmBaru,#nmChatLoad .nmDot{animation:none}}

/* Paket 16 (Safari iPhone): selama chat layar penuh terbuka, bilah-bilah tetap (menu bawah, header, bilah
   pesan/checkout) disembunyikan supaya tidak muncul melayang di atas keyboard. */
@media(max-width:767px){
  body.nmKunci .nm-bnav,body.nmKunci .nm-hdr,body.nmKunci .nm-util,body.nmKunci .hpbar,
  body.nmKunci .checkout-bar,body.nmKunci #checkout-bar,body.nmKunci #checkout-bar-edit,body.nmKunci .ptab{visibility:hidden!important}
  #nmChatPanel{transition:top .12s ease}
}

/* ═══ 17 Okt 2026: tombol chat mudah diketuk & tulisan pesan sesuai aturan huruf ═══
   Aturan Bro: target sentuh di HP min 44px, teks isi 14px, keterangan min 12px.
   - Tombol × (Tutup) dulu ±24px. Di HP chat tampil layar penuh dan header + menu bawah
     disembunyikan (body.nmKunci), jadi × ini SATU-SATUNYA jalan keluar dari chat.
   - Tombol "Chat dengan CS" & "Nyalakan" tetap KECIL tampilannya (permintaan Bro: tidak
     mencolok) — yang diperbesar hanya area ketuknya lewat ::before yang tidak terlihat.
   - Pesan chat 12,8px → 14px; tulisan "sedang mengetik…" 11,5px → 12px. */
.nmCh-close{width:44px;height:44px;margin-right:-8px;padding:0;display:flex;align-items:center;justify-content:center;
  border-radius:var(--nm-r,12px);font-size:26px;flex-shrink:0}
.nmCh-close:hover{background:rgba(255,255,255,.14);opacity:1}
.nmCh-close:focus-visible{outline:2px solid #fff;outline-offset:-4px;opacity:1}
.nmMsg span{font-size:14px}
.nmMsg.sys span{font-size:13px}
.nmKetikTx{font-size:12px}
.nmCsBar button,.nmNotif button{position:relative}
.nmCsBar button::before,.nmNotif button::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;margin-top:-22px}
.nmNotif .tutup{min-width:44px}
.nmPilih button{width:44px;height:44px;padding:0;flex-shrink:0;border-radius:var(--nm-r,12px)}
#nmChatBtn:focus-visible,.nmCh-foot button:focus-visible,.nmIdent button:focus-visible,
.nmCsBar button:focus-visible,.nmNotif button:focus-visible,.nmPilih button:focus-visible,.nmProd a:focus-visible{
  outline:2px solid var(--nm-blue,#1178D4);outline-offset:2px}
@media(max-width:767px){
  .nmClip{width:44px;height:44px}
  .nmCh-foot input[type=text]{min-height:44px;box-sizing:border-box}
  .nmCh-foot #nmChatSend{min-height:44px;min-width:64px}
  .nmProd a{min-height:44px;display:inline-flex;align-items:center;box-sizing:border-box}
  .nmIdent input{min-height:44px}
}

/* ═══ 18 Okt 2026 (UX): tombol "Chat CS lewat WhatsApp" di bawah pesan gagal ═══ */
.nmWaCs{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;margin-top:6px;padding:0 14px;border-radius:999px;
  background:#fff;border:1.5px solid var(--nm-blue,#1178D4);color:var(--nm-blue,#1178D4);font-size:13px;font-weight:700;text-decoration:none}
.nmWaCs:active{background:var(--nm-blue-lt,#E5F2FD)}
.nmWaCs:focus-visible{outline:2px solid var(--nm-blue,#1178D4);outline-offset:2px}

/* ═══ 18 Okt 2026 (UI): warna chat ikut palet + ukuran huruf sesuai aturan ═══
   Aturan Bro: palet putih + biru #1178D4 + kuning #F29D0E (hijau/merah/ungu hanya status);
   isi 14px, judul 16–18px.
   - Gelembung CS dulu hijau tosca (#0F766E), info broadcast biru muda kehijauan (cyan),
     label "Nitro" ungu, tombol "Chat dengan CS" tosca, bilah notifikasi oranye — semua di
     luar palet. Sekarang: CS = biru muda, info = kuning muda, tombol = biru, bilah notifikasi
     = kuning muda dengan tombol biru. Bilah status "Terhubung dengan CS" (hijau) tetap,
     karena itu memang status.
   - Judul header 14px → 16px, judul formulir kenalan 15px → 16px,
     kolom ketik pesan & tombol Kirim 13px → 14px. */
.nmCh-hdr h3{font-size:16px;line-height:1.3}
.nmIdent h4{font-size:16px}
.nmCh-foot input,.nmCh-foot button{font-size:14px}

.nmMsg.cs span{background:var(--nm-blue-lt,#E5F2FD);color:var(--nm-ink,#101828);border:1px solid #B9DAF7}
.nmMsg.bc span{background:#FEF7EB;color:#5C3D09;border:1px solid #F9CF8A}
.nmWho{color:var(--nm-blue-dk,#0E60AA)}
.nmMsg.bot .nmWho{color:var(--nm-blue-dk,#0E60AA)}
.nmMsg.bc .nmWho{color:#8D5D0E}

.nmCsBar button{border-color:#B9DAF7;color:var(--nm-blue-dk,#0E60AA)}
.nmCsBar button:active{background:var(--nm-blue-lt,#E5F2FD)}

.nmNotif{background:#FEF7EB;border-top-color:#F9CF8A;color:#8D5D0E}
.nmNotif svg{color:#F29D0E}
.nmNotif button{background:var(--nm-blue,#1178D4)}
.nmNotif .tutup{background:transparent;color:#8D5D0E}

/* ═══ 19 Okt 2026 (UI): rapikan sisa #209 + tambahan UX 18–19 Okt ═══
   - Nama produk di kartu chat 12,5px → 14px (ukuran isi), dibatasi 2 baris supaya kartu tetap ringkas di HP 360px.
   - Kartu produk tanpa foto: ikon gambar (dulu karakter '☐').
   - Garis pemisah bilah status / CS / file / kolom ketik dulu beda-beda abu (#EEF2F1 kehijauan) → satu warna --nm-line-2.
   - Formulir kenalan: kolom yang salah bergaris merah (merah = status salah); tombol "Chat CS lewat WhatsApp" 13px → 14px
     seperti tombol lain di chat, dan diberi jarak dari tulisan merah di atasnya. */
.nmProd .np-nm{font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nmProd .np-no{height:auto;min-height:88px;align-self:stretch}
.nmProd .np-no svg{width:26px;height:26px}
@media(max-width:767px){.nmProd .np-no{min-height:64px}}
.nmCh-foot,.nmStat,.nmCsBar,.nmPilih{border-color:var(--nm-line-2,#E2E8F0)}
.nmIdent input[aria-invalid=true]{border-color:var(--nm-red,#F04438);background:#FEF3F2}
.nmIdent input[aria-invalid=true]:focus{border-color:var(--nm-red-dk,#B42318)}
.nmWaCs{font-size:14px}
.nmIdent .err .nmWaCs{margin-top:8px;font-weight:700}

/* ═══ 20 Okt 2026 (UI, #342 poin 1): kartu produk di chat lebih rapi di komputer ═══
   - Label grosir 1 baris (teksnya diringkas di chat-widget.js); kalau tetap kepanjangan dipotong "…", tidak turun baris.
   - Panel komputer (340px) lebih sempit dari layar HP, tapi fotonya dulu 88px (HP 64px) sehingga kolom teks tinggal ±126px.
     Sekarang foto 64px juga di komputer, sama dengan HP. */
.nmProd .np-gr{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;box-sizing:border-box}
.nmProd img{width:64px;height:64px}
.nmProd .np-no{width:64px;min-height:64px}

/* 23 Okt 2026: tampil besar foto chat + Unduh HD */
#nmFoto{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;padding:56px 12px 92px;font-family:Plus Jakarta Sans,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
#nmFoto img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.nmFotoX{position:absolute;top:8px;right:8px;width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.nmFotoMuat{position:absolute;color:#fff;font-size:14px}
.nmFotoBawah{position:absolute;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.5)}
.nmFotoNm{flex:1;min-width:0;color:#fff;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nmFotoDl{flex-shrink:0;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--nm-blue,#1178D4);color:#fff;font-size:14px;font-weight:700;text-decoration:none}