/* ──────────────────────────────────────────────────────────────────
   AWWEE — Locked direction
   Header chrome locked · welcome separate · subtle chat thread below
   ────────────────────────────────────────────────────────────────── */

:root {
  /* One font size shared by the composer, the inline search bar and every
     chat bubble, so search text and message text never feel mismatched.
     16px also keeps iOS Safari from auto-zooming when an input is focused. */
  --aw-chat-font-size: 16px;
  --aw-chat-font-size-mobile: 16px;

  --yellow: #FEB602;
  --yellow-dk: #E89F00;
  --yellow-lt: #FFF1C2;
  --blue: #383BF1;
  --green: #2BC26A;

  --L-surface: #FBF7EE;
  --L-card: #FFFFFF;
  --L-ink: #0F0D0B;
  --L-muted: rgba(15, 13, 11, .62);
  --L-faint: rgba(15, 13, 11, .42);
  --L-line: rgba(15, 13, 11, .10);
  --L-line-2: rgba(15, 13, 11, .20);

  --D-surface: #100E0C;
  --D-card: #1A1612;
  --D-ink: #FFFFFF;
  --D-muted: rgba(255, 255, 255, .68);
  --D-faint: rgba(255, 255, 255, .42);
  --D-line: rgba(255, 255, 255, .10);
  --D-line-2: rgba(255, 255, 255, .22);
}

#my-chat.awwee-chat-shell,
#my-chat.awwee-chat-shell *,
#my-chat.awwee-chat-shell *::before,
#my-chat.awwee-chat-shell *::after {
  box-sizing: border-box;
}


#my-chat .host {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  box-sizing: border-box;
}

#my-chat .host.l {
  background: #E8E4D6;
}

#my-chat .host.d {
  background: #06050A;
}

/* ═════════════════════════════════════════════════════════════════
   PANEL
   ═════════════════════════════════════════════════════════════════ */
.aw {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 24px;

  display: flex;
  flex-direction: column;
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  border: 1px solid;
  isolation: isolate;
  overflow: hidden;
}

.aw.light {
  background: var(--L-surface);
  color: var(--L-ink);
  border-color: var(--L-line);
  box-shadow:
    0 1px 2px rgba(15, 13, 11, .04),
    0 24px 60px -22px rgba(15, 13, 11, .25),
    0 60px 120px -40px rgba(15, 13, 11, .30);
}

.aw.dark {
  background: var(--D-surface);
  color: var(--D-ink);
  border-color: var(--D-line);
  box-shadow:
    0 24px 60px -22px rgba(0, 0, 0, .65),
    0 60px 120px -40px rgba(0, 0, 0, .55);
}

.aw.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1.4px);
  background-size: 20px 20px;
  z-index: 0;
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}

/* ═════════════════════════════════════════════════════════════════
   HEADER (locked)
   ═════════════════════════════════════════════════════════════════ */
.aw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid;
  position: relative;
  z-index: 5;
  flex-shrink: 0;
}

.aw.light .aw-header {
  border-color: rgba(15, 13, 11, .07);
}

.aw.dark .aw-header {
  border-color: rgba(255, 255, 255, .07);
}

.aw-id {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  flex: 1;
}

/* Awwee avatar — responsive size so the header text still has room */
.aw {
  --aw-avatar-size: 55px;
  --chat-avatar-size: 55px;
}

.aw.size-tablet {
  --aw-avatar-size: 50px;
  --chat-avatar-size: 50px;
}

.aw.size-mobile {
  --aw-avatar-size: 48px;
  --chat-avatar-size: 45px;
}
.aw-avatar {
  width: var(--aw-avatar-size);
  height: var(--aw-avatar-size);
  border-radius: 50%;
  flex-shrink: 0;
  background: #F8B600;
  box-shadow:
    inset 0 -3px 5px rgba(232, 159, 0, .55),
    inset 0 2px 3px rgba(255, 255, 255, .55),
    0 4px 10px -3px rgba(232, 159, 0, .55);
  position: relative;
}

.aw-avatar::before,
.aw-avatar::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: #0F0D0B;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.aw-avatar::before {
  left: calc(var(--aw-avatar-size) * .29);
}

.aw-avatar::after {
  right: calc(var(--aw-avatar-size) * .29);
}

/* green online dot — keeps pulsing */
.aw-avatar .pulse {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px var(--L-surface);
  animation: dotBlink 1.6s ease-in-out infinite;
}

.aw.dark .aw-avatar .pulse {
  box-shadow: 0 0 0 2px var(--D-surface);
}

.aw-avatar .pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green);
  animation: dotPulse 1.8s ease-out infinite;
}

@keyframes dotPulse {
  0% {
    transform: scale(1);
    opacity: .6
  }

  100% {
    transform: scale(2.6);
    opacity: 0
  }
}

@keyframes dotBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .55;
  }
}

.aw-id-text {
  min-width: 0;
  line-height: 1.1;
}

#my-chat .aw-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.022em;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: #0F0D0B !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}

#my-chat .aw.dark .aw-name {
  color: #FFFFFF !important;
}

/* AI badge — blinks subtly */
#my-chat .aw-name .badge {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .16em;
  background: var(--yellow);
  color: #0F0D0B;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  animation: badgeBlink 2.4s ease-in-out infinite;
  position: relative;
  -webkit-text-fill-color: #0F0D0B;
  text-shadow: none;
}

#my-chat .aw.dark .aw-name .badge {
  color: #0F0D0B;
  -webkit-text-fill-color: #0F0D0B;
}

@keyframes badgeBlink {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(254, 182, 2, .55);
  }

  50% {
    opacity: .78;
    box-shadow: 0 0 0 4px rgba(254, 182, 2, .0);
  }
}

.aw-tag {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 11px;
  margin-top: 2px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}

.aw.size-tablet .aw-tag {
  font-size: 10.8px;
}

.aw.size-mobile .aw-tag {
  font-size: 10.4px;
}
/* ── Extra-narrow header compaction (≤340px) ───────────────────── */
@media (max-width: 340px) {
  .aw-header {
    padding: 10px 10px;
    gap: 6px;
  }

  .aw-id {
    gap: 8px;
  }

  .aw.size-mobile {
    --aw-avatar-size: 38px;
    --chat-avatar-size: 38px;
  }

  #my-chat .aw-name {
    font-size: 14px;
    gap: 4px;
  }

  #my-chat .aw-name .badge {
    font-size: 8px;
    padding: 1px 4px;
  }

  .aw-tag {
    font-size: 9px;
  }

  .aw-actions {
    gap: 4px;
  }

  .aw-toggle {
    width: 38px;
    height: 22px;
  }

  .aw-toggle .thumb {
    width: 18px;
    height: 18px;
  }

  .aw.dark .aw-toggle .thumb {
    transform: translateX(16px);
  }

  #my-chat .aw-iconbtn {
    width: 26px;
    height: 26px;
    border-radius: 7px;
  }
}

.aw.light .aw-tag {
  color: var(--L-muted);
}

.aw.dark .aw-tag {
  color: var(--D-muted);
}

.aw-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.aw-toggle {
  width: 48px;
  height: 26px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  position: relative;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  transition: background .25s;
}

.aw.light .aw-toggle {
  background: rgba(15, 13, 11, .08);
}

.aw.dark .aw-toggle {
  background: rgba(255, 255, 255, .12);
}

.aw-toggle .thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: #0F0D0B;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
  transition: transform .28s cubic-bezier(.4, .2, .2, 1), background .25s, color .25s;
}

.aw.dark .aw-toggle .thumb {
  transform: translateX(22px);
  background: #0F0D0B;
  color: var(--yellow);
}

.aw-toggle svg {
  width: 12px;
  height: 12px;
}

/* Login — thin visible border */
#my-chat .aw-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* !important needed on padding too: the same unscoped ".aw-login"
     rule in _navbar.scss below also sets "padding: 3px !important" for
     the header's separate ring-style login widget, which was squeezing
     this button's text/icon flush against its own border. */
  padding: 7px 12px 7px 14px !important;
  border-radius: 999px;
  border: 1px solid;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
  /* !important needed: an unscoped ".aw-login { background: transparent
     !important }" rule in _navbar.scss (styling the header's separate
     login widget, which unfortunately shares this class name) would
     otherwise win over this and make the chat panel's button invisible. */
  background: #F8B600 !important;
  transition: background .15s, transform .15s, border-color .15s;
}

#my-chat .aw.light .aw-login {
  border-color: var(--L-line-2);
  color: var(--L-ink);
}

#my-chat .aw.dark .aw-login {
  border-color: var(--D-line-2);
  color: var(--D-ink);
}

#my-chat .aw-login:hover {
  transform: translateY(-1px);
}

#my-chat .aw.light .aw-login:hover {
  background: #fff;
  border-color: rgba(15, 13, 11, .35);
}

#my-chat .aw.dark .aw-login:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .36);
}

/* Logged-in state: JS toggles the shared ".d-none" utility class on this
   button. Needs its own high-specificity rule here because the same
   unscoped ".aw-login { display: inline-flex !important }" in
   _navbar.scss (see background/padding notes above) ties with ".d-none"
   on specificity+importance and wins on source order, so plain ".d-none"
   alone was not actually hiding this button. */
#my-chat .aw-login.d-none {
  display: none !important;
}

/* Hide login text on mobile, keep only icon */
#my-chat .aw-login svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.2;
}

#my-chat .aw.size-mobile .aw-login {
  display: none !important;
}

#my-chat .aw-iconbtn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1.5px solid;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}

#my-chat .aw.light .aw-iconbtn {
  color: var(--L-ink);
  border-color: #0F0D0B;
}

#my-chat .aw.dark .aw-iconbtn {
  color: var(--D-ink);
  border-color: var(--yellow);
}

#my-chat .aw.light .aw-iconbtn:hover {
  background: rgba(15, 13, 11, .07);
  color: var(--L-ink);
  border-color: #0F0D0B;
}

#my-chat .aw.dark .aw-iconbtn:hover {
  background: rgba(255, 255, 255, .10);
  color: var(--D-ink);
  border-color: var(--yellow);
}

/* ═════════════════════════════════════════════════════════════════
   STAGE — Apple-landing minimal
   ═════════════════════════════════════════════════════════════════ */
