/* =====================================================================
   Speedy card (the last tile of the features bento in index.html): the
   copy column and the animated chat that speedy-showcase.js plays. The
   chat copies the real widget: Speedy's bubble on the right (start) with
   a grey context line over a bold figure, the user's on the left.
   Tokens come from .cpl-body.
   ===================================================================== */

/* ---------- card layout ------------------------------------------- */

.cpl-spd-card { gap: var(--space-lg); }
.cpl-spd-card__text { order: 1; }
.cpl-spd-card .cpl-bento-card__visual { margin-block-start: 0; }

/* Half the row beside the pool card (or the full row on an odd count): text beside
   the chat, with a shorter log so the card stays as tall as its row-mate. Below 1200px
   half a row leaves the chat too narrow, so the text stays above it. */
@media (min-width: 1200px) {
  .cpl-spd-card.cpl-bento-card--half,
  .cpl-spd-card.cpl-bento-card--full {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-lg);
  }
  .cpl-spd-card.cpl-bento-card--full { gap: var(--space-2xl); padding: var(--space-xl); }
}
@media (min-width: 1024px) {
  .cpl-spd-card.cpl-bento-card--half .cpl-spd__log { block-size: 230px; }
  .cpl-spd-card.cpl-bento-card--half .cpl-spd__mascot { inline-size: 64px; block-size: 64px; }
  .cpl-spd-card.cpl-bento-card--half .cpl-spd__m { inset: 8px; inline-size: 48px; block-size: 48px; }
  .cpl-spd-card.cpl-bento-card--half .cpl-spd__stage { padding-block-start: 28px; }
  .cpl-spd-card.cpl-bento-card--half .cpl-spd__msg { max-inline-size: 94%; }
}

.cpl-spd-card.cpl-bento-card--full .cpl-bento-card__title { font-size: var(--text-xl); }

/* Each point: a bold title over its description. */
.cpl-spd__points {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-md);
}
.cpl-spd__points li {
  font-size: var(--text-sm);
  color: #343A57;
}
.cpl-spd__points b {
  display: block;
  color: var(--color-gray-900);
  font-weight: 700;
}

/* ---------- stage: mascot + chat window --------------------------- */

.cpl-spd__stage {
  position: relative;
  max-inline-size: 440px;
  inline-size: 100%;
  margin-inline: auto;
  padding-block-start: 40px;
}

.cpl-spd__mascot {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: -6px;
  inline-size: 88px;
  block-size: 88px;
  z-index: 2;
  border-radius: 50%;
  background: var(--color-gray-0);
  box-shadow: var(--shadow-md);
  animation: cpl-spd-bob 3.2s ease-in-out infinite;
}
.cpl-spd__m {
  position: absolute;
  inset: 12px;
  inline-size: 64px;
  block-size: 64px;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur-slow) var(--ease-out-quart), transform var(--dur-slow) var(--ease-out-back);
}
.cpl-spd__mascot[data-spd-mascot="idle"] .cpl-spd__m--idle,
.cpl-spd__mascot[data-spd-mascot="thinking"] .cpl-spd__m--thinking,
.cpl-spd__mascot[data-spd-mascot="success"] .cpl-spd__m--success {
  opacity: 1;
  transform: scale(1);
}

.cpl-spd__chat {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(22, 26, 60, 0.07);
  border-radius: var(--radius-lg);
  background: var(--color-gray-0);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.cpl-spd__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-navy);
  color: #fff;
}
.cpl-spd__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  background: #fff;
}
.cpl-spd__head-txt { display: flex; flex-direction: column; line-height: var(--lh-ui); }
.cpl-spd__head-txt b { font-size: var(--text-sm); }
.cpl-spd__head-txt i { font-style: normal; font-size: var(--text-xs); color: rgba(255, 255, 255, 0.8); }

/* The log grows from the bottom like a real chat; older messages scroll off the top. */
.cpl-spd__log {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-sm);
  block-size: 280px;
  padding: var(--space-md);
  overflow: hidden;
  background: var(--color-gray-0);
  /* soften the cut where older messages scroll off under the header */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
}

.cpl-spd__msg {
  max-inline-size: 86%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--lh-ui);
  animation: cpl-spd-pop var(--dur-slow) var(--ease-out-back) both;
}
.cpl-spd__msg--user {
  align-self: flex-end;               /* the asker's side: left in RTL, as in the widget */
  background: var(--color-navy);
  color: #fff;
}
.cpl-spd__msg--bot {
  align-self: flex-start;             /* Speedy's side: right in RTL */
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

.cpl-spd__interp {
  display: block;
  margin-block-end: 2px;
  font-size: 13px;
  color: var(--color-gray-500);
}
.cpl-spd__ans { display: block; font-weight: 700; }
.cpl-spd__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: var(--space-sm);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-tint);
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 500;
}
.cpl-spd__btn svg { inline-size: 15px; block-size: 15px; }

/* Thinking bubble: three dots */
.cpl-spd__dots { display: inline-flex; gap: 4px; padding-block: 4px; }
.cpl-spd__dots i {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--color-gray-400);
  animation: cpl-spd-dot 1s ease-in-out infinite;
}
.cpl-spd__dots i:nth-child(2) { animation-delay: 0.15s; }
.cpl-spd__dots i:nth-child(3) { animation-delay: 0.3s; }

/* Input row */
.cpl-spd__input {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-block-start: 1px solid var(--color-gray-200);
}
.cpl-spd__field {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-block-size: 40px;
  padding-inline: var(--space-sm);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
}
.cpl-spd__ph { color: var(--color-gray-500); }
.cpl-spd__typed:not(:empty) + .cpl-spd__ph { display: none; }
.cpl-spd__caret {
  display: none;
  inline-size: 2px;
  block-size: 18px;
  margin-inline-start: 1px;
  background: var(--color-primary);
  animation: cpl-spd-blink 0.9s steps(1) infinite;
}
.cpl-spd__chat.is-typing .cpl-spd__caret { display: inline-block; }
.cpl-spd__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-md);
  background: var(--color-navy);
  color: #fff;
  transition: transform var(--dur-fast) var(--ease-out-quart);
}
.cpl-spd__send svg { inline-size: 18px; block-size: 18px; transform: scaleX(-1); }
.cpl-spd__send.is-pressed { transform: scale(0.88); }

@media (max-width: 480px) {
  .cpl-spd__mascot { inline-size: 72px; block-size: 72px; }
  .cpl-spd__m { inset: 10px; inline-size: 52px; block-size: 52px; }
  .cpl-spd__msg { max-inline-size: 92%; }
}

@keyframes cpl-spd-bob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cpl-spd-pop   { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes cpl-spd-dot   { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes cpl-spd-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cpl-spd__mascot, .cpl-spd__msg, .cpl-spd__dots i { animation: none; }
  .cpl-spd__m { transition: none; }
}