/* The Calls page (CALLS-TAB, calls.js): the person's own calls, newest first, in the bot page's pieces (.bp-),
   laid out as WhatsApp's Calls tab: a row is the person's avatar, their name over which way the call went, its
   time, and the info button at the end, with a hairline between rows from the text's start. */
/* the Apps tab's title (apps.css .apps-title), so the two list tabs' titles sit in the same place */
.calls-title { margin: 4px 4px 16px; font-size: 28px; font-weight: 650; letter-spacing: -0.015em; }
.calls-inner { padding-top: 8px; }
.calls-h { margin: 6px 4px 6px; font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }
.calls-list { display: flex; flex-direction: column; }
.calls-row { position: relative; display: flex; align-items: center; gap: 2px; }
/* the hairline between two rows, from where the text starts (the avatar's 44px, the gap and the inset) */
.calls-row + .calls-row::before {
  content: ""; position: absolute; top: 0; left: 62px; right: 0;
  height: 1px; background: var(--divider); pointer-events: none;
}
.calls-call {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 14px;
  min-height: 66px; padding: 8px 6px 8px 4px;
  border: 0; border-radius: 14px; background: transparent;
  text-align: left; color: var(--text);
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background 140ms ease-out;
}
@media (hover: hover) { .calls-call:hover { background: var(--hover); } }
.calls-call:active { transform: scale(0.985); }
.calls-row .f-avatar { width: 44px; height: 44px; font-size: 18px; }
.calls-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.calls-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.calls-n { font-weight: 450; }
/* a call the person missed reads in the page's error tone, its name alone, as WhatsApp's list marks one */
.calls-row.missed .calls-name { color: var(--err); }
.calls-way { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 14.5px; color: var(--muted); }
.calls-way .ic { flex: none; color: var(--muted); }
.calls-way .ic svg.i { width: 15px; height: 15px; }
.calls-when { flex: none; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.calls-info {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--text);
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background 140ms ease-out;
}
.calls-info svg.i { width: 23px; height: 23px; stroke-width: 1.5; }
@media (hover: hover) { .calls-info:hover { background: var(--hover); } }
.calls-info:active { transform: scale(0.94); }
.calls-sk { height: 66px; margin: 2px 0; border-radius: 14px; background: var(--hover); animation: skpulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .calls-sk { animation: none; } }
.calls-empty { margin: 32px 18px; font-size: 16px; color: var(--muted); text-align: center; text-wrap: balance; }

/* The Calls head's gift is the phone's (TOPBAR-FOLLOWUPS-2): wider, the chat list's rail stays beside this page with
 * its own head and gift, so this one steps aside and the page shows one gift, the rail's. */
@media (min-width: 761px) {
  #calls-gift, .calls-gift-spacer { display: none; }
}