/* ===============================
   COMAK SAFETY AI CHATBOT
================================== */

#chat-toggle{
    position:fixed;
    right:25px;
    bottom:25px;
    width:65px;
    height:65px;
    border:none;
    border-radius:50%;
    background:#0b8f45;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
    z-index:99999;
    transition:.3s;
}

#chat-toggle:hover{
    transform:scale(1.08);
}

#chat-window{

    position:fixed;

    right:25px;

    bottom:100px;

    width:390px;

    height:min(620px, calc(100vh - 130px));

    max-height:calc(100vh - 130px);

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    display:none;

    flex-direction:column;

    box-shadow:0 15px 45px rgba(0,0,0,.25);

    z-index:99998;

    animation:chatOpen .25s ease;

}

@keyframes chatOpen{

from{
transform:translateY(20px);
opacity:0;
}

to{
transform:translateY(0);
opacity:1;
}

}

/* HEADER */

.chat-header{

background:#0b8f45;

color:white;

padding:18px;

display:flex;

justify-content:space-between;

align-items:center;

}

.chat-title{

display:flex;

align-items:center;

gap:12px;

}

.chat-title img{

width:42px;

height:42px;

border-radius:50%;

background:white;

padding:4px;

object-fit:contain;

}

.chat-title h3{

margin:0;

font-size:17px;

}

.chat-title span{

font-size:13px;

opacity:.9;

display:flex;

align-items:center;

gap:6px;

}

.online-dot{

width:8px;

height:8px;

background:#42ff6b;

border-radius:50%;

display:inline-block;

}

#close-chat{

background:none;

border:none;

color:white;

font-size:28px;

cursor:pointer;

}

/* BODY */

.chat-body{

flex:1;

overflow-y:auto;

padding:18px;

background:#f4f6f9;

}

.bot-message{

background:white;

padding:18px;

border-radius:16px;

line-height:1.7;

box-shadow:0 5px 15px rgba(0,0,0,.05);

margin-bottom:18px;

}

.bot-message h4{

margin:0 0 10px;

color:#0b8f45;

font-size:18px;

}

.bot-message p{

margin:0;

color:#555;

}

/* SERVICE BUTTONS */

.service-list{

display:flex;

flex-direction:column;

gap:12px;

}

.service-btn{

background:white;

border:none;

border-radius:14px;

padding:15px;

display:flex;

justify-content:space-between;

align-items:center;

cursor:pointer;

transition:.25s;

box-shadow:0 4px 10px rgba(0,0,0,.05);

text-align:left;

}

.service-btn:hover{

background:#0b8f45;

color:white;

transform:translateX(4px);

}

.service-btn strong{

display:block;

font-size:15px;

margin-bottom:3px;

}

.service-btn small{

font-size:12px;

color:#777;

}

.service-btn:hover small{

color:white;

}

.service-btn span{

font-size:22px;

}

/* FOOTER */

.chat-footer{

display:flex;

padding:15px;

background:white;

border-top:1px solid #eee;

}

#chat-input{

flex:1;

border:1px solid #ddd;

border-radius:30px;

padding:13px 16px;

outline:none;

font-size:14px;

}

#send-btn{

margin-left:10px;

width:48px;

height:48px;

border:none;

border-radius:50%;

background:#0b8f45;

display:flex;

justify-content:center;

align-items:center;

cursor:pointer;

transition:.25s;

}

#send-btn:hover{

transform:scale(1.08);

}

/* CHAT BUBBLES */

.user-message{

background:#0b8f45;

color:white;

padding:12px 16px;

border-radius:18px 18px 5px 18px;

margin:12px 0;

margin-left:45px;

}

.ai-message{

background:white;

padding:12px 16px;

border-radius:18px 18px 18px 5px;

margin:12px 45px 12px 0;

box-shadow:0 3px 10px rgba(0,0,0,.05);

}

/* WHATSAPP BUTTON */

.chat-whatsapp{

display:inline-block;

margin-top:12px;

padding:10px 16px;

background:#25D366;

color:white;

text-decoration:none;

border-radius:30px;

font-size:14px;

}

/* SCROLLBAR */

.chat-body::-webkit-scrollbar{

width:6px;

}

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

background:#cfcfcf;

border-radius:10px;

}

/* MOBILE */

@media(max-width:600px){

#chat-window{

right:10px;

left:10px;

bottom:90px;

width:auto;

height:75vh;

}

#chat-toggle{

right:15px;

bottom:15px;

}

}