/* The call page. Built for a phone held in one hand, outdoors, at night under
   a lit sign: one large target per screen, strong contrast, and nothing that
   needs scrolling to find. */

body {
  /* The sign's own glow: lighter behind the logo, falling off to the ground. */
  background:
    radial-gradient(120% 62% at 50% 22%, var(--bg-glow) 0%, rgba(23, 29, 43, 0) 68%) no-repeat,
    var(--bg);
}

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
}

/* A little of the evening behind the agent, as on the sign's own screen. It
   belongs to the whole window rather than to the column in the middle of it,
   so it has no edge to show on a wide screen. (A browser too old for :has()
   simply goes without.) */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 0;
  height: 58vh;
  background: radial-gradient(min(78vw, 520px) 72% at 50% 16%, rgba(124, 92, 168, 0.22), rgba(124, 92, 168, 0) 74%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

body:has(.app[data-state="connected"][data-view="talk"])::before {
  opacity: 1;
}

.app {
  z-index: 1;
}

/* The city at dusk along the foot of the window, as on the landing page —
   behind every screen, wide as the window rather than the column. Taken off
   the screen while a call is on: a call's own screen is kept clear, and a city
   nobody can see is not drawn (night.js rests when it is not on the screen). */
:root {
  --city: clamp(100px, 16vh, 190px);
}

.city {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: var(--city);
  pointer-events: none;
}

body:has(.app[data-state="connected"]) .city {
  display: none;
}

/* The screens that stand on the city keep their words above its towers, not
   over them: the sign on its tower is part of the picture. */
.app:not([data-state="connected"]) .screen {
  padding-bottom: max(28px, calc(var(--city) * 0.4 + env(safe-area-inset-bottom)));
}

.top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: max(18px, env(safe-area-inset-top)) 20px 0;
  text-align: center;
}

/* Before the call the logo itself is on screen, so its name is not repeated. */
.app[data-state="idle"] .brand,
.app[data-state="loading"] .brand {
  display: none;
}

/* English / Arabic: small, at the top corner (the left one, in Arabic) — and
   only before and after a call. A call's own screen is kept clear. */