#my-chat .stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 48px 40px 24px;
  position: relative;
  z-index: 2;
  min-height: 0;
  overflow: hidden;
}

#my-chat .aw.size-tablet .stage {
  padding: 44px 36px 22px;
}

#my-chat .aw.size-mobile .stage {
  padding: 30px 24px 18px;
}

#my-chat .stage.is-chatting {
  flex: 0 0 auto;
  min-height: auto;
  padding: 22px 28px 12px;
  overflow: visible;
}

#my-chat .aw.size-mobile .stage.is-chatting {
  padding: 18px 20px 10px;
}

/* — Layout A: Big Hello — */
#my-chat .stage.a {
  justify-content: space-between;
}

#my-chat .stage.a .hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 8px;
}

#my-chat .stage.is-chatting .hero {
  gap: 8px;
  margin-top: 0;
}

#my-chat .stage.a .hello {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 84px;
  line-height: .94;
  letter-spacing: -.05em;
  margin: 0;
}

#my-chat .stage.is-chatting .hello {
  font-size: 34px;
  line-height: 1;
}

/* size variants for hello */
#my-chat .aw.size-tablet .stage.a .hello {
  font-size: 72px;
}

#my-chat .aw.size-mobile .stage.a .hello {
  font-size: 60px;
}

#my-chat .aw.size-tablet .stage.is-chatting .hello,
#my-chat .aw.size-mobile .stage.is-chatting .hello {
  font-size: 34px;
}

#my-chat .aw.light .stage.a .hello {
  color: var(--L-ink);
}

#my-chat .aw.dark .stage.a .hello {
  color: var(--D-ink);
}

#my-chat .stage.a .hello .dot {
  color: var(--yellow-dk);
}

#my-chat .aw.dark .stage.a .hello .dot {
  color: var(--yellow);
}

#my-chat .stage.a .sub {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: -.005em;
  max-width: 30ch;
  margin: 0;
}

#my-chat .stage.is-chatting .sub {
  max-width: 100%;
  font-size: 21px;
}

#my-chat .aw.light .stage.a .sub {
  color: var(--L-muted);
}

#my-chat .aw.dark .stage.a .sub {
  color: var(--D-muted);
}

#my-chat .stage.a .sub em {
  font-style: normal;
  font-weight: 700;
}

#my-chat .aw.light .stage.a .sub em {
  color: var(--L-ink);
}

#my-chat .aw.dark .stage.a .sub em {
  color: var(--D-ink);
}

#my-chat .stage.a .qa {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 8px;
}

#my-chat .stage.a .line {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 6px;
  align-items: baseline;
}

#my-chat .stage.a .line .ovl {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding-top: 3px;
  grid-column: 1;
  align-self: start;
}

#my-chat .aw.light .stage.a .line .ovl {
  color: var(--L-faint);
}

#my-chat .aw.dark .stage.a .line .ovl {
  color: var(--D-faint);
}

#my-chat .stage.a .line .v {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.028em;
  line-height: 1.18;
  grid-column: 2;
  margin: 0;
}

#my-chat .aw.size-mobile .stage.a .line .v {
  font-size: 20px;
}

#my-chat .stage.a .line.you .v {
  color: inherit;
}

#my-chat .stage.a .line.awwee .v {
  color: var(--yellow-dk);
}

#my-chat .aw.dark .stage.a .line.awwee .v {
  color: var(--yellow);
}

#my-chat .stage.a .rule {
  height: 1px;
  width: 100%;
  grid-column: 1 / -1;
}

#my-chat .aw.light .stage.a .rule {
  background: rgba(15, 13, 11, .10);
}

#my-chat .aw.dark .stage.a .rule {
  background: rgba(255, 255, 255, .10);
}

#my-chat .dots-mini {
  display: flex;
  gap: 4px;
  align-items: center;
}

#my-chat .dots-mini span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .18;
  transition: opacity .3s, width .3s, background .3s;
}

#my-chat .dots-mini span.on {
  width: 16px;
  border-radius: 3px;
  opacity: 1;
  background: var(--yellow-dk);
}

#my-chat .aw.dark .dots-mini span.on {
  background: var(--yellow);
}

/* — Layout B: Spec Sheet — */
#my-chat .stage.b {
  justify-content: center;
  gap: 46px;
}

#my-chat .stage.b .display {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 64px;
  line-height: .96;
  letter-spacing: -.045em;
  margin: 0;
}

#my-chat .stage.b .display .accent {
  color: var(--yellow-dk);
}

#my-chat .aw.dark .stage.b .display .accent {
  color: var(--yellow);
}

#my-chat .stage.b .display .small-sub {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -.005em;
  margin-top: 14px;
}

#my-chat .aw.light .stage.b .display .small-sub {
  color: var(--L-muted);
}

#my-chat .aw.dark .stage.b .display .small-sub {
  color: var(--D-muted);
}

#my-chat .stage.b .spec {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding-top: 6px;
}

#my-chat .stage.b .spec .row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#my-chat .stage.b .spec .row .k {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#my-chat .aw.light .stage.b .spec .row .k {
  color: var(--L-faint);
}

#my-chat .aw.dark .stage.b .spec .row .k {
  color: var(--D-faint);
}

#my-chat .stage.b .spec .row .k .dotyel {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
}

#my-chat .stage.b .spec .row .v {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -.028em;
  line-height: 1.16;
  margin: 0;
}

#my-chat .stage.b .spec .row.b .v {
  color: var(--yellow-dk);
}

#my-chat .aw.dark .stage.b .spec .row.b .v {
  color: var(--yellow);
}

#my-chat .swap {
  animation: swapIn .55s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes swapIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═════════════════════════════════════════════════════════════════
   COMPOSER — prominent
   ═════════════════════════════════════════════════════════════════ */
.aw-composer {
  margin: 10px 18px 18px;
  position: relative;
  z-index: 2;
  border-radius: 18px;
  padding: 7px 7px 7px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  flex-shrink: 0;
}

.aw.size-mobile .aw-composer {
  margin: 10px 14px 14px;
  padding-left: 14px;
}

.aw.light .aw-composer {
  background: #FFFFFF;
  border-color: #0F0D0B;
  box-shadow: 0 8px 24px -10px rgba(15, 13, 11, .22), 0 2px 0 rgba(15, 13, 11, .08);
}

.aw.dark .aw-composer {
  background: #221E1A;
  border-color: #FFFFFF;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .5);
}

.aw-composer:focus-within {
  border-color: var(--yellow);
}

.aw.light .aw-composer:focus-within {
  box-shadow: 0 0 0 4px rgba(254, 182, 2, .20);
}

.aw.dark .aw-composer:focus-within {
  box-shadow: 0 0 0 4px rgba(254, 182, 2, .25);
}

.aw-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: inherit;
  padding: 10px 0;
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}

.aw.size-mobile .aw-input {
  font-size: 12.5px;
}

.aw.light .aw-input::placeholder {
  color: rgba(15, 13, 11, .50);
}

.aw.dark .aw-input::placeholder {
  color: rgba(255, 255, 255, .55);
}

.aw-send {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  background: var(--yellow);
  color: #0F0D0B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -2px 3px rgba(232, 159, 0, .55),
    0 6px 14px -4px rgba(254, 182, 2, .6);
  transition: transform .15s;
  flex-shrink: 0;
}

.aw.size-mobile .aw-send {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.aw-send:hover {
  transform: translateY(-1px) scale(1.04);
}

.aw-send svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.3;
}

#my-chat .icon {
  width: 17px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═════════════════════════════════════════════════════════════════
   CHAT THREAD  (data-aw-thread)
   Hidden until chat starts; chat.js renders all content into #chat-box
   ═════════════════════════════════════════════════════════════════ */
.aw-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.aw-thread.d-none {
  display: none !important;
}

/* The scrollable message list */
.aw-thread .chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.aw-thread #chat-box {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  padding: 14px 16px 14px !important;
}

#my-chat .chat-body > *:last-child {
  margin-bottom: 40px !important;
}

.aw-thread #chat-box::-webkit-scrollbar {
  width: 6px;
}
.aw-thread #chat-box::-webkit-scrollbar-track {
  background: transparent;
}
.aw-thread #chat-box::-webkit-scrollbar-thumb {
  background: #FFD153;
  border-radius: 99px;
  min-height: 40px;
}
.aw-thread #chat-box:hover::-webkit-scrollbar-thumb {
  box-shadow: 0 0 8px rgba(255, 209, 83, 0.5);
}
@keyframes aw-chat-scroll-flow {
  0%, 100% { background-position: 0 0; }
  50% { background-position: 0 100%; }
}

.aw.size-mobile .aw-thread #chat-box {
  padding: 10px 12px 10px !important;
}

/* Chat messages inside the popup only */
#my-chat .chat-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#my-chat .aw-intro {
  padding: 4px 0 2px;
}

#my-chat .aw-intro .sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

#my-chat .chat-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

/* Reserve the avatar column's width even when the avatar is hidden, so
   grouped bubbles still indent to line up under the first bubble —
   WhatsApp/iMessage-style consecutive-message grouping. */
#my-chat .bot-row .bot-img {
  width: var(--chat-avatar-size);
  flex-shrink: 0;
}

/* Grouped bubbles (no avatar) sit slightly closer to the bubble above
   them than a new sender would, matching WhatsApp's rhythm. */
#my-chat .chat-row--grouped {
  margin-top: 0;
}
#my-chat .bot-cards .blog-grid {
  margin-top: 2px;
}

#my-chat .bot-content {
  align-self: flex-start;
  width: 100%;
}

#my-chat .chat-content {
  align-self: flex-end;
  max-width: 74%;                  /* ← was 86%, narrowed a bit */
  width: fit-content !important;   /* ← added */
  margin-left: auto !important;    /* ← added */
}

#my-chat .bot-row {
  justify-content: flex-start;
}

#my-chat .user-row {
  justify-content: flex-end !important;   /* ← added !important */
  gap: 6px !important;                     /* ← added, was 8px unset */
  align-items: center !important;          /* ← added: vertically center avatar with bubble */
}



/* Extra breathing room between a user message and Awwee's reply, in
   both directions. .chat-body already applies a 12px gap to every row
   via flex `gap`, so these add 12px more (24px total) around each
   user <-> bot transition, while consecutive same-sender rows stay
   at the base 12px. */
