/* public/xv-seamless.css — [NEW 2026-09-30] TAMPILAN "MENYATU" untuk Nokos, SMM, Akun Otomatis (Jaspay), Email Sementara & Asisten Order.
   Masalah lama di HP: kotak di dalam kotak (border + padding bertumpuk), grid 2 kolom yang menyempitkan teks, dan teks panjang yang
   memaksa melebar. Pola baru di layar ≤ 720px:
     • grid kartu → SATU permukaan berisi baris-baris bergaris tipis (gaya daftar aplikasi), tiap baris: ikon | nama (boleh turun baris)
       | harga, lalu baris kedua info + tombol — tidak ada lagi kotak kecil terpisah;
     • panel/bar/kotak pembungkus dibuat menyatu sampai tepi layar (tanpa border kiri-kanan);
     • deretan chip digeser ke samping (tidak menumpuk), dengan tepi memudar;
     • semua teks boleh turun baris (overflow-wrap:anywhere) & kolom teks boleh menyusut (min-width:0).
   Markup & logika TIDAK berubah (hanya CSS, + kelas penanda svc-tx/svc-go di baris SMM). Desktop tetap seperti sebelumnya. */

/* ---------- aman-teks di semua ukuran ---------- */
:is(#page-nokos,#page-smm,#page-jaspay,#page-tempmail) :is(h1,h2,h3,h4,b,strong,small,p,.sm,code,.tmx-subj,.tmx-from){overflow-wrap:anywhere}
@media (max-width:720px){:is(#page-nokos,#page-smm,#page-jaspay,#page-tempmail){overflow-x:clip}} /* hanya HP: penahan pembulatan 100vw */
#page-smm .svc-tx,#page-nokos .nk-card h4,#page-jaspay .jx-card b{min-width:0}

@media (max-width:720px){
  /* pembantu: bagian penuh sampai tepi layar (berapa pun jarak tepi .wrap) */
  html body #page-nokos .nk-grid,html body #page-smm .svc-list,html body #page-jaspay .jx-grid,html body #page-jaspay .jx-orders,
  html body #page-nokos .nk-cats,html body #page-smm .smm-tabs,html body #page-jaspay .jx-tabs,
  html body .xoa,html body #page-jaspay .jx-hero,html body #page-tempmail .tmx-bar,html body #page-tempmail .tmx-inbox{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

  /* ---------- deretan chip/tab: geser ke samping, tepi memudar ---------- */
  html body #page-nokos .nk-cats,html body #page-smm .smm-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:2px 16px 8px;scrollbar-width:none;scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 28px),transparent)}
  html body #page-nokos .nk-cats::-webkit-scrollbar,html body #page-smm .smm-tabs::-webkit-scrollbar{display:none}
  html body #page-nokos .nk-cats>*,html body #page-smm .smm-tabs>*{flex:none;scroll-snap-align:start}
  html body #page-smm .smm-scroll-hint{display:none}

  /* ---------- NOKOS ---------- */
  html body #page-nokos .svc-head{padding-top:22px}
  html body #page-nokos .nk-panel{background:none;border:0;padding:0;margin-top:12px;box-shadow:none}
  html body #page-nokos .nk-row{flex-direction:column;gap:8px}
  html body #page-nokos .nk-select{width:100%;min-width:0;border-radius:14px;padding:10px 14px;background:var(--glass)}
  html body #page-nokos .nk-grid{display:flex;flex-direction:column;gap:0;background:var(--bg2,var(--glass));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  html body #page-nokos .nk-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"av nm pr" "av st bt";column-gap:12px;row-gap:3px;align-items:center;
    padding:12px 16px;border:0;border-radius:0;background:transparent;box-shadow:none!important;transform:none!important;animation:sxIn .35s ease both}
  html body #page-nokos .nk-card+.nk-card{border-top:1px solid var(--line)}
  html body #page-nokos .nk-card:active{background:color-mix(in srgb,var(--vio) 6%,transparent)}
  html body #page-nokos .nk-card .nk-top{display:contents}
  html body #page-nokos .nk-card .nk-avatar{grid-area:av;width:44px;height:44px;border-radius:13px}
  html body #page-nokos .nk-card .nk-hot{grid-area:av;align-self:start;justify-self:end;transform:translate(7px,-7px);font-size:.5rem;padding:1px 5px;border-radius:6px;z-index:1}
  html body #page-nokos .nk-card h4{grid-area:nm;margin:0;font-size:.92rem;line-height:1.3}
  html body #page-nokos .nk-card .nk-stock{grid-area:st;font-size:.74rem}
  html body #page-nokos .nk-card .nk-price{grid-area:pr;margin:0;text-align:right;font-size:1rem;white-space:nowrap}
  html body #page-nokos .nk-card .btn{grid-area:bt;justify-self:end;width:auto;margin:0;padding:7px 14px;font-size:.78rem;border-radius:10px;white-space:nowrap}
  html body #page-nokos .nk-card .btn svg{width:14px;height:14px}

  /* ---------- SMM ---------- */
  html body #page-smm .svc-head{padding-top:22px}
  html body #page-smm .smm-toolbar{flex-direction:column;gap:8px}
  html body #page-smm .smm-search,html body #page-smm .smm-catsel{width:100%;min-width:0;max-width:none}
  html body #page-smm .svc-list{gap:0;margin-top:12px;background:var(--bg2,var(--glass));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  html body #page-smm .svc{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"pl tx tx" "pl pr go";column-gap:12px;row-gap:8px;align-items:start;
    padding:14px 16px;border:0;border-radius:0;background:transparent;box-shadow:none!important;transform:none!important;animation:sxIn .35s ease both}
  html body #page-smm .svc+.svc{border-top:1px solid var(--line)}
  html body #page-smm .svc .plat{grid-area:pl;width:40px;height:40px;border-radius:12px}
  html body #page-smm .svc .svc-tx{grid-area:tx}
  html body #page-smm .svc .svc-tx b{display:block;font-size:.88rem;line-height:1.38}
  html body #page-smm .svc .svc-tx .sm{font-size:.72rem;line-height:1.45;margin-top:3px}
  html body #page-smm .svc .price-pill{grid-area:pr;align-self:center;justify-self:start;margin:0;padding:0;background:none;border:0;display:flex;align-items:baseline;gap:6px;text-align:left}
  html body #page-smm .svc .price-pill .n{font-size:1rem}
  html body #page-smm .svc .price-pill .u{font-size:.7rem}
  html body #page-smm .svc .svc-go{grid-area:go;align-self:center;padding:8px 18px;font-size:.82rem;border-radius:11px;white-space:nowrap}

  /* ---------- AKUN OTOMATIS (Jaspay) ---------- */
  html body #page-jaspay .jx{padding-top:0}
  html body #page-jaspay .jx-hero{border-radius:0 0 26px 26px;border-top:0;border-left:0;border-right:0;padding:22px 16px 18px;gap:16px}
  html body #page-jaspay .jx-hero h1{font-size:1.65rem}
  html body #page-jaspay .jx-steps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  html body #page-jaspay .jx-steps span{flex:none}
  html body #page-jaspay .jx-machine{border-radius:20px;padding:14px}
  html body #page-jaspay .jx-tabs{border-radius:0;border-left:0;border-right:0;padding:5px 12px;margin-top:14px}
  html body #page-jaspay .jx-grid{display:flex;flex-direction:column;gap:0;background:var(--bg2,var(--glass));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  html body #page-jaspay .jx-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto;grid-template-areas:"mo nm pr" "mo sm sm" "mo du du" "mo tg tg";column-gap:12px;row-gap:2px;align-items:center;
    padding:13px 16px;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none}
  html body #page-jaspay .jx-card+.jx-card{border-top:1px solid var(--line)}
  html body #page-jaspay .jx-card:hover{transform:none;box-shadow:none}
  html body #page-jaspay .jx-card[aria-pressed=true]{box-shadow:inset 4px 0 0 var(--jx-a);background:color-mix(in srgb,var(--jx-a) 7%,transparent)}
  html body #page-jaspay .jx-card .jx-mono{grid-area:mo;width:46px;height:46px;border-radius:14px}
  html body #page-jaspay .jx-card b{grid-area:nm;font-size:.95rem}
  html body #page-jaspay .jx-card .pr{grid-area:pr;text-align:right;font-size:.95rem;white-space:nowrap}
  html body #page-jaspay .jx-card small{grid-area:sm}
  html body #page-jaspay .jx-card .jx-tag{grid-area:tg;position:static;justify-self:start;margin-top:4px}
  /* [FIX 2026-10-04] chip durasi dulu tanpa grid-area → jatuh ke kolom ikon (46px) dan teks turun per huruf */
  html body #page-jaspay .jx-card .jx-dur{grid-area:du;justify-self:start;margin-top:4px;max-width:100%;white-space:normal;overflow-wrap:normal;word-break:normal;line-height:1.35}
  html body #page-jaspay .jx-orders{gap:0;background:var(--bg2,var(--glass));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  html body #page-jaspay .jx-order{border:0;border-radius:0;background:transparent;padding:14px 16px}
  html body #page-jaspay .jx-order+.jx-order{border-top:1px solid var(--line)}
  html body #page-jaspay .jx-oh b{flex:1 1 100%;order:-1}
  html body #page-jaspay .jx-acc{flex-direction:column;align-items:flex-start;gap:4px}
  html body #page-jaspay .jx-gate{border-radius:16px}
  html body #page-jaspay .jx-tw{border-radius:0;border-left:0;border-right:0;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  html body #page-jaspay .jx-empty{border:0;background:var(--glass);border-radius:18px}

  /* ---------- EMAIL SEMENTARA ---------- */
  html body #page-tempmail .tmx-hero{border-radius:0 0 28px 28px;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:20px 16px 24px}
  html body #page-tempmail .tmx-box{padding:18px 0 8px}
  html body #page-tempmail .tmx-box .tmx-dash{display:none}
  html body #page-tempmail .tmx-addr-row{gap:8px}
  html body #page-tempmail .tmx-bar{border-radius:0;border-left:0;border-right:0;padding:12px 16px;gap:8px}
  html body #page-tempmail .tmx-pill{flex:1 1 calc(50% - 4px);min-width:0;justify-content:center;white-space:normal;text-align:center;line-height:1.25}
  html body #page-tempmail .tmx-inbox{border-radius:0;border-left:0;border-right:0}
  html body #page-tempmail .tmx-thead{padding:14px 16px}
  html body #page-tempmail .tmx-row{padding:13px 16px}
  html body #page-tempmail .tmx-feats{gap:0;border-top:1px solid var(--line);margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  html body #page-tempmail .tmx-feats>*{border-radius:0;border:0;border-bottom:1px solid var(--line);background:transparent;padding:14px 16px}

  /* ---------- ASISTEN ORDER ---------- */
  html body .xoa{border-radius:0;border-left:0;border-right:0;padding:16px 16px 14px;box-shadow:none}
  html body .xoa-head{gap:12px}
  html body .xoa-sub{font-size:.82rem}
  html body .xoa-steps{gap:2px}
  html body .xoa-step span{font-size:.64rem;line-height:1.25;padding:0 2px}
  html body .xoa-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  html body .xoa-chip{padding:9px 10px;font-size:.84rem;min-width:0}
  html body .xoa-chip span:last-child{overflow-wrap:anywhere;min-width:0}
  html body .xoa-cards{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg2,var(--glass))}
  html body .xoa-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tg tg" "nm pr" "sm cta" "em em";column-gap:12px;row-gap:3px;align-items:center;
    border:0!important;border-radius:0;box-shadow:none!important;background:transparent!important;padding:13px 14px;transform:none!important}
  html body .xoa-card+.xoa-card{border-top:1px solid var(--line)!important}
  html body .xoa-card:first-child{background:color-mix(in srgb,var(--xa-a) 6%,transparent)!important}
  html body .xoa-card .xoa-tag{grid-area:tg;margin:0 0 3px}
  html body .xoa-card b{grid-area:nm;font-size:.9rem}
  html body .xoa-card strong{grid-area:pr;margin:0;font-size:1.15rem;text-align:right;white-space:nowrap}
  html body .xoa-card small{grid-area:sm}
  html body .xoa-card em{grid-area:em}
  html body .xoa-card .xoa-cta{grid-area:cta;margin:0;padding:8px 14px;font-size:.8rem;border-radius:11px;white-space:nowrap;align-self:center}
  html body .xoa-msg{max-width:88%}
}
@media (max-width:380px){
  html body #page-smm .svc{grid-template-areas:"pl tx tx" "pr pr go";}
  html body #page-smm .svc .price-pill{padding-left:0}
  html body .xoa-chips{grid-template-columns:1fr 1fr}
  html body #page-tempmail .tmx-pill{flex-basis:100%}
}
@keyframes sxIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html body :is(#page-nokos .nk-card,#page-smm .svc){animation:none!important}}