.lang-switch {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  inset-inline-end: 14px;
  z-index: 2;
  min-height: 34px;
  padding: 4px 13px 5px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(18, 23, 34, 0.72);
  color: var(--muted);
  font: 500 13px/1.2 var(--font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* On the English page the switch's one Arabic word is drawn in the phone's own
   Arabic letters: a page read in English should not download a typeface for
   one word. (On the Arabic page it says "English", in the page's own.) */
.lang-switch:lang(ar) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
}

.lang-switch:hover,
.lang-switch:active {
  border-color: var(--brand-line);
  color: var(--text);
}

.lang-switch:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.app[data-state="loading"] .lang-switch,
.app[data-state="asking"] .lang-switch,
.app[data-state="ringing"] .lang-switch,
.app[data-state="connected"] .lang-switch {
  display: none;
}

.sign {
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
  padding: 7px 14px;
  border: 1px solid var(--brand-line);
  border-radius: 17px;
  background: var(--brand-soft);
  line-height: 1.25;
}

.sign-label {
  flex: none;
  color: var(--brand);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Wraps rather than being cut short: this line is how a person checks they
   are being connected about the tower they are actually looking at. */
.sign-name {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-align: start;
  text-wrap: balance;
}

/* One screen at a time, chosen by data-state on .app. */
.screen {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 24px max(28px, env(safe-area-inset-bottom));
  text-align: center;
}

.app[data-state="incoming"] .s-incoming,
.app[data-state="idle"] .s-idle,
.app[data-state="asking"] .s-asking,
.app[data-state="ringing"] .s-ringing,
.app[data-state="connected"] .s-connected,
.app[data-state="ended"] .s-ended {
  display: flex;
}

h1 {
  font-size: clamp(22px, 6.2vw, 28px);
  font-weight: 600;
  line-height: 1.18;
  text-wrap: balance;
}

h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}

.lede {
  max-width: 32ch;
  color: var(--muted);
  font-size: 16px;
  text-wrap: pretty;
}

.lede strong {
  color: var(--ink);
}

.fine {
  color: var(--muted);
  font-size: 14px;
}

.fine:empty {
  display: none;
}

/* The last line of the thank-you: warm, and quiet. */
.closer {
  max-width: 30ch;
  color: var(--note-ink);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

/* ── the mark ────────────────────────────────────────────────────────── */

.lens {
  display: block;
  flex: none;
  width: 112px;
  height: 112px;
}

.lens.hero {
  width: 120px;
  height: 120px;
  margin-bottom: 8px;
}

.lens.dim {
  width: 88px;
  height: 88px;
  opacity: 0.55;
}

.lens.mini {
  width: 30px;
  height: 30px;
}

.wordmark {
  display: block;
  width: min(280px, 74vw);
  height: auto;
  margin-bottom: 6px;
}

.lens-ring {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-bottom: 8px;
}

/* Ringing: the amber ring leaves the lens and fades, twice a beat apart. */
.lens-ring.ringing::before,
.lens-ring.ringing::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--brand);
  border-radius: 50%;
  animation: ring-out 2s ease-out infinite;
}

.lens-ring.ringing::after {
  animation-delay: 1s;
}

/* Room for the rings to travel without running into the words below. */
.lens-ring.ringing {
  margin: 30px 0 36px;
}

@keyframes ring-out {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

.lens-ring.live {
  box-shadow: 0 0 0 10px rgba(245, 176, 65, 0.06), 0 0 60px rgba(245, 176, 65, 0.16);
}

/* ── before the call ─────────────────────────────────────────────────── */

/* The button the whole page exists for. */
.call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 320px);
  min-height: 64px;
  margin: 14px 0 2px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 0 0 8px rgba(245, 176, 65, 0.12), 0 14px 40px rgba(245, 176, 65, 0.22);
  transition: transform 0.12s ease, background 0.12s ease;
}

.call-btn:hover {
  background: var(--brand-hi);
}

.call-btn:active {
  transform: scale(0.97);
  background: var(--brand-lo);
}

.call-btn svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.credit {
  margin-top: 10px;
  color: var(--faint);
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.credit b {
  color: var(--muted);
  font-weight: 600;
}

/* ── round controls: mute, end, details ──────────────────────────────── */

.controls {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
}

.ctl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 64px;
  color: var(--muted);
  font-size: 13px;
}

.round {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 50%;
  background: var(--control);
  color: #fff;
  transition: background 0.12s ease, transform 0.12s ease;
}

.round:hover {
  background: var(--control-press);
}

.round:active {
  transform: scale(0.95);
}

.round svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.round .mic-off,
.round[aria-pressed="true"] .mic-on,
.round .details-saved,
.round.saved .details-open {
  display: none;
}

/* Muted: the control lights up, so a silent microphone is never a surprise. */
.round[aria-pressed="true"] {
  background: var(--brand);
  color: var(--on-brand);
}

.round[aria-pressed="true"] .mic-off,
.round.saved .details-saved {
  display: block;
}

.round.saved {
  background: var(--go-soft);
  color: var(--go);
}

.round.saved .details-saved {
  stroke-width: 2.6;
}

.round.end {
  width: 70px;
  height: 70px;
  background: var(--stop);
}

/* The end key is the largest. The keys beside it are padded to its height, so
   all three sit on one centre line and their names on one baseline. */
.ctl .round:not(.end):not(.accept) {
  margin: 4px 0;
}

.round.end:hover {
  background: #f4707a;
}

.round.end svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  stroke: none;
  transform: rotate(135deg);
}

.s-ringing .controls {
  margin-top: 22px;
}

/* ── a call coming in ────────────────────────────────────────────────── */

