/* The Hosting Hotel — AI Onboarding Demo Overrides to match main site */

/* Header actions layout (reuse .site-header/.container from styles.css) */
.actions{display:flex; gap:8px}

/* Chat area (reuse .card, .chat, .bubble styles from styles.css) */
.chat{min-height: 60vh; display:flex; flex-direction:column; gap:12px}
.bubble{max-width: 86%; padding: 12px 14px; border-radius: 14px; line-height:1.6}
.bubble.ai{background: rgba(63,79,195,.16); border:1px solid rgba(63,79,195,.45); align-self:flex-start}
.bubble.user{background: rgba(252,194,76,.12); border:1px solid rgba(252,194,76,.4); align-self:flex-end}
.meta{font-size:11px; color: var(--muted); margin-top:4px; display:block}

/* Quick choices */
.quick-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.quick{border-radius:999px; border:1px solid rgba(255,255,255,.12); background:transparent; color:var(--text); padding:8px 12px; cursor:pointer}
.quick:hover{opacity:.9}

/* Options and plan grid */
.options{display:grid; gap:10px}
.option{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.08)}
.option strong{font-size:14px}
.badge{font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.14)}
.plan-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top: 8px}
.plan{padding:10px; border:1px solid rgba(255,255,255,.12); border-radius:10px}
.plan h4{margin: 4px 0 6px; font-size:14px}
.plan ul{margin:6px 0 0 16px; color: var(--muted); font-size:13px}

/* Input bar styled like home chat-input */
#input-bar.chat-input{display:flex; gap:8px; margin-top: 12px}
#input-bar input{flex:1; padding: 12px; border-radius: 10px; background:#10192d; color: var(--text); border:1px solid rgba(255,255,255,.12)}

.footer-note{color: var(--muted); font-size: 12px; text-align:center; margin: 16px 0 32px}

@media (max-width: 640px){
  .plan-grid{grid-template-columns: 1fr}
}