#chat-widget {
position: fixed;
bottom: 25px;
right: 40px;
z-index: 9999;
font-family: Arial, sans-serif;
} #chat-toggle {
background-color: #5200A3;
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 28px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transition: background-color 0.2s ease;
}
#chat-toggle:hover {
background-color: #6600CC;
} #chatbox {
position: fixed;
bottom: 2svh;
right: 2svh;
width: max(320px, 30vw);
height: 90svh;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
animation: fadeIn 0.3s ease;
} #chat-header {
background: #5200A3;
color: white;
padding: 12px;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
#legal-notice {
background: #5200A3;
color: white;
padding: 12px;
padding-top: 0;
font-size: 0.75rem;
display: flex;
justify-content: space-between;
}
#chat-header button {
background: transparent;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
} #messages {
flex: 1;
overflow-y: auto;
padding: 10px;
}
.bot,
.user {
font-size: 1rem;
color: black;
margin-bottom: 10px;
padding: 8px 10px;
border-radius: 10px;
line-height: 1.4;
}
.bot {
background-color: #f5f5f5;
align-self: flex-start;
}
.user {
background-color: #F5EBFF;
align-self: flex-end;
} #inputBar {
display: flex;
border-top: 1px solid #ddd;
}
#chatInput {
font-size: 1rem;
flex: 1;
border: none;
padding: 8px;
outline: none;
color: black;
}
#sendBtn {
background: #5200A3;
color: white;
border: none;
padding: 8px 15px;
cursor: pointer;
font-size: 1rem;
}
#sendBtn:hover {
background: #6600CC;
} .hidden {
display: none !important;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}