/* Chat-first trip intake (waffle flag: chat_first_intake).
   Centered prompt-first hero replacing the classic hero content on the
   home and trip-builder pages, styled to the approved concept artifact:
   dark glass double-bezel shell over the page's hero background image,
   foam text, amber CTA. Palette is scoped here so it renders identically
   on both pages regardless of page-level CSS. */

.intake-stage {
  --intake-ink: #06201e;
  --intake-sea: #0b2f2c;
  --intake-sea-2: #0e3833;
  --intake-teal: #186966;
  --intake-teal-soft: #2f8a85;
  --intake-foam: #e8f2f0;
  --intake-foam-dim: rgba(232, 242, 240, 0.62);
  --intake-foam-faint: rgba(232, 242, 240, 0.38);
  --intake-amber: #ffb000;
  --intake-hairline: rgba(232, 242, 240, 0.09);
  --intake-hairline-strong: rgba(232, 242, 240, 0.16);
  --intake-ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* Height reserved for the conversation, live or demo. Clamped rather
     than a bare vh so a short laptop viewport does not eat the page and a
     phone still gets a readable thread. */
  --intake-thread-h: clamp(9rem, 26vh, 15rem);
  /* Once the conversation is live the hero yields its space to it. */
  --intake-thread-h-live: clamp(15rem, 48vh, 28rem);

  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.intake-hidden {
  display: none !important;
}

/* ---- Head ---- */
.intake-stage__head {
  text-align: center;
  color: var(--intake-foam);
}

.intake-stage__head h1 {
  margin: 0 0 0.9rem;
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
}

.intake-stage__head h1 em {
  font-style: italic;
  color: var(--intake-amber);
}

.intake-stage__sub {
  margin: 0 auto;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  line-height: 1.55;
}

.intake-stage__head--live .intake-stage__sub {
  display: none;
}

/* ---- Double-bezel shell ---- */
.intake-shell {
  padding: 0.15rem;
  border-radius: 1.6rem;
  background: rgba(232, 242, 240, 0.045);
  border: 1px solid var(--intake-hairline);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.intake-core {
  border-radius: 1.4rem;
  background: linear-gradient(180deg, var(--intake-sea-2), var(--intake-sea));
  border: 1px solid var(--intake-hairline);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---- Conversation thread ---- */

/* One fixed-height slot shared by the live thread and the demo thread.
   Both fill it absolutely, so the hero card is exactly the same height
   whether the demo is playing, has been torn down, or a real
   conversation is streaming into it. The guarantee is structural: it
   does not depend on the demo tearing down before real content lands. */
.intake-threadslot {
  position: relative;
  flex: 0 0 auto;
  height: var(--intake-thread-h);
}

.intake-thread {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.25rem 1.25rem 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.intake-thread:empty {
  display: none;
}

/* ---- Live conversation: the hero yields its room to the chat ----

   Keyed on the REAL thread having content, never on the demo. The demo
   renders into a sibling and deliberately leaves #intake-thread empty, so
   watching it here would shrink the headline at a visitor who has not said
   anything yet, and the whole point of the shared fixed slot is that the
   demo changes no layout at all.

   :has() is a progressive enhancement. Without it nothing shrinks and the
   page is exactly as it was, which is a fine floor. */
.intake-stage:has(#intake-thread:not(:empty)) {
  gap: 0.85rem;
}

.intake-stage:has(#intake-thread:not(:empty)) .intake-stage__head h1 {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  margin-bottom: 0;
}

.intake-stage:has(#intake-thread:not(:empty)) .intake-composer {
  padding: 0.7rem;
}

.intake-stage:has(#intake-thread:not(:empty)) .intake-threadslot {
  height: var(--intake-thread-h-live);
}

@media (prefers-reduced-motion: no-preference) {
  .intake-stage,
  .intake-stage__head h1,
  .intake-composer,
  .intake-threadslot {
    transition:
      font-size 0.35s var(--intake-ease),
      height 0.35s var(--intake-ease),
      padding 0.35s var(--intake-ease),
      margin 0.35s var(--intake-ease),
      gap 0.35s var(--intake-ease);
  }
}

.intake-bubble {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: 88%;
}

.intake-bubble--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.intake-bubble--agent {
  align-self: flex-start;
}

.intake-bubble__avatar {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--intake-teal);
  color: #f4fbfa;
  font-size: 0.72rem;
}

/* White-space must stay normal here: templates indent freely, so any
   preserving value renders that indentation as padding inside the bubble.
   Intentional line breaks arrive as <br> via the linebreaksbr filter. */
.intake-bubble__text {
  padding: 0.55rem 0.85rem;
  border-radius: 1.05rem;
  font-size: 0.92rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* The agent's name, as an eyebrow line inside its bubble. */
.intake-bubble__name {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--intake-amber);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.intake-bubble--user .intake-bubble__text {
  background: var(--intake-teal);
  color: #f4fbfa;
  border-bottom-right-radius: 0.3rem;
}

.intake-bubble--agent .intake-bubble__text {
  background: rgba(232, 242, 240, 0.07);
  border: 1px solid var(--intake-hairline);
  border-bottom-left-radius: 0.3rem;
  color: var(--intake-foam);
}

.intake-bubble--error .intake-bubble__text {
  border-color: rgba(255, 176, 0, 0.55);
}

.intake-bubble__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  color: var(--intake-amber);
  font-size: 0.86rem;
  font-weight: 650;
  text-decoration: none;
}

.intake-bubble__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Composer ---- */
.intake-composer {
  padding: 1.25rem;
}

/* Gradient-glow field, adapted from uiverse.io/Tiagoadag/cuddly-catfish-6:
   a green-to-blue gradient layer sits behind the dark field; on hover or
   focus the field scales down a hair to reveal the gradient as a border
   while the wrapper picks up the soft green glow. */
.intake-field-glow {
  border-radius: 1.05rem;
  background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
  transition: box-shadow 0.3s var(--intake-ease);
}

.intake-field-glow:hover,
.intake-field-glow:focus-within {
  box-shadow: 0 0 30px 1px rgba(0, 255, 117, 0.3);
}

.intake-field {
  /* position stays: the typewriter ghost anchors to this box. */
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-right: 0.55rem;
  border-radius: 1rem;
  background: #0a2926;
  border: 1px solid var(--intake-hairline-strong);
  transition: transform 0.2s var(--intake-ease);
  transform: scale(1.004);
}

.intake-field-glow:hover .intake-field,
.intake-field-glow:focus-within .intake-field {
  transform: scale(0.99);
}

.intake-textarea {
  display: block;
  flex: 1 1 auto;
  /* A flex child must be allowed to shrink or a long unbroken word pushes
     the send button off the end of the row. */
  min-width: 0;
  /* One row. field-sizing grows it with the content where supported;
     everywhere else it stays one row and scrolls, which is the same
     behaviour a chat composer wants anyway. */
  min-height: 2.9rem;
  max-height: 8rem;
  field-sizing: content;
  padding: 0.72rem 0 0.72rem 1.05rem;
  background: transparent;
  border: 0;
  resize: none;
  overflow-y: auto;
  color: var(--intake-foam);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
}

.intake-textarea::placeholder {
  color: var(--intake-foam-faint);
}

.intake-textarea:focus {
  outline: none;
}

/* Compact send button docked inside the field (the big CTA is gone:
   the wizard's own buttons carry the flow once the chat starts). */
.intake-send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px: the minimum tap target, and the composer row is sized around it. */
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  background: var(--intake-amber);
  color: #241a02;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(255, 176, 0, 0.25);
  transition:
    transform 0.3s var(--intake-ease),
    box-shadow 0.3s var(--intake-ease);
}

.intake-send:hover {
  transform: translateX(1px);
  box-shadow: 0 10px 28px rgba(255, 176, 0, 0.35);
}

.intake-send:active {
  transform: scale(0.94);
}

.intake-send:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Up next: the one-line replacement for the old blueprint rail. */
.intake-upnext {
  margin: 0.55rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--intake-foam-faint);
  font-variant-numeric: tabular-nums;
}

.intake-upnext--empty {
  display: none;
}

/* ---- Actions row ---- */
.intake-bubble--typing .intake-bubble__text {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
}

.intake-typing__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--intake-teal-soft);
  animation: intake-typing-bounce 1.05s infinite var(--intake-ease);
}

