/* ==========================================================
   ORIENTAL SALES AI ASSISTANT
   ISOLATED PREMIUM CHAT WIDGET
========================================================== */


/* ==========================================================
   1. WIDGET ROOT
========================================================== */

#oriental-ai-widget,
#oriental-ai-widget * {
    box-sizing: border-box;
}

#oriental-ai-widget {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 999999 !important;
    isolation: isolate;

    font-family:
        "Montserrat",
        Arial,
        sans-serif !important;

    color: #000000;
}


/* ==========================================================
   2. ASK OUR AI BUTTON
========================================================== */

#oriental-ai-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    width: auto !important;
    min-width: 158px !important;
    height: 52px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 999px !important;

    background:
        linear-gradient(
            135deg,
            #1F3A5F 0%,
            #102C4B 100%
        ) !important;

    color: #FFFFFF !important;

    cursor: pointer;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.1px;

    box-shadow:
        0 12px 30px rgba(31, 58, 95, 0.24);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

#oriental-ai-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 16px 34px rgba(31, 58, 95, 0.30);
}

#oriental-ai-button:active {
    transform: translateY(0);
}

.oriental-ai-button-logo {
    display: block !important;

    width: 30px !important;
    height: 30px !important;

    min-width: 30px !important;
    min-height: 30px !important;

    margin: 0 !important;
    padding: 3px !important;

    object-fit: contain;

    border-radius: 50%;

    background: #FFFFFF !important;
}

.oriental-ai-button-text {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
}


/* ==========================================================
   3. CHAT PANEL
========================================================== */

.oriental-ai-panel {
    position: absolute !important;

    right: 0 !important;
    bottom: 66px !important;

    /*
     * Starting desktop size.
     * The visitor can resize the panel from the
     * bottom-right browser resize handle.
     */
    width: 390px !important;
    height: 590px !important;

    min-width: 340px !important;
    min-height: 480px !important;

    max-width:
        calc(100vw - 32px) !important;

    max-height:
        calc(100vh - 100px) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
    resize: both;

    background: #FFFFFF !important;

    border:
        1px solid rgba(31, 58, 95, 0.10) !important;

    border-radius: 22px !important;

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.22) !important;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(14px)
        scale(0.97);

    transform-origin: bottom right;

    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0.22s ease;
}

.oriental-ai-panel.active {
    opacity: 1 !important;
    visibility: visible !important;

    transform:
        translateY(0)
        scale(1);
}


/* ==========================================================
   4. HEADER
========================================================== */

.oriental-ai-header {
    position: relative !important;

    flex: 0 0 auto !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 92px !important;

    margin: 0 !important;
    padding: 16px 18px !important;

    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;
    justify-content: space-between !important;

    background:
        linear-gradient(
            135deg,
            #1F3A5F 0%,
            #102C4B 100%
        ) !important;

    color: #FFFFFF !important;

    border: 0 !important;

    border-bottom:
        4px solid #F4B400 !important;
}

.oriental-ai-header::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -4px;

    width: 26%;
    height: 4px;

    background: #E53935 !important;
}


/* ==========================================================
   5. HEADER BRAND
========================================================== */

.oriental-ai-brand {
    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;

    gap: 12px !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}

.oriental-ai-logo {
    display: block !important;

    flex: 0 0 52px !important;

    width: 52px !important;
    height: 52px !important;

    min-width: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;
    padding: 5px !important;

    object-fit: contain;

    border-radius: 50%;

    background: #FFFFFF !important;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.18);
}

.oriental-ai-header-text {
    display: flex !important;
    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: center !important;

    gap: 5px !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}

.oriental-ai-title {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #FFFFFF !important;

    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.oriental-ai-status {
    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    color:
        rgba(255, 255, 255, 0.78) !important;

    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}

.oriental-ai-status-icon {
    display: block !important;

    flex: 0 0 8px !important;

    width: 8px !important;
    height: 8px !important;

    border-radius: 50% !important;

    background: #2ECC71 !important;

    box-shadow:
        0 0 0 3px rgba(46, 204, 113, 0.14);
}

.oriental-ai-status-separator {
    margin: 0 1px;
    opacity: 0.55;
}


/* ==========================================================
   6. CLOSE BUTTON
========================================================== */

#oriental-ai-close {
    display: flex !important;

    flex: 0 0 38px !important;

    align-items: center !important;
    justify-content: center !important;

    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    background:
        rgba(255, 255, 255, 0.08) !important;

    color: #FFFFFF !important;

    cursor: pointer;
}

