/* ===========================================================================
   CHAT BUNDLE - Single-File CSS for Chat Interface
   ===========================================================================
   Structure:
   - PART 1: CSS Variables (Theme System Foundation)
   - PART 2: Base Styles & Resets
   - PART 3: Chat Layout (header, main, footer)
   - PART 4: Chat Messages (bot/user bubbles)
   - PART 5: Chat Input (text input, options, navigation)
   - PART 6: Chat Animations
   - PART 7: Static Pages (about, contact, privacy, terms) - NOT themeable
   - PART 8: Contact Form
   - PART 9: Utility & Responsive
   =========================================================================== */

/* ===========================================================================
   PART 1: CSS VARIABLES (Theme System Foundation)
   ===========================================================================
   These variables can be overridden by themes via inline CSS from Chat::Theme.
   See app/models/chat/theme.rb for theme definitions.
   =========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     THEMEABLE VARIABLES (can be customized per theme)
     ------------------------------------------------------------------------- */

  /* Background color */
  --background-color: #f5f7fa;

  /* Theme main colors (primary theme color and variants) */
  --theme-main: rgb(1, 174, 240);
  --theme-main-hover: #00a0d8;
  --theme-main-shadow: rgb(1, 174, 240, 0.3);
  --theme-main-shadow-medium: rgb(1, 174, 240, 0.6);
  --theme-main-text-color: white;

  /* Chat feedback colors (error/success banners in chat) */
  --theme-danger-bg: rgb(220, 38, 38, 0.9);
  --theme-success-bg: rgb(34, 197, 94, 0.15);
  --theme-success-border: rgb(34, 197, 94, 0.3);

  /* Chat validation (inline under input) */
  --theme-validation-text-color: rgb(220, 38, 38);
  --theme-validation-border-color: rgb(220, 38, 38);

  /* Theme time color (references theme-main-text-color) */
  --theme-time-color: var(--theme-main-text-color);

  /* User bubble colors (references to theme-main-*) */
  --theme-user-bubble-color: var(--theme-main);
  --theme-user-bubble-hover: var(--theme-main-hover);
  --theme-user-bubble-text-color: var(--theme-main-text-color);

  /* Theme alt colors (secondary/bot theme color) */
  --theme-alt-color: white;
  --theme-alt-text-color: rgb(47, 50, 74);

  /* Bot bubble colors (references to theme-alt-*) */
  --theme-bot-bubble-color: var(--theme-alt-color);
  --theme-bot-bubble-text-color: var(--theme-alt-text-color);

  /* Header */
  --theme-header-bg: transparent;

  /* Theme input (chat-input-inline) */
  --theme-input-bg: white;
  --theme-input-border: var(--theme-user-bubble-color);
  --theme-input-radius: 8px;
  --theme-input-text: #2F324A;
  --theme-input-placeholder: #999;

  /* Theme input button (submit inside input) */
  --theme-input-btn-bg: transparent;
  --theme-input-btn-color: var(--theme-user-bubble-color);
  --theme-input-btn-icon: var(--theme-main-shadow);
  --theme-input-btn-icon-active: var(--theme-main);

  /* Theme nav colors (references theme-main-text-color) */
  --theme-nav-color: var(--theme-main-text-color);
  --theme-nav-text-color: var(--theme-nav-color);

  /* Choice button (references theme-user-bubble-*) */
  --theme-choice-btn-bg: var(--theme-user-bubble-color);
  --theme-choice-btn-border: transparent;

  /* Typography */
  --font-family: "Open Sans";
  --font-size-xs: 0.875rem;
  --font-size-sm: 1rem;
  --font-size-base: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.375rem;

  /* Help text (uses theme-input-placeholder from input section) */
  --theme-help-text-color: var(--theme-input-placeholder);

  /* -------------------------------------------------------------------------
     STATIC PAGE VARIABLES (glass effect overlays - NOT themeable)
     These are used for about, contact, privacy, terms pages
     ------------------------------------------------------------------------- */

  /* Static page accent colors (contact form) */
  --static-primary-color: #667eea;
  --static-secondary-color: #764ba2;

  /* Static page text colors */
  --static-text-color: #333;
  --static-light-text-color: #666;
  --static-placeholder-color: #999;

  /* Static page UI colors */
  --static-border-color: #e1e8ed;
  --static-shadow-color: rgb(0, 0, 0, 0.1);
  --static-danger-color: #dc2626;
  --static-success-color: #22c55e;

  /* Overlay colors */
  --overlay-white-10: rgb(255, 255, 255, 0.1);
  --overlay-white-20: rgb(255, 255, 255, 0.2);
  --overlay-white-30: rgb(255, 255, 255, 0.3);
  --overlay-white-40: rgb(255, 255, 255, 0.4);
  --overlay-white-50: rgb(255, 255, 255, 0.5);
  --overlay-white-60: rgb(255, 255, 255, 0.6);
  --overlay-white-70: rgb(255, 255, 255, 0.7);
  --overlay-white-80: rgb(255, 255, 255, 0.8);
  --overlay-white-90: rgb(255, 255, 255, 0.9);
  --overlay-white-95: rgb(255, 255, 255, 0.95);
  --text-shadow-light: rgb(0, 0, 0, 0.3);
  --text-shadow-strong: rgb(0, 0, 0, 0.5);
  --box-shadow-sm: rgb(0, 0, 0, 0.1);
  --box-shadow-md: rgb(0, 0, 0, 0.15);
  --box-shadow-lg: rgb(0, 0, 0, 0.2);

  /* Footer glass-style colors */
  --footer-text-muted: rgb(255, 255, 255, 0.7);
}

/* ===========================================================================
   PART 2: BASE STYLES & RESETS
   =========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base styles for production */
body {
  font-family: var(--font-family), system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--font-size-sm);
  line-height: 1.34;
  background-color: transparent; /* transparent so .bg-layer (z-index:-1) shows through */
  -webkit-font-smoothing: antialiased;
  padding: 1rem;
}

/* Theme background on html — .bg-layer sits between html and body in stacking order */
html {
  background-color: var(--background-color);
}

/* Base styles for preview (Shadow DOM) */
.preview-wrapper {
  font-family: var(--font-family), system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--font-size-sm);
  line-height: 1.34;
  background-color: var(--background-color);
  -webkit-font-smoothing: antialiased;
  padding: 1rem;
}

/* Aside element - hidden by default, only visible in wizard mode on large screens */
aside {
  display: none;
}

/* ===========================================================================
   PART 3: CHAT LAYOUT (header, main, footer)
   =========================================================================== */

/* === CHAT HEADER ======================================================== */

header {
  visibility: visible;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  color: var(--theme-main-text-color);
  margin-bottom: 1rem;
  background: var(--theme-header-bg);
}

header .header-icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  color: transparent; /* hide alt-text flash before image loads */
}

header .header-content {
  flex: 1;
  min-width: 0;
}

header h1 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  text-shadow: 0 2px 8px var(--text-shadow-strong);
  overflow-wrap: break-word;
}

header h2 {
  font-size: var(--font-size-base);
  opacity: 0.95;
  text-shadow: 0 1px 4px var(--text-shadow-strong);
  font-weight: normal;
  overflow-wrap: break-word;
}

header h3.content-text {
  font-size: var(--font-size-sm);
  font-style: italic;
  opacity: 0.9;
  text-shadow: 0 1px 4px var(--text-shadow-strong);
  font-weight: normal;
  margin-top: 0.5rem;
  line-height: 1.4;
}

header h3.content-text p {
  margin: 0.25rem 0;
  font-size: inherit;
  font-style: inherit;
}

header h3.content-text p:first-child {
  margin-top: 0;
}

header h3.content-text p:last-child {
  margin-bottom: 0;
}

/* Clickable header links (H1, H2, Logo) */
header h1 a,
header h2 a {
  color: inherit;
  text-decoration: none;
}

header h1 a:hover,
header h2 a:hover {
  text-decoration: underline;
}

/* Close button for static pages */
.page-content .close-button {
  position: sticky;
  top: 0;
  float: right;
  margin: 0 0 0.5rem 1rem;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--overlay-white-90);
  backdrop-filter: blur(5px);
  border-radius: 50%;
  box-shadow: 0 2px 8px var(--box-shadow-md);
  color: var(--static-text-color);
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.page-content .close-button:hover {
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0 4px 12px var(--box-shadow-lg);
}

.page-content .close-button .close-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Hide from users but visible to SEO bots */
header h3.seo-only {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* === CHAT CONTENT (main container) ========================================= */

main#chat-container {
  visibility: visible;
  display: grid;
  overflow: hidden;

  /* 
    auto 1fr  - start caht from top 
    auto auto - start chat from center 
    1fr auto  - start chat from bottom
  */
  grid-template-rows: auto auto; 
  justify-items: center;
  align-content: center; /* center */
}

main#chat-container section#chat-messages {
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  max-width: 600px;
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

main#chat-container section#chat-input-area {
  max-width: 600px;
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Align with bot bubble left edge and user bubble right edge on large screens */
@media (width > 760px) {
  main#chat-container section#chat-messages {
    max-width: 800px;
  }

  main#chat-container section#chat-input-area {
    max-width: 800px;

    /* Left: align with bot bubble (icon 50px + gap 0.75rem) */
    padding-left: calc(50px + 0.75rem);

    /* Right: space for user message time (3rem fixed width + gap 0.75rem) */
    padding-right: calc(2.5rem + 0.75rem);
  }

  article.message--bot .message__bubble {
    /* Width reduced by user time space (3rem fixed width + 0.75rem gap) to align with input area */
    max-width: calc(100% - 2.5rem);
  }

  article.message--user .message__time--user {
    width: 2.5rem;
    text-align: left;
  }
}

