.recording-caption {
  position: absolute;
  inset: auto 0 max(16px, 3%) 0;
  z-index: 2300;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-inline: clamp(18px, 2.4vw, 32px);
  /* Keep the first line in place when a longer utterance wraps. */
  min-block-size: calc(var(--caption-lines, 2) * 1.45em);
  pointer-events: none;
  color: #f5f6f7;
  font: 500 var(--caption-font-size, clamp(16px, 1.25vw, 19px))/1.45 "Microsoft YaHei", "PingFang SC", sans-serif;
  text-shadow: 0 1px 2px #10161d, 1px 0 #27323d, -1px 0 #27323d, 0 -1px #27323d;
}

.recording-caption[hidden],
.recording-caption-speaker[hidden] { display: none; }

body > .recording-caption {
  position: fixed;
  inset-block-end: clamp(16px, 3.5dvh, 32px);
}

.phone > .recording-caption {
  --caption-font-size: 15px;
  --caption-lines: 3;
  inset-block-end: calc(var(--home-height, 21px) + 8px);
  padding-inline-start: max(16px, env(safe-area-inset-left));
  padding-inline-end: max(16px, env(safe-area-inset-right));
}

.recording-caption-box {
  box-sizing: border-box;
  display: flex;
  align-items: baseline;
  gap: .55em;
  max-inline-size: min(100%, 38em);
}

.recording-caption-speaker {
  flex: none;
  color: #e0ebf3;
  font-size: .83em;
  white-space: nowrap;
}

.recording-caption-speaker::after { content: " ·"; }

.recording-caption-text {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  text-align: start;
}

@media (max-width: 580px) {
  .recording-caption { --caption-lines: 3; }
}

@media (max-width: 360px) {
  .recording-caption, .phone > .recording-caption { --caption-lines: 4; }
}

.settings-transcript {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-block-start: 9px;
  font-size: 13px;
}

.settings-transcript input { margin: 0; }