/* ===== Baris duo: Rekap (kiri) + tombol HT (kanan) ===== */
.home-duo{display:flex;gap:12px;margin:12px 20px 0;align-items:stretch}
.home-duo .wr-banner{margin:0!important;width:auto!important;flex:1;min-width:0}
.ht-launch{flex:0 0 auto;width:118px;border:0;cursor:pointer;border-radius:20px;position:relative;overflow:hidden;
  font-family:inherit;color:#fff;padding:12px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:linear-gradient(155deg,#4a4ec8 0%,#4338ca 45%,#0ea5a5 100%);
  box-shadow:0 12px 26px -14px rgba(74,78,200,.7);transition:transform .12s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.ht-launch:active{transform:scale(.97)}
.ht-launch.live{box-shadow:0 12px 30px -10px rgba(14,165,165,.8);animation:htLivePulse 1.4s ease-in-out infinite}
.ht-launch.me{background:linear-gradient(155deg,#e11d48,#ff3b5c 60%,#ff6b81)}
@keyframes htLivePulse{0%,100%{box-shadow:0 12px 26px -14px rgba(74,78,200,.7)}50%{box-shadow:0 12px 34px -8px rgba(14,165,165,.9)}}
.ht-l-ic{width:44px;height:44px;display:grid;place-items:center}
.ht-l-svg{width:36px;height:36px;color:#fff}
.ht-l-nm{font-size:12.5px;font-weight:800;line-height:1;letter-spacing:-.01em;text-align:center}
.ht-l-st{font-size:10px;font-weight:600;opacity:.85;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* gelombang suara pada ikon */
.ht-wv .w1,.ht-wv .w2{opacity:0;transform-origin:34px 12px;animation:htWv 1.6s ease-in-out infinite}
.ht-wv .w2{animation-delay:.25s}
.ht-launch.live .ht-wv .w1,.ht-launch.live .ht-wv .w2,.htp .ht-wv .w1,.htp .ht-wv .w2{animation-play-state:running}
@keyframes htWv{0%{opacity:0;transform:scale(.6)}40%{opacity:.9}100%{opacity:0;transform:scale(1.15)}}

/* ===== Halaman HT penuh (gelap, ala walkie-talkie) ===== */
.htp{position:fixed;inset:0;z-index:6000;display:flex;flex-direction:column;background:#14161c;color:#e9ebf2;
  font-family:inherit;padding:0 0 max(14px,env(safe-area-inset-bottom))}
.htp-top{display:flex;align-items:center;gap:8px;padding:calc(12px + env(safe-area-inset-top)) 14px 10px;border-bottom:1px solid rgba(255,255,255,.06)}
.htp-back{width:38px;height:38px;border:0;border-radius:11px;background:rgba(255,255,255,.08);color:#fff;font-size:24px;cursor:pointer}
.htp-title{font-size:16px;font-weight:800;letter-spacing:.06em}
.htp-conn{margin-left:auto;font-size:11px;color:#8a90a6;background:rgba(255,255,255,.06);padding:5px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em}
.htp-peer{display:flex;align-items:center;gap:11px;padding:12px 16px}
.htp-peer-av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;background:#3a3f52;position:relative;flex:0 0 auto}
.htp-peer-av.on::after{content:"";position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#3ddc84;border:2px solid #14161c}
.htp-peer-tx b{font-size:15px;font-weight:800;display:block}
.htp-peer-tx i{font-size:12px;color:#8a90a6;font-style:normal}

.htp-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:10px}
.htp-big{position:relative;width:min(64vw,240px);height:min(64vw,240px);border-radius:50%;border:0;cursor:pointer;
  background:radial-gradient(circle at 50% 42%,#23262f,#1a1d25);display:grid;place-items:center;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.htp-core{width:46%;height:46%;display:grid;place-items:center;z-index:3;color:#fff;transition:transform .12s}
.htp-wt{width:100%;height:100%}
.htp-big:active .htp-core{transform:scale(.94)}
/* cincin dasar (orange, ala lampiran) */
.htp-big::before{content:"";position:absolute;inset:8px;border-radius:50%;border:3px solid #f59e0b;opacity:.9;z-index:2}
/* ring berlapis berdetak — mati saat diam, berjalan saat bicara */
.htp-ring{position:absolute;inset:8px;border-radius:50%;border:3px solid #f59e0b;opacity:0;z-index:1}
.htp.me .htp-ring,.htp.other .htp-ring{animation:htpRing 1.6s cubic-bezier(.22,.61,.36,1) infinite}
.htp.other .htp-ring{border-color:#22d3ee}
.htp.me .htp-big::before{border-color:#ff3b5c}
.htp.other .htp-big::before{border-color:#22d3ee}
.htp.me .htp-big{background:radial-gradient(circle at 50% 42%,#2a1a22,#1a1d25)}
.htp-ring.r2{animation-delay:.45s!important}
.htp-ring.r3{animation-delay:.9s!important}
@keyframes htpRing{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.5);opacity:0}}
.htp-hint{font-size:16px;font-weight:700;color:#c7cbd8;text-align:center}
.htp.me .htp-hint{color:#ff6b81}
.htp.other .htp-hint{color:#67e8f9}

.htp-chan{padding:6px 14px 2px}
.htp-tabs{display:flex;gap:8px;background:rgba(255,255,255,.05);padding:5px;border-radius:14px}
.htp-tab{flex:1;border:0;border-radius:10px;padding:9px 6px;font-family:inherit;font-weight:700;font-size:12.5px;cursor:pointer;background:transparent;color:#9aa0b4;transition:.15s}
.htp-tab.on{background:#4a4ec8;color:#fff;box-shadow:0 6px 16px -8px rgba(74,78,200,.9)}
.htp-pick{margin-top:10px;max-height:24vh;overflow-y:auto;display:flex;flex-direction:column;gap:7px}
.htp-note{font-size:12.5px;color:#8a90a6;text-align:center;padding:8px;line-height:1.5}
.htp-note b{color:#c7cbd8}
.htp-note.warn{color:#ffb27f}
.htp-per{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);
  border-radius:13px;padding:9px 12px;font-family:inherit;font-size:14px;color:#e9ebf2;cursor:pointer;text-align:left}
.htp-per.on{border-color:#4a4ec8;background:rgba(74,78,200,.18)}
.htp-per .htp-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:#3a3f52;color:#fff;flex:0 0 auto}
.htp-per i{margin-left:auto;font-size:11px;color:#8a90a6;font-style:normal}
.htp-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 18px 4px;font-size:12px;color:#8a90a6}

.htp-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#2a2f45;color:#fff;
  padding:11px 18px;border-radius:24px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:6100;max-width:86vw;text-align:center}
.htp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.htp-toast.err{background:#c0304a}
@media(min-width:700px){.htp{max-width:480px;margin:0 auto}}

/* tombol & panel "siapa online" */
.htp-ppl-btn{background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:20px;padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer;margin-left:auto}
.htp-conn{margin-left:8px}
.htp-ppl-panel{background:#171a2b;border-bottom:1px solid #262a44;max-height:38vh;overflow-y:auto;padding:10px 14px}
.htp-ppl-hd{font-size:12px;color:#8a90a6;margin-bottom:8px}
.htp-ppl-row{display:flex;align-items:center;gap:10px;padding:7px 0}
.htp-ppl-nm{font-size:14px;font-weight:600}.htp-ppl-nm i{color:#8a90a6;font-weight:400;font-style:normal;font-size:12px}
.htp-ppl-tag{margin-left:auto;font-size:11px;color:#67e8f9;font-weight:700}
.htp-ppl-dot{margin-left:auto;width:9px;height:9px;border-radius:50%;background:#3ddc84}
.htp-av.spk{background:#0e7490;box-shadow:0 0 0 3px rgba(34,211,238,.35)}
/* di luar jam operasional */
.htp.tutup .htp-big{opacity:.5;filter:grayscale(.5)}
.htp.tutup .htp-big::before,.htp.tutup .htp-ring{border-color:#6b7280!important}

/* riwayat suara 24 jam */
.htp-riw-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 6px;background:transparent;border:0;border-bottom:1px solid #23263a;color:#e8eaf2;font:inherit;text-align:left;cursor:pointer;border-radius:10px}
.htp-riw-row:hover{background:#1c1f31}
.htp-riw-row.main{background:#15304a}
.htp-riw-nm{flex:1;font-size:14px;font-weight:600}
.htp-riw-nm i{color:#8a90a6;font-weight:400;font-style:normal;font-size:12px}
.htp-riw-play{font-size:15px;color:#67e8f9;font-weight:800}

/* ============ RIWAYAT SUARA — desain profesional ============ */
.htp-riw-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;margin-left:5px;padding:0 4px;border-radius:9px;background:#4a4ec8;color:#fff;font-size:10px;font-weight:800}
#htp-riw-panel{padding:14px 14px 18px}
.htr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.htr-title{font-size:14.5px;font-weight:800;color:#e8eaf2;letter-spacing:.01em}
.htr-sub{font-size:11px;font-weight:600;color:#8a90a6;margin-left:6px}
.htr-refresh{width:32px;height:32px;border-radius:10px;border:1px solid #2b2f47;background:#1a1d30;color:#9aa2bd;font-size:15px;cursor:pointer;transition:transform .3s}
.htr-refresh:active{transform:rotate(180deg)}
.htr-chips{display:flex;gap:8px;margin-bottom:12px}
.htr-chip{padding:6px 13px;border-radius:20px;border:1px solid #2b2f47;background:#171a2b;color:#9aa2bd;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
.htr-chip.on{background:#4a4ec8;border-color:#4a4ec8;color:#fff;box-shadow:0 3px 10px rgba(74,78,200,.35)}
.htr-empty{padding:26px 14px;text-align:center;color:#8a90a6;font-size:13.5px;line-height:1.6;background:#171a2b;border:1px dashed #2b2f47;border-radius:14px}
.htr-empty span{font-size:12px;opacity:.75}
.htr-empty.warn{color:#fbbf24;border-color:#4a3a12;background:#231d10}
.htr-spin{display:inline-block;width:14px;height:14px;margin-right:8px;border:2px solid #2b2f47;border-top-color:#4a4ec8;border-radius:50%;animation:htspin .8s linear infinite;vertical-align:-2px}
@keyframes htspin{to{transform:rotate(360deg)}}

/* pengelompokan hari */
.htp-tl{position:relative;padding-left:6px}
.htp-tl::before{content:'';position:absolute;left:26px;top:8px;bottom:8px;width:2px;background:linear-gradient(#2b2f47,#1c1f31)}
.htp-tl-hari{position:relative;display:flex;align-items:center;margin:14px 0 8px;z-index:1}
.htp-tl-hari span{background:#232a4a;color:#9db1ff;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:14px;border:1px solid #33396b}
.htp-tl-hari::after{content:'';flex:1;height:1px;background:#23263a;margin-left:10px}

/* kartu klip */
.htp-tl-row.htr-card{position:relative;display:flex;align-items:center;gap:11px;width:100%;margin:0 0 8px;padding:11px 12px 11px 10px;background:#171a2b;border:1px solid #23263a;border-radius:14px;color:#e8eaf2;font:inherit;text-align:left;cursor:pointer;transition:all .15s;z-index:1}
.htp-tl-row.htr-card:hover{background:#1c2036;border-color:#33396b;transform:translateX(2px)}
.htp-tl-row.htr-card.main{background:#182742;border-color:#2d5f8f;box-shadow:0 4px 14px rgba(34,120,220,.18)}
.htp-tl-garis{display:none}
.htr-av{flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff;box-shadow:inset 0 -2px 5px rgba(0,0,0,.25)}
.htp-tl-row.aku .htr-av{outline:2px solid #22d3ee;outline-offset:2px}
.htr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.htr-top{display:flex;align-items:center;gap:7px}
.htr-top b{font-size:14px;font-weight:800;letter-spacing:.01em}
.htp-tl-row.aku .htr-top b{color:#7dd3fc}
.htr-jam{margin-left:auto;font-size:11.5px;font-weight:700;color:#8a90a6;font-variant-numeric:tabular-nums;background:#10131f;padding:2px 8px;border-radius:8px;border:1px solid #23263a}
.htr-tag{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:8px}
.htr-tag.me{background:#0b3a4a;color:#67e8f9}
.htr-tag.late{background:#3a2c0b;color:#fbbf24}
.htr-mid{display:flex;align-items:center;gap:9px}
.htw{display:inline-flex;align-items:center;gap:2px;height:18px}
.htw i{width:3px;border-radius:2px;background:#3d4470;transition:background .2s}
.htp-tl-row.main .htw i{background:#4f8fd8;animation:htwv 1s ease-in-out infinite alternate}
.htw i:nth-child(2n){animation-delay:.15s}.htw i:nth-child(3n){animation-delay:.3s}
@keyframes htwv{from{transform:scaleY(.6)}to{transform:scaleY(1.15)}}
.htr-dur{font-size:11.5px;font-weight:700;color:#9aa2bd}
.htr-meta{font-size:11px;color:#6d7390}
.htr-prog{display:block;height:3px;background:#23263a;border-radius:3px;overflow:hidden;margin-top:2px}
.htr-prog i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#4a4ec8,#22d3ee);border-radius:3px;transform-origin:left;animation:htprog linear forwards;animation-duration:var(--dur,3s)}
@keyframes htprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.htr-play{flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#232848;color:#9db1ff;font-size:13px;border:1px solid #33396b;transition:all .15s}
.htp-tl-row.htr-card:hover .htr-play{background:#4a4ec8;color:#fff}
.htr-play.on{background:#0e7490;border-color:#22d3ee;color:#fff}
.htr-eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.htr-eq i{width:3px;background:#a5f3fc;border-radius:2px;animation:hteq .7s ease-in-out infinite alternate}
.htr-eq i:nth-child(1){height:60%}.htr-eq i:nth-child(2){height:100%;animation-delay:.2s}.htr-eq i:nth-child(3){height:75%;animation-delay:.4s}
@keyframes hteq{from{transform:scaleY(.5)}to{transform:scaleY(1.1)}}

/* ============ VISUAL PRO: HALAMAN HT ============ */
.htp{background:radial-gradient(120% 90% at 50% 0%,#1a1e38 0%,#0f1115 55%) !important;transition:background .8s}
.htp .htp-top{background:linear-gradient(180deg,rgba(26,30,56,.95),rgba(15,17,21,.6));backdrop-filter:blur(8px);border-bottom:1px solid #23263a}
.htp-big{position:relative;background:radial-gradient(circle at 35% 30%,#262b4d,#171a2b 70%) !important;border:1px solid #2b2f47;box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);transition:transform .15s,box-shadow .3s}
.htp-big:active{transform:scale(.96)}
/* ring bernafas saat standby */
.htp:not(.tutup) .htp-ring.r1{animation:htnafas 3.2s ease-in-out infinite}
.htp:not(.tutup) .htp-ring.r2{animation:htnafas 3.2s ease-in-out infinite .5s}
.htp:not(.tutup) .htp-ring.r3{animation:htnafas 3.2s ease-in-out infinite 1s}
@keyframes htnafas{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.9;transform:scale(1.03)}}
/* gelombang memancar saat orang lain bicara */
.htp.other .htp-big::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(103,232,249,.55);animation:htpancar 1.4s ease-out infinite}
@keyframes htpancar{from{transform:scale(1);opacity:.8}to{transform:scale(1.35);opacity:0}}
.htp.me .htp-big{box-shadow:0 0 0 8px rgba(34,211,238,.12),0 0 55px rgba(34,211,238,.35)}
/* tab & hint */
.htp-tab{transition:all .2s}
.htp-tab.on{box-shadow:0 4px 14px rgba(74,78,200,.4)}
.htp-hint{transition:color .3s}

/* ---- LATAR UNREAD (merah tua elegan) ---- */
.htp.unread{background:radial-gradient(120% 90% at 50% 0%,#3a1626 0%,#170d12 55%) !important}
.htp.unread .htp-top{background:linear-gradient(180deg,rgba(58,22,38,.95),rgba(23,13,18,.6));border-bottom-color:#4a2333}
.htp.unread .htp-big{background:radial-gradient(circle at 35% 30%,#4a2338,#241420 70%) !important;border-color:#5c2c42}

/* ---- DARURAT (merah menyala penuh) ---- */
.htp.darurat{background:radial-gradient(120% 90% at 50% 0%,#7f1d1d 0%,#2a0a0a 60%) !important;animation:htdrt 1s ease-in-out infinite}
@keyframes htdrt{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
.htp.darurat .htp-big{border-color:#ef4444;box-shadow:0 0 0 10px rgba(239,68,68,.2),0 0 70px rgba(239,68,68,.5) !important}

/* strip pemberitahuan di bawah top bar */
.htp-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:10px 16px;font-size:13px;color:#fecdd3;animation:htstrip .4s ease}
@keyframes htstrip{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
.htp-strip.baru{background:linear-gradient(90deg,#3f1d2e,#2a1420);border-bottom:1px solid #5c2c42}
.htp-strip.baru button{background:#e11d48;border:0;color:#fff;font:inherit;font-weight:800;font-size:12.5px;padding:8px 14px;border-radius:20px;cursor:pointer;box-shadow:0 4px 12px rgba(225,29,72,.4)}
.htp-strip.drt{background:linear-gradient(90deg,#7f1d1d,#450a0a);border-bottom:1px solid #ef4444;color:#fff;font-weight:600;animation:htstrip .4s ease,htdrt 1s ease-in-out infinite}

/* tombol darurat di top bar */
.htp-sos{background:#3f1420 !important;border:1px solid #7f1d1d !important;transition:all .2s}
.htp-sos.arm{animation:htarm .5s ease-in-out infinite;background:#9f1239 !important}
@keyframes htarm{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.htp-sos.fire{background:#e11d48 !important;box-shadow:0 0 24px rgba(225,29,72,.7)}

/* chip & kartu tambahan riwayat */
.htr-chip.merah{border-color:#e11d48;color:#fda4af}
.htr-chip.merah.on{background:#e11d48;border-color:#e11d48;color:#fff}
.htr-cari{margin-bottom:10px}
.htr-cari input{width:100%;box-sizing:border-box;background:#10131f;border:1px solid #23263a;border-radius:12px;color:#e8eaf2;font:inherit;font-size:13px;padding:10px 13px;outline:none;transition:border .2s}
.htr-cari input:focus{border-color:#4a4ec8}
.htr-catchup{display:block;width:100%;margin:0 0 12px;padding:12px;background:linear-gradient(90deg,#e11d48,#be123c);border:0;border-radius:13px;color:#fff;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(225,29,72,.35);animation:htstrip .4s ease}
.htp-tl-row.htr-card.baru{border-color:#5c2c42;background:#221420}
.htp-tl-row.htr-card.drt{border-color:#7f1d1d;background:#2a1215}
.htr-tag.drt{background:#7f1d1d;color:#fecaca}
.htr-dot-baru{width:8px;height:8px;border-radius:50%;background:#e11d48;box-shadow:0 0 0 3px rgba(225,29,72,.25);animation:htnafas 1.6s ease-in-out infinite}
.htr-teks{display:block;font-size:12.5px;font-style:italic;color:#b9bfd8;line-height:1.4;background:#10131f;border-left:2px solid #4a4ec8;padding:5px 9px;border-radius:0 8px 8px 0;margin:2px 0}

/* ============ LAUNCHER BERANDA — DESAIN BARU ============ */
.ht-launch{position:relative;overflow:hidden;display:flex;align-items:center;gap:11px;background:linear-gradient(135deg,#232a7a 0%,#3a3f9e 55%,#4a4ec8 100%);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:13px 14px;color:#fff;box-shadow:0 8px 24px rgba(35,42,122,.35);transition:background .6s,box-shadow .4s}
.ht-l-glow{position:absolute;top:-40%;right:-15%;width:65%;height:180%;background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent 70%);pointer-events:none}
.ht-l-ic{position:relative;flex:0 0 40px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14);border-radius:13px}
.ht-l-svg{width:24px;height:24px;color:#fff}
.ht-l-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#e11d48;color:#fff;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid #232a7a;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.ht-l-tx{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.ht-l-nm{font-size:14.5px;font-weight:800;letter-spacing:.01em}
.ht-l-st{font-size:11.5px;font-weight:600;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht-l-dots{display:inline-flex;gap:3px;align-items:center}
.ht-l-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5);animation:htldot 1.6s ease-in-out infinite}
.ht-l-dots i:nth-child(2){animation-delay:.25s}.ht-l-dots i:nth-child(3){animation-delay:.5s}
@keyframes htldot{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.ht-launch.live{background:linear-gradient(135deg,#065f46,#0e9f6e);box-shadow:0 8px 26px rgba(14,159,110,.4)}
.ht-launch.me{background:linear-gradient(135deg,#0e7490,#22d3ee);box-shadow:0 8px 26px rgba(34,211,238,.4)}
.ht-launch.live .ht-l-dots i,.ht-launch.me .ht-l-dots i{background:#fff;animation-duration:.7s}
/* MERAH saat ada pesan baru */
.ht-launch.unread{background:linear-gradient(135deg,#7f1d3a 0%,#9f1239 55%,#e11d48 100%);box-shadow:0 8px 26px rgba(225,29,72,.42);animation:htlmerah 2.4s ease-in-out infinite}
@keyframes htlmerah{0%,100%{box-shadow:0 8px 26px rgba(225,29,72,.42)}50%{box-shadow:0 8px 34px rgba(225,29,72,.65)}}
.ht-launch.unread .ht-l-badge{border-color:#9f1239}

/* ============ HEMAT BATERAI: jeda animasi saat halaman tak terlihat ============
   PENTING: pemilih dibatasi HANYA ke elemen HT. Jam, hitung mundur, dan animasi
   halaman lain (termasuk ABSENSI) TIDAK tersentuh. Tidak ada pauseTimers() dipakai. */
.ht-diam .htp,
.ht-diam .htp *,
.ht-diam .ht-launch,
.ht-diam .ht-launch *,
.ht-diam .htp-strip,
.ht-diam .htr-card,
.ht-diam .htr-card *{
  animation-play-state: paused !important;
  transition: none !important;
}
/* Denyut merah "pesan baru" berhenti setelah 6 putaran agar tidak menyala terus-menerus */
.ht-launch.unread{animation-iteration-count:6}

/* Tombol pemulihan darurat HT — muncul hanya bila HT tidak merespons */
.ht-reset{display:block;width:calc(100% - 32px);margin:12px 16px 4px;padding:13px;border:0;border-radius:14px;
  background:linear-gradient(135deg,#f59e0b,#d97706);color:#3a2503;font:inherit;font-weight:800;font-size:14px;
  cursor:pointer;box-shadow:0 8px 20px rgba(245,158,11,.4);animation:htResetMasuk .35s ease}
@keyframes htResetMasuk{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
.ht-reset:disabled{filter:grayscale(.5);opacity:.7}

/* ============================================================
   PENYEMPURNAAN HALAMAN HT — 8 ide
   ============================================================ */

/* (1) Panel riwayat dapat ditarik */
.htr-sheet{position:relative;transition:height .3s cubic-bezier(.22,.61,.36,1),max-height .3s cubic-bezier(.22,.61,.36,1);
  display:flex;flex-direction:column;overflow:hidden}
.htr-sheet>.htp-tl{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.htr-grip{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:center;height:22px;
  cursor:grab;touch-action:none;background:linear-gradient(180deg,#171a2b,rgba(23,26,43,.85))}
.htr-grip:active{cursor:grabbing}
.htr-grip span{width:42px;height:4px;border-radius:3px;background:#3a3f5e;transition:background .2s,width .2s}
.htr-grip:hover span{background:#5b60a8;width:52px}

/* (2) Pemisah & grup lama */
.htr-garis-baru{display:flex;align-items:center;gap:10px;margin:12px 2px 8px;color:#f87171;font-size:11px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase}
.htr-garis-baru::before,.htr-garis-baru::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(248,113,113,.5),transparent)}
.htr-lama{display:block;width:100%;margin:10px 0 4px;padding:11px;border:1px dashed #33385c;border-radius:12px;
  background:transparent;color:#8a90b8;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.htr-lama:hover{background:#1c1f31;color:#c9cffb}

/* (2b) Ajakan putar ulang yang bisa ditutup */
.htr-catchup-wrap{display:flex;gap:7px;align-items:stretch;margin-top:10px}
.htr-catchup-wrap .htr-catchup{flex:1;margin-top:0}
.htr-catchup-x{flex:0 0 42px;border:0;border-radius:12px;background:rgba(255,255,255,.09);color:#c9cffb;
  font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.htr-catchup-x:hover{background:rgba(255,255,255,.16)}

/* (4) Pemutar mengambang */
.ht-mini{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0));z-index:60;
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;
  background:rgba(18,22,44,.97);border:1px solid rgba(122,126,224,.35);
  box-shadow:0 14px 34px rgba(0,0,0,.55);opacity:0;transform:translateY(14px);transition:.28s}
.ht-mini.on{opacity:1;transform:translateY(0)}
.hm-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;color:#fff;flex:0 0 auto}
.hm-inf{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hm-inf b{font-size:13px;font-weight:800;color:#e8eaf2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-inf i{font-size:10.5px;font-style:normal;color:#8a90b8}
.hm-prog{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:3px}
.hm-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4a4ec8,#7a7ee0)}
.hm-b{flex:0 0 auto;min-width:38px;height:34px;border:0;border-radius:11px;background:rgba(255,255,255,.1);
  color:#e8eaf2;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.hm-b:hover{background:rgba(255,255,255,.18)}
.hm-b.x{background:rgba(248,113,113,.18);color:#fca5a5}

/* (5) Alarm diberi jarak + isyarat menahan */
.htp-sos-sela{display:inline-block;width:14px}
.htp-sos.arm{animation:sosIsi 2s linear forwards}
@keyframes sosIsi{from{box-shadow:0 0 0 0 rgba(248,113,113,.55)}to{box-shadow:0 0 0 16px rgba(248,113,113,0);background:#dc2626}}

/* (7) Gestur kartu */
.htr-card{transition:transform .2s cubic-bezier(.22,.61,.36,1);touch-action:pan-y;position:relative}
.htr-card.geser-ka{box-shadow:inset 4px 0 0 #12b76a}
.htr-card.geser-ki{box-shadow:inset -4px 0 0 #22d3ee}

/* (8) Baris status */
.htp-status{display:flex;align-items:center;gap:7px;padding:7px 14px;font-size:12px;color:#9aa2c8;
  background:#141728;border-bottom:1px solid #23263a}
.htp-status b{color:#e8eaf2;font-weight:800}
.htp-status i{font-style:normal;font-weight:700}
.hs-sep{opacity:.4}
.hs-dot{width:8px;height:8px;border-radius:50%;background:#12b76a;box-shadow:0 0 0 0 rgba(18,183,106,.6);animation:hsNadi 2s ease-out infinite}
@keyframes hsNadi{0%{box-shadow:0 0 0 0 rgba(18,183,106,.55)}70%{box-shadow:0 0 0 8px rgba(18,183,106,0)}100%{box-shadow:0 0 0 0 rgba(18,183,106,0)}}
.htp-status.busy .hs-dot{background:#fbbf24;animation:none}
.htp-status.busy i{color:#fbbf24}
.htp-status.me .hs-dot{background:#22d3ee}
.htp-status.me i{color:#22d3ee}
.htp-status.off .hs-dot{background:#6b7299;animation:none}
.htp-status.off i{color:#8a90b8}

/* ============================================================
   TEMA BIRU HALAMAN HT  — menggantikan nuansa merah/maroon
   Teks: putih & abu-abu. Merah HANYA untuk darurat.
   ============================================================ */
.htp{background:radial-gradient(120% 90% at 50% 0%,#1b2454 0%,#0c1024 55%) !important;color:#e8eaf2 !important}

/* keadaan "ada pesan belum didengar" -> BIRU tua, bukan merah */
.htp.unread{background:radial-gradient(120% 90% at 50% 0%,#1e2a63 0%,#0b0f22 55%) !important}
.htp.unread .htp-top{background:linear-gradient(180deg,rgba(30,42,99,.96),rgba(11,15,34,.6)) !important;
  border-bottom-color:#2b3568 !important}

/* kepala: judul satu baris */
.htp-top{background:linear-gradient(180deg,rgba(27,36,84,.96),rgba(12,16,36,.6));border-bottom:1px solid #2b3568}
.htp-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:16px;font-weight:900;letter-spacing:.02em;color:#fff}

/* ikon peserta — hijau */
.htp-ppl-hijau{display:inline-flex;align-items:center;gap:5px;color:#22c55e !important;
  background:rgba(34,197,94,.14) !important;border:1px solid rgba(34,197,94,.34) !important}
.htp-ic-ppl{width:19px;height:19px;flex:0 0 auto}
.htp-ppl-hijau span{color:#22c55e;font-weight:900;font-size:13px}

/* indikator jaringan — hijau tersambung, merah putus */
.htp-net{display:inline-flex;align-items:center;justify-content:center;width:38px;height:34px;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);transition:.25s}
.htp-ic-net{width:20px;height:20px}
.htp-net.ok{color:#22c55e;background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.34)}
.htp-net.off{color:#f87171;background:rgba(248,113,113,.14);border-color:rgba(248,113,113,.4);
  animation:netPutus 1.4s ease-in-out infinite}
@keyframes netPutus{0%,100%{opacity:1}50%{opacity:.45}}

/* baris status & teks umum: putih / abu-abu */
.htp-status{background:#141a33;border-bottom:1px solid #26305c;color:#aab3d6}
.htp-status b{color:#fff}
.htp-peer,.htp-hint,.htp-foot,.htp-spk{color:#aab3d6 !important}
.htp-tekan,.htp-center b{color:#e8eaf2 !important}

/* panel riwayat: biru tua, teks terang */
.htp-ppl-panel{background:#141a33 !important;border-bottom-color:#26305c !important;color:#e8eaf2}
.htr-grip{background:linear-gradient(180deg,#141a33,rgba(20,26,51,.85)) !important}
.htr-title,.htr-nm,.htp-riw-nm{color:#fff}
.htr-sub,.htr-meta,.htr-jam,.htr-dur{color:#9aa3c8 !important}
.htp-tl-hari span{color:#9aa3c8;background:#1b2350}
.htr-card{background:transparent;border-bottom-color:#26305c}
.htr-card:hover{background:#1b2350}
.htr-card.main{background:#233069}

/* pegangan panel: dua tombol + batang */
.htr-grip{display:flex;align-items:center;justify-content:center;gap:14px;height:30px}
.htr-grip-bar{width:44px;height:4px;border-radius:3px;background:#3d477e;transition:.2s}
.htr-grip:hover .htr-grip-bar{background:#6b76c8;width:56px}
.htr-grip-b{width:34px;height:24px;border:0;border-radius:8px;background:rgba(255,255,255,.08);
  color:#aab3d6;font:inherit;font-size:13px;font-weight:900;cursor:pointer;line-height:1}
.htr-grip-b:hover{background:rgba(255,255,255,.18);color:#fff}

/* ajakan putar ulang DI DALAM riwayat — biru, bukan merah */
.htr-catchup{background:linear-gradient(135deg,#4a4ec8,#3a3ea8) !important;color:#fff !important;
  box-shadow:0 8px 20px -8px rgba(58,62,168,.7)}
.htr-chip.merah{border-color:#6b76c8 !important;color:#c9cffb !important}

/* MERAH hanya untuk darurat */
.htp-strip.drt{background:linear-gradient(90deg,#7f1d1d,#b91c1c) !important;color:#fff !important}
.htp.darurat{background:radial-gradient(120% 90% at 50% 0%,#4a1020 0%,#12060a 55%) !important}

/* ============================================================
   PERBAIKAN v18 — bottom sheet, ikon hijau, sinyal, tema biru tegas
   ============================================================ */

/* ---------- BOTTOM SHEET RIWAYAT ---------- */
.htr-tirai{position:fixed;inset:0;z-index:6150;background:rgba(6,9,22,.55);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .26s}
.htr-tirai.on{opacity:1}
.htp-ppl-panel.htr-sheet{position:fixed !important;left:0;right:0;bottom:0;top:auto !important;
  z-index:6200;height:68vh;max-height:96vh !important;
  display:flex;flex-direction:column;overflow:hidden !important;
  background:#131a36 !important;border:1px solid #2b3568 !important;border-bottom:0 !important;
  border-radius:22px 22px 0 0;box-shadow:0 -18px 50px rgba(0,0,0,.6);padding:0 !important}
.htr-sheet .htr-grip{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:30px;
  cursor:grab;touch-action:none;background:transparent !important}
.htr-sheet .htr-grip:active{cursor:grabbing}
.htr-grip-bar{width:52px;height:5px;border-radius:3px;background:#4a5490;transition:.2s}
.htr-sheet .htr-grip:hover .htr-grip-bar{background:#7a85d8;width:64px}
.htr-sheet .htr-head{flex:0 0 auto;padding:2px 16px 10px;touch-action:none;cursor:grab}
.htr-sheet .htr-chips,.htr-sheet .htr-cari,.htr-sheet .htr-catchup-wrap{flex:0 0 auto;padding:0 16px}
.htr-sheet .htr-catchup-wrap{padding-bottom:10px}
.htr-sheet .htp-tl{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px 18px}
.htr-sheet .htr-empty{padding:26px 16px}

/* ---------- IKON PESERTA: HIJAU (ikon + angka) ---------- */
.htp-ppl-btn.htp-ppl-hijau{display:inline-flex !important;align-items:center;gap:6px;padding:6px 12px !important;
  color:#22c55e !important;background:rgba(34,197,94,.16) !important;border:1px solid rgba(34,197,94,.45) !important}
.htp-ppl-hijau .htp-ic-ppl{width:20px;height:20px;color:#22c55e}
.htp-ppl-hijau span{color:#22c55e !important;font-weight:900;font-size:14px;line-height:1}

/* ---------- INDIKATOR SINYAL: BATANG WIFI ---------- */
.htp-net{display:inline-flex !important;align-items:flex-end;gap:3px;height:34px;padding:0 11px !important;
  border-radius:12px;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.4);color:#22c55e}
.hn-bar{width:4px;border-radius:2px;background:currentColor;opacity:.95}
.hn-bar.b1{height:7px}.hn-bar.b2{height:11px}.hn-bar.b3{height:15px}.hn-bar.b4{height:19px}
.htp-net.ok{color:#22c55e;background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.45)}
.htp-net.off{color:#f87171;background:rgba(248,113,113,.14);border-color:rgba(248,113,113,.45)}
.htp-net.off .hn-bar.b3,.htp-net.off .hn-bar.b4{opacity:.28}
.htp-net.off{animation:netPutus 1.4s ease-in-out infinite}

/* ---------- TEMA BIRU TEGAS (menang atas gaya lama) ---------- */
.htp,.htp.unread{background:radial-gradient(125% 92% at 50% 0%,#1c2a6b 0%,#0a0f26 58%) !important;color:#e8eaf2 !important}
.htp-top,.htp.unread .htp-top{background:linear-gradient(180deg,rgba(24,34,84,.97),rgba(10,15,38,.55)) !important;
  border-bottom:1px solid #2b3568 !important}
.htp-center,.htp-peer,.htp-hint,.htp-foot{background:transparent !important}
.htp-big{background:radial-gradient(circle at 50% 38%,#233069,#141b3f) !important;
  box-shadow:0 0 0 1px rgba(122,126,224,.28),0 18px 44px rgba(0,0,0,.55) !important}
.htp-ring{border-color:rgba(122,126,224,.5) !important}
.htp-tabs{background:rgba(255,255,255,.05) !important}
.htp-tab.on{background:linear-gradient(135deg,#4a4ec8,#3a3ea8) !important;color:#fff !important}
.htp-strip.baru{background:linear-gradient(90deg,#28327a,#3a3ea8) !important;color:#fff !important}

/* teks: putih & abu — tidak ada merah kecuali darurat */
.htp *{color:inherit}
.htp-title{color:#fff !important}
.htp-hint,.htp-peer,.htp-foot,.htp-spk,.htr-sub,.htr-meta,.htr-jam,.htr-dur{color:#a3abd4 !important}
.htr-chip{background:rgba(255,255,255,.07) !important;border:1px solid #2b3568 !important;color:#c9cffb !important}
.htr-chip.on{background:linear-gradient(135deg,#4a4ec8,#3a3ea8) !important;border-color:#4a4ec8 !important;color:#fff !important}
.htr-chip.merah{border-color:#6b76c8 !important;color:#c9cffb !important;background:rgba(74,78,200,.16) !important}
.htr-catchup{background:linear-gradient(135deg,#4a4ec8,#3a3ea8) !important;color:#fff !important}
.htr-cari input{background:rgba(255,255,255,.07) !important;border:1px solid #2b3568 !important;color:#e8eaf2 !important}

/* MERAH: khusus darurat */
.htp.darurat{background:radial-gradient(125% 92% at 50% 0%,#4a1020 0%,#12060a 55%) !important}
.htp-strip.drt{background:linear-gradient(90deg,#7f1d1d,#b91c1c) !important;color:#fff !important}
.htp-sos{border-color:rgba(248,113,113,.55) !important}

/* ============================================================
   v19 — sinyal rata tengah · SOS di bawah · badge lingkup ·
         lingkaran biru muda → merah saat bicara · ring bergetar
   ============================================================ */

/* ---------- 1. Ikon sinyal: benar-benar rata tengah ---------- */
.htp-net{display:inline-flex !important;align-items:center !important;justify-content:center;
  height:34px;width:44px;padding:0 !important;border-radius:12px}
.hn-in{display:flex;align-items:flex-end;gap:3px;height:19px}   /* batang menapak pada garis yang sama */
.hn-bar{width:4px;border-radius:2px;background:currentColor;display:block}

/* ---------- 2. Badge lingkup di kanan atas ---------- */
.htp-lingkup{margin-left:auto;padding:7px 13px;border-radius:20px;
  background:transparent;border:1.5px solid rgba(34,197,94,.65);color:#22c55e;
  font-size:12.5px;font-weight:800;letter-spacing:.02em;white-space:nowrap;
  max-width:118px;overflow:hidden;text-overflow:ellipsis;transition:.25s}
.htp-lingkup.sibuk{border-color:rgba(251,191,36,.7);color:#fbbf24}
.htp-lingkup.bicara{border-color:rgba(248,113,113,.75);color:#fca5a5;
  box-shadow:0 0 14px rgba(248,113,113,.28)}

/* judul boleh menyusut agar badge selalu muat */
.htp-title{flex:0 1 auto;min-width:52px}

/* ---------- 3. Footer: SOS (lebih besar) + Loudspeaker di kanan ---------- */
.htp-foot{display:flex !important;align-items:center;gap:12px;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom,0)) !important}
.htp-foot .htp-sos{flex:0 0 auto;width:52px;height:52px;border-radius:16px;font-size:24px;line-height:1;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(248,113,113,.14) !important;border:1.5px solid rgba(248,113,113,.55) !important;
  color:#fca5a5;transition:transform .12s,background .2s}
.htp-foot .htp-sos:active{transform:scale(.94)}
.htp-foot .htp-sos.arm{background:rgba(220,38,38,.35) !important;animation:sosIsi 2s linear forwards}
.htp-foot .htp-spk{margin-left:auto;font-size:12.5px;color:#a3abd4 !important;white-space:nowrap}

/* ---------- 4. Lingkaran besar: biru muda, merah maroon saat bicara ---------- */
.htp-big{background:radial-gradient(circle at 50% 34%,#5b8fe0 0%,#2f5fb0 48%,#1d3d7a 100%) !important;
  box-shadow:0 0 0 1px rgba(150,190,255,.35),0 20px 48px rgba(0,0,0,.55),
             inset 0 -10px 26px rgba(0,0,0,.28) !important;transition:background .35s,box-shadow .35s}
.htp-big .htp-core svg,.htp-big .htp-core{color:#fff !important;fill:#fff !important}
.htp.me .htp-big,.htp-big.me,.htp-big:active{
  background:radial-gradient(circle at 50% 34%,#b04a5a 0%,#7d2436 48%,#4a1020 100%) !important;
  box-shadow:0 0 0 1px rgba(255,150,170,.4),0 20px 52px rgba(120,20,40,.5),
             inset 0 -10px 26px rgba(0,0,0,.35) !important}

/* ---------- 5. Ring bergetar (mengembang–mengempis) ---------- */
.htp-ring{border:2px solid rgba(150,190,255,.5) !important;opacity:.9}
.htp-ring.r1{animation:ringNafas 2.2s ease-in-out infinite}
.htp-ring.r2{animation:ringNafas 2.2s ease-in-out infinite .28s}
.htp-ring.r3{animation:ringNafas 2.2s ease-in-out infinite .56s}
@keyframes ringNafas{
  0%,100%{transform:scale(1);opacity:.75}
  50%{transform:scale(1.085);opacity:.28}}
/* saat bicara: getaran lebih cepat & memerah */
.htp.me .htp-ring,.htp-big.me ~ .htp-ring{border-color:rgba(255,140,160,.65) !important}
.htp.me .htp-ring.r1{animation-duration:.85s}
.htp.me .htp-ring.r2{animation-duration:.85s;animation-delay:.12s}
.htp.me .htp-ring.r3{animation-duration:.85s;animation-delay:.24s}

/* ============================================================
   v20 — badge lingkup di baris peer · lingkaran biru chip ·
         ring MERAH berdenyut · indikator MENGUDARA
   ============================================================ */

/* ---------- badge lingkup: pindah ke baris "Semua / Standby" ---------- */
.htp-peer{display:flex !important;align-items:center;gap:11px}
.htp-peer .htp-lingkup{margin-left:auto;flex:0 0 auto;padding:6px 14px;border-radius:20px;
  background:transparent;border:1.5px solid rgba(34,197,94,.65);color:#22c55e;
  font-size:12.5px;font-weight:800;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.htp-peer .htp-lingkup.sibuk{border-color:rgba(251,191,36,.7);color:#fbbf24}
.htp-peer .htp-lingkup.bicara{border-color:rgba(248,113,113,.8);color:#fca5a5;box-shadow:0 0 14px rgba(248,113,113,.3)}
/* kepala: judul boleh memakai ruang lebih lega lagi */
.htp-top .htp-lingkup{display:none !important}
.htp-title{flex:1 1 auto;min-width:60px}

/* ---------- lingkaran dalam: BIRU seperti chip "SEMUA" ---------- */
.htp .htp-big{background:radial-gradient(circle at 50% 34%,#6b70f0 0%,#4a4ec8 52%,#3a3ea8 100%) !important;
  border:0 !important;box-shadow:0 0 0 1px rgba(150,160,255,.35),0 20px 48px rgba(0,0,0,.5),
  inset 0 -12px 28px rgba(0,0,0,.22) !important}
.htp .htp-core,.htp .htp-core svg{color:#fff !important;fill:#fff !important}

/* saat BICARA -> merah maroon */
.htp.me .htp-big{background:radial-gradient(circle at 50% 34%,#b04a5a 0%,#7d2436 52%,#4a1020 100%) !important;
  box-shadow:0 0 0 1px rgba(255,150,170,.45),0 20px 54px rgba(140,20,45,.55),
  inset 0 -12px 28px rgba(0,0,0,.3) !important}

/* ---------- RING MERAH BERDENYUT ---------- */
.htp .htp-big::before{border:3px solid #ef4444 !important;opacity:1 !important;
  animation:ringDenyut 2s ease-in-out infinite}
.htp .htp-ring{border:2px solid rgba(239,68,68,.6) !important;opacity:.7 !important;z-index:1}
.htp:not(.tutup) .htp-ring.r1{animation:ringDenyut 2s ease-in-out infinite !important}
.htp:not(.tutup) .htp-ring.r2{animation:ringDenyut 2s ease-in-out infinite .35s !important}
.htp:not(.tutup) .htp-ring.r3{animation:ringDenyut 2s ease-in-out infinite .7s !important}
@keyframes ringDenyut{
  0%,100%{transform:scale(1);opacity:.75}
  50%{transform:scale(1.09);opacity:.2}}

/* saat BICARA -> denyut jauh lebih cepat & lebih terang */
.htp.me .htp-big::before{border-color:#ff2d4d !important;animation-duration:.6s !important}
.htp.me .htp-ring{border-color:rgba(255,45,77,.8) !important}
.htp.me .htp-ring.r1{animation-duration:.6s !important}
.htp.me .htp-ring.r2{animation-duration:.6s !important;animation-delay:.12s !important}
.htp.me .htp-ring.r3{animation-duration:.6s !important;animation-delay:.24s !important}
/* saat orang lain bicara -> denyut sedang, warna biru langit */
.htp.other .htp-big::before{border-color:#38bdf8 !important;animation-duration:1s !important}
.htp.other .htp-ring{border-color:rgba(56,189,248,.7) !important}

/* ---------- indikator MENGUDARA ---------- */
.htp-bicara{display:none;align-items:center;gap:8px;margin:14px auto 0;padding:8px 18px;border-radius:22px;
  background:rgba(239,68,68,.16);border:1.5px solid rgba(255,45,77,.7);color:#ff8fa3;
  font-size:12.5px;font-weight:900;letter-spacing:.14em}
.htp.me .htp-bicara{display:inline-flex;animation:mengudaraMasuk .25s ease}
@keyframes mengudaraMasuk{from{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1}}
.hb-dot{width:9px;height:9px;border-radius:50%;background:#ff2d4d;animation:hbKedip .6s ease-in-out infinite}
@keyframes hbKedip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.htp.me .htp-hint{display:none}

/* ============================================================
   v21 — badge di kiri · lingkaran BIRU tetap · ring MERAH elegan
   ============================================================ */

/* baris peer: avatar & teks dihapus, badge di KIRI */
.htp-peer{display:flex !important;align-items:center;gap:10px;min-height:44px}
.htp-peer .htp-lingkup{margin-left:0 !important;flex:0 0 auto}
.htp-peer-say{font-size:12.5px;font-weight:700;color:#ff8fa3;letter-spacing:.02em}

/* ---------- LINGKARAN DALAM: SELALU BIRU (termasuk saat bicara) ---------- */
.htp .htp-big,.htp.me .htp-big,.htp.other .htp-big{
  background:radial-gradient(circle at 50% 32%,#7c81ff 0%,#4a4ec8 50%,#343aa0 100%) !important;
  border:0 !important;
  box-shadow:0 0 0 1px rgba(160,170,255,.4),0 22px 52px rgba(0,0,0,.5),
             inset 0 -14px 30px rgba(0,0,0,.24) !important}
.htp .htp-core,.htp .htp-core svg{color:#fff !important;fill:#fff !important}
/* kilau lembut yang berputar pelan — memberi kesan "hidup" tanpa berisik */
.htp .htp-big::after{content:'' !important;position:absolute;inset:-2px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 78%,rgba(255,255,255,.28) 88%,transparent 100%);
  animation:kilauPutar 6s linear infinite;pointer-events:none;z-index:2;opacity:.75;border:0 !important}
@keyframes kilauPutar{to{transform:rotate(360deg)}}
.htp.me .htp-big::after{animation-duration:2.2s;opacity:1}

/* ---------- RING LUAR: MERAH, denyut elegan ---------- */
.htp .htp-big::before{border:3px solid #ef4444 !important;opacity:1 !important;
  box-shadow:0 0 18px rgba(239,68,68,.45);animation:ringDenyut 2.4s cubic-bezier(.45,0,.25,1) infinite}
.htp .htp-ring{border:2px solid rgba(239,68,68,.55) !important;z-index:1}
.htp:not(.tutup) .htp-ring.r1{animation:ringGelombang 2.4s cubic-bezier(.25,.6,.3,1) infinite !important}
.htp:not(.tutup) .htp-ring.r2{animation:ringGelombang 2.4s cubic-bezier(.25,.6,.3,1) infinite .55s !important}
.htp:not(.tutup) .htp-ring.r3{animation:ringGelombang 2.4s cubic-bezier(.25,.6,.3,1) infinite 1.1s !important}
@keyframes ringGelombang{
  0%{transform:scale(1);opacity:.7;border-width:2px}
  70%{opacity:.12}
  100%{transform:scale(1.28);opacity:0;border-width:1px}}
@keyframes ringDenyut{
  0%,100%{transform:scale(1);box-shadow:0 0 18px rgba(239,68,68,.4)}
  50%{transform:scale(1.035);box-shadow:0 0 30px rgba(239,68,68,.75)}}

/* saat BICARA: gelombang jauh lebih cepat & pekat */
.htp.me .htp-big::before{border-color:#ff2d4d !important;animation-duration:.7s !important}
.htp.me .htp-ring{border-color:rgba(255,45,77,.75) !important}
.htp.me .htp-ring.r1{animation-duration:.9s !important}
.htp.me .htp-ring.r2{animation-duration:.9s !important;animation-delay:.2s !important}
.htp.me .htp-ring.r3{animation-duration:.9s !important;animation-delay:.4s !important}
/* orang lain bicara: biru langit */
.htp.other .htp-big::before{border-color:#38bdf8 !important;animation-duration:1.2s !important}
.htp.other .htp-ring{border-color:rgba(56,189,248,.6) !important}

/* ---------- banner "Versi baru" ---------- */
#ess-update-bar{position:fixed;left:14px;right:14px;bottom:calc(18px + env(safe-area-inset-bottom,0));
  z-index:9999;display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:16px;
  background:linear-gradient(135deg,#4a4ec8,#3a3ea8);color:#fff;font-weight:700;font-size:13.5px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);opacity:0;transform:translateY(16px);transition:.3s}
#ess-update-bar.on{opacity:1;transform:translateY(0)}
#ess-update-bar span{flex:1}
#ess-update-bar button{flex:0 0 auto;background:#fff;color:#3a3ea8;border:0;border-radius:11px;
  padding:9px 15px;font:inherit;font-weight:800;font-size:12.5px;cursor:pointer}

/* ============================================================
   v22 — efek lingkaran disederhanakan
   Siaga : dalam BIRU MUDA + 1 ring MERAH berdenyut pelan
   Bicara: ring merah lebih cepat + 3 ring HIJAU bergelombang cepat
   ============================================================ */

/* matikan seluruh efek berlebih dari versi sebelumnya */
.htp .htp-big::after{content:none !important;animation:none !important;background:none !important}

/* ---------- lingkaran dalam: BIRU MUDA ---------- */
.htp .htp-big,.htp.me .htp-big,.htp.other .htp-big{
  background:radial-gradient(circle at 50% 34%,#8f95ff 0%,#5f65e0 52%,#4348bb 100%) !important;
  border:0 !important;
  box-shadow:0 0 0 1px rgba(175,182,255,.42),0 20px 46px rgba(0,0,0,.46),
             inset 0 -12px 26px rgba(0,0,0,.2) !important}
.htp .htp-core,.htp .htp-core svg{color:#fff !important;fill:#fff !important}

/* ---------- SIAGA: satu ring merah, denyut pelan ---------- */
.htp .htp-big::before{border:3px solid #ef4444 !important;opacity:1 !important;
  box-shadow:0 0 14px rgba(239,68,68,.35) !important;
  animation:ringPelan 3s ease-in-out infinite !important}
@keyframes ringPelan{
  0%,100%{transform:scale(1);opacity:.85;box-shadow:0 0 12px rgba(239,68,68,.3)}
  50%{transform:scale(1.03);opacity:1;box-shadow:0 0 24px rgba(239,68,68,.6)}}

/* tiga ring tambahan DISEMBUNYIKAN saat siaga (efek dikurangi) */
.htp .htp-ring{opacity:0 !important;animation:none !important;border:2px solid transparent !important}

/* ---------- BICARA: ring merah lebih cepat + 3 ring HIJAU ---------- */
.htp.me .htp-big::before{border-color:#ff2d4d !important;
  animation:ringPelan .55s ease-in-out infinite !important;
  box-shadow:0 0 26px rgba(255,45,77,.75) !important}
.htp.me .htp-ring{opacity:1 !important;border:2px solid rgba(34,197,94,.85) !important}
.htp.me .htp-ring.r1{animation:ringHijau 1.05s cubic-bezier(.25,.6,.3,1) infinite !important}
.htp.me .htp-ring.r2{animation:ringHijau 1.05s cubic-bezier(.25,.6,.3,1) infinite .35s !important}
.htp.me .htp-ring.r3{animation:ringHijau 1.05s cubic-bezier(.25,.6,.3,1) infinite .7s !important}
@keyframes ringHijau{
  0%{transform:scale(1);opacity:.9;border-width:2px}
  70%{opacity:.25}
  100%{transform:scale(1.34);opacity:0;border-width:1px}}

/* ---------- orang lain bicara: tenang, biru langit ---------- */
.htp.other .htp-big::before{border-color:#38bdf8 !important;animation:ringPelan 1.6s ease-in-out infinite !important;
  box-shadow:0 0 20px rgba(56,189,248,.5) !important}
.htp.other .htp-ring{opacity:0 !important}


/* ============================================================
   HADIAH DARI ADMIN — lencana pemberitahuan & layar perayaan
   ============================================================ */

/* ---------- lencana: bertahan sampai dibuka ---------- */
.hadiah-lencana{position:fixed;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom,0));z-index:9400;
  display:flex;align-items:center;gap:11px;padding:12px 14px;border:0;border-radius:16px;cursor:pointer;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;text-align:left;
  background:linear-gradient(135deg,#4a4ec8,#3a3ea8);color:#fff;
  box-shadow:0 14px 34px rgba(20,22,70,.5);opacity:0;transform:translateY(20px);transition:.34s cubic-bezier(.22,.61,.36,1)}
.hadiah-lencana.on{opacity:1;transform:translateY(0);animation:hlDenyut 2.4s ease-in-out 1s infinite}
@keyframes hlDenyut{0%,100%{box-shadow:0 14px 34px rgba(20,22,70,.5)}50%{box-shadow:0 14px 40px rgba(122,126,224,.75)}}
.hadiah-lencana:active{transform:scale(.97)}
.hadiah-lencana .hl-ic{font-size:26px;flex:0 0 auto;animation:hlGoyang 1.1s ease-in-out infinite}
@keyframes hlGoyang{0%,100%{transform:rotate(-9deg) scale(1)}50%{transform:rotate(9deg) scale(1.1)}}
.hadiah-lencana .hl-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hadiah-lencana .hl-tx b{font-size:14px;font-weight:800}
.hadiah-lencana .hl-tx i{font-style:normal;font-size:11.5px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hadiah-lencana .hl-jml{flex:0 0 auto;min-width:24px;height:24px;border-radius:12px;background:#fbbf24;color:#3a2503;
  font-size:12px;font-weight:900;display:grid;place-items:center;padding:0 7px}

/* ---------- layar perayaan ---------- */
.hadiah-raya{position:fixed;inset:0;z-index:9600;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(40,48,140,.92),rgba(8,11,28,.96));
  opacity:0;transition:.3s;overflow:hidden}
.hadiah-raya.on{opacity:1}
.hadiah-raya .hr-box{width:100%;max-width:340px;text-align:center;color:#fff;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;transform:scale(.9);transition:.4s cubic-bezier(.22,1.4,.4,1)}
.hadiah-raya.on .hr-box{transform:scale(1)}

/* kotak hadiah yang terbuka */
.hr-kado{position:relative;width:104px;height:104px;margin:0 auto 18px;display:grid;place-items:center}
.hr-kado .hr-emoji{font-size:64px;display:block;transition:.5s cubic-bezier(.22,1.5,.4,1)}
.hr-kado.buka .hr-emoji{transform:scale(1.18) rotate(-6deg)}
.hr-kado .hr-tutup,.hr-kado .hr-pita{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.hr-kado.buka .hr-tutup{border:3px solid rgba(255,255,255,.5);animation:hrLingkar 1.1s ease-out forwards}
.hr-kado.buka .hr-pita{border:2px solid rgba(251,191,36,.6);animation:hrLingkar 1.1s ease-out .18s forwards}
@keyframes hrLingkar{from{transform:scale(.6);opacity:.9}to{transform:scale(2.1);opacity:0}}

.hr-judul{font-size:23px;font-weight:900;letter-spacing:-.3px;
  background:linear-gradient(135deg,#fff,#ffe08a,#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hr-sub{font-size:13px;opacity:.85;margin-top:5px}
.hr-sub b{color:#ffe08a}

.hr-nilai{display:flex;gap:11px;justify-content:center;margin:20px 0 6px}
.hr-n{flex:1;max-width:140px;padding:15px 10px;border-radius:18px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  animation:hrMasuk .5s cubic-bezier(.22,1.4,.4,1) backwards}
.hr-n.coin{animation-delay:.12s;background:rgba(251,191,36,.18);border-color:rgba(251,191,36,.45)}
@keyframes hrMasuk{from{opacity:0;transform:translateY(14px) scale(.85)}to{opacity:1}}
.hr-n b{display:block;font-size:30px;font-weight:900;line-height:1.05;font-variant-numeric:tabular-nums}
.hr-n.coin b{color:#ffe08a}
.hr-n i{font-style:normal;font-size:11px;font-weight:700;opacity:.8;letter-spacing:.08em}

.hr-catatan{font-size:12.5px;font-style:italic;opacity:.8;margin-top:12px;line-height:1.5}
.hr-ok{margin-top:22px;width:100%;border:0;border-radius:16px;padding:15px;cursor:pointer;
  font:inherit;font-weight:800;font-size:15px;background:#fff;color:#3a3ea8;
  box-shadow:0 12px 28px rgba(0,0,0,.35)}
.hr-ok:active{transform:scale(.97)}
.hr-sisa{margin-top:11px;font-size:11.5px;opacity:.7}

/* konfeti */
.hr-konf{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;opacity:.95;
  animation:hrJatuh linear forwards;pointer-events:none}
@keyframes hrJatuh{
  0%{transform:translateY(0) rotate(0);opacity:1}
  100%{transform:translateY(105vh) rotate(760deg);opacity:0}}