.intake-typing__dot:nth-child(2) {
  animation-delay: 0.14s;
}

.intake-typing__dot:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes intake-typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  30% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

/* ---- Trust line + escape link ---- */
.intake-trust {
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  color: var(--intake-foam-faint);
  text-align: left;
}

.intake-toggle-classic {
  align-self: center;
  background: none;
  border: none;
  padding: 0.25rem 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: inherit;
  font-size: 0.84rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.35s var(--intake-ease);
}

.intake-toggle-classic:hover {
  color: #fff;
}

/* ---- Restored classic hero wrap ---- */
.classic-hero-wrap {
  display: contents;
}

.classic-hero-wrap.intake-hidden {
  display: none !important;
}

.intake-back-chat {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(6, 32, 30, 0.55);
  border: 1px solid rgba(232, 242, 240, 0.25);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  color: #fff;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.intake-back-chat:hover {
  background: rgba(6, 32, 30, 0.75);
}

@media (max-width: 640px) {
  .intake-stage {
    gap: 1.1rem;
  }

  .intake-send {
    /* Deliberately NOT shrunk below 44px: this is the primary action and
       mobile is where the tap target matters most. */
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* A summary row carrying an explanation rather than a value: quieter than a
   real field, so it reads as a note and not as something the user entered. */
.intake-step__summary-note {
  color: var(--intake-foam-dim);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* ---- Guided wizard steps (inline input widgets in the thread) ---- */
.intake-step {
  align-self: flex-start;
  width: min(calc(100% - 2.25rem), 440px);
  min-width: 0;
  margin-left: 2.25rem;
}

.intake-step__form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem;
  border-radius: 1.05rem;
  border: 1px solid var(--intake-hairline-strong);
  background: rgba(6, 32, 30, 0.55);
}

.intake-step--done .intake-step__form {
  opacity: 0.45;
  pointer-events: none;
}

.intake-step__input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  border-radius: 0.7rem;
  border: 1px solid var(--intake-hairline-strong);
  background: rgba(6, 32, 30, 0.75);
  color: var(--intake-foam);
  font: inherit;
  font-size: 0.92rem;
  color-scheme: dark;
}

.intake-step__input:focus {
  outline: none;
  border-color: rgba(255, 176, 0, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 176, 0, 0.1);
}

.intake-step__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.intake-step__date-label {
  flex: 1 1 150px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--intake-foam-faint);
}