/* ===========================================================================
   PART 4: CHAT MESSAGES (bot/user bubbles, timestamps)
   =========================================================================== */

/* Message layouts */
article.message {
  display: grid;
  max-width: 600px;
  width: 100%;
  margin: 0.75rem auto;
  gap: 0.75rem;
  animation: slide-in 0.3s ease;
}

/* Override default animation with custom animations */

/* WITH previous bot message (full sequence) */
article.message.animate-appear-1 {
  animation: slide-in-center-left-up 0.6s ease-out both !important;
  animation-delay: 0s !important;
  opacity: 0;
  transform: translate(50vw, 50vh) scale(0.5);
}

article.message.animate-appear-2 {
  animation: slide-in-right-up 0.4s ease-out both !important;
  animation-delay: 0.3s !important;
  opacity: 0;
  transform: translate(-100px, 50px);
}

article.message.animate-appear-3 {
  animation: slide-in-elliptic-top-fwd 0.6s ease-out both !important;
  animation-delay: 1.8s !important;
  opacity: 1;
  transform: translateY(-30px) rotateX(-10deg) scale(0);
  transform-origin: 50% 0%;
}

/* WITHOUT previous bot message (skip Animation I) */
article.message.animate-appear-2-no-prev {
  animation: slide-in-right-up 0.4s ease-out both !important;
  animation-delay: 0s !important;
  opacity: 0;
  transform: translate(-100px, 50px);
}

article.message.animate-appear-3-no-prev {
  animation: slide-in-elliptic-top-fwd 0.6s ease-out both !important;
  animation-delay: 1.6s !important;
  opacity: 1;
  transform: translateY(-30px) rotateX(-10deg) scale(0);
  transform-origin: 50% 0%;
}

/* Animation for input wrapper */
#input-wrapper.animate-appear-3 {
  animation: slide-in-elliptic-top-fwd 0.6s ease-out both;
  animation-delay: 1.8s;
  opacity: 1;
  transform: translateY(-30px) rotateX(-10deg) scale(0);
  transform-origin: 50% 0%;
}

#input-wrapper.animate-appear-3-no-prev {
  animation: slide-in-elliptic-top-fwd 0.6s ease-out both;
  animation-delay: 1.6s;
  opacity: 1;
  transform: translateY(-30px) rotateX(-10deg) scale(0);
  transform-origin: 50% 0%;
}

/* Increase max-width for messages on large screens */
@media (width > 760px) {
  article.message {
    max-width: 800px;
  }
}

article.message--bot {
  grid-template-columns: 50px auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: 
    "icon bubble"
    "time .";
  gap: 0.25rem 0.75rem;
}

article.message--bot .message__icon {
  grid-area: icon;
  width: 2.5rem;
  height: 2.5rem;
  place-self: end center;
}

article.message--bot .message__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent; /* hide alt-text flash before image loads */
}

article.message--bot .message__time {
  grid-area: time;
  color: var(--theme-time-color);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  justify-self: center;
}

article.message--bot .message__bubble {
  grid-area: bubble;
  background: var(--theme-bot-bubble-color);
  color: var(--theme-bot-bubble-text-color);
  padding: 1rem;
  border-radius: 0.75rem;
  border-bottom-left-radius: 0.125rem;
}

article.message--user {
  grid-template-columns: 1fr auto;
  grid-template-areas: "bubble time";
  place-items: center end;
}

article.message--user .message__time--user {
  grid-area: time;
  color: var(--theme-time-color);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

article.message--user .message__bubble {
  grid-area: bubble;
  background: var(--theme-user-bubble-color);
  color: var(--theme-user-bubble-text-color);
  padding: 1rem;
  border-radius: 0.75rem;
  border-bottom-right-radius: 0.125rem;
}

/* Question subtitle/hint text */
.message__subtitle {
  font-size: var(--font-size-sm);
  color: var(--theme-help-text-color);
  margin-top: 0.5rem;
  font-weight: 400;
}

/* Responsive - Small screens */
@media (width <= 480px) {
  article.message--bot {
    grid-template-columns: 40px 1fr;
    grid-template-areas: 
      "icon bubble"
      "icon bubble";
  }
  
  article.message--bot .message__time {
    display: none;
  }
  
  article.message--user {
    grid-template-columns: 1fr;
    grid-template-areas: "bubble";
  }
  
  article.message--user .message__time--user {
    display: none;
  }
}


/* === CHAT INPUT AREA ===================================== [section] === */



/* === CHAT FOOTER ========================================== [footer] === */

footer {
  visibility: visible;
  background: var(--overlay-white-10);
  backdrop-filter: blur(10px);
  border: 1px solid var(--overlay-white-20);
  border-radius: 8px;
  color: white;
  padding: 0.5rem 1rem;
  font-size: var(--font-size-xs);
}

footer p {
  margin: 0;
  text-shadow: 0 1px 2px var(--text-shadow-light);
}

.session-id {
  font-family: Monaco, Menlo, 'Ubuntu Mono', monospace;
  font-size: var(--font-size-xs);
  color: var(--footer-text-muted);
}

/* Footer Content Layout */
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem 1rem;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

.footer-links a {
  color: var(--footer-text-muted);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.2s ease;
  text-shadow: 0 1px 2px var(--text-shadow-light);
}

.footer-links a:hover {
  color: white;
  text-decoration: underline;
}

/* Social Icons */
.social-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--overlay-white-80);
  transition: all 0.2s ease;
  border-radius: 50%;
  background: var(--overlay-white-10);
}

.social-icon:hover {
  color: white;
  background: var(--overlay-white-20);
  transform: translateY(-2px);
}

.social-icon svg {
  width: 20px;
  height: 20px;
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 2.5rem;
  left: 2.5rem;
  width: 60px;
  height: 60px;
  background: rgb(37, 211, 102, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 12px rgb(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 100;
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgb(0, 0, 0, 0.3);
}

.whatsapp-float svg {
  width: 32px;
  height: 32px;
}

.copyright {
  margin: 0;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--overlay-white-80);
  text-shadow: 0 1px 2px var(--text-shadow-light);
}

/* Dynamic Footer Layout based on visible sections */

/* 1 section: Center alignment */
.footer-content--1-section {
  justify-content: center;
}

/* 2 sections: Left and Right alignment */
.footer-content--2-sections {
  justify-content: space-between;
}

/* 3 sections: Left, Center, Right alignment */
.footer-content--3-sections {
  justify-content: space-between;
}

/* Responsive Footer */
@media (width >= 760px) {
  .footer-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /* Override for single section - center it */
  .footer-content--1-section {
    justify-content: center;
  }

  /* Two sections - space between (left and right) */
  .footer-content--2-sections {
    justify-content: space-between;
  }

  /* Three sections - space between with middle section */
  .footer-content--3-sections {
    justify-content: space-between;
  }

  /* Copyright positioning for different layouts */
  .footer-content--3-sections .copyright {
    order: -1;
  }

  .footer-content--2-sections .copyright {
    order: 1;
  }

  .footer-content--1-section .copyright {
    order: 0;
  }

  /* Footer links positioning */
  .footer-content--3-sections .footer-links {
    order: 0;
  }

  .footer-content--2-sections .footer-links {
    order: 0;
  }

  /* Social links positioning */
  .footer-content--3-sections .social-links {
    order: 1;
  }

  .footer-content--2-sections .social-links {
    order: 1;
  }
}

/* WhatsApp float - mobile adjustments */
@media (width < 760px) {
  .whatsapp-float {
    width: 52px;
    height: 52px;
    bottom: 2.5rem;
    left: 1.5rem;
  }

  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }
}

/* ===========================================================================
   PART 5: CHAT INPUT (text input, options buttons, navigation)
   =========================================================================== */

.avatar-icon {
  width: 2rem;
  height: 2rem;
}

/* Message timestamps - hidden on mobile */
.message-timestamp {
  display: none;
}

/* Completion message */
.completion-message {
  background: var(--theme-success-bg);
  backdrop-filter: blur(10px);
  border: 2px solid var(--theme-success-border);
  color: var(--theme-main-text-color);
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  width: 100%;
}

.completion-message h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
}

/* Error Banner */
.error-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem;
  background: var(--theme-danger-bg);
  color: var(--theme-main-text-color);
  border-radius: 8px;
}

.error-banner button {
  padding: 0.1rem 0.3rem 0.2rem;
  margin: 1rem;
  background: transparent;
  border: 1px solid white;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}

/* ============================================
   Options Container Label
   ============================================ */

