/* chat/chat.css — Airmango trip-request chat page */

:root {
  --ink:          #0f0f10;
  --ink-2:        #3a3a3e;
  --ink-3:        #76767e;
  --line:         #e7e7ea;
  --line-2:       #efeff1;
  --bg:           #ffffff;
  --bg-soft:      #fafafa;
  --pink:         #ec3d6e;
  --pink-soft:    #fdeef2;
  --bubble-ai:    #f4f5f7;
  --bubble-user:  #ec3d6e;
  --radius-md:    14px;
  --radius-pill:  22px;

  /* easing */
  --ease-state:   cubic-bezier(.4, 0, .2, 1);
  --ease-out:     ease-out;
}

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

html, body {
  height: 100%;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: #eceae4;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Site nav comes from /css/site-header.css + /js/site-header.js. */

/* ---- page wrapper ---- */
.page-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ====================================================================
   FORM VIEW
   ==================================================================== */

.form-view {
  flex: 1;
  padding: 40px 20px;
  animation: page-in 400ms var(--ease-out) forwards;
}

.form-outer {
  max-width: 480px;
  margin: 0 auto;
}

/* the embed card */
.embed {
  background: white;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  overflow: hidden;
}

/* header */
.embed-head {
  padding: 24px 26px 20px;
  border-bottom: 1px solid #f2f2f2;
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: #d6266e;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.embed-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 7px;
  color: #1a1a1a;
}

.embed-sub {
  font-size: 13px;
  color: #888;
  line-height: 1.5;
}

/* anchor line */
.anchor {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #f8f6f1;
  border-radius: 9px;
  padding: 11px 13px;
  margin: 16px 26px 0;
  font-size: 12.5px;
  color: #666;
}

.anchor-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1d9e75;
  flex-shrink: 0;
}

.anchor strong {
  color: #1a1a1a;
  font-weight: 600;
}

/* body */
.embed-body {
  padding: 20px 26px 24px;
}

.field {
  margin-bottom: 18px;
}

.field:last-of-type {
  margin-bottom: 0;
}

.label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 9px;
  color: #1a1a1a;
}

.label .opt {
  font-weight: 400;
  color: #aaa;
  margin-left: 5px;
}

/* date toggle */
.seg {
  display: inline-flex;
  background: #f1f0ec;
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 10px;
}

.seg button {
  background: transparent;
  border: none;
  padding: 7px 15px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #999;
  border-radius: 6px;
  cursor: pointer;
}

.seg button.active {
  background: white;
  color: #1a1a1a;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}

.row2 {
  display: flex;
  gap: 10px;
}

.row2 > div {
  flex: 1;
}

.embed input[type=text],
.embed input[type=email],
.embed input[type=date],
.embed select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  color: #1a1a1a;
  background: white;
}

.embed input:focus,
.embed select:focus {
  outline: none;
  border-color: #EC4899;
}

.embed ::placeholder {
  color: #bbb;
}

/* month chips for flexible */
.months {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.month {
  padding: 8px 4px;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  user-select: none;
}

.month:hover {
  border-color: #aaa;
}

.month.on {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: white;
}

.trip-hint {
  font-size: 12px;
  color: #999;
  line-height: 1.5;
  margin-bottom: 11px;
}

.embed textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  color: #1a1a1a;
  background: white;
  resize: vertical;
  min-height: 84px;
  line-height: 1.5;
}

.embed textarea:focus {
  outline: none;
  border-color: #EC4899;
}

.embed textarea.short {
  min-height: 58px;
}

/* submit */
.submit {
  width: 100%;
  margin-top: 22px;
  padding: 13px;
  background: #EC4899;
  color: white;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms var(--ease-out);
}

.submit:hover {
  background: #d6266e;
}

.submit:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.fineprint {
  font-size: 11.5px;
  color: #aaa;
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
}

/* footer */
.embed-foot {
  padding: 12px 26px;
  border-top: 1px solid #f2f2f2;
  font-size: 11px;
  color: #b5b5b5;
  text-align: center;
}

/* ---- form exit animation ----
   Simple fade + tiny lift. Nothing fancy. 220ms ease-out so the chat
   appears quickly after the user clicks Continue. */
.form-view.form-exit {
  animation: form-fade-out 220ms ease-out forwards;
  pointer-events: none;
}

@keyframes form-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}

/* ====================================================================
   CHAT VIEW
   ==================================================================== */

.chat-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.chat-view.chat-enter {
  animation: chat-slide-in 400ms var(--ease-out) forwards;
}

@keyframes chat-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- page entrance animation (for direct load) ---- */
@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- main chat shell ---- */
.chat-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 0;
}

/* ---- header ---- */
.chat-header {
  padding: 36px 0 24px;
  flex-shrink: 0;
}

.chat-back {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: none;
  margin-bottom: 12px;
  transition: color 180ms var(--ease-out);
}

.chat-back:hover {
  color: var(--ink);
}

/* Floating back pill — visible on mobile only, where the page scrolls and
   the inline .chat-back disappears once the thread grows. Pinned just below
   the sticky site-nav so it's always reachable. */
.chat-back-floating {
  display: none;
}

.chat-header h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.2;
}

.chat-header p {
  margin-top: 6px;
  font-size: 15px;
  color: var(--ink-3);
  font-weight: 400;
}

/* ---- thread scroll area ---- */
.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.chat-thread::-webkit-scrollbar {
  width: 4px;
}

.chat-thread::-webkit-scrollbar-track {
  background: transparent;
}

.chat-thread::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 2px;
}

/* ---- recap card ---- */
.recap-card {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f8f6f1;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 20px;
  color: #666;
  font-size: 12.5px;
  line-height: 1.55;
  animation: bubble-in-ai 280ms var(--ease-out) forwards;
}

.recap-card-header {
  font-size: 11px;
  font-weight: 600;
  color: #aaa;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.recap-card-line {
  display: flex;
  gap: 4px;
}

.recap-card-line + .recap-card-line {
  margin-top: 3px;
}

.recap-card-key {
  font-weight: 600;
  color: #555;
  flex-shrink: 0;
}

/* ---- suggestion chips ---- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  margin-left: 36px; /* align with AI bubble (avatar 28px + gap 8px) */
  animation: bubble-in-ai 320ms var(--ease-out) forwards;
}

.chip-row.chip-fade-out {
  animation: chip-out 220ms var(--ease-out) forwards;
}

@keyframes chip-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-4px); }
}

.chip {
  padding: 8px 14px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: white;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
  line-height: 1.3;
}

.chip:hover {
  border-color: #EC4899;
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(236,72,153,.12);
}

/* ---- message rows ---- */
.msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.msg-row.ai {
  justify-content: flex-start;
}

.msg-row.user {
  justify-content: flex-end;
}

/* AI avatar dot */
.msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pink);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
  margin-bottom: 2px;
}

/* ---- bubble base ---- */
.bubble {
  max-width: 76%;
  padding: 11px 15px;
  font-size: 14.5px;
  line-height: 1.55;
  word-break: break-word;
}

.bubble.ai {
  background: var(--bubble-ai);
  color: var(--ink);
  border-radius: 4px 14px 14px 14px;
}

.bubble.user {
  background: var(--bubble-user);
  color: #fff;
  border-radius: 14px 4px 14px 14px;
}

/* ---- message entrance animations ---- */
@keyframes bubble-in-ai {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bubble-in-user {
  from {
    opacity: 0;
    transform: scale(.95) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.msg-row.animate-ai {
  animation: bubble-in-ai 320ms var(--ease-state) forwards;
}

.msg-row.animate-user {
  animation: bubble-in-user 220ms var(--ease-out) forwards;
}

/* ---- typing indicator ---- */
.typing-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.typing-bubble {
  background: var(--bubble-ai);
  border-radius: 4px 14px 14px 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  animation: bubble-in-ai 200ms var(--ease-out) forwards;
}

.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: dot-bounce 0.9s var(--ease-state) infinite;
}

.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .30s; }

@keyframes dot-bounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: .5;
  }
  40% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

/* typing row fade-out */
.typing-row.fade-out {
  animation: typing-out 180ms var(--ease-state) forwards;
}

