/* HOAX: an incoming call, then the call playing with captions. A generic phone look, not any real phone's. */
.stage { max-width: 640px; }

.spec-call {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 16px 16px; background: #1A1E25; color: #F4F4F1;
}
.spec-call .ph-status { align-self: stretch; margin: 0 -16px 14px; }
.call-top { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; }
.call-state { font-size: 14px; font-weight: 600; color: #A3AAB5; }
.call-who { font-size: clamp(26px, 7vw, 34px); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.call-sub { font-size: 16px; color: #A3AAB5; }
.call-timer { display: none; font-size: 15px; color: #A3AAB5; font-variant-numeric: tabular-nums; }
.is-live .call-state, .is-ended .call-state { display: none; }
.is-live .call-timer, .is-ended .call-timer { display: block; }

.call-face { margin: 34px 0 0; }
.call-av {
  position: relative; overflow: hidden; width: 112px; height: 112px; border-radius: 50%;
  background: #3A404A; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 46px; font-weight: 700;
}
.call-av.is-unknown::before { content: ""; position: absolute; top: 25px; left: 38px; width: 36px; height: 36px; border-radius: 50%; background: #8B93A1; }
.call-av.is-unknown::after { content: ""; position: absolute; bottom: -14px; left: 19px; width: 74px; height: 52px; border-radius: 37px 37px 0 0; background: #8B93A1; }
.is-live .call-face, .is-ended .call-face { display: none; }

.call-ring { margin-top: auto; padding-top: 24px; }
.is-live .call-ring, .is-ended .call-ring { display: none; }
.call-answer { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; color: #F4F4F1; font-weight: 700; font-size: 15px; cursor: pointer; }
.call-icon { width: 76px; height: 76px; padding: 20px; border-radius: 50%; background: #2DB84B; fill: #FFFFFF; animation: ring 1.4s ease-in-out infinite; }
@keyframes ring { 0%, 50%, 100% { transform: rotate(0); } 10% { transform: rotate(-14deg); } 20% { transform: rotate(14deg); } 30% { transform: rotate(-9deg); } 40% { transform: rotate(6deg); } }

/* captions: light cards on the dark call screen. The caller on the left, whoever answered on the right */
.call-caps { display: none; width: 100%; max-height: 340px; overflow-y: auto; margin-top: 18px; flex-direction: column; gap: 10px; text-align: left; }
.is-live .call-caps, .is-ended .call-caps { display: flex; }
.is-ended .call-caps { max-height: none; overflow: visible; }   /* once it's over, the whole call shows */
.cap {
  align-self: flex-start; max-width: 88%; display: flex; flex-direction: column; gap: 3px;
  background: #F4F4F1; color: #15181D; border-radius: 18px 18px 18px 6px; padding: 10px 14px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: clamp(16px, 4.3vw, 18px); line-height: 1.4;
  transition: opacity .3s ease;
}
.cap[hidden] { display: none; }
.cap-B { align-self: flex-end; background: #DCE3EC; border-radius: 18px 18px 6px 18px; }
.cap-who { font-family: var(--body); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #5A606B; }
/* while the call plays, the line being said stands out */
.is-live .cap, .is-replay .cap { opacity: .45; }
.is-live .cap.is-now, .is-replay .cap.is-now { opacity: 1; }

/* the buttons a phone shows during a call */
.call-ctl { margin-top: auto; padding-top: 22px; display: flex; justify-content: center; gap: 26px; }
.call-ctl[hidden], .ctl[hidden] { display: none; }
.ctl { display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: 0; padding: 0; color: #F4F4F1; font: 600 13px/1 var(--body); cursor: pointer; }
.ctl-ic { width: 62px; height: 62px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: flex; align-items: center; justify-content: center; transition: background-color .15s ease, transform .1s ease; }
.ctl-ic svg { width: 28px; height: 28px; fill: currentColor; }
@media (hover: hover) { .ctl:hover .ctl-ic { background: rgba(255, 255, 255, .26); } }
.ctl:active .ctl-ic { transform: scale(.94); }
.ctl-end .ctl-ic { background: #EB4D3D; }
@media (hover: hover) { .ctl-end:hover .ctl-ic { background: #F2675A; } }
.is-paused .ctl-pause .ctl-ic { background: #F4F4F1; color: #15181D; }

.call-acted { margin-top: 14px; font-size: 12px; color: #8B93A1; }
.spec-call .stamp { position: static; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .call-icon { animation: none; } }