.intake-step__input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  font-variant-numeric: tabular-nums;
}

.intake-step__input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
  cursor: pointer;
}

.intake-step__hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--intake-foam-faint);
}

.intake-step__go {
  align-self: flex-end;
  padding: 0.5rem 1.1rem;
  border: none;
  border-radius: 999px;
  background: var(--intake-teal);
  color: #f4fbfa;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.35s var(--intake-ease);
}

.intake-step__go:hover {
  background: var(--intake-teal-soft);
}

.intake-step__go--build {
  background: var(--intake-amber);
  color: #241a02;
  font-weight: 700;
}

.intake-step__go--build:hover {
  background: #ffbe33;
}

.intake-step__summary {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.88rem;
  color: var(--intake-foam);
}

.intake-step__summary span {
  display: inline-block;
  min-width: 3.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--intake-foam-faint);
}

.intake-step__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.intake-step__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--intake-hairline-strong);
  font-size: 0.8rem;
  color: var(--intake-foam-dim);
  cursor: pointer;
}

.intake-step__chip:has(input:checked) {
  border-color: rgba(47, 138, 133, 0.7);
  background: rgba(24, 105, 102, 0.25);
  color: var(--intake-foam);
}

.intake-step__chip input {
  accent-color: var(--intake-amber);
}

/* ============================================================
   Motion layer (pages that load the GSAP stack: motion.js +
   intake_motion.js + optionally intake_demo.js)
   ============================================================ */

/* Entrance pre-states. Gated on BOTH html.has-motion (set inline only
   when JS will animate) and no-preference, so no-JS, reduced-motion,
   and non-motion pages (which never add .has-motion) see everything. */
@media (prefers-reduced-motion: no-preference) {
  .has-motion .intake-stage__head h1,
  .has-motion .intake-stage__sub,
  .has-motion .intake-shell,
  .has-motion .intake-trust,
  .has-motion .intake-toggle-classic,
  .has-motion #intake-upnext {
    opacity: 0;
  }
}

