/* Assistant panel — a looping, CSS-only chat vignette (no JS; the CSP forbids it).

   One 33s loop, three 11s scenes. Within a scene, steps 1-6 slide in one after
   another, the whole conversation holds, then everything clears and the panel
   rests empty before the next scene. Scenes 2 & 3 reuse the same keyframes,
   phase-shifted a third and two-thirds of the loop via negative animation-delay,
   so exactly one scene is on screen at a time. */

.ai-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(23, 90, 97, 0.1);
  overflow: hidden;
  min-width: 0;
}
.ai-panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--accent-strong);
  font-size: 0.9375rem;
}
.ai-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--accent-strong);
}

/* Scenes are stacked in one grid cell so the stage grows to the TALLEST scene
   (no fixed height to clip taller, wrapped content on narrow screens); only the
   active scene is visible at a time via the fade animation. */
.ai-stage {
  display: grid;
  padding: 1.1rem;
}
.ai-scene {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Steps appear with `visibility` plus a short slide, never `opacity`: a bubble
   caught mid-fade blends with the panel and drops below 4.5:1, which axe and
   Lighthouse measure on whichever frame they sample (aria-hidden does not exempt
   visible text). Visibility switches discretely, so text is either fully drawn or
   not rendered at all. */
.ai-msg {
  visibility: hidden; /* revealed by animation; static fallback below */
  display: flex;
  animation: ltAi1 33s ease infinite;
}
.ai-msg[data-ai-step='1'] {
  animation-name: ltAi1;
}
.ai-msg[data-ai-step='2'] {
  animation-name: ltAi2;
}
.ai-msg[data-ai-step='3'] {
  animation-name: ltAi3;
}
.ai-msg[data-ai-step='4'] {
  animation-name: ltAi4;
}
.ai-msg[data-ai-step='5'] {
  animation-name: ltAi5;
}
.ai-msg[data-ai-step='6'] {
  animation-name: ltAi6;
}
.ai-scene[data-ai-scene='2'] .ai-msg {
  animation-delay: -11s;
}
.ai-scene[data-ai-scene='3'] .ai-msg {
  animation-delay: -22s;
}

.ai-msg--user {
  justify-content: flex-end;
}
.ai-bubble {
  max-width: 85%;
  padding: 0.55rem 0.85rem;
  border-radius: 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  background: var(--warm-2);
  color: var(--teal-ink);
}
.ai-msg--user .ai-bubble {
  background: var(--accent-strong);
  color: var(--bone);
  border-bottom-right-radius: 0.25rem;
}
.ai-msg:not(.ai-msg--user) .ai-bubble {
  border-bottom-left-radius: 0.25rem;
}
.ai-bubble--ok {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  background: var(--mint-bg);
  color: var(--mint-ink);
  font-weight: 500;
}
.ai-check {
  color: var(--sage);
  font-weight: 700;
}
.ai-num {
  font-family: var(--body);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Result card that lands as the final step of each scene. */
.ai-result {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  box-shadow: 0 1px 4px rgba(23, 90, 97, 0.08);
}
.ai-result-date {
  flex: none;
  text-align: center;
  font-family: var(--body);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--accent-strong);
}
.ai-result-date b {
  display: block;
  font-size: 1.1rem;
}
.ai-result-date span {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.ai-result-body {
  min-width: 0;
  flex: 1;
}
.ai-result-body b {
  display: block;
  color: var(--teal-ink);
  font-weight: 600;
  font-size: 0.9375rem;
}
.ai-result-body span {
  font-size: 0.8125rem;
  color: var(--teal-muted);
}
.ai-result .badge {
  margin-left: auto;
}

@keyframes ltAi1 {
  0%,
  1% {
    visibility: hidden;
    transform: translateY(8px);
  }
  3%,
  29% {
    visibility: visible;
    transform: translateY(0);
  }
  30.5%,
  100% {
    visibility: hidden;
    transform: translateY(0);
  }
}
@keyframes ltAi2 {
  0%,
  6% {
    visibility: hidden;
    transform: translateY(8px);
  }
  8%,
  29% {
    visibility: visible;
    transform: translateY(0);
  }
  30.5%,
  100% {
    visibility: hidden;
    transform: translateY(0);
  }
}
@keyframes ltAi3 {
  0%,
  10% {
    visibility: hidden;
    transform: translateY(8px);
  }
  12%,
  29% {
    visibility: visible;
    transform: translateY(0);
  }
  30.5%,
  100% {
    visibility: hidden;
    transform: translateY(0);
  }
}
@keyframes ltAi4 {
  0%,
  13% {
    visibility: hidden;
    transform: translateY(8px);
  }
  15%,
  29% {
    visibility: visible;
    transform: translateY(0);
  }
  30.5%,
  100% {
    visibility: hidden;
    transform: translateY(0);
  }
}
@keyframes ltAi5 {
  0%,
  16% {
    visibility: hidden;
    transform: translateY(8px);
  }
  18%,
  29% {
    visibility: visible;
    transform: translateY(0);
  }
  30.5%,
  100% {
    visibility: hidden;
    transform: translateY(0);
  }
}
@keyframes ltAi6 {
  0%,
  19% {
    visibility: hidden;
    transform: translateY(8px);
  }
  21%,
  29% {
    visibility: visible;
    transform: translateY(0);
  }
  30.5%,
  100% {
    visibility: hidden;
    transform: translateY(0);
  }
}

/* No motion: show scene 1 fully, hide the phase-shifted duplicates. */
@media (prefers-reduced-motion: reduce) {
  .ai-msg {
    animation: none !important;
    visibility: visible !important;
    transform: none !important;
  }
  .ai-scene[data-ai-scene='2'],
  .ai-scene[data-ai-scene='3'] {
    display: none !important;
  }
}