@import url('https://fonts.googleapis.com/css2?family=Carattere&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root{--grey:#f5f5f5;--blue:#3d88f9;--black:#1a1a1a;--white:#fff}
.chat{font-family:Roboto}
body.chat-open .chat-window{display:flex;animation:slideUp .3s ease-out forwards}
@keyframes slideUp {
from{opacity:0;transform:translateY(30px)}
to{opacity:1;transform:translateY(0)}
}
.chat-button{position:fixed;bottom:25px;right:25px;z-index:998;background-color:var(--blue);color:var(--white);height:60px;width:60px;border-radius:100%;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .2s ease-in-out;box-shadow:0 4px 12px #0003}
.chat-button img{width:28px;height:28px}
.chat-button:hover{transform:scale(1.05)}
.chat-window{display:none;flex-direction:column;justify-content:space-between;background-color:var(--white);border-radius:20px;position:fixed;z-index:999;bottom:100px;right:25px;height:550px;width:360px;box-shadow:0 8px 24px #0003;overflow:hidden;border:1px solid #eee}
.chat-window .toolbar{display:flex;align-items:center;justify-content:space-between;background-color:var(--black);padding:8px 12px;border-radius:20px 20px 0 0;color:var(--white)}
.chat-window .chat-logo{width:36px;height:36px;border-radius:50%;object-fit:contain;background-color:var(--white)}
.chat-window .toolbar-buttons{display:flex;gap:8px}
.chat-window .toolbar button{background-color:transparent;border:none;color:var(--white);font-size:14px;cursor:pointer;padding:4px 8px;transition:background-color .2s ease;border-radius:6px;align-items:end;display:flex}
.chat-window .toolbar button:hover{color:#ddd}
.chat-window .toolbar button svg{padding-right:5px}
.chat-window .toolbar .close{border:none;padding:10px 16px;background-color:var(--blue);color:var(--white);font-size:22px;text-align:right;cursor:pointer;border-radius:15px;display:flex;justify-content:flex-end;align-items:center;padding:2px 5px;height:22px;width:22px;margin-top:5px}
.chat-window .chat{flex:1;padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.chat-window .chat::-webkit-scrollbar{width:6px}
.chat-window .chat::-webkit-scrollbar-thumb{background-color:#0000001a;border-radius:5px}
.chat-window .chat .user,.chat-window .chat .model{max-width:80%;padding:10px 14px!important;border-radius:20px;font-size:15px!important;line-height:1.3!important;word-wrap:break-word}
.chat-window .chat .user p,.chat-window .chat .model p{font-size:15px!important;line-height:1.3!important;word-wrap:break-word;padding-bottom:10px!important}
.chat-window .chat .user small,.chat-window .chat .model small{display:block;font-size:12px;margin-top:2px}
.chat-window .chat .user, .chat-window .chat .user p{align-self:flex-end;background-color:var(--blue);color:var(--white)!important;border-bottom-right-radius:4px}
.chat-window .chat .model, .chat-window .chat .model p{align-self:flex-start;background-color:var(--grey);color:#333!important;border-bottom-left-radius:4px}
.chat-window .chat .error p{color:red;font-size:14px}
.chat-window .input-area{display:flex;align-items:center;padding:12px;border-top:1px solid #eee;background:#fafafa}
.chat-window .input-area input{flex:1;height:42px;border:none;border-radius:20px;padding:0 16px;font-size:15px;background-color:var(--grey)}
.chat-window .input-area button{background-color:var(--blue);border:none;border-radius:100%;width:42px;height:42px;margin-left:10px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:.2s ease-in-out}
.chat-window .input-area button img{width:18px}
.chat-window .input-area button:hover{transform:scale(1.1)}
.chat-window.contact-link{display:inline-block;margin-top:10px;text-decoration:underline;font-weight:bold;color:inherit}
.loader{display:flex;justify-content:start;align-items:center;height:40px;gap:6px;padding:10px 0;margin-left:5px}
.loader span{width:8px;height:8px;background-color:var(--blue);border-radius:50%;display:inline-block;animation:bounce 1.1s infinite ease-in-out}
.loader span:nth-child(2){animation-delay:.2s}
.loader span:nth-child(3){animation-delay:.4s}
@keyframes bounce {
0%,80%,100%{transform:scale(0.8);opacity:.5}
40%{transform:scale(1.4);opacity:1}
}