:root,
    :root[theme='light'] {

        --primary-color: #536458;
        --accent-color: #F4D484;
        --primary-dark: #3d4a40;
        --primary-light: #6b7a6f;
    }

    .chat-box {
        background-color: #f9fafb;
        /* border-radius: 12px; */
        padding: 20px;

        max-height: 70vh;
        overflow-y: auto;
    }

    .chat-bubble {
        max-width: 70%;
        padding: 12px 16px;
        border-radius: 18px;
        position: relative;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .chat-seller {
        background-color: #e9ecef;
        color: #212529;
        border-top-left-radius: 0;
    }

    .chat-buyer {
        background-color: var(--primary-color);
        color: white;
        border-top-right-radius: 0;
    }

    .chat-attachment img {
        border: 2px solid rgba(0, 0, 0, 0.1);
    }

    .chat-message {
        animation: fadeIn 0.2s ease-in-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(5px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }