/* =========================
   AI Travel Card — Full CSS (Responsive)
   ========================= */

/* Card shell */
.ai-card {
  background: #fff;
  border-radius: 20px;
  color: white;
  min-height: 345px !important; /* force 345px on desktop */
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Remove default grid gaps/padding */
.icon-grid {
  padding: 0 !important;
  margin: 0 !important;
}
.icon-grid .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  margin: 0 !important;
}
.icon-grid .row.mb-3 {
  margin-bottom: 0 !important;
}

/* Zero-out column padding + center content */
.icon-grid .row > [class^="col-"],
.icon-grid .row > [class*=" col-"] {
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Travel icons container */
.travel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  line-height: 0; /* kill inline whitespace */
}

/* Images default sizing */
.travel-icon img {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 100%;
  height: auto;
}

/* Circles (specific PNGs) — desktop size */
.travel-icon:has(img[src*="1_1.png"]),
.travel-icon:has(img[src*="2_4.png"]),
.travel-icon:has(img[src*="4_1.png"]),
.travel-icon:has(img[src*="3_3.png"]) {
  width: 64px;                       /* compact to fit 345px layout */
  height: 64px;
  border-radius: 50%;
}
.travel-icon:has(img[src*="1_1.png"]),
.travel-icon:has(img[src*="2_4.png"]),
.travel-icon:has(img[src*="4_1.png"]) { background: #2C7C80; }
.travel-icon:has(img[src*="3_3.png"]) { background: #EFB312; }

/* Scale PNGs when inside circles */
.travel-icon:has(img[src*="1_1.png"]) img,
.travel-icon:has(img[src*="2_4.png"]) img,
.travel-icon:has(img[src*="4_1.png"]) img,
.travel-icon:has(img[src*="3_3.png"]) img {
  max-width: 60%;
  max-height: 60%;
}

/* Chat area wrappers */
.chat-wrap {
  position: relative;
  display: inline-block;
  width: 80%;
  max-width: 100%;
}

/* Second bubble spacing (desktop) */
#chat-second-container { padding-top: 30px; }

/* Links */
.ask_me_anything_area a { text-decoration: none; }

/* “Ask me anything” pill — anchored bottom-right on desktop */
.ask_me_anything_area{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;

  position: absolute;
  right: 50px;
  bottom: 64px;
  left: auto;
  top: auto;

  width: auto;
  max-width: 260px;
  height: 40px;
  padding: 8px 14px;

  background: #FFFFFF;
  color: #111;
  border-radius: 60px;
}

/* Glass effect bubbles (left) */
.chat-bubble.glass-24 {
  width: 75%;
  min-height: 80px;          /* tighter than 100px to fit 345px */
  height: 80px;
  color: #fff;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  text-align: left;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.25);
  font-size: 0.95rem;
  line-height: 1.25;
}

/* Glass effect bubbles (right/second) */
.chat-bubble.glass-24-right {
  width: 60%;
  min-height: 80px;
  height: 80px;
  color: #fff;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  text-align: left;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.25);
  font-size: 0.95rem;
  line-height: 1.25;
}

/* Overlapping icons */
.ai-icon.overlap.left {
  position: absolute;
  top: -18px;           /* slight overflow for style */
  left: -18px;
  width: 40px;
  height: 40px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-icon.overlap.left img {
  width: 32px; height: 32px; display: block;
}

.ai-icon.overlap.right {
  position: absolute;
  top: 187px;           /* adjusted to fit within 345px card */
  right: 246px;
  width: 40px;
  height: 40px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-icon.overlap.right img {
  width: 32px; height: 32px; display: block;
}

/* Right side background column:
   override inline height (520px) to match 345px on desktop */
.col-md-6.d-flex.align-items-center[style*="ai_content/right_bk.png"] {
  height: 345px !important;
  border-radius: 20px !important;
}

/* Optional: small gap between left and right columns for breathing room */
.row.h-100 > [class*="col-md-6"] {
  padding: 8px;
}

/* =========================
   Responsive
   ========================= */

/* Large tablets down — soften corners a bit */
@media (max-width: 1199.98px) {
  .ai-card { border-radius: 18px; }
}

/* Tablets */
@media (max-width: 991.98px) {
  /* Let card/bubbles grow naturally so text can wrap */
  .ai-card { min-height: auto !important; }

  .col-md-6.d-flex.align-items-center[style*="ai_content/right_bk.png"] {
    height: auto !important;
    min-height: 320px;
    border-radius: 18px !important;
  }

  .chat-wrap { width: 100%; }

  .chat-bubble.glass-24,
  .chat-bubble.glass-24-right {
    width: 100%;
    height: auto;                 /* bubble expands with text */
    min-height: 72px;
    padding: 12px 14px;
    font-size: 0.95rem;
  }

  /* Keep the “overlap” icon inside the content zone */
  .ai-icon.overlap.right {
    top: 160px;
    right: 16px;
  }

  /* Pill flows under bubbles and centers */
  .ask_me_anything_area {
    position: static;
    width: 100%;
    max-width: 320px;
    height: 44px;
    padding: 10px 14px;
    margin: 12px auto 0;
  }

  /* Slightly larger gap between first and second chat blocks */
  #chat-second-container { padding-top: 20px; }
}

/* Phones */
@media (max-width: 767.98px) {
  .ai-card { border-radius: 16px; }

  /* Icon grid full width */
  .icon-grid { width: 100%; }

  /* Smaller circles on phones for fit */
  .travel-icon:has(img[src*="1_1.png"]),
  .travel-icon:has(img[src*="2_4.png"]),
  .travel-icon:has(img[src*="4_1.png"]),
  .travel-icon:has(img[src*="3_3.png"]) {
    width: 56px;
    height: 56px;
  }
  .travel-icon:has(img[src*="1_1.png"]) img,
  .travel-icon:has(img[src*="2_4.png"]) img,
  .travel-icon:has(img[src*="4_1.png"]) img,
  .travel-icon:has(img[src*="3_3.png"]) img {
    max-width: 60%;
    max-height: 60%;
  }

  /* Remove absolute offsets that can cause overflow on small screens */
  .ai-icon.overlap.right {
    position: static;           /* sit above the second bubble */
    width: 36px; height: 36px;
    margin: 6px auto 8px;       /* center it */
  }
  .ai-icon.overlap.right img { width: 28px; height: 28px; }

  .ai-icon.overlap.left {
    top: -14px; left: -14px;
    width: 36px; height: 36px;
  }
  .ai-icon.overlap.left img { width: 28px; height: 28px; }

  /* Bubbles: full width and auto height */
  .chat-bubble.glass-24,
  .chat-bubble.glass-24-right {
    width: 100%;
    min-height: 68px;
    height: auto;
    padding: 12px 14px;
  }

  /* Ask pill below bubbles */
  .ask_me_anything_area {
    position: static;
    width: 100%;
    max-width: 280px;
    height: 44px;
    padding: 10px 14px;
    margin: 12px auto 0;
  }

  /* Any inline fixed heights on the right column should relax */
  .col-md-6.d-flex.align-items-center[style] {
    height: auto !important;
    min-height: 360px;
    border-radius: 16px !important;
  }

  /* Tighter spacing between blocks */
  #chat-second-container { padding-top: 16px; }
}

/* Optional: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .chat-bubble.glass-24,
  .chat-bubble.glass-24-right { transition: none; }
}