/* TeachTime Interactive Demo - Phone Mockup Styles
   Reuses the exact working pattern from landing-page-builder.html.
   The mockup PNG is the bezel (opaque frame) with a transparent screen.
   The iframe sits behind it and shows through the transparent screen;
   the bezel (higher z-index) masks the iframe edges. */

/* Reserves the scaled space; width/height are set by JS so the phone
   keeps its proportions and never overflows */
#demo-phone-scale {
  position: relative;
  overflow: hidden;
}

/* Fixed design size; the whole phone is scaled with transform so the
   website inside always renders at the same width (no reflow).
   Anchored to the wrapper's top-left so the scaled phone aligns with
   the wrapper's box (which is centered by the flex parent). */
#demo-phone-device {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 848px;
  transform-origin: top left;
  /* light gray shows through the transparent top (status bar) area */
  background: #f3f4f6;
}

/* iframes have an intrinsic 150px height; force it to fill the device
   below the top status bar and above the bottom nav bar */
#demo-phone-device iframe {
  z-index: 0;
  top: 3rem;
  height: calc(100% - 3rem - 3.5rem);
}

/* below the mockup bezel so it only shows through the transparent
   screen and the phone frame stays visible around it */
#demo-phone-navbar {
  z-index: 1;
  background: #f3f4f6;
  /* lift above the opaque bottom bezel so it isn't hidden */
  bottom: 1rem;
}

#demo-phone-mockup {
  z-index: 2;
}

/* Simulate touch: dragging on the phone scrolls the page inside, and
   text is never highlighted while interacting with the mockup. */
#demo-phone-device {
  cursor: grab;
}
#demo-phone-device.dragging {
  cursor: grabbing;
}
#demo-phone-frame {
  user-select: none;
  -webkit-user-select: none;
}

/* Flashing text cursor in the WhatsApp message input */
@keyframes demoCursorFlash {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Expanding ripple for the play button on the opening screen */
.demo-live-ping {
  animation: demo-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes demo-ping {
  0% { transform: scale(1); opacity: 0.7; }
  80%, 100% { transform: scale(1.9); opacity: 0; }
}

/* The messages area resizes instantly to make room for the action buttons.
   No bottom transition here: a transition would change the container height
   mid-scroll and interrupt the smooth scroll, leaving it short of the bottom.
   The buttons themselves still fade/slide in via their own transition. */
#demo-chat-messages {
  transition: none;
}

/* Action buttons fade + slide up into view instead of popping in. */
#demo-chat-options {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
#demo-chat-options.demo-options-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Opening screen fades + slides up into view instead of popping in. */
#demo-start-screen {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
#demo-start-screen.demo-start-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Stone age screen fades + slides up into view */
#demo-stone-screen {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
#demo-stone-screen.demo-stone-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Soft pulsing glow on the stone-age CTA button */
.demo-glow-pulse {
  animation: demo-glow-pulse 1.8s ease-in-out infinite;
}
@keyframes demo-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
  50% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
}

/* End screen fades in (solid background matching the start/transition
   screens). No slide, just a fade. */
#demo-end-screen {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
#demo-end-screen.demo-end-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Transition screen fades + slides up into view instead of popping in. */
#demo-transition-screen {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
#demo-transition-screen.demo-transition-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Chat bubble tails */
.demo-bubble-me::after,
.demo-bubble-them::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

/* Teacher (green, right-aligned): point at top-right, pointing down-left */
.demo-bubble-me::after {
  right: -8px;
  border-width: 16px 16px 0 0;
  border-color: #d9fdd3 transparent transparent transparent;
}

/* Student (white, left-aligned): point at top-left, pointing up-left */
.demo-bubble-them::after {
  left: -8px;
  border-width: 0 16px 16px 0;
  border-color: transparent #ffffff transparent transparent;
}