/* ============================================================
   ORVIYO DEMO SHARED STYLES
   Shared across hotel-demo, restaurant-demo, clinic-demo, coaching-demo
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   ORVIYO HOTEL DEMO — Premium Chat UI v3
   Unicode-safe · Devanagari · Mobile-first · SaaS premium
   ═══════════════════════════════════════════════════════════ */

/* ── Unicode / Devanagari font foundation ──────────────────── */
:root {
  --hd-font: 'Inter', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --hd-font-display: 'Sora', 'Noto Sans Devanagari', sans-serif;
}
.hd-chat, .hd-chat *, .hrc-card, .hrc-card *,
.hd-bubble, .hd-bubble *, .hrc-summary, .hrc-followup {
  font-family: var(--hd-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hd-hero { position:relative; overflow:hidden; border-bottom:1px solid var(--border-soft); }
.hd-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:4px; }
.hd-chip {
  padding:8px 16px; background:rgba(255,255,255,.88);
  border:1px solid var(--border-soft); border-radius:var(--r-full);
  font-size:.8125rem; font-weight:500; color:var(--text-secondary);
  cursor:pointer; transition:all var(--t-base); backdrop-filter:blur(8px);
}
.hd-chip:hover { background:rgba(67,97,238,.08); border-color:rgba(67,97,238,.3); color:var(--blue); transform:translateY(-1px); }

/* ── Layout ─────────────────────────────────────────────────── */
.hd-body { padding:var(--space-8) 0 var(--space-32); }
.hd-layout { display:grid; grid-template-columns:272px 1fr; gap:var(--space-6); align-items:start; }

/* ── Sidebar ────────────────────────────────────────────────── */
.hd-sidebar { display:flex; flex-direction:column; gap:var(--space-4); position:sticky; top:84px; }
.hd-info-card, .hd-lang-card {
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--r-xl); padding:var(--space-5);
}
.hd-info-badge { display:flex; align-items:center; gap:8px; margin-bottom:var(--space-3); }
.hd-dot {
  width:8px; height:8px; border-radius:50%; background:#10B981;
  box-shadow:0 0 0 3px rgba(16,185,129,.2); flex-shrink:0;
  animation:hdPulse 2.5s ease-out infinite;
}
@keyframes hdPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(16,185,129,.4); }
  50%      { box-shadow:0 0 0 6px rgba(16,185,129,0); }
}
.hd-info-badge span { font-family:var(--hd-font-display); font-size:.9375rem; font-weight:700; color:var(--text-primary); }
.hd-info-desc { font-size:.8125rem; color:var(--text-secondary); line-height:1.65; margin-bottom:var(--space-4); }
.hd-divider { height:1px; background:var(--border-soft); margin:var(--space-4) 0; }
.hd-label { font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); margin-bottom:var(--space-3); }
.hd-city-grid { display:flex; flex-wrap:wrap; gap:6px; }
.hd-city-tag { padding:3px 10px; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--r-full); font-size:.75rem; color:var(--text-secondary); font-weight:500; }
.hd-suggestions { display:flex; flex-direction:column; gap:6px; }
.hd-sugg { padding:8px 12px; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--r-md); font-size:.8125rem; color:var(--text-secondary); cursor:pointer; transition:all var(--t-base); text-align:left; line-height:1.4; font-family:inherit; }
.hd-sugg:hover { background:rgba(67,97,238,.08); border-color:rgba(67,97,238,.25); color:var(--blue); }
.hd-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.hd-stat { text-align:center; }
.hd-stat-n { display:block; font-family:var(--hd-font-display); font-size:1.125rem; font-weight:800; background:var(--grad-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hd-stat-l { font-size:.65rem; color:var(--text-muted); font-weight:500; text-transform:uppercase; letter-spacing:.06em; }
.hd-lang-card { display:flex; flex-direction:column; gap:8px; }
.hd-lang-display { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--surface-2); border-radius:var(--r-md); font-size:.875rem; font-weight:600; color:var(--text-primary); }
.hd-lang-flag { font-size:1.125rem; }

/* ── Chat window ────────────────────────────────────────────── */
.hd-chat {
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--r-xl); display:flex; flex-direction:column;
  height:700px;
  box-shadow:0 8px 40px rgba(67,97,238,.10), 0 2px 8px rgba(8,8,24,.06);
  overflow:hidden;
}

