/* ============================================================================
   The call on a phone held upright (loaded at 720px wide or less, and 521px tall or more).
   Designed like a calling app, not a form: one thing in the middle (the person you are talking to),
   everything else quiet and in a fixed place.

     top      connection on the left, Report on the right, the timer in the middle
     middle   the other person: a large round picture that pulses while they speak, their name, one line of state
     below    one soft card with a conversation starter (and a small refresh icon)
     bottom   Mute, Chat, Add, Games with labels, then the two big actions: End and Next

   Chat and games take over the middle and shrink the person to a slim row. A phone held sideways, and the
   laptop layout, are not touched by this file.
   ============================================================================ */

/* ---- the screen: no box inside a box; a soft wash of the other person's mood fades into the page ---- */
body .screen[data-screen="call"]{padding:0;background:var(--card)}
body .screen[data-screen="call"] .card.call{position:relative;border:0;border-radius:0;box-shadow:none;overflow:hidden;gap:0;
  padding:calc(env(safe-area-inset-top,0px) + 62px) 20px calc(env(safe-area-inset-bottom,0px) + 14px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--tint,transparent) 17%,var(--card)) 0,var(--card) 58%)}

/* ---- the top: the old banner and its three chips become a quiet status, a timer and a Report icon ---- */
body .card.call .call-top,body .card.call .call-top > span,body .card.call .call-top > span:nth-child(2){display:contents !important}      /* the second span has an inline flex style in the markup */
body .card.call .call-top{background:none;color:inherit}      /* the old banner colour must not linger on the invisible wrapper */
body .card.call .call-top > span:first-child{display:none !important}                       /* "Be warm" is already on the match-found screen */
body .card.call #netQ{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:20px;display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0;padding:0;border:0;background:none;box-shadow:none;font-size:.8125rem;font-weight:600;color:var(--muted)}
body .card.call .timer{order:1;align-self:center;display:flex;align-items:center;margin:0;padding:0;border:0;background:none;font-size:1.125rem;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
body .card.call .timer i{display:none}
body .card.call #fpill{order:2;align-self:center;margin:2px 0 0;padding:0;border:0;background:none;font-size:.75rem;font-weight:500;color:var(--muted)}
body .card.call #fpill.warn{background:none;color:var(--danger-ink)}
body .card.call #reportBtn{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink)}
body .card.call #reportBtn .ri{display:grid;place-items:center;width:44px;height:44px}
body .card.call #reportBtn .ri svg{width:22px;height:22px}
body .card.call #reportBtn .rl{display:none}
body .card.call .grace{order:3;flex:none;margin:10px 0 0;padding:12px 14px;border:0;border-radius:14px;background:var(--soft);color:var(--ink);font-size:.8125rem;line-height:1.4;gap:10px}
body .card.call .grace .btn{min-height:40px}

/* ---- the middle: the person you are talking to ---- */
body .card.call .voices{order:5;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0}
body .card.call #vThem{--av:clamp(104px,22vh,156px);order:1;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none}
body .card.call #vThem .face{position:relative;display:block;width:var(--av);height:var(--av);aspect-ratio:1;border:3px solid #0B0B14;border-radius:50%;overflow:hidden;font-size:calc(var(--av) * .5);line-height:1;box-shadow:0 0 0 0 transparent}      /* the artwork covers the emoji; if it cannot load, the emoji is the fallback */
body .card.call #vThem .face .call-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 36%;pointer-events:none;user-select:none}
body .card.call #vThem.live .face{box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 35%,transparent)}
@media (prefers-reduced-motion:no-preference){
  body .card.call #vThem.live .face{animation:callRing 1.5s ease-out infinite}
  @keyframes callRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 50%,transparent)}100%{box-shadow:0 0 0 20px transparent}}
}
body .card.call #vThem h3{margin:6px 0 0;max-width:100%;font-size:1.375rem;font-weight:800;line-height:1.2;text-align:center;overflow-wrap:anywhere}
body .card.call #vThem small{min-height:1.4em;font-size:.875rem;font-weight:500;color:var(--muted);text-align:center}
body .card.call #vThem .wave{width:min(56%,170px);height:28px;justify-content:center;overflow:hidden}
body .card.call #vYou{order:2;flex:none;display:inline-flex;flex-direction:row;align-items:center;gap:8px;min-height:36px;padding:4px 14px 4px 5px;border:0;border-radius:999px;background:var(--soft);box-shadow:none;transform:none}
body .card.call #vYou .face{width:26px;height:26px;aspect-ratio:1;border:2px solid #0B0B14;border-radius:50%;font-size:.8125rem;line-height:1}
body .card.call #vYou h3{margin:0;font-size:.8125rem;font-weight:600;line-height:1.2}
body .card.call #vYou .wave{width:54px;height:16px;flex:none;justify-content:center;overflow:hidden}
body .card.call #vYou small{display:none;min-height:0;font-size:.75rem;color:var(--muted)}
body .card.call #vYou small:not(:empty){display:inline}