#my-chat .user-row + .bot-row,
#my-chat .bot-row + .user-row {
  margin-top: 12px;
}

#my-chat .user-row .user,
#my-chat .user-row .bot-img {
  margin: 0 !important;      /* ← new rule */
  flex-grow: 0 !important;
}

#my-chat .chat-avatar {
  width: var(--chat-avatar-size) !important;
  height: var(--chat-avatar-size) !important;
  object-fit: contain;
  display: block;
}

#my-chat .bot {
  max-width: min(78%, 380px);
}

#my-chat .bot:not(.bot-cards) {
  padding: 8px 11px;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: var(--aw-chat-font-size);
  overflow-wrap: anywhere;
  word-break: break-word;
}

#my-chat .aw.light .bot:not(.bot-cards) {
  background: #fff;
  color: var(--L-ink);
  border: 1px solid var(--L-line);
}

#my-chat .aw.dark .bot:not(.bot-cards) {
  background: var(--D-card);
  color: var(--D-ink);
  border: 1px solid var(--D-line);
}

#my-chat .bot.bot-cards {
  max-width: 100%;
  width: 100%;
  min-width: 0;
}

#my-chat .bot-cards .main-message,
#my-chat .bot-cards .next-step-text {
  display: block;
  width: fit-content;
  max-width: min(78%, 380px); /* was 100% — was stretching edge-to-edge; card grid below is unaffected, still full width */
  padding: 8px 11px;
  border-radius: 12px;
  margin-bottom: 18px;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: 'Plus Jakarta Sans', sans-serif; /* experience-name font family, non-bold weight */
  font-weight: 400; /* normal, not bold */
  font-size: var(--aw-chat-font-size); /* 16px default */
}
#my-chat .bot-cards .main-message:empty,
#my-chat .bot-cards .next-step-text:empty {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
}

#my-chat .aw.light .bot-cards .main-message,
#my-chat .aw.light .bot-cards .next-step-text {
  background: #fff;
  color: var(--L-ink);
  border: 1px solid var(--L-line);
}

#my-chat .aw.dark .bot-cards .main-message,
#my-chat .aw.dark .bot-cards .next-step-text {
  background: var(--D-card);
  color: var(--D-ink);
  border: 1px solid var(--D-line);
}

#my-chat .user {
  max-width: min(100%, 360px);
  padding: 5px 11px;               /* ← was 8px 11px, reduced height */
  border-radius: 12px;
  background: var(--yellow);
  color: #0F0D0B;
  border: 1px solid rgba(15, 13, 11, .12);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: var(--aw-chat-font-size);
  overflow-wrap: anywhere;
  word-break: break-word;
}

#my-chat .user span,
#my-chat .bot span {
  line-height: 1.4;

}

#my-chat .bot-cards .blog-grid {
  row-gap: 8px;
  margin-bottom: 40px;
}

#my-chat .aw-thread #chat-box {
  overflow-x: hidden;
}

#my-chat .side-panel {
  display: block !important;
  overflow-x: hidden;
}

/* Chat loader inside panel */
.aw-thread .chat-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  /* style.css has an older, unrelated ".chat-loader" rule (a different,
     unscoped full-overlay loader used elsewhere on the site) with a
     dark rgba(0,0,0,.7) background. This selector already wins on
     specificity, but only for properties actually declared here — so
     without an explicit override, that old dark box was still leaking
     through underneath our new design. Transparent works for both
     themes at once: it just reveals the panel's own light/dark
     background instead of needing separate light/dark colors. */
  background: transparent;
  /* Centered over the whole thread area (.aw-thread has position:
     relative already) instead of sitting in normal flow above the
     "Hello…" hero — in flow it rendered ABOVE the hero every time,
     when it should appear centered in the chat, below the greeting. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.aw.light .aw-thread .chat-loader {
  color: var(--L-muted);
}

.aw.dark .aw-thread .chat-loader {
  color: var(--D-muted);
}

/* Design handed off by senior (Chat Loader Deploy.html) — a spinning
   dual-ring "spark" with a breathing glow at its center. Scaled down
   from the original standalone full-page version (104px spark, 22px
   title) to fit inside the chat panel instead. Same colors/animation
   timings as the handoff, just resized. */
.aw-thread .chat-loader .aw-ldr-spark {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.aw-thread .chat-loader .aw-ldr-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, #2743EE 65deg, #FFC531 165deg, transparent 265deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: aw-loader-spin 2s linear infinite;
}

.aw-thread .chat-loader .aw-ldr-ring.two {
  inset: 11px;
  background: conic-gradient(from 180deg, transparent 0deg, #7CEFAA 95deg, transparent 225deg);
  animation: aw-loader-spin-reverse 1.4s linear infinite;
  opacity: .85;
}

.aw-thread .chat-loader .aw-ldr-glow {
  position: absolute;
  inset: 21px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(39, 67, 238, .55), transparent 70%);
  animation: aw-loader-breathe 1.6s ease-in-out infinite;
}

.aw-thread .chat-loader .aw-ldr-txt {
  text-align: center;
}

.aw-thread .chat-loader .aw-ldr-txt b {
  display: block;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
}

.aw.light .aw-thread .chat-loader .aw-ldr-txt b {
  color: var(--L-ink);
}

.aw.dark .aw-thread .chat-loader .aw-ldr-txt b {
  color: var(--D-ink);
}

.aw-thread .chat-loader .aw-ldr-txt span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
}

@keyframes aw-loader-spin {
  to { transform: rotate(360deg); }
}

@keyframes aw-loader-spin-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes aw-loader-breathe {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50% { opacity: .9; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .aw-thread .chat-loader .aw-ldr-ring,
  .aw-thread .chat-loader .aw-ldr-ring.two,
  .aw-thread .chat-loader .aw-ldr-glow {
    animation-duration: 3s;
  }
}

/* Scroll-to-bottom button */
.aw-thread .scroll-to-bottom {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: opacity .2s;
}

.aw.light .aw-thread .scroll-to-bottom {
  border-color: var(--L-line-2);
  color: #000;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.aw.dark .aw-thread .scroll-to-bottom {
  border-color: var(--D-line-2);
  color: #000;
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.aw-thread .scroll-to-bottom.d-none {
  display: none !important;
  
}


/* ─── Restyle the real .chat-textarea inside the new composer ───── */
/* The composer div already has the new panel's border/shadow styling.
   We just make the contenteditable feel native to it.              */
.aw-composer .chat-textarea.aw-input {
  flex: 1;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  font-family: 'Plus Jakarta Sans', sans-serif; /* experience-name font family, non-bold weight */; /* same font as experience names */
  font-size: var(--aw-chat-font-size); /* 16px default */
  font-weight: 400; /* normal, not bold */
  letter-spacing: -.005em;
  color: inherit;
  padding: 10px 0;
  min-width: 0;
  max-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
  line-height: 1.45;
  word-break: break-word;
}

.aw.size-mobile .aw-composer .chat-textarea.aw-input {
  font-size: var(--aw-chat-font-size-mobile);
}

.aw-composer .chat-textarea.aw-input:empty::before {
  content: attr(data-placeholder);
  pointer-events: none;
}

.aw.light .aw-composer .chat-textarea.aw-input:empty::before {
  color: rgba(15, 13, 11, .50);
}

.aw.dark .aw-composer .chat-textarea.aw-input:empty::before {
  color: rgba(255, 255, 255, .55);
}

/* Restyle the real .chat-send-btn inside the new composer */
.aw-composer .chat-send-btn.aw-send {
  touch-action: manipulation;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  background: #F8B600;
  color: #0F0D0B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -2px 3px rgba(232, 159, 0, .55),
    0 6px 14px -4px rgba(254, 182, 2, .6);
  transition: transform .15s;
  flex-shrink: 0;
}

.aw.size-mobile .aw-composer .chat-send-btn.aw-send {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.aw-composer .chat-send-btn.aw-send:hover {
  transform: translateY(-1px) scale(1.04);
}

.aw-composer .chat-send-btn.aw-send .chat-button-enabled__icon {
  width: 18px;
  height: 18px;
}

/* Disabled state */
.aw-composer .chat-send-btn.aw-send.disabled,
.aw-composer .chat-send-btn.aw-send:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#my-chat .grid-col.col-with-exp {
  position: absolute;
  inset: 0;
  z-index: 1;          /* ← was 20, lowered below chat content */
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
  padding: 0 8px 0 24px;
  display: flex !important;
  align-items: stretch;
  justify-content: flex-end;
  width: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
}

#my-chat .grid-col.col-with-exp.active {
  z-index: 20;         /* ← only raise when actually active/visible */
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  width: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
}

#my-chat .chat-slider-content {
  display: none !important;
}

#my-chat .side-panel {
  display: block !important;
  position: relative;
  width: min(520px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--L-surface);
  color: var(--L-ink);
  border-radius: 0;
  padding: 0 !important;
  box-shadow: none;
  margin: auto;
}

#my-chat[data-aw-theme="dark"] .side-panel {
  background: var(--D-surface);
  color: var(--D-ink);
}

#my-chat .side-panel::before {
  display: none !important;
}

#my-chat .chat-filter-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  background: var(--L-surface);
  color: #0F0D0B;
  box-shadow: none;
  z-index: 25;
}

#my-chat[data-aw-theme="dark"] .chat-filter-close {
  background: var(--D-surface);
  color: #fff;
}

#my-chat .side-panel .row.row-cols-1 {
  margin-top: 0;
}

