/* ════════════════════════════════════════════════════════════════
   DivoProject — экран звонка (аудио / видео)
   Графит + стальной азур, как и весь интерфейс. Токены из variables.css.
   ════════════════════════════════════════════════════════════════ */

.call-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-family);
  background: radial-gradient(125% 85% at 50% -5%, #17171b 0%, var(--bg-app) 58%);
  opacity: 0;
  transition: opacity .28s var(--ease-out);
  overflow: hidden;
}
.call-overlay--visible { opacity: 1; }

/* ── Удалённое видео (только видеозвонок) ─────────────────────── */
.call-overlay__remote {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0c0c0e;
}
.call-overlay[data-type="audio"] .call-overlay__remote { display: none; }

.call-overlay__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 24%,
    rgba(0,0,0,0) 56%, rgba(0,0,0,.74) 100%);
}
.call-overlay[data-type="audio"] .call-overlay__scrim { display: none; }

/* ── Верхняя панель (видеозвонок) ─────────────────────────────── */
.call-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 0;
}
.call-overlay[data-type="audio"] .call-top { display: none; }
.call-top__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.call-top__name {
  font-size: var(--font-lg);
  font-weight: var(--fw-semibold);
  color: #fff;
  letter-spacing: -0.01em;
}
.call-top__status {
  font-family: var(--font-mono);
  font-size: var(--font-sm);
  color: rgba(255,255,255,.72);
  font-variant-numeric: tabular-nums;
}
.call-top__secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.14);
  font-size: var(--font-xs);
  font-weight: var(--fw-medium);
  letter-spacing: .04em;
  color: rgba(255,255,255,.88);
}
.call-top__secure svg { width: 13px; height: 13px; }

/* ── Центральная сцена (аудиозвонок) ──────────────────────────── */
.call-stage {
  position: relative;
  z-index: 2;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
}
.call-overlay[data-type="video"] .call-stage { display: none; }

.call-stage__avatar-wrap { position: relative; display: grid; place-items: center; }
.call-stage__avatar {
  position: relative;
  z-index: 2;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  font-weight: var(--fw-semibold);
  color: #fff;
  background: var(--bg-surface);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.call-stage__pulse {
  position: absolute;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
}
.call-overlay[data-state="ringing"] .call-stage__pulse {
  animation: callPulse 2.4s var(--ease-out) infinite;
}
.call-overlay[data-state="ringing"] .call-stage__pulse--2 { animation-delay: 1.2s; }
@keyframes callPulse {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(1.95); opacity: 0; }
}

.call-stage__name {
  margin-top: 26px;
  font-size: 27px;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  letter-spacing: -0.015em;
}

.call-overlay__status {
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: var(--font-base);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* ── Своё видео (картинка-в-картинке) ─────────────────────────── */
.call-overlay__local {
  position: absolute;
  z-index: 6;
  right: 18px;
  top: 80px;
  width: 116px;
  height: 158px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: #111;
  border: 1.5px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow-lg);
  display: none;
  transform: scaleX(-1); /* зеркалим своё видео */
}

/* ── Док управления ───────────────────────────────────────────── */
.call-overlay__controls {
  position: relative;
  z-index: 7;
  margin-top: auto;
  margin-bottom: calc(30px + env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(20,20,24,.64);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  backdrop-filter: blur(26px) saturate(140%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}
.call-overlay[data-type="video"] .call-overlay__controls {
  background: rgba(10,10,12,.56);
}

.call-ctrl-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 70px;
}
.call-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.09);
  color: #fff;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.call-btn:hover { background: rgba(255,255,255,.17); transform: translateY(-1px); }
.call-btn:active { transform: scale(.95); }
.call-btn svg { width: 25px; height: 25px; }

.call-btn__label {
  font-size: var(--font-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.call-btn--off {
  background: #fff;
  color: #18181b;
  border-color: transparent;
}
.call-btn--accept { background: #2faa6a; border-color: transparent; }
.call-btn--accept:hover { background: #34b876; }
.call-btn--hangup { background: #e0524f; border-color: transparent; }
.call-btn--hangup:hover { background: #ec5b58; }

/* Пульсация кнопки приёма на входящем звонке */
.call-overlay[data-state="ringing"] .call-btn--accept {
  animation: callBob 1.5s var(--ease-out) infinite;
}
@keyframes callBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

@media (max-width: 768px) {
  .call-stage__avatar, .call-stage__pulse { width: 116px; height: 116px; }
  .call-stage__avatar { font-size: 40px; }
  .call-overlay__local { width: 100px; height: 138px; }
  .call-btn { width: 56px; height: 56px; }
}
[data-motion="reduce"] .call-stage__pulse,
[data-motion="reduce"] .call-overlay[data-state="ringing"] .call-btn--accept { animation: none; }

/* ════════════════════════════════════════════════════════════════
   Системное сообщение о звонке в ленте чата
   ════════════════════════════════════════════════════════════════ */
.call-msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--t-fast);
}
.call-msg:hover { background: var(--bg-surface-hover); }
.call-msg__icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  flex: none;
}
.call-msg__icon svg { width: 16px; height: 16px; }
.call-msg__label { font-size: var(--font-sm); color: var(--text-primary); }
.call-msg--missed .call-msg__icon { background: var(--danger); }
.call-msg--missed .call-msg__label { color: var(--danger); }