#oriental-ai-close svg {
    width: 19px !important;
    height: 19px !important;
}


/* ==========================================================
   7. MESSAGES AREA
========================================================== */

.oriental-ai-messages {
    display: block !important;

    flex: 1 1 auto !important;

    width: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 18px 16px 22px !important;

    overflow-y: auto !important;

    background:
        linear-gradient(
            180deg,
            #F7F8FA 0%,
            #FFFFFF 100%
        ) !important;

    color: #111827 !important;

    scroll-behavior: smooth;
}


/* ==========================================================
   8. MESSAGE ROWS
========================================================== */

.oriental-ai-message {
    display: flex !important;

    width: 100% !important;

    align-items: flex-end !important;

    gap: 9px !important;

    margin: 0 0 18px !important;
    padding: 0 !important;

    box-sizing: border-box;

    background: transparent !important;
}

.oriental-ai-message.assistant {
    justify-content: flex-start !important;

    /*
     * Keeps AI messages away from the right edge.
     */
    padding-right: 24px;
}

.oriental-ai-message.user {
    justify-content: flex-end !important;

    /*
     * Creates breathing room between customer
     * and assistant message areas.
     */
    padding-left: 52px;
    padding-right: 14px;
}


/* ==========================================================
   9. MESSAGE AVATAR
========================================================== */

.oriental-ai-avatar {
    display: block !important;

    flex: 0 0 30px !important;

    width: 30px !important;
    height: 30px !important;

    min-width: 30px !important;
    min-height: 30px !important;

    margin: 0 !important;
    padding: 3px !important;

    object-fit: contain;

    border:
        1px solid #E3E7EC !important;

    border-radius: 50% !important;

    background: #FFFFFF !important;
}


/* ==========================================================
   10. MESSAGE CONTENT
========================================================== */

.oriental-ai-message-content {
    min-width: 0;

    max-width:
        min(82%, 560px);
}

.oriental-ai-message.user
.oriental-ai-message-content {
    max-width:
        min(76%, 520px);
}


/* ==========================================================
   11. MESSAGE BUBBLES
========================================================== */

.oriental-ai-message-text {
    display: block !important;

    width: fit-content !important;
    max-width: 100% !important;

    min-height: 0 !important;

    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 14px 16px !important;

    overflow: visible !important;

    box-sizing: border-box;

    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;

    border-radius: 17px !important;

    font-size: 13px !important;
    line-height: 1.65 !important;
}


/* AI MESSAGE */

.oriental-ai-message.assistant
.oriental-ai-message-text {
    background: #FFFFFF !important;

    color: #1F2937 !important;

    border:
        1px solid #E1E6EC !important;

    border-radius:
        4px 16px 16px 16px !important;

    box-shadow:
        0 2px 8px rgba(15, 35, 60, 0.04);
}


/* CUSTOMER MESSAGE */

.oriental-ai-message.user
.oriental-ai-message-text {
    background: #1F3A5F !important;

    color: #FFFFFF !important;

    border:
        1px solid #1F3A5F !important;

    border-radius:
        16px 4px 16px 16px !important;

    box-shadow:
        0 3px 10px rgba(31, 58, 95, 0.12);
}


/* ==========================================================
   12. INLINE PRODUCT LINKS
========================================================== */

.oriental-ai-inline-product {
    color: #1F3A5F;

    font-weight: 700;

    text-decoration: none;

    border-bottom:
        1px solid rgba(31, 58, 95, 0.28);

    transition:
        color 0.18s ease,
        border-color 0.18s ease;
}

.oriental-ai-inline-product:hover {
    color: #E53935;

    border-color:
        #E53935;
}

.oriental-ai-message-text
strong
.oriental-ai-inline-product {
    font-weight: 800;
}


/* ==========================================================
   13. PRODUCT RESULTS
========================================================== */

.oriental-ai-products {
    display: flex !important;

    flex-direction: column !important;

    gap: 6px !important;

    width: 100% !important;

    margin: 9px 0 0 !important;
    padding: 0 !important;

    background: transparent !important;
}