.options-label {
  text-align: left;
  color: var(--theme-nav-text-color);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

/* ============================================
   Options Container (Multiple Choice Buttons)
   ============================================ */

.options-container {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0 8px;
}

.option-button {
  background: var(--theme-choice-btn-bg);
  border: 2px solid var(--theme-choice-btn-border);
  color: var(--theme-user-bubble-text-color);
  padding: 0.75rem 1rem;
  border-radius: 7px;
  font-size: var(--font-size-sm);
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  width: 100%;
  max-width: 100%;
  box-shadow: 0 4px 12px var(--theme-main-shadow);
}

.option-button:hover {
  background: var(--theme-main-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--theme-main-shadow);
}

.option-button:active {
  transform: translateY(0);
}

.option-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Focus state - no outline by default for mouse clicks (but keep outline for keyboard navigation) */
.option-button:focus:not(.keyboard-focus, :focus-visible) {
  outline: none;
}

/* Keyboard navigation - show outline for Tab navigation or programmatic focus */
.option-button:focus-visible,
.option-button.keyboard-focus {
  outline: 3px solid var(--theme-user-bubble-color) !important;
  outline-offset: 2px;
  box-shadow: 0 6px 20px var(--theme-main-shadow);
}

/* Options in row on large screens */
@media (width > 760px) {
  .options-container {
    flex-flow: row wrap;
  }

  .option-button {
    width: auto;
    flex: 1;
    min-width: 150px;
  }
}

/* ============================================
   Image Option Cards (#72)
   Hover effect reference: monkey.travel/en/pages/trekking-kilimanjaro/
   Offline copy: docs/design-references/monkey-travel/
   Effect: image starts at scale(1.2), zooms out to scale(1) on hover.
   Container clips overflow so card size stays fixed.
   ============================================ */

/* Image cards need more width than chat messages on desktop */
@media (width > 760px) {
  main#chat-container:has(.options-container--cards) section#chat-input-area {
    max-width: 1100px;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Match history container width to cards width so they align on desktop (#126). */
  main#chat-container:has(.options-container--cards) section#chat-messages {
    max-width: 1100px;
  }

  main#chat-container:has(.options-container--cards) article.message {
    max-width: 1100px;
  }
}

#current-input-container:has(.options-container--cards) .options-label {
  max-width: 1100px;
  margin: 0 auto 0.75rem;
}

.options-container--cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  max-width: 1100px;
  margin: 0 auto;
}

@media (width > 760px) {
  .options-container--cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.875rem;
  }
}

.option-card {
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
  background: var(--theme-input-bg);
  color: var(--theme-input-text);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  font: inherit;
  box-shadow: 0 8px 16px 0 rgb(0, 0, 0, 0.2);
}

.option-card:focus-visible {
  outline: none;
}

.option-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--theme-main);
}

.option-card__image-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1.2);
  opacity: 0.8;
  transition: transform 0.7s ease, opacity 0.3s ease;
}

.option-card:hover .option-card__image-inner,
.option-card:focus-visible .option-card__image-inner {
  transform: scale(1);
  opacity: 1;
}

/* Icon mode: show full icon centered on solid background, no zoom effect */
.option-card__image:has(.option-card__image-inner--icon) {
  background-color: var(--theme-input-bg);
}

.option-card__image-inner--icon {
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(1.2);
}

.option-card__image--placeholder {
  background: linear-gradient(135deg, var(--theme-main), var(--theme-main-hover));
  opacity: 0.3;
}

.option-card__body {
  padding: 0.75rem;
  text-align: center;
}

.option-card__title {
  font-weight: 700;
  color: var(--theme-main);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.option-card__subtitle {
  font-size: var(--font-size-xs);
  opacity: 0.8;
  line-height: 1.4;
}

.icon-send {
  width: 22px;
  height: 22px;
}

/* ============================================
   Navigation - Back Button Below Input/Options
   ============================================ */

.back-button,
.reset-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.3rem 0.6rem;
  background-color: transparent;
  border: none;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--theme-nav-text-color);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-left: 0.2rem;
}

/* Back button and Reset button - hover */
.back-button:hover,
.reset-button:hover {
  background-color: var(--overlay-white-10);
}

/* Navigation buttons only (for multiple choice) */
.navigation-buttons-only {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.1rem;
  margin-bottom: 0.4rem;
  width: 100%;
}

.navigation-buttons-only form {
  display: inline-block;
  margin: 0;
}

.back-button-text {
  text-transform: uppercase;
}

/* Navigation buttons - forms generated by button_to */
.navigation-buttons-only form,
.navigation-buttons form,
.comment-navigation .navigation-buttons form {
  display: inline-block;
  margin: 0;
}


/* Icons inside buttons */
.back-button .icon-back,
.clear-button .icon-clear,
.reset-button .icon-reset {
  width: 14px;
  height: 14px;
  color: var(--theme-nav-text-color);
}

/* ============================================
   Bot Question with Input (Landbot Design)
   ============================================ */

/* Container for bot message with input inside */
.bot-question-with-input {
  width: 100%;
  max-width: 100%;
}

/* Remove bottom margin from message when it has input inside */
.bot-question-with-input .message {
  margin-bottom: 0;
}

/* Make bubble take more space when it contains input */
.bot-question-with-input article.message--bot {
  grid-template-columns: 50px 1fr;
}

/* Input section inside bot bubble */
.bot-input-inline {
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%;
}

/* Input field container (inline variant) */
.input-container-inline {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

/* Input field inside bot bubble (inline variant) */
.chat-input-inline {
  width: 100%;
  padding: 0.875rem 3.5rem 0.875rem 1rem;
  background: var(--theme-input-bg);
  border: 2px solid var(--theme-input-border);
  border-radius: var(--theme-input-radius);

  /* 16px minimum prevents iOS Safari auto-zoom on focus */
  font-size: var(--font-size-base);
  transition: border-color 0.2s ease;
  font-family: inherit;
  color: var(--theme-input-text);
}

/* Input focus state */
.chat-input-inline:focus {
  outline: none;
  border-color: var(--theme-input-border);
}

/* Placeholder styling */
.chat-input-inline::placeholder {
  color: var(--theme-input-placeholder);
  opacity: 0.6;
}

/* Textarea specific styles */
.chat-textarea.chat-input-inline {
  resize: vertical;
  min-height: 100px;
  padding-right: 3.5rem;
}

/* Submit button with SVG icon (inline variant) */
.submit-button-inline {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--theme-input-btn-bg);
  color: var(--theme-input-btn-color);
  border: 2px solid transparent;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

/* Submit button hover state */
.submit-button-inline:hover {
  transform: translateY(-50%) scale(1.1);
}

/* Submit button active state */
.submit-button-inline:active {
  transform: translateY(-50%) scale(0.95);
}

/* Submit button disabled state */
.submit-button-inline:disabled,
.submit-button-inline[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* SVG icon sizing */
.submit-button-inline .icon-send {
  width: 24px;
  height: 24px;
}

/* Send button becomes darker/more saturated when input has text */
.input-container-inline:has(input:not(:placeholder-shown)) .submit-button-inline .icon-send path,
.input-container-inline:has(textarea:not(:placeholder-shown)) .submit-button-inline .icon-send path {
  fill: var(--theme-input-btn-icon-active);
}

/* Help text below input */
.input-help {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--theme-help-text-color);
  text-align: left;
  font-style: italic;
}

/* Helpful hint below input (server validation errors) */
.input-hint {
  margin-top: 0.5rem;
  font-size: var(--font-size-sm);
  color: var(--theme-input-placeholder);
  text-align: left;
}

/* Input field with error state */
.chat-input-inline.has-error {
  border-color: var(--theme-validation-border-color);
}

/* Textarea button positioning (bottom instead of center) */
.input-container-inline:has(.chat-textarea) .submit-button-inline {
  top: auto;
  bottom: 0.5rem;
  transform: none;
}

.input-container-inline:has(.chat-textarea) .submit-button-inline:hover {
  transform: scale(1.05);
}

/* Bot bubble with input - extra padding at bottom */
.bot-question-with-input .message__bubble {
  padding-bottom: 1.25rem;
}

/* ===========================================================================
   PART 6: CHAT ANIMATIONS
   =========================================================================== */

/* Slide in animation for messages */
@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide selected option to top-right corner */
@keyframes slide-to-top-right {
  from {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  to {
    opacity: 0;
    transform: translate(100px, -100px) scale(0.5);
  }
}

/* Fade out and scale down non-selected options (GPU compositor-only) */
@keyframes fade-out-scale {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* Slide entire container up */
@keyframes slide-up {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-50px);
  }
}

/* Slide out with elliptic motion going backwards to top */
@keyframes slide-out-elliptic-top-bck {
  0% {
    transform: translateY(0) rotateX(0) scale(1);
    transform-origin: 50% 150%;
    opacity: 1;
  }

  100% {
    transform: translateY(-30px) rotateX(-10deg) scale(0);
    transform-origin: 50% 0%;
    opacity: 1;
  }
}

/* Slide in with elliptic motion from top forwards (reverse of slide-out) */
@keyframes slide-in-elliptic-top-fwd {
  0% {
    transform: translateY(-30px) rotateX(-10deg) scale(0);
    transform-origin: 50% 0%;
    opacity: 1;
  }

  100% {
    transform: translateY(0) rotateX(0) scale(1);
    transform-origin: 50% 150%;
    opacity: 1;
  }
}

/* Focus Mode: delayed slide-in that stays hidden during typing indicator */
@keyframes focus-delayed-appear {
  0% {
    transform: translateY(-30px) rotateX(-10deg) scale(0);
    transform-origin: 50% 0%;
    opacity: 0;
    pointer-events: none;
  }

  69.9% {
    transform: translateY(-30px) rotateX(-10deg) scale(0);
    transform-origin: 50% 0%;
    opacity: 0;
    pointer-events: none;
  }

  70% {
    transform: translateY(-30px) rotateX(-10deg) scale(0.1);
    transform-origin: 50% 0%;
    opacity: 0.1;
    pointer-events: auto;
  }

  100% {
    transform: translateY(0) rotateX(0) scale(1);
    transform-origin: 50% 150%;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Slide in from center to left-up position (for previous bot message) */
@keyframes slide-in-center-left-up {
  0% {
    transform: translate(50vw, 50vh) scale(0.5);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

/* Slide in from bottom-left to top-right (for user answer) */
@keyframes slide-in-right-up {
  0% {
    transform: translate(-100px, 50px);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* Animation classes to apply via Stimulus */
.animate-slide-to-top-right {
  animation: slide-to-top-right 0.6s ease-out forwards;
}

.animate-fade-out-scale {
  animation: fade-out-scale 0.6s ease-out forwards;
}

.animate-slide-up {
  animation: slide-out-elliptic-top-bck 0.6s ease-out forwards;
}

/* Typing indicator (3 dots) */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  opacity: 0;
  overflow: hidden;
  transform-origin: top;
  animation: typing-fade-in-out 1.5s ease-in-out forwards, typing-remove 0.1s ease-in-out forwards !important;
  animation-delay: 0.5s, 1.8s !important;
}

.typing-indicator--no-prev {
  animation-delay: 0.3s, 1.6s !important;
}

.typing-indicator__dot {
  width: 8px;
  height: 8px;
  background-color: var(--theme-user-bubble-color);
  border-radius: 50%;
  animation: typing-dot-pulse 1.4s infinite ease-in-out;
}

.typing-indicator__dot:nth-child(1) {
  animation-delay: 0s;
}

.typing-indicator__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator__dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing-fade-in-out {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes typing-dot-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.5);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

/* GPU compositor-only: collapse typing indicator without layout reflow */
@keyframes typing-remove {
  to {
    transform: scaleY(0);
    opacity: 0;
  }
}

/* Prevent pointer events during animation */
.animating {
  pointer-events: none;
}

/* Disable animations in test environment to fix Capybara visibility issues */
body.test-env *,
body.test-env *::before,
body.test-env *::after {
  animation: none !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition: none !important;
}

body.test-env .animate-appear-1,
body.test-env .animate-appear-2,
body.test-env .animate-appear-3,
body.test-env .typing-indicator,
body.test-env * {
  opacity: 1 !important;
}

/* ============================================
   Accessibility
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===========================================================================
   PART 7: STATIC PAGES (about, contact, privacy, terms)
   ===========================================================================
   These pages use glass effect overlays and are NOT part of the theme system.
   They work on any background image with semi-transparent white overlays.
   =========================================================================== */

main:has(.page-content) {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0.75rem 0.5rem;
  overflow-y: auto;
  min-height: 0;
}

.page-content {
  background: var(--overlay-white-95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--overlay-white-20);
  border-radius: 8px;
  padding: 1rem;
  max-width: 800px;
  width: 100%;
  color: var(--static-text-color);
}

.page-content h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--static-text-color);
  margin-bottom: 1rem;
  text-align: center;
  clear: both;
}

.page-content h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--static-text-color);
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}

.page-content section {
  margin-bottom: 1rem;
}

.page-content p {
  line-height: 1.6;
  margin-bottom: 0.75rem;
  color: var(--static-text-color);
}

.page-content ul {
  margin-left: 1rem;
  margin-bottom: 0.75rem;
}

.page-content li {
  margin-bottom: 0.375rem;
  line-height: 1.5;
}

.page-content .back-link {
  margin-top: 1.5rem;
  text-align: center;
}

.page-content .back-link a {
  color: var(--static-primary-color);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.page-content .back-link a:hover {
  color: var(--static-secondary-color);
  text-decoration: underline;
}

/* ===========================================================================
   PART 8: CONTACT FORM
   =========================================================================== */

/* Form groups */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--static-light-text-color);
  font-weight: 600;
  font-size: var(--font-size-sm);
}

/* Form controls */
.form-control {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.5;
  color: var(--static-text-color);
  background-color: white;
  border: 2px solid var(--static-border-color);
  border-radius: 8px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--static-primary-color);
  box-shadow: 0 0 0 3px var(--static-shadow-color);
}

