/* ==========================================================================
   Testimonial page — hero chat card
   Shell (720px / 30px radius / gradient header) is Figma node 9689:6280,
   unchanged. The message area inside follows the Testimonials-6 playback
   pattern: date chip, typing indicator, grouped bubbles, delivery ticks
   and reaction pills — all restyled to the Figma palette.
   Load AFTER testimonial.css, BEFORE testimonial-responsive.css.
   ========================================================================== */

/* --- live chat card ----------------------------------------------------- */

.tst-chat {
  width: 720px;
  flex: 0 0 auto;
  background: var(--tst-white);
  border: 1px solid var(--tst-light-grey);
  border-radius: 30px;
  overflow: hidden;
}

.tst-chat__head {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 18px 26px 18px 18px;
  background: linear-gradient(0deg, #3b82f6 0%, #2563eb 100%);
}

.tst-chat__id { display: flex; align-items: center; gap: 18px; flex: 1 1 0; min-width: 0; }

.tst-chat__avatar {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0061ff 0%, #003080 50%, #000 100%);
  font-family: var(--tst-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--tst-white);
}

.tst-chat__name {
  font-family: var(--tst-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.21;
  color: var(--tst-white);
}
.tst-chat__role {
  margin-top: 8px;
  font-family: var(--tst-body);
  font-size: 14px;
  line-height: 1.21;
  color: #bed6ff;
}

.tst-chat__nav { display: flex; align-items: center; gap: 12px; }

/* Both arrow states come from the comp: the direction you can still travel is
   the filled white pill with the blue glyph, the one you cannot is the pale
   outline. Which button wears which is decided by position in the run, so the
   glyph colour rides on `color` and the button flips between the two. */
.tst-chat__nav-btn {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 0.793px solid #bed6ff;
  background: transparent;
  color: #bed6ff;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
}
.tst-chat__nav-btn svg { width: 14.276px; height: 14.276px; display: block; fill: currentColor; }
/* Figma exports one arrow glyph and flips it for "next" (node 9689:6291). */
.tst-chat__nav-btn--next svg { transform: rotate(180deg); }
.tst-chat__nav-btn.is-active {
  background: var(--tst-white);
  border-color: var(--tst-white);
  color: #3b82f6;
}
.tst-chat__nav-btn:hover:not(:disabled) { opacity: .82; }
.tst-chat__nav-btn:disabled { cursor: default; }

/* The card shell keeps the comp's 626px window; the message area inside it is
   a real scroll container so the Testimonials-6 playback can stream into it. */
.tst-chat__viewport {
  position: relative;
  height: 626px;
  overflow: hidden;
}

.tst-chat__body {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 36px;
  scrollbar-width: thin;
  scrollbar-color: var(--tst-light-grey) transparent;
}
.tst-chat__body::-webkit-scrollbar { width: 5px; }
.tst-chat__body::-webkit-scrollbar-track { background: transparent; }
.tst-chat__body::-webkit-scrollbar-thumb { background: var(--tst-light-grey); border-radius: 10px; }
/* Column flex items default to flex-shrink:1, which squashes the transcript to
   the card height instead of letting it overflow and scroll. */
.tst-chat__body > * { flex: 0 0 auto; }

.tst-chat__row {
  display: flex;
  flex-direction: column;
  max-width: 420px;
  margin-top: 10px;
}
.tst-chat__row--in  { align-self: flex-start; align-items: flex-start; }
.tst-chat__row--out { align-self: flex-end;   align-items: flex-end; }
/* A new speaker group gets the comp's 18px gap; the transcript opens flush
   against the top of the scroll area. */
.tst-chat__row.is-start { margin-top: 18px; }
/* rows and typing bubbles are both divs, so this flattens whichever one
   currently opens the transcript */
.tst-chat__body > div:first-of-type { margin-top: 0; }

.tst-chat__row.is-new {
  opacity: 0;
  transform: translateY(8px);
  animation: tst-msg-in .4s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes tst-msg-in { to { opacity: 1; transform: translateY(0); } }

.tst-chat__sender {
  margin-bottom: 8px;
  font-family: var(--tst-body);
  font-size: 12px;
  line-height: 24px;
  color: var(--tst-grey);
}

.tst-chat__bubble {
  max-width: 100%;
  padding: 8px 10px;
  font-family: var(--tst-body);
  font-size: 16px;
  line-height: 24px;
}
.tst-chat__bubble--in {
  background: var(--tst-chat-in);
  color: var(--tst-grey);
  border-radius: 12px 12px 12px 0;
}
.tst-chat__bubble--out {
  background: var(--tst-blue-hover);
  color: var(--tst-white);
  border-radius: 12px 12px 0 12px;
}

.tst-chat__reaction {
  margin-top: -3px;
    padding: 2px 8px;
    /* border: 1px solid var(--tst-light-grey); */
    border-radius: 100px;
    background: var(--tst-white);
    /* box-shadow: 0 2px 6px rgba(30, 30, 30, .08); */
    font-size: 14px;
    line-height: 1.4;
}
.tst-chat__row.is-new .tst-chat__reaction,
.tst-chat__reaction.is-new {
  opacity: 0;
  transform: scale(.6);
  animation: tst-reaction-pop .35s cubic-bezier(.2, .9, .3, 1.3) .1s forwards;
}
@keyframes tst-reaction-pop { to { opacity: 1; transform: scale(1); } }

/* typing indicator */
.tst-chat__typing { display: flex; margin-top: 18px; }
.tst-chat__typing--in  { align-self: flex-start; }
.tst-chat__typing--out { align-self: flex-end; }
.tst-chat__typing span {
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
}
.tst-chat__typing--in span  { background: var(--tst-chat-in); border-radius: 12px 12px 12px 0; }
.tst-chat__typing--out span { background: rgba(37, 99, 235, .14); border-radius: 12px 12px 0 12px; }
.tst-chat__typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tst-grey);
  animation: tst-typing 1.1s ease-in-out infinite;
}
.tst-chat__typing--out i { background: var(--tst-blue-hover); }
.tst-chat__typing i:nth-child(2) { animation-delay: .15s; }
.tst-chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tst-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}