@keyframes typing-out {
  from { opacity: 1; }
  to   { opacity: 0; height: 0; margin: 0; padding: 0; overflow: hidden; }
}

/* ---- error bubble ---- */
.error-row {
  display: flex;
  justify-content: center;
  animation: bubble-in-ai 320ms var(--ease-state) forwards;
}

.error-bubble {
  background: #fff0f3;
  border: 1px solid #f8c0ce;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-size: 13.5px;
  color: #c0334d;
  display: flex;
  align-items: center;
  gap: 10px;
}

.retry-btn {
  background: none;
  border: 1px solid #c0334d;
  border-radius: 6px;
  color: #c0334d;
  font-size: 13px;
  padding: 3px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out);
}

.retry-btn:hover {
  background: #c0334d;
  color: #fff;
}

/* ---- no-backend notice ---- */
.no-backend-notice {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-3);
  font-size: 14.5px;
  line-height: 1.7;
}

.no-backend-notice strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.no-backend-notice code {
  background: var(--line-2);
  border-radius: 6px;
  padding: 2px 7px;
  font-family: 'SF Mono', 'Fira Mono', monospace;
  font-size: 13px;
  color: var(--ink);
}

/* ---- input bar ----
   Sticky to the bottom of the viewport so the type box never scrolls
   out of view while the user reads the chat history. The blur backdrop
   keeps it readable when long messages scroll past underneath. */
.chat-input {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  position: sticky;
  bottom: 0;
  z-index: 10;
}

#input {
  flex: 1;
  height: 44px;
  padding: 0 16px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  outline: none;
  transition:
    border-color 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
  -webkit-appearance: none;
}

#input::placeholder {
  color: var(--ink-3);
}

#input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(236, 61, 110, .14);
  background: var(--bg);
}

/* ---- send button ---- */
#send {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    opacity 180ms var(--ease-out),
    background 180ms var(--ease-out);
  box-shadow: 0 2px 8px rgba(236, 61, 110, .28);
}

#send:hover:not(:disabled) {
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(236, 61, 110, .38);
  background: #d42f60;
}

#send:active:not(:disabled) {
  transform: scale(.96);
  transition-duration: 100ms;
}

#send:disabled {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
}

#send svg {
  transform: translateX(1px);
}

/* ---- desktop layout: chat occupies full viewport height ---- */
@media (min-width: 641px) {
  .chat-view {
    height: calc(100vh - 57px); /* viewport minus sticky nav */
    overflow: hidden;
  }

  .chat-thread {
    max-height: calc(100vh - 57px - 120px - 68px);
  }
}

/* ---- mobile ---- */
@media (max-width: 640px) {
  .form-view {
    padding: 24px 16px;
  }

  .chat-shell {
    padding: 0 16px;
  }

  .chat-header {
    padding: 24px 0 16px;
  }

  /* hide the inline back; the floating pill takes over on mobile */
  .chat-back {
    display: none;
  }

  .chat-back-floating {
    display: inline-flex;
    align-items: center;
    position: fixed;
    top: calc(57px + 8px); /* site-nav height + small gap */
    left: 12px;
    z-index: 40;
    padding: 7px 12px 7px 10px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
  }

  .chat-back-floating:active {
    background: rgba(255, 255, 255, 1);
    color: var(--ink);
  }

  .chat-header h1 {
    font-size: 21px;
  }

  .chat-header p {
    font-size: 14px;
  }

  .bubble {
    max-width: 88%;
    font-size: 14px;
  }

  .chip-row {
    margin-left: 0;
  }

  .months {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- prefers-reduced-motion: kill everything ---- */
@media (prefers-reduced-motion: reduce) {
  .form-view,
  .form-view.form-exit,
  .chat-view,
  .chat-view.chat-enter,
  .msg-row,
  .typing-bubble,
  .typing-row,
  .error-row,
  .recap-card,
  .chip-row {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .typing-dot {
    animation: none !important;
    opacity: .6;
  }

  #input,
  #send,
  .retry-btn,
  .submit,
  .chip {
    transition: none !important;
  }
}