/* ══════════════════════════════════════════════════════════════════════════════
   WEB PHONE — REDESIGN (.wpx-*)
   Dipakai bersama oleh:
     · src/config/components/web_phone/webphone.vue      (dock telepon utama, dari navbar)
     · src/config/components/web_phone/webphone_new.vue  (dock Aktivitas Telepon, dari layouts/app.vue)
     · src/config/components/web_phone/settings_wp.vue   (setelan SIP, slideout navbar)

   CATATAN PEMUATAN: Web Phone BUKAN modul ber-route, jadi tidak bisa memakai pola
   loadStyle('/assets/css/<modul>-redesign.css') di routes.js seperti modul lain.
   File ini di-link global di index.html. Semua kelas di-namespace .wpx-* supaya
   tidak bertabrakan dengan CSS global lain.

   Prototype acuan: adesign/webphone-redesign.html
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  --wpx-ok: #0f9d63;
  --wpx-ok-bg: #e3f9ef;
  --wpx-bad: #c1443f;
  --wpx-bad-bg: #fdecea;
  --wpx-warn: #b06a05;
  --wpx-warn-bg: #fdf3e5;
  --wpx-ink: #18233a;
  --wpx-ink2: #516079;
  --wpx-ink3: #8a97ac;
  --wpx-line: #dde3ed;
  --wpx-soft: #f4f7fb;
}

/* ══ Dock ══ (pengganti .inbound-popup — z-index 1999 dipertahankan) */
.wpx-dock {
  position: fixed;
  left: 16px;
  bottom: 16px;
  width: 388px;
  max-height: calc(100vh - 90px);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  z-index: 1999 !important;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 48px -12px rgba(16, 30, 54, 0.28), 0 0 0 1px rgba(16, 30, 54, 0.06);
  font-size: 14px;
  color: var(--wpx-ink);
}
.wpx-dock * {
  box-sizing: border-box;
}
/* CATATAN: .wpx-body sengaja TIDAK men-set `display`. Elemen ini masih memakai
   bootstrap collapse (`class="collapse show" id="collapseExample"`) seperti kode lama —
   bootstrap mengandalkan `.collapse:not(.show){display:none}`, jadi men-set display di
   sini akan mematikan tombol ciutkan. */
