/***********************
  1. Beta Banner Styling
***********************/
div.chatbot-beta-banner p {
  margin-bottom: 0;
  font-size: 16px;
}

#chatbot-popup .chatbot-beta-banner {
  height: auto !important;
  min-height: 40px !important;
  align-items: flex-start !important;
}


/************************
  2. Tooltip for 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: white;
  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;
}


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


/*****************************************
  4. Make popup a stable flex container
*****************************************/
#chatbot-popup {
  display: flex !important;
  flex-direction: column !important;

  /* IMPORTANT: prevent invisible overlay blocking clicks */
  pointer-events: none !important;
}

#chatbot-popup.visible {
  pointer-events: auto !important;
}


/*****************************************
  5. Stable layout for messages area
*****************************************/
#chatbot-popup #webchat {
  flex: 1 1 auto !important;
  height: auto !important;
  overflow-y: auto !important;
}


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

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

/* Inner send-box alignment fix */
#chatbot-popup .webchat__send-box-text-box {
  align-items: flex-start !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}


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


/*****************************************
  8. Desktop-specific height if needed
*****************************************/
@media (min-width: 768px) {
  #chatbot-popup #webchat {
    height: calc(100% - 113px) !important; /* if you still want this */
  }

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



#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;
}


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