/* root */
:root {
  --bq-chatbot-desktop-width: 17rem;
  --bq-chatbot-mobile-width: 5.5rem;
}

/* required by BQ site. DO NOT DELETE */
#chatbot-iframe-container {
  height: 100%;
  width: 100%;
}

#chatbot-container {
  z-index: 100;
  /*position: fixed;*/
  width: 14rem;
  height: 4rem;
  display: none;
}

#chatbot-container.active {
  border-radius: 0.25rem;
  z-index: 100;
  /*position: fixed;*/
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: white;
}

/* ========================================================== MEDIA QUERIES ======================================================================== */
/* Mobile Styles (Up to 767px) */
@media screen and (max-width: 767px) {
  /* Styles for when chat container is active */
  body.chat-active {
    overflow: hidden; /* Hide the body's scrollbars and prevent scrolling */
  }

  /* Styles for when chat container is not active */
  body:not(.chat-active) {
    overflow: auto; /* Allow the body to scroll as usual */
  }

  #chatbot-container {
    bottom: 20px;
    right: 10px;
    width: var(--bq-chatbot-mobile-width);
  }
  #chatbot-container.active {
    width: 100%;
  /*position: fixed;*/
    bottom: 0;
    bottom: 10px;
    min-height: 432px; /* min 27rem; */ /* max height should be 43rem  688px*/
    width: 100%; /*calc(100% - 1rem);*/ /* 2 sides 0.5rem gap */
    right: 0.5rem;
  }
}

/* Tablet Styles (768px to 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #chatbot-container {
    bottom: 20px;
    right: 10px;
    width: var(--bq-chatbot-desktop-width);
  }
  #chatbot-container.active {
    bottom: 10px;
    right: 10px;
    width: 100% /*400px*/;
    height: 41rem;
  }
}

/* Desktop Styles (1024px and above) */
@media screen and (min-width: 1024px) {
  #chatbot-container {
    bottom: 20px;
    right: 15px;
    width: var(--bq-chatbot-desktop-width);
  }
  #chatbot-container.active {
    bottom: 10px;
    right: 15px;
    width: 100% /*400px*/;
    height: 41rem;
  }
}