/* Floating transcript preview over the hero photo.
   Geometry comes straight from the approved artboard: the card sits at
   left 47.92% / top 65.11% / width 63.4% of the 601×599 photo frame and keeps
   the 381×181 ratio of the mock's card. Those numbers are what keep it clear of
   every face while staying flush with the photo's lower edge. */
.transcript-float {
  position:absolute;
  left:47.92%;
  top:65.11%;
  width:63.4%;
  aspect-ratio:381 / 181;
  display:flex;
  flex-direction:column;
  padding:14px 16px 15px;
  background:#fff;
  border:1px solid #e3e9ec;
  border-radius:13px;
  box-shadow:0 16px 38px rgba(12,33,42,.15);
  overflow:hidden;
  color:inherit;
  text-decoration:none;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease)
}

.transcript-float:hover {
  transform:translateY(-2px);
  box-shadow:0 22px 46px rgba(12,33,42,.2)
}

.transcript-float:focus-visible {
  outline:3px solid #6ac9bb; outline-offset:3px
}

.transcript-float-head {
  display:flex; align-items:center; gap:9px;
  padding-bottom:10px; border-bottom:1px solid var(--line);
  font-size:12.5px; line-height:1.2
}

.transcript-float-head strong {
  font-weight:800; color:var(--ink); font-size:12.5px; letter-spacing:-.01em
}

.float-badge {
  width:29px; height:29px; border-radius:8px; flex:none;
  background:#e9f7f3; color:var(--teal); display:grid; place-items:center
}

.float-badge .cs-icon {
  width:15px; height:15px
}

.float-meta {
  margin-left:auto; color:#8397a7; font-size:10.5px; white-space:nowrap
}

.float-line {
  display:grid; grid-template-columns:36px 70px 1fr; gap:7px; align-items:start;
  padding:8px 0; border-bottom:1px solid var(--line);
  font-size:11px; line-height:1.5; color:#607485
}

.float-line:last-child {
  border-bottom:0; padding-bottom:0
}

.float-line .speaker-a,.float-line .speaker-b {
  justify-self:start; border-radius:5px; padding:2px 6px;
  font-size:10px; font-weight:700; line-height:1.4; white-space:nowrap
}

.float-line .speaker-a {
  color:#2f6fd0; background:#eef4fd
}

.float-line .speaker-b {
  color:#177a68; background:#e9f7f3
}

.transcript-snippet {
  border:1px solid #e9eef1; border-radius:9px; overflow:hidden; padding:6px 10px
}

.transcript-row {
  display:grid; grid-template-columns:37px 80px 1fr; gap:9px; align-items:start; font-size:12px; line-height:1.6; padding:12px 7px; border-bottom:1px solid #eef2f4
}

.transcript-row:last-child {
  border:0
}

.transcript-row.active {
  background:#edf8f6; border-radius:7px
}

.stamp {
  color:#8397a7; font-size:11px
}

@media(max-width:1344px) {
  /* The artboard hangs the card past the photo's right edge; below the width the
     artboard was drawn at, that overflow would push the page sideways. */
  .transcript-float {
    left:auto; right:0
  }
}

@media(max-width:1150px) {
  /* Too narrow for a readable overlay: turn the card into a caption under a photo
     cropped above its baked-in twin. */
  .transcript-float {
    position:static; width:auto; aspect-ratio:auto; margin-top:14px;
    left:auto; top:auto; right:auto;
    box-shadow:0 12px 30px rgba(23,59,66,.14)
  }
}

@media(max-width:780px) {
  .transcript-float {
    padding:16px 18px
  }
  .float-line {
    grid-template-columns:34px 66px 1fr; padding:11px 0; font-size:11.5px
  }
  .transcript-float-head strong {
    font-size:13px
  }
}