/* What a phone says above the caller's name. */
.incoming-label {
  margin: 0;
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Decline on the left, Accept on the right, a thumb's reach apart: where
   every phone puts them. (In Arabic the other way round, as a phone set to
   Arabic mirrors its own screen.) */
.controls.answer {
  gap: 64px;
  margin-top: 22px;
}

.round.accept {
  width: 70px;
  height: 70px;
  background: var(--go);
  animation: accept-pulse 1.6s ease-out infinite;
}

.round.accept:hover {
  background: var(--go-press);
}

.round.accept svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  stroke: none;
}

/* The green key breathes, so the eye finds the answer before the words. */
@keyframes accept-pulse {
  0% { box-shadow: 0 0 0 0 rgba(55, 201, 139, 0.5); }
  100% { box-shadow: 0 0 0 18px rgba(55, 201, 139, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .round.accept {
    animation: none;
  }
}

/* ── on the call ─────────────────────────────────────────────────────── */

.s-connected {
  justify-content: stretch;
  gap: 0;
  padding: 0;
}

.stage {
  position: relative;
  display: flex;
  flex: 1;
  width: 100%;
  min-height: 0;
}

.talk {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 24px 8px;
}

.who-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.role {
  display: flex;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}

.role #agent-role:not(:empty)::after {
  content: "·";
  margin-inline-start: 8px;
  color: var(--faint);
}

/* The voice, drawn: bars that follow the sound on the line. */
.wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 52px;
}

.wave i {
  flex: none;
  width: 3px;
  height: 4px;
  border-radius: 2px;
  background: var(--brand);
  transition: height 0.09s linear;
}

/* What happens next, in the look of the sign's captions. */
.caption {
  display: grid;
  justify-items: start;
  gap: 7px;
  width: min(100%, 340px);
  padding: 12px 14px 13px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(18, 23, 34, 0.86);
  text-align: start;
}

.caption .tag {
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.caption p {
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: pretty;
}

.tour {
  flex: 1;
  width: 100%;
  border: 0;
  background: var(--bg);
}

.app[data-view="tour"] .talk {
  display: none;
}

/* While the cameras are up, the header gives its room to the picture. */
.app[data-state="connected"][data-view="tour"] .top {
  display: none;
}

.callbar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 16px max(22px, env(safe-area-inset-bottom));
}

/* ── the assistant's words ───────────────────────────────────────────── */

/* Under the cameras: the sentence it is saying, two lines at most. A street
   is loud, and the room on screen is what the sentence is about. */
.strip {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  width: 100%;
  min-height: 2.7em;
  margin: 0;
  padding: 9px 16px 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
}

.strip[hidden] {
  display: none;
}

/* ── answering by a tap ──────────────────────────────────────────────── */
/* Under the assistant's question, above the call's own buttons: on the call
   screen and over the cameras alike. */
.answers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 10px 14px 2px;
  background: var(--surface);
}

.answers[hidden],
.typed[hidden] {
  display: none;
}

.app[data-view="talk"] .answers {
  background: transparent;
}

.taps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.taps:empty {
  display: none;
}

.tap {
  min-height: 46px;
  max-width: 100%;
  padding: 10px 18px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--note-bg);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.tap:active {
  transform: scale(0.97);
}

.typed {
  display: flex;
  gap: 8px;
}

.typed input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  /* 16px: anything smaller and an iPhone zooms the whole page in on a tap. */
  font: inherit;
  font-size: 16px;
}

.typed input:focus {
  border-color: var(--brand);
  outline: none;
}

.typed .btn {
  min-height: 46px;
}

/* Its turn is over and it is the caller's: said in the brand's colour. */
.strip.turn {
  color: var(--brand);
}

/* What it understood the caller to say — small, under what it answered. */
.heard {
  max-width: 34ch;
  margin: 0;
  color: var(--faint);
  font-size: 13px;
}

.heard[hidden] {
  display: none;
}

