/* CHATROOM — call.css */
/* VOICE CALL UI */
#call-overlay{
  position:fixed;inset:0;background:rgba(7,22,51,0.97);
  z-index:600;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:0;
}
#call-overlay.active{display:flex}
.call-avatar{
  width:100px;height:100px;border-radius:50%;
  border:3px solid var(--accent);margin-bottom:18px;
  box-shadow:0 0 0 0 rgba(59,130,246,0.4);
}
.call-avatar.ringing{
  animation:callPulse 1.5s infinite;
}
@keyframes callPulse{
  0%{box-shadow:0 0 0 0 rgba(59,130,246,0.4)}
  70%{box-shadow:0 0 0 24px rgba(59,130,246,0)}
  100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}
}
.call-name{font-size:24px;font-weight:900;margin-bottom:6px}
.call-status{font-size:14px;color:var(--text3);margin-bottom:48px}
.call-timer{font-size:18px;font-weight:700;color:var(--green);margin-bottom:48px;font-variant-numeric:tabular-nums}
.call-actions{display:flex;gap:24px;align-items:center}
.call-btn{
  width:64px;height:64px;border-radius:50%;border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;cursor:pointer;transition:.2s;
}
.call-btn.end{background:#ef4444;box-shadow:0 6px 20px rgba(239,68,68,.4)}
.call-btn.end:hover{background:#dc2626}
.call-btn.accept{background:#22c55e;box-shadow:0 6px 20px rgba(34,197,94,.4)}
.call-btn.accept:hover{background:#16a34a}
.call-btn.mute{background:var(--surface2);border:1px solid var(--border2)}
.call-btn.mute.active{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.4);color:var(--red)}
.call-btn.speaker{background:var(--surface2);border:1px solid var(--border2)}

/* ═══ INCOMING CALL — FULLSCREEN ═══ */
#incoming-call{
  position:fixed;inset:0;
  background:linear-gradient(180deg,#071633 0%,#050e1f 100%);
  z-index:900;display:none;
  flex-direction:column;align-items:center;
  justify-content:space-between;
  padding:calc(var(--safe-top)+60px) 24px calc(var(--safe-bot)+48px);
}
#incoming-call.show{display:flex}

/* ═══ CALL OVERLAY — FULLSCREEN ═══ */
#call-overlay{
  position:fixed;inset:0;
  background:linear-gradient(180deg,#071633 0%,#050e1f 100%);
  z-index:600;display:none;
  flex-direction:column;align-items:center;
  justify-content:space-between;
  padding:calc(var(--safe-top)+60px) 24px calc(var(--safe-bot)+48px);
}
#call-overlay.active{display:flex}
.call-avatar{
  width:120px;height:120px;border-radius:50%;
  border:3px solid rgba(34,197,94,0.5);
  object-fit:cover;
}
.call-avatar.ringing{animation:callPulse 1.5s infinite;}
@keyframes callPulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,0.5)}
  70%{box-shadow:0 0 0 30px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
.call-name{font-size:28px;font-weight:900;color:#f1f5f9;text-align:center}
.call-status{font-size:14px;color:#64748b;text-align:center;margin-top:6px}
.call-timer{font-size:22px;font-weight:700;color:#22c55e;font-variant-numeric:tabular-nums;text-align:center;margin-top:6px}
.call-actions{display:flex;justify-content:center;gap:40px;width:100%}
.call-btn{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:none;border:none;cursor:pointer;
}
.call-btn-circle{
  width:68px;height:68px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;transition:.15s;
}
.call-btn-circle:active{transform:scale(0.9)}
.call-btn.end .call-btn-circle{background:#ef4444;box-shadow:0 6px 20px rgba(239,68,68,.5)}
.call-btn.accept .call-btn-circle{background:#22c55e;box-shadow:0 6px 20px rgba(34,197,94,.5)}
.call-btn.mute .call-btn-circle{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.15)}
.call-btn.mute.active .call-btn-circle{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.4)}
.call-btn.speaker .call-btn-circle{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.15)}
.call-btn-label{font-size:12px;color:#94a3b8;font-weight:600}
.group-card{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:14px;cursor:pointer;transition:.15s;border:1px solid transparent;}
.group-card:active{transform:scale(.98);background:var(--surface)}
.group-card:hover{background:var(--surface);border-color:var(--border)}
.group-card.active{background:rgba(59,130,246,0.12)}
.group-avatar{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#7c3aed);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden;}
.group-avatar img{width:100%;height:100%;object-fit:cover;}
.group-info{flex:1;min-width:0}
.group-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group-last{font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.group-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.group-time{font-size:10px;color:var(--text3)}
.badge-public{font-size:9px;font-weight:700;padding:2px 6px;border-radius:99px;background:rgba(34,197,94,.15);color:var(--green)}
.member-chip{display:flex;align-items:center;gap:5px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25);border-radius:99px;padding:3px 8px 3px 4px;font-size:11px;font-weight:600;color:var(--accent);}
.member-chip img{width:18px;height:18px;border-radius:50%;}
.member-chip-rm{cursor:pointer;color:var(--text3);font-size:10px;margin-left:2px;}
.member-chip-rm:hover{color:var(--red)}
.group-header-icon{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#2563eb,#7c3aed);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}