/* Lumorra – Hívás-felület (videó/hang), csomagmentes */

/* Hívásgombok a csevegés fejlécében */
.th-actions { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
.th-call {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line, #e4ded2); background: #fff;
  font-size: 1.15rem; cursor: pointer; line-height: 1;
  display: grid; place-items: center; transition: background .15s, transform .1s;
}
.th-call:hover { background: var(--brand-light, #e6f7f4); }
.th-call:active { transform: scale(.94); }

/* Teljes képernyős hívás-overlay */
.call-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: radial-gradient(120% 120% at 50% 20%, #123, #061014 70%);
  color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: calc(2rem + env(safe-area-inset-top, 0px)) 1.2rem calc(2rem + env(safe-area-inset-bottom, 0px));
}

/* A távoli fél képe — teljes hátteret kitölti, ha megjött a videó */
.call-remote-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #061014; display: none;
}
.call-overlay.van-tavoli-kep .call-remote-video { display: block; }
/* Ha van élő videó, az avatár/név blokk kisebbre húzódik felülre */
.call-overlay.van-tavoli-kep .call-remote {
  position: absolute; top: calc(3.6rem + env(safe-area-inset-top, 0px));
  background: rgba(0,0,0,.35); padding: .5rem 1rem; border-radius: 14px;
}
.call-overlay.van-tavoli-kep .call-remote-avatar { display: none; }
.call-overlay.van-tavoli-kep .call-name { font-size: 1.05rem; margin-top: 0; }
/* Hanghívásnál sosem mutatunk videót */
.call-overlay.audio-only .call-remote-video { display: none; }

.call-remote { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.call-remote-avatar {
  width: 128px; height: 128px; border-radius: 50%;
  background: linear-gradient(135deg, #63d9c4, #0e9a8a);
  display: grid; place-items: center; font-size: 3.2rem; font-weight: 700; color: #fff;
  box-shadow: 0 0 0 8px rgba(99,217,196,.14); animation: callPulse 2.4s ease-in-out infinite;
}
@keyframes callPulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(99,217,196,.14); }
  50% { box-shadow: 0 0 0 18px rgba(99,217,196,.05); }
}
.call-name { font-size: 1.5rem; font-weight: 700; margin-top: .6rem; }
.call-status { font-size: .95rem; color: #9fd4c9; }
.call-timer { font-size: 1.1rem; color: #cfeee8; font-variant-numeric: tabular-nums; }

/* Saját kép (PIP jobbra lent) */
.call-local {
  position: absolute; right: 1.1rem; bottom: 6.5rem;
  width: 108px; height: 150px; object-fit: cover;
  border-radius: 14px; background: #000; border: 2px solid rgba(255,255,255,.25);
  transform: scaleX(-1); /* tükrözött, mint egy szelfi */
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.call-overlay.audio-only .call-local { display: none; }
.call-overlay.cam-off .call-local { display: none; }

/* Vezérlők */
.call-controls { position: absolute; bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); display: flex; gap: 1.4rem; }
.call-btn {
  width: 62px; height: 62px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 1.5rem; line-height: 1;
  background: rgba(255,255,255,.16); color: #fff;
  display: grid; place-items: center; transition: background .15s, transform .1s;
}
.call-btn:hover { background: rgba(255,255,255,.26); }
.call-btn:active { transform: scale(.92); }
.call-btn.off { background: #fff; color: #123; } /* némított / kamera ki */
.call-btn.danger { background: #e0433f; }
.call-btn.danger:hover { background: #c8302c; }

/* Bejövő hívás: fogadás / elutasítás */
.call-incoming {
  position: absolute; bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 2.4rem;
}
.call-incoming[hidden] { display: none; }
.call-controls[hidden] { display: none; }
.call-btn.accept { background: #21ba69; }
.call-btn.accept:hover { background: #1a9c58; }
/* A fogadás gomb finoman lüktet, hogy egyértelmű legyen, mit kell nyomni */
.call-btn.accept { animation: fogadPulzal 1.6s ease-in-out infinite; }
@keyframes fogadPulzal {
  0%, 100% { box-shadow: 0 0 0 0 rgba(33,186,105,.55); }
  70% { box-shadow: 0 0 0 16px rgba(33,186,105,0); }
}
@media (prefers-reduced-motion: reduce) {
  .call-btn.accept { animation: none; }
  .call-remote-avatar { animation: none; }
}

.call-privacy {
  position: absolute; top: calc(1.2rem + env(safe-area-inset-top, 0px));
  font-size: .82rem; color: #bfe3dc; background: rgba(0,0,0,.25);
  padding: .4rem .8rem; border-radius: 999px;
}

/* Jelentés hívás közben (DSA) */
.call-report {
  position: absolute; top: calc(1.2rem + env(safe-area-inset-top, 0px)); right: 1.1rem;
  background: rgba(0,0,0,.3); color: #ffd9d8;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  padding: .4rem .85rem; font-size: .82rem; cursor: pointer;
}
.call-report:hover { background: rgba(224,67,63,.35); color: #fff; }

/* A jelentés-ablak a hívás FÖLÉ kerüljön (a hívás z-indexe 1000) */
.s-modal-overlay { z-index: 1100; }

@media (max-width: 420px) {
  .call-remote-avatar { width: 104px; height: 104px; font-size: 2.6rem; }
  .call-local { width: 92px; height: 128px; }
}