/* ================= Layar panggilan telepon (pelanggan & CS) ================= */
.call[hidden], .call-mini[hidden], .call [hidden] { display: none !important; }
.call {
  position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center;
  padding: max(14px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
  color: #fff; background: radial-gradient(120% 90% at 50% 0%, #B8282E 0%, #8B1A1A 45%, #4A0D0D 100%);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; overflow-y: auto;
}
@media (min-width: 900px) { .call { inset: 24px auto 24px 50%; transform: translateX(-50%); width: 420px; border-radius: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.45); } }
.call-top { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.call-min { background: rgba(255,255,255,.12); border: 0; color: #fff; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.call-note { font-size: 12px; opacity: .75; }
.call-peer { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; min-height: 240px; padding: 10px 0; }
.call-av { position: relative; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; cursor: pointer; }
.call-av img { position: relative; z-index: 1; width: 120px; height: 120px; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); object-fit: cover; }
.call-av i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255,227,168,.75); opacity: 0; }
.call[data-state="ring"] .call-av i, .call[data-state="masuk"] .call-av i { animation: cRing 1.8s ease-out infinite; }
.call[data-state="ring"] .call-av i + i, .call[data-state="masuk"] .call-av i + i { animation-delay: .9s; }
.call[data-state="speak"] .call-av i, .call[data-state="bicara"] .call-av i { opacity: 1; border-color: #FFD58A; animation: cTalk .5s ease-in-out infinite alternate; }
.call[data-state="listen"] .call-av i { opacity: 1; border-color: #6EE7A0; animation: cRing 1.4s ease-out infinite; }
.call[data-state="proses"] .call-av i { opacity: 1; border-color: transparent; border-top-color: #FFE9C7; animation: cSpin .9s linear infinite; }
.call[data-state="end"] .call-av img { filter: grayscale(.8); opacity: .8; }
@keyframes cRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes cTalk { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@keyframes cSpin { to { transform: rotate(360deg); } }
.call-name { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: .2px; }
.call-sub { font-size: 13.5px; opacity: .8; }
.call-status { margin-top: 10px; font-size: 15px; color: #FFE9C7; min-height: 20px; }
.call-timer { font-size: 15px; font-variant-numeric: tabular-nums; opacity: .9; }
.call-cap { width: 100%; max-width: 380px; min-height: 52px; text-align: center; font-size: 14px; line-height: 1.45; }
.call-cap p { margin: 4px 0; }
.call-cap .cap-them { color: #fff; }
.call-cap .cap-me { color: #FFE9C7; font-style: italic; opacity: .85; }
.call-cap p:empty { display: none; }
.call-info { margin: 6px 0 4px; border: 1px solid rgba(255,227,168,.6); background: rgba(255,255,255,.1); color: #FFE9C7; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.call-keys { width: 100%; max-width: 320px; margin: 6px 0; }
.call-keys input { width: 100%; padding: 11px 14px; border-radius: 12px; border: 0; font-size: 18px; text-align: center; letter-spacing: 1px; margin-bottom: 8px; }
.call-keys .keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.call-keys button { height: 46px; border-radius: 12px; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 20px; font-weight: 700; cursor: pointer; }
.call-keys .keys-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.call-keys .keys-act button { font-size: 14px; }
.call-keys .keys-act button[type=submit] { background: #2F7A4A; }
.call-act { display: flex; justify-content: center; gap: 22px; margin: 14px 0 6px; }
.call-end-row { display: flex; justify-content: center; gap: 56px; margin-top: 8px; }
.cbtn { background: none; border: 0; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font: inherit; }
.cbtn .ic { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.15); transition: .15s; }
.cbtn:hover .ic { background: rgba(255,255,255,.25); }
.cbtn.on .ic { background: #fff; color: #8B1A1A; }
.cbtn small { font-size: 12px; opacity: .9; }
.cbtn.big .ic { width: 70px; height: 70px; }
.cbtn.end .ic, .cbtn.tolak .ic { background: #E53935; }
.cbtn.angkat .ic { background: #2E9E5B; animation: cAngkat 1.2s ease-in-out infinite; }
@keyframes cAngkat { 50% { transform: translateY(-4px) rotate(-12deg); } }
body.call-on { overflow: hidden; }
/* bar mini (panggilan diperkecil) */
.call-mini { position: fixed; z-index: 8999; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
  background: #2E9E5B; color: #fff; border-radius: 999px; padding: 5px 5px 5px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.3); max-width: calc(100% - 24px); }
.call-mini .cm-open { display: flex; align-items: center; gap: 8px; background: none; border: 0; color: inherit; font: inherit; font-size: 13.5px; cursor: pointer; min-width: 0; }
.call-mini .cm-open b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.call-mini .cm-st { font-variant-numeric: tabular-nums; opacity: .9; white-space: nowrap; }
.call-mini .cm-dot { width: 9px; height: 9px; border-radius: 50%; background: #B8F5CF; animation: blinkC 1s infinite; flex: none; }
.call-mini .cm-end { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #E53935; color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.call-mini .cm-end svg { width: 20px; height: 20px; }
@keyframes blinkC { 50% { opacity: .3; } }
@media (max-height: 640px) { .call-av { width: 100px; height: 100px; margin-bottom: 8px; } .call-av img { width: 90px; height: 90px; } .call-peer { min-height: 180px; } .cbtn .ic { width: 50px; height: 50px; } .cbtn.big .ic { width: 60px; height: 60px; } }
@media (prefers-reduced-motion: reduce) { .call *, .call-mini * { animation: none !important; } }
/* tombol telepon di header chat */
.call-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35);
  background: #2E9E5B; color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; margin-right: 8px; }
.call-btn:hover { filter: brightness(1.08); }
@media (max-width: 900px) { .call-btn span { display: none; } .call-btn { width: 38px; padding: 0; justify-content: center; } }