body:not(.app-immersive)>main>#transcript-view { width: 100%; max-width: none; }
#transcript-view {
  --review-ink: #252b30;
  --review-muted: #62686e;
  --review-line: #e9e7e3;
  max-width: none;
  min-width: 0;
  container: debrief / inline-size;
  color: var(--review-ink);
}
#transcript-view :is(p,h2,h3,h4,blockquote,small,summary) { overflow-wrap: anywhere; }
#transcript-view .debrief-reader-heading { align-items: center; gap: 14px; margin-bottom: 24px; }
#transcript-view .debrief-reader-heading h2 {
  color: var(--review-ink);
  font-size: clamp(32px, 6cqi, 48px);
  letter-spacing: -.045em;
}
#transcript-view .debrief-reader-heading p { color: var(--review-muted); }
#transcript-view .debrief-refresh {
  flex: none;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--review-muted);
}
#transcript-view .debrief-load-status { color: var(--review-muted); font-size: 14px; }
#transcript-view .debrief-load-status:empty { display: none; }
#transcript-view .debrief-sections {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  width: min(100%, 520px);
  margin-bottom: 20px;
  border-radius: 24px;
  background: #eae9e6;
  box-shadow: none;
}
#transcript-view .debrief-sections button {
  border-radius: 20px;
  padding: 8px 5px;
  white-space: normal;
  font-size: 13px;
  color: var(--review-muted);
}
#transcript-view .debrief-sections button[aria-selected=true] { color: var(--review-ink); }
#transcript-view .debrief-sections button:disabled { color: #787773; }
#transcript-view .debrief-narrative,
#transcript-view .debrief-takeaways,
#transcript-view :is(.debrief-timeline,.debrief-conversation,.debrief-followup) {
  min-width: 0;
  padding: clamp(20px, 4.5cqi, 36px);
  border-radius: 30px;
  background: #fff;
  box-shadow: none;
}
#transcript-view .debrief-narrative { display: block; }
#transcript-view .debrief-visibility {
  color: var(--review-muted);
  font-size: 13px;
  margin: 0 0 10px;
}
#transcript-view .debrief-narrative h3 {
  color: var(--review-ink);
  font-size: clamp(25px, 4.5cqi, 34px);
  letter-spacing: -.035em;
}
#transcript-view .debrief-narrative>.ai-comment>p {
  font-size: clamp(16px, 2.6cqi, 20px);
  line-height: 1.65;
  color: #43484b;
}
#transcript-view .debrief-dashboard {
  display: grid;
  grid-template-columns: clamp(220px, 30cqi, 360px) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
