#evaport-chat.eva-chat-ready {
    background-image: none !important;
    width: 400px;
    height: 425px;
}

#evaport-chat .webchat,
#evaport-chat .webchat *,
#evaport-chat .ac-container,
#evaport-chat .ac-container * {
    font-family: Calibri, "Segoe UI", Arial, sans-serif !important;
}

/* The bot avatar and its bubble are siblings in Web Chat's stacked layout. */
#evaport-chat .webchat__avatar--from-user {
    background-color: #0063b1;
    color: #fff;
}

#evaport-chat .webchat__stacked-layout__avatar-gutter + .webchat__stacked-layout__content {
    margin-left: 10px;
}

#evaport-chat .webchat__row > .bubble:not(.from-user) {
    margin-left: 10px !important;
}

#evaport-chat .ac-pushButton,
#evaport-chat .webchat__suggested-actions__button {
    border-radius: 8px !important;
    font-weight: 600;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

#evaport-chat .ac-pushButton:hover,
#evaport-chat .ac-pushButton:focus,
#evaport-chat .webchat__suggested-actions__button:hover,
#evaport-chat .webchat__suggested-actions__button:focus {
    background-color: #0078d7 !important;
    border-color: #0078d7 !important;
    color: #fff !important;
    cursor: pointer;
}

/* Suggested actions: style the complete horizontal list, independent of Web Chat's generated classes. */
#evaport-chat [role="status"] > div ul {
    display: flex;
    gap: 12px;
    padding: 10px 16px 12px !important;
    margin: 0 !important;
    background-color: #fff;
}

#evaport-chat [role="status"] > div ul li {
    flex: 0 0 auto;
    width: auto !important;
}

#evaport-chat [role="status"] > div ul li button {
    width: auto !important;
    min-width: 0 !important;
    padding: 10px 16px !important;
    color: #3f3f3f !important;
    background-color: #e3e1e1 !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    white-space: nowrap;
}

#evaport-chat [role="status"] > div ul li button:hover,
#evaport-chat [role="status"] > div ul li button:focus {
    color: #fff !important;
    background-color: #0078d7 !important;
}

#evaport-chat [role="status"] > div button[aria-label="left"] {
    width: 26px;
    min-width: 26px;
    height: 26px;
    padding: 0 !important;
    color: #fff !important;
    background-color: #6f7174 !important;
    border: 0 !important;
    border-radius: 50% !important;
}

/* Keep the Web Chat composer isolated from the portal-wide input hover and shadow rules. */
#evaport-chat .webchat__send-box-text-box,
#evaport-chat form:has(.webchat__send-box-input) {
    min-height: 56px;
    padding: 10px 12px !important;
    background-color: #fff !important;
    border-top: 1px solid #e1e1e1 !important;
    box-shadow: none !important;
}

#evaport-chat .webchat__send-box-text-box-input,
#evaport-chat .webchat__send-box-input,
#evaport-chat .webchat__send-box-text-box__input,
#evaport-chat .webchat__send-box input[type="text"],
#evaport-chat input[data-id="webchat-sendbox-input"] {
    height: 36px !important;
    padding: 0 8px !important;
    color: #3f3f3f !important;
    background-color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

#evaport-chat .webchat__send-box-text-box-input:hover,
#evaport-chat .webchat__send-box-text-box-input:focus,
#evaport-chat .webchat__send-box-text-box-input:active,
#evaport-chat .webchat__send-box-text-box-input:focus-visible,
#evaport-chat .webchat__send-box-text-box__input:hover,
#evaport-chat .webchat__send-box-text-box__input:focus,
#evaport-chat .webchat__send-box-text-box__input:active,
#evaport-chat .webchat__send-box-text-box__input:focus-visible,
#evaport-chat .webchat__send-box-input:hover,
#evaport-chat .webchat__send-box-input:focus,
#evaport-chat .webchat__send-box-input:active,
#evaport-chat .webchat__send-box-input:focus-visible,
#evaport-chat input.webchat__send-box-input[type="text"]:hover,
#evaport-chat input.webchat__send-box-input[type="text"]:focus,
#evaport-chat input.webchat__send-box-input[type="text"]:active,
#evaport-chat input.webchat__send-box-input[type="text"]:focus-visible,
#evaport-chat .webchat__send-box input[type="text"]:hover,
#evaport-chat .webchat__send-box input[type="text"]:focus,
#evaport-chat .webchat__send-box input[type="text"]:active,
#evaport-chat .webchat__send-box input[type="text"]:focus-visible,
#evaport-chat input[data-id="webchat-sendbox-input"]:hover,
#evaport-chat input[data-id="webchat-sendbox-input"]:focus,
#evaport-chat input[data-id="webchat-sendbox-input"]:active,
#evaport-chat input[data-id="webchat-sendbox-input"]:focus-visible {
    background-color: #fff !important;
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
}

#evaport-chat .webchat__send-box-text-box:focus-within,
#evaport-chat form:has(.webchat__send-box-input):focus-within {
    background-color: #fff !important;
    border-top-color: #e1e1e1 !important;
    box-shadow: none !important;
}

/* Formularios enviados por el bot mediante Adaptive Cards. */
#evaport-chat .ac-adaptiveCard {
    width: 100% !important;
    padding: 18px 20px !important;
    background-color: #f3f2f1 !important;
    border: 1px solid #e1dfdd !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

#evaport-chat .ac-adaptiveCard .ac-container {
    padding: 0 !important;
    background: transparent !important;
}

#evaport-chat .ac-adaptiveCard label,
#evaport-chat .ac-adaptiveCard .ac-input-label {
    margin-bottom: 5px !important;
    color: #333 !important;
    font-weight: 700 !important;
}

#evaport-chat .ac-adaptiveCard input,
#evaport-chat .ac-adaptiveCard textarea,
#evaport-chat .ac-adaptiveCard select {
    width: 100% !important;
    min-height: 27px !important;
    padding: 4px 6px !important;
    color: #3f3f3f !important;
    background-color: #fff !important;
    border: 1px solid #8a8a8a !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

#evaport-chat .ac-adaptiveCard textarea {
    min-height: 72px !important;
    resize: vertical;
}

#evaport-chat .ac-adaptiveCard input::placeholder,
#evaport-chat .ac-adaptiveCard textarea::placeholder {
    color: #767676 !important;
    font-size: 13px !important;
    opacity: 1;
}

#evaport-chat .ac-adaptiveCard input:hover,
#evaport-chat .ac-adaptiveCard textarea:hover,
#evaport-chat .ac-adaptiveCard select:hover,
#evaport-chat .ac-adaptiveCard input:focus,
#evaport-chat .ac-adaptiveCard textarea:focus,
#evaport-chat .ac-adaptiveCard select:focus {
    background-color: #fff !important;
    border-color: #0063b1 !important;
    box-shadow: 0 0 0 1px #0063b1 !important;
}

.eva-chat-error {
    width: 400px;
    height: 425px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: #002b66;
    background: #fff;
    text-align: center;
}

@media (max-width: 480px) {
    .wpic-frame,
    #evaport-chat.eva-chat-ready,
    .eva-chat-error {
        width: min(100vw, 400px);
    }

    #evaport-chat.eva-chat-ready,
    .eva-chat-error {
        height: calc(100vh - 110px);
        max-height: 425px;
    }
}