/* =========================================================
   WEBSITE FAQ CHATBOT WIDGET
   Uses the site's design tokens from style.css (forest / cream / red).
   ========================================================= */

.chatbot {
   --cb-green: var(--forest-900, #0f2a20);
   --cb-green-2: var(--forest-700, #1c4d38);
   --cb-accent: var(--red-600, #a01f2b);
   --cb-cream: var(--cream-50, #faf7f1);
   --cb-cream-2: var(--cream-100, #f4efe5);
   --cb-line: var(--cream-200, #ece3d3);
   --cb-text: var(--charcoal-900, #1a1c1a);
   --cb-muted: var(--charcoal-500, #6b6f6a);
   --cb-font: var(--font-body, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   --cb-display: var(--font-display, 'Fraunces', Georgia, serif);
   --cb-bottom: 28px;
   --cb-right: 28px;
   font-family: var(--cb-font);
}

/* Keep the back-to-top button clear of the chat launcher */
body.has-chatbot .back-to-top {
   bottom: 110px;
}

/* ---------- Launcher: glowing pill — mascot + "Ask Me" | ASK D'ORGANIZERS AI | → ---------- */
.chatbot__launcher {
   position: fixed;
   right: var(--cb-right);
   bottom: var(--cb-bottom);
   z-index: 160;
   display: inline-flex;
   align-items: center;
   gap: 12px;
   height: 66px;
   padding: 0 7px 0 8px;
   border: 1.5px solid rgba(232, 51, 111, .55);
   border-radius: 999px;
   background: linear-gradient(135deg, #12382a 0%, var(--cb-green) 55%, #0b1f18 100%);
   color: #fff;
   font-family: var(--cb-font);
   cursor: pointer;
   box-shadow:
      0 14px 30px rgba(11, 31, 24, .38),
      0 0 18px rgba(232, 51, 111, .35),
      inset 0 1px 0 rgba(255, 255, 255, .12);
   transition: transform .25s ease, box-shadow .25s ease, padding .25s ease, border-color .25s ease;
   animation: chatbot-launcher-in .5s cubic-bezier(.2, .9, .3, 1.3) both, chatbot-glow 3.2s ease-in-out .6s infinite;
}

.chatbot__launcher:hover {
   transform: translateY(-3px);
   border-color: rgba(232, 51, 111, .85);
   box-shadow:
      0 18px 36px rgba(11, 31, 24, .45),
      0 0 26px rgba(232, 51, 111, .55),
      inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* Mascot with the small "Ask Me" tag beneath it */
.chatbot__launcher-icon {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   flex-shrink: 0;
}

.chatbot__askme {
   position: absolute;
   left: 50%;
   bottom: -7px;
   z-index: 2;
   transform: translateX(-50%);
   padding: 1px 7px;
   border-radius: 999px;
   background: linear-gradient(135deg, #e8336f, var(--cb-accent));
   color: #fff;
   font-size: .58rem;
   font-weight: 800;
   letter-spacing: .04em;
   line-height: 1.5;
   white-space: nowrap;
   box-shadow: 0 2px 6px rgba(160, 31, 43, .45);
}

/* Round arrow button on the right */
.chatbot__launcher-arrow {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 1rem;
   color: #fff;
   background: linear-gradient(135deg, #e8336f 0%, var(--cb-accent) 100%);
   box-shadow: 0 4px 12px rgba(160, 31, 43, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
   transition: transform .25s ease;
}

.chatbot__launcher:hover .chatbot__launcher-arrow {
   transform: translateX(3px);
}

.chatbot.is-open .chatbot__launcher-arrow,
.chatbot.is-open .chatbot__askme {
   display: none;
}

/* Soft breathing glow around the pill (stops once the chat has been opened) */
@keyframes chatbot-glow {
   0%, 100% { box-shadow: 0 14px 30px rgba(11, 31, 24, .38), 0 0 14px rgba(232, 51, 111, .28), inset 0 1px 0 rgba(255, 255, 255, .12); }
   50% { box-shadow: 0 14px 30px rgba(11, 31, 24, .38), 0 0 28px rgba(232, 51, 111, .6), inset 0 1px 0 rgba(255, 255, 255, .12); }
}

.chatbot.was-opened .chatbot__launcher,
.chatbot.is-open .chatbot__launcher {
   animation: none;
}

.chatbot__orb {
   position: relative;
   width: 52px;
   height: 52px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 1.2rem;
   color: var(--cb-accent);
   background: radial-gradient(circle at 50% 35%, #ffffff 0%, #ffe9f1 100%); /* soft white disc behind the mascot */
   box-shadow: 0 0 0 3px rgba(255, 255, 255, .18), 0 4px 10px rgba(0, 0, 0, .18);
}

/* D'Organizers AI mascot (public/assets/img/chatbot-mascot.webp / .png) */
.chatbot__mascot {
   display: block;
   line-height: 0;
}

.chatbot__mascot img {
   display: block;
   width: 100%;
   height: auto;
}

/* Header avatar: show the mascot's head and shoulders */
.chatbot__avatar .chatbot__mascot {
   width: 118%;
   margin-top: 14px;
}

/* In the launcher the mascot's head pops just above the circle */
.chatbot__orb .chatbot__mascot {
   position: absolute;
   left: 50%;
   bottom: 1px;
   width: 128%;
   transform: translateX(-50%);
   z-index: 1;
   filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .22));
}

/* Soft attention pulse in the brand's pink-red, two staggered rings
   (stops once the visitor has opened the chat) */
.chatbot__orb::before,
.chatbot__orb::after {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 2px solid rgba(232, 51, 111, .55);
   animation: chatbot-pulse 2.8s ease-out infinite;
   pointer-events: none;
}

.chatbot__orb::after {
   border-color: rgba(238, 75, 43, .45);
   animation-delay: 1.4s;
}

.chatbot__launcher-open {
   animation: chatbot-bob 5s ease-in-out infinite;
}

.chatbot.is-open .chatbot__orb::before,
.chatbot.is-open .chatbot__orb::after,
.chatbot.was-opened .chatbot__orb::before,
.chatbot.was-opened .chatbot__orb::after,
.chatbot.is-open .chatbot__launcher-open {
   animation: none;
   opacity: 0;
}

.chatbot.is-open .chatbot__launcher-open {
   opacity: 1;
}

.chatbot__launcher-label {
   font-size: .86rem;
   font-weight: 800;
   letter-spacing: .08em;
   text-transform: uppercase;
   white-space: nowrap;
   background: linear-gradient(90deg, #ffffff 0%, #ffd7e4 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.chatbot.is-open .chatbot__launcher {
   height: 60px;
   padding: 0 4px;
   border-color: rgba(255, 255, 255, .15);
}

.chatbot.is-open .chatbot__launcher-label {
   display: none;
}

/* Inline SVG icons for the widget's own controls, so they show even when the
   icon-font CDN is blocked or slow (blank launcher / header / send buttons). */
.chatbot__icon {
   width: 1.1em;
   height: 1.1em;
   fill: none;
   stroke: currentColor;
   stroke-width: 2.2;
   stroke-linecap: round;
   stroke-linejoin: round;
   vertical-align: middle;
}

@keyframes chatbot-pulse {
   0% { transform: scale(1); opacity: .9; }
   70%, 100% { transform: scale(1.55); opacity: 0; }
}

/* Gentle wave-like bob of the mascot every few seconds */
@keyframes chatbot-bob {
   0%, 80%, 100% { transform: translateX(-50%) translateY(0) rotate(0); }
   85% { transform: translateX(-50%) translateY(-4px) rotate(-4deg); }
   90% { transform: translateX(-50%) translateY(0) rotate(3deg); }
   95% { transform: translateX(-50%) translateY(-2px) rotate(0); }
}

@keyframes chatbot-launcher-in {
   from { opacity: 0; transform: translateY(16px) scale(.92); }
   to { opacity: 1; transform: translateY(0) scale(1); }
}

.chatbot__launcher:focus-visible,
.chatbot__close:focus-visible,
.chatbot__send:focus-visible,
.chatbot__chip:focus-visible,
.chatbot__action:focus-visible {
   outline: 3px solid #f2c94c;
   outline-offset: 2px;
}

.chatbot__launcher-close,
.chatbot.is-open .chatbot__launcher-open {
   display: none;
}

.chatbot.is-open .chatbot__launcher-close {
   display: inline;
}

.chatbot__panel {
   position: fixed;
   right: var(--cb-right);
   bottom: calc(var(--cb-bottom) + 80px);
   z-index: 400;
   width: 380px;
   max-width: calc(100vw - 32px);
   height: min(620px, calc(100vh - 140px));
   display: flex;
   flex-direction: column;
   background: #fff;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 24px 60px rgba(11, 31, 24, .28);
   border: 1px solid rgba(15, 42, 32, .08);
   animation: chatbot-in .22s ease-out;
}

.chatbot__panel[hidden] {
   display: none;
}

@keyframes chatbot-in {
   from { opacity: 0; transform: translateY(12px); }
   to { opacity: 1; transform: translateY(0); }
}

.chatbot__header {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 16px 16px 16px 18px;
   background: linear-gradient(135deg, var(--cb-green), var(--cb-green-2));
   color: #fff;
}

.chatbot__avatar {
   width: 46px;
   height: 46px;
   overflow: hidden;
   border-radius: 50%;
   background: radial-gradient(circle at 50% 35%, #ffffff 0%, #ffe9f1 100%);
   box-shadow: 0 0 0 3px rgba(255, 255, 255, .16);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.05rem;
   flex-shrink: 0;
}

.chatbot__status-dot {
   display: inline-block;
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #4ade80;
   margin-right: 4px;
   vertical-align: 1px;
   box-shadow: 0 0 0 2px rgba(74, 222, 128, .25);
}

.chatbot__disclosure {
   margin: 0;
   padding: 8px 16px;
   font-size: .72rem;
   line-height: 1.4;
   color: var(--cb-muted);
   background: var(--cb-cream-2);
   border-bottom: 1px solid var(--cb-line);
}

.chatbot__disclosure i {
   color: var(--cb-green-2);
   margin-right: 4px;
}

/* "Verified answer" / "From our website" tag on rule-based replies */
.chatbot__badge {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   margin-bottom: 6px;
   padding: 2px 8px;
   border-radius: 999px;
   font-size: .68rem;
   font-weight: 800;
   letter-spacing: .03em;
   text-transform: uppercase;
   background: var(--cb-cream-2);
   color: var(--cb-green-2);
}

.chatbot__badge--faq {
   background: #e8f3ec;
   color: #1c6b45;
}

.chatbot__heading {
   flex: 1;
   min-width: 0;
}

.chatbot__title {
   font-family: var(--cb-display);
   font-size: 1.05rem;
   font-weight: 600;
   line-height: 1.2;
   margin: 0;
   color: #fff;
}

.chatbot__subtitle {
   font-size: .74rem;
   opacity: .82;
   margin: 3px 0 0;
   line-height: 1.35;
}

.chatbot__close {
   width: 36px;
   height: 36px;
   border: 0;
   border-radius: 50%;
   background: rgba(255, 255, 255, .12);
   color: #fff;
   cursor: pointer;
   font-size: 1rem;
   flex-shrink: 0;
}

.chatbot__close:hover {
   background: rgba(255, 255, 255, .24);
}

.chatbot__messages {
   flex: 1;
   overflow-y: auto;
   padding: 18px 16px 8px;
   background: var(--cb-cream);
   display: flex;
   flex-direction: column;
   gap: 10px;
   overscroll-behavior: contain;
}

.chatbot__msg {
   max-width: 86%;
   padding: 10px 14px;
   border-radius: 16px;
   font-size: .9rem;
   line-height: 1.5;
   color: var(--cb-text);
   word-wrap: break-word;
   overflow-wrap: anywhere;
}

.chatbot__msg p {
   margin: 0 0 6px;
}

.chatbot__msg p:last-child,
.chatbot__msg ul:last-child {
   margin-bottom: 0;
}

.chatbot__msg ul {
   margin: 4px 0 6px;
   padding-left: 18px;
   list-style: disc; /* the site stylesheet removes list markers globally */
}

.chatbot__msg li {
   margin-bottom: 3px;
   display: list-item;
}

.chatbot__msg--bot {
   align-self: flex-start;
   background: #fff;
   border: 1px solid var(--cb-line);
   border-bottom-left-radius: 5px;
}

.chatbot__msg--user {
   align-self: flex-end;
   background: var(--cb-green);
   color: #fff;
   border-bottom-right-radius: 5px;
   white-space: pre-line;
}

.chatbot__msg--error {
   border-color: #f3c3c6;
   background: #fff6f6;
}

.chatbot__sources {
   margin-top: 8px;
   padding-top: 8px;
   border-top: 1px dashed var(--cb-line);
   font-size: .78rem;
   color: var(--cb-muted);
}

.chatbot__sources a {
   color: var(--cb-green-2);
   font-weight: 700;
   text-decoration: underline;
}

.chatbot__chips {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   align-self: flex-start;
   max-width: 100%;
}

.chatbot__chips-label {
   width: 100%;
   font-size: .74rem;
   color: var(--cb-muted);
   margin: 2px 0 0;
}

.chatbot__chip {
   border: 1px solid var(--cb-green-2);
   background: #fff;
   color: var(--cb-green);
   font-family: inherit;
   font-size: .8rem;
   font-weight: 600;
   line-height: 1.3;
   padding: 7px 12px;
   border-radius: 999px;
   cursor: pointer;
   text-align: left;
}

.chatbot__chip:hover {
   background: var(--cb-green);
   color: #fff;
}

.chatbot__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 10px;
}

.chatbot__action {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 7px 12px;
   border-radius: 999px;
   font-family: inherit;
   font-size: .8rem;
   font-weight: 700;
   text-decoration: none;
   cursor: pointer;
   border: 1px solid var(--cb-line);
   background: var(--cb-cream-2);
   color: var(--cb-text);
}

.chatbot__action--primary {
   background: var(--cb-accent);
   border-color: var(--cb-accent);
   color: #fff;
}

.chatbot__action--whatsapp {
   background: #25D366;
   border-color: #25D366;
   color: #fff;
}

.chatbot__typing {
   align-self: flex-start;
   display: inline-flex;
   gap: 4px;
   padding: 12px 14px;
   background: #fff;
   border: 1px solid var(--cb-line);
   border-radius: 16px;
   border-bottom-left-radius: 5px;
}

.chatbot__typing span {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--cb-muted);
   animation: chatbot-dot 1.2s infinite ease-in-out;
}

.chatbot__typing span:nth-child(2) { animation-delay: .15s; }
.chatbot__typing span:nth-child(3) { animation-delay: .3s; }

@keyframes chatbot-dot {
   0%, 80%, 100% { opacity: .3; transform: translateY(0); }
   40% { opacity: 1; transform: translateY(-3px); }
}

.chatbot__lead {
   display: grid;
   gap: 8px;
   margin-top: 10px;
}

.chatbot__lead input,
.chatbot__lead textarea {
   width: 100%;
   font-family: inherit;
   font-size: .85rem;
   padding: 9px 11px;
   border: 1px solid var(--cb-line);
   border-radius: 10px;
   background: #fff;
   color: var(--cb-text);
}

.chatbot__lead input:focus,
.chatbot__lead textarea:focus {
   outline: none;
   border-color: var(--cb-green-2);
   box-shadow: 0 0 0 3px rgba(28, 77, 56, .15);
}

.chatbot__lead-error {
   color: var(--cb-accent);
   font-size: .78rem;
   margin: 0;
}

.chatbot__form {
   display: flex;
   align-items: flex-end;
   gap: 8px;
   padding: 12px;
   border-top: 1px solid var(--cb-line);
   background: #fff;
}

.chatbot__input {
   flex: 1;
   resize: none;
   max-height: 110px;
   min-height: 44px;
   font-family: inherit;
   font-size: 16px; /* 16px stops iOS from zooming into the field */
   line-height: 1.4;
   padding: 11px 14px;
   border: 1px solid var(--cb-line);
   border-radius: 14px;
   background: var(--cb-cream);
   color: var(--cb-text);
}

.chatbot__input:focus {
   outline: none;
   border-color: var(--cb-green-2);
   background: #fff;
}

.chatbot__send {
   width: 44px;
   height: 44px;
   flex-shrink: 0;
   border: 0;
   border-radius: 50%;
   background: var(--cb-accent);
   color: #fff;
   font-size: 1rem;
   cursor: pointer;
}

.chatbot__send:disabled {
   opacity: .5;
   cursor: wait;
}

.chatbot__hp,
.chatbot__sr {
   position: absolute !important;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
   padding: 0;
   margin: -1px;
}

/* ---------- Tablet / phone ---------- */
@media (max-width: 768px) {
   .chatbot {
      /* sits above the fixed mobile bottom navigation */
      --cb-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
      --cb-right: 16px;
   }

   body.has-chatbot .back-to-top {
      bottom: calc(158px + env(safe-area-inset-bottom, 0px));
   }

   .chatbot__launcher {
      height: 58px;
      gap: 9px;
      padding: 0 6px 0 6px;
   }

   .chatbot__orb {
      width: 44px;
      height: 44px;
      font-size: 1.05rem;
   }

   .chatbot__launcher-label {
      font-size: .7rem;
      letter-spacing: .05em;
   }

   .chatbot__launcher-arrow {
      width: 38px;
      height: 38px;
      font-size: .85rem;
   }

   .chatbot__askme {
      font-size: .52rem;
      bottom: -6px;
   }

}

@media (max-width: 576px) {
   /* Icon-only circular launcher on phones: just the D'Organizers AI mascot
      (with its pulse rings), no text labels. The full name stays in the
      button's aria-label. */
   .chatbot__launcher {
      width: 58px;
      padding: 0;
      justify-content: center;
   }

   .chatbot__launcher-label,
   .chatbot__launcher-arrow,
   .chatbot__askme {
      display: none;
   }

   .chatbot__panel {
      inset: 0;
      width: 100%;
      max-width: none;
      height: 100%;
      height: 100dvh;
      border-radius: 0;
      border: 0;
   }

   .chatbot__header {
      padding-top: calc(14px + env(safe-area-inset-top, 0px));
   }

   .chatbot__form {
      padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
   }

   .chatbot.is-open .chatbot__launcher {
      display: none;
   }

   html.chatbot-locked,
   html.chatbot-locked body {
      overflow: hidden;
   }

   .chatbot__msg {
      max-width: 92%;
   }
}

@media (prefers-reduced-motion: reduce) {
   .chatbot__panel,
   .chatbot__typing span,
   .chatbot__launcher,
   .chatbot__launcher-open {
      animation: none;
   }

   /* No pulse rings at all for visitors who prefer reduced motion */
   .chatbot__orb::before,
   .chatbot__orb::after {
      animation: none;
      opacity: 0;
   }

   .chatbot__launcher,
   .chatbot__launcher:hover {
      transition: none;
      transform: none;
   }
}