/* ──────────────────────────────────────────────────────────────────
   Phase E — Animated Demo styles
   Self-contained. Hex values mirror Tailwind config in base.html.
   No Tailwind dependencies — works as a drop-in.
   ────────────────────────────────────────────────────────────────── */

/* ── Wrapper + phone frame ─────────────────────────────────────── */
.animated-demo-wrapper {
  width: min(82vw, 320px);
  margin: 0 auto;        /* centered by default; in flex contexts (marketing hero)
                            this is harmless because the flex parent positions it */
  user-select: none;
}
@media (min-width: 1024px) {
  .animated-demo-wrapper {
    width: 320px;
  }
}

/* ── Framing — caption above phone, preview tagline below ─────── */
.animated-demo-caption {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  margin: 0 0 12px;
  font-weight: 400;
}

.animated-demo-preview {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  margin: 12px auto 0;
  max-width: 320px;
}

.animated-demo-preview-item {
  color: #C9A96E;        /* gold accents pull the eye to the four scenarios */
  font-weight: 500;
}

/* Light-background contexts (pricing.html sits on cream).
   Consumers add `data-demo-on-light` to the wrapper to flip text colors,
   OR an ancestor has class `bg-cream` / `bg-white`. */
.bg-cream .animated-demo-caption,
.bg-white .animated-demo-caption,
[data-demo-on-light] .animated-demo-caption {
  color: #57534E;
}

.bg-cream .animated-demo-preview,
.bg-white .animated-demo-preview,
[data-demo-on-light] .animated-demo-preview {
  color: #57534E;
}

.bg-cream .animated-demo-preview-item,
.bg-white .animated-demo-preview-item,
[data-demo-on-light] .animated-demo-preview-item {
  color: #2D5A3D;        /* on light bg, gold loses contrast — switch to green */
}

.animated-demo-phone {
  position: relative;
  width: 100%;
  aspect-ratio: 320 / 640;
  background: #141E13;
  border-radius: 36px;
  padding: 8px;
  box-shadow:
    0 24px 48px -12px rgba(20, 30, 19, 0.45),
    0 8px 20px -6px rgba(20, 30, 19, 0.35);
}

.animated-demo-phone-frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: #FAF7F2;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* ── Status bar / notch ────────────────────────────────────────── */
.animated-demo-phone-header {
  height: 26px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 6px;
}

.animated-demo-phone-notch {
  width: 64px;
  height: 16px;
  background: #141E13;
  border-radius: 0 0 12px 12px;
}

/* ── Contact strip ─────────────────────────────────────────────── */
.animated-demo-phone-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 8px;
  border-bottom: 1px solid #E7E0D8;
  flex-shrink: 0;
}

.animated-demo-phone-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2D5A3D;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
}

.animated-demo-phone-contact-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.animated-demo-phone-name {
  font-size: 12px;
  font-weight: 600;
  color: #1C1917;
}

.animated-demo-phone-status {
  font-size: 9px;
  color: #A8A29E;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-height: 11px;
}

/* ── Bubble container ──────────────────────────────────────────── */
.animated-demo-bubbles {
  flex: 1;
  overflow: hidden;
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity 300ms ease;
  scroll-behavior: smooth;
}

.animated-demo-bubbles.animated-demo-fading {
  opacity: 0;
}

/* ── Bubble (incoming/outgoing) ────────────────────────────────── */
.animated-demo-bubble {
  display: flex;
  flex-direction: column;
  max-width: 82%;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.animated-demo-bubble.animated-demo-bubble-visible {
  opacity: 1;
  transform: translateY(0);
}

.animated-demo-bubble-incoming { align-self: flex-start; }
.animated-demo-bubble-outgoing { align-self: flex-end; }
.animated-demo-bubble-system_alert {
  align-self: stretch;
  max-width: 100%;
  margin: 4px 0;
}

.animated-demo-bubble-text {
  padding: 7px 11px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.4;
  word-wrap: break-word;
}

.animated-demo-bubble-incoming .animated-demo-bubble-text {
  background: #FFFFFF;
  color: #1C1917;
  border: 1px solid #E7E0D8;
  border-bottom-left-radius: 4px;
}

.animated-demo-bubble-outgoing .animated-demo-bubble-text {
  background: #2D5A3D;
  color: #FFFFFF;
  border-bottom-right-radius: 4px;
}

.animated-demo-bubble-system_alert .animated-demo-bubble-text {
  background: #FDF6E9;
  border: 1px solid rgba(201, 169, 110, 0.5);
  color: #57534E;
  font-size: 10.5px;
  font-style: italic;
  text-align: center;
  border-radius: 10px;
  padding: 5px 10px;
}

.animated-demo-bubble-meta {
  font-size: 9.5px;
  color: #A8A29E;
  margin-top: 2px;
  padding: 0 4px;
}
.animated-demo-bubble-incoming .animated-demo-bubble-meta { text-align: left; }
.animated-demo-bubble-outgoing .animated-demo-bubble-meta { text-align: right; }

/* ── Typing indicator (rendered inline as a bubble) ────────────── */
.animated-demo-typing {
  display: inline-flex;
  gap: 4px;
  padding: 9px 14px;
  border-radius: 14px;
  width: fit-content;
}

.animated-demo-typing-incoming {
  align-self: flex-start;
  background: #FFFFFF;
  border: 1px solid #E7E0D8;
  border-bottom-left-radius: 4px;
}

.animated-demo-typing-outgoing {
  align-self: flex-end;
  background: #2D5A3D;
  border-bottom-right-radius: 4px;
}

.animated-demo-typing span {
  width: 4.5px;
  height: 4.5px;
  background: #A8A29E;
  border-radius: 50%;
  animation: animated-demo-typing-pulse 1.4s infinite ease-in-out;
}

.animated-demo-typing-outgoing span {
  background: rgba(255, 255, 255, 0.75);
}

.animated-demo-typing span:nth-child(1) { animation-delay: 0s; }
.animated-demo-typing span:nth-child(2) { animation-delay: 0.2s; }
.animated-demo-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes animated-demo-typing-pulse {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

/* ── Controls (scenario indicator + replay) ────────────────────── */
.animated-demo-controls {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #A8A29E;
  font-family: 'DM Sans', sans-serif;
}

.animated-demo-indicator {
  letter-spacing: 0.02em;
}

.animated-demo-replay {
  background: none;
  border: none;
  color: #2D5A3D;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.animated-demo-replay:hover {
  color: #141E13;
}

.animated-demo-divider {
  color: #E7E0D8;
}

/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .animated-demo-bubble,
  .animated-demo-bubbles {
    transition: none;
  }
  .animated-demo-bubble {
    transform: none;
  }
  .animated-demo-typing span {
    animation: none;
    opacity: 0.7;
  }
}