.chat-scroll::-webkit-scrollbar {
    width: 4px;
}
.chat-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.chat-scroll::-webkit-scrollbar-thumb {
    background: rgba(64, 145, 108, 0.2);
    border-radius: 10px;
}
.dark .chat-scroll::-webkit-scrollbar-thumb {
    background: rgba(45, 106, 79, 0.4);
}

html.dark, body.dark {
    background-color: #08120d !important;
    color: #c8e6d5;
}

@keyframes messageFadeIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.message-bubble {
    animation: messageFadeIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

[dir="rtl"] #messages-container {
    text-align: right;
}
[dir="rtl"] .message-bubble.justify-end {
    justify-content: flex-start;
}
[dir="rtl"] .message-bubble.justify-start {
    justify-content: flex-end;
}
[dir="rtl"] #chat-form button[type="submit"] {
    transform: scaleX(-1);
}

#messages-container {
    background-color: #faf6f1 !important;
    background-image: radial-gradient(circle, rgba(64, 145, 108, 0.06) 1.5px, transparent 1.5px) !important;
    background-size: 26px 26px !important;
}

html.dark #messages-container, body.dark #messages-container {
    background-color: #08120d !important;
    background-image: radial-gradient(circle, rgba(52, 211, 153, 0.03) 1.5px, transparent 1.5px) !important;
}

.message-bubble > div {
    position: relative;
    line-height: 1.5;
}

.message-bubble.justify-end a {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.22) !important;
    padding: 1px 6px !important;
    border-radius: 6px !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

.bubble-user {
    border-top-right-radius: 2px !important;
}
.bubble-admin {
    border-top-left-radius: 2px !important;
}

.typing-dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #587a69;
    border-radius: 50%;
    margin: 0 2px;
    animation: typing 1.4s infinite ease-in-out both;
}
.dark .typing-dots span {
    background-color: #7eab90;
}
.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}