.oriental-ai-product {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    min-height: 48px !important;

    box-sizing: border-box;

    gap: 12px !important;

    margin: 0 !important;
    padding: 9px 11px !important;

    border:
        1px solid #DDE3EA !important;

    border-radius: 11px !important;

    background: #FFFFFF !important;

    color: #1F2937 !important;

    text-decoration: none !important;

    box-shadow:
        0 2px 7px rgba(15, 35, 60, 0.04);

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.oriental-ai-product:hover {
    border-color:
        #1F3A5F !important;

    background:
        #F8FAFC !important;

    transform:
        translateY(-1px);
}

.oriental-ai-product-name {
    min-width: 0;

    flex: 1;

    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
}

.oriental-ai-product-action {
    display: inline-flex;

    flex: 0 0 auto;

    align-items: center;

    gap: 5px;

    color: #1F3A5F;

    font-size: 10px;
    font-weight: 700;

    white-space: nowrap;
}

.oriental-ai-product-action svg {
    width: 14px;
    height: 14px;
}


/* ==========================================================
   14. QUICK SUGGESTIONS
========================================================== */

.oriental-ai-suggestions {
    display: flex !important;

    flex: 0 0 auto !important;

    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;

    gap: 8px !important;

    margin: 0 !important;
    padding: 11px 14px !important;

    overflow-x: auto !important;

    background: #FFFFFF !important;

    border-top:
        1px solid #ECEEF1 !important;

    scrollbar-width: none;

    transition:
        opacity 0.2s ease,
        max-height 0.2s ease;
}

.oriental-ai-suggestions::-webkit-scrollbar {
    display: none;
}

#oriental-ai-widget.conversation-started
.oriental-ai-suggestions {
    display: none !important;
}

.oriental-ai-suggestion {
    display: inline-flex !important;

    flex: 0 0 auto !important;

    align-items: center !important;

    gap: 7px !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 9px 12px !important;

    white-space: nowrap !important;

    border:
        1px solid #DDE2E8 !important;

    border-radius: 999px !important;

    background: #FFFFFF !important;

    color: #1F3A5F !important;

    font-family: inherit !important;

    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    cursor: pointer;
}

.oriental-ai-suggestion svg {
    width: 17px !important;
    height: 17px !important;

    flex: 0 0 17px !important;

    stroke-width: 2.4;
}


/* QUICK SUGGESTION ICON COLORS */

.oriental-ai-suggestion:nth-child(1) svg {
    color: #E53935;
    stroke: #E53935;
}

.oriental-ai-suggestion:nth-child(2) svg {
    color: #F4B400;
    stroke: #F4B400;
}

.oriental-ai-suggestion:nth-child(3) svg {
    color: #1F3A5F;
    stroke: #1F3A5F;
}

.oriental-ai-suggestion:nth-child(4) svg {
    color: #E53935;
    stroke: #E53935;
}


/* ==========================================================
   15. INPUT AREA
========================================================== */

.oriental-ai-input-area {
    display: flex !important;

    flex: 0 0 auto !important;

    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;

    gap: 9px !important;

    margin: 0 !important;
    padding: 13px 14px !important;

    background: #FFFFFF !important;

    border-top:
        1px solid #ECEEF1 !important;
}

#oriental-ai-input {
    display: block !important;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    height: 46px !important;
    min-height: 46px !important;

    margin: 0 !important;

    padding:
        10px 16px !important;

    border:
        1px solid #D9DEE5 !important;

    border-radius: 999px !important;

    background: #FFFFFF !important;

    color: #111827 !important;

    font-family: inherit !important;

    font-size: 12px !important;

    line-height: 24px !important;

    outline: none !important;

    resize: none !important;

    overflow-y: auto !important;

    box-sizing: border-box !important;
}

#oriental-ai-input:focus {
    border-color:
        #1F3A5F !important;

    box-shadow:
        0 0 0 3px rgba(31, 58, 95, 0.08);
}

#oriental-ai-send {
    display: flex !important;

    flex: 0 0 46px !important;

    align-items: center !important;
    justify-content: center !important;

    width: 46px !important;
    height: 46px !important;

    min-width: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    background: #1F3A5F !important;

    color: #FFFFFF !important;

    cursor: pointer;
}

#oriental-ai-send svg {
    width: 18px !important;
    height: 18px !important;
}

/* ==========================================================
   15A. LEAD CAPTURE FORM
========================================================== */

.oriental-ai-lead {
    flex: 0 0 auto !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 14px 12px !important;

    background: #FFFFFF !important;

    border-top:
        1px solid #ECEEF1 !important;
}


