/* ==========================================================================
   Messenger / FaceTime-style video call UI
   Circular control buttons + full-screen mobile layout.
   Scoped to #modal.video-call-active so nothing else is affected.
   ========================================================================== */

/* --- Circular control buttons (Camera / Mute / Switch / End) ------------- */
.call-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: flex-start;
}

.call-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 64px;
  color: #dfe3e8;
}

.call-btn i {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(120, 120, 128, 0.32);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: background 0.15s ease;
}

/* call-ui.css loads after the main stylesheet, so re-assert the hidden state
   (otherwise .call-btn's display would win over .x-hidden by source order). */
.call-btn.x-hidden { display: none; }

.call-btn span { font-size: 11px; line-height: 1; }
.call-btn:hover i { background: rgba(120, 120, 128, 0.5); }
.call-btn.off i { background: #fff; color: #111; }          /* muted / camera off */
.call-btn-end i { background: #ff3b30; color: #fff; }
.call-btn-end:hover i { background: #e0342a; }

/* --- Full-screen call layout on phones/tablets --------------------------- */
@media (max-width: 991px) {
  #modal.video-call-active { padding: 0 !important; }

  #modal.video-call-active .modal-dialog {
    max-width: 100%;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  #modal.video-call-active .modal-content {
    height: 100vh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    background: #0b0b0d;
    color: #fff;
    overflow: hidden;
  }

  #modal.video-call-active .modal-header,
  #modal.video-call-active .modal-footer { display: none; }

  #modal.video-call-active .modal-body {
    padding: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  /* avatar wrapper container -> keep out of the way; hide the big avatar */
  #modal.video-call-active .modal-body > .position-relative {
    position: absolute;
    top: 14px; left: 0; right: 0;
    height: auto !important;
    margin: 0;
    z-index: 6;
  }
  #modal.video-call-active .profile-avatar-wrapper { display: none; }

  /* Name + status/timer as a top overlay */
  #modal.video-call-active h3 {
    position: absolute;
    top: 22px; left: 0; right: 0;
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: 19px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
    z-index: 6;
  }
  #modal.video-call-active .js_chat-calling-message {
    position: absolute;
    top: 52px; left: 0; right: 0;
    margin: 0;
    text-align: center;
    z-index: 6;
  }

  /* Remote video fills the screen */
  #modal.video-call-active .video-call-stream-wrapper {
    position: absolute;
    inset: 0;
    height: 100%;
    margin: 0;
    border-radius: 0;
  }
  #modal.video-call-active .video-call-stream {
    position: absolute;
    inset: 0;
    height: 100% !important;   /* overrides the inline 420px set by JS */
    background: #000;
    border-radius: 0;
  }
  #modal.video-call-active .video-call-stream > div,
  #modal.video-call-active .video-call-stream video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0;
  }

  /* Local self-view: small floating rounded card, top-right */
  #modal.video-call-active .video-call-stream-local {
    display: block;
    position: absolute;
    top: 72px; right: 14px;
    width: 104px; height: 160px;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    z-index: 7;
  }
  #modal.video-call-active .video-call-stream-local > div,
  #modal.video-call-active .video-call-stream-local video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 14px;
  }

  /* Control bar pinned to the bottom */
  #modal.video-call-active .call-controls {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
    margin: 0;
    z-index: 8;
  }
}