#transcript-view .debrief-dashboard:empty { display: none; }
#transcript-view .debrief-skills:only-child { grid-column: 1 / -1; }
#transcript-view .debrief-skills {
  min-width: 0;
  padding: clamp(20px, 4cqi, 30px);
  border-radius: 30px;
  background: #fff;
}
#transcript-view .debrief-skills h3 { margin: 0 0 13px; font-size: 23px; letter-spacing: -.025em; }
#transcript-view .debrief-skill { border: 0; padding: 0; }
#transcript-view .debrief-skill summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  padding: 5px 0 7px;
  font-size: 13px;
  color: var(--review-ink);
}
#transcript-view .debrief-skill summary strong { font-variant-numeric: tabular-nums; text-align: right; }
#transcript-view .debrief-skill summary strong::after { content: ' ›'; color: #3b6f69; margin-left: 4px; }
#transcript-view .debrief-skill[open] summary strong::after { content: ' ⌄'; }
#transcript-view .debrief-skill-track {
  grid-column: 1 / -1;
  height: 7px;
  border-radius: 999px;
  background: #e5efed;
  overflow: hidden;
}
#transcript-view .debrief-skill-track>span {
  display: block;
  width: var(--skill-score);
  height: 100%;
  border-radius: inherit;
  background: #28796d;
}
#transcript-view .debrief-takeaways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
  margin: 16px 0;
  padding: 0;
  background: transparent;
}
#transcript-view .debrief-takeaways:empty { display: none; }
#transcript-view .debrief-feedback-section[data-feedback-kind] {
  padding: 22px;
  min-width: 0;
  border: 0;
  border-radius: 28px;
  background: #fff;
  box-shadow: none;
}
#transcript-view .debrief-takeaway-heading { display: flex; align-items: center; gap: 10px; }
#transcript-view .debrief-feedback-section .debrief-takeaway-heading h3 { margin: 0; color: var(--review-ink); font-size: 19px; }
#transcript-view .debrief-takeaway-heading .debrief-detail-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #226445;
  background: #e1f2e8;
  box-shadow: none;
}
#transcript-view [data-feedback-kind=development] .debrief-detail-icon { color: #865318; background: #fff0d8; }
#transcript-view [data-feedback-kind=action] .debrief-detail-icon { color: #215c78; background: #e1f1fa; }
#transcript-view .debrief-detail-icon svg { width: 19px; height: 19px; }
#transcript-view .debrief-feedback-section .ai-comment>p:first-of-type { font-size: 15px; color: #343b3f; }
#transcript-view .debrief-takeaway-body .ai-review-indicator { display: none; }
#transcript-view .debrief-takeaway-body .ai-comment+.ai-comment { border-top: 1px solid #30303022; }
#transcript-view details summary { color: var(--review-muted); }
#transcript-view .ai-comment details summary { color: var(--review-muted); font-size: 13px; }
#transcript-view .debrief-score-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 26px;
  min-height: 250px;
  border-radius: 30px;
  background: #fff;
  box-shadow: none;
}
#transcript-view .debrief-score-card h3 { font-size: 19px !important; }
#transcript-view .debrief-score-card>small { font-size: 12px; color: var(--review-muted); }
#transcript-view .debrief-score-ring {
  width: 144px;
  height: 144px;
  background: conic-gradient(#c7375d calc(var(--score-percent) * 1%), #f2c6d0 0);
  transform: none;
}
#transcript-view .debrief-score-ring>span { width: 124px; height: 124px; transform: none; }
#transcript-view .debrief-score-ring strong { font-size: 43px; font-variant-numeric: tabular-nums; }
#transcript-view .debrief-private-pill { font-size: 11px; color: #8f2946; }
#transcript-view .debrief-timeline ol {
  grid-template-columns: repeat(auto-fit,minmax(min(100%, 150px),1fr));
  gap: 20px;
  margin-top: 25px;
}
#transcript-view .debrief-timeline li { border: 0; border-top: 2px solid #b5d7d0; padding: 15px 0 0; }
#transcript-view .debrief-timeline li::before { display: block; inset: -6px auto auto 0; background: #28796d; }
#transcript-view .debrief-timeline li p { color: var(--review-muted); font-size: 14px !important; }
#transcript-view .debrief-timeline-heading { flex-wrap: wrap; }
#transcript-view .aligned-turn-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
#transcript-view .aligned-turn-row > * { grid-column: 1; min-width: 0; }
#transcript-view .transcript-part { background: #f5f4f2; }
#transcript-view .transcript-part.own-turn { background: #f5f4f2; border-inline-start: 2px solid #c7375d; }
#transcript-view :is(.ai-turn-review,.overlap-observation) { margin-left: 12px; background: #f5f4f2; }
#transcript-view :is(.debrief-conversation,.debrief-followup) { margin-top: 0; }
@container debrief (max-width: 370px) {
  #transcript-view .debrief-sections { grid-template-columns: repeat(2,minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  #transcript-view [role=tabpanel]:not([hidden]) { animation: none; }
}

@container debrief (max-width: 540px) {
  #transcript-view .debrief-dashboard { grid-template-columns: minmax(0, 1fr); }
}

#transcript-view .debrief-timeline li>button { background: #e5f2ee; color: #27675e; }
#transcript-view .debrief-back { color: var(--review-muted); }

@container debrief (min-width: 1160px) {
  #transcript-view .debrief-skills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    align-items: start;
    gap: 8px 24px;
  }
  #transcript-view .debrief-skills h3 { grid-column: 1 / -1; }
}