/* Call card — three rows, no expanded drawer.
 *   row 1  what happened, how long, who took it
 *   row 2  can I hear it, where does the record live
 *   row 3  what was said
 *
 * Colours come from the project palette rather than the source prototype's,
 * and the type scale is the source's relative sizing mapped onto the sizes
 * used elsewhere in the thread (11px meta, 12–13px body, 14px title).
 */

.cc-wrap { display: flex; gap: 8px; align-items: flex-end; margin: 10px 0; }
.cc-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cc {
  max-width: 460px; width: 100%;
  border: 1px solid #E4E7EC;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  overflow: hidden;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- row 1 — state, duration, who ---- */
.cc-r1 { display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px 0; }
.cc-glyph {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--cc-accent); color: #fff; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.cc-txt { flex: 1; min-width: 0; }
.cc-ttlrow { display: flex; align-items: center; gap: 7px; }
.cc-ttl { font-weight: 600; font-size: 14px; letter-spacing: -.015em; line-height: 1.3; color: #101828; }
.cc-dur {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 500;
  /* Echoes the glyph's state colour at a softer weight, so the badge reinforces
     the call type instead of reading as neutral chrome. */
  color: var(--cc-tint-fg, #344054);
  background: var(--cc-tint-bg, #EAECF0);
  border-radius: 5px; padding: 1px 6px;
  line-height: 1.55; letter-spacing: -.02em;
}
/* Ongoing: the badge is a clock rather than a measurement, so it carries a
   dot that says the number is still moving. The pulse is the only motion on
   the card — a clock that ticks silently reads as a stale value. */
.cc-live { display: inline-flex; align-items: center; gap: 5px; }
.cc-live-dot {
  width: 6px; height: 6px; border-radius: 999px; background: currentColor;
  animation: ccLive 1.6s ease-in-out infinite;
}
@keyframes ccLive { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .cc-live-dot { animation: none; } }

.cc-who { font-size: 12.5px; color: #667085; margin-top: 1px; }
/* Matches the timestamp in a message bubble exactly — same family, size, weight
   and ink — so a call card and a message read as the same moment in the thread.
   The duration badge above stays mono; it is a measurement, not a clock time. */
.cc-time {
  font-size: 11px; color: #98A2B3; font-weight: 500; padding-top: 3px; flex: none;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- row 2 — playback + where the record lives ---- */
.cc-r2 { padding: 10px 13px 12px; }
.cc-shell { background: #F4F5F7; border-radius: 9px; padding: 7px 11px; }
.cc-player { display: flex; align-items: center; gap: 12px; width: 100%; }
.cc-pp {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: #fff; color: #344054; border: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}
.cc-pp:hover { color: #101828; }
.cc-track { position: relative; flex: 1; height: 14px; display: flex; align-items: center; cursor: pointer; min-width: 60px; }
.cc-rail { position: absolute; left: 0; right: 0; height: 4px; border-radius: 3px; background: #DCDFE4; }
.cc-fill { position: absolute; left: 0; height: 4px; border-radius: 3px; background: #344054; }
.cc-knob {
  position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #fff;
  margin-left: -5px; box-shadow: 0 0 0 1.5px #344054, 0 1px 2px rgba(16, 24, 40, .2);
}
.cc-tc {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums; font-size: 11.5px; color: #667085; flex: none;
}
.cc-rate {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px; color: #667085; flex: none;
  background: none; border: none; padding: 0; cursor: pointer;
}
.cc-rate:hover, .cc-rate[aria-expanded="true"] { color: #101828; }
.cc-icnbtn { color: #667085; flex: none; line-height: 0; background: none; border: none; padding: 0; cursor: pointer; }
.cc-icnbtn:hover { color: #344054; }

/* The trailing controls sit closer together than the play button and the track
   need to, so the extra breathing room is added here rather than by widening
   the row's gap — which would also push the scrubber around. */
.cc-tc + .cc-icnbtn,
.cc-icnbtn + .cc-speed,
.cc-speed + .cc-icnbtn { margin-left: 2px; }

/* Missed calls have no recording — a plain rule keeps the three-row rhythm
   without implying there is audio to reach for. */
.cc-divider { height: 1px; background: #EEF0F3; }

/* ---- speed menu ---- */
.cc-speed { position: relative; flex: none; display: inline-flex; align-items: center; }
.cc-speed-menu {
  position: fixed; transform: translate(-50%, -100%);
  background: #fff; border: 1px solid #E4E7EC; border-radius: 9px; padding: 4px;
  min-width: 70px; z-index: 9; box-shadow: 0 8px 20px rgba(16, 24, 40, .14);
}
.cc-speed-menu button {
  display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11.5px; color: #344054; padding: 4px 8px; border-radius: 5px; letter-spacing: -.02em;
}
.cc-speed-menu button:hover { background: #F4F5F7; }
.cc-speed-menu button[aria-checked="true"] { color: #004CE6; font-weight: 500; }

/* ---- links under the player ---- */
.cc-below { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; }
.cc-meta {
  display: inline-flex; align-items: center; gap: 5px; color: #667085; white-space: nowrap;
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
}
.cc-meta svg { opacity: .75; }
.cc-meta:hover { color: #004CE6; }
.cc-meta:hover svg { opacity: 1; }
.cc-lines { display: flex; align-items: center; gap: 6px; margin-right: auto; min-width: 0; }
.cc-to { color: #D0D5DD; flex: none; }

/* ---- row 3 — summary ---- */
.cc-r3 { border-top: 1px solid #EEF0F3; background: #FDFDFE; }
.cc-sumhead {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 9px 13px;
  font-size: 12.5px; font-weight: 500; color: #344054;
  background: none; border: none; cursor: pointer; font-family: inherit; text-align: left;
}
.cc-sumhead:hover { background: #F9FAFB; }
.cc-spark { color: #7F56D9; line-height: 0; }
.cc-chev { margin-left: auto; color: #98A2B3; line-height: 0; transition: transform .15s ease; }
.cc-sumhead[aria-expanded="true"] .cc-chev { transform: rotate(180deg); }
.cc-sumbody { padding: 0 13px 12px; }
.cc-sum { margin: 0; font-size: 13px; color: #344054; line-height: 1.55; }
/* Three lines is the content rule; the clamp is the backstop. */
.cc-sum-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cc-topics { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cc-chip {
  font-size: 11.5px; font-weight: 500; color: #6941C6; background: #F4F3FF;
  border-radius: 999px; padding: 2.5px 9px;
}

/* Free plan — one faded line and a way to unlock. */
.cc-fade { position: relative; }
.cc-fade .cc-sum { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cc-fade:after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20px;
  background: linear-gradient(to bottom, rgba(253,253,254,0), #FDFDFE 88%);
}
.cc-unlock {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 12.5px; font-weight: 500; color: #B54708;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
}
.cc-unlock:hover { text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .cc * { transition: none !important; } }