/******************************
  1) Beta banner styling
******************************/
#chatbot-popup .chatbot-beta-banner {
  /* Allow multi-line content to be fully visible */
  display: flex;
  align-items: flex-start;
  height: auto !important;
  min-height: 40px;
  overflow: visible;
  flex: 0 0 auto; /* Do not let flex sizing steal or squash it */
}

#chatbot-popup .chatbot-beta-banner p {
  margin-bottom: 0;
  font-size: 16px;
}


/******************************
  Ensure chat launcher icon is fully clickable (for GTM)
******************************/
#open-chat * {
  pointer-events: none !important;
}

/*********************************
  2) Popup container + visibility
**********************************/
#chatbot-popup {
  /* Stable container; hidden by default in your base CSS */
  /* Ensure the container itself won't clip children on mobile */
  max-height: 100svh;           /* use 100dvh if you prefer dynamic UI height */
  overflow: hidden;             /* keep rounded edge clipping if used */
  pointer-events: none;         /* avoid invisible overlay when hidden */
}

#chatbot-popup.visible {
  /* When visible, make it a flex column and clickable */
  display: flex !important;
  flex-direction: column !important;
  pointer-events: auto !important;
}

/*****************************************
  3) Header: natural height (no hard calc)
******************************************/
#chatbot-popup #chatbot-header {
  height: auto !important;
  min-height: 48px; /* adjust to taste */
}

/*****************************************
  4) Webchat area (messages + list)
     → The scroll container, not the page
******************************************/
#chatbot-popup #webchat {
  flex: 1 1 auto !important;          /* take remaining vertical space */
  min-height: 0 !important;           /* CRITICAL: allow shrinking in flex */
  height: auto !important;            /* neutralize any calc(...) from base */
  overflow-y: auto !important;        /* scroll inside webchat */
  -webkit-overflow-scrolling: touch;  /* momentum scrolling on iOS */
}

/* If any rule sets a --beta-banner-height on sibling, decouple it */
#chatbot-popup .chatbot-beta-banner ~ #webchat {
  --beta-banner-height: initial !important;
}

/*********************************
  5) Tooltips for icon buttons
**********************************/
#chatbot-popup .icon-button {
  position: relative;
}

#chatbot-popup .icon-button::after {
  content: attr(aria-label);
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-size: 14px;
  z-index: 99999;
}

#chatbot-popup .icon-button:hover::after {
  opacity: 1;
}

/*****************************************
  6) Send box: consistent height
******************************************/
#chatbot-popup .webchat__send-box {
  flex-shrink: 0 !important; /* never shrink the composer */
}

#chatbot-popup .webchat__send-box__main {
  min-height: 60px !important; /* stable input height */
}

#chatbot-popup .webchat__send-box-text-box {
  align-items: flex-start !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/*****************************************
  7) Input focus (remove shadow)
******************************************/
.webchat__send-box-text-box__input:focus {
  box-shadow: none !important;
}

/*****************************************
  8) Minor spacing and z-index tweaks
******************************************/
#chatbot-popup #webchat .webchat__stacked-layout__message-row .webchat__bubble {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

#chatbot-popup .webchat__send-icon {
  position: relative !important;
  z-index: 2 !important;
  fill: #fff !important;
}

#chatbot-popup .webchat__icon-button__shade {
  z-index: 1 !important;
}

/* Darker shade on send button hover */
#chatbot-popup .webchat__icon-button:hover .webchat__icon-button__shade {
  background-color: rgb(42, 92, 27) !important; /* darker green */
}

/*****************************************
  9) Mobile stability (optional)
******************************************/
@media (max-width: 600px) {
  #chatbot-popup .webchat__send-box__main {
    min-height: 60px !important; /* enforce same height on small screens */
  }
}

/* If you MUST preserve a desktop height calc, do it here ONLY on wide screens.
   Otherwise, omit this to keep the robust flex approach. */
@media (min-width: 768px) {
  /* Optional: keep consistent composer size */
  #chatbot-popup .webchat__send-box__main {
    min-height: 60px !important;
  }

  /* Strongly recommended to leave #webchat height as flex (no calc).
     If you still want calc, ensure it matches header+banner true heights. */
  /* #chatbot-popup #webchat {
       height: calc(100% - 113px) !important;
     } */
}


/* Ensure clicks inside the send button hit the button element - for gtm */
#chatbot-popup #webchat .webchat__send-button * {
  pointer-events: none !important;
}