/* =============================================================
   Tool Page Chatbot — Presentation Fix

   Problem 1: The .chat-container uses position:fixed with right:20px
   but no explicit width. Its left edge inherits from the block's
   normal-flow position (0 in the full-width footer), making it
   span the full viewport width.

   Problem 2: The block container in site-footer__bottom creates a
   visible dark strip even though the chatbot is position:fixed.
   ============================================================= */

/* Remove the empty footer strip the block creates in the page flow */
.node--type-item .site-footer__bottom .block-ai-deepchat-block {
  height: 0;
  overflow: visible;
  padding: 0;
  margin: 0;
}

/* Constrain the chatbot to a proper 420px corner widget */
.node--type-item .ai-deepchat.chat-container {
  width: 420px;
  left: auto;
}

/* Ensure the deep-chat panel matches */
.node--type-item .chat-element {
  min-width: 0 !important;
  width: 420px;
}

/* Header: match MakeHaven blue */
.node--type-item .ai-deepchat--header {
  background: #0256b1;
  border-radius: 8px 8px 0 0;
  border: none;
}

.node--type-item .ai-deepchat--header:hover,
.node--type-item .ai-deepchat--header.active {
  background-color: #013e87;
}

/* On mobile, let it go full width as intended */
@media (max-width: 768px) {
  .node--type-item .ai-deepchat.chat-container,
  .node--type-item .chat-element {
    width: 100%;
  }
}