/* =============================================================
 *  screens/call.css
 *  Layout das chamadas (estilo WhatsApp): hero centrado em DM voz,
 *  vídeo em tela cheia + PIP em DM vídeo, lista em grupo voz,
 *  grade em grupo vídeo. Suporte responsivo (desktop, tablet, mobile).
 * ============================================================= */

/* Diálogo in-band acima da cena (consentimento de gravação, avisos). */
.chamada-overlay-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  pointer-events: none;
}
.chamada-overlay-modal-inner {
  pointer-events: auto;
  width: 100%;
  max-width: 400px;
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.chamada-overlay-modal-inner h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 800;
}
.chamada-overlay-modal-inner p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  color: rgba(241, 245, 249, 0.88);
}
.chamada-overlay-modal-acoes {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.chamada-overlay-modal-acoes button {
  padding: 10px 16px;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: none;
}
.chamada-overlay-btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.chamada-overlay-btn-primary {
  background: var(--accent, #2563eb);
  color: #fff;
}

.chamada-overlay {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: stretch; justify-content: center;
  padding: 0; box-sizing: border-box; pointer-events: none;
}
.chamada-overlay.d-none { display: none !important; }
.chamada-overlay .chamada-backdrop {
  position: fixed; inset: 0;
  background: rgba(8, 14, 32, 0.85);
  pointer-events: auto;
}
.chamada-painel {
  position: relative; z-index: 1; pointer-events: auto;
  width: 100%; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column;
  background: #0f172a; color: #f8fafc;
}
@media (min-width: 720px) {
  .chamada-overlay { padding: 24px; align-items: center; }
  .chamada-painel {
    max-width: 720px; max-height: 92vh;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    overflow: hidden;
  }
}

/* Cabeçalho compacto. */
.chamada-cabec {
  padding: 14px 18px 10px;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.chamada-titulo { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.chamada-sub { font-size: 0.82rem; color: rgba(248,250,252,.78); font-weight: 600; }

.chamada-grav {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 700;
  color: #fecaca; padding: 4px 10px;
  border-radius: 999px;
  background: rgba(239,68,68,.16);
  border: 1px solid rgba(239,68,68,.5);
  align-self: flex-start;
}
.chamada-grav.d-none { display: none; }
.chamada-grav-ponto {
  width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: chamadaGravPulso 1.4s infinite ease-in-out;
}
@keyframes chamadaGravPulso {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.7); opacity: .55; }
}

/* Cena (área central da chamada). */
.chamada-cena {
  flex: 1;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  background: #050810;
}

/* Avatar grande reutilizável. */
.cc-avatar-grande {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  flex-shrink: 0;
}
.cc-avatar-grande .cc-avatar-iniciais {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; letter-spacing: 0.02em;
  font-size: 32%;
}
.cc-avatar-grande .cc-avatar-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
}
.cc-avatar-grande .cc-avatar-foto.cc-avatar-foto-ok { opacity: 1; }

/* Tamanhos. */
.cc-avatar-hero { width: 168px; height: 168px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.cc-avatar-hero .cc-avatar-iniciais { font-size: 56px; }
.cc-avatar-overlay { width: 132px; height: 132px; }
.cc-avatar-overlay .cc-avatar-iniciais { font-size: 44px; }
.cc-avatar-card { width: 92px; height: 92px; }
.cc-avatar-card .cc-avatar-iniciais { font-size: 30px; }
.cc-avatar-tile { width: 84px; height: 84px; }
.cc-avatar-tile .cc-avatar-iniciais { font-size: 28px; }

/* ── Cena DM voz: avatar grande + nome + status (estilo WhatsApp) ── */
.cc-cena-hero {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  padding: 20px;
  transition: filter 0.25s ease;
}
/* WebRTC ligado: destaque suave no avatar + mostrar pulso (antes oculto). */
.cc-cena-hero--live .cc-avatar-hero {
  box-shadow:
    0 0 0 3px rgba(134, 239, 172, 0.95),
    0 12px 30px rgba(0, 0, 0, 0.35);
}
.cc-hero-nome {
  font-size: 1.85rem; font-weight: 800;
  color: #f8fafc; letter-spacing: -0.02em;
  text-align: center;
}
.cc-hero-status {
  font-size: 1rem; font-weight: 600;
  color: rgba(248, 250, 252, .8);
  letter-spacing: 0.02em;
}
.cc-hero-status.cc-hero-status-ligado {
  color: #86efac;
}
.cc-hero-pulso {
  display: none;
  gap: 6px;
  margin-top: 4px;
}
.cc-cena-hero--live .cc-hero-pulso {
  display: inline-flex;
}
.cc-hero-pulso span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #86efac;
  animation: ccPulsoOndas 1.2s infinite ease-in-out;
}
.cc-hero-pulso span:nth-child(2) { animation-delay: 0.15s; }
.cc-hero-pulso span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ccPulsoOndas {
  0%, 80%, 100% { transform: scale(0.6); opacity: .5; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* ── Cena DM vídeo: tela cheia remoto + PIP local + overlay enquanto não chega vídeo ── */
.cc-cena-video-dm {
  position: relative;
  flex: 1;
  display: flex;
  background: #000;
}
.cc-video-remoto {
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
}
.cc-video-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 24px;
  background: rgba(8, 14, 32, 0.7);
  backdrop-filter: blur(6px);
}
.cc-video-overlay.d-none { display: none; }

/* ── PIP do vídeo local (canto superior direito) ── */
.cc-video-pip {
  position: absolute; top: 14px; right: 14px;
  width: 130px; height: 180px;
  border-radius: 14px;
  background: #0b1220;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.08);
  z-index: 2;
}
.cc-video-pip .cc-video-local {
  width: 100%; height: 100%;
  object-fit: cover;
  background: #0b1220;
  transform: scaleX(-1); /* espelhar self-view (Instagram/WhatsApp). */
}
.cc-pip-rotulo {
  position: absolute; bottom: 6px; left: 6px; right: 6px;
  font-size: 0.7rem; font-weight: 700;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.cc-video-pip.cc-pip-vazio { background: linear-gradient(135deg, #1e293b, #0f172a); }
.cc-video-pip.cc-pip-vazio .cc-video-local { display: none; }

@media (max-width: 540px) {
  .cc-video-pip { width: 96px; height: 132px; top: 10px; right: 10px; }
}

/* ── Cena Grupo voz: lista de cartões com avatares ── */
.cc-cena-grupo-voz {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
  align-content: start;
}
@media (min-width: 540px) {
  .cc-cena-grupo-voz { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
  .cc-cena-grupo-voz { grid-template-columns: repeat(3, 1fr); }
}
.cc-cartao-voz {
  background: #1e293b;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 16px 12px;
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}
.cc-cartao-voz-local { outline: 2px solid rgba(99,102,241,.55); }
.cc-cartao-nome { font-size: 0.95rem; font-weight: 700; color: #f1f5f9; text-align: center; }
.cc-cartao-estado { font-size: 0.78rem; color: rgba(241,245,249,.7); min-height: 1.1em; text-align: center; }

/* ── Cena Grupo vídeo: grade + PIP local ── */
.cc-cena-grupo-video {
  position: relative;
  flex: 1;
  display: block;
}
.cc-grupo-grade {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 8px;
  overflow: auto;
}
@media (min-width: 600px) {
  .cc-grupo-grade { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px; }
}
@media (min-width: 960px) {
  .cc-grupo-grade { grid-template-columns: repeat(3, 1fr); }
}

.cc-tile {
  position: relative;
  background: #1e293b;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid rgba(255,255,255,.05);
}
.cc-tile-midia {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #0b1220;
}
.cc-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: #0b1220;
}
.cc-tile.cc-video-off .cc-video { display: none; }
.cc-tile .cc-avatar-tile { display: none; }
.cc-tile.cc-video-off .cc-avatar-tile { display: flex; }
.cc-tile-info {
  position: relative; z-index: 1;
  padding: 8px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
  font-size: 0.78rem; font-weight: 700;
  color: #f1f5f9;
}
.cc-tile-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-tile-estado { font-size: 0.72rem; font-weight: 600; color: rgba(241,245,249,.85); white-space: nowrap; }

/* Controlos rodapé. */
.chamada-controlos {
  padding: 14px 16px 18px;
  display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap;
  background: #0c1326;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.cc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06); color: #f8fafc;
  cursor: pointer; font: inherit; font-weight: 700; font-size: 0.85rem;
  transition: background .15s, border-color .15s, transform .1s;
}
.cc-btn:hover { background: rgba(255,255,255,.12); }
.cc-btn:active { transform: scale(0.97); }
.cc-btn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.cc-btn .cc-rotulo { display: none; }
@media (min-width: 480px) {
  .cc-btn .cc-rotulo { display: inline; }
}
.cc-btn.cc-on {
  background: rgba(248, 113, 113, .25);
  border-color: rgba(248, 113, 113, .55);
  color: #fee2e2;
}
.cc-rec.cc-rec-ativo {
  background: rgba(239, 68, 68, .35);
  border-color: rgba(239, 68, 68, .8);
  color: #fff5f5;
  animation: chamadaGravPulso 1.6s infinite ease-in-out;
}
.cc-fim {
  background: #dc2626; border-color: #b91c1c; color: #fff;
}
.cc-fim:hover { background: #ef4444; }

.cc-ico {
  width: 18px; height: 18px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.cc-ico-mic { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f8fafc'><path d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z'/></svg>"); }
.cc-ico-cam { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f8fafc'><path d='M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4z'/></svg>"); }
.cc-ico-rec { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f8fafc'><circle cx='12' cy='12' r='6'/></svg>"); }
.cc-ico-fim { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f8fafc'><path d='M21 15.46l-5.27-.61c-.4-.05-.79.09-1.07.37l-2.37 2.37a16 16 0 0 1-7.88-7.88l2.37-2.37c.28-.28.42-.67.37-1.07L6.54 1.18A1 1 0 0 0 5.55 0H1a1 1 0 0 0-1 1A21 21 0 0 0 22 23a1 1 0 0 0 1-1v-4.55a1 1 0 0 0-1-1.18z' transform='rotate(135 12 12)'/></svg>"); }

/* ── Modal de chamada recebida (incoming — estilo escuro WhatsApp-like) ── */
.chamada-incoming {
  position: fixed; inset: 0; z-index: 10250;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.chamada-incoming .chamada-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }

.chamada-incoming-wa {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.chamada-incoming-painel {
  position: relative; z-index: 1;
  width: 100%; max-width: 360px;
  background: #111b21;
  color: #e9edef;
  border-radius: 20px;
  padding: 16px 16px 20px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .06);
}

.chamada-incoming-wa-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; padding: 0 2px;
}
.chamada-incoming-brand {
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em;
  color: rgba(233, 237, 239, .55); text-transform: uppercase;
}
.chamada-incoming-x {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, .08); color: #e9edef;
  font-size: 1.35rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.chamada-incoming-x:hover { background: rgba(255, 255, 255, .14); }

.chamada-incoming-wa-av { margin: 8px auto 12px !important; }
.chamada-incoming-wa-name {
  font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em;
  color: #f1f7fb; margin: 4px 0 4px;
}
.chamada-incoming-wa-type {
  font-size: 1rem; font-weight: 600; color: rgba(241, 247, 251, .86);
}
.chamada-incoming-wa-sec {
  font-size: 0.88rem; font-weight: 600; color: rgba(241, 247, 251, .5);
  margin: 10px 0 22px;
  word-break: break-word;
}

.chamada-incoming-wa-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap;
}
.chamada-incoming-circle {
  width: 56px; height: 56px; border-radius: 50%;
  border: none; cursor: pointer; flex-shrink: 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
}
.chamada-incoming-decline {
  background: #ef4444;
  position: relative;
}
.chamada-incoming-decline::before,
.chamada-incoming-decline::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 22px; height: 3px;
  background: #fff;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.chamada-incoming-decline::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.chamada-incoming-decline:hover { filter: brightness(1.06); }

.chamada-incoming-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  border: none; cursor: pointer; font-weight: 800; font-size: 0.95rem;
  color: #082f1b;
  background: linear-gradient(180deg, #3ee09a 0%, #22c48a 55%, #1fa376 100%);
  box-shadow: 0 10px 26px rgba(34, 197, 148, .35);
}
.chamada-incoming-pill:hover { filter: brightness(1.04); }

.chamada-incoming-phone-ico {
  width: 16px; height: 16px; display: inline-block;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23082f1b'%3E%3Cpath d='M6.6 11.9c2 3.9 5.7 7.7 11.9 11.9l4-4c.5-.5 1.3-.7 2-.5 1.1.3 2.3.5 3.6.5.6 0 1 .5 1 1.2V21c0 .6-.4 1-1 1C9.9 22 2 14.3 2 4.9 2 4.4 2.5 4 3 4h3.8c.6 0 1.1.5 1.1 1.1 0 1.3.3 2.5.8 3.7.3.8.1 1.5-.4 2l-3.9 4.1z'/%3E%3C/svg%3E");
}

.chamada-incoming-menu { position: relative; flex-shrink: 0; }
.chamada-incoming-kebab {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .06); color: #dfe7ec;
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.chamada-incoming-kebab:hover { background: rgba(255, 255, 255, .1); }

.chamada-incoming-submenu {
  position: absolute; bottom: 110%; right: 0;
  min-width: 210px;
  background: #1f2c34;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 6px 0;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .45);
  z-index: 4;
}
.chamada-incoming-submenu.d-none { display: none !important; }

.chamada-incoming-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 10px 16px;
  border: none; background: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 0.9rem;
  color: #e9edef;
}
.chamada-incoming-menu-item:hover { background: rgba(255, 255, 255, .07); }

/* Chamada activa mobile (mais espaço ao hero + controlos inferior) */
@media (max-width: 719px) {
  .chamada-overlay.chamada-overlay--mobile {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .chamada-overlay.chamada-overlay--mobile .chamada-painel {
    max-width: 100vw; max-height: none; min-height: 100vh;
    width: 100%; border-radius: 0;
    box-shadow: none;
    padding-bottom: var(--zori-safe-bottom);
  }
  .chamada-overlay.chamada-overlay--mobile[data-tipo="dm"][data-modo="audio"] .chamada-cabec {
    text-align: center;
    align-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
    border-bottom-color: transparent;
    padding-top: max(14px, var(--zori-safe-top));
  }
  .chamada-overlay.chamada-overlay--mobile[data-tipo="dm"][data-modo="audio"] .chamada-titulo {
    font-size: 0.92rem;
    opacity: .85;
  }
  .chamada-overlay.chamada-overlay--mobile[data-tipo="dm"][data-modo="audio"] .chamada-sub {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.02em;
  }
  .chamada-overlay.chamada-overlay--mobile[data-tipo="dm"][data-modo="audio"] .cc-cena-hero {
    justify-content: center;
    gap: 22px;
    padding-bottom: 12vh;
    background:
      radial-gradient(ellipse at 50% 40%, rgba(34,197,148,.07), transparent 55%),
      #050810;
  }
  .chamada-overlay.chamada-overlay--mobile[data-tipo="dm"][data-modo="audio"] .cc-avatar-hero {
    width: 208px !important;
    height: 208px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  }
  .chamada-overlay.chamada-overlay--mobile[data-tipo="dm"][data-modo="audio"] .cc-hero-nome {
    font-size: 1.7rem;
  }
  .chamada-overlay.chamada-overlay--mobile .chamada-controlos {
    border-top-color: transparent;
    background: linear-gradient(0deg, rgba(5,10,22,.94), rgba(5,10,22,.45));
    padding: 14px 10px calc(14px + var(--zori-safe-bottom));
    gap: 12px;
  }
}

/* Ajustes finos para telas muito estreitas. */
@media (max-width: 380px) {
  .chamada-controlos { padding: 10px 8px 12px; gap: 6px; }
  .cc-btn { padding: 8px 12px; font-size: 0.8rem; }
  .cc-avatar-hero { width: 140px; height: 140px; }
  .cc-avatar-hero .cc-avatar-iniciais { font-size: 46px; }
  .cc-hero-nome { font-size: 1.4rem; }
}