@media (min-width:768px) and (max-width:991.98px) {
  #my-chat .aw-thread .bot-cards .blog-grid {
    row-gap: 18px;
  }

  #my-chat .aw-thread .bot-cards .col-lg-4 {
    width: 100%;
  }

  #my-chat .aw-thread .bot-cards .c .loc {
    font-size: 10px;
    padding: 5px 9px 5px 8px;
    top: 30px
  }

  #my-chat .aw-thread .bot-cards .c .meta-bottom {
    gap: 6px;
  }

  #my-chat .aw-thread .bot-cards .c .rating {
    font-size: 10px;
    padding: 4px 8px;
  }

  #my-chat .aw-thread .bot-cards .c .avail {
    font-size: 9px;
    padding: 4px 8px;
    gap: 4px;
  }

  #my-chat .aw-thread .bot-cards .highlight-badge-container .highlight-badge-text,
  #my-chat .aw-thread .bot-cards .highlight-badge-container span {
    font-size: 15px !important;
  }

  #my-chat .aw-thread .bot-cards .highlight-badge-container .highlight-badge-img:not(.green-badge) span {
    top: 48px;
    font-size: 15px !important;
  }

  #my-chat .aw-thread .bot-cards .highlight-badge-container .highlight-badge-text img {
    transform: scale(.88);
    transform-origin: center;
  }

  #my-chat .aw-thread .bot-cards .c .title {
    font-size: 16px;
    line-height: 1.2;
    padding: 8px 12px;
  }

  #my-chat .aw-thread .bot-cards .c .cta-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 66px;
  }

  #my-chat .aw-thread .bot-cards .c .price-block {
    padding: 10px 12px;
  }

  #my-chat .aw-thread .bot-cards .c .pnow {
    font-size: 19px;
  }

  #my-chat .aw-thread .bot-cards .c .price-foot {
    gap: 5px;
    margin-top: 4px;
    flex-wrap: wrap;
  }

  #my-chat .aw-thread .bot-cards .c .pold {
    font-size: 10px;
  }

  #my-chat .aw-thread .bot-cards .c .save-inline {
    font-size: 8px;
    padding: 2px 6px;
  }

  #my-chat .aw-thread .bot-cards .c .book {
    font-size: 13px;
    padding: 10px 12px;
    width: 100%;
    height: 100%;
    min-width: 0;
    align-self: stretch;
    justify-self: stretch;
    box-sizing: border-box;
    display: flex;
  }
}

@media (min-width: 481px) and (max-width: 1024px) {
  #my-chat .aw-thread .bot-cards .c .title {
    font-size: 16px !important;
    padding: 8px 12px !important;
  }

  #my-chat .aw-thread .bot-cards .c .pnow {
    font-size: 18px !important;
  }

  #my-chat .aw-thread .bot-cards .c .pold {
    font-size: 10px !important;
  }

  #my-chat .aw-thread .bot-cards .c .save-inline {
    font-size: 9px !important;
  }

  #my-chat .aw-thread .bot-cards .c .book {
    font-size: 18px !important;
    padding: 10px 8px !important;
  }

  #my-chat .aw-thread .bot-cards .c .rating {
    font-size: 10px !important;
  }

  #my-chat .aw-thread .bot-cards .c .loc,
  #my-chat .aw-thread .bot-cards .c a.loc {
    font-size: 10px !important;
  }

  #my-chat .aw-thread .bot-cards .c .avail-label {
    font-size: 9px !important;
  }
}

@media (max-width: 600px) {
  #my-chat .grid-col.col-with-exp.active {
    background: var(--L-surface) !important;
    margin: auto;
    margin-left: 10px;

  }
  @media (max-width: 480px) {
  #my-chat .host {
    padding: 8px !important;
  }
  #my-chat .aw {
    border-radius: 16px !important;
  }
}

  #my-chat .aw-thread .bot-cards .highlight-badge-container .highlight-badge-img:not(.green-badge) span {
    top: 20px;
  }

  [data-aw-theme="dark"]#my-chat .grid-col.col-with-exp.active {
    background: black !important;

  }

  #my-chat .bot .highlight-badge-container:has(.green-badge) span {
    top: 4px !important;
    margin-left: 9px !important;
  }
}
@media (min-width: 992px) {
  #my-chat .grid-col.col-with-exp.active {
    background: var(--L-surface) !important;
  }

  [data-aw-theme="dark"]#my-chat .grid-col.col-with-exp.active {
    background: black !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   MOBILE — force cards to stack vertically (one per row)
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

  #my-chat .aw-thread .bot-cards .blog-grid,
  #my-chat .bot-cards .blog-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
  }

  #my-chat .aw-thread .bot-cards .blog-grid>[class*="col-"],
  #my-chat .bot-cards .blog-grid>[class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   HOME PAGE BACKDROP — blur behind popup when chat is open
   ═════════════════════════════════════════════════════════════════ */
.awwee-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10040;
  /* just below the chat popup (10050) */
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}

body.awwee-chat-open .awwee-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ═════════════════════════════════════════════════════════════════
   DESKTOP — larger card typography now that popup is 680 px wide
   ═════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  #my-chat .aw-thread .bot-cards .c .loc {
    font-size: 12px;
    padding: 4px 9px 1px 9px;
    margin-top: -2px
  }

  #my-chat .aw-thread .bot-cards .c .meta-bottom {
    gap: 8px;
  }

  #my-chat .aw-thread .bot-cards .c .rating {
    font-size: 12px;
    padding: 5px 10px;
  }

  #my-chat .aw-thread .bot-cards .c .avail {
    font-size: 11px;
    padding: 5px 10px;
    gap: 5px;
  }

  #my-chat .aw-thread .bot-cards .c .title {
    font-size: 18px;
    line-height: 1.22;
    padding: 10px 14px;
  }

  #my-chat .aw-thread .bot-cards .c .cta-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 72px;
  }

  #my-chat .aw-thread .bot-cards .c .price-block {
    padding: 12px 14px;
  }

  #my-chat .aw-thread .bot-cards .c .pnow {
    font-size: 22px;
  }

  #my-chat .aw-thread .bot-cards .c .price-foot {
    gap: 6px;
    margin-top: 4px;
  }

  #my-chat .aw-thread .bot-cards .c .pold {
    font-size: 12px;
  }

  #my-chat .aw-thread .bot-cards .c .save-inline {
    font-size: 10px;
    padding: 3px 7px;
  }

  #my-chat .aw-thread .bot-cards .c .book {
    font-size: 15px;
    padding: 12px 14px;
    width: 100%;
    height: 100%;
    min-width: 0;
    align-self: stretch;
    justify-self: stretch;
    box-sizing: border-box;
    display: flex;
  }
}

#my-chat .aw-thread .bot-cards .highlight-badge-container .highlight-badge-text,
#my-chat .aw-thread .bot-cards .highlight-badge-container span {
  font-size: 10px !important;
}

#my-chat .aw-thread .bot-cards .c .cta-bar {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (min-width: 992px) {
  #my-chat .aw-thread .bot-cards .c .cta-bar {
    grid-template-columns: minmax(150px, 58fr) minmax(0, 42fr) !important;
  }
}

#my-chat .aw-thread .bot-cards .c .price-foot {
  flex-wrap: wrap !important;
  row-gap: 3px;
}

#my-chat .aw-thread .bot-cards .c .pold {
  font-size: 12px;
}

#my-chat .aw-thread .bot-cards .c .save-inline {
  font-size: 10px;
}

#my-chat .chat-see-more {
  margin-left: 10px !important;
}

#my-chat .aw-thread .bot-cards .c .book {
  width: 100%;
  height: 100%;
  min-width: 0;
  align-self: stretch;
  justify-self: stretch;
  box-sizing: border-box;
  display: flex;
  margin: 0;
}


/* ── Frozen hello intro at top of chat thread ─────────────────── */
#my-chat .aw-chat-intro {
  padding: 18px 4px 14px;
  border-bottom: 1px solid;
  margin-bottom: 10px;
  flex-shrink: 0;
}

#my-chat .aw.light .aw-chat-intro,
#my-chat[data-aw-theme="light"] .aw-chat-intro {
  border-color: rgba(15, 13, 11, .08);
}

#my-chat .aw.dark .aw-chat-intro,
#my-chat[data-aw-theme="dark"] .aw-chat-intro {
  border-color: rgba(255, 255, 255, .08);
}

#my-chat .aw.light .aw-chat-intro .hello,
#my-chat[data-aw-theme="light"] .aw-chat-intro .hello {
  color: var(--L-ink);
}

#my-chat .aw.dark .aw-chat-intro .hello,
#my-chat[data-aw-theme="dark"] .aw-chat-intro .hello {
  color: var(--D-ink);
}

#my-chat .aw-chat-intro .hello .dot {
  color: var(--yellow-dk);
}

#my-chat .aw.dark .aw-chat-intro .hello .dot {
  color: var(--yellow);
}

#my-chat .aw.light .aw-chat-intro .sub {
  color: #16161a;
}

#my-chat .aw.dark .aw-chat-intro .sub {
  color: var(--D-muted);
}
@media (min-width: 992px) {
  #my-chat .aw-thread .bot-cards .blog-grid,
  #my-chat .bot-cards .blog-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px;
  }

  #my-chat .aw-thread .bot-cards .blog-grid > [class*="col-"],
  #my-chat .bot-cards .blog-grid > [class*="col-"] {
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
  }

  #my-chat .aw-thread .bot-cards .c .title {
    font-size: 19px;
  }

  #my-chat .aw-thread .bot-cards .c .pnow {
    font-size: 24px;
  }

  
}
/* ═════════════════════════════════════════════════════════════════
   MOBILE & TABLET (≤ 991 px)
   • Logo above bubble (bot left, user right)
   • Bigger avatars
   • Vertical card stacking
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

  /* ── Avatar size bump ─────────────────────────────────────────── */
  #my-chat {
    --chat-avatar-size: 55px;
  }

  

  /* Wrapper widths */
  #my-chat .bot-content {
    width: 100%;
  }

  #my-chat .chat-content {
    align-self: flex-end;
    max-width: 88%;
  }

  /* ── Vertical card stacking ───────────────────────────────────── */
  #my-chat .aw-thread .bot-cards .blog-grid,
  #my-chat .bot-cards .blog-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
  }

  #my-chat .aw-thread .bot-cards .blog-grid>[class*="col-"],
  #my-chat .bot-cards .blog-grid>[class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   CHAT INPUT — bigger font so typed text is easy to read
   ═════════════════════════════════════════════════════════════════ */
.aw-composer .chat-textarea.aw-input {
  font-size: var(--aw-chat-font-size);
}


/* ═════════════════════════════════════════════════════════════════
   "YOU ASK / AWWEE SAYS" TRENDING TEXT — bigger on mobile
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

  #my-chat .aw.size-mobile .stage.a .line .v,
  #my-chat .aw.size-tablet .stage.a .line .v {
    font-size: 22px;
  }
}

/* ═════════════════════════════════════════════════════════════════
   SCROLL-TO-BOTTOM — centered horizontally
   ═════════════════════════════════════════════════════════════════ */


