/* Page-specific styles for chatbot-for-travel-agency.html — everything else is Tailwind utilities. */

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

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

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

.ta .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);}
.ta .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;}

.ta .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);}
.ta .frame-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--color-line);background:#f8fafc;}
.ta .frame-bar i{width:10px;height:10px;border-radius:50%;display:block;}

/* ask-the-concierge chips */
.ta .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;}
.ta .qchip:hover{border-color:var(--color-brand-100);color:var(--color-primary);}
.ta .qchip.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}

/* trip recommendation cards */
.ta .trip-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;}
.ta .trip-card:hover{transform:translateY(-5px);box-shadow:0 28px 54px -30px rgba(38,48,65,.5);border-color:var(--color-brand-100);}
.ta .trip-hero{height:132px;position:relative;display:flex;align-items:flex-end;padding:12px;}
.ta .trip-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;}
.ta .trip-hero>svg{position:absolute;right:12px;top:12px;opacity:.55;}
.ta .tt-1{background:linear-gradient(135deg,#5E77A1,#8fa3c4);}
.ta .tt-2{background:linear-gradient(135deg,#6d84ab,#aab9d3);}
.ta .tt-3{background:linear-gradient(135deg,#4f668c,#7e93ba);}

/* vertical stepper (setup) */
.ta .vstep{position:relative;padding-left:58px;padding-bottom:30px;}
.ta .vstep:last-child{padding-bottom:0;}
.ta .vstep::before{content:"";position:absolute;left:19px;top:42px;bottom:0;width:2px;background:var(--color-line);}
.ta .vstep:last-child::before{display:none;}
.ta .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;}

.ta .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;}
.ta .src-chip:hover{border-color:var(--color-brand-100);color:var(--color-primary);transform:translateY(-2px);}
.ta .src-chip .sd{width:8px;height:8px;border-radius:50%;background:var(--color-brand);flex:none;}

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

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