body {
    font-family: 'Inter', sans-serif;
}

.step-section {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* WhatsApp Background Pattern */
.chat-bg {
    background-color: #efeae2;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0v-2h20v-2H0V8h20V6H0V4h20V2H0V0h22v20h2V0h2v20h2V0h2v20h2V0h2v20h2V0h2v20h2v2H20v-1.5zM0 20h2v20H0V20zm4 0h2v20H4V20zm4 0h2v20H8V20zm4 0h2v20h-2V20zm4 0h2v20h-2V20zm4 0h2v20h-2V20zm4 0h2v20h-2V20zm4 0h2v20h-2V20z' fill='%23000000' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Chat Messages */
.message {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    word-wrap: break-word;
    animation: popIn 0.3s ease-out forwards;
}

.message-in {
    background-color: #ffffff;
    align-self: flex-start;
    border-top-left-radius: 0;
}

.message-out {
    background-color: #d9fdd3;
    align-self: flex-end;
    border-top-right-radius: 0;
}

.message-system {
    background-color: #fff3cd;
    color: #856404;
    align-self: center;
    font-size: 0.85rem;
    text-align: center;
    max-width: 90%;
    padding: 6px 16px;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background-color: #999;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Custom Scrollbar for Chat */
.chat-bg::-webkit-scrollbar {
    width: 6px;
}
.chat-bg::-webkit-scrollbar-track {
    background: transparent;
}
.chat-bg::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
}