/* /call: a phone's incoming-call screen, then the message. Motion on transform and opacity only. */
body:has(.call) { background: #0b0806; }
body:has(.call) .rail { display: none; }
.call { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; color: #fff; font-family: -apple-system, 'SF Pro Display', var(--font-sans); background: #0b0806; }
.call__bg { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(28px) saturate(1.15) brightness(.55); transform: scale(1.05); }
.call::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55)); pointer-events: none; }
.call__ring, .call__answer { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(56px, 10vh, 110px) 20px 32px; }
.call__ring[hidden], .call__answer[hidden] { display: none; }
.call__status { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: rgba(255,255,255,.7); }
.call__dot { width: 8px; height: 8px; border-radius: 50%; background: #34C759; animation: call-blink 1.4s ease-in-out infinite; }
.call[data-state="declined"] .call__dot { background: #FF3B30; animation: none; }
.call__name { margin-top: 14px; font: 400 clamp(2.4rem, 1.6rem + 3vw, 3.6rem)/1.05 -apple-system, 'SF Pro Display', var(--font-sans); letter-spacing: -0.01em; color: #fff; }
.call__sub { margin-top: 10px; font-size: 18px; color: rgba(255,255,255,.75); }
.call__avatar { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin: clamp(36px, 8vh, 80px) 0 auto; border-radius: 50%; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.call__avatar::before, .call__avatar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,176,32,.55); animation: call-pulse 2.4s cubic-bezier(.16,1,.3,1) infinite; }
.call__avatar::after { animation-delay: 1.2s; }
.call[data-state="declined"] .call__avatar::before, .call[data-state="declined"] .call__avatar::after { animation: none; opacity: 0; }
.call__actions { display: flex; justify-content: space-between; width: min(320px, 82vw); margin-top: 40px; }
.call__btn { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; background: none; color: #fff; font: 400 15px/1 -apple-system, var(--font-sans); cursor: pointer; }
.call__btn svg { width: 76px; height: 76px; padding: 20px; border-radius: 50%; transition: transform 200ms cubic-bezier(.16,1,.3,1), box-shadow 200ms ease; }
.call__btn--decline svg { background: #FF3B30; }
.call__btn--accept svg { background: #34C759; animation: call-wiggle 2.4s ease-in-out infinite; }
.call__btn:hover svg { transform: scale(1.06); }
.call__btn:active svg { transform: scale(.94); }
.call__btn:focus-visible svg { box-shadow: 0 0 0 3px #fff; }
.call__timer { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.7); }
.call__dot--live { animation: none; }
.call__title { margin-top: 18px; font: 400 clamp(2.2rem, 1.4rem + 3vw, 3.4rem)/1.05 var(--font-display); color: #FFF3C9; outline: none; animation: call-rise .9s cubic-bezier(.16,1,.3,1) both; }
.call__lead { max-width: 52ch; margin-top: 18px; font: 400 clamp(1rem, .95rem + .3vw, 1.15rem)/1.55 var(--font-sans); color: rgba(255,243,201,.86); animation: call-rise .9s cubic-bezier(.16,1,.3,1) .15s both; }
.call__cta { margin-top: 28px; padding: 15px 28px; border-radius: 999px; background: #FF6A1F; color: #1A0F0A; font: 600 16px/1 var(--font-sans); text-decoration: none; transition: transform 300ms cubic-bezier(.16,1,.3,1), box-shadow 300ms ease; animation: call-rise .9s cubic-bezier(.16,1,.3,1) .3s both; }
.call__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -14px rgba(255,106,31,.75); }
.call__cta:focus-visible { outline: 2px solid #FFF3C9; outline-offset: 3px; }
.call__press { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; color: rgba(255,243,201,.6); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.call__press img { width: 84px; height: auto; }
.call__since { margin-top: 18px; font: 400 15px/1.4 var(--font-display); color: rgba(255,243,201,.6); }
.call__foot { position: relative; z-index: 1; display: flex; justify-content: center; gap: 20px; padding: 14px 16px 18px; font-size: 13px; }
.call__foot a { color: rgba(255,255,255,.55); text-decoration: none; }
.call__foot a:hover, .call__foot a:focus-visible { color: #fff; }
@keyframes call-blink { 50% { opacity: .3; } }
@keyframes call-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
@keyframes call-wiggle { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-14deg); } 78% { transform: rotate(12deg); } 82% { transform: rotate(-10deg); } 86% { transform: rotate(6deg); } }
@keyframes call-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .call *, .call *::before, .call *::after { animation: none !important; } }
.call__answer { justify-content: center; }
.call__who { display: contents; }
.call__desk { display: none; }

/* Desktop: the call arrives the way it does on a computer, as a notification banner top right,
   while one quiet line holds the middle of the screen. */
@media all {
  .call[data-state="ringing"] .call__desk, .call[data-state="declined"] .call__desk {
    display: block; position: absolute; z-index: 1; inset: 0; margin: auto; height: max-content; max-width: 16ch;
    text-align: center; font: 400 clamp(3rem, 1.5rem + 3vw, 5rem)/1.05 var(--font-display); letter-spacing: -0.02em; color: rgba(255,243,201,.92);
    animation: call-rise 1.2s cubic-bezier(.16,1,.3,1) .4s both;
  }
  .call__ring {
    position: absolute; z-index: 2; top: 22px; right: 22px; flex: none; width: 400px; padding: 14px 14px 14px 16px;
    display: grid; grid-template-columns: 52px 1fr auto; align-items: center; column-gap: 14px; text-align: left;
    border-radius: 20px; background: rgba(44, 38, 34, .62); border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.7);
    animation: call-banner-in .7s cubic-bezier(.16,1,.3,1) .2s both, call-nudge 3.2s ease-in-out 1.4s infinite;
  }
  .call[data-state="declined"] .call__ring { animation: none; opacity: .8; }
  .call__avatar { grid-column: 1; grid-row: 1; width: 52px; height: 52px; margin: 0; }
  .call__avatar img { width: 28px; height: auto; }
  .call__avatar::before, .call__avatar::after { border-width: 1.5px; }
  .call__who { display: block; grid-column: 2; grid-row: 1; min-width: 0; }
  .call__status { font-size: 12px; gap: 6px; }
  .call__dot { width: 6px; height: 6px; }
  .call__name { margin-top: 2px; font-size: 17px; font-weight: 600; letter-spacing: 0; }
  .call__sub { margin-top: 1px; font-size: 13px; }
  .call__actions { grid-column: 3; grid-row: 1; width: auto; margin: 0; gap: 10px; }
  .call__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .call__btn svg { width: 40px; height: 40px; padding: 10px; }
  .call__btn--accept svg { animation: none; }
  .call__ring + .call__answer, .call__answer { padding-top: 80px; }
}
@keyframes call-banner-in { from { opacity: 0; transform: translateX(120%); } to { opacity: 1; transform: none; } }
@keyframes call-nudge { 0%, 82%, 100% { transform: none; } 86% { transform: translateX(-6px); } 90% { transform: translateX(5px); } 94% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) { .call__ring, .call__desk { animation: none !important; } }
.call__foot { margin-top: auto; }
.call__quick { display: flex; justify-content: space-between; width: min(320px, 82vw); margin-top: auto; }
.call__mini { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 76px; border: 0; background: none; color: #fff; font: 400 13px/1 -apple-system, var(--font-sans); cursor: pointer; opacity: .9; }
.call__mini svg { width: 26px; height: 26px; }
.call__mini:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 8px; }
.call__avatar { margin-bottom: 0; }
.call__actions { margin-top: 28px; }

@media all {
  .call__quick { display: none; }
  .call[data-state="ringing"] .call__desk, .call[data-state="declined"] .call__desk { max-width: 26ch; }
}

/* Phones: the banner drops from the top edge, iOS style, and the line takes the middle. */
@media (max-width: 899px) {
  .call__ring { top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; width: auto; grid-template-columns: 44px 1fr auto; column-gap: 10px; padding: 10px 10px 10px 12px; border-radius: 22px; animation: call-drop .7s cubic-bezier(.16,1,.3,1) .2s both, call-nudge 3.2s ease-in-out 1.4s infinite; }
  .call__avatar { width: 44px; height: 44px; }
  .call__avatar img { width: 24px; }
  .call__name { font-size: 16px; }
  .call__sub { font-size: 12px; }
  .call__btn svg { width: 38px; height: 38px; padding: 9px; }
  .call__actions { gap: 8px; }
  .call[data-state="ringing"] .call__desk, .call[data-state="declined"] .call__desk { max-width: none; white-space: nowrap; padding: 0; font-size: min(2.6rem, 8vw); }
}
@keyframes call-drop { from { opacity: 0; transform: translateY(-130%); } to { opacity: 1; transform: none; } }

/* Missed calls stack in first, one by one; then the call itself arrives above them. */
.call__missed { position: absolute; z-index: 1; top: 124px; right: 22px; width: 400px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.call__note { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(44,38,34,.5); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); color: #fff; font: 400 13px/1.3 -apple-system, var(--font-sans); opacity: 0; animation: call-note-in .55s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(.3s + var(--i) * .55s); }
.call__note-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #34C759; }
.call__note-icon svg { width: 18px; height: 18px; color: #fff; }
.call__note-text { display: flex; flex-direction: column; min-width: 0; }
.call__note-text b { font-weight: 600; }
.call__note-text span { color: rgba(255,255,255,.75); }
.call__note time { align-self: start; font-size: 12px; color: rgba(255,255,255,.55); white-space: nowrap; }
.call__note--new { animation-delay: 0s; }
.call[data-state="answered"] .call__missed { display: none; }
/* the call arrives after the last missed one */
.call__ring { animation-delay: 1.4s, 2.6s !important; }
.call[data-state="ringing"] .call__desk, .call[data-state="declined"] .call__desk { animation-delay: 1.8s; }
@keyframes call-note-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
  .call__missed { top: calc(max(10px, env(safe-area-inset-top)) + 92px); left: 10px; right: 10px; width: auto; gap: 6px; }
  .call__note { padding: 8px 12px 8px 8px; grid-template-columns: 30px 1fr auto; gap: 10px; }
  .call__note-icon { width: 30px; height: 30px; }
  .call[data-state="ringing"] .call__desk, .call[data-state="declined"] .call__desk { inset: auto 0 15% 0; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) { .call__note { opacity: 1; } }