/* ============ Màn hình cuộc gọi — luôn nền tối ============ */
.call-screen {
  position: fixed; inset: 0; z-index: 140; background: #111; color: #fff; overflow: hidden;
  opacity: 0; transition: opacity .2s; user-select: none; color-scheme: dark;
}
.call-screen.show { opacity: 1; }
.call-bg {
  position: absolute; inset: -60px; background: #1b2233 center / cover no-repeat;
  filter: blur(40px) brightness(.38) saturate(1.2);
}
.call-screen.is-video.mode-active .call-bg, .call-screen.is-group.mode-active .call-bg { display: none; }

/* Sân khấu video */
.call-stage {
  position: absolute; inset: 0; display: grid; gap: 6px; padding: calc(64px + var(--safe-t)) 6px calc(120px + var(--safe-b));
  grid-template-columns: 1fr; grid-auto-rows: 1fr;
}
.call-stage[data-count="2"] { grid-template-rows: 1fr 1fr; }
.call-stage[data-count="3"], .call-stage[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.call-stage[data-count="3"] .tile:first-child { grid-column: span 2; }
@media (min-aspect-ratio: 1/1) {
  .call-stage[data-count="2"] { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; }
  .call-stage[data-count="3"] .tile:first-child { grid-column: auto; grid-row: span 2; }
}
/* 1-1: video người kia phủ toàn màn hình */
.is-direct .call-stage { padding: 0; gap: 0; }
.is-direct.mode-active .call-stage { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; }
.is-direct .tile { border-radius: 0; }
/* Ẩn sân khấu khi chỉ có giọng nói (vẫn phát âm thanh) */
.mode-incoming .call-stage, .is-audio.is-direct .call-stage { opacity: 0; pointer-events: none; }
.mode-outgoing.is-group.is-audio .call-stage { opacity: 0; }

.tile { position: relative; min-height: 0; background: #1f1f1f; border-radius: 14px; overflow: hidden; }
.tile video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.is-group .tile video { object-fit: cover; }
.mirror { transform: scaleX(-1); }
.tile.no-video video { opacity: 0; }
.tile-ava { position: absolute; inset: 0; display: none; place-items: center; background: #262b36; }
.tile.no-video .tile-ava { display: grid; }
.is-direct .tile-ava .avatar { --s: 120px !important; }
.tile-name {
  position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 16px);
  padding: 3px 9px; border-radius: 99px; background: rgba(0, 0, 0, .55); font-size: 13px;
}
.tile-mic { color: #ff6b6b; display: inline-flex; }
.tile-mic:empty { display: none; }
.tile-state { position: absolute; top: 10px; left: 0; right: 0; text-align: center; font-size: 13px; color: #e5e5e5; text-shadow: 0 1px 3px #000; }
.is-direct .tile-name { display: none; }
.is-direct .tile-state { top: calc(80px + var(--safe-t)); }

/* Thanh trên khi đang gọi video / nhóm */
.call-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: none; justify-content: center; text-align: center;
  padding: calc(12px + var(--safe-t)) 16px 24px; background: linear-gradient(rgba(0, 0, 0, .6), transparent);
}
.call-top-text { display: flex; flex-direction: column; }
.call-top b { font-size: 17px; }
.call-sub { font-size: 13.5px; color: #d6d6d6; font-variant-numeric: tabular-nums; }
.mode-active.is-video .call-top, .mode-active.is-group .call-top { display: flex; }

/* Avatar lớn ở giữa (cuộc gọi đến, đang gọi, gọi thoại) */
.call-hero {
  position: absolute; left: 0; right: 0; top: 18%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 0 24px;
}
.call-hero-name { font-size: 26px; font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.call-hero-status { font-size: 15px; color: #d6d6d6; font-variant-numeric: tabular-nums; }
.call-hero .avatar { box-shadow: 0 0 0 6px rgba(255, 255, 255, .08); }
.mode-incoming .call-hero .avatar, .mode-outgoing .call-hero .avatar { animation: halo 1.8s ease-out infinite; }
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); } 100% { box-shadow: 0 0 0 28px rgba(255, 255, 255, 0); } }
.mode-active.is-video .call-hero, .mode-active.is-group .call-hero { display: none; }

/* Hình của mình (1-1 video) — kéo được */
.self-view {
  position: absolute; right: 12px; top: calc(76px + var(--safe-t)); z-index: 3; width: 112px; height: 160px;
  border-radius: 14px; overflow: hidden; background: #2a2a2a; border: 2px solid rgba(255, 255, 255, .35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5); touch-action: none; cursor: grab;
}
@media (min-width: 900px) { .self-view { width: 200px; height: 140px; } }
.self-view video { width: 100%; height: 100%; object-fit: cover; }
.self-off { position: absolute; inset: 0; display: grid; place-items: center; background: #2a2a2a; }

/* Nút điều khiển */
.call-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(10px, 4vw, 26px); flex-wrap: wrap; padding: 28px 12px calc(28px + var(--safe-b));
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
}
.mode-incoming .call-controls { gap: 30vw; padding-bottom: calc(56px + var(--safe-b)); }
@media (min-width: 900px) { .mode-incoming .call-controls { gap: 120px; } }
.cbtn { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; width: 64px; }
.cbtn-ic {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18);
  transition: background .15s, transform .1s; backdrop-filter: blur(6px);
}
.cbtn:hover:not(:disabled) .cbtn-ic { background: rgba(255, 255, 255, .28); }
.cbtn:active:not(:disabled) .cbtn-ic { transform: scale(.94); }
.cbtn.off .cbtn-ic { background: #fff; color: #111; }
.cbtn.red .cbtn-ic { background: #e53935; }
.cbtn.red:hover .cbtn-ic { background: #f04441; }
.cbtn.green .cbtn-ic { background: #16a34a; }
@media (max-width: 440px) {
  .call-controls { gap: 6px; }
  .cbtn { width: 62px; }
  .cbtn-ic { width: 52px; height: 52px; }
}
.cbtn.big { width: 84px; }
.cbtn.big .cbtn-ic { width: 70px; height: 70px; }
.cbtn-label { font-size: 12px; color: #e0e0e0; text-align: center; line-height: 1.25; }
.cbtn:disabled { opacity: .4; }
.ring-pulse .cbtn-ic { animation: ringpulse 1.2s ease-out infinite; }
@keyframes ringpulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .7); } 100% { box-shadow: 0 0 0 22px rgba(22, 163, 74, 0); } }
.call-screen.ending .call-controls { opacity: .3; pointer-events: none; }

/* Tab Cuộc gọi */
.call-item .item-sub { display: flex; align-items: center; gap: 4px; }
.call-item.missed .item-title, .call-item.missed .item-sub { color: var(--danger); }