.wpx-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* ══ Header ══ */
.wpx-head {
  background: linear-gradient(135deg, #1b6fbe 0%, #134e8e 100%);
  color: #fff;
  padding: 11px 12px 11px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.wpx-head .wpx-ava {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  font-weight: 650;
  font-size: 13px;
  flex-shrink: 0;
  position: relative;
}
.wpx-head .wpx-ava .wpx-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #1861a9;
  background: #22c55e;
}
.wpx-head .wpx-ava .wpx-dot.off {
  background: #ef4444;
}
.wpx-head .wpx-who {
  min-width: 0;
  flex: 1;
}
.wpx-head .wpx-who .n {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wpx-head .wpx-who .e {
  font-size: 11.5px;
  color: #bcd8f2;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wpx-hbtn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 17px;
  flex-shrink: 0;
  transition: background 0.15s;
  padding: 0;
}
.wpx-hbtn:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Chip sinyal / latensi (signalClass 1..4) */
.wpx-sig {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  padding: 4px 9px 4px 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  color: #fff;
}
.wpx-sig .wpx-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.wpx-sig .wpx-bars i {
  width: 3px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.35);
}
.wpx-sig .wpx-bars i:nth-child(1) { height: 4px; }
.wpx-sig .wpx-bars i:nth-child(2) { height: 7px; }
.wpx-sig .wpx-bars i:nth-child(3) { height: 10px; }
.wpx-sig .wpx-bars i:nth-child(4) { height: 13px; }
.wpx-sig[data-lvl="1"] .wpx-bars i:nth-child(-n + 4) { background: #7ee2b0; }
.wpx-sig[data-lvl="2"] .wpx-bars i:nth-child(-n + 3) { background: #7ee2b0; }
.wpx-sig[data-lvl="3"] .wpx-bars i:nth-child(-n + 2) { background: #ffd27d; }
.wpx-sig[data-lvl="4"] .wpx-bars i:nth-child(-n + 1) { background: #ff9a94; }
.wpx-sig[data-lvl="0"] { opacity: 0.6; }

/* ══ Panggung panggilan ══ */
.wpx-call {
  padding: 18px 16px 14px;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, #eaf3fc 0%, #ffffff 62%);
  border-bottom: 1px solid var(--wpx-line);
  flex-shrink: 0;
}
.wpx-call .wpx-dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.wpx-call .wpx-dir.in   { background: var(--wpx-ok-bg); color: #0b7a4d; }
.wpx-call .wpx-dir.out  { background: #e7f1fb; color: #134e8e; }
.wpx-call .wpx-dir.end  { background: #eef1f6; color: var(--wpx-ink2); }
.wpx-call .wpx-dir.rej  { background: var(--wpx-bad-bg); color: var(--wpx-bad); }

.wpx-face {
  width: 78px;
  height: 78px;
  border-radius: 26px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e2edf9, #cfe1f5);
  color: #134e8e;
  font-weight: 700;
  font-size: 25px;
  position: relative;
}
.wpx-face.unknown {
  background: #eef1f6;
  color: #a3adbe;
}
.wpx-face::before,
.wpx-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
  border: 2px solid rgba(27, 111, 190, 0.4);
  opacity: 0;
}
.wpx-ringing .wpx-face::before { animation: wpxpulse 1.8s ease-out infinite; }
.wpx-ringing .wpx-face::after  { animation: wpxpulse 1.8s ease-out 0.9s infinite; }
@keyframes wpxpulse {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.55); opacity: 0; }
}

.wpx-call h3 {
  margin: 0 0 3px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--wpx-ink);
}
.wpx-call .wpx-ph {
  margin: 0;
  font-size: 13px;
  color: var(--wpx-ink2);
  font-variant-numeric: tabular-nums;
}
.wpx-call .wpx-sub {
  margin: 9px 0 0;
  font-size: 12.5px;
  color: var(--wpx-ink3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.wpx-call .wpx-sub .bx { font-size: 14px; }

.wpx-timer {
  margin: 10px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--wpx-line);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(16, 30, 54, 0.05);
}
.wpx-timer .wpx-rec {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wpx-bad);
  animation: wpxblink 1.4s infinite;
}
.wpx-timer.hold .wpx-rec {
  background: var(--wpx-warn);
  animation: none;
}
@keyframes wpxblink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

.wpx-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 20px;
  margin-top: 10px;
}
.wpx-wave i {
  width: 3px;
  height: 5px;
  border-radius: 2px;
  background: #9dc4e8;
  animation: wpxwave 1.1s ease-in-out infinite;
}
.wpx-wave i:nth-child(2) { animation-delay: 0.1s; }
.wpx-wave i:nth-child(3) { animation-delay: 0.2s; }
.wpx-wave i:nth-child(4) { animation-delay: 0.3s; }
.wpx-wave i:nth-child(5) { animation-delay: 0.4s; }
.wpx-wave i:nth-child(6) { animation-delay: 0.25s; }
.wpx-wave i:nth-child(7) { animation-delay: 0.15s; }
.wpx-wave i:nth-child(8) { animation-delay: 0.05s; }
.wpx-wave i:nth-child(9) { animation-delay: 0.35s; }
@keyframes wpxwave {
  0%, 100% { height: 5px; background: #c5dcf2; }
  50%      { height: 18px; background: #1b6fbe; }
}
.wpx-wave.muted i { animation: none; height: 4px; background: #dbe2ec; }
.wpx-wave.hold i  { animation: none; height: 4px; background: #f0d9b0; }

/* Pemilih kontak saat 1 nomor cocok dengan >1 kontak */
.wpx-pick {
  margin: 10px auto 0;
  max-width: 280px;
  text-align: left;
}
.wpx-pick label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--wpx-ink2);
  margin-bottom: 5px;
}
.wpx-pick select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--wpx-line);
  border-radius: 9px;
  padding: 0 10px;
  font-size: 13px;
  background: #fff;
  color: var(--wpx-ink);
  outline: none;
}
.wpx-pick select:focus {
  border-color: var(--primary, #1b6fbe);
  box-shadow: 0 0 0 3px rgba(27, 111, 190, 0.12);
}

/* ══ Tombol lingkaran (angkat / tolak / akhiri) ══ */
.wpx-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 16px 16px 6px;
  flex-shrink: 0;
}
.wpx-fab {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 0;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 26px;
  transition: transform 0.12s;
  position: relative;
  padding: 0;
}
.wpx-fab:active { transform: scale(0.94); }
.wpx-fab .wpx-lbl {
  position: absolute;
  bottom: -19px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--wpx-ink3);
  white-space: nowrap;
}
.wpx-fab.answer {
  background: linear-gradient(160deg, #22c55e, #0f9d63);
  box-shadow: 0 8px 20px -6px rgba(15, 157, 99, 0.65);
  animation: wpxjump 1.6s ease-in-out infinite;
}
@keyframes wpxjump {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.wpx-fab.reject,
.wpx-fab.hangup {
  background: linear-gradient(160deg, #f0655f, #c1443f);
  box-shadow: 0 8px 20px -6px rgba(193, 68, 63, 0.6);
}
.wpx-fab .wpx-rot { transform: rotate(135deg); }

/* ══ Kontrol saat terhubung ══ */
.wpx-ctrl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px 16px 16px;
  flex-shrink: 0;
}
.wpx-ctrl button {
  border: 1px solid var(--wpx-line);
  background: #fff;
  border-radius: 12px;
  padding: 10px 4px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--wpx-ink2);
  transition: 0.15s;
}
.wpx-ctrl button .bx { font-size: 20px; }
.wpx-ctrl button span { font-size: 10.5px; font-weight: 600; }
.wpx-ctrl button:hover {
  border-color: #b9cde3;
  background: var(--wpx-soft);
}
.wpx-ctrl button.on {
  background: var(--primary, #1b6fbe);
  border-color: var(--primary, #1b6fbe);
  color: #fff;
}
.wpx-ctrl button.on.danger { background: var(--wpx-bad); border-color: var(--wpx-bad); }
.wpx-ctrl button.on.warn   { background: var(--wpx-warn); border-color: var(--wpx-warn); }
.wpx-ctrl button:disabled  { opacity: 0.45; cursor: not-allowed; }

/* ══ Sheet transfer ══ */
.wpx-sheet {
  border-top: 1px solid var(--wpx-line);
  background: var(--wpx-soft);
  padding: 14px 16px;
  flex-shrink: 0;
}
.wpx-sheet .wpx-st {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 650;
  margin-bottom: 9px;
  color: var(--wpx-ink);
}
.wpx-sheet .wpx-st .bx { color: var(--primary, #1b6fbe); font-size: 16px; }
.wpx-sheet .wpx-st .wpx-x {
  margin-left: auto;
  cursor: pointer;
  color: var(--wpx-ink3);
  font-size: 17px;
}
.wpx-sheet .wpx-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 9px;
}
.wpx-inp {
  width: 100%;
  height: 40px;
  border: 1px solid var(--wpx-line);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  background: #fff;
  outline: none;
  font-variant-numeric: tabular-nums;
  color: var(--wpx-ink);
}
.wpx-inp:focus {
  border-color: var(--primary, #1b6fbe);
  box-shadow: 0 0 0 3px rgba(27, 111, 190, 0.12);
}

/* ══ Tombol umum ══ */
.wpx-btn {
  border: 1px solid var(--wpx-line);
  background: #fff;
  border-radius: 9px;
  height: 38px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wpx-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: 0.15s;
  padding: 0 12px;
}
.wpx-btn:hover { border-color: #b9cde3; }
.wpx-btn.pri {
  background: var(--primary, #1b6fbe);
  border-color: var(--primary, #1b6fbe);
  color: #fff;
}
.wpx-btn.pri:hover { filter: brightness(1.08); }
.wpx-btn.ok {
  background: var(--wpx-ok);
  border-color: var(--wpx-ok);
  color: #fff;
}
.wpx-btn.ok:hover { filter: brightness(1.08); }
.wpx-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.wpx-btn .bx { font-size: 15px; }

/* ══ Dialpad ══ */
.wpx-pad {
  padding: 14px 16px 4px;
  flex-shrink: 0;
}
.wpx-pad .wpx-disp {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--wpx-line);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.wpx-pad .wpx-disp input {
  flex: 1;
  border: 0;
  outline: none;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
  color: var(--wpx-ink);
  background: transparent;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  height: auto;
  box-shadow: none;
}
.wpx-pad .wpx-disp input::placeholder {
  font-size: 15px;
  font-weight: 450;
  color: #b9c2d0;
  letter-spacing: 0;
}
.wpx-pad .wpx-disp .wpx-bs {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--wpx-ink3);
  cursor: pointer;
  font-size: 20px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0;
}
.wpx-pad .wpx-disp .wpx-bs:hover {
  background: var(--wpx-soft);
  color: var(--wpx-ink);
}
.wpx-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.wpx-key {
  height: 48px;
  border: 1px solid var(--wpx-line);
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: 0.1s;
  user-select: none;
}
.wpx-key b {
  font-size: 19px;
  font-weight: 600;
  color: var(--wpx-ink);
}
.wpx-key em {
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 1.2px;
  color: var(--wpx-ink3);
  margin-top: 3px;
  font-weight: 600;
}
.wpx-key:hover {
  border-color: var(--primary, #1b6fbe);
  background: #f7fbff;
}
.wpx-key:active {
  transform: scale(0.96);
  background: #e7f1fb;
}
.wpx-dial {
  margin-top: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.wpx-dial .wpx-call-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(160deg, #22c55e, #0f9d63);
  color: #fff;
  font-size: 24px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(15, 157, 99, 0.6);
  transition: transform 0.12s;
  padding: 0;
}
.wpx-dial .wpx-call-btn:active { transform: scale(0.94); }
.wpx-dial .wpx-call-btn:disabled {
  background: #dfe5ee;
  color: #aab4c3;
  box-shadow: none;
  cursor: not-allowed;
}

/* ══ Panel Panggilan Direncanakan ══ */
.wpx-panel {
  border-top: 1px solid var(--wpx-line);
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.wpx-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  border-bottom: 1px solid var(--wpx-line);
  background: var(--wpx-soft);
  flex-shrink: 0;
}
.wpx-tabs .wpx-tab {
  border: 0;
  background: transparent;
  padding: 11px 10px 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary, #1b6fbe);
  border-bottom: 2px solid var(--primary, #1b6fbe);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wpx-tabs .wpx-cnt {
  background: #e7f1fb;
  color: var(--primary, #1b6fbe);
  border-radius: 20px;
  font-size: 10px;
  padding: 1px 6px;
  font-weight: 650;
}
.wpx-tabs .wpx-sp { flex: 1; }
.wpx-tabs .wpx-add {
  border: 0;
  background: transparent;
  color: var(--primary, #1b6fbe);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wpx-tabs .wpx-add:hover { background: #e7f1fb; }

.wpx-list {
  max-height: 196px;
  overflow-y: auto;
}
.wpx-item {
  padding: 11px 14px;
  border-bottom: 1px solid #eef1f6;
  cursor: pointer;
  transition: background 0.12s;
}
.wpx-item:hover { background: #f7fbff; }
.wpx-item .wpx-r1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.wpx-item .wpx-nm {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--wpx-ink);
}
.wpx-item .wpx-r2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--wpx-ink3);
}
.wpx-item .wpx-r2 .bx {
  font-size: 13px;
  vertical-align: -1px;
  margin-right: 3px;
}
.wpx-badge {
  font-size: 10px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  background: #e7f1fb;
  color: #134e8e;
}

.wpx-empty {
  padding: 26px 20px 24px;
  text-align: center;
}
.wpx-empty .wpx-ico {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #e7f1fb;
  color: var(--primary, #1b6fbe);
  display: grid;
  place-items: center;
  font-size: 29px;
  margin: 0 auto 12px;
}
.wpx-empty h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 650;
  color: var(--wpx-ink);
}
.wpx-empty p {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--wpx-ink3);
  line-height: 1.5;
}

.wpx-quick {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--wpx-line);
  background: var(--wpx-soft);
  flex-shrink: 0;
}
.wpx-quick .wpx-btn {
  flex: 1;
  height: 36px;
}

/* Form aktivitas inline (webphone_new.vue — tetap inline seperti versi lama) */
.wpx-actform {
  max-height: 340px;
  overflow-y: auto;
  border-top: 1px solid var(--wpx-line);
}

/* ══ Footer: presence + DND + AA + dialpad ══ */
.wpx-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-top: 1px solid var(--wpx-line);
  background: #fff;
  flex-shrink: 0;
}
.wpx-pres { position: relative; }
.wpx-pres > .wpx-pres-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--wpx-line);
  background: #fff;
  border-radius: 20px;
  padding: 6px 11px 6px 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wpx-ink);
  cursor: pointer;
}
.wpx-pres > .wpx-pres-btn:hover { border-color: #b9cde3; }
.wpx-pres .wpx-d {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wpx-ok);
}
.wpx-pres.off .wpx-d { background: var(--wpx-bad); }
.wpx-pres .bx { font-size: 15px; color: var(--wpx-ink3); }
.wpx-pop {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  width: 172px;
  background: #fff;
  border: 1px solid var(--wpx-line);
  border-radius: 11px;
  box-shadow: 0 12px 28px -8px rgba(16, 30, 54, 0.28);
  padding: 5px;
  z-index: 5;
}
.wpx-pop button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 8px 9px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--wpx-ink);
  cursor: pointer;
  text-align: left;
}
.wpx-pop button:hover { background: var(--wpx-soft); }
.wpx-pop .wpx-d { width: 8px; height: 8px; border-radius: 50%; }
.wpx-pop .wpx-d.on  { background: var(--wpx-ok); }
.wpx-pop .wpx-d.off { background: var(--wpx-bad); }
.wpx-foot .wpx-sp { flex: 1; }
.wpx-tog {
  border: 1px solid var(--wpx-line);
  background: #fff;
  border-radius: 9px;
  height: 32px;
  min-width: 38px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--wpx-ink2);
  cursor: pointer;
  transition: 0.15s;
}
.wpx-tog:hover { border-color: #b9cde3; }
.wpx-tog.on {
  background: var(--primary, #1b6fbe);
  border-color: var(--primary, #1b6fbe);
  color: #fff;
}
.wpx-tog.padtog {
  display: grid;
  place-items: center;
  font-size: 18px;
  padding: 0;
}
.wpx-tog.padtog.on {
  background: #e7f1fb;
  border-color: #bcd6ef;
  color: var(--primary, #1b6fbe);
}

/* ══════════════════════════════════════════════════════════════════════════════
   PANEL IP PHONE / CLICK-TO-CALL (.ipx-*) — config/components/web_phone/ipphone.vue
   Menggantikan .positions-float-pbx (fixed, bottom:-10px, right:103px, width:400px,
   z-index:1040) di public/assets/css/style.css:2841.
   Memakai ulang chrome .wpx-* di atas; hanya bagian khusus panel ini yang ditambah.
   ══════════════════════════════════════════════════════════════════════════════ */
.ipx-dock {
  left: auto;
  right: 16px;
  bottom: 16px;
  z-index: 1040 !important;
}

.ipx-call {
  padding: 16px;
  background: radial-gradient(120% 90% at 50% 0%, #eaf3fc 0%, #ffffff 70%);
  border-bottom: 1px solid var(--wpx-line);
  flex-shrink: 0;
}
.ipx-call .lead {
  font-size: 12px;
  color: var(--wpx-ink3);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ipx-call .who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ipx-call .face {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: linear-gradient(160deg, #22c55e, #0f9d63);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
  position: relative;
}
.ipx-call .face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  border: 2px solid rgba(15, 157, 99, 0.45);
  animation: ipxpulse 1.8s ease-out infinite;
}
@keyframes ipxpulse {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}
.ipx-call .ipx-min { min-width: 0; }
.ipx-call h3 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--wpx-ink);
}
.ipx-call .ph {
  margin: 0;
  font-size: 13px;
  color: var(--wpx-ink2);
  font-variant-numeric: tabular-nums;
}
.ipx-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

/* Badge "Berlangsung" */
.ipx-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--wpx-ok-bg);
  color: #0b7a4d;
  border-radius: 20px;
  padding: 3px 9px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}
.ipx-live .d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wpx-ok);
  animation: ipxblink 1.3s infinite;
}
@keyframes ipxblink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

.wpx-btn.dgr {
  background: var(--wpx-bad);
  border-color: var(--wpx-bad);
  color: #fff;
}
.wpx-btn.dgr:hover { filter: brightness(1.08); }

/* Form aktivitas inline (komponen form milik modul disuntikkan di sini) */
.ipx-form {
  padding: 14px 16px 16px;
  max-height: 380px;
  overflow-y: auto;
}
.ipx-form .fh {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ipx-form .fh .back {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--wpx-line);
  background: #fff;
  color: var(--wpx-ink2);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  padding: 0;
}
.ipx-form .fh .back:hover {
  border-color: #b9cde3;
  background: var(--wpx-soft);
}
.ipx-form .fh h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  color: var(--wpx-ink);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SETELAN WEB PHONE (settings_wp.vue)
   ══════════════════════════════════════════════════════════════════════════════ */
.wpx-set {
  padding: 18px;
  font-size: 14px;
  color: var(--wpx-ink);
}
.wpx-set * { box-sizing: border-box; }
.wpx-card {
  background: #fff;
  border: 1px solid var(--wpx-line);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(16, 30, 54, 0.05);
  margin-bottom: 16px;
}
.wpx-card .wpx-ch {
  padding: 14px 18px;
  border-bottom: 1px solid var(--wpx-line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.wpx-card .wpx-ch .wpx-ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #e7f1fb;
  color: var(--primary, #1b6fbe);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.wpx-card .wpx-ch h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 650;
}
.wpx-card .wpx-ch p {
  margin: 1px 0 0;
  font-size: 12px;
  color: var(--wpx-ink3);
}
.wpx-card .wpx-cb { padding: 18px; }

.wpx-fgroup {
  border: 1px solid var(--wpx-line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}
.wpx-fgroup:last-child { margin-bottom: 0; }
.wpx-fgroup > h5 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--wpx-ink3);
}
.wpx-fld { margin-bottom: 14px; }
.wpx-fld:last-child { margin-bottom: 0; }
.wpx-fld label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--wpx-ink);
}
.wpx-fld label .wpx-req { color: var(--wpx-bad); margin-left: 2px; }
.wpx-fld input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--wpx-line);
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 13.5px;
  color: var(--wpx-ink);
  background: #fff;
  outline: none;
}
.wpx-fld input:focus {
  border-color: var(--primary, #1b6fbe);
  box-shadow: 0 0 0 3px rgba(27, 111, 190, 0.12);
}
.wpx-fld .wpx-hint {
  font-size: 11.5px;
  color: var(--wpx-ink3);
  margin-top: 5px;
}
.wpx-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.wpx-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 10px;
  margin-top: 4px;
}
.wpx-status.ok   { background: var(--wpx-ok-bg); color: #0b7a4d; }
.wpx-status.bad  { background: var(--wpx-bad-bg); color: var(--wpx-bad); }
.wpx-status.idle { background: var(--wpx-soft); color: var(--wpx-ink3); }

.wpx-setfoot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}
.wpx-setfoot .wpx-btn { height: 40px; padding: 0 18px; }