/* Typewriter ghost: example prompts type over the (emptied) placeholder.
   Mirrors the textarea's font box exactly; never intercepts input. */
.intake-type-ghost {
  position: absolute;
  top: 0.72rem;
  left: 1.05rem;
  right: 3.6rem;
  display: none;
  color: var(--intake-foam-faint);
  font-size: 1rem;
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-height: 1.5rem;
  pointer-events: none;
}

.intake-type-ghost--on {
  display: block;
}

.intake-type-ghost--on::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--intake-amber);
  animation: intake-caret-blink 1.1s steps(1) infinite;
}

@keyframes intake-caret-blink {
  50% {
    opacity: 0;
  }
}

/* One-shot shine across the field bezel at the end of the entrance. */
.intake-field-glow {
  position: relative;
  overflow: hidden;
}

.intake-glow-sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  animation: intake-glow-sweep 1.1s var(--intake-ease) 1 forwards;
  pointer-events: none;
}

@keyframes intake-glow-sweep {
  to {
    transform: translateX(120%);
  }
}

/* Every bubble (real chat AND demo) lands with the same soft pop.
   Motivation: feedback; each message physically arrives. */
@media (prefers-reduced-motion: no-preference) {
  .intake-bubble {
    animation: intake-bubble-in 0.32s var(--intake-ease) backwards;
  }
}

@keyframes intake-bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}

/* ---- "Watch it plan" demo (flag: intake_demo) ---- */

.intake-demo {
  /* No position of its own: it carries .intake-thread, which already
     pins it to the shared slot. Overriding to relative here would put
     the demo back in flow and bring the resizing hero back. */
  display: flex;
}

/* Stays pinned while the demo thread scrolls: the "this is an example"
   honesty label must never scroll out of view mid-show. */
.intake-demo__tag {
  position: sticky;
  top: 0;
  z-index: 1;
  align-self: flex-end;
  flex-shrink: 0;
  padding: 0.14rem 0.55rem;
  border: 1px solid var(--intake-hairline-strong);
  border-radius: 999px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--intake-foam-dim);
  background: rgba(11, 47, 44, 0.85);
}

/* The mini plan card the demo assembles: same glass language as the
   shell, sized like an agent bubble. */
.intake-plancard {
  align-self: flex-start;
  margin-left: 2.1rem;
  width: min(19rem, 92%);
  padding: 0.9rem 1rem 0.95rem;
  border-radius: 0.9rem;
  border: 1px solid var(--intake-hairline-strong);
  background: linear-gradient(
    180deg,
    rgba(24, 105, 102, 0.28),
    rgba(11, 47, 44, 0.65)
  );
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}

.intake-plancard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.intake-plancard__title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.intake-plancard__meta {
  font-size: 0.74rem;
  color: var(--intake-foam-dim);
  white-space: nowrap;
}

.intake-plancard__route {
  display: block;
  width: 100%;
  height: auto;
  margin: 0.55rem 0 0.35rem;
}

.intake-plancard__path {
  stroke: var(--intake-teal-soft);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
  fill: none;
}

.intake-plancard__dot {
  fill: var(--intake-amber);
  stroke: rgba(36, 26, 2, 0.55);
  stroke-width: 1.5;
}

.intake-plancard__days {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.intake-plancard__day {
  align-self: flex-start;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--intake-hairline);
  background: rgba(232, 242, 240, 0.06);
  font-size: 0.76rem;
  color: var(--intake-foam);
}

/* Camera-roll entry point (photo_trips): a visible glass pill between the
   chat card and the classic-form toggle. A real affordance, not a text
   link — the underline-text version sat below the fold and was invisible. */
.intake-photos-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  max-width: 100%;
  margin-top: 0.9rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  text-decoration: none;
  transition:
    background 0.25s var(--intake-ease),
    border-color 0.25s var(--intake-ease);
}

.intake-photos-pill:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.intake-photos-pill__icon {
  color: var(--accent, #ffb000);
}

.intake-photos-pill__text {
  min-width: 0;
}

.intake-photos-pill__text strong {
  color: #fff;
}

.intake-photos-pill__go {
  font-size: 0.8rem;
  opacity: 0.7;
}