/* ===== Chat Bubbles ===== */

.chat-bubble-bot {
    background: #f1f5f9;
    color: #1e293b;
    padding: 10px 14px;
    border-radius: 18px 18px 18px 4px;
    display: inline-block;
    max-width: 100%;
    word-wrap: break-word;
    line-height: 1.55;
}

.chat-bubble-user {
    background: #4f46e5;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 18px 18px 4px 18px;
    display: inline-block;
    max-width: 100%;
    word-wrap: break-word;
    line-height: 1.55;
}

/* ===== Triage Resolution Badges ===== */

.resolution-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.resolution-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.badge-auto-resolved {
    background: #dcfce7;
    color: #15803d;
}

.badge-auto-resolved::before {
    background: #22c55e;
}

.badge-escalated {
    background: #fee2e2;
    color: #b91c1c;
}

.badge-escalated::before {
    background: #ef4444;
}

.badge-following-up {
    background: #fef9c3;
    color: #92400e;
}

.badge-following-up::before {
    background: #f59e0b;
}

/* ===== Typing Indicator ===== */

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    height: 20px;
}

.typing-indicator span {
    width: 7px;
    height: 7px;
    background: #94a3b8;
    border-radius: 50%;
    animation: typing-bounce 1.2s ease-in-out infinite;
}

.typing-indicator span:nth-child(1) { animation-delay: 0s; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* ===== Ticket Cards ===== */

.ticket-card {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ===== Scrollbar styling ===== */

#chat-messages::-webkit-scrollbar {
    width: 4px;
}

#chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

#chat-messages::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 9999px;
}

#chat-messages::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}