/* ----------------------------------------------------------
   FORM HEADING
---------------------------------------------------------- */

.oriental-ai-lead-title {
    display: block !important;

    margin: 0 !important;
    padding: 12px 0 3px !important;

    color: #1F3A5F !important;

    font-family: inherit !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}


/* ----------------------------------------------------------
   FORM DESCRIPTION
---------------------------------------------------------- */

.oriental-ai-lead-text {
    display: block !important;

    margin: 0 0 9px !important;
    padding: 0 !important;

    color: #68717D !important;

    font-family: inherit !important;

    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}


/* ----------------------------------------------------------
   INDIVIDUAL FIELD
---------------------------------------------------------- */

.oriental-ai-lead-field {
    min-width: 0 !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   FIELD LABEL
---------------------------------------------------------- */

.oriental-ai-lead-field label {
    display: block !important;

    width: 100% !important;

    margin: 0 0 4px !important;
    padding: 0 !important;

    color: #1F3A5F !important;

    font-family: inherit !important;

    font-size: 9.5px !important;
    font-weight: 700 !important;

    line-height: 1.2 !important;
}


/* ----------------------------------------------------------
   REQUIRED RED STAR
---------------------------------------------------------- */

.oriental-ai-required {
    color: #E53935 !important;

    font-weight: 800 !important;
}


/* ----------------------------------------------------------
   FORM GRID
---------------------------------------------------------- */

.oriental-ai-lead-form {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap: 7px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   FORM INPUTS
---------------------------------------------------------- */

.oriental-ai-lead-form input {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 34px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    box-sizing: border-box !important;

    border:
        1px solid #D9DEE5 !important;

    border-radius: 8px !important;

    background: #FFFFFF !important;

    color: #111827 !important;

    font-family: inherit !important;

    font-size: 10.5px !important;
    font-weight: 500 !important;

    line-height: normal !important;

    outline: none !important;
}


/* ----------------------------------------------------------
   INPUT FOCUS
---------------------------------------------------------- */

.oriental-ai-lead-form input:focus {
    border-color:
        #1F3A5F !important;

    box-shadow:
        0 0 0 3px rgba(31, 58, 95, 0.08) !important;
}


/* ----------------------------------------------------------
   REQUIRED FIELD VALIDATION
---------------------------------------------------------- */

.oriental-ai-lead-form input:invalid:not(:placeholder-shown) {
    border-color:
        #E53935 !important;
}


/* ----------------------------------------------------------
   SUBMIT BUTTON
---------------------------------------------------------- */

#oriental-ai-lead-submit {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 34px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    box-sizing: border-box !important;

    border:
        1px solid #1F3A5F !important;

    border-radius: 8px !important;

    background: #1F3A5F !important;

    color: #FFFFFF !important;

    font-family: inherit !important;

    font-size: 10.5px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    cursor: pointer !important;
}


#oriental-ai-lead-submit:hover {
    background:
        #102C4B !important;

    border-color:
        #102C4B !important;
}


#oriental-ai-lead-submit:disabled {
    opacity: 0.55 !important;

    cursor:
        not-allowed !important;
}


/* ----------------------------------------------------------
   DISABLED INPUTS
---------------------------------------------------------- */

.oriental-ai-lead-form input:disabled {
    background:
        #F5F6F8 !important;

    color:
        #7A828D !important;

    cursor:
        not-allowed !important;
}


/* ----------------------------------------------------------
   SUBMISSION MESSAGE
---------------------------------------------------------- */

.oriental-ai-lead-message {
    display: block !important;

    width: 100% !important;

    margin: 7px 0 0 !important;
    padding: 0 !important;

    color: #68717D !important;

    font-family: inherit !important;

    font-size: 9.5px !important;
    font-weight: 500 !important;

    line-height: 1.4 !important;

    overflow-wrap: anywhere;
}


/* ----------------------------------------------------------
   WHATSAPP BUTTON
---------------------------------------------------------- */

.oriental-ai-lead-whatsapp {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 34px !important;

    margin-top: 6px !important;
    padding: 0 13px !important;

    border-radius: 8px !important;

    background: #25D366 !important;

    color: #FFFFFF !important;

    font-family: inherit !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    text-decoration: none !important;

    cursor: pointer !important;

    transition:
        transform 0.18s ease,
        opacity 0.18s ease;
}

