/* =============================================================
   BOTB watch page — caption bar (watch.css)

   A broadcast-style lower third over the Botty3D stage. Colour language
   matches the avatar demo (navy #0b1020 stage, teal bot, violet target) so
   the two read as one screen.
   ============================================================= */

#cc {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  padding: 20px clamp(16px, 4vw, 64px) clamp(18px, 3vh, 40px);
  /* Fade the stage into the bar rather than a hard edge — keeps Botty's
     shoulders visible through the top of the gradient. */
  background: linear-gradient(to top,
              rgba(5, 9, 20, .96) 0%,
              rgba(5, 9, 20, .90) 45%,
              rgba(5, 9, 20, .55) 78%,
              rgba(5, 9, 20, 0) 100%);
  pointer-events: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

#cc-lines {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(4px, .8vh, 10px);
  /* Reserve height so the avatar doesn't jump as lines accumulate. */
  min-height: clamp(84px, 17vh, 190px);
}

.cc-line {
  display: flex;
  align-items: baseline;
  gap: clamp(8px, 1.2vw, 18px);
  line-height: 1.32;
  font-size: clamp(15px, 2.05vw, 31px);
  color: #eaf2ff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .75);
  animation: cc-in .18s ease-out;
}

@keyframes cc-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* Older lines recede so the eye lands on the newest one. */
.cc-age1 { opacity: .60; }
.cc-age2 { opacity: .34; }
.cc-age3 { opacity: .18; }

.cc-who {
  flex: 0 0 auto;
  min-width: clamp(62px, 7.5vw, 118px);
  text-align: right;
  font-size: .58em;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  opacity: .92;
  /* Keep the label glued to the first line of a wrapped caption. */
  align-self: flex-start;
  padding-top: .34em;
}

.cc-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.cc-bot    .cc-who  { color: #5fe3c8; }
.cc-bot    .cc-text { color: #ecfffb; }
.cc-target .cc-who  { color: #b79dff; }
.cc-target .cc-text { color: #f2edff; }

/* An in-progress line gets a soft blinking cursor so it's obvious the caption
   is still being spoken rather than a finished sentence. */
.cc-partial .cc-text::after {
  content: "";
  display: inline-block;
  width: .07em;
  height: .92em;
  margin-left: .14em;
  vertical-align: -.10em;
  background: currentColor;
  opacity: .8;
  animation: cc-blink 1.05s steps(1) infinite;
}

@keyframes cc-blink {
  0%, 55%  { opacity: .8; }
  56%, 100% { opacity: 0; }
}

/* Status pill — bottom right, deliberately unobtrusive. */
#cc-status {
  position: absolute;
  right: clamp(16px, 4vw, 64px);
  bottom: clamp(5px, 1vh, 13px);
  font-size: clamp(9px, .95vw, 12px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6f86ad;
  pointer-events: none;
}

/* Phones / narrow booth displays: stack the speaker label above the text so a
   long caption isn't squeezed into a sliver of width. */
@media (max-width: 560px) {
  .cc-line { flex-direction: column; gap: 1px; }
  .cc-who { text-align: left; min-width: 0; padding-top: 0; }
}