/**
* ============================================
* CHATBOT UI - Foundation & State Machine
* F1.2 UI SYSTEM - Cyto
* Mobile: Bottom-sheet ~92vh
* Desktop: Modal lateral derecha
* =========================================
*/
/* =========================================
CHATBOT CONTAINER
========================================= */
.chatbot {
position: fixed;
z-index: var(--z-modal);
display: flex;
flex-direction: column;
background-color: var(--color-bg-secondary);
box-shadow: var(--shadow-2xl);
transition: transform var(--transition-base), opacity var(--transition-base);
}
/* Mobile: Bottom-sheet */
.chatbot--mobile {
bottom: 0;
left: 0;
right: 0;
height: 92vh;
max-height: 700px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
transform: translateY(100%);
opacity: 0;
}
.chatbot--mobile.is-open {
transform: translateY(0);
opacity: 1;
}
/* Desktop: Modal lateral derecha */
@media (min-width: 768px) {
.chatbot--desktop {
top: var(--header-height);
right: var(--space-lg);
bottom: var(--space-lg);
width: 380px;
max-width: calc(100vw - var(--space-lg) * 2);
border-radius: var(--radius-lg);
transform: translateX(120%);
opacity: 0;
}
.chatbot--desktop.is-open {
transform: translateX(0);
opacity: 1;
}
}
/* =========================================
CHATBOT HEADER
========================================= */
.chatbot-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) var(--space-lg);
background-color: var(--color-bg-primary);
border-bottom: 1px solid var(--color-border);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.chatbot-title {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--color-text-primary);
margin: 0;
}
.chatbot-subtitle {
font-size: var(--text-xs);
color: var(--color-text-tertiary);
margin-top: var(--space-xs);
}
.chatbot-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
background-color: transparent;
color: var(--color-text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
}
.chatbot-close:hover {
background-color: var(--color-bg-tertiary);
color: var(--color-text-primary);
}
/* =========================================
CHATBOT MESSAGES AREA
========================================= */
.chatbot-messages {
flex: 1;
overflow-y: auto;
padding: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-md);
scroll-behavior: smooth;
}
/* Message bubbles */
.chatbot-message {
display: flex;
gap: var(--space-sm);
max-width: 85%;
animation: messageSlideIn 0.3s ease;
}
@keyframes messageSlideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chatbot-message--bot {
align-self: flex-start;
}
.chatbot-message--user {
align-self: flex-end;
flex-direction: row-reverse;
}
.chatbot-message--system {
align-self: center;
max-width: 100%;
}
/* Message content */
.chatbot-message-content {
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
word-wrap: break-word;
}
.chatbot-message--bot .chatbot-message-content {
background-color: var(--color-bg-tertiary);
color: var(--color-text-primary);
border-bottom-left-radius: var(--space-xs);
}
.chatbot-message--user .chatbot-message-content {
background-color: var(--color-primary);
color: var(--color-text-inverse);
border-bottom-right-radius: var(--space-xs);
}
.chatbot-message--system .chatbot-message-content {
background-color: var(--color-trust-bg);
color: var(--color-trust-text);
font-size: var(--text-xs);
text-align: center;
}
/* Message avatar */
.chatbot-avatar {
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background-color: var(--color-bg-tertiary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.chatbot-message--user .chatbot-avatar {
background-color: var(--color-primary);
color: var(--color-text-inverse);
}
/* Message timestamp */
.chatbot-timestamp {
font-size: var(--text-xs);
color: var(--color-text-tertiary);
margin-top: var(--space-xs);
}
/* =========================================
TYPING INDICATOR
========================================= */
.chatbot-typing {
display: flex;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
background-color: var(--color-bg-tertiary);
border-radius: var(--radius-md);
border-bottom-left-radius: var(--space-xs);
width: fit-content;
}
.chatbot-typing-dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background-color: var(--color-text-tertiary);
animation: typingBounce 1.4s infinite ease-in-out;
}
.chatbot-typing-dot:nth-child(1) {
animation-delay: 0s;
}
.chatbot-typing-dot:nth-child(2) {
animation-delay: 0.2s;
}
.chatbot-typing-dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes typingBounce {
0%, 80%, 100% {
transform: scale(0.6);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* =========================================
QUICK REPLIES
========================================= */
.chatbot-quick-replies {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
padding: var(--space-md);
background-color: var(--color-bg-primary);
border-top: 1px solid var(--color-border);
}
.chatbot-quick-reply {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
font-weight: var(--font-medium);
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-primary);
cursor: pointer;
transition: all var(--transition-fast);
}
.chatbot-quick-reply:hover {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-text-inverse);
}
/* =========================================
CHATBOT INPUT AREA
========================================= */
.chatbot-input-wrapper {
padding: var(--space-md);
background-color: var(--color-bg-secondary);
border-top: 1px solid var(--color-border);
}
.chatbot-form {
display: flex;
gap: var(--space-sm);
}
.chatbot-input {
flex: 1;
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
}
.chatbot-input:focus {
border-color: var(--color-primary);
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.chatbot-send {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-primary);
color: var(--color-text-inverse);
border-radius: var(--radius-md);
cursor: pointer;
transition: background-color var(--transition-fast);
}
.chatbot-send:hover {
background-color: var(--color-primary-dark);
}
.chatbot-send:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* =========================================
CHATBOT TRIGGER BUTTON
========================================= */
.chatbot-trigger {
position: fixed;
bottom: calc(var(--sticky-cta-height) + var(--space-lg));
right: var(--space-lg);
z-index: var(--z-fixed);
width: 56px;
height: 56px;
border-radius: var(--radius-full);
background-color: var(--color-primary);
color: var(--color-text-inverse);
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-base);
}
.chatbot-trigger:hover {
transform: scale(1.05);
box-shadow: var(--shadow-xl);
}
.chatbot-trigger.is-hidden {
opacity: 0;
pointer-events: none;
}
@media (min-width: 768px) {
.chatbot-trigger {
bottom: var(--space-lg);
}
}
/* =========================================
CHATBOT STATES
========================================= */
.chatbot.is-closed {
pointer-events: none;
}
.chatbot.is-loading .chatbot-messages {
opacity: 0.6;
}
/* =========================================
SCROLLBAR STYLING
========================================= */
.chatbot-messages::-webkit-scrollbar {
width: 6px;
}
.chatbot-messages::-webkit-scrollbar-track {
background: var(--color-bg-tertiary);
border-radius: var(--radius-full);
}
.chatbot-messages::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: var(--radius-full);
}
.chatbot-messages::-webkit-scrollbar-thumb:hover {
background: var(--color-text-tertiary);
}