.form-control::placeholder {
  color: var(--static-placeholder-color);
}

/* Textarea specific */
textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

/* Form actions */
.form-actions {
  margin-top: 1.5rem;
}

.form-actions .submit-button {
  width: 100%;
  display: block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, var(--static-primary-color), var(--static-secondary-color));
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px var(--box-shadow-sm);
}

.form-actions .submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px var(--box-shadow-md);
}

.form-actions .submit-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px var(--box-shadow-sm);
}

/* Contact success message */
.contact-success {
  text-align: center;
  padding: 1.5rem 1rem;
}

.success-message {
  max-width: 500px;
  margin: 0 auto;
}

.success-message .checkmark {
  margin: 0 auto 1.5rem;
  animation: scale-in 0.5s ease-out;
  width: 48px;
  height: 48px;
}

@keyframes scale-in {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.success-message h2 {
  color: var(--static-success-color);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.success-message p {
  color: var(--static-text-color);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.back-link {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  color: var(--static-primary-color);
  text-decoration: none;
  border: 2px solid var(--static-primary-color);
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.back-link:hover {
  background-color: var(--static-primary-color);
  color: white;
}

/* ===========================================================================
   PART 9: UTILITY & RESPONSIVE
   =========================================================================== */

/* Responsive content visibility utilities (760px mobile breakpoint) */
.content-desktop { display: block; }
.content-mobile { display: none; }
.content-desktop-inline { display: inline; }
.content-mobile-inline { display: none; }

/* Preserve flex layout when combined with visibility utilities (#113) */
.footer-links.content-desktop { display: flex; }
.footer-links.content-mobile { display: none; }

@media (width < 760px) {
  .content-desktop { display: none; }
  .content-mobile { display: block; }
  .content-desktop-inline { display: none; }
  .content-mobile-inline { display: inline; }
  .hidden-mobile { display: none; }

  .footer-links.content-desktop { display: none; }
  .footer-links.content-mobile { display: flex; }
}

/* Desktop styles for static pages (769px and up) */

@media screen and (width >= 769px) {
  main:has(.page-content) {
    padding: 2rem 1rem;
  }

  .page-content {
    padding: 2rem;
    border-radius: 12px;
  }

  .page-content h1 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .page-content h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }

  .page-content ul {
    margin-left: 1.5rem;
  }

  .form-group {
    margin-bottom: 1.5rem;
  }

  .form-control {
    padding: 0.75rem 1rem;
  }

  textarea.form-control {
    min-height: 120px;
  }

  .form-actions {
    margin-top: 2rem;
  }

  .form-actions .submit-button {
    width: auto;
    display: inline-block;
    padding: 0.875rem 2rem;
  }

  .contact-success {
    padding: 3rem 2rem;
  }

  .success-message .checkmark {
    width: 64px;
    height: 64px;
  }
}

/* ===========================================================================
   RESPONSIVE - Hide elements on small devices (Landbot design)
   =========================================================================== */

/* Hide avatar on mobile devices (≤476px) like in Landbot */
@media screen and (width <= 476px) {
  .is-hidden-small-device {
    display: none !important;
  }

  /* When avatar is hidden, remove grid column for icon and extend bubble to full width */
  .bot-question-with-input article.message--bot {
    grid-template-columns: 1fr;
    grid-template-areas: "bubble";
  }
}

/* ===========================================================================
   RESPONSIVE - Large screens alignment (Landbot design)
   =========================================================================== */

/* On large screens (>760px), remove parent padding for bot+input (it has its own icon) */
@media screen and (width > 760px) {
  #chat-input-area .bot-question-with-input {
    margin-left: calc(-50px - 0.75rem);
  }
}

/* On tablet screens (481px - 760px), align Back button with bot message left edge */
@media screen and (481px <= width <= 760px) {
  .navigation-buttons-only {
    margin-left: calc(50px + 0.75rem);
  }
}

/* ===========================================================================
   ANDROID KEYBOARD HANDLING
   =========================================================================== */

/*
 * When Android virtual keyboard appears, viewport shrinks.
 * The viewport-height controller adds data-viewport-adjusted attribute to main#chat-container.
 *
 * Solution:
 * - Change grid layout from `auto auto` to `1fr auto`
 * - #chat-messages takes all available space (scrollable)
 * - #chat-input-area stays auto-sized
 * - Remove center alignment to prevent squishing
 * - Input field stays visible, messages are scrollable (NOT gray area!)
 */

main#chat-container[data-viewport-adjusted="true"] {
  /* Change grid layout: messages take all space, input is auto */
  grid-template-rows: 1fr auto !important;

  /* Remove center alignment (causes squishing) */
  align-content: start !important;
}

/* ===========================================================================
   M2: FOCUS MODE (wizard-style one question at a time)
   =========================================================================== */

/*
 * Focus Mode shows only the current question (wizard-style).
 * Messages are replaced instead of appended on each step.
 * Visual style: centered single question with cleaner appearance.
 */

main#chat-container.focus-mode {
  /* Center content vertically for single-question display */
  align-content: center;
}

main#chat-container.focus-mode section#chat-messages {
  /* Allow messages area to grow but keep it centered */
  flex-grow: 0;
}

/* Focus Mode typing indicator - shows immediately and fades out in ~1s */
.typing-indicator--focus {
  animation: focus-typing-fade 1s ease-in-out forwards !important;
  animation-delay: 0s !important;
}

/* GPU compositor-only: focus mode typing indicator fade and collapse */
@keyframes focus-typing-fade {
  0% {
    opacity: 0;
    transform: scaleY(1);
  }

  10% {
    opacity: 1;
    transform: scaleY(1);
  }

  80% {
    opacity: 1;
    transform: scaleY(1);
  }

  100% {
    opacity: 0;
    transform: scaleY(0);
  }
}