.who {
  display: none;
  flex: 1;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.who-name {
  min-width: 4ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.who .tabular {
  color: var(--muted);
  font-weight: 500;
}

/* With the cameras up the bar shrinks to a strip: who, how long, three keys. */
.app[data-view="tour"] .callbar {
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* With the assistant's words above it, the bar's own top edge would be a
   second line under them. */
.app[data-view="tour"] .strip:not([hidden]) + .callbar {
  border-top: 0;
}

.app[data-view="tour"] .who {
  display: flex;
}

.app[data-view="tour"] .controls {
  gap: 10px;
}

.app[data-view="tour"] .ctl {
  min-width: 0;
}

.app[data-view="tour"] .ctl span {
  display: none;
}

.app[data-view="tour"] .round,
.app[data-view="tour"] .round.end {
  width: 46px;
  height: 46px;
  margin: 0;
}

.app[data-view="tour"] .round svg,
.app[data-view="tour"] .round.end svg {
  width: 21px;
  height: 21px;
}

/* ── afterwards ──────────────────────────────────────────────────────── */

.ended-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.ended-actions .btn {
  min-height: 50px;
  padding: 0 22px;
}

/* Back to the landing page, in this page's language: quieter than the two above. */
.home-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.home-link:hover, .home-link:focus-visible { color: var(--text); }

.saved {
  max-width: 34ch;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
}

/* ── the details sheet ───────────────────────────────────────────────── */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet-shade {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 9, 0.66);
}

.sheet-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  overflow-y: auto;
  padding: 26px 20px max(20px, env(safe-area-inset-bottom));
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: var(--surface);
  box-shadow: var(--shadow);
  animation: rise 0.22s ease-out;
}

/* The grip a sheet has on a phone. */
.sheet-card::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 2px;
  background: var(--line);
}

