/* =====================================================================
   call-player.css — the recorded call, as a stack of small glass tiles.

   Loaded after styles.css. The stack reads top down, like a chat: the
   call pill (play, who is calling whom, the clock and the seek bar);
   the latest lines of the call as bubbles, Zara on the left and Raj on
   the right; and a small toggle that pops up for a few seconds when Raj
   confirms the promise or the payment claim. Every tile is its own frosted
   pane, so the shop footage shows between them.

   Voice colour stays encoded: haldi = Zara, periwinkle = the customer,
   green = what got booked. Only the tape moves anything.

   ===================================================================== */

.tv-player {
  --zara: #edb751;
  --cust: #b9bef2;
  --booked: #5fd39b;
  --ink-on: rgba(255, 255, 255, 0.95);
  --ink-soft: rgba(255, 250, 242, 0.74);
  --feed-h: 12.5rem;
  --bubble-w: min(100%, 22.5rem);
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 27rem;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  color: var(--ink-on);
  text-shadow: none;
}

/* ---------- the pane: a faint white fill over a heavy blur, with a
   hairline that catches light along the top edge ---------- */

.tv-line,
.tv-stage {
  position: relative;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)), rgba(20, 16, 12, 0.16);
  -webkit-backdrop-filter: blur(48px) saturate(150%);
  backdrop-filter: blur(48px) saturate(150%);
  box-shadow: 0 18px 40px -26px rgba(15, 12, 9, 0.6);
}

.tv-line::before,
.tv-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- the bubbles: whole lines only, newest at the foot. The
   script picks as many as fit, so nothing is cut by the edge; the
   oldest of three is dimmed. The window carries no mask, so each
   bubble still blurs the footage behind it. ---------- */

.tv-feed {
  position: relative;
  height: var(--feed-h);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* a chat: the newest line sits at the foot */
  gap: 0.5rem;
  overflow: hidden;
}

.tv-line {
  flex: none;
  width: var(--bubble-w);
  display: grid;
  gap: 0.3rem;
  padding: 0.65rem 0.9rem 0.7rem;
  cursor: pointer;
  transition: opacity 0.55s ease;
}

.tv-line[hidden] { display: none; }

.tv-agent { align-self: flex-start; transform-origin: 0 100%; }
.tv-customer { align-self: flex-end; transform-origin: 100% 100%; }
/* said away from the phone, to someone in the shop */
.tv-aside .tv-text { font-style: italic; opacity: 0.72; }

/* lines dim with age: the one before the newest is softer, the third
   back is a ghost fading toward the top, and the fourth is gone */
.tv-line.is-age1 { opacity: 0.5; }
.tv-line.is-age2 {
  opacity: 0.14;
  -webkit-mask-image: linear-gradient(to top, #000 40%, transparent);
  mask-image: linear-gradient(to top, #000 40%, transparent);
}

/* the line leaving the top, lifted out of the flow while it fades */
.tv-line.is-leaving {
  position: absolute;
  pointer-events: none;
}
.tv-agent.is-leaving { left: 0; }
.tv-customer.is-leaving { right: 0; }

.tv-line.is-future { opacity: 0.5; }

.tv-line .tv-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.tv-face {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  color: #1f2238;
  background: var(--zara);
}

.tv-customer .tv-face { background: var(--cust); }

/* the face rings while its speaker holds the line */
.tv-line.is-now .tv-face { box-shadow: 0 0 0 3px rgba(242, 176, 53, 0.3); }
.tv-customer.is-now .tv-face { box-shadow: 0 0 0 3px rgba(185, 190, 242, 0.32); }

.tv-who {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
}

.tv-lang {
  font-size: 0.72rem;
  color: var(--ink-soft);
}

/* kept for the tape's semantics; the clock lives in the pill */
.tv-mark { display: none; }

.tv-text {
  font-family: "Hanken Grotesk", "Noto Sans Devanagari", sans-serif;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-on);
}

/* word gates: spoken = lit; the current word takes the speaker's colour */
.tvw {
  display: inline;
  font-weight: inherit;
  font-style: inherit;
  opacity: 0.42;
  transition: opacity 0.14s ease;
}

.tvw.on { opacity: 1; }
.tvw.cur { color: var(--zara); }
.tv-customer .tvw.cur { color: var(--cust); }

/* ---------- the outcomes: the moment Raj confirms an item, a small
   toggle pops up in the pill where "who holds the line" sits, flicks
   on in booked green, and gives the line back a few seconds later. It
   takes no room of its own and never covers the transcript. ---------- */

.tv-outcome {
  position: relative;
  grid-column: 2 / -1;
  grid-row: 2;
  min-width: 0;
  pointer-events: none;
}

.tv-outcome-row {
  position: absolute;
  top: 50%;
  left: -0.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  max-width: calc(100% + 0.3rem);
  padding: 0.18rem 0.6rem 0.18rem 0.25rem;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: nowrap;
  background: rgba(95, 211, 155, 0.14);
  box-shadow: inset 0 0 0 1px rgba(95, 211, 155, 0.32);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) scale(0.85);
  transform-origin: 0 50%;
  transition: opacity 0.25s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.tv-outcome-row.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
  transition: opacity 0.2s ease, transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1), visibility 0s;
}

/* the line about who is speaking steps aside while a toggle is up */
.tv-dock { transition: opacity 0.2s ease; }
.tv-player.has-note .tv-dock { opacity: 0; }