/* In Focus Mode, typing indicator can be simpler */
main#chat-container.focus-mode .typing-indicator {
  margin-top: 0.5rem;
}

/* Focus Mode animations - bot message appears after typing indicator
 * Uses focus-delayed-appear keyframes:
 * - 0-70%: element stays invisible (opacity: 0, scale: 0)
 * - 70-100%: element animates in (typing indicator duration ~1.05s = 70% of 1.5s)
 * Total animation duration 1.5s ensures typing dots finish before message appears
 */
main#chat-container.focus-mode article.message.animate-focus-bot {
  animation: focus-delayed-appear 1.5s ease-out both !important;
  opacity: 0;
  transform: translateY(-30px) rotateX(-10deg) scale(0);
  transform-origin: 50% 0%;
}

/* Focus Mode input wrapper - appears with bot message */
main#chat-container.focus-mode #input-wrapper.animate-focus-input {
  animation: focus-delayed-appear 1.5s ease-out both;
  opacity: 0;
  transform: translateY(-30px) rotateX(-10deg) scale(0);
  transform-origin: 50% 0%;
}

/* ===========================================================================
   M5: WIZARD MODE (progress bar + step counter + footer navigation)
   =========================================================================== */

/*
 * Wizard Mode adds visual progress tracking to Focus Mode:
 * - Step counter showing "STEP X OF Y"
 * - Progress bar with completed/pending segments
 * - Back button in footer (instead of inline)
 * - Asymmetric layout with decorative image panel (Squarespace style)
 */

/* ---------------------------------------------------------------------------
   WIZARD MODE - Asymmetric Layout (Squarespace style)
   Source: docs/design-references/squarespace/2nd_page/.../index_002.css
   Layout: [content panel: 1fr] [image panel: 380px]
   --------------------------------------------------------------------------- */

:where(body, .preview-wrapper)[data-layout="wizard"] {
  grid-template-columns: 1fr;
  padding: 0;
}

:where(body, .preview-wrapper)[data-layout="wizard"] header {
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: 10;
  padding: 1.4rem 2.5rem;
}

:where(body, .preview-wrapper)[data-layout="wizard"] header h1 {
  text-shadow: none;
}

:where(body, .preview-wrapper)[data-layout="wizard"] header h2 {
  text-shadow: none;
}

:where(body, .preview-wrapper)[data-layout="wizard"] header .header-link {
  color: var(--theme-main-text-color);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
}

:where(body, .preview-wrapper)[data-layout="wizard"] header .header-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentcolor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-out;
}

:where(body, .preview-wrapper)[data-layout="wizard"] header .header-link:hover::after {
  transform: scaleX(1);
}

/* Header link: text visible, icon hidden on desktop */
:where(body, .preview-wrapper)[data-layout="wizard"] header .header-link-icon {
  display: none;
  width: 24px;
  height: 24px;
}

:where(body, .preview-wrapper)[data-layout="wizard"] main {
  grid-column: 1;
  grid-row: 2;
}

:where(body, .preview-wrapper)[data-layout="wizard"] main#chat-container {
  align-content: start;
  padding-top: 8%;
}


:where(body, .preview-wrapper)[data-layout="wizard"] main#chat-container section#chat-input-area {
  max-width: none;
  padding: 0 2.5rem;
}

:where(body, .preview-wrapper)[data-layout="wizard"] #chat_input {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto;
  gap: 0 4rem;
  align-items: start;
}

/* Колонка 1 */
:where(body, .preview-wrapper)[data-layout="wizard"] #wizard_step_counter {
  display: none;
}

:where(body, .preview-wrapper)[data-layout="wizard"] #chat_input article.message--bot {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  grid-template-areas: none;
  gap: 0;
}

:where(body, .preview-wrapper)[data-layout="wizard"] article.message .message__bubble {
  padding: 0;
  font-size: 22px;
  font-weight: 300;
  background: transparent;
}

/* Wizard desktop - larger font for question caption */
@media (width > 768px) {
  :where(body, .preview-wrapper)[data-layout="wizard"] article.message .message__bubble {
    font-size: 34px;
  }
}

/* Wizard mode subtitle - Squarespace style: subtle, close to question */
:where(body, .preview-wrapper)[data-layout="wizard"] .message__subtitle {
  font-size: 14px;
  font-weight: 400;
  margin-top: 0.25rem;
  color: rgb(117, 117, 117);
}

@media (width > 768px) {
  :where(body, .preview-wrapper)[data-layout="wizard"] .message__subtitle {
    font-size: 16px;
  }
}

/* Wizard mode - disable all animations */
:where(body, .preview-wrapper)[data-layout="wizard"] article.message {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

:where(body, .preview-wrapper)[data-layout="wizard"] .typing-indicator {
  display: none !important;
}

/* Wizard input - Squarespace style */
:where(body, .preview-wrapper)[data-layout="wizard"] .chat-input-inline {
  background: var(--theme-input-bg);
  border: none;
  border-bottom: 1px solid var(--theme-input-border);
  border-radius: var(--theme-input-radius);
  padding: 1rem 3.5rem 1rem 1rem;
}

:where(body, .preview-wrapper)[data-layout="wizard"] .chat-input-inline:focus {
  outline: none;
  border-bottom: 1px solid var(--theme-main);
}

:where(body, .preview-wrapper)[data-layout="wizard"] .chat-input-inline::placeholder {
  color: var(--theme-input-placeholder);
  font-weight: 400;
  opacity: 1;
}

/* Wizard option buttons - tag style */
:where(body, .preview-wrapper)[data-layout="wizard"] .option-button {
  border-width: 1px;
  padding: 1rem;
  border-radius: 0;
  box-shadow: none;
  width: auto;
}

:where(body, .preview-wrapper)[data-layout="wizard"] .option-button:hover {
  background: var(--theme-user-bubble-hover);
  transform: none;
  box-shadow: none;
}

:where(body, .preview-wrapper)[data-layout="wizard"] .option-button:focus,
:where(body, .preview-wrapper)[data-layout="wizard"] .option-button:focus-visible,
:where(body, .preview-wrapper)[data-layout="wizard"] .option-button.keyboard-focus {
  outline: none !important;
  border-bottom: 1px solid var(--theme-main);
  box-shadow: none;
}

:where(body, .preview-wrapper)[data-layout="wizard"] .options-label {
  display: none;
}

:where(body, .preview-wrapper)[data-layout="wizard"] .options-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

:where(body, .preview-wrapper)[data-layout="wizard"] #wizard_progress {
  grid-column: 1;
  grid-row: 2;
  margin-top: 4rem;
}

/* Desktop: input beside question */
:where(body, .preview-wrapper)[data-layout="wizard"] #input-wrapper {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

:where(body, .preview-wrapper)[data-layout="wizard"] footer {
  grid-column: 1 / -1;
  grid-row: 3;
  padding: 0.8rem 2.5rem;
  border: 0;
  border-radius: 0;
  box-shadow: 0 8px 32px 0 rgb(0, 0, 0, 0.12), 0 0 1px 0 rgb(0, 0, 0, 0.08);
  background-color: var(--background-color);
}

.wizard-progress-bar {
  background-color: var(--theme-input-border);
  border-radius: 1px;
  height: 2px;
  position: relative;
  width: min(calc(var(--total-steps, 1) * 30px), 480px);
}

.wizard-progress-bar::after {
  content: "";
  background-color: var(--theme-main);
  border-radius: 1px;
  height: 2px;
  position: absolute;
  top: 0;
  left: calc((var(--current-step, 1) - 1) * 100% / var(--total-steps, 1));
  width: calc(100% / var(--total-steps, 1));
  transition: width 0.3s ease-out;
}

