/* SIGNAL — the call surface.
 *
 * The same house as the room: radius zero, hairline rules, gold a mark and
 * never a fill. A call is a sheet laid over the room, not a new app — the
 * person's name is set in the serif the room uses for a title, the state of
 * the line in its italic, and the four actions are furniture.
 *
 * The far picture BLEEDS FROM THE TOP (object-position 50% 0%), so a face is
 * never cut at the crown. The near picture is a plate laid on the sheet, and
 * it is the one thing here that casts: --shadow-plate, distance and nothing
 * else. Nothing animates but opacity, and only in answer to something done.
 */

/* ── the line: somebody is calling ──────────────────────────────────────── */
#call-line{position:fixed;left:50%;top:max(14px,env(safe-area-inset-top));z-index:60;
  transform:translateX(-50%);width:min(34rem,calc(100% - 28px));
  background:var(--paper);border:1px solid var(--rule);border-left:1px solid var(--gold);
  padding:18px 22px;box-shadow:var(--shadow-sheet,0 40px 90px -40px rgba(0,0,0,.3));
  opacity:1;transition:opacity var(--base) var(--ease)}
#call-line p{margin:0 0 14px;font-family:var(--serif);font-size:20px;line-height:1.4;color:var(--ink)}
.call-line-acts{display:flex;align-items:center;gap:22px}
.call-line-acts .go{width:auto;padding:12px 22px;min-height:44px}

/* ── the call itself ──────────────────────────────────────────────────── */
#call{position:fixed;inset:0;z-index:50;background:var(--paper);color:var(--ink);
  display:grid;grid-template-rows:auto 1fr auto;
  padding:max(22px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right))
          max(22px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))}
#call-far{grid-row:1 / 4;grid-column:1;width:100%;height:100%;object-fit:cover;object-position:50% 0%;
  background:var(--paper-2);opacity:0;transition:opacity var(--slow) var(--ease)}
#call[data-kind="film"][data-standing="connected"] #call-far{opacity:1}
#call[data-kind="voice"] #call-far{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.call-head{grid-row:1;grid-column:1;position:relative;z-index:1;max-width:40rem}
.call-head .kicker{margin:0 0 8px}
.call-head h3{font-family:var(--serif);font-weight:300;font-size:clamp(34px,6cqi,56px);line-height:1.04;
  letter-spacing:-.018em;margin:0 0 8px}
.call-said{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.5;color:var(--text-body);
  margin:0;max-width:52ch;min-height:1.5em}

/* Over a picture the words sit on the paper's own colour, so they are read
   against the page and never against somebody's face. */
#call[data-kind="film"][data-standing="connected"] .call-head{background:var(--paper);
  padding:14px 18px;border:1px solid var(--rule);justify-self:start}

#call-near{grid-row:2;grid-column:1;justify-self:end;align-self:end;z-index:1;
  width:clamp(96px,22cqi,200px);aspect-ratio:3 / 4;object-fit:cover;object-position:50% 0%;
  background:var(--paper-2);border:1px solid var(--rule);
  box-shadow:var(--shadow-plate,0 18px 34px -18px rgba(0,0,0,.34));transform:scaleX(-1)}
#call-near[data-facing="environment"]{transform:none}

.call-acts{grid-row:3;grid-column:1;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;
  padding-top:18px;border-top:1px solid var(--rule);background:var(--paper)}
.call-acts .quiet{min-height:44px}
.call-acts .go{width:auto;margin-left:auto;padding:12px 22px;min-height:44px}

/* the room header carries the two ways to begin one */
.call-room-acts{display:flex;gap:22px;margin-top:10px}
.call-room-acts .quiet{min-height:44px}
.call-room-acts .quiet[disabled]{opacity:.42;cursor:default}

body.in-call{overflow:hidden}

@media (max-width:640px){
  .call-acts{gap:4px 18px}
  .call-acts .go{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  #call-far,#call-line{transition-duration:0ms}
}