/* ═════════════════════════════════════════════════════════════════
   SEE MORE BUTTON — text-only, bold, no background, light+dark
   ═════════════════════════════════════════════════════════════════ */



#my-chat .chat-see-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  margin-left: 10px !important;
  padding: 4px 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s ease;
}
#my-chat .bot.bot-cards .button-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100%;
}


#my-chat .chat-see-more::after {
  content: '→';
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

#my-chat .chat-see-more:hover {
  opacity: .72;
}

#my-chat .button-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;
}


#my-chat .aw.light .chat-see-more { color: #b45309; }
#my-chat .aw.dark  .chat-see-more { color: var(--yellow); }

@media (min-width: 992px) {
  #my-chat .chat-see-more { font-size: 17px; }
}

/* Light mode */
#my-chat .aw.light .chat-see-more {
  color: #b45309;
  padding-bottom:10px !important;
}

/* Dark mode */
#my-chat .aw.dark .chat-see-more {
  color: var(--yellow);
  padding-bottom:14px !important;
}

@media (max-width: 991.98px) {
  #my-chat .aw-thread .bot-cards .c .price-block {
    text-align: center;
  }

  #my-chat .aw-thread .bot-cards .c .price-foot {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  #scrollToBottomBtn {
    margin-left: -25px !important;
  }

  #my-chat .aw-thread .bot-cards .highlight-badge-container .highlight-badge-img:not(.green-badge) span {
    top: 28px !important;
  }
}

#my-chat .chat-see-more {
  margin-left: 10px !important;
}

#my-chat .side-panel .row.row-cols-1 {
  margin-right: 10px !important;
}

@media(min-width:768px) and (max-width: 991px) {
  #my-chat .grid-col.col-with-exp.active {
    background: var(--L-surface) !important;

  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #my-chat .aw-thread .bot-cards .c {
    font-size: 13px;
  }

  /* Cap the card image height so card doesn't tower */
  #my-chat .aw-thread .bot-cards .c .card-img-top,
  #my-chat .aw-thread .bot-cards .c .img-fluid,
  #my-chat .aw-thread .bot-cards .c .card-image img,
  #my-chat .aw-thread .bot-cards .c>img {
    max-height: 160px;
    object-fit: cover;
    width: 100%;
  }

  /* Tighten title */
  #my-chat .aw-thread .bot-cards .c .title {
    font-size: 14px !important;
    padding: 6px 10px !important;
  }

  /* Shrink price + book */
  #my-chat .aw-thread .bot-cards .c .pnow {
    font-size: 16px !important;
  }

  #my-chat .aw-thread .bot-cards .c .price-block {
    padding: 8px 10px !important;
  }

  #my-chat .aw-thread .bot-cards .c .book {
    font-size: 18px !important;
    padding: 8px 10px !important;
  }

  /* Tighten meta row */
  #my-chat .aw-thread .bot-cards .c .loc,
  #my-chat .aw-thread .bot-cards .c .rating,
  #my-chat .aw-thread .bot-cards .c .avail {
    font-size: 9px !important;
    padding: 3px 7px !important;
  }
}

@media (max-width: 767.98px) {
  #my-chat .side-panel .c .loc {
    font-size: 9px;
    padding: 4px 8px;
  }
}
/* Side panel cards — compact sizing for narrower 2-per-row layout */
#my-chat .side-panel .c {
  border: none;
  box-shadow: none;
}
#my-chat .side-panel .row.row-cols-1 > div {
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

#my-chat .side-panel .c .cta-bar {
  grid-template-columns: minmax(85px, 5fr) minmax(0, 7fr);
  min-height: 56px;
}

#my-chat .side-panel .c .pnow {
  font-size: 16px;
}

#my-chat .side-panel .c .price-block {
  padding: 8px 6px 8px 10px;
}

#my-chat .side-panel .c .book {
  font-size: 12px;
  padding: 8px 4px;
  letter-spacing: normal;
}


@media (max-width: 767.98px) {
  #my-chat .aw-thread .bot-cards .c .loc {
    font-size: 10px;
    padding: 4px 8px;
  }
}

@media (max-width: 767.98px) {
  #my-chat .aw-thread .bot-cards .c .avail {
    font-size: 11px;
  }

  #my-chat .aw-thread .bot-cards .c .save-inline {
    font-size: 10px;
  }

  #my-chat .aw-thread .bot-cards .c .rating {
    font-size: 11px;
  }
}

#my-chat .chat-see-more {
  font-size: 15px;
}

@media (min-width: 992px) {
  #my-chat .chat-see-more {
    font-size: 17px;
  }

  #my-chat .aw-thread .bot-cards .c .avail {
  font-size: 8.5px !important;
}

}

#my-chat .aw.light .chat-see-more {
  color: #2563EB;
  padding-bottom:10px !important;
}

#my-chat .chat-see-more {
  white-space: nowrap;
}

#my-chat [data-aw-close] .icon{
  width: 22px;
  height: 22px;
}



/* ============ 07 · LOGIN TOAST (inline nudge) — Chat 07 ============ */
#my-chat .toast-wrap { align-self: stretch; display: flex; justify-content: center; padding: 2px 0; }
#my-chat .toast { display: flex; flex-direction: column; background: #15182E; border-radius: 15px; width: 100%; box-shadow: 0 18px 40px -20px rgba(0,0,0,.55); position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.06); animation: toastIn .5s cubic-bezier(.3,1.1,.5,1); }
#my-chat .aw.dark .toast { background: #23212F; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
#my-chat .toast.out { animation: toastOut .35s ease forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateY(-6px); max-height: 0; margin: 0; } }
#my-chat .toast__row { display: flex; align-items: center; gap: 12px; padding: 13px 13px 12px; }
#my-chat .toast__body { flex: 1; min-width: 0; min-height: 34px; display: flex; flex-direction: column; justify-content: center; }
#my-chat .toast__ttl { font-size: 13.5px; font-weight: 700; color: #FFFFFF; line-height: 1.35; transition: opacity .6s ease; }
#my-chat .aw.dark .toast__ttl { color: #EDEDF6; }
#my-chat .toast__cap { font-size: 11px; color: #A9AECF; margin-top: 2px; transition: opacity .6s ease; }
#my-chat .aw.dark .toast__cap { color: #A0A0BE; }
#my-chat .toast__login { flex: none; background: #FFE600; color: #11142B; border: 0; border-radius: 999px; padding: 9px 16px; font-family: inherit; font-weight: 800; font-size: 12.5px; cursor: pointer; transition: transform .16s, box-shadow .16s; box-shadow: 0 8px 18px -8px rgba(255,210,60,.8); }
#my-chat .toast__login:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -8px rgba(255,210,60,.95); }
#my-chat .toast__x { flex: none; background: none; border: 0; color: #6B7180; cursor: pointer; font-size: 25px; line-height: .6; padding: 0 3px; align-self: flex-start; font-weight: 300; transition: color .16s; }
#my-chat .aw.dark .toast__x { color: #8C90B4; }
#my-chat .toast__x:hover { color: #FFFFFF; }
#my-chat .toast__bar { height: 3px; background: rgba(255,255,255,.13); margin: 0 13px 12px; border-radius: 3px; overflow: hidden; }
#my-chat .toast__bar i { display: block; height: 100%; background: linear-gradient(125deg,#383BF1 0%,#5B4BF2 52%,#4C8DFF 100%); border-radius: 3px; width: 6%; animation: toastGrow 5.5s ease-in-out infinite; }
@keyframes toastGrow { 0% { width: 6%; } 88% { width: 100%; } 100% { width: 100%; } }
@media (prefers-reduced-motion: reduce) { #my-chat .toast__bar i { animation: none; } }


   /* ============================================================
   Chat 05 - Experience Detail 3-Button Bar start
   ============================================================ */
#my-chat .xd__seg { display:flex; background:#ECEEF8; box-shadow:inset 0 1px 3px rgba(20,24,80,.12); border-radius:14px; padding:5px; gap:3px; width:100%; max-width:380px; margin-top:10px; }
#my-chat .aw.dark .xd__seg { background:#201E2C; box-shadow:inset 0 1px 3px rgba(0,0,0,.45); }
#my-chat .xd__seg .seg { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-family:inherit; font-weight:700; font-size:13px; cursor:pointer; border:0; background:transparent; color:var(--L-muted); height:46px; border-radius:10px; padding:0 6px; white-space:nowrap; transition:transform .16s ease, background .16s, color .16s; }
#my-chat .aw.dark .xd__seg .seg { color:var(--D-ink); }
#my-chat .xd__seg .seg svg { width:16px; height:16px; flex:none; }
#my-chat .xd__seg .seg:hover { color:var(--L-ink); }
#my-chat .aw.dark .xd__seg .seg:hover { color:var(--D-ink); }
#my-chat .xd__seg .seg--book { flex:1.35; background:linear-gradient(125deg,#383BF1 0%,#5B4BF2 52%,#4C8DFF 100%); color:#fff; font-weight:800; box-shadow:0 9px 20px -9px rgba(56,59,241,.8); position:relative; overflow:hidden; }
#my-chat .xd__seg .seg--book:hover { transform:translateY(-1px); box-shadow:0 14px 26px -10px rgba(56,59,241,.9); color:#fff; }
#my-chat .xd__seg .seg--book::after { content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); animation:segsheen 6s ease-in-out infinite; }
@keyframes segsheen { 0%{left:-60%} 22%{left:140%} 100%{left:140%} }
/* Slots inline list in chat */
#my-chat .xd__slots { display:flex; flex-direction:column; gap:7px; margin-top:8px; width:100%; }
#my-chat .xd__slots .slot-item { display:flex; align-items:center; justify-content:space-between; background:var(--L-faint); border:1px solid var(--L-line); border-radius:12px; padding:10px 14px; cursor:pointer; transition:border-color .15s, background .15s; font-family:inherit; width:100%; }
#my-chat .aw.dark .xd__slots .slot-item { background:var(--D-faint); border-color:var(--D-line); }
#my-chat .xd__slots .slot-item:hover { border-color:#383BF1; }
#my-chat .xd__slots .slot-item .slot-time { font-size:14px; font-weight:700; color:var(--L-ink); }
#my-chat .aw.dark .xd__slots .slot-item .slot-time { color:var(--D-ink); }
#my-chat .xd__slots .slot-item .slot-cap { font-size:12px; color:var(--L-muted); font-weight:600; }
#my-chat .aw.dark .xd__slots .slot-item .slot-cap { color:var(--D-muted); }
#my-chat .xd__slots .slot-item.unavailable { opacity:.45; cursor:not-allowed; pointer-events:none; }
#my-chat .xd__slots-loading { font-size:13px; color:var(--L-muted); padding:10px 0; text-align:center; }
#my-chat .xd__slot-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
#my-chat .xd__slot-item.selected { border-color: #FEB602; box-shadow: 0 0 0 2px rgba(254,182,2,.25); }
#my-chat .aw.dark .xd__slots-loading { color:var(--D-muted); }
#my-chat .xd__slot-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 8px !important;
  width: 100% !important;
}