.tv-switch {
  position: relative;
  flex: none;
  width: 1.5rem;
  height: 0.875rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  transition: background-color 0.35s ease;
}

.tv-switch::after {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 12, 9, 0.35);
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* the switch flicks on a beat after the toggle lands */
.tv-outcome-row.is-shown .tv-switch { background: var(--booked); transition-delay: 0.3s; }
.tv-outcome-row.is-shown .tv-switch::after { transform: translateX(0.625rem); transition-delay: 0.3s; }

.tv-outcome-tag {
  flex: none;
  font-weight: 500;
  color: var(--ink-soft);
}

.tv-outcome-row strong {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: #fff;
}

/* ---------- the pill: play, who is calling whom, the clock, and the
   seek bar along its foot ---------- */

.tv-stage {
  --play: 2.7rem;
  display: grid;
  grid-template-columns: var(--play) minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 0.8rem;
  row-gap: 0.12rem;
  padding: 0.7rem 0.95rem 0.45rem 0.7rem;
  border-radius: 22px;
}

.tv-call { display: contents; }

.tv-status {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  min-width: 0;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tv-call-for,
.tv-dock {
  grid-column: 2 / -1;
  grid-row: 2;
  align-self: start;
  min-width: 0;
  margin: 0;
  max-width: none;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* once the tape has started, the subtitle gives way to who holds the line */
.tv-dock { display: none; align-items: center; gap: 0.45rem; }
.tv-player.is-started .tv-dock { display: flex; }
.tv-player.is-started .tv-call-for { display: none; }

.tv-dock-tip {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tv-player.is-speaking .tv-dock-tip { color: var(--zara); }
.tv-player.is-customer .tv-dock-tip { color: var(--cust); }

/* three bars that move only while someone is speaking */
.tv-eq {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 0.8rem;
  flex: none;
}

.tv-eq i {
  width: 3px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.8;
}

.tv-player.is-playing.is-speaking .tv-eq { color: var(--zara); }
.tv-player.is-playing.is-customer .tv-eq { color: var(--cust); }
.tv-player.is-playing.is-speaking .tv-eq i { animation: tv-eq 0.9s ease-in-out infinite; }
.tv-player.is-playing.is-speaking .tv-eq i:nth-child(2) { animation-delay: -0.3s; }
.tv-player.is-playing.is-speaking .tv-eq i:nth-child(3) { animation-delay: -0.6s; }

@keyframes tv-eq {
  0%, 100% { height: 3px; }
  50% { height: 0.8rem; }
}

.tv-bar-time {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  font-size: 0.76rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
}

.tv-play {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  display: grid;
  place-items: center;
  width: var(--play);
  height: var(--play);
  border: 0;
  border-radius: 50%;
  color: #1f2238;
  background: var(--zara);
  box-shadow: 0 0 0 4px rgba(242, 176, 53, 0.16), 0 8px 18px -8px rgba(242, 176, 53, 0.7);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.tv-play svg {
  width: 18px;
  height: 18px;
  margin-left: 2px;
  fill: currentColor;
}

.tv-play:hover {
  transform: scale(1.05);
  background: #f7c35e;
}

.tv-play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* playing: the same button pauses, so it shows the pause glyph */
.tv-player.is-playing .tv-play svg { display: none; }
.tv-player.is-playing .tv-play::before,
.tv-player.is-playing .tv-play::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 4px;
  height: 14px;
  margin-top: -7px;
  border-radius: 2px;
  background: currentColor;
}
.tv-player.is-playing .tv-play::before { left: calc(50% - 6px); }
.tv-player.is-playing .tv-play::after { left: calc(50% + 2px); }

/* the seek bar runs the full width of the pill's foot */
.tv-bar {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 3;
  height: 18px;
  margin-top: 0.35rem;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.tv-bar::before,
.tv-bar-pass {
  content: "";
  position: absolute;
  top: 7.5px;
  left: 0;
  height: 3px;
  border-radius: 99px;
}

.tv-bar::before {
  right: 0;
  background: rgba(255, 255, 255, 0.2);
}

.tv-bar-pass {
  width: 0;
  background: var(--zara);
}

.tv-bar-tip {
  position: absolute;
  top: 3.5px;
  left: 0;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(242, 176, 53, 0.3);
  transition: box-shadow 0.2s ease;
}

.tv-bar.is-drag .tv-bar-tip,
.tv-bar:focus-visible .tv-bar-tip { box-shadow: 0 0 0 5px rgba(242, 176, 53, 0.42); }

.tv-bar:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- phone: the stack takes the full width ---------- */

@media (max-width: 760px) {
  .tv-player { --feed-h: 11.5rem; --bubble-w: 88%; max-width: none; }
  .tv-text { font-size: 0.9rem; }
}

@media (max-width: 380px) {
  .tv-outcome-row { font-size: 0.72rem; gap: 0.32rem; }
}

/* ---------- reduced motion: nothing moves on its own ---------- */

@media (prefers-reduced-motion: reduce) {
  .tvw,
  .tv-line,
  .tv-play,
  .tv-bar-tip,
  .tv-switch,
  .tv-switch::after,
  .tv-outcome-row,
  .tv-dock {
    transition: none !important;
  }
  .tv-player.is-playing.is-speaking .tv-eq i { animation: none; height: 0.55rem; }
}