.wizard-navigation {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* FOOTER BUTTONS */

.wizard-btn {
  width: 5rem;
  height: 3.4rem;
  font-weight: 600;
  text-rendering: optimizelegibility;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: none;
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
}

/* BACK BUTTON */

/* BACK button - Squarespace LocalDevAction-Secondary exact style */
.footer-back .wizard-btn {
  background: transparent;
  color: var(--theme-main);
  border: 1px solid var(--theme-input-border);
}

/* BACK button hover - skew animation ::before */
.footer-back .wizard-btn::before {
  content: "";
  display: block;
  pointer-events: none;
  position: absolute;
  z-index: -1;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  background-color: var(--theme-user-bubble-hover);
  transform: translate3d(-130%,0,0) skew(-30deg);
  transition: transform .4s cubic-bezier(.645,.045,.355,1),opacity .4s cubic-bezier(.645,.045,.355,1);
}

.footer-back .wizard-btn:hover::before {
  opacity: 1;
  transform: translateZ(0) skew(0deg);
}

/* NEXT */

/* NEXT/FINISH button - Squarespace LocalDevAction-Primary exact style */
.footer-next .wizard-btn {
  color: var(--theme-alt-text-color);
  background-color: var(--theme-main);
  z-index: 0;
}

/* NEXT button hover - skew animation ::before */
.footer-next .wizard-btn::before {
  content: "";
  display: block;
  pointer-events: none;
  position: absolute;
  z-index: -1;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  background-color: var(--theme-main-hover);
  transform: translate3d(-130%,0,0) skew(-30deg);
  transition: transform .4s cubic-bezier(.645,.045,.355,1),opacity .4s cubic-bezier(.645,.045,.355,1);
}

.footer-next .wizard-btn:hover::before {
  opacity: 1;
  transform: translateZ(0) skew(0deg);
}


@media (width >= 1281px) {
  :where(body, .preview-wrapper)[data-layout="wizard"] {
    grid-template-columns: 3fr 1fr;
  }

  :where(body, .preview-wrapper)[data-layout="wizard"] header .header-link {
    color: var(--theme-alt-text-color);
  }

  :where(body, .preview-wrapper)[data-layout="wizard"] aside {
    display: block;
    padding: 1rem;
    padding-top: 4rem;
  }

  :where(body, .preview-wrapper)[data-layout="wizard"] footer {
    grid-column: 1;
    grid-row: 3;
  }
}

/* Wizard mobile layout */
@media (width <= 768px) {
  :where(body, .preview-wrapper)[data-layout="wizard"] header .header-link-text {
    display: none;
  }

  :where(body, .preview-wrapper)[data-layout="wizard"] header .header-link-icon {
    display: block;
  }

  :where(body, .preview-wrapper)[data-layout="wizard"] header .header-link::after {
    display: none;
  }

  :where(body, .preview-wrapper)[data-layout="wizard"] main#chat-container section#chat-input-area {
    padding: 0 1rem;
  }

  :where(body, .preview-wrapper)[data-layout="wizard"] #chat_input {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  :where(body, .preview-wrapper)[data-layout="wizard"] #input-wrapper {
    grid-column: 1;
    grid-row: 2;
  }

  :where(body, .preview-wrapper)[data-layout="wizard"] #wizard_progress {
    grid-column: 1;
    grid-row: 3;
  }

  /* #77: spacing between question and buttons, #78: single-column layout */
  :where(body, .preview-wrapper)[data-layout="wizard"] .options-container {
    margin-top: 1.5rem;
    grid-template-columns: 1fr;
  }

  /* #133: keep image cards as a 2x2 grid on mobile wizard so all four cards
     fit closer to one viewport (otherwise default-cards mobile renders one
     full-width card per row with a 4/3 image — David: lower conversion). */
  :where(body, .preview-wrapper)[data-layout="wizard"] .options-container--cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* #133: image-card image is shorter inside the Wizard layout so the card
   stays compact next to the side aside-image. Outside Wizard the cards
   keep their default 4 / 3 photographic aspect ratio. */
:where(body, .preview-wrapper)[data-layout="wizard"] .options-container--cards .option-card__image {
  aspect-ratio: 16 / 9;
}

/* #134: small-mobile compression fix on Wizard layout (iPhone SE/13 mini,
   Galaxy S10 ~360 px). David: "feeling compressed" on small mobile;
   he explicitly approved hiding the progress bar to free vertical space.
   Card titles get truncated by the default ellipsis on the 2-col grid;
   force-wrap them so long labels stay readable. */
@media (width <= 430px) {
  :where(body, .preview-wrapper)[data-layout="wizard"]
    article.message .message__bubble {
    font-size: 18px;
  }

  :where(body, .preview-wrapper)[data-layout="wizard"]
    .options-container--cards .option-card__image {
    aspect-ratio: 5 / 2;
  }

  /* Icon-mode keeps a taller box; otherwise the 60% icon with
     transform: scale(1.2) gets cropped at top and bottom. */
  :where(body, .preview-wrapper)[data-layout="wizard"]
    .options-container--cards
    .option-card__image:has(.option-card__image-inner--icon) {
    aspect-ratio: 16 / 9;
  }

  :where(body, .preview-wrapper)[data-layout="wizard"] #wizard_progress {
    display: none;
  }

  :where(body, .preview-wrapper)[data-layout="wizard"] footer {
    padding: 0.5rem 1rem;
  }

  :where(body, .preview-wrapper)[data-layout="wizard"] .wizard-btn {
    width: 4rem;
    height: 2.6rem;
  }

  :where(body, .preview-wrapper)[data-layout="wizard"] .option-card__title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  :where(body, .preview-wrapper)[data-layout="wizard"] header {
    padding: 0.8rem 1rem;
  }

  :where(body, .preview-wrapper)[data-layout="wizard"] header h1 {
    font-size: 1rem;
    line-height: 1.2;
  }

  :where(body, .preview-wrapper)[data-layout="wizard"] header h2 {
    font-size: 0.8125rem;
    line-height: 1.3;
  }
}

/* ===========================================================================
   M15 Scroll Layout — reset chat-grid for scroll mode (#7).
   Scroll layout is a standard landing page: normal document flow, header
   and footer scroll with the page, no `min-height: 100vh` centering.
   The only sticky element is the package box on desktop (Step 6).
   =========================================================================== */

/* Critical inline CSS in app/views/layouts/chat.html.haml locks html and
   body to height:100% with overflow:hidden and display:grid for the
   chat-card layout. Scroll layout needs normal page flow. */
html:has(body[data-layout="scroll"]),
body[data-layout="scroll"] {
  height: auto;
  overflow: auto;
}

body[data-layout="scroll"] {
  display: block;
  grid-template-rows: initial;
  padding: 0;
}

:where(body, .preview-wrapper)[data-layout="scroll"] main#chat-container {
  display: block;
  overflow: visible;
  align-content: initial;
  justify-items: initial;
  padding: 0;
}

:where(body, .preview-wrapper)[data-layout="scroll"] .scroll-page {
  max-width: none;
  margin: 0;
}

:where(body, .preview-wrapper)[data-layout="scroll"] .scroll-page__sections {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Sections stretch edge-to-edge so the zebra alternation reads as full-width
   colour bands (monkey.travel style); the inner content (.section > *) is
   centred and capped at the readable width below. */
:where(body, .preview-wrapper)[data-layout="scroll"] .section {
  margin: 0;
  padding: 4rem 1rem;
  background: var(--background-color, transparent);
}

:where(body, .preview-wrapper)[data-layout="scroll"] .section:nth-child(odd) {
  background: #fff;
}

:where(body, .preview-wrapper)[data-layout="scroll"] .section:nth-child(even) {
  background: #efefef;
}

:where(body, .preview-wrapper)[data-layout="scroll"] .section__title,
:where(body, .preview-wrapper)[data-layout="scroll"] .section__subtitle,
:where(body, .preview-wrapper)[data-layout="scroll"] .section form {
  max-width: 1100px;
  margin-inline: auto;
}

/* Inputs (text, email, phone, textarea) are narrower than the full
   reading column so they read as a compact form field rather than a
   page-wide bar; left-aligned in the 1100px column to share the same
   left edge as the section title and the first option card. */
:where(body, .preview-wrapper)[data-layout="scroll"] .section .input-container-inline {
  max-width: 560px;
  margin-inline: 0 auto;
}

:where(body, .preview-wrapper)[data-layout="scroll"] .section__subtitle {
  margin: 0.25rem auto 1.5rem;
  font-size: 0.95rem;
  color: var(--theme-input-text);
  opacity: 0.7;
}

:where(body, .preview-wrapper)[data-layout="scroll"] .section__title {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin: 0 auto 0.5rem;
}

/* M15 Scroll Layout: every section stays fully visible regardless of
   its state. Active/completed/upcoming only affect which section the
   scroll controller centers; nothing visually dims. */
:where(body, .preview-wrapper)[data-layout="scroll"] .section--active,
:where(body, .preview-wrapper)[data-layout="scroll"] .section--completed,
:where(body, .preview-wrapper)[data-layout="scroll"] .section--upcoming {
  opacity: 1;
}

/* Default-mode masthead — white strip with the brand logo on the left
   and contact details on the right, mirroring the himalayanwonders.com
   reference David shared. The strip itself spans the full viewport
   (white edge-to-edge) but the logo+contacts content is held in the same
   1100px reading column as the section titles below, so the logo's left
   edge sits on the same vertical line as "1. Have you been trekking…"
   that follows. The logo asset is often a wide wordmark SVG, so the
   icon uses an explicit height with width: auto to render at the
   intended aspect ratio. */
:where(body, .preview-wrapper)[data-layout="scroll"] header {
  background: #fff;
  margin-bottom: 0;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.5rem max((100% - 1100px) / 2, 1rem);
}

:where(body, .preview-wrapper)[data-layout="scroll"] header .header-icon {
  width: auto;
  height: 80px;
  max-width: 320px;
}

/* Push .header-content all the way to the right edge of the masthead.
   Without margin-left: auto, the shared _header.html.haml partial places
   an empty #error-container as the third flex child after .header-content,
   so justify-content: space-between pulls THAT empty box to the right and
   leaves .header-content somewhere in the middle — visible as the phone
   text not lining up with the right edge of the section cards below.
   Removing the empty #error-container from the flex layout below also
   eliminates the 1rem flex-gap that would otherwise leave .header-content
   16px shy of the column right edge. */
:where(body, .preview-wrapper)[data-layout="scroll"] header .header-content {
  flex: 0 1 auto;
  text-align: right;
  margin-left: auto;
}

:where(body, .preview-wrapper)[data-layout="scroll"] header #error-container {
  display: none;
}

/* Auto-linked phone numbers in H1/H2 — em-based icon sizing so the
   handset glyph scales with the heading font and stays just under the
   digit cap-height instead of towering above it. The icon size attribute
   on the SVG is a fallback; CSS height in ems wins. */
:where(body, .preview-wrapper)[data-layout="scroll"] .phone-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

:where(body, .preview-wrapper)[data-layout="scroll"] .phone-link__icon {
  height: 0.8em;
  width: auto;
}

