/* Анимация появления сообщений */
@keyframes messageSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.message-appear {
    animation: messageSlideIn 0.3s ease-out forwards;
}

/* Кастомный скроллбар для окна чата */
.chat-container::-webkit-scrollbar {
    width: 4px;
}

.chat-container::-webkit-scrollbar-track {
    background: transparent;
}

.chat-container::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 10px;
}

/* Эффект "стекла" для шапки или виджетов */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Пульсация для индикатора набора текста */
.dot-flashing {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 5px;
    background-color: #3b82f6;
    color: #3b82f6;
    animation: dot-flashing 1s infinite linear alternate;
    animation-delay: .5s;
}

.dot-flashing::before, .dot-flashing::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
}

.dot-flashing::before {
    left: -12px;
    width: 6px;
    height: 6px;
    border-radius: 5px;
    background-color: #3b82f6;
    animation: dot-flashing 1s infinite alternate;
    animation-delay: 0s;
}

.dot-flashing::after {
    left: 12px;
    width: 6px;
    height: 6px;
    border-radius: 5px;
    background-color: #3b82f6;
    animation: dot-flashing 1s infinite alternate;
    animation-delay: 1s;
}

@keyframes dot-flashing {
    0% { background-color: #3b82f6; }
    50%, 100% { background-color: #e2e8f0; }
}

/* base.css */