@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"); .csa-chat-container,
.csa-floating-launcher {
--csa-primary:        #9e9bba;
--csa-primary-dark:   #7b788f;
--csa-primary-light:  #c8c6dc;
--csa-primary-glow:   rgba(158, 155, 186, 0.25);
--csa-bg:             #ffffff;
--csa-surface:        #f5f5f8;
--csa-surface-2:      #ededf2;
--csa-border:         #e2e2ea;
--csa-text:           #1a1a2e;
--csa-text-muted:     #72728a;
--csa-text-light:     #a0a0b8;
--csa-header-bg:      #1e1c2e;
--csa-header-grad:    linear-gradient(135deg, #2a2740 0%, #1a1828 100%);
--csa-radius:         20px;
--csa-radius-sm:      12px;
--csa-radius-xs:      8px;
--csa-shadow:
0 24px 56px rgba(20, 18, 40, 0.18),
0 8px 20px  rgba(20, 18, 40, 0.10),
0 2px  6px  rgba(20, 18, 40, 0.06);
--csa-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
} .csa-chat-container {
all: initial;
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 380px;
height: 580px;
max-height: 85vh;
background: var(--csa-bg);
border-radius: var(--csa-radius);
box-shadow: var(--csa-shadow);
border: 1px solid rgba(255,255,255,0.5);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 14px;
line-height: 1.55;
color: var(--csa-text);
overflow: hidden;
}
.csa-chat-container * {
box-sizing: border-box;
font-family: inherit;
} .csa-chat-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 18px 20px;
background: var(--csa-header-grad);
flex-shrink: 0;
position: relative;
overflow: hidden;
} .csa-chat-header::before {
content: '';
position: absolute;
top: -30px;
right: -20px;
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(circle, rgba(158,155,186,0.22) 0%, transparent 70%);
pointer-events: none;
}
.csa-chat-header-info {
display: flex;
align-items: center;
gap: 12px;
position: relative;
z-index: 1;
}
.csa-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--csa-primary) 0%, var(--csa-primary-dark) 100%);
font-size: 18px;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(158,155,186,0.4);
}
.csa-avatar-status {
position: relative;
}
.csa-avatar-status::after {
content: '';
position: absolute;
bottom: 1px;
right: 1px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #4ade80;
border: 2px solid #1e1c2e;
}
.csa-chat-title {
font-weight: 600;
font-size: 15px;
color: #ffffff;
letter-spacing: -0.01em;
}
.csa-chat-subtitle {
font-size: 11.5px;
color: rgba(255,255,255,0.55);
margin-top: 2px;
letter-spacing: 0.01em;
}
.csa-header-actions {
display: flex;
align-items: center;
gap: 4px;
position: relative;
z-index: 1;
}
.csa-close-btn {
all: unset;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
color: rgba(255,255,255,0.7);
font-size: 18px;
line-height: 1;
transition: background var(--csa-transition), color var(--csa-transition);
}
.csa-close-btn:hover,
.csa-close-btn:focus-visible {
background: rgba(255,255,255,0.12);
color: #fff;
} .csa-chat-messages {
flex: 1 1 auto;
overflow-y: auto;
padding: 20px 16px 12px;
display: flex;
flex-direction: column;
gap: 10px;
background: var(--csa-surface);
scroll-behavior: smooth;
} .csa-chat-messages::-webkit-scrollbar {
width: 4px;
}
.csa-chat-messages::-webkit-scrollbar-track {
background: transparent;
}
.csa-chat-messages::-webkit-scrollbar-thumb {
background: var(--csa-surface-2);
border-radius: 4px;
}
.csa-chat-messages::-webkit-scrollbar-thumb:hover {
background: var(--csa-text-light);
} .csa-message {
max-width: 82%;
padding: 11px 15px;
border-radius: 18px;
word-wrap: break-word;
animation: csa-pop-in 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
font-size: 13.5px;
line-height: 1.55;
}
.csa-message p {
margin: 0 0 6px;
}
.csa-message p:last-child {
margin-bottom: 0;
}
.csa-message ul {
margin: 4px 0 6px 16px;
padding: 0;
}
.csa-message li {
margin-bottom: 3px;
}
.csa-message strong {
font-weight: 600;
}
.csa-message a {
color: var(--csa-primary);
text-decoration: underline;
text-underline-offset: 2px;
} .csa-message-user {
align-self: flex-end;
background: linear-gradient(135deg, var(--csa-primary) 0%, var(--csa-primary-dark) 100%);
color: #fff;
border-bottom-right-radius: 5px;
box-shadow: 0 4px 12px rgba(158,155,186,0.3);
}
.csa-message-user a {
color: rgba(255,255,255,0.85);
} .csa-message-assistant {
align-self: flex-start;
background: #ffffff;
border: 1px solid var(--csa-border);
color: var(--csa-text);
border-bottom-left-radius: 5px;
box-shadow: 0 2px 8px rgba(20,18,40,0.06);
} .csa-message-error {
align-self: flex-start;
background: #fff1f1;
border: 1px solid #fecaca;
color: #991b1b;
border-radius: 12px;
} .csa-message-time {
font-size: 10px;
color: var(--csa-text-light);
text-align: center;
margin: 4px 0;
letter-spacing: 0.02em;
} .csa-message-sources {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.csa-source-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
padding: 4px 10px;
border-radius: 999px;
background: var(--csa-surface);
border: 1px solid var(--csa-border);
color: var(--csa-primary-dark);
text-decoration: none;
font-weight: 500;
transition: background var(--csa-transition), border-color var(--csa-transition), transform var(--csa-transition);
}
.csa-source-link:hover {
background: var(--csa-surface-2);
border-color: var(--csa-primary-light);
transform: translateY(-1px);
} .csa-typing-wrapper {
padding: 12px 15px !important;
}
.csa-typing {
display: inline-flex;
align-items: center;
gap: 5px;
}
.csa-typing span {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--csa-primary);
opacity: 0.5;
animation: csa-bounce 1.3s infinite ease-in-out;
}
.csa-typing span:nth-child(1) { animation-delay: 0s; }
.csa-typing span:nth-child(2) { animation-delay: 0.18s; }
.csa-typing span:nth-child(3) { animation-delay: 0.36s; } .csa-chat-suggestions {
display: flex;
flex-wrap: wrap;
gap: 7px;
padding: 0 16px 14px;
background: var(--csa-surface);
flex-shrink: 0;
}
.csa-chat-suggestions:empty {
display: none;
}
.csa-suggestion-btn {
all: unset;
cursor: pointer;
font-size: 12px;
font-weight: 500;
padding: 6px 13px;
border-radius: 999px;
background: #ffffff;
border: 1.5px solid var(--csa-border);
color: var(--csa-text-muted);
transition: border-color var(--csa-transition), color var(--csa-transition),
background var(--csa-transition), transform 0.1s ease;
}
.csa-suggestion-btn:hover,
.csa-suggestion-btn:focus-visible {
border-color: var(--csa-primary);
color: var(--csa-primary-dark);
background: rgba(158,155,186,0.07);
}
.csa-suggestion-btn:active {
transform: scale(0.96);
} .csa-chat-input-row {
all: unset;
display: flex;
align-items: flex-end;
gap: 8px;
padding: 12px 14px;
border-top: 1px solid var(--csa-border);
background: #ffffff;
flex-shrink: 0;
}
.csa-chat-input {
all: unset;
flex: 1 1 auto;
box-sizing: border-box;
resize: none;
max-height: 100px;
min-height: 40px;
padding: 10px 14px;
border-radius: var(--csa-radius-sm);
border: 1.5px solid var(--csa-border);
background: var(--csa-surface);
color: var(--csa-text);
font-size: 13.5px;
transition: border-color var(--csa-transition), box-shadow var(--csa-transition), background var(--csa-transition);
}
.csa-chat-input::placeholder {
color: var(--csa-text-light);
}
.csa-chat-input:focus {
outline: none;
border-color: var(--csa-primary);
box-shadow: 0 0 0 3px var(--csa-primary-glow);
background: #fff;
}
.csa-send-btn {
all: unset;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--csa-radius-sm);
background: linear-gradient(135deg, var(--csa-primary) 0%, var(--csa-primary-dark) 100%);
color: #fff;
flex-shrink: 0;
transition: opacity var(--csa-transition), transform 0.1s ease, box-shadow var(--csa-transition);
box-shadow: 0 4px 12px rgba(158,155,186,0.35);
}
.csa-send-btn:hover {
opacity: 0.9;
box-shadow: 0 6px 16px rgba(158,155,186,0.45);
transform: translateY(-1px);
}
.csa-send-btn:active {
transform: scale(0.94);
box-shadow: none;
}
.csa-send-btn:disabled {
opacity: 0.38;
cursor: not-allowed;
transform: none;
box-shadow: none;
} .csa-chat-footer {
padding: 7px 14px 11px;
text-align: center;
font-size: 10.5px;
color: var(--csa-text-light);
background: #ffffff;
flex-shrink: 0;
letter-spacing: 0.01em;
} .csa-floating-launcher {
all: initial;
position: fixed;
bottom: 28px;
right: 28px;
z-index: 999999;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0 22px 0 18px;
height: 56px;
border-radius: 999px;
background: linear-gradient(135deg, #2a2740 0%, #1a1828 100%);
color: #ffffff;
cursor: pointer;
user-select: none;
box-shadow:
0 8px 28px rgba(20,18,40,0.30),
0 2px  8px rgba(20,18,40,0.16),
0 0   0 1px rgba(255,255,255,0.06);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.01em;
transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1),
box-shadow 0.2s ease,
opacity 0.2s ease;
}
.csa-floating-launcher:hover {
transform: translateY(-3px) scale(1.02);
box-shadow:
0 14px 36px rgba(20,18,40,0.35),
0 4px  12px rgba(20,18,40,0.18);
}
.csa-floating-launcher:active {
transform: scale(0.97);
} .csa-launcher-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, var(--csa-primary) 0%, var(--csa-primary-dark) 100%);
font-size: 17px;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(158,155,186,0.4);
} .csa-launcher-label {
color: rgba(255,255,255,0.92);
white-space: nowrap;
} .csa-launcher-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #f97316;
flex-shrink: 0;
box-shadow: 0 0 0 2px #1a1828;
} .csa-floating-panel {
position: fixed;
bottom: 100px;
right: 28px;
z-index: 999998;
transform-origin: bottom right;
animation: csa-panel-in 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}
.csa-floating-panel[hidden] {
display: none !important;
} @keyframes csa-pop-in {
from {
opacity: 0;
transform: scale(0.88) translateY(8px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@keyframes csa-bounce {
0%, 60%, 100% {
transform: translateY(0);
opacity: 0.4;
}
30% {
transform: translateY(-5px);
opacity: 1;
}
}
@keyframes csa-panel-in {
from {
opacity: 0;
transform: scale(0.9) translateY(16px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
} .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} @media (max-width: 480px) {
.csa-chat-container {
width: 100%;
max-width: 100%;
height: 72vh;
border-radius: 20px 20px 0 0;
}
.csa-floating-panel {
right: 0;
left: 0;
bottom: 0;
border-radius: 20px 20px 0 0;
}
.csa-floating-panel .csa-chat-container {
border-radius: 20px 20px 0 0;
width: 100%;
}
.csa-floating-launcher {
right: 20px;
bottom: 20px;
}
}