/* Mobile: hide the H1/H2 contact block; only the logo stays in the
   masthead so the strip doesn't get cramped on narrow viewports. */
@media (width < 760px) {
  :where(body, .preview-wrapper)[data-layout="scroll"] header .header-content {
    display: none;
  }
}

:where(body, .preview-wrapper)[data-layout="scroll"] header h1 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: none;
  color: var(--theme-input-text);
  line-height: 1.2;
  margin: 0;
}

:where(body, .preview-wrapper)[data-layout="scroll"] header h2 {
  font-size: 1.125rem;
  font-weight: 400;
  text-shadow: none;
  color: var(--theme-input-text);
  opacity: 0.85;
  margin: 0;
}

/* Scroll layout icon-mode option cards — crisp centered icon on a clean
   background, no muted opacity and no zoom. The base .option-card__image-inner
   defaults (opacity 0.8, transform scale(1.2)) are tuned for photo cards;
   icon-mode in scroll layout needs the icon sharp and steady. */
:where(body, .preview-wrapper)[data-layout="scroll"]
  .option-card__image-inner--icon {
  opacity: 1;
  transform: none;
  background-size: 35%;
}

/* Suppress the hover-zoom transition for one frame after the scroll
   layout (re)mounts via Turbo Stream. Without this, the freshly mounted
   .option-card__image-inner starts at the base state (transform: scale(1.2))
   and immediately animates to the hover state because the cursor was
   already over the card when the swap happened — that animation reads
   as a flicker. The scroll-layout Stimulus controller adds this class on
   connect and removes it on the next animation frame so that interactive
   hover keeps working normally for subsequent mouse-moves. */
:where(body, .preview-wrapper)[data-layout="scroll"]
  .option-card__image-inner.option-card__image-inner--no-transition {
  transition: none;
}

/* M15 Scroll Layout default-mode header band — a thin strip showing a
   horizontal slice of the same background image used by the full hero.
   Cover sizing preserves the image aspect ratio so a tall landscape
   keeps its proportions when shown in the 200px strip; centred on both
   axes so the horizon line lands roughly in the middle of the band.
   Acts as a positioning context for the optional greeter overlay (the
   Pablo-style avatar + welcome bubble pair). */
:where(body, .preview-wrapper)[data-layout="scroll"] .scroll-header-band {
  position: relative;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Greeter overlay — avatar photo on the left, speech-bubble on the
   right, positioned over the band. Centred horizontally in the same
   1100px reading column the section content uses. Hidden on mobile
   along with the masthead H1/H2 to keep the strip uncluttered. */
:where(body, .preview-wrapper)[data-layout="scroll"] .scroll-header-greeter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-inline: max((100% - 1100px) / 2, 1rem);
}

:where(body, .preview-wrapper)[data-layout="scroll"] .scroll-header-greeter__avatar {
  width: 110px;
  height: 110px;
  object-fit: cover;
}

/* Chat-style speech bubble: rounded white block with a small triangular
   tail on the left that points at the avatar. Matches the messenger-style
   bubble David shows next to Pablo on himalayanwonders.com. */
:where(body, .preview-wrapper)[data-layout="scroll"] .scroll-header-greeter__bubble {
  position: relative;
  background: #fff;
  color: var(--theme-input-text);
  padding: 1rem 1.25rem;
  border-radius: 12px;
  font-size: 1rem;
  line-height: 1.4;
  max-width: 560px;
  box-shadow: 0 4px 16px rgb(0, 0, 0, 0.18);
}

:where(body, .preview-wrapper)[data-layout="scroll"] .scroll-header-greeter__bubble::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-right: 12px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* In the full-viewport hero, the greeter is stacked together with the
   hero heading inside .scroll-hero__main (a column flex container), so
   it appears directly above the phone number / H1. Drop the absolute
   positioning so it flows naturally. The band variant keeps the
   default centred-on-both-axes absolute placement. */
:where(body, .preview-wrapper)[data-layout="scroll"] .scroll-hero__main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

:where(body, .preview-wrapper)[data-layout="scroll"] .scroll-hero__main .scroll-header-greeter {
  position: static;
  inset: auto;
  padding-inline: 0;
}

/* Mobile: hide the greeter only inside the default-mode band where the
   strip is too short to host an avatar+bubble. In the full-viewport
   hero the greeter stays visible — there is plenty of vertical room
   above the centred phone block. */
@media (width < 760px) {
  :where(body, .preview-wrapper)[data-layout="scroll"] .scroll-header-band .scroll-header-greeter {
    display: none;
  }
}

/* M15 Scroll Layout hero — monkey.travel-style 100vh hero block with
   background image, dark overlay for legibility, centered title and
   subtitle, optional package box pinned to the right on desktop. */
:where(body, .preview-wrapper)[data-layout="scroll"] .scroll-hero {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 2rem;
  overflow: hidden;
}

:where(body, .preview-wrapper)[data-layout="scroll"] .scroll-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(0, 0, 0, 0.08), rgb(0, 0, 0, 0.15));
  pointer-events: none;
}

:where(body, .preview-wrapper)[data-layout="scroll"] .scroll-hero .hero {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 800px;
  text-align: center;
  color: #fff;
  padding: 0;
}

:where(body, .preview-wrapper)[data-layout="scroll"]
  .scroll-hero .hero__title,
:where(body, .preview-wrapper)[data-layout="scroll"]
  .scroll-hero .hero__subtitle {
  color: #fff;
  text-shadow: 0 2px 8px rgb(0, 0, 0, 0.7);
}

:where(body, .preview-wrapper)[data-layout="scroll"]
  .scroll-hero .hero__scroll-chevron {
  color: #fff;
}

:where(body, .preview-wrapper)[data-layout="scroll"] .scroll-hero__package {
  z-index: 2;
}

@media (width >= 1024px) {
  /* package_box is a flex sibling of .hero inside .scroll-hero, so the
     parent's justify-content: space-evenly distributes equal horizontal
     gaps around them — no absolute positioning needed.
     flex-shrink: 0 prevents the box from being squeezed below 320px on
     tight desktop widths; the .hero block (default flex-shrink: 1)
     absorbs the lack of room instead. */
  :where(body, .preview-wrapper)[data-layout="scroll"] .scroll-hero__package {
    flex: 0 0 320px;
  }
}

@media (width <= 1023px) {
  :where(body, .preview-wrapper)[data-layout="scroll"] .scroll-hero__package {
    display: none;
  }

  /* Mobile hero peek — let the first question section show through above
     the mobile fold (page 4 of David's April 26 PDF). Shorter banner on
     small screens hints at "there is more below, scroll down". */
  :where(body, .preview-wrapper)[data-layout="scroll"] .scroll-hero {
    min-height: 75vh;
  }
}

/* monkey.travel-style "Easy Steps" overlay box: dark semi-transparent
   background, white text, accent-coloured uppercase CTA. Overrides the
   generic white card look the package_box partial inherits in chat
   layouts so the hero overlay reads like a focused conversion CTA. */
:where(body, .preview-wrapper)[data-layout="scroll"]
  .scroll-hero__package .package-box {
  background: rgb(0, 0, 0, 0.66);
  color: #fff;
  border: 2px solid #000;
  padding: 1.25rem 1.5rem;
}

:where(body, .preview-wrapper)[data-layout="scroll"]
  .scroll-hero__package .package-box__name,
:where(body, .preview-wrapper)[data-layout="scroll"]
  .scroll-hero__package .package-box__price,
:where(body, .preview-wrapper)[data-layout="scroll"]
  .scroll-hero__package .package-box__price-label,
:where(body, .preview-wrapper)[data-layout="scroll"]
  .scroll-hero__package .package-box__features li {
  color: #fff;
}

:where(body, .preview-wrapper)[data-layout="scroll"]
  .scroll-hero__package .package-box__cta {
  background: var(--theme-main);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 0;
}

:where(body, .preview-wrapper)[data-layout="scroll"]
  .scroll-hero__package .package-box__link {
  color: #fff;
  opacity: 0.85;
}

/* Cards at a fixed width regardless of option count, left-aligned within
   the section container so the row shares its left edge with the section
   title. Avoids the visual jump between 2-option questions (huge cards)
   and 4-option questions (small cards) that auto-fit/1fr produced. The
   padding override drops the chat-style 8px inset so the leftmost card
   sits flush with the title's left edge. Card width 260px + 20px gap is
   chosen so a 4-card row spans exactly the 1100px reading column the
   masthead H1/H2, section titles, and input fields all use — i.e.
   4 × 260 + 3 × 20 = 1100 — keeping the right edge consistent across
   all blocks in the scroll layout. */
:where(body, .preview-wrapper)[data-layout="scroll"]
  .options-container--cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, 260px);
  justify-content: start;
  gap: 1.25rem;
  margin-top: 1rem;
  padding: 0;
}

/* Mobile: drop the fixed 260px card width and stretch two equal cards
   per row so they fit comfortably on narrow screens — a single 260px
   card would otherwise leave large empty rails on either side. */
@media (width < 760px) {
  :where(body, .preview-wrapper)[data-layout="scroll"]
    .options-container--cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  :where(body, .preview-wrapper)[data-layout="scroll"]
    .options-container--cards .option-card__body {
    padding: 0.375rem;
  }

  :where(body, .preview-wrapper)[data-layout="scroll"]
    .options-container--cards .option-card__title {
    padding: 0.25rem 0.375rem 0;
    font-size: 0.875rem;
    margin-bottom: 0.125rem;
  }
}

