/* ============================================================
   Premium visual layer for ai-chatbot-for-hotels.html
   Additive only: mesh backgrounds, glass chips, glow, richer
   chat mockups, animated connectors. No layout changes, no
   colors outside the existing --color-brand/--color-primary system.
   ============================================================ */

/* soft dot-grid mesh — radially masked so it fades at the edges */
.hp .mesh-dots{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(94,119,161,.16) 1px, transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 65% 65% at 50% 35%, #000 40%, transparent 100%);
  mask-image:radial-gradient(ellipse 65% 65% at 50% 35%, #000 40%, transparent 100%);
}

/* soft grid lines for dark sections (testimonials) */
.hp .grid-lines{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000 25%, transparent 100%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000 25%, transparent 100%);
}

/* floating glassmorphism chip / badge */
.hp .glass-chip{
  position:absolute;align-items:center;gap:7px;
  background:rgba(255,255,255,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.9);border-radius:13px;padding:8px 13px;
  box-shadow:0 20px 40px -18px rgba(15,23,42,.4);
  font-size:12px;font-weight:800;color:#1B222C;z-index:5;white-space:nowrap;
}
.hp .glass-chip svg{flex:none;}
.hp .glass-chip .dot-live{width:6px;height:6px;border-radius:50%;background:#22c55e;flex:none;box-shadow:0 0 0 3px rgba(34,197,94,.25);}

/* soft blurred gradient orb, reusable */
.hp .orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;}

/* gradient-ring hover border on tiles — layered on top of existing .tile-hover */
.hp .tile-hover{position:relative;}
.hp .tile-hover::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg, var(--color-brand-100), rgba(169,186,212,0) 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.hp .tile-hover:hover::before{opacity:1;}

/* chat message rows with avatars */
.hp .msg-row{display:flex;align-items:flex-end;gap:7px;}
.hp .msg-row.out{flex-direction:row-reverse;}
.hp .avatar{width:21px;height:21px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;margin-bottom:1px;}
.hp .avatar-guest{background:var(--color-brand-100);color:var(--color-brand-800);}
.hp .avatar-bot{background:var(--color-primary);color:#fff;}
.hp .msg-col{display:flex;flex-direction:column;max-width:90%;}
.hp .msg-row.out .msg-col{align-items:flex-end;}

/* timestamp + delivery tick under bubbles */
.hp .msg-time{font-size:9.5px;color:#94a3b8;font-weight:700;margin-top:3px;display:inline-flex;align-items:center;gap:3px;}
.hp .msg-tick{color:var(--color-brand);}

/* typing indicator */
.hp .typing{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--color-line);border-radius:14px 14px 14px 4px;padding:11px 15px;box-shadow:0 6px 16px -12px rgba(15,23,42,.3);}
.hp .typing span{width:5px;height:5px;border-radius:50%;background:#94a3b8;animation:pulsedot 1.1s ease-in-out infinite;}
.hp .typing span:nth-child(2){animation-delay:.15s;}
.hp .typing span:nth-child(3){animation-delay:.3s;}

/* "AI matched" sparkle badge on room cards */
.hp .badge-ai{
  position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:4px;
  background:rgba(15,23,42,.5);backdrop-filter:blur(3px);color:#fff;font-size:10px;font-weight:800;
  padding:4px 8px;border-radius:8px;z-index:2;letter-spacing:.01em;
}

/* animated sweeping highlight along connector lines (guest journey / setup) */
.hp .flow-connector{overflow:hidden;}
.hp .flow-connector::after{
  content:"";position:absolute;inset:0;width:36%;
  background:linear-gradient(90deg, transparent, rgba(94,119,161,.95), transparent);
  animation:hp-flow-sweep 3.2s linear infinite;
}
@keyframes hp-flow-sweep{0%{transform:translateX(-140%);}100%{transform:translateX(320%);}}

/* trust badges floating near the knowledge screenshot */
.hp .trust-badge{
  align-items:center;gap:6px;background:#fff;border:1px solid var(--color-line);
  border-radius:11px;padding:7px 12px;font-size:11.5px;font-weight:700;color:#334155;
  box-shadow:0 16px 30px -20px rgba(15,23,42,.35);
}
.hp .trust-badge svg{color:var(--color-brand);flex:none;}

/* gentle glow pulse for the primary hero frame */
.hp .frame-glow{position:relative;}
.hp .frame-glow::before{
  content:"";position:absolute;inset:-18px;border-radius:28px;z-index:-1;
  background:radial-gradient(circle at 30% 20%, rgba(94,119,161,.28), transparent 60%);
  filter:blur(20px);animation:hp-glow-pulse 5s ease-in-out infinite;
}
@keyframes hp-glow-pulse{0%,100%{opacity:.6;}50%{opacity:1;}}

/* FAQ hover polish */
.hp .faq-item{transition:border-color .25s ease, box-shadow .25s ease;}
.hp .faq-item:hover{border-color:var(--color-brand-100);box-shadow:0 20px 40px -30px rgba(15,23,42,.35);}
.hp .faq-item .icon-plus, .hp .faq-item .icon-minus{transition:transform .3s ease;}
.hp .faq-item.faq-open .icon-plus{transform:rotate(90deg);}

@media (prefers-reduced-motion: reduce){
  .hp .flow-connector::after,
  .hp .frame-glow::before,
  .hp .typing span{animation:none !important;}
}

@media (max-width: 575px) {
    .rv .src-chip {
        padding: 7px 7px;
        font-size: 11.5px;
    }
}

/* ============================================================
   In-chat product slider (.ics)
   The product / room / property cards recommended inside a chat
   mock-up.
   >=640px: untouched — the track stays the same static grid.
   <640px : the row becomes a horizontally snapping, swipeable
            slider with prev/next arrows. Cards sit at 86% width so
            the next one peeks in and signals there is more to swipe.
   ============================================================ */
.ics-nav { display: none; gap: 8px; justify-content: flex-end; margin-top: 10px; }

@media (max-width: 639.98px) {
  .ics-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* legacy Edge */
  }
  .ics-viewport::-webkit-scrollbar { display: none; }

  .ics-track { display: flex; }
  .ics-track > * {
    flex: 0 0 var(--ics-card, 86%);
    scroll-snap-align: start;
    min-width: 0;                 /* let card contents shrink, never blow out */
  }

  .ics-nav { display: flex; }
}