/* Page-specific styles for ai-chatbot-for-real-estate.html — everything else is Tailwind utilities. */

.re .border-line{border-color:var(--color-line,#eef0f3);}
.re ::selection{background:#D7DEEA;color:#263041;}

.has-js .rv{opacity:0;transform:translateY(26px);}

.re .tile{background:#fff;border:1px solid var(--color-line);border-radius:22px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.re .tile-hover:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(38,48,65,.42);border-color:var(--color-brand-100);}
.re .tint-blue{background:linear-gradient(135deg,#f2f5fa,#e9eef6);}

.re .cb-in{align-self:flex-start;max-width:90%;background:#fff;border:1px solid var(--color-line);color:#334155;padding:10px 13px;border-radius:14px 14px 14px 4px;font-size:13px;line-height:1.5;box-shadow:0 6px 16px -12px rgba(15,23,42,.3);}
.re .cb-out{align-self:flex-end;max-width:90%;background:var(--color-brand);color:#fff;padding:10px 13px;border-radius:14px 14px 4px 14px;font-size:13px;line-height:1.5;}

.re .frame{background:#fff;border:1px solid var(--color-line);border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -32px rgba(15,23,42,.4);}
.re .frame-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--color-line);background:#f8fafc;}
.re .frame-bar i{width:10px;height:10px;border-radius:50%;display:block;}

/* ask-the-concierge chips */
.re .qchip{cursor:pointer;font-size:12.5px;font-weight:600;color:#475569;background:#fff;border:1px solid var(--color-line);border-radius:999px;padding:8px 13px;transition:all .18s ease;}
.re .qchip:hover{border-color:var(--color-brand-100);color:var(--color-primary);}
.re .qchip.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}

/* property recommendation cards */
.re .property-card{background:#fff;border:1px solid var(--color-line);border-radius:18px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.re .property-card:hover{transform:translateY(-5px);box-shadow:0 28px 54px -30px rgba(38,48,65,.5);border-color:var(--color-brand-100);}
.re .property-hero{height:132px;position:relative;display:flex;align-items:flex-end;padding:12px;}
.re .property-hero .rtag{font-size:11px;font-weight:700;color:#fff;background:rgba(15,23,42,.34);backdrop-filter:blur(2px);border-radius:8px;padding:3px 9px; position:absolute; right:10px; bottom:10px; z-index:1;}
.re .property-hero>svg{position:absolute;right:12px;top:12px;opacity:.55;}
.re .pt-1{background:linear-gradient(135deg,#5E77A1,#8fa3c4);}
.re .pt-2{background:linear-gradient(135deg,#6d84ab,#aab9d3);}
.re .pt-3{background:linear-gradient(135deg,#4f668c,#7e93ba);}

/* vertical stepper (setup) */
.re .vstep{position:relative;padding-left:58px;padding-bottom:30px;}
.re .vstep:last-child{padding-bottom:0;}
.re .vstep::before{content:"";position:absolute;left:19px;top:42px;bottom:0;width:2px;background:var(--color-line);}
.re .vstep:last-child::before{display:none;}
.re .vstep .vs-num{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:12px;background:var(--color-brand-50);color:var(--color-brand);border:1px solid var(--color-brand-100);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;}

.re .src-chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--color-line);border-radius:12px;padding:11px 15px;font-size:13.5px;font-weight:600;color:#475569;transition:all .2s ease;}
.re .src-chip:hover{border-color:var(--color-brand-100);color:var(--color-primary);transform:translateY(-2px);}
.re .src-chip .sd{width:8px;height:8px;border-radius:50%;background:var(--color-brand);flex:none;}

.re .tile-hover{position:relative;}
.re .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;
}
.re .tile-hover:hover::before{opacity:1;}

@media (prefers-reduced-motion: reduce) {
  .has-js .rv{opacity:1;transform:none;}
}

/* ============================================================
   Premium visual layer for ai-chatbot-for-real-estate.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.
   IMPORTANT: never set `position` on an element that already
   carries a Tailwind position utility (absolute/relative) — a
   class selector here has higher specificity than a single
   Tailwind utility class and will silently override it.
   ============================================================ */

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

/* soft dot-grid mesh, radially masked so it fades at the edges */
.re .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) */
.re .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 */
.re .glass-chip{
  position:absolute;display:flex;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;
}
.re .glass-chip svg{flex:none;}
.re .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);}

/* chat message rows with avatars */
.re .msg-row{display:flex;align-items:flex-end;gap:7px;}
.re .msg-row.out{flex-direction:row-reverse;}
.re .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;}
.re .avatar-guest{background:var(--color-brand-100);color:var(--color-brand-800);}
.re .avatar-bot{background:var(--color-primary);color:#fff;}
.re .msg-col{display:flex;flex-direction:column;max-width:90%;}
.re .msg-row.out .msg-col{align-items:flex-end;}

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

/* "AI matched" sparkle badge on property cards */
.re .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 (buyer journey) */
.re .flow-connector{overflow:hidden;}
.re .flow-connector::after{
  content:"";position:absolute;inset:0;width:36%;
  background:linear-gradient(90deg, transparent, rgba(94,119,161,.95), transparent);
  animation:re-flow-sweep 3.2s linear infinite;
}
@keyframes re-flow-sweep{0%{transform:translateX(-140%);}100%{transform:translateX(320%);}}

/* trust badges floating near the knowledge screenshot */
.re .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);
}
.re .trust-badge svg{color:var(--color-brand);flex:none;}

/* gentle glow pulse for the primary hero frame */
.re .frame-glow{position:relative;}
.re .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:re-glow-pulse 5s ease-in-out infinite;
}
@keyframes re-glow-pulse{0%,100%{opacity:.6;}50%{opacity:1;}}

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

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

.realesate_bg {background-size: cover; background-position: center; background-repeat: no-repeat; display:block;}


@media (max-width: 575px) {
    .re .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; }
}