/* ══════════════════════════════════════════════════════════
   ZITLAS — Premium Call UI (frontend/assets/css/call-ui.css)
   Fullscreen voice-call overlay: outgoing / incoming / active.
   Markup is injected by assets/js/call-ui.js (ZitlasCallUI).
   ══════════════════════════════════════════════════════════ */

.zcall-overlay {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: none;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #EAF2DC 0%, #F7FAF2 55%, #FDF6EA 100%);
  color: var(--text-primary, #1E293B);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: hidden;
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.12);
}
.zcall-overlay.zcall-show { display: flex; }
.zcall-overlay.zcall-in   { opacity: 1; transform: none; }

/* Ambient glow behind the avatar */
.zcall-glow {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 360px;
  height: 360px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 152, 0, 0.20), transparent 65%);
  filter: blur(34px);
  pointer-events: none;
}

/* ── Top bar ── */
.zcall-top {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: calc(20px + env(safe-area-inset-top)) 20px 0;
  position: relative;
}
.zcall-brand {
  height: 20px;
  width: auto;
  object-fit: contain;
  opacity: 0.7;
}
.zcall-secure {
  font-size: 11px;
  color: rgba(30, 41, 59, 0.35);
  letter-spacing: 0.04em;
}

/* ── Center block ── */
.zcall-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  padding: 0 24px;
  width: 100%;
}

/* Avatar + pulsing rings */
.zcall-ring {
  position: relative;
  width: 150px;
  height: 150px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zcall-ring::before,
.zcall-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 152, 0, 0.45);
  opacity: 0;
  pointer-events: none;
}
.zcall-overlay.zcall-ringing .zcall-ring::before { animation: zcallPulse 2.2s ease-out infinite; }
.zcall-overlay.zcall-ringing .zcall-ring::after  { animation: zcallPulse 2.2s ease-out 1.1s infinite; }
@keyframes zcallPulse {
  0%   { transform: scale(1);    opacity: 0.85; }
  100% { transform: scale(1.72); opacity: 0; }
}

.zcall-avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 800;
  color: #FFFFFF;
  background: linear-gradient(135deg, #FF9800, #6BA539);
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 50px rgba(30, 41, 59, 0.22);
}
.zcall-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zcall-name {
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
  text-align: center;
}
.zcall-role {
  font-size: 14px;
  color: rgba(30, 41, 59, 0.5);
  margin: 0;
  text-align: center;
}
.zcall-status {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: rgba(30, 41, 59, 0.75);
  min-height: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.zcall-overlay.zcall-ringing .zcall-status { animation: zcallBreathe 1.8s ease-in-out infinite; }
@keyframes zcallBreathe {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 0.4; }
}

/* ── Action rows ── */
.zcall-actions {
  display: none;
  align-items: flex-end;
  justify-content: center;
  gap: 42px;
  width: 100%;
  padding: 0 24px calc(34px + env(safe-area-inset-bottom));
  position: relative;
}
/* active row visible by default; incoming row only in incoming mode */
.zcall-overlay:not(.zcall-mode-incoming) .zcall-actions--active   { display: flex; }
.zcall-overlay.zcall-mode-incoming       .zcall-actions--incoming { display: flex; }

.zcall-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  animation: zcallRise 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.zcall-action:nth-child(2) { animation-delay: 0.05s; }
.zcall-action:nth-child(3) { animation-delay: 0.1s; }
@keyframes zcallRise {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.zcall-action > span {
  font-size: 12px;
  font-weight: 600;
  color: rgba(30, 41, 59, 0.55);
}

/* Glass buttons */
.zcall-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(30, 41, 59, 0.10);
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: var(--text-primary, #1E293B);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, transform 0.12s;
}
.zcall-btn:active { transform: scale(0.9); }
.zcall-btn.zcall-on {
  background: #1E293B;
  color: #FFFFFF;
}

.zcall-btn--end,
.zcall-btn--decline {
  width: 72px;
  height: 72px;
  background: #e5484d;
  border: none;
  color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(229, 72, 77, 0.45);
}
.zcall-btn--end:active,
.zcall-btn--decline:active { background: #c93a3f; }

.zcall-btn--accept {
  width: 72px;
  height: 72px;
  background: #30c85e;
  border: none;
  color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(48, 200, 94, 0.45);
  animation: zcallAcceptPulse 1.5s ease-in-out infinite;
}
.zcall-btn--accept:active { background: #27a94e; animation: none; }
@keyframes zcallAcceptPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 10px 30px rgba(48, 200, 94, 0.45); }
  50%      { transform: scale(1.08); box-shadow: 0 12px 40px rgba(48, 200, 94, 0.65); }
}

.zcall-audio { display: none; }

@media (prefers-reduced-motion: reduce) {
  .zcall-overlay,
  .zcall-action,
  .zcall-btn--accept { animation: none !important; transition: none !important; }
  .zcall-ring::before, .zcall-ring::after { animation: none !important; }
}