/* ══════════════════════════════════════════════════════════════════
   Little Way — Front Desk (smart inquiry chat)
   Lifted from the SA demo's chat engine, rebuilt against the real brand
   tokens in styles.css (no framed preview, no scoped --lw-* vars).
   ══════════════════════════════════════════════════════════════════ */

.inquire-hero { padding: 48px 0 8px; text-align: center; }
.inquire-hero .eyebrow { display: inline-block; margin-bottom: 10px; }
.inquire-hero h1 {
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(28px, 5vw, 40px); line-height: 1.05; letter-spacing: -.02em;
  color: var(--ink); margin-bottom: 10px;
}
.inquire-hero p { font-size: 17px; color: var(--ink-2); max-width: 46ch; margin: 0 auto; }

.chat-wrap { padding: 24px 0 64px; }

.chatcard {
  background: var(--cream-2); border: 1px solid var(--border); border-radius: 22px;
  padding: 20px; max-width: 640px; margin: 0 auto; box-shadow: var(--shadow-lift);
}
.chathead { display: flex; align-items: center; gap: 12px; padding: 2px 4px 16px; border-bottom: 1px dashed var(--border-2); margin-bottom: 16px; }
.chat-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background-color: var(--cream-2); border: 1px solid var(--border);
  background-image: url('/assets/lwp-logo.png'); background-repeat: no-repeat;
  background-size: 420px auto; background-position: -355px -16px;
}
.chathead .t { font-family: var(--disp); font-weight: 600; font-size: 16px; color: var(--ink); }
.chathead .s { font-size: 13px; color: var(--ink-3); }
.chat-live { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--green-deep); display: inline-flex; align-items: center; gap: 7px; }
.chat-live::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }

.chat-log { display: flex; flex-direction: column; gap: 11px; min-height: 300px; }
.msg { display: flex; max-width: 86%; }
.msg.bot { align-self: flex-start; }
.msg.user { align-self: flex-end; }
.bubble { padding: 11px 15px; font-size: 16px; line-height: 1.5; border-radius: 18px; }
.msg.bot .bubble { background: var(--cream-sink); color: var(--ink); border-bottom-left-radius: 5px; }
.msg.user .bubble { background: var(--teal); color: #fff; border-bottom-right-radius: 5px; }
.bubble b { font-weight: 800; }

.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--plum); opacity: .5; animation: bounce 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip {
  font-family: var(--body); font-weight: 700; font-size: 15px;
  background: var(--cream-2); border: 1.5px solid var(--border-2); color: var(--ink);
  border-radius: var(--r-pill); padding: 10px 16px; min-height: 44px; cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.chip:hover, .chip:focus-visible { background: var(--teal); border-color: var(--teal); color: #fff; outline: none; }
.chips--cue .chip { animation: cue 1.5s var(--ease) 1; }
@keyframes cue { 0% { box-shadow: 0 0 0 0 rgba(56,199,201,.45); } 100% { box-shadow: 0 0 0 9px rgba(56,199,201,0); } }

/* Class card inside the chat */
.cc { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.cc-rows { display: flex; flex-direction: column; gap: 7px; margin: 9px 0 12px; }
.cc-row { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--ink-2); }
.cc-row svg { flex-shrink: 0; color: var(--plum); }
.cc-price { font-family: var(--body); font-weight: 800; font-size: 24px; color: var(--ink); }
.cc-price small { font-weight: 700; font-size: 14px; color: var(--ink-3); }
.cc-note { font-size: 14px; color: var(--green-deep); font-weight: 800; margin-top: 2px; }
.cc-more { margin-top: 12px; border-top: 1px dashed var(--border-2); padding-top: 12px; font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.chat-restart { display: block; margin: 14px auto 0; background: none; border: none; color: var(--ink-3); font-size: 14px; font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.chat-restart:hover { color: var(--plum); }

/* Composer */
.composer-wrap { margin-top: 14px; }
.chat-back { background: none; border: none; color: var(--plum-deep); font-family: var(--body); font-weight: 800; font-size: 14px; cursor: pointer; padding: 2px 2px 8px; }
.chat-back:hover { text-decoration: underline; }
.composer { display: flex; align-items: center; gap: 8px; position: relative; background: #fff; border: 1.5px solid var(--border-2); border-radius: var(--r-pill); padding: 5px 6px 5px 16px; transition: border-color .15s var(--ease); }
.composer:focus-within { border-color: var(--teal); }
.caret { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 2px; height: 21px; background: var(--teal); animation: caret 1.1s steps(1) infinite; pointer-events: none; }
@keyframes caret { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.composer.has-text .caret, .composer.focused .caret { opacity: 0; animation: none; }
.chat-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--body); font-size: 16px; color: var(--ink); padding: 10px 0 10px 8px; }
.chat-input::placeholder { color: var(--ink-3); }
.send-btn { flex-shrink: 0; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--teal); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .15s var(--ease); }
.send-btn:hover { background: var(--teal-deep); }

.chat-foot { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 20px; max-width: 52ch; margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  .typing span, .caret, .chips--cue .chip { animation: none; }
  .caret { opacity: 1; }
}