.oriental-ai-lead-whatsapp[hidden] {
    display: none !important;
}


.oriental-ai-lead-whatsapp:hover {
    transform:
        translateY(-1px);

    opacity:
        0.92;
}

/* ==========================================================
   16. FOOTER
========================================================== */

.oriental-ai-footer {
    flex: 0 0 auto !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 6px 14px 10px !important;

    text-align: center !important;

    background: #FFFFFF !important;

    color: #8A929D !important;

    font-size: 9px !important;
    line-height: 1.4 !important;
}


/* ==========================================================
   17. TYPING INDICATOR
========================================================== */

.oriental-ai-typing {
    display: flex !important;

    align-items: center !important;

    gap: 4px !important;

    margin: 0 !important;
    padding: 4px 2px !important;
}

.oriental-ai-typing span {
    display: block !important;

    width: 6px !important;
    height: 6px !important;

    margin: 0 !important;

    border-radius: 50% !important;

    background: #1F3A5F !important;

    animation:
        orientalAITyping 1.2s infinite;
}

.oriental-ai-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.oriental-ai-typing span:nth-child(3) {
    animation-delay: 0.30s;
}

@keyframes orientalAITyping {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.35;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}


/* ==========================================================
   18. MOBILE
========================================================== */

@media (max-width: 600px) {

    #oriental-ai-widget {
        right: 14px !important;
        bottom: 14px !important;
    }


    /* AI button */

    #oriental-ai-button {
        width: 58px !important;
        height: 58px !important;

        min-width: 58px !important;

        padding: 0 !important;

        border-radius: 50% !important;
    }

    .oriental-ai-button-logo {
        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;
        min-height: 34px !important;
    }

    .oriental-ai-button-text {
        display: none !important;
    }


    /* Chat panel */

    .oriental-ai-panel {
        right: -2px !important;
        bottom: 70px !important;

        width:
            calc(100vw - 20px) !important;

        height:
            min(680px, calc(100vh - 88px)) !important;

        min-width: 0 !important;
        min-height: 0 !important;

        max-width:
            calc(100vw - 20px) !important;

        max-height:
            calc(100vh - 88px) !important;

        border-radius: 18px !important;

        /*
         * Mobile size follows the viewport.
         * Manual resizing is disabled.
         */
        resize: none;
    }


    /* Header */

    .oriental-ai-header {
        min-height: 78px !important;

        padding:
            13px 14px !important;
    }

    .oriental-ai-logo {
        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;
        min-height: 44px !important;
    }

    .oriental-ai-title {
        font-size: 15px !important;
    }


    /* Messages */

    .oriental-ai-messages {
        padding:
            16px 12px 20px !important;
    }

    .oriental-ai-message.assistant {
        padding-right: 18px;
    }

    .oriental-ai-message.user {
        padding-left: 34px;
        padding-right: 10px;
    }

    .oriental-ai-message-content {
        max-width: 86%;
    }

    .oriental-ai-message.user
    .oriental-ai-message-content {
        max-width: 82%;
    }


    /* Products */

    .oriental-ai-product {
        min-height: 46px !important;

        padding:
            8px 10px !important;
    }

    .oriental-ai-product-name {
        font-size: 11px;
    }

    .oriental-ai-product-action {
        font-size: 9px;
    }

        #oriental-ai-input {
        height: 46px !important;
        min-height: 46px !important;

        padding:
            10px 14px !important;

        font-size: 12px !important;
        line-height: 24px !important;
    }

/* ======================================================
   LEAD FORM - MOBILE
====================================================== */

.oriental-ai-lead {
    padding:
        0 12px 10px !important;
}


.oriental-ai-lead-title {
    padding:
        10px 0 3px !important;

    font-size:
        11.5px !important;
}


.oriental-ai-lead-text {
    margin-bottom:
        8px !important;

    font-size:
        9.5px !important;
}


.oriental-ai-lead-form {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr) !important;

    gap: 7px !important;

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}


.oriental-ai-lead-field label {
    font-size:
        9px !important;
}


.oriental-ai-lead-form input,
#oriental-ai-lead-submit {
    height:
        36px !important;
}


.oriental-ai-lead-form input {
    padding:
        0 9px !important;

    font-size:
        10px !important;
}


#oriental-ai-lead-submit {
    padding:
        0 9px !important;

    font-size:
        10px !important;
}


.oriental-ai-lead-message {
    font-size:
        9px !important;
}

}