:root {
  color-scheme: dark;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: #111722;
  color: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; overflow: hidden; background: #111722; }
button { border: 0; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

.incoming {
  position: fixed;
  inset: 0;
  min-height: 100dvh;
  padding: calc(46px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 24%, rgba(77, 145, 231, .38), transparent 30%),
    radial-gradient(circle at 18% 88%, rgba(86, 200, 156, .18), transparent 35%),
    linear-gradient(165deg, #26364e 0%, #131b29 52%, #090d14 100%);
}
.incoming-glow {
  position: absolute;
  top: 10%;
  width: min(74vw, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(96, 163, 247, .12);
  filter: blur(24px);
}
.pal-avatar {
  position: relative;
  z-index: 1;
  width: 132px;
  height: 118px;
  margin-top: clamp(8px, 5vh, 54px);
  border: 6px solid rgba(255,255,255,.92);
  border-radius: 34px;
  background: #111821;
  box-shadow: 0 22px 50px rgba(0,0,0,.32), 0 0 0 8px rgba(255,255,255,.1);
  display: grid;
  place-items: center;
}
.pal-avatar span {
  width: 54px;
  height: 11px;
  border-radius: 12px;
  background: #afc3ff;
  box-shadow: -25px -28px 0 -3px #afc3ff, 25px -28px 0 -3px #afc3ff;
}
.eyebrow { position: relative; margin: 32px 0 9px; color: #cbd7e8; font-size: 16px; font-weight: 650; }
h1 { position: relative; margin: 0; font-size: clamp(38px, 10vw, 56px); line-height: 1.05; letter-spacing: -.03em; }
.detail { position: relative; margin: 10px 0 0; color: #d8e1ee; font-size: 18px; }
.incoming-actions { width: min(100%, 340px); margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 18px; }
.action-wrap { display: grid; justify-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.round-action { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.round-action svg { width: 37px; height: 37px; fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.answer { background: #35c66f; }
.decline { background: #ed4a5f; }
.privacy { margin: 28px 0 0; color: #9eacbf; font-size: 13px; }
.round-action:disabled { opacity: .55; transform: scale(.96); }

.call { position: fixed; inset: 0; overflow: hidden; background: #080b10; }
.remote-video, .remote-video video { width: 100%; height: 100%; object-fit: cover; }
.remote-video { display: grid; place-items: center; color: white; }
.remote-video::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#0008 0%, transparent 24%, transparent 66%, #0009 100%); }
.connecting { display: flex; gap: 10px; }
.connecting span { width: 13px; height: 13px; border-radius: 50%; background: #fff; animation: bounce 1.1s infinite ease-in-out; }
.connecting span:nth-child(2) { animation-delay: .14s; }
.connecting span:nth-child(3) { animation-delay: .28s; }
@keyframes bounce { 0%, 70%, 100% { transform: translateY(0); opacity: .35; } 35% { transform: translateY(-12px); opacity: 1; } }
.call-topbar { position: absolute; z-index: 3; top: calc(18px + env(safe-area-inset-top)); left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: flex-start; text-shadow: 0 2px 8px #000; }
.call-topbar strong, .call-topbar span { display: block; }
.call-topbar strong { font-size: 21px; }
#call-status { margin-top: 2px; color: #d7e0ec; font-size: 13px; }
.remote-muted { min-height: 38px; padding: 9px 14px; border-radius: 18px; background: rgba(15,20,28,.75); backdrop-filter: blur(18px); color: #fff; font-size: 14px; font-weight: 800; text-shadow: none; }
.remote-muted::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #f5bd4f; }
.local-video { position: absolute; z-index: 3; top: calc(78px + env(safe-area-inset-top)); right: 16px; width: min(29vw, 142px); aspect-ratio: 3/4; overflow: hidden; border: 2px solid rgba(255,255,255,.88); border-radius: 21px; background: #263346; box-shadow: 0 10px 30px #0009; }
.local-video video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.local-video.camera-off video { visibility: hidden; }
.local-video.camera-off::after { content: "Camera off"; position: absolute; inset: 0; display: grid; place-items: center; color: #d7e0ec; font-size: 12px; font-weight: 800; }
.sound { position: absolute; z-index: 5; top: calc(20px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); min-height: 46px; padding: 0 17px; border-radius: 23px; display: flex; align-items: center; gap: 8px; background: #fff; color: #17233b; box-shadow: 0 8px 24px #0008; font-weight: 800; }
.sound svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.controls { position: absolute; z-index: 4; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 13px; padding: 11px; border-radius: 38px; background: rgba(14,18,25,.7); backdrop-filter: blur(22px); box-shadow: 0 10px 34px #0006; }
.control-button { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.94); color: #111722; }
.control-button svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.control-button .slash { display: none; stroke-width: 3; }
.control-button.is-off { background: #f5bd4f; }
.control-button.is-off .slash { display: block; }
.control-button.hangup { background: #ed4058; color: #fff; }

.ended { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 28px; text-align: center; background: linear-gradient(165deg, #26364e, #0b1018); }
.ended-icon { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; background: #35445a; color: #cfe0f5; font-size: 42px; }
.ended h1 { font-size: 38px; }
.ended p { margin: 0; color: #aebbc9; }

@media (max-height: 580px) {
  .incoming { padding-top: calc(24px + env(safe-area-inset-top)); }
  .pal-avatar { width: 104px; height: 92px; margin-top: 0; border-radius: 28px; }
  .pal-avatar span { transform: scale(.8); }
  .eyebrow { margin-top: 20px; }
  .privacy { margin-top: 16px; }
}