/* =====================================================================
   Motivo — Omnichannel Live Chat Widget custom CSS
   Two sections:
     1. Proactive "click-to-chat" launcher button (Motivo brand).
     2. Vertical suggested-actions FALLBACK (only needed if the
        motivo.json "suggestedActionLayout": "stacked" key is not
        honoured by your LCW version).
   Brand: primary rgb(75,47,156), hover rgb(55,32,122).
   ===================================================================== */

/* ---------- 1. Click-to-chat launcher button ---------- */
.DX-DT-aval {
    box-sizing: border-box;
    outline: none;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    line-height: 1.2;
    color: rgb(75, 47, 156);
    border: 0;
    border-radius: 30px;
    text-decoration: none;
    background: rgb(75, 47, 156);
    padding: 10px 20px 10px 70px;
    height: 60px;
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    min-width: 160px;
    z-index: 9999999999999;
}

    .DX-DT-aval:hover {
        background-color: rgb(55, 32, 122);
    }

.DX-DT-aval-title {
    font-size: 16px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    margin: 0;
    line-height: 1.2;
}

.DX-DT-aval-subtitle {
    font-size: 14px;
    font-weight: normal;
    color: rgb(255, 255, 255);
    margin: 0;
    line-height: 1.2;
}

.DX-DT-aval-svg {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
}

.DX-DT-aval-text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.DX-DT-resume {
    bottom: 0px;
    right: 0px;
    z-index: 999999999999;
    position: fixed;
    height: 45px;
    width: 375px;
    border: none !important;
    background: transparent;
}

/* ---------- 2. Vertical suggested-actions FALLBACK ----------
   Prefer motivo.json "suggestedActionLayout": "stacked".
   Only enable this block if the JSON key is not applied on your
   LCW version. Confirm the class names in F12 first — Microsoft
   may version these. All rules are scoped to the LCW container. */

#Microsoft_Omnichannel_LCWidget .webchat__suggested-actions {
    display: flex !important;
    flex-direction: column !important;   /* horizontal -> vertical */
    align-items: stretch !important;     /* full-width buttons */
    gap: 8px !important;
    overflow: visible !important;        /* remove horizontal scroll/clip */
}

/* Hide the carousel < > paging arrows once stacked */
#Microsoft_Omnichannel_LCWidget .webchat__suggested-actions button.webchat__carousel__flipper {
    display: none !important;
}

/* Motivo styling for each stacked action button */
#Microsoft_Omnichannel_LCWidget .webchat__suggested-actions button.webchat__bubble__button {
    width: 100% !important;
    justify-content: center;
    border: 1px solid rgb(75, 47, 156) !important;
    border-radius: 8px !important;
    color: rgb(75, 47, 156) !important;
    background: #ffffff !important;
    padding: 10px 14px !important;
    font-family: Arial, sans-serif;
    font-size: : 14px !important
}

#Microsoft_Omnichannel_LCWidget .webchat__suggested-actions button.webchat__bubble__button:hover {
    background: rgb(245, 242, 252) !important;
    border-color: rgb(55, 32, 122) !important;
}