@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");
 :root{
     --chatbot-color-primary: #3783b6;
    /* Header / Buttons / Send Chat Bubble / Suggested Questions */
     --chatbot-color-primary-dark: #22455e;
    /* Button Hover / Response Chat Color / AI Icon */
    /* Sheriff's Office Colors --chatbot-color-primary: #23603f;
     --chatbot-color-primary-dark: #143623;
     */
}
 .chatbot {
     position: fixed;
     right: 50px;
     bottom: 85px;
     width: 500px;
    /*height: 75vh;
    */
     height: clamp(650px, 72vh, 1000px);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     background: #fff;
     border-radius: 7px;
     box-shadow: 0 0 128px 0 rgba(0,0,0,0.1), 0 32px 64px -48px rgba(0,0,0,0.5);
     transform: scale(0.1);
     opacity: 0;
     display: none;
     pointer-events: none;
     transition: all 0.3s ease;
     transform-origin: bottom right;
     caret-color: transparent;
     z-index: 2147483647; !important
     margin:0;
     padding:0;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
}
 .show-chatbot .chatbot{
     transform: scale(1);
     opacity: 1;
     pointer-events: auto;
     caret-color: transparent;
     display: inline-flex;
     transition: all 0.4s ease;
}
 .show-chatbot .chatbot-button {
     font-size: 0;
     border-radius: 100px;
     padding: 12px 10px;
     right: 55px;
     margin:0;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
}
 .show-chatbot .chatbot-button i {
     font-size: initial;
}
/* .maximize-chatbot .chatbot{
     transform: scale(1);
     pointer-events: auto;
     width: 92vw;
     height: 89vh;
}
*/
 .maximize-chatbot .chatbot {
     position: fixed;
     right: 0;
     bottom: 0;
     width: 100vw;
     height: 100dvh;
     margin: 0;
     border-radius: 0;
     display: flex;
     flex-direction: column;
     z-index: 2147483647; !important
     transform: scale(1);
     pointer-events: auto;
}
 .maximize-chatbot .chatbot iframe {
     flex: 1;
     width: 100%;
     height: auto;
}
/* .maximize-chatbot .chatbot iframe {
     width: 92vw;
     height: auto;
}
*/
/* Chatbot Chat */
 .chatbot iframe {
     flex: 1 1 auto;
     min-height: 0;
     width: 100%;
     height: auto;
    /*height: calc(72vh - 55px);
    */
     border: none;
}
 .chatbot iframe:focus {
     outline: #000 solid 5px;
}
/* Chatbot Header */
 .chatbot header {
     background: var(--chatbot-color-primary);
     padding: 5px 30px;
     text-align: left;
     flex: 0 0 auto;
}
/* #icon-chatbot {
     padding: 0 5px 0 0;
}
 */
 .chatbot .icons-chatbot {
     position: absolute;
     align-items: right;
     right: 0;
     top: 0;
     color: #fff;
     padding: 18px 20px 0 0;
}
 .chatbot .icons-chatbot i {
     color: #fff;
     line-height: 1;
     font-size: 15px;
}
 .chatbot .icons-chatbot button {
     border: none;
     background: none;
     border-radius: 5px;
     cursor: pointer;
     width: 30px;
     height: 30px;
     padding: 0;
}
 .chatbot .icons-chatbot button:hover {
     transition: all 0.1s ease;
     background-color: var(--chatbot-color-primary-dark);
     transform: scale(1.2);
}
 .chatbot .icons-chatbot button:focus {
     background-color: var(--chatbot-color-primary-dark);
     transform: scale(1.2);
     outline: #000 solid 3px;
}
 .chatbot header h2{
     background: var(--chatbot-color-primary);
     padding: 0px 10px;
     text-align: left;
     flex: 0 0 auto;
     color: #ffffff;
     font-size: 1.0rem;
     caret-color: transparent;
     font-family: "Poppins", sans-serif !important;
     font-size: 16px !important;
     font-weight: 500 !important;
}
/* Chatbot Button */
 .chatbot-button{
     position:fixed;
     right: 35px;
     bottom: 35px;
     cursor: pointer;
     background: var(--chatbot-color-primary);
     color: #fff;
     font-size: 1rem;
     border: none;
     outline: none;
     padding: 10px 15px;
     border-radius: 10px;
     caret-color: transparent;
     transition: all 0.2s ease;
     margin:0;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
     z-index: 1000;
}
 .chatbot-button:hover{
     transform: scale(1.1);
     transition: all 0.4s ease;
     background: var(--chatbot-color-primary-dark);
}
 .chatbot-button:focus{
     transform: scale(1.1);
     transition: all 0.4s ease;
     background: var(--chatbot-color-primary-dark);
     outline: #000 solid 4px;
}
 .chatbot-button i{
     padding: 0px 3px;
}
/* Smaller laptops */
 @media (max-height: 1100px) {
     .chatbot {
         height: 82vh;
    }
}
/* 1080p and similar */
 @media (max-height: 900px) {
     .chatbot {
         height: 86vh;
    }
}
/* Mobile and very small screen sizes */
 @media (max-width: 550px), (max-height: 650px) {
    html:has(body.show-chatbot) {
        overflow: hidden;
        overscroll-behavior: none;
    }

    body.show-chatbot {
        overflow: hidden;
        overscroll-behavior: none;
        position: fixed;
        width: 100%;
        left: 0;
        right: 0;
    }
     .chatbot {
         position: fixed;
         inset: 0;
         width: 100%;
        height: 100vh;
        height: 100dvh;
        /* right: 0;
         bottom: 0;
         top: 0;
         left: 0;
         width: auto;
         height: auto;
         */
         border-radius: 0;
         z-index: 2147483647; !important
         overflow: hidden;

    }
     .chatbot iframe {
         width: 100%;
         height: auto;
         flex: 1 1 auto;
         min-height: 0;
    }
     .chatbot .icons-chatbot #maximize-chatbot{
         display: none;
    }
    /* Hide the floating button while the chatbot is open */
     .show-chatbot .chatbot-button {
         display: none;
    }
    /* Show it again when the chatbot is closed/minimized */
     .chatbot-button {
         display: flex;
         bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
         right: 16px; !important
    }

}