@keyframes rise {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.sheet-card form,
.done {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sheet-card h2 {
  font-size: 24px;
}

.sheet-card .lede {
  max-width: none;
  font-size: 16px;
}

#lead-when {
  margin-top: 10px;
}

.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sheet-actions .btn-primary {
  flex: 1;
  min-height: 52px;
  font-size: 17px;
}

.sheet-actions .btn-quiet {
  min-height: 52px;
}

.done {
  align-items: center;
  padding: 12px 0 4px;
  text-align: center;
}

.done .btn {
  align-self: stretch;
  min-height: 52px;
}

.glyph {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
}

.glyph.ok {
  background: var(--go-soft);
  color: var(--go);
}

.glyph svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── other shapes of screen ──────────────────────────────────────────── */

/* A short screen (a small phone, or one on its side): keep the keys in reach. */
@media (max-height: 640px) {
  :root {
    --city: 84px;
  }

  .lens,
  .lens.hero {
    width: 84px;
    height: 84px;
  }

  .wave {
    height: 38px;
  }

  .screen {
    gap: 10px;
  }

  .round {
    width: 54px;
    height: 54px;
  }

  .round.end,
  .round.accept {
    width: 60px;
    height: 60px;
  }

  .ctl .round:not(.end):not(.accept) {
    margin: 3px 0;
  }

  .lens-ring.ringing {
    margin: 18px 0 22px;
  }
}

@media (min-width: 620px) {
  .sheet {
    align-items: center;
  }

  .sheet-card {
    border-bottom: 1px solid var(--line);
    border-radius: 22px;
  }

  .sheet-card::before {
    display: none;
  }

  /* On a desk the cameras deserve the width; the call itself does not. */
  .app[data-view="tour"] {
    max-width: 1120px;
  }
}

/* A phone on its side. People turn it when the cameras come up, and some
   never turn it back — so every screen has to work in a strip this shallow,
   with its one button still on screen. */
/* A phone of middling height (an iPhone 8, an SE): the ringing lens a little
   smaller, so the call's words stay above the city. */
@media (min-height: 601px) and (max-height: 720px) {
  .s-incoming .lens-ring .lens {
    width: 92px;
    height: 92px;
  }

  .s-incoming .lens-ring.ringing {
    margin: 20px 0 24px;
  }
}

@media (max-height: 600px) {
  .city {
    display: none;
  }

  .app:not([data-state="connected"]) .screen {
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .city {
    display: none;
  }

  .app:not([data-state="connected"]) .screen {
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }

  .app {
    max-width: 900px;
  }

  .top {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 14px;
    min-height: 0;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .screen {
    gap: 8px;
    padding: 8px max(24px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  }

  h2 {
    font-size: 22px;
  }

  /* Before the call: the logo on one side, the button on the other. */
  .app[data-state="idle"] .s-idle {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    grid-template-rows: repeat(5, auto);
    align-content: center;
    justify-items: center;
    gap: 8px 32px;
  }

  .s-idle .lens.hero {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: end;
    width: 92px;
    height: 92px;
    margin: 0;
  }

  .s-idle .wordmark {
    grid-column: 1;
    grid-row: 4 / span 2;
    align-self: start;
    width: min(230px, 100%);
    margin: 0;
  }

  .s-idle h1 {
    grid-column: 2;
    grid-row: 1;
  }

  .s-idle .lede {
    display: none;
  }

  .s-idle .call-btn {
    grid-column: 2;
    grid-row: 2;
    min-height: 56px;
    margin: 6px 0 0;
  }

  .s-idle .fine {
    grid-column: 2;
    grid-row: 3;
  }

  .s-idle #callback-btn {
    grid-column: 2;
    grid-row: 4;
    min-height: 36px;
  }

  .s-idle .credit {
    grid-column: 2;
    grid-row: 5;
    margin-top: 0;
  }

  /* Waiting, ringing, ended: everything smaller, nothing dropped but the
     second sentence. */
  .lens-ring .lens,
  .lens.dim {
    width: 64px;
    height: 64px;
  }

  .lens-ring.ringing {
    margin: 12px 0 14px;
  }

  .s-ringing .lede,
  .s-asking .lede,
  .s-incoming .lede,
  .s-incoming .fine {
    display: none;
  }

  .s-ringing .controls,
  .controls.answer {
    margin-top: 4px;
  }

  /* On the call: the agent beside the sound, and the keys under both. */
  .talk {
    display: grid;
    grid-template-columns: auto minmax(0, 320px);
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 4px 24px;
    padding: 4px 24px 0;
  }

  .talk .lens-ring {
    grid-row: 1 / span 2;
    margin: 0;
  }

  .talk .lens {
    width: 76px;
    height: 76px;
  }

  .talk .who-block {
    align-items: flex-start;
  }

  .talk .wave {
    justify-content: flex-start;
    height: 34px;
  }

  .talk #audio-state {
    grid-column: 1 / -1;
    text-align: center;
  }

  .talk .caption {
    display: none;
  }

  .callbar {
    padding: 6px 16px max(10px, env(safe-area-inset-bottom));
  }

  .controls {
    align-items: center;
    gap: 22px;
  }

  .ctl {
    min-width: 0;
  }

  .callbar .ctl span {
    display: none;
  }

  .round {
    width: 50px;
    height: 50px;
  }

  .round.end,
  .round.accept {
    width: 56px;
    height: 56px;
  }

  .ctl .round:not(.end):not(.accept) {
    margin: 0;
  }

  .app[data-view="tour"] .callbar {
    padding: 6px max(14px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }

  .app[data-view="tour"] .round,
  .app[data-view="tour"] .round.end {
    width: 42px;
    height: 42px;
  }
}

/* ── Arabic ───────────────────────────────────────────────────────────────
   The page turns round by itself (dir="rtl", and every rule above says start
   and end, not left and right). What is left is the size: the brand's small
   capitals are tiny, and Arabic has no capitals to stand tall with. */
html:lang(ar) .sign-label,
html:lang(ar) .caption .tag {
  font-size: 13px;
}

html:lang(ar) .incoming-label {
  font-size: 15px;
}

/* A phone number reads left to right in Arabic too — set against the
   right-hand edge, where the field's label is. */
html[dir="rtl"] #lead-mobile {
  text-align: right;
}