/* =========================================================================
   Live call — RTA header strip
   A very short bar at the top of the RTA: caller name (left) · call run time
   and wall-clock (right). Acts as the HUD's top separator. Shown in-app and
   moved into the PiP popup with the rest of the RTA. All colour via --rta-*.
   ========================================================================= */

.rta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 7px 12px;
  background: var(--rta-chrome-bg);
  border-bottom: 1px solid var(--rta-rule);
}

/* Caller identity block — name on top, account · tenure beneath. */
.rta-header-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;          /* allow the name to ellipsize */
}

.rta-header-name {
  font: 700 13px/1.1 var(--rta-font-body);
  letter-spacing: -0.01em;
  color: var(--rta-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Account · tenure sub-line. Collapses to nothing until a fact is known. */
.rta-header-sub {
  font: 500 10.5px/1.1 var(--rta-font-mono);
  letter-spacing: 0.01em;
  color: var(--rta-fg3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rta-header-sub:empty { display: none; }

.rta-header-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Call run time — the live, primary counter. */
.rta-header-runtime {
  font: 600 12px/1 var(--rta-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--rta-fg2);
}

/* Wall-clock — quieter, separated by a hairline divider. */
.rta-header-clock {
  font: 500 11px/1 var(--rta-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--rta-fg3);
  padding-left: 0.6rem;
  border-left: 1px solid var(--rta-rule);
}