:root {
  --primary-navy: #0A2342;
  --corporate-blue: #0083c3;
  --light-background: #f2f6fd;
  --soft-blue: #DCEAF7;
  --text-grey: #1F2937;
  --border-grey: #D9E2EC;
  --base-font: "Manrope", sans-serif;
  --section-padding: 100px 0;
  --section-padding-bottom: 100px;
  --section-padding-mobile: 50px 0;
  --white-color: #FFFFFF;
  --btn-hover-bg : #036799;
  --dark-gray: #6f7a8c;
}
/* =========================================
   HYDROCK AI CHATBOT
========================================= */


.hydrock-chatbot {

    position: fixed;
    right: 49px;
    bottom: 38px;
    z-index: 999999;
    font-family: inherit;

}



/* =========================================
   FLOATING BUTTON
========================================= */


.chat-toggle {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    border: none;

    cursor: pointer;

    font-size: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0083c3;

    color: #fff;

    box-shadow: 0 8px 25px rgba(0,0,0,0.25);

}



/* =========================================
   CHAT WINDOW
========================================= */


.chat-window {

    display: none;

    flex-direction: column;

    position: absolute;

    right: 0;

    bottom: 80px;


    width: 390px;

    height: 650px;


    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;


    box-shadow:
    0 15px 50px rgba(0,0,0,0.20);


}



/* =========================================
   HEADER
========================================= */


.chat-header {


    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:18px 20px;


    background: var(--corporate-blue);


    border-bottom:1px solid #eeeeee;


}



.chat-title h4 {


    margin:0;

    font-size:18px;

    font-weight:600;


}



.chat-title p {


    margin:4px 0 0;

    font-size:12px;

    color:white;


}



.clear-chat {


    border:none;

    background:none;

    cursor:pointer;
    color: white;
    font-size: 15px;    

}



/* =========================================
   CHAT MESSAGE AREA
========================================= */


.chat-body {


    flex:1;


    overflow-y:auto;


    padding:20px;


    scroll-behavior:smooth;


}



/* scrollbar */

.chat-body::-webkit-scrollbar {

    width:5px;

}


.chat-body::-webkit-scrollbar-thumb {


    background:#ddd;

    border-radius:10px;


}



/* =========================================
   MESSAGE DESIGN
========================================= */


.ai-message {


    background: #ecf1f6;


    color:#333;


    padding:14px 16px;


    border-radius:14px;


    margin-bottom:15px;


    line-height:1.6;


    font-size:14px;


}



.ai-message strong {


    font-weight:600;


}



.ai-message br {

    display:block;

    margin-bottom:8px;

}



.user-message {


    background:#0083c3;


    color:#ffffff;


    padding:12px 16px;


    border-radius:14px;


    margin-left:auto;


    margin-bottom:15px;


    width:max-content;


    max-width:85%;


    line-height:1.5;


    font-size:14px;


}




.typing {


    font-style:italic;

    opacity:.7;

}



/* =========================================
   QUICK QUESTIONS / CHIPS
========================================= */


.quick-questions {


    padding:12px 15px;


    border-top:2px solid #eeeeee;


    display:flex;


    gap:8px;


    overflow-x:auto;


    white-space:nowrap;


}




.quick-questions::-webkit-scrollbar {


    display:none;


}




.suggestion-title {


    display:none;


}




.quick-btn {


    flex-shrink:0;


    padding:8px 14px;


    border-radius:25px;


    border:1px solid #ddd;


    background:#fff;


    color:#333;


    cursor:pointer;


    font-size:13px;


    transition:.3s;


}



.quick-btn:hover {


    background:#0083c3;

    color:#fff;

    border-color:#0083c3;


}



/* =========================================
   INPUT AREA
========================================= */


.chat-input-wrapper {


    display:flex;


    gap:10px;


    padding:15px;


    border-top:1px solid #eeeeee;


    background:#fff;


}



.chat-input-wrapper input {


    flex:1;


    height:42px;


    padding:0 15px;


    border-radius:25px;


    border:1px solid #ddd;


    outline:none;


    font-size:14px;


}



.chat-input-wrapper input:focus {


    border-color:#0083c3;


}




.chat-input-wrapper button {


    padding:0 18px;


    border:none;


    border-radius:25px;


    background:#0083c3;


    color:#fff;


    cursor:pointer;


}



/* =========================================
   MOBILE RESPONSIVE
========================================= */


@media(max-width:576px){


    .hydrock-chatbot {


        right:15px;

        bottom:15px;


    }



    .chat-window {


        width:calc(100vw - 30px);


        height:80vh;


        right:-5px;


    }



}