#aisa-chat-widget {
--aisa-primary: #4F46E5;
--aisa-primary-hover: #6366F1;
--aisa-primary-light: #E0E7FF;
--aisa-bg: #ffffff;
--aisa-bg-secondary: #f3f4f6;
--aisa-text: #1f2937;
--aisa-text-secondary: #6b7280;
--aisa-text-inverse: #ffffff;
--aisa-border: #e5e7eb;
--aisa-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
--aisa-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
--aisa-radius: 12px;
--aisa-radius-sm: 8px;
--aisa-transition: 0.2s ease;
--aisa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-family: var(--aisa-font);
font-size: 14px;
line-height: 1.5;
box-sizing: border-box;
z-index: 999999;
position: fixed;
}
#aisa-chat-widget *,
#aisa-chat-widget *::before,
#aisa-chat-widget *::after {
box-sizing: border-box;
} #aisa-chat-widget[data-position="bottom-right"] {
bottom: 20px;
right: 20px;
}
#aisa-chat-widget[data-position="bottom-left"] {
bottom: 20px;
left: 20px;
} .aisa-chat-toggle {
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
background-color: var(--aisa-primary);
color: var(--aisa-text-inverse);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--aisa-shadow-sm);
transition: transform var(--aisa-transition), background-color var(--aisa-transition), box-shadow var(--aisa-transition);
position: relative;
z-index: 2;
padding: 0;
outline: none;
}
.aisa-chat-toggle:hover {
background-color: var(--aisa-primary-hover);
transform: scale(1.05);
box-shadow: var(--aisa-shadow);
}
.aisa-chat-toggle:focus-visible {
outline: 2px solid var(--aisa-primary);
outline-offset: 2px;
}
.aisa-chat-toggle .aisa-icon-close {
display: none;
}
.aisa-open .aisa-chat-toggle .aisa-icon-chat {
display: none;
}
.aisa-open .aisa-chat-toggle .aisa-icon-close {
display: block;
} .aisa-chat-window {
position: absolute;
bottom: 70px;
width: 400px;
height: 500px;
background: var(--aisa-bg);
border-radius: var(--aisa-radius);
box-shadow: var(--aisa-shadow);
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
transform: translateY(20px) scale(0.95);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
} #aisa-chat-widget[data-position="bottom-right"] .aisa-chat-window {
right: 0;
}
#aisa-chat-widget[data-position="bottom-left"] .aisa-chat-window {
left: 0;
}
.aisa-open .aisa-chat-window {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
} .aisa-chat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background-color: var(--aisa-primary);
color: var(--aisa-text-inverse);
flex-shrink: 0;
}
.aisa-chat-title {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
}
.aisa-chat-close {
background: none;
border: none;
color: var(--aisa-text-inverse);
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: background-color var(--aisa-transition);
opacity: 0.8;
}
.aisa-chat-close:hover {
background-color: rgba(255, 255, 255, 0.2);
opacity: 1;
}
.aisa-chat-close:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.8);
outline-offset: 1px;
} .aisa-chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
background-color: var(--aisa-bg-secondary);
scroll-behavior: smooth;
} .aisa-chat-messages::-webkit-scrollbar {
width: 6px;
}
.aisa-chat-messages::-webkit-scrollbar-track {
background: transparent;
}
.aisa-chat-messages::-webkit-scrollbar-thumb {
background-color: var(--aisa-border);
border-radius: 3px;
} .aisa-message {
display: flex;
max-width: 85%;
animation: aisaFadeIn 0.2s ease;
}
.aisa-message-user {
align-self: flex-end;
}
.aisa-message-bot {
align-self: flex-start;
}
.aisa-message-content {
padding: 10px 14px;
border-radius: var(--aisa-radius-sm);
word-wrap: break-word;
overflow-wrap: break-word;
font-size: 14px;
line-height: 1.55;
}
.aisa-message-user .aisa-message-content {
background-color: var(--aisa-primary);
color: var(--aisa-text-inverse);
border-bottom-right-radius: 2px;
}
.aisa-message-bot .aisa-message-content {
background-color: var(--aisa-bg);
color: var(--aisa-text);
border: 1px solid var(--aisa-border);
border-bottom-left-radius: 2px;
} .aisa-message-bot .aisa-message-content p {
margin: 0 0 8px 0;
}
.aisa-message-bot .aisa-message-content p:last-child {
margin-bottom: 0;
}
.aisa-message-bot .aisa-message-content strong {
font-weight: 600;
}
.aisa-message-bot .aisa-message-content em {
font-style: italic;
}
.aisa-message-bot .aisa-message-content code {
background-color: var(--aisa-bg-secondary);
padding: 2px 5px;
border-radius: 3px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.9em;
}
.aisa-message-bot .aisa-message-content pre {
background-color: #1e1e2e;
color: #cdd6f4;
padding: 12px;
border-radius: var(--aisa-radius-sm);
overflow-x: auto;
margin: 8px 0;
}
.aisa-message-bot .aisa-message-content pre code {
background: none;
padding: 0;
color: inherit;
font-size: 0.85em;
}
.aisa-message-bot .aisa-message-content a {
color: var(--aisa-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.aisa-message-bot .aisa-message-content a:hover {
text-decoration: none;
} .aisa-typing-indicator {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 16px 8px;
}
.aisa-typing-indicator span {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--aisa-text-secondary);
opacity: 0.4;
animation: aisaBounce 1.4s infinite ease-in-out both;
}
.aisa-typing-indicator span:nth-child(1) {
animation-delay: -0.32s;
}
.aisa-typing-indicator span:nth-child(2) {
animation-delay: -0.16s;
}
.aisa-typing-indicator span:nth-child(3) {
animation-delay: 0s;
} .aisa-chat-input-form {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid var(--aisa-border);
background-color: var(--aisa-bg);
flex-shrink: 0;
}
.aisa-chat-input {
flex: 1;
border: 1px solid var(--aisa-border);
border-radius: var(--aisa-radius-sm);
padding: 8px 12px;
font-size: 14px;
font-family: var(--aisa-font);
line-height: 1.5;
resize: none;
height: 38px;
max-height: 38px;
outline: none;
transition: border-color var(--aisa-transition);
color: var(--aisa-text);
background-color: var(--aisa-bg);
overflow: hidden;
}
.aisa-chat-input:focus {
border-color: var(--aisa-primary);
box-shadow: 0 0 0 2px var(--aisa-primary-light);
}
.aisa-chat-input::placeholder {
color: var(--aisa-text-secondary);
}
.aisa-chat-send {
width: 38px;
height: 38px;
border: none;
border-radius: var(--aisa-radius-sm);
background-color: var(--aisa-primary);
color: var(--aisa-text-inverse);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background-color var(--aisa-transition), transform var(--aisa-transition);
padding: 0;
}
.aisa-chat-send:hover {
background-color: var(--aisa-primary-hover);
transform: scale(1.05);
}
.aisa-chat-send:focus-visible {
outline: 2px solid var(--aisa-primary);
outline-offset: 2px;
} .screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
} @keyframes aisaFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes aisaBounce {
0%, 80%, 100% {
transform: scale(0);
opacity: 0.4;
}
40% {
transform: scale(1);
opacity: 1;
}
} @media (max-width: 480px) {
#aisa-chat-widget[data-position="bottom-right"],
#aisa-chat-widget[data-position="bottom-left"] {
bottom: 10px;
right: 10px;
left: auto;
}
.aisa-chat-window {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border-radius: 0;
max-width: none;
max-height: none;
}
#aisa-chat-widget[data-position="bottom-right"] .aisa-chat-window,
#aisa-chat-widget[data-position="bottom-left"] .aisa-chat-window {
right: auto;
left: 0;
}
.aisa-chat-toggle {
width: 50px;
height: 50px;
}
}