/* ===============================

AUTO WORLD CHATBOT

=============================== */

#awr-chatbot-toggle{

position:fixed;

right:24px;

bottom:24px;

width:68px;

height:68px;

border:none;

border-radius:50%;

cursor:pointer;

font-size:28px;

color:#fff;

background:linear-gradient(135deg,#f36b7d,#ef7a58);

box-shadow:0 14px 30px rgba(0,0,0,.22);

z-index:100000;

transition:transform .2s ease;

}

#awr-chatbot-toggle:hover{

transform:scale(1.05);

}

/* ===============================

CHAT WINDOW

=============================== */

#awr-chatbot-box{

position:fixed;

right:24px;

bottom:102px;

width:380px;

max-width:calc(100vw - 28px);

background:#e8ebf1;

border-radius:26px;

box-shadow:0 20px 50px rgba(0,0,0,.20);

overflow:hidden;

z-index:99999;

display:none;

}

#awr-chatbot-box.open{

display:block;

}

/* ===============================

HEADER

=============================== */

.awr-chatbot-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px 26px;

background:linear-gradient(90deg,#63ade7,#4d92cf);

color:#fff;

font-size:24px;

font-weight:800;

}

.awr-chatbot-close{

border:none;

background:transparent;

color:#fff;

font-size:34px;

line-height:1;

cursor:pointer;

}

/* ===============================

MESSAGES AREA

=============================== */

.awr-chatbot-messages{

padding:18px;

max-height:520px;

overflow-y:auto;

background:#e8ebf1;

}

/* ===============================

CHAT BUBBLES

=============================== */

.awr-msg{

margin-bottom:14px;

border-radius:24px;

padding:18px 20px;

line-height:1.5;

font-size:16px;

word-break:break-word;

}

.awr-msg.bot{

background:#f4f5f7;

border:2px solid #d8dde6;

color:#304055;

}

.awr-msg.user{

background:#496a9f;

color:#fff;

margin-left:36px;

}

.awr-msg.bot a{

color:#2b6cb0;

font-weight:700;

text-decoration:underline;

}

/* ===============================

QUICK BUTTONS

=============================== */

.awr-quick-buttons{

display:flex;

flex-wrap:wrap;

gap:10px;

margin:14px 0 18px;

}

.awr-quick-buttons button{

border:none;

border-radius:999px;

padding:10px 15px;

background:#f3f5f8;

color:#355f94;

font-size:14px;

font-weight:700;

cursor:pointer;

box-shadow:inset 0 0 0 1px #d8e1ec;

transition:.15s;

}

.awr-quick-buttons button:hover{

background:#eaf1f9;

transform:translateY(-1px);

}

/* ===============================

INPUT AREA

=============================== */

.awr-chatbot-form{

display:flex;

gap:12px;

padding:16px 18px 10px;

background:#fff;

border-top:1px solid #d9dde6;

}

#awr-chatbot-input{

flex:1;

border:2px solid #d9dde6;

border-radius:20px;

padding:16px 18px;

font-size:16px;

outline:none;

background:#fff;

}

#awr-chatbot-input:focus{

border-color:#8ab2dd;

}

#awr-chatbot-send{

border:none;

border-radius:20px;

padding:0 22px;

background:#f08263;

color:#fff;

font-size:16px;

font-weight:800;

cursor:pointer;

transition:.15s;

}

#awr-chatbot-send:hover{

background:#ea7453;

}

/* ===============================

FOOTER TEXT

=============================== */

.awr-chatbot-hint{

padding:0 18px 18px;

background:#fff;

color:#697485;

font-size:13px;

}

/* ===============================

SCROLLBAR (DESKTOP)

=============================== */

.awr-chatbot-messages::-webkit-scrollbar{

width:6px;

}

.awr-chatbot-messages::-webkit-scrollbar-thumb{

background:#c6ced8;

border-radius:3px;

}

/* ===============================

MOBILE OPTIMIZATION

=============================== */

@media (max-width:640px){

#awr-chatbot-box{

right:12px;

left:12px;

width:auto;

max-width:none;

bottom:88px;

border-radius:22px;

}

#awr-chatbot-toggle{

right:16px;

bottom:16px;

width:64px;

height:64px;

}

.awr-chatbot-header{

font-size:22px;

padding:20px 22px;

}

.awr-chatbot-messages{

max-height:460px;

padding:16px;

}

.awr-msg{

font-size:15px;

padding:16px 18px;

}

.awr-msg.user{

margin-left:20px;

}

.awr-quick-buttons button{

font-size:14px;

padding:9px 13px;

}

.awr-chatbot-form{

gap:10px;

padding:14px 16px 10px;

}

#awr-chatbot-input{

font-size:15px;

padding:15px 16px;

}

#awr-chatbot-send{

font-size:15px;

padding:0 18px;

}

}

/* ===============================

ANIMATION

=============================== */

#awr-chatbot-box{

animation:awrChatOpen .25s ease;

}

@keyframes awrChatOpen{

from{

transform:translateY(15px);

opacity:0;

}

to{

transform:translateY(0);

opacity:1;

}

}