.callui {
  position: fixed;
  inset: 0;
  height: 100dvh;
  z-index: 400;
  background: #0e1621;
  color: #fff;
  overflow: hidden;
}

.callui__remote {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0e1621;
  display: none;
}
.callui[data-video="1"] .callui__remote { display: block; }

.callui__poster {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 90% at 50% 0%, #22364a, #0e1621);
}
.callui[data-video="1"][data-state="active"] .callui__poster { display: none; }

.callui__avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(150deg, #56b0ff, #1d6ff2);
  background-size: cover;
  background-position: center;
  box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.6);
}

.callui__local {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: 14px;
  width: 104px;
  height: 148px;
  object-fit: cover;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.6);
  z-index: 2;
  display: none;
}
.callui[data-video="1"] .callui__local { display: block; }

.callui__head {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 40px);
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 24px;
  z-index: 3;
}
.callui[data-video="1"][data-state="active"] .callui__head {
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.callui__name { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.callui__status { margin-top: 6px; font-size: 15px; color: rgba(255, 255, 255, 0.75); font-variant-numeric: tabular-nums; }

.callui__actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 36px);
  z-index: 3;
}

.callui__row { display: flex; justify-content: center; align-items: center; gap: 26px; }

.callbtn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.14s ease, opacity 0.14s ease;
}
.callbtn:active { transform: scale(0.92); }
.callbtn svg { width: 27px; height: 27px; }
.callbtn.is-off { background: #fff; color: #0e1621; }
.callbtn--end { background: #ff3b30; }
.callbtn--accept { background: #34c759; }

@media (min-width: 821px) {
  .callui__remote { object-fit: contain; }
}