/* ---- one soft card with a conversation starter ---- */
body .card.call .prompt{order:6;flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;padding:10px 10px 10px 16px;border:0;border-radius:16px;background:var(--soft);font-size:.875rem;line-height:1.4;color:var(--ink)}
body .card.call #promptText{flex:1;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body .card.call #newPrompt{position:relative;flex:none;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:var(--card);color:var(--ink);font-size:.75rem;text-indent:-9999px;overflow:hidden;white-space:nowrap}
body .card.call #newPrompt::before{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;background:currentColor;text-indent:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- safety and hints: quiet text, never a competing button ---- */
body .card.call #hearHint{order:7;flex:none;margin:0;padding:0 0 6px;font-size:.75rem;line-height:1.4;text-align:center;color:var(--muted)}
body .card.call .call-uncomf{order:8;flex:none;display:flex;justify-content:center;margin:0}
body .card.call .call-uncomf .btn{min-height:44px;padding:0 14px;border:0;border-radius:10px;background:none;box-shadow:none;font-size:.8125rem;font-weight:600;color:var(--danger-ink)}
body .card.call #callFoot{display:none}

/* ---- the bottom: four labelled controls, then the two actions ---- */
body .card.call .controls{order:9;flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px;justify-items:center;align-items:start;padding:6px 0 0;border:0;background:none}
body .card.call .controls .round{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;width:auto;min-width:64px;height:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink)}
body .card.call .controls .round .ri{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--soft);transition:background .15s,color .15s,transform .1s}
body .card.call .controls .round .ri svg{width:24px;height:24px}
body .card.call .controls .round .rl{display:block;font-size:.75rem;font-weight:500;line-height:1.2;color:var(--muted);white-space:nowrap}
body .card.call .controls .round:active .ri{transform:scale(.94)}
body .card.call .controls .round[aria-pressed="true"]{background:none;color:var(--ink)}
body .card.call .controls .round[aria-pressed="true"] .ri{background:var(--ink);color:var(--card)}
body .card.call .controls .round[aria-pressed="true"] .rl{color:var(--ink);font-weight:600}
body .card.call .controls #muteBtn[aria-pressed="true"] .ri{background:var(--danger);color:#fff}
body .card.call .controls .round.has-dot::after{top:0;right:calc(50% - 30px)}
body .card.call .controls .round:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:14px}
body .card.call #muteBtn{grid-column:1;grid-row:1}
body .card.call #chatBtn{grid-column:2;grid-row:1}
body .card.call #friendBtn{grid-column:3;grid-row:1}
body .card.call #gameBtn{grid-column:4;grid-row:1}
body .card.call #endBtn{grid-column:1 / 3;grid-row:2;width:100%;min-height:56px;border:0;border-radius:16px;font-size:1.0625rem;font-weight:700}
body .card.call #nextBtn{grid-column:3 / 5;grid-row:2;width:100%;min-height:56px;border:0;border-radius:16px;font-size:1.0625rem;font-weight:700}

/* ---- chat or games open: the person shrinks to a slim row and the panel takes the room ---- */
body .card.call.chat-open .voices,body .card.call.games-open .voices{order:4;flex:none;flex-direction:row;justify-content:flex-start;align-items:center;gap:0;padding:8px 0 10px}
body .card.call.chat-open #vYou,body .card.call.games-open #vYou,body .card.call.chat-open .prompt,body .card.call.games-open .prompt{display:none}
body .card.call.chat-open #vThem,body .card.call.games-open #vThem{--av:44px;flex:1;display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"face name" "face state";column-gap:12px;row-gap:0;align-items:center;justify-items:start;text-align:left}
body .card.call.chat-open #vThem,body .card.call.games-open #vThem{align-content:center}
body .card.call.chat-open #vThem small:empty,body .card.call.games-open #vThem small:empty{display:none}
body .card.call.chat-open #vThem .face,body .card.call.games-open #vThem .face{grid-area:face;border-width:2px;width:var(--av);height:var(--av)}      /* both sides together: call-compact.css also sets a width here, and used to leave a 38px-wide, 44px-tall oval */
body .card.call.chat-open #vThem h3,body .card.call.games-open #vThem h3{grid-area:name;margin:0;font-size:1rem;font-weight:700;text-align:left}
body .card.call.chat-open #vThem small,body .card.call.games-open #vThem small{grid-area:state;min-height:0;font-size:.75rem;text-align:left}
body .card.call.chat-open #vThem .wave,body .card.call.games-open #vThem .wave{display:none}
body .card.call .chat{order:5;flex:1 1 auto;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;display:flex;flex-direction:column;gap:10px}
body .card.call .chat .msgs{flex:1;min-height:0;max-height:none;padding:4px 0}
body .card.call .chat .hint{display:none}
body .card.call .composer{display:flex;gap:8px;padding-bottom:6px}
body .card.call .composer input{flex:1;min-width:0;min-height:48px;padding:8px 16px;border:1px solid var(--hair);border-radius:24px;background:var(--soft);font-size:16px}
body .card.call .composer input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
body .card.call .composer .btn{min-height:48px;padding:0 20px;border:0;border-radius:24px}
body .card.call .games{order:5;flex:1 1 auto;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;overflow:auto}