/* ── Chat header ────────────────────────────────────────────── */
.hd-chat-header {
  display:flex; align-items:center; gap:var(--space-3);
  padding:14px 20px; border-bottom:1px solid var(--border-soft);
  background:linear-gradient(135deg,#F8FAFF 0%,#F3EEFF 100%);
  flex-shrink:0;
}
.hd-chat-avatar {
  width:40px; height:40px; border-radius:var(--r-md);
  background:var(--grad-brand); display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:0 2px 8px rgba(67,97,238,.3);
}
.hd-chat-info { flex:1; }
.hd-chat-name { font-family:var(--hd-font-display); font-size:.9375rem; font-weight:700; color:var(--text-primary); }
.hd-chat-status { display:flex; align-items:center; gap:5px; font-size:.75rem; color:var(--text-muted); margin-top:2px; }
.hd-status-dot { width:6px; height:6px; border-radius:50%; background:#10B981; flex-shrink:0; animation:hdPulse 2.5s ease-out infinite; }
.hd-chat-actions { display:flex; align-items:center; gap:8px; }
.hd-firebase-pill { display:flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-full); background:rgba(5,150,105,.08); border:1px solid rgba(5,150,105,.2); font-size:.6875rem; font-weight:600; color:#059669; white-space:nowrap; }
.hd-fb-dot { width:6px; height:6px; border-radius:50%; background:#10B981; animation:hdPulse 2s ease-out infinite; }
.hd-firebase-pill.error { background:rgba(220,38,38,.08); border-color:rgba(220,38,38,.2); color:#DC2626; }
.hd-firebase-pill.error .hd-fb-dot { background:#DC2626; animation:none; }
.hd-reset-btn { width:32px; height:32px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:all var(--t-base); border:1px solid var(--border-soft); background:var(--surface); cursor:pointer; }
.hd-reset-btn:hover { background:var(--border-soft); color:var(--blue); }

/* ── Messages area ──────────────────────────────────────────── */
.hd-messages {
  flex:1; overflow-y:auto; padding:20px 20px 12px;
  display:flex; flex-direction:column; gap:16px;
  scroll-behavior:smooth; background:#FAFBFF;
}
.hd-messages::-webkit-scrollbar { width:4px; }
.hd-messages::-webkit-scrollbar-track { background:transparent; }
.hd-messages::-webkit-scrollbar-thumb { background:var(--border); border-radius:99px; }

/* ── Message rows ───────────────────────────────────────────── */
.hd-msg { display:flex; gap:10px; align-items:flex-end; animation:msgSlideIn .28s cubic-bezier(.16,1,.3,1) both; }
@keyframes msgSlideIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.hd-msg-ai  { justify-content:flex-start; }
.hd-msg-user { justify-content:flex-end; }

/* ── AI avatar ──────────────────────────────────────────────── */
.hd-msg-av {
  width:30px; height:30px; border-radius:50%;
  background:var(--grad-brand); display:flex; align-items:center; justify-content:center;
  font-size:.625rem; font-weight:700; color:#fff; flex-shrink:0; margin-bottom:2px;
  box-shadow:0 2px 6px rgba(67,97,238,.25);
}

/* ── Bubble wrapper ─────────────────────────────────────────── */
.hd-bubble-wrap { display:flex; flex-direction:column; max-width:82%; }
.hd-msg-user .hd-bubble-wrap { align-items:flex-end; }

/* ── Bubbles ────────────────────────────────────────────────── */
.hd-bubble {
  padding:11px 16px; border-radius:18px;
  font-size:.9375rem; line-height:1.7; word-break:break-word;
  font-family:var(--hd-font);
}
.hd-msg-ai .hd-bubble {
  background:#FFFFFF; color:var(--text-primary);
  border:1px solid var(--border-soft); border-bottom-left-radius:4px;
  box-shadow:0 1px 4px rgba(8,8,24,.06);
}
.hd-msg-user .hd-bubble {
  background:var(--grad-brand); color:#fff;
  border-bottom-right-radius:4px;
  box-shadow:0 2px 10px rgba(67,97,238,.28);
}
.hd-time { font-size:.6875rem; color:var(--text-muted); margin-top:4px; padding:0 4px; }
.hd-msg-user .hd-time { text-align:right; }

/* ── Typing indicator ───────────────────────────────────────── */
.hd-typing-wrap {
  display:flex; align-items:center; gap:5px;
  padding:12px 16px; background:#FFFFFF;
  border:1px solid var(--border-soft); border-radius:18px; border-bottom-left-radius:4px;
  box-shadow:0 1px 4px rgba(8,8,24,.06); width:fit-content;
}
.hd-typing-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--blue); opacity:.4;
  animation:typingBounce 1.2s ease-in-out infinite;
}
.hd-typing-dot:nth-child(2) { animation-delay:.18s; }
.hd-typing-dot:nth-child(3) { animation-delay:.36s; }
@keyframes typingBounce {
  0%,60%,100% { transform:translateY(0); opacity:.4; }
  30%          { transform:translateY(-5px); opacity:1; }
}

/* ── Hotel result cards ─────────────────────────────────────── */
.hrc-summary {
  font-size:.9375rem; color:var(--text-primary); line-height:1.7;
  margin-bottom:12px; padding:12px 16px;
  background:linear-gradient(135deg,rgba(67,97,238,.06),rgba(124,58,237,.04));
  border-left:3px solid var(--blue); border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--hd-font);
}
.hrc-intro { font-size:.75rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; margin-top:2px; }
.hrc-followup {
  font-size:.875rem; color:var(--text-secondary); margin-top:12px;
  padding:12px 16px; background:rgba(67,97,238,.04);
  border-radius:var(--r-md); border:1px solid rgba(67,97,238,.12);
  line-height:1.65; font-family:var(--hd-font);
}

/* ── Individual hotel card ──────────────────────────────────── */
.hrc-card {
  background:#FFFFFF; border:1px solid #E8EBF6; border-radius:14px;
  padding:14px 16px; margin:6px 0;
  transition:border-color .2s, box-shadow .2s, transform .2s;
  box-shadow:0 1px 6px rgba(8,8,24,.05);
  position:relative; overflow:hidden;
  animation:cardFadeIn .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cardFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.hrc-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad-brand); opacity:0; transition:opacity .2s; }
.hrc-card:hover { border-color:rgba(67,97,238,.28); box-shadow:0 6px 20px rgba(67,97,238,.12); transform:translateY(-2px); }
.hrc-card:hover::before { opacity:1; }

/* Card top row */
.hrc-top { display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
.hrc-rank { width:26px; height:26px; border-radius:50%; background:var(--grad-brand); color:#fff; font-size:.6875rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; box-shadow:0 2px 6px rgba(67,97,238,.3); }
.hrc-meta { flex:1; min-width:0; }
.hrc-name { font-size:.9375rem; font-weight:700; color:var(--text-primary); line-height:1.3; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hrc-sub { font-size:.75rem; color:var(--text-muted); }
.hrc-avail { font-size:.6875rem; font-weight:600; color:#059669; margin-top:3px; display:flex; align-items:center; gap:4px; }
.hrc-avail-dot { width:5px; height:5px; border-radius:50%; background:#10B981; flex-shrink:0; }
.hrc-price { text-align:right; flex-shrink:0; }
.hrc-price-num { display:block; font-family:var(--hd-font-display); font-size:1.125rem; font-weight:800; color:var(--blue); line-height:1; }
.hrc-price-label { font-size:.6875rem; color:var(--text-muted); }

/* Badges */
.hrc-badges { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.hrc-badge { font-size:.6875rem; font-weight:600; padding:3px 9px; border-radius:99px; display:inline-flex; align-items:center; gap:3px; }
.hrc-badge-pink  { background:rgba(236,72,153,.1);  color:#DB2777; }
.hrc-badge-green { background:rgba(5,150,105,.1);   color:#059669; }
.hrc-badge-blue  { background:rgba(67,97,238,.1);   color:#4361EE; }
.hrc-badge-gray  { background:rgba(107,114,128,.1); color:#6B7280; }
.hrc-badge-amber { background:rgba(217,119,6,.1);   color:#D97706; }

/* Amenities + rooms */
.hrc-amenities { font-size:.75rem; color:var(--text-secondary); margin-bottom:4px; line-height:1.6; }
.hrc-rooms { font-size:.75rem; color:var(--text-muted); margin-bottom:11px; }

/* Action buttons */
.hrc-actions { display:flex; gap:7px; flex-wrap:wrap; }
.hrc-btn-book {
  padding:7px 15px; background:var(--grad-brand); color:#fff;
  border:none; border-radius:var(--r-full); font-size:.8125rem; font-weight:600;
  cursor:pointer; font-family:inherit; transition:all .18s;
  box-shadow:0 2px 8px rgba(67,97,238,.28);
  display:inline-flex; align-items:center; gap:5px;
}
.hrc-btn-book:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(67,97,238,.4); }
.hrc-btn-wa {
  padding:7px 14px; background:#25D366; color:#fff;
  border:none; border-radius:var(--r-full); font-size:.8125rem; font-weight:600;
  cursor:pointer; font-family:inherit; transition:all .18s;
  box-shadow:0 2px 8px rgba(37,211,102,.30);
  display:inline-flex; align-items:center; gap:5px;
  position:relative; overflow:hidden;
}
.hrc-btn-wa::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0); transition:background .15s;
}
.hrc-btn-wa:hover { transform:translateY(-1px); box-shadow:0 5px 18px rgba(37,211,102,.45); background:#22c55e; }
.hrc-btn-wa:hover::after { background:rgba(255,255,255,.06); }
.hrc-btn-wa:active { transform:scale(.96); box-shadow:0 1px 6px rgba(37,211,102,.3); }
.hrc-btn-info {
  padding:7px 13px; background:var(--surface-2); color:var(--text-secondary);
  border:1px solid var(--border-soft); border-radius:var(--r-full);
  font-size:.8125rem; font-weight:500; cursor:pointer; font-family:inherit;
  transition:all .18s; display:inline-flex; align-items:center; gap:5px;
}
.hrc-btn-info:hover { background:rgba(67,97,238,.07); border-color:rgba(67,97,238,.25); color:var(--blue); }

/* ── Detail card ────────────────────────────────────────────── */
.hrc-detail-card { background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--r-md); padding:12px 14px; margin-top:8px; }
.hrc-detail-row { display:flex; gap:10px; padding:6px 0; border-bottom:1px solid var(--border-soft); font-size:.8125rem; align-items:flex-start; }
.hrc-detail-row:last-child { border-bottom:none; }
.hrc-detail-label { font-weight:600; color:var(--text-muted); min-width:90px; flex-shrink:0; }
.hrc-amenity-list { display:flex; flex-wrap:wrap; gap:4px; }
.hrc-amenity-tag { padding:2px 8px; background:rgba(67,97,238,.08); color:var(--blue); border-radius:99px; font-size:.6875rem; font-weight:500; }

/* ── Result pagination ──────────────────────────────────────── */
.hrc-pagination { margin-top:14px; padding-top:12px; border-top:1px dashed rgba(67,97,238,.18); text-align:center; }
.hrc-pagination-end { border-top-color:rgba(67,97,238,.1); }
.hrc-pagination-meta { font-size:.8125rem; color:var(--text-muted); margin-bottom:8px; line-height:1.5; }
.hrc-pagination-cta { font-size:.8125rem; font-weight:600; color:var(--blue); margin-bottom:10px; }
.hrc-pagination-hint { font-size:.75rem; color:var(--text-muted); margin-top:8px; line-height:1.5; }
.hrc-btn-load-more {
  width:100%; max-width:280px; padding:10px 20px; margin:0 auto;
  background:var(--grad-brand); color:#fff; border:none; border-radius:var(--r-full);
  font-size:.875rem; font-weight:700; cursor:pointer; font-family:inherit;
  box-shadow:0 3px 12px rgba(67,97,238,.28); transition:transform .18s, box-shadow .18s;
}
.hrc-btn-load-more:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(67,97,238,.38); }
.hrc-btn-load-more:active { transform:scale(.98); }
.hrc-gemini-intro { font-size:.875rem; color:var(--text-secondary); line-height:1.65; margin-bottom:12px; padding:10px 14px; background:rgba(67,97,238,.05); border-radius:var(--r-md); border:1px solid rgba(67,97,238,.12); }

/* ── Input area ─────────────────────────────────────────────── */
.hd-input-area { padding:14px 20px; border-top:1px solid var(--border-soft); background:var(--surface); flex-shrink:0; }
.hd-input-wrap {
  display:flex; gap:10px; align-items:center; background:#F8FAFF;
  border:1.5px solid var(--border); border-radius:var(--r-full);
  padding:6px 6px 6px 18px;
  transition:border-color var(--t-base), box-shadow var(--t-base);
}
.hd-input-wrap:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(74,108,247,.1); background:#fff; }
.hd-input { flex:1; border:none; background:transparent; font-family:var(--hd-font); font-size:.9375rem; color:var(--text-primary); outline:none; padding:6px 0; }
.hd-input::placeholder { color:var(--text-muted); }
.hd-send { width:40px; height:40px; border-radius:50%; background:var(--grad-brand); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; transition:all var(--t-base); box-shadow:0 2px 10px rgba(67,97,238,.32); border:none; cursor:pointer; }
.hd-send:hover  { transform:scale(1.08); box-shadow:0 6px 20px rgba(74,108,247,.42); }
.hd-send:active { transform:scale(.94); }
.hd-send:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.hd-disclaimer { font-size:.6875rem; color:var(--text-muted); text-align:center; margin-top:8px; line-height:1.5; }

/* ── Lead form ──────────────────────────────────────────────── */
.hd-lead-form { background:linear-gradient(135deg,rgba(67,97,238,.06),rgba(124,58,237,.04)); border:1px solid rgba(67,97,238,.15); border-radius:var(--r-md); padding:14px; margin-top:8px; }
.hd-lead-form input { width:100%; padding:9px 12px; border:1.5px solid var(--border); border-radius:var(--r-md); font-size:.875rem; color:var(--text-primary); outline:none; background:var(--surface); font-family:var(--hd-font); margin-bottom:8px; transition:border-color .18s; }
.hd-lead-form input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(67,97,238,.1); }
.hd-lead-form button { padding:9px 20px; background:var(--grad-brand); color:#fff; border:none; border-radius:var(--r-full); font-size:.875rem; font-weight:600; cursor:pointer; font-family:inherit; transition:all .18s; }
.hd-lead-form button:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(67,97,238,.35); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:960px) { .hd-layout{grid-template-columns:1fr} .hd-sidebar{position:static} }
@media (max-width:640px) {
  .hd-chat{height:560px}
  .hd-chat-header{padding:12px 14px;gap:8px}
  .hd-chat-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .hd-firebase-pill{font-size:.625rem;padding:4px 8px}
  .hd-input-area{padding:12px 14px}
  .hd-input-wrap{padding:6px 6px 6px 12px}
  .hd-chips{gap:6px} .hd-chip{font-size:.75rem;padding:6px 12px}
  .hd-bubble{font-size:.875rem;padding:10px 14px}
  .hrc-name{font-size:.875rem}
  .hrc-actions{gap:6px}
  .hrc-btn-book,.hrc-btn-wa,.hrc-btn-info{font-size:.75rem;padding:6px 11px}
  .hrc-btn-wa{padding:6px 12px}
  .hd-messages{padding:14px 14px 10px;gap:12px}
  .hrc-card{padding:12px 13px}
  .hrc-btn-load-more{max-width:100%;font-size:.8125rem;padding:9px 16px}
  .hd-hero .container{padding-top:var(--space-16)!important;padding-bottom:var(--space-5)!important}
  .hd-hero .section-subtitle{font-size:.86rem;line-height:1.52;margin-bottom:var(--space-4)!important}
  .hd-info-card,.hd-lang-card{padding:var(--space-4);border-radius:14px}
  .hd-chat{height:min(530px,70vh);border-radius:14px}
  .hd-messages{padding:10px;gap:8px}
  .hd-bubble{font-size:.82rem;padding:8px 10px;line-height:1.5;border-radius:12px}
  .hrc-summary,.hrc-followup{font-size:.8rem;padding:8px 10px}
  .hrc-card{padding:10px;border-radius:12px;margin:4px 0}
  .hrc-top{gap:8px;margin-bottom:6px}
  .hrc-rank{width:22px;height:22px;font-size:.62rem}
  .hrc-price-num{font-size:.96rem}
  .hrc-sub,.hrc-amenities,.hrc-rooms{font-size:.7rem}
  .hrc-badge{font-size:.62rem;padding:2px 7px}
  .hrc-actions{gap:5px}
  .hrc-btn-book,.hrc-btn-wa,.hrc-btn-info{font-size:.7rem;padding:5px 9px;border-radius:8px}
}