/* iMessage-faithful audio-note player pill. */

.audio-note-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: var(--bubble-max);
}
.msg-row.out .audio-note-wrap {
  flex-direction: row-reverse;
}

.audio-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 12px;
  border-radius: var(--bubble-r);
  min-width: 0;
}
.in .audio-note {
  background: var(--bubble-in);
}
.out .audio-note {
  background: var(--accent);
}
.in.run-end .audio-note,
.in.tail .audio-note {
  border-radius: var(--bubble-r) var(--bubble-r) var(--bubble-r) var(--bubble-tail-r);
}
.out.run-end .audio-note,
.out.tail .audio-note {
  border-radius: var(--bubble-r) var(--bubble-r) var(--bubble-tail-r) var(--bubble-r);
}

.an-play {
  width: 32px;
  height: 32px;
  margin: -7px -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.an-play .icon {
  font-size: 18px;
}
.in .an-play {
  color: var(--accent);
}
.out .an-play {
  color: var(--on-accent);
}

.an-wave {
  height: 20px;
  touch-action: none;
  cursor: pointer;
  flex-shrink: 0;
  display: block;
}

.an-time {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.in .an-time {
  color: var(--text-2);
}
.out .an-time {
  color: var(--on-accent);
  opacity: 0.8;
}

/* 2× speed chip — visible only while playing */
.an-rate {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 7px;
  border-radius: 10px;
  flex-shrink: 0;
  min-width: 34px;
  min-height: 20px;
}
.in .an-rate {
  background: rgba(255, 255, 255, 0.06);
  border: var(--hairline-w) solid var(--hairline);
  color: var(--text-2);
}
.out .an-rate {
  background: rgba(43, 21, 18, 0.18);
  color: var(--on-accent);
}
.audio-note:not(.playing) .an-rate {
  display: none;
}

/* Unplayed dot (incoming only) */
.an-unplayed {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* Sending / failed states on optimistic voice notes */
.msg-row.sending .audio-note {
  opacity: 0.7;
}

.an-meta {
  align-self: flex-start;
  margin: 3px 6px 0;
  font-size: 11px;
  color: var(--text-3);
}
.msg-row.out .an-meta {
  align-self: flex-end;
}

/* Transcript reveal */
.an-transcript-toggle {
  font-size: 13px;
  color: var(--text-2);
  margin: 3px 6px 0;
  align-self: flex-start;
  min-height: 24px;
  display: flex;
  align-items: center;
}
.msg-row-block.out .an-transcript-toggle {
  align-self: flex-end;
}
.an-transcript {
  max-width: var(--bubble-max);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-2);
  margin: 4px 6px 0;
  align-self: flex-start;
}
.msg-row-block.out .an-transcript {
  align-self: flex-end;
  text-align: right;
}

/* A message block: bubble row + its under-bubble accessories */
.msg-row-block {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--run-gap);
}
.msg-row-block.run-end {
  margin-bottom: var(--group-gap);
}
.msg-row-block > .msg-row,
.msg-row-block.run-end > .msg-row {
  margin-bottom: 0;
}