/* ---- a shorter phone (an iPhone SE or 8, a small Android): the middle gets every spare pixel; the least important things step aside ---- */
@media (max-height:700px){
  body .card.call{padding-top:calc(env(safe-area-inset-top,0px) + 54px)}
  body .card.call .voices{gap:8px}
  body .card.call #vThem{--av:clamp(84px,17vh,112px);gap:6px}
  body .card.call #vThem h3{margin-top:4px;font-size:1.25rem}
  body .card.call #vThem .wave{height:22px}
  body .card.call #vYou{display:none}                 /* the Mute button turns red and says Unmute, so nothing is lost */
  body .card.call .controls .round .ri{width:52px;height:52px}
  body .card.call #endBtn,body .card.call #nextBtn{min-height:52px}
  body .card.call .prompt{padding:10px 10px 10px 14px}
}
@media (max-height:620px){
  body .card.call .prompt{display:none}
  body .card.call #vThem{--av:clamp(72px,16vh,96px)}
}

/* ============================================================================
   Ringing: an incoming call, a call you are placing, a reconnect (all one screen)
   Full screen like a calling app: the caller's own avatar, large, with soft rings pulsing around it; their name; one line of
   context; then two round buttons with labels, Decline on the left and Answer on the right. Placing a call shows only Cancel.
   ============================================================================ */
body #ringOverlay{place-items:stretch;padding:0;background:var(--card)}
body #ringOverlay .modal{width:100%;max-width:none;height:100%;max-height:none;margin:0;display:flex;flex-direction:column;align-items:center;gap:0;overflow:hidden;border:0;border-radius:0;box-shadow:none;text-align:center;
  padding:calc(env(safe-area-inset-top,0px) + clamp(40px,11vh,110px)) 28px calc(env(safe-area-inset-bottom,0px) + 28px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 16%,var(--card)) 0,var(--card) 62%)}
body #ringOverlay .modal::before{display:none}
body #ringOverlay #ringFace{display:none}
body #ringOverlay #ringAvatar{position:relative;flex:none;display:grid;place-items:center;width:clamp(120px,19vh,160px);aspect-ratio:1;border:3px solid #0B0B14;border-radius:50%;background:var(--soft);font-size:clamp(3.6rem,10vh,5rem);line-height:1}
body #ringOverlay #ringAvatar::before,body #ringOverlay #ringAvatar::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--brand);opacity:.28;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  body #ringOverlay #ringAvatar::before,body #ringOverlay #ringAvatar::after{opacity:0;animation:ringPulse 2.4s ease-out infinite}
  body #ringOverlay #ringAvatar::after{animation-delay:1.2s}
  @keyframes ringPulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.7);opacity:0}}
}
body #ringOverlay #ringTitle{margin:30px 0 8px;font-size:1.75rem;font-weight:800;line-height:1.2;overflow-wrap:anywhere}
body #ringOverlay #ringSub{margin:0;font-size:1rem;line-height:1.45;color:var(--muted)}
body #ringOverlay #ringErr{margin:10px 0 0;font-size:.875rem;line-height:1.4;color:var(--danger-ink)}
body #ringOverlay #ringErr:empty{display:none}
body #ringOverlay .actions{margin-top:auto;width:100%;display:flex;flex-direction:row-reverse;justify-content:center;align-items:flex-start;gap:clamp(48px,18vw,84px);padding-bottom:4px}
body #ringOverlay .ring-btn{display:flex;flex-direction:column;align-items:center;gap:10px;width:auto;min-width:76px;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink);font-weight:600}
body #ringOverlay .ring-btn .ri{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;color:#fff;transition:transform .1s}
body #ringOverlay .ring-btn .ri svg{width:30px;height:30px}
body #ringOverlay .ring-btn .rl{font-size:.9375rem;font-weight:600;line-height:1.2}
body #ringOverlay #ringYes .ri{background:var(--ok)}
body #ringOverlay #ringNo .ri{background:var(--danger)}
body #ringOverlay #ringNo .ri svg{transform:rotate(135deg)}      /* the handset turned over: hang up */
body #ringOverlay .ring-btn:active .ri{transform:scale(.94)}
body #ringOverlay .ring-btn:focus-visible{outline:3px solid var(--brand);outline-offset:4px;border-radius:16px}
body #ringOverlay #ringPause{display:block;margin:22px auto 0;min-height:44px;padding:0 14px;border:0;background:none;font-size:.875rem;font-weight:600;color:var(--muted);text-decoration:underline}
body #ringOverlay #ringPause.strong{border:1px solid var(--hair);background:var(--soft);border-radius:999px;color:var(--ink);text-decoration:none}