:where(body, .preview-wrapper)[data-layout="scroll"] .option-card__title {
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  padding: 0.5rem 0.75rem 0;
}

:where(body, .preview-wrapper)[data-layout="scroll"]
  .option-card__subtitle {
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 0.25rem 0.75rem 0.75rem;
  white-space: normal;
}

/* Monkey-style completed: chosen option keeps full opacity and a themed
   accent border; the others fade so the chosen one stands out without
   removing the visual context. */
:where(body, .preview-wrapper)[data-layout="scroll"] .option-card--chosen {
  border: 4px solid var(--theme-main);
}

:where(body, .preview-wrapper)[data-layout="scroll"] .option-button--chosen {
  background-color: var(--theme-main);
  color: var(--theme-alt-text-color);
  border-color: var(--theme-main);
}

/* ===========================================================================
   PART 10: PACKAGE INFO BOX
   Sidebar card with tour package details (price, features, CTA).
   Triggered by data-package-box="true" on body.
   Design reference: himalayanwonders.com chatbot page (rt_panelbox).
   =========================================================================== */

/* Desktop: 2-column grid with aside sidebar */
@media (width >= 1024px) {
  :where(body, .preview-wrapper)[data-package-box="true"]:not([data-layout="wizard"]) {
    grid-template-columns: 1fr minmax(auto, 900px) 320px 1fr;
  }

  :where(body, .preview-wrapper)[data-package-box="true"]:not([data-layout="wizard"]) header {
    grid-column: 1 / -1;
  }

  :where(body, .preview-wrapper)[data-package-box="true"]:not([data-layout="wizard"]) main#chat-container {
    grid-column: 2;
  }

  :where(body, .preview-wrapper)[data-package-box="true"]:not([data-layout="wizard"]) footer {
    grid-column: 1 / -1;
  }

  :where(body, .preview-wrapper)[data-package-box="true"]:not([data-layout="wizard"]) aside {
    display: block;
    grid-column: 3;
    grid-row: 2;
    overflow-y: auto;
    max-height: calc(100vh - 80px);
    align-self: start;
    position: sticky;
    top: 0.5rem;
  }

  :where(body, .preview-wrapper)[data-package-box="true"] aside .package-box {
    padding: 1.5rem;
    margin: 0 0.5rem;
  }

  /* Wizard + package: limit width so box is vertical rectangle or square */
  :where(body, .preview-wrapper)[data-layout="wizard"][data-package-box="true"] aside .package-box {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* Package box defaults (low specificity — overridable by theme element_overrides) */
.package-box {
  background: var(--theme-input-bg);
  color: var(--theme-input-text);
  border: 1px solid var(--theme-input-border);
  border-radius: var(--theme-input-radius);
}

/* Price section */
.package-box__price-section {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px dotted var(--theme-input-border);
}

.package-box__price-label {
  font-size: var(--font-size-sm);
  color: var(--theme-input-text);
  margin-bottom: 0.25rem;
}

.package-box__price {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--theme-main);
  line-height: 1.2;
}

/* Package name */
.package-box__name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--theme-input-text);
  margin: 0 0 1rem;
  line-height: 1.3;
}

/* Feature list with green checkmarks */
.package-box__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.package-box__features li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.625rem;
  font-size: var(--font-size-sm);
  color: var(--theme-input-text);
  line-height: 1.5;
}

.package-box__features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--theme-main);
  font-weight: 700;
}

.package-box__features li[data-bullet]::before {
  content: attr(data-bullet);
}

/* Image bullet mode */
.package-box__features--image li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-left: 0;
}

.package-box__features--image li::before {
  content: none;
}

.package-box__bullet-img {
  flex-shrink: 0;
  border-radius: 50%;
  margin-top: 0.2rem;
}

/* CTA button — matches .option-button styling */
.package-box__cta {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--theme-choice-btn-bg);
  color: var(--theme-user-bubble-text-color);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--font-size-sm);
  letter-spacing: 0.05em;
  border: 2px solid var(--theme-choice-btn-border);
  border-radius: 7px;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.package-box__cta:hover {
  background: var(--theme-main-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--theme-main-shadow);
}

/* Link text */
.package-box__link {
  display: block;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--theme-input-text);
  letter-spacing: 0.05em;
}

.package-box__link:hover {
  text-decoration: underline;
}

/* ===========================================================================
   PART 11: HERO HEADER MODE (M14) — minimal verification block.
   In hero mode, a <div class="page-viewport"> replaces <main> in the body grid
   (takes its row/column). It wraps a <section class="hero"> + original <main>.
   The viewport is a flex column with overflow-y:auto; hero fills it first,
   user scrolls inside the viewport to reveal chat below.
   Body grid, aside, header, footer, theme rules are UNCHANGED.
   =========================================================================== */

body[data-header="hero"] > .page-viewport {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: none;
}

body[data-header="hero"] > .page-viewport::-webkit-scrollbar {
  display: none;
}

/* Package-box desktop: wrapper takes main's old grid column */
@media (width >= 1024px) {
  body[data-header="hero"][data-package-box="true"]:not([data-layout="wizard"]) > .page-viewport {
    grid-column: 2;
    grid-row: 2;
  }
}

body[data-header="hero"] > .page-viewport > .hero {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 1rem;
  text-align: center;
}

.hero .hero__title {
  margin: 0;
  font-size: clamp(2rem, 7vw, 5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgb(0, 0, 0, 0.6);
}

.hero .hero__subtitle {
  margin: 0.75rem 0 0;
  font-size: clamp(1rem, 2.5vw, 1.75rem);
  font-weight: 400;
  line-height: 1.3;
  text-shadow: 0 2px 6px rgb(0, 0, 0, 0.6);
}

/* Hero mode hides the compact header h1/h2 — hero overlay supplies the
   main title/subtitle, so avoid duplication. */
body[data-header="hero"] header .header-content h1,
body[data-header="hero"] header .header-content h2 {
  display: none;
}

/* Bottom chevron anchored to the hero section; click scrolls to chat. */
.hero {
  position: relative;
}

.hero__scroll-chevron {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: white;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgb(0, 0, 0, 0.6));
  animation: hero-chevron-bounce 1.8s ease-in-out infinite;
  opacity: 1;
  transition: opacity 0.25s ease-out;
}

body.is-scrolled .hero__scroll-chevron {
  opacity: 0;
  pointer-events: none;
}

.hero__scroll-chevron svg {
  width: 2rem;
  height: 2rem;
}

.hero__scroll-chevron:hover {
  opacity: 0.8;
}

@keyframes hero-chevron-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 0.5rem); }
}

/* When package box is visible on desktop, the package CTA is the primary
   scroll trigger — hide the redundant hero chevron. */
@media (width >= 1024px) {
  body[data-header="hero"][data-package-box="true"]:not([data-layout="wizard"]) .hero__scroll-chevron {
    display: none;
  }
}

body[data-header="hero"] > .page-viewport > main#chat-container {
  flex: 0 0 auto;
  width: 100%;
  margin-bottom: 6rem;
}

/* ===========================================================================
   PART 12: PACKAGE BANNER (#130)
   Compact sticky banner that replaces the sidebar .package-box after the
   visitor's first interaction in chat, hero, and wizard layouts. Uses
   position: fixed so it does not depend on body or container scroll context.
   Mobile/tablet keep the existing aside breakpoints unchanged.
   =========================================================================== */

/* Floats at the top-right of the viewport so the chat content can re-center
   in the freed-up column. Width capped to the original aside column width.
   Clicking dispatches the expand action which clears data-has-answered and
   restores the full sidebar package-box. */
.package-banner {
  position: fixed;
  top: 0.5rem;
  right: 0.5rem;
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  max-width: 320px;
  z-index: 100;
  background: var(--theme-input-bg);
  color: var(--theme-input-text);
  border: 1px solid var(--theme-input-border);
  border-radius: var(--theme-input-radius);
  box-shadow: 0 4px 12px rgb(0, 0, 0, 0.2);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease;
}

.package-banner:hover,
.package-banner:focus-visible {
  background: var(--theme-main);
  color: var(--theme-user-bubble-text-color);
  outline: none;
}

.package-banner__name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.package-banner__price {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: var(--font-size-base);
  white-space: nowrap;
}

/* Reveal the floating banner once the visitor has interacted */
body[data-has-answered="true"] .package-banner {
  display: flex;
}

/* Hide the full sidebar when the banner replaces it */
body[data-has-answered="true"] aside .package-box {
  display: none;
}

/* Hero CTA swap (#132): scroll variant is the initial face, external
   anchor takes over once the visitor has engaged (passed the hero or
   answered the first question). Tied to data-engaged, NOT data-has-
   answered, so clicking the banner to expand still keeps the external
   anchor visible instead of reverting to a no-op scrollToChat.
   Without a configured URL only the scroll variant is rendered, so the
   CTA simply hides post-engagement. */
.package-box__cta--external {
  display: none;
}

body[data-engaged="true"] .package-box__cta--scroll {
  display: none;
}

body[data-engaged="true"] .package-box__cta--external {
  display: block;
}

/* Free the aside column on desktop so chat content re-centers (non-wizard) */
@media (width >= 1024px) {
  body[data-package-box="true"][data-has-answered="true"]:not([data-layout="wizard"]) {
    grid-template-columns: 1fr minmax(auto, 900px) 1fr;
  }

  body[data-package-box="true"][data-has-answered="true"]:not([data-layout="wizard"]) aside {
    display: none;
  }
}