body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:#f4f6f9;
}

/* MAIN CONTAINER */

.cc-ai-container{
display:flex;
flex-direction:column;
height:100vh;
}

/* HEADER */

.cc-ai-header{
background:#0057ff;
color:#fff;
padding:14px;
font-size:16px;
text-align:center;
font-weight:bold;
}

/* CHAT AREA */

#cc-chat-box{
flex:1;
overflow-y:auto;
padding:10px;
}

/* USER MESSAGE */

.user{
background:#dbeafe;
padding:10px;
margin:8px;
border-radius:12px;
max-width:50%;
margin-left:auto;
font-size:14px;
text-align: right;
}

/* BOT MESSAGE */

.bot{
background:#ffffff;
padding:10px;
margin:8px;
border-radius:12px;
max-width:85%;
font-size:14px;
}

/* INPUT BAR */

.cc-ai-input{
display:flex;
border-top:1px solid #ddd;
background:#fff;
padding:8px;
position:sticky;
bottom:0;
}

/* INPUT FIELD */

.cc-ai-input input{
flex:1;
padding:10px;
border:1px solid #ddd;
border-radius:20px;
font-size:14px;
outline:none;
}

/* SEND BUTTON */

.cc-ai-input button{
margin-left:8px;
padding:10px 16px;
background:#0057ff;
color:white;
border:none;
border-radius:20px;
font-size:14px;
}


/* MOBILE */

@media (max-width:600px){

.cc-ai-header{
font-size:15px;
}

.user,.bot{
font-size:13px;
}

}

/* TYPING INDICATOR */

.typing{
background:#ffffff;
padding:10px;
margin:8px;
border-radius:12px;
max-width:70%;
font-size:14px;
color:#555;
}

.typing span{
animation:blink 1.4s infinite;
}

.typing span:nth-child(2){
animation-delay:0.2s;
}

.typing span:nth-child(3){
animation-delay:0.4s;
}

@keyframes blink{
0%{opacity:0}
50%{opacity:1}
100%{opacity:0}
}