#my-chat .xd__slot-list .xd__slot-item {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1.5px solid #E5E0D5 !important;
  background: #FFFFFF !important;
  color: #0F0D0B !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#my-chat .xd__slot-list .xd__slot-item:hover {
  border-color: #FEB602 !important;
}

#my-chat .xd__slot-list .xd__slot-item.selected {
  border-color: #FEB602 !important;
  box-shadow: 0 0 0 2px rgba(254,182,2,.25) !important;
}

#my-chat.dark .xd__slot-list .xd__slot-item,
#my-chat .aw.dark .xd__slot-list .xd__slot-item {
  background: #1A1612 !important;
  border-color: #3A342C !important;
  color: #FFFFFF !important;
}
/* ============================================================
   Chat 05 - Experience Detail 3-Button Bar end
   ============================================================ */


/* ── Chat 05 · Inline Slot List — fix positioning ── */


#my-chat [data-aw-search-wrap].is-open,
#my-chat .chat-search-input-wrap.is-open {
  transform: translateY(0);
  opacity: 1;
  max-height: 60px;
  padding-top: 9px;
  padding-bottom: 9px;
  border-bottom-color: var(--L-line-2);
}

#my-chat [data-aw-search-wrap].d-none,
#my-chat .chat-search-input-wrap.d-none {
  display: none;
}

#my-chat .aw.dark [data-aw-search-wrap],
#my-chat .aw.dark .chat-search-input-wrap {
  border-bottom-color: var(--D-line-2);
}

#my-chat .aw.dark [data-aw-search-wrap].is-open,
#my-chat .aw.dark .chat-search-input-wrap.is-open {
  border-bottom-color: var(--D-line-2);
}

/* Search icon lives as a pseudo-element on the wrap so no HTML markup
   needs to change — the input just gets left padding to make room. */
#my-chat [data-aw-search-wrap],
#my-chat .chat-search-input-wrap {
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  transform: translateY(-6px);
  border-bottom: 1px solid transparent;
  transition: transform .2s ease, opacity .18s ease, max-height .22s ease,
    padding .22s ease, border-color .22s ease;
}

#my-chat [data-aw-search-input],
#my-chat .chat-search-input {
  flex: 1;
  border: 1.5px solid var(--L-line-2);
  border-radius: 999px;
  padding: 9px 14px 9px 49px;
  font-size: var(--aw-chat-font-size);
  font-family: inherit;
  outline: none;
  background: var(--L-card);
  color: var(--L-ink);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#my-chat .aw.dark [data-aw-search-input],
#my-chat .aw.dark .chat-search-input {
  border-color: var(--D-line-2);
  background: var(--D-card);
  color: var(--D-ink);
}

#my-chat [data-aw-search-input]::placeholder,
#my-chat .chat-search-input::placeholder {
  color: var(--L-faint);
}

#my-chat .aw.dark [data-aw-search-input]::placeholder,
#my-chat .aw.dark .chat-search-input::placeholder {
  color: var(--D-faint);
}

#my-chat [data-aw-search-input]:focus,
#my-chat .chat-search-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(56, 59, 241, .16);
}

/* Search glass icon, drawn with a pseudo-element positioned over the
   input's left padding. */
#my-chat [data-aw-search-wrap]::before,
#my-chat .chat-search-input-wrap::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  pointer-events: none;
  border: 1.6px solid var(--L-faint);
  border-radius: 50%;
  box-sizing: border-box;
}

#my-chat [data-aw-search-wrap]::after,
#my-chat .chat-search-input-wrap::after {
  content: "";
  position: absolute;
  left: 41px;
  top: 50%;
  width: 6px;
  height: 1.6px;
  transform: translateY(9px) rotate(45deg);
  transform-origin: left center;
  background: var(--L-faint);
  pointer-events: none;
}

#my-chat .aw.dark [data-aw-search-wrap]::before,
#my-chat .aw.dark .chat-search-input-wrap::before {
  border-color: var(--D-faint);
}

#my-chat .aw.dark [data-aw-search-wrap]::after,
#my-chat .aw.dark .chat-search-input-wrap::after {
  background: var(--D-faint);
}

#my-chat [data-aw-search-close],
#my-chat .chat-search-close {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
#my-chat .aw.dark .xd__slot-item { color: var(--D-ink); border-bottom-color: var(--D-faint); }
#my-chat .xd__slot-item:last-child { border-bottom: 0; }
#my-chat .xd__slot-item:hover { background: var(--L-faint); }
#my-chat .aw.dark .xd__slot-item:hover { background: var(--D-faint); }
#my-chat .xd__slot-item.selected { background: #383BF1; color: #fff; font-weight: 700; }
#my-chat .aw.dark .xd__slot-item.selected { background: #FFE600; color: #11142B; }
#my-chat .xd__slots-loading { font-size: 13px; color: var(--L-muted); padding: 12px 4px; text-align: left; margin-left: 34px; }
#my-chat .aw.dark .xd__slots-loading { color: var(--D-muted); }
@media (max-width: 991.98px) {
  #my-chat .xd__slots-wrap { max-width: 100%; margin-left: 0; }
}

/* ── Chat 05 · Slot Dropdown ── */
#my-chat .xd__slots-wrap { width:100%; max-width:320px; margin-top:8px; }
#my-chat .xd__dropdown { position:relative; width:100%; }
#my-chat .xd__dropdown-trigger { display:flex; align-items:center; justify-content:space-between; width:100%; padding:12px 14px; background:var(--L-card); border:1.5px solid var(--L-line); border-radius:12px; font-family:inherit; font-size:14px; font-weight:600; color:var(--L-ink); cursor:pointer; transition:border-color .15s; }
#my-chat .aw.dark .xd__dropdown-trigger { background:var(--D-card); border-color:var(--D-line); color:var(--D-ink); }
#my-chat .xd__dropdown-trigger.open { border-color:#383BF1; border-radius:12px 12px 0 0; }
#my-chat .xd__dropdown-chev { width:18px; height:18px; flex:none; transition:transform .25s; color:var(--L-muted); }
#my-chat .aw.dark .xd__dropdown-chev { color:var(--D-muted); }
#my-chat .xd__dropdown-trigger.open .xd__dropdown-chev { transform:rotate(180deg); }
#my-chat .xd__dropdown-list { position:absolute; top:100%; left:0; right:0; background:var(--L-card); border:1.5px solid #383BF1; border-top:0; border-radius:0 0 12px 12px; overflow:hidden; z-index:999; box-shadow:0 8px 24px -8px rgba(20,24,80,.2); }
#my-chat .aw.dark .xd__dropdown-list { background:var(--D-card); }
#my-chat .xd__slot-item { display:flex; align-items:center; padding:13px 16px; font-family:inherit; font-size:14px; font-weight:600; color:var(--L-ink); background:transparent; border:0; border-bottom:1px solid var(--L-faint); cursor:pointer; text-align:left; width:100%; transition:background .15s; }
#my-chat .aw.dark .xd__slot-item { color:var(--D-ink); border-bottom-color:var(--D-faint); }
#my-chat .xd__slot-item:last-child { border-bottom:0; }
#my-chat .xd__slot-item:hover { background:#383BF1; color:#fff; }
#my-chat .aw.dark .xd__slot-item:hover { background:#FFE600; color:#11142B; }
#my-chat .xd__slots-loading { font-size:13px; color:var(--L-muted); padding:10px 2px; }
#my-chat .aw.dark .xd__slots-loading { color:var(--D-muted); }
@media (max-width:991.98px) { #my-chat .xd__slots-wrap { max-width:100%; } }


/* Chat 05 - Time Slot Dropdown start
------------------- */
.xd__slots-wrap { width: 100%; max-width: 340px; margin: 6px 0; }
.xd__dropdown { position: relative; width: 100%; font-family: 'Inter', system-ui, sans-serif; }
.xd__dropdown-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--ghost-bd, #E4E7F4); background: var(--ghost-bg, #fff); color: var(--text, #11142B); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .16s; }
.xd__dropdown-trigger.open { border-color: #383BF1; }
.xd__dropdown-chev { width: 18px; height: 18px; transition: transform .2s; flex-shrink: 0; }
.xd__dropdown-trigger.open .xd__dropdown-chev { transform: rotate(180deg); }
.xd__dropdown-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 99; border-radius: 12px; border: 1.5px solid var(--ghost-bd, #E4E7F4); background: var(--card, #fff); box-shadow: 0 8px 24px -8px rgba(20,24,80,.18); padding: 6px; }
.xd__slot-item { display: block; width: 100%; padding: 11px 12px; border-radius: 8px; border: none; background: transparent; font-size: 14px; font-weight: 500; color: var(--text, #11142B); cursor: pointer; text-align: left; transition: background .14s; }
.xd__slot-item:hover { background: var(--soft, #F4F5FD); }
.xd__slot-item.selected { background: #383BF1; color: #fff; font-weight: 700; }
/* Dark mode */
[data-bs-theme="dark"] .xd__dropdown-trigger { background: var(--soft, #232231); border-color: rgba(255,255,255,.13); color: var(--text, #EDEDF6); }
[data-bs-theme="dark"] .xd__dropdown-list { background: var(--card, #1A1922); border-color: rgba(255,255,255,.13); }
[data-bs-theme="dark"] .xd__slot-item { color: var(--text, #EDEDF6); }
[data-bs-theme="dark"] .xd__slot-item:hover { background: var(--soft, #232231); }
/* -------------------
Chat 05 - Time Slot Dropdown end */

/* Time slot dropdown — same left alignment as message bubble, gap below for next element/composer */
/* #my-chat .xd__slots-wrap { width: 100%; max-width: 380px; margin-left: calc(var(--chat-avatar-size) + 10px); margin-top: 8px; margin-bottom: 14px; } */
#my-chat .xd__dropdown { position: relative; width: 100%; }
#my-chat .xd__dropdown-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; background: var(--L-card); border: 1.5px solid var(--L-line); border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--L-ink); cursor: pointer; transition: border-color .15s; }
#my-chat .aw.dark .xd__dropdown-trigger { background: var(--D-card); border-color: var(--D-line); color: var(--D-ink); }
#my-chat .xd__dropdown-trigger.open { border-color: #383BF1; border-radius: 12px 12px 0 0; }
#my-chat .xd__dropdown-chev { width: 18px; height: 18px; flex: none; transition: transform .25s; color: var(--L-muted); }
#my-chat .aw.dark .xd__dropdown-chev { color: var(--D-muted); }
#my-chat .xd__dropdown-trigger.open .xd__dropdown-chev { transform: rotate(180deg); }
#my-chat .xd__dropdown-list { position: absolute; top: 100%; left: 0; right: 0; background: var(--L-card); border: 1.5px solid #383BF1; border-top: 0; border-radius: 0 0 12px 12px; overflow: hidden; max-height: 260px; overflow-y: auto; z-index: 999; box-shadow: 0 8px 24px -8px rgba(20,24,80,.2); }
#my-chat .aw.dark .xd__dropdown-list { background: var(--D-card); }
#my-chat .xd__single-slot { display:flex; align-items:center; padding:12px 14px; border-radius:12px; border:1.5px solid var(--L-line); background:var(--L-card); font-weight:700; font-size:14px; cursor:pointer; }
#my-chat .aw.dark .xd__single-slot { background:var(--D-card); border-color:var(--D-line); }
#my-chat .xd__slots-note { font-size:12px; color:var(--L-muted); margin-top:6px; }
#my-chat .aw.dark .xd__slots-note { color:var(--D-muted); }
#my-chat .xd__slot-item { display: flex; align-items: center; padding: 13px 16px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--L-ink); background: transparent; border: 0; border-bottom: 1px solid var(--L-faint); cursor: pointer; text-align: left; width: 100%; transition: background .15s; }
#my-chat .aw.dark .xd__slot-item { color: var(--D-ink); border-bottom-color: var(--D-faint); }
#my-chat .xd__slot-item:last-child { border-bottom: 0; }
#my-chat .xd__slot-item:hover { background: #383BF1; color: #fff; }
#my-chat .aw.dark .xd__slot-item:hover { background: #FFE600; color: #11142B; }
/* #my-chat .xd__slots-loading { font-size: 13px; color: var(--L-muted); padding: 10px 2px; margin-left: calc(var(--chat-avatar-size) + 10px); } */
#my-chat .aw.dark .xd__slots-loading { color: var(--D-muted); }
/* AB — exact 8px gap match karo jo .chat-row use karta hai */
#my-chat .xd__slots-wrap { width: 100%; max-width: 380px; margin-top: 8px; margin-bottom: 14px; }
#my-chat .xd__slots-loading { font-size: 13px; color: var(--L-muted); padding: 10px 2px; margin-left: calc(var(--chat-avatar-size) + 8px); }
#my-chat .xd__slots-wrap { width: 100%; max-width: 380px;  margin-top: 8px; margin-bottom: 14px; }
#my-chat .xd__slots-loading { font-size: 13px; color: var(--L-muted); padding: 10px 2px; margin-left: calc(var(--chat-avatar-size) + 8px + 11px); }
/* Mobile — avatar column gap is smaller, full width, still gap below */
@media (max-width: 991.98px) {
  #my-chat .xd__seg,
  #my-chat .xd__slots-wrap
   { max-width: 100%; margin-left: 0;
  }
  /* #my-chat .xd__slots-loading */
}

#my-chat .xd__slot-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 8px !important;
  width: 100% !important;
}

#my-chat .xd__slot-list .xd__slot-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  border: 1.5px solid #E5E0D5 !important;
  background: #FFFFFF !important;
  color: #0F0D0B !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  max-height: none !important;
  box-sizing: border-box !important;
}

#my-chat .xd__slot-list .xd__slot-item:hover {
  border-color: #FEB602 !important;
}

#my-chat .xd__slot-list .xd__slot-item.selected {
  border-color: #FEB602 !important;
  box-shadow: 0 0 0 2px rgba(254,182,2,.25) !important;
}

#my-chat.dark .xd__slot-list .xd__slot-item,
#my-chat .aw.dark .xd__slot-list .xd__slot-item {
  background: #1A1612 !important;
  border-color: #3A342C !important;
  color: #FFFFFF !important;
}

@media (max-width: 991.98px) {
  #my-chat .xd__seg { max-width: 100%; }
}

/* ============ Chat 05 - Experience Detail 3-Button Bar + Time Slot Dropdown end ============ */


/* ── [Chat 06 · AwweeMapCard CSS START] ───────────────────────────────────── */
.awmc{position:relative;border-radius:22px;overflow:hidden;
  box-shadow:0 18px 44px -18px rgba(15,13,11,.4);
  font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
.awmc iframe{display:block;border:0;width:100%;height:260px;}
.awmc.dark iframe{filter:invert(.92) hue-rotate(180deg) saturate(.65) brightness(.9);}
.awmc.dark{box-shadow:0 0 0 1px rgba(254,182,2,.1),0 20px 50px -20px rgba(0,0,0,.7);}

.awmc-live{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(15,13,11,.85);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:'Space Grotesk',ui-monospace,monospace;font-weight:700;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;padding:6px 11px;border-radius:999px;}
.awmc-live i{width:7px;height:7px;border-radius:50%;background:#FEB602;flex-shrink:0;
  animation:awmcPing 1.8s ease-out infinite;}
@keyframes awmcPing{0%{box-shadow:0 0 0 0 rgba(254,182,2,.7);}100%{box-shadow:0 0 0 9px rgba(254,182,2,0);}}

.awmc-glass{position:absolute;left:8px;right:8px;bottom:8px;
  background:rgba(255,255,255,.66);backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  border:1px solid rgba(255,255,255,.75);border-radius:16px;padding:11px 13px;
  display:flex;align-items:center;gap:11px;box-shadow:0 10px 26px -12px rgba(15,13,11,.4);}
.awmc.dark .awmc-glass{background:rgba(26,22,18,.62);border-color:rgba(255,255,255,.14);
  box-shadow:0 10px 26px -12px hsla(0, 0%, 0%, 0.6);}
.awmc-l{min-width:0;flex:1;}
.awmc-name{font-family:'Bricolage Grotesque','DM Sans',sans-serif;font-weight:800;
  font-size:15px;letter-spacing:-.02em;line-height:1.15;margin:0;color:#0F0D0B;}
.awmc.dark .awmc-name{color:#fff;}
.awmc-addr{font-size:10.5px;font-weight:500;color:rgba(15,13,11,.7);margin:1px 0 0;
  white-space:normal;overflow:hidden;text-overflow:ellipsis;line-height: 1.4;}
.awmc.dark .awmc-addr{color:rgba(255,255,255,.75);}
.awmc-go{width:38px;height:38px;border-radius:13px;border:0;cursor:pointer;flex-shrink:0;
  background:#FEB602;color:#0F0D0B;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(232,159,0,.55),
  0 6px 16px -6px rgba(254,182,2,.7);transition:transform .15s;text-decoration:none;}
.awmc-go:hover{transform:translateY(-1px) scale(1.03);}
.awmc-go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;}

.awmc-catch{position:absolute;inset:0;bottom:70px;cursor:zoom-in;background:transparent;border:0;padding:0;}
.awmc-hint{position:absolute;right:8px;top:8px;pointer-events:none;display:inline-flex;
  align-items:center;gap:5px;background:rgba(15,13,11,.82);color:#fff;
  font-family:'Space Grotesk',ui-monospace,monospace;font-weight:700;font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:999px;
  opacity:0;transition:opacity .2s;}
.awmc:hover .awmc-hint{opacity:1;}
.awmc-hint svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;}

/* modal */
.awmc-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;
  justify-content:center;padding:24px;box-sizing:border-box;visibility:hidden;
  font-family:'DM Sans',system-ui,sans-serif;}
.awmc-modal.open{visibility:visible;}
.awmc-bd{position:absolute;inset:0;background:rgba(15,13,11,.55);backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .3s;}
.awmc-modal.open .awmc-bd{opacity:1;}
.awmc-sheet{position:relative;width:640px;max-width:100%;max-height:100%;
  background:#FBF7EE;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55);
  transform:translateY(18px) scale(.97);opacity:0;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s;}
.awmc-modal.open .awmc-sheet{transform:translateY(0) scale(1);opacity:1;}
.awmc-modal.dark .awmc-sheet{background:#1A1612;color:#fff;}
.awmc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid rgba(15,13,11,.07);flex-shrink:0;}
.awmc-modal.dark .awmc-head{border-color:rgba(255,255,255,.08);}
.awmc-head .awmc-name{font-size:18px;}
.awmc-modal.dark .awmc-head .awmc-name{color:#fff;}
.awmc-head .awmc-addr{white-space:normal;}
.awmc-x{width:32px;height:32px;border-radius:10px;border:0;cursor:pointer;flex-shrink:0;
  background:rgba(15,13,11,.06);color:#0F0D0B;display:inline-flex;align-items:center;
  justify-content:center;transition:background .15s;}
.awmc-modal.dark .awmc-x{background:rgba(255,255,255,.1);color:#fff;}
.awmc-x:hover{background:rgba(15,13,11,.12);}
.awmc-modal.dark .awmc-x:hover{background:rgba(255,255,255,.18);}
.awmc-x svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;}
.awmc-bigmap{height:380px;min-height:220px;}
.awmc-bigmap iframe{display:block;border:0;width:100%;height:100%;}
.awmc-modal.dark .awmc-bigmap iframe{filter:invert(.92) hue-rotate(180deg) saturate(.65) brightness(.9);}
.awmc-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:13px 18px;flex-shrink:0;}
.awmc-ghost{display:inline-flex;align-items:center;gap:6px;background:transparent;color:#0F0D0B;
  border:1.5px solid rgba(15,13,11,.25);border-radius:999px;font-weight:700;font-size:12px;
  font-family:inherit;padding:8px 13px;cursor:pointer;text-decoration:none;white-space:nowrap;}
.awmc-modal.dark .awmc-ghost{color:#fff;border-color:rgba(255,255,255,.3);}
.awmc-ghost svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;}
.awmc-dir{display:inline-flex;align-items:center;gap:7px;background:#FEB602;color:#0F0D0B;
  font-weight:700;font-size:12px;font-family:inherit;padding:9px 14px;border-radius:999px;
  border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(232,159,0,.55);}
.awmc-dir svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;}

/* Slot wrapper — slide-open animation */
.xd__map-card-slot{width:100%;margin-top:12px;overflow:hidden;
  max-height:0;opacity:0;
  transition:max-height .55s cubic-bezier(.2,.7,.2,1),opacity .35s ease;}
.xd__map-card-slot.open{max-height:340px;opacity:1;}
.xd__map-card-slot .awmc{width:100%;box-sizing:border-box;}

@media (max-width:560px){
  .awmc-modal{padding:0;align-items:flex-end;}
  .awmc-sheet{width:100%;border-radius:22px 22px 0 0;}
  .xd__map-card-slot{margin-top:8px;}
  .xd__map-card-slot.open{max-height:300px;}
}
/* awwee map card — dark mode address color fix */

[data-bs-theme="dark"] .awmc-head .awmc-addr {
  color: rgba(255, 255, 255, 0.75) !important;
  }
[data-bs-theme="dark"] .awmc-dir{
  color: #0F0D0B;;
}
/* Map — left margin = awwee avatar width + gap (chat bubble se align) */
[data-xd-map-slot] {
  margin-left: 58px;
}

@media (max-width: 992px) {
  [data-xd-map-slot] {
    margin-left: 0;
  }
}
/* ── [Chat 06 · AwweeMapCard CSS END] ─────────────────────────────────────── */


/* ============================================================
   Chat 02 - Booking Details Card start
   -------------------
   AWESTRUCK IN-CHAT KIT — 02 · Booking Details Card
   Source: handoff-chat-02/Chat 02 - Booking Details Card.html
   ============================================================ */

/* --- CSS variables: light theme --- */
[data-bs-theme="light"] .bc-wrap,
[data-bs-theme="light"] .bc-wrap * {
  --card:#FFFFFF; --soft:#F4F5FD;
  --text:#11142B; --muted:#6B7180; --line:#ECEDF5; --hair:#EEF0F8;
  --shadow:0 14px 38px -22px rgba(20,24,80,.42);
  --ghost-bg:#FFFFFF; --ghost-bd:#E4E7F4;
}
/* --- CSS variables: dark theme --- */
[data-bs-theme="dark"] .bc-wrap,
[data-bs-theme="dark"] .bc-wrap * {
  --card:#1A1922; --soft:#232231;
  --text:#EDEDF6; --muted:#A0A0BE; --line:rgba(255,255,255,.08); --hair:rgba(255,255,255,.07);
  --shadow:0 18px 44px -22px rgba(0,0,0,.72);
  --ghost-bg:#22202C; --ghost-bd:rgba(255,255,255,.13);
}
/* --- shared tokens (theme-independent) --- */
.bc-wrap {
  --indigo:#383BF1; --indigo-700:#2A2CC9; --sky:#4C8DFF;
  --green:#17B978; --wa:#25D366;
  --grad:linear-gradient(125deg,#383BF1 0%,#5B4BF2 52%,#4C8DFF 100%);
  --r-card:18px; --r-in:12px; --pill:999px;
  width:100%; max-width:410px; align-self:flex-start;
  font-family:'Inter',system-ui,sans-serif;
  }
.bc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow)}
.bc__head{padding:16px 18px 15px;border-bottom:1px solid var(--hair);position:relative}
.bc__head::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)}
.bc__status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--green);background:rgba(23,185,120,.12);padding:5px 11px;border-radius:var(--pill)}
.bc__status svg{width:13px;height:13px}
.bc__title{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin:10px 0 3px;line-height:1.2}
.bc__count{font-size:12.5px;color:var(--muted);font-weight:600}
.bc__count b{color:var(--indigo)}
[data-bs-theme="dark"] .bc__count b{color:#AEB2FF}
.bc__body{padding:6px 18px 16px}
.bc__row{display:flex;align-items:flex-start;gap:12px;padding:10px 0}
.bc__row+.bc__row{border-top:1px solid var(--hair)}
.bc__ic{width:34px;height:34px;border-radius:10px;background:var(--soft);display:grid;place-items:center;flex:none;color:var(--indigo);margin-top:1px}
[data-bs-theme="dark"] .bc__ic{color:#A9AEFF}
.bc__ic svg{width:17px;height:17px}
.bc__rt{flex:1;min-width:0}
.bc__lbl{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:3px}
.bc__rt b{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em;display:block;line-height:1.3;word-break:break-word}
.bc__rt span{font-size:12.5px;color:var(--muted);display:block;margin-top:2px;line-height:1.4;word-break:break-word}
.bc__rt a.link{color:var(--indigo);text-decoration:none;font-weight:700}
[data-bs-theme="dark"] .bc__rt a.link{color:#AEB2FF}
.bc__grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:12px 0 4px}
.bc__tile{background:var(--soft);border-radius:var(--r-in);padding:10px 12px}
.bc__tile label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:block}
.bc__tile p{font-size:14.5px;font-weight:700;color:var(--text);margin-top:3px;letter-spacing:-.01em}
.bc__host{display:flex;align-items:center;gap:11px;border-radius:var(--r-in); padding: 10px 0;}
.bc__host:hover {
  background: var(--soft);
  }
.bc__host .ha{width:36px;height:36px;border-radius:10px; background: var(--soft);display:grid;place-items:center;color:var(--indigo);flex:none;border:1px solid var(--line)}
[data-bs-theme="dark"] .bc__host .ha{color:#A9AEFF}
.bc__host .ha svg{width:18px;height:18px}
.bc__host .ht{flex:1;min-width:0}
.bc__host .ht b{font-size:14px;color:var(--text);font-weight:700;display:block;line-height:1.25}
.bc__host .ht span{font-size:11.5px;color:var(--muted);display:block;margin-top:1px; line-height: 1.4;}
.bc__host .contact{display:flex;gap:7px;flex:none}
.hbtn{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;text-decoration:none;flex:none;transition:.16s}
.hbtn:hover{transform:translateY(-2px)}.hbtn svg{width:17px;height:17px}
.h-call{background:var(--indigo)}.h-wa{background:var(--wa)}
.bc__map{align-self:center;flex:none;height:38px;padding:0 13px;border-radius:var(--pill);background:var(--ghost-bg);border:1.5px solid var(--ghost-bd);color:var(--indigo);font-family:inherit;font-weight:700;font-size:12.5px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:.16s}
[data-bs-theme="dark"] .bc__map{color:#AEB2FF}
.bc__map:hover{border-color:var(--indigo);transform:translateY(-1px)}.bc__map svg{width:15px;height:15px}
.bc__cta{display:flex;gap:9px;margin-top:14px}
.bc-wrap .btn{font-family:inherit;border:0;cursor:pointer;font-weight:700;font-size:14.5px;border-radius:var(--pill);height:46px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;white-space:nowrap;flex:1}
.bc-wrap .btn svg{width:17px;height:17px;flex:none}
.bc-wrap .btn--primary{background:var(--grad);color:#fff;box-shadow:0 12px 26px -12px rgba(56,59,241,.85)}
.bc-wrap .btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(56,59,241,.95)}
.bc-wrap .btn--ghost{background:var(--ghost-bg);color:var(--indigo);border:1.5px solid var(--ghost-bd)}
[data-bs-theme="dark"] .bc-wrap .btn--ghost{color:#AEB2FF}
.bc-wrap .btn--ghost:hover{border-color:var(--indigo);transform:translateY(-2px)}
.bc__share{display:flex;align-items:center;gap:9px;border-top:1px solid var(--hair);margin-top:14px;padding-top:13px}
.bc__share .lab{font-size:12.5px;color:var(--muted);font-weight:700;margin-right:auto; line-height: 1.4;}
.sbtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;color:#fff;transition:.16s;flex:none}
.sbtn:hover{transform:translateY(-2px)}.sbtn svg{width:18px;height:18px}
.s-wa{background:var(--wa)}.s-ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#bc1888)}
.s-x{background:#11142B}
[data-bs-theme="dark"] .s-x{background:#000}
.s-download{background:var(--grad);color:#fff}
[data-bs-theme="dark"] .s-download{color:#fff}
.sbtn.ok{background:var(--green);color:#fff}

@media(prefers-reduced-motion:reduce){
  .bc-wrap *{animation:none!important;transition:none!important}
}
/* -------------------
   Chat 02 - Booking Details Card end
   ============================================================ */

   /* Match Home page's .package-available-status font size (12px) */
#my-chat .aw-thread .bot-cards .c .avail,
#my-chat .aw-thread .bot-cards .c .avail-label {
  font-size: 12px !important;
}

/* ── A1: AI disclaimer under the last bubble of each Awwee reply ──
   Inherits font-family and color from its container, so it auto-adapts
   to light/dark mode with no extra rules needed. */
#my-chat .awwee-disclaimer {
  font-size: 11px;
  line-height: 1.4;
  opacity: 0.55;
  text-align: center;
  padding: 0 16px 8px;
  margin: 0;
}

/* ═════════════════════════════════════════════════════════════════
   Match chat cards' font size + centering to home page cards exactly
   ═════════════════════════════════════════════════════════════════ */
#my-chat .aw-thread .bot-cards .c .title {
  font-size: 17px !important;
}

#my-chat .aw-thread .bot-cards .c .pnow {
  font-size: 22px !important;
}

#my-chat .aw-thread .bot-cards .c .pold {
  font-size: 10.5px !important;
}

#my-chat .aw-thread .bot-cards .c .save-inline {
  font-size: 9.5px !important;
}

#my-chat .aw-thread .bot-cards .c .book {
  font-size: 15px !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}