/*
This CSS file can be used as a template to customize the
styling of EVA Chat, provide by SUSI&James. Note that
EVA Chat comes with a set of default stylings and mobile optimizations.

If you want to change or adapt an element, you can use your browsers
debugging facilities to determine that very CSS class name, you want
to change. In case an element is not directly adressed by a
class, you can opt-in using CSS selector mechanisms.

Important:
The placemant container styling ('#smo-chat-ui') usually
should not be changed. But if you need to override any global
styling, which might conflict with EVA Chat, this might be the place
to override inherited CSS attributes in combination with
CSS class selectors, e.g. '#eva-chat-ui a {}'.

Note:
All CSS classes has to bump CSS specificity by using e.g. '.eva-chat.eva-chat',
instead of '.eva-chat' - otherwise those CSS classes will be ignored!
 */

/* FIX position and z-index */
.eva-chat-container.eva-chat-container {
    position: fixed;
    z-index: 1000;
}

/* FIX margin override */
.eva-chat-widget-icon img {
    margin-top: 0 !important;
}

.eva-chat-msg-container.eva-chat-msg-container {
    margin-top: 0 !important;
}

.eva-chat-header-links.eva-chat-header-links div {
    margin-top: 0 !important;
}

/* FIX mobile overrides */
@media (max-width: 718px) {
    .eva-chat-container.eva-chat-container {
        right: 0;
        width: 100%;
        bottom: 115px;
    }

    .eva-chat-widget-icon.eva-chat-widget-icon {
        right: 35px;
        bottom: 40px;
        height: 65px;
        width: 65px;
    }

    /* FIX mobile fonts */
    .eva-chat-msg-container.eva-chat-msg-container div {
        font-size: 0.8em;
    }

    .eva-chat-header.eva-chat-header div {
        font-size: 0.85em;
    }

    .eva-chat-input.eva-chat-input input {
        font-size: 0.65em;
    }

    .eva-chat-input.eva-chat-input div {
        font-size: 1em;
    }

    .eva-chat-hint.eva-chat-hint {
        font-size: 0.7em;
    }
}

@media (max-height: 505px) {
    .eva-chat-container.eva-chat-container {
        width: 70%;
        left: 20px;
        top: 20px;
    }

    .eva-chat-widget-icon.eva-chat-widget-icon {
        right: 35px;
        bottom: 40px;
        height: 65px;
        width: 65px;
    }
}

@media (max-height: 505px), (max-width: 718px) {
    .eva-chat-hint.eva-chat-hint {
        bottom: 42px;
        right: 120px;
    }
}


@media (max-height: 505px) and (max-width: 700px) {
    .eva-chat-container.eva-chat-container {
        width: 70%;
        left: 20px;
        top: 20px;
    }
}

@media (max-height: 505px) and (min-width: 700px) {
    .eva-chat-container.eva-chat-container {
        width: 70%;
        left: 80px;
        top: 20px;
    }
}

/* ------------------- */
/* Placement Container */
/* ------------------- */
#smo-chat-ui {
    margin: 0;
    font-family: Nunito, Roboto, "Noto Sans",
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    position: unset;
    width: unset;
    height: unset;
    bottom: unset;
    right: unset;
    display: unset;
    z-index: 9001;
}


.eva-chat-widget-icon * {
    margin-top: 0;
}

.eva-chat-widget-icon.eva-chat-widget-icon {
    position: fixed;
    z-index: 1000;
}

.eva-chat-wait-indicator.eva-chat-wait-indicator {
    margin-top: 0;
}

.eva-chat-input.eva-chat-input {
    margin-top: 0;
    border-radius: 0 0 20px 20px;
    padding-bottom: 10px;
    padding-top: 5px;
    border-top: #c1c8cc 1px solid;
    background-color: #e3e7e8;
}

.eva-chat-input.eva-chat-input > input {
}

.eva-chat-send-icon.eva-chat-send-icon {
}


/* ---- */
/* Main */
/* ---- */
.eva-chat.eva-chat {

}

.eva-chat-hint.eva-chat-hint {
    position: fixed;
    z-index: 1000;
}

.eva-chat-area.eva-chat-area {
    border-radius: 20px;
}


.eva-chat-subtext.eva-chat-subtext {

}

.eva-chat-typing-indicator.eva-chat-typing-indicator {
    margin-bottom: 15px;
}

.eva-chat-wait-indicator.eva-chat-wait-indicator {

}


/* ----------- */
/* Chat Header */
/* ----------- */
.eva-chat-header.eva-chat-header {
    border-radius: 20px 20px 0 0;
    padding-top: 25px;
}

.eva-chat-header-top.eva-chat-header-top {

}

.eva-chat-header-title.eva-chat-header-title {

}

.eva-chat-header-bottom.eva-chat-header-bottom {

}

.eva-chat-header-links.eva-chat-header-links {

}


/* ------- */
/* Overlay */
/* ------- */
.eva-chat-overlay.eva-chat-overlay {

}

.eva-chat-overlay-header.eva-chat-overlay-header {

}

.eva-chat-exit-icon.eva-chat-exit-icon {

}

.eva-chat-typing-indicator.eva-chat-typing-indicator > .css-0 > div {
}


/* -------- */
/* Messages */
/* -------- */
.eva-chat-msg-container.eva-chat-msg-container {
}

.eva-chat-sender-icon.eva-chat-sender-icon {
}

.eva-chat-incoming-wrapper.eva-chat-incoming-wrapper {

}

.eva-chat-incoming-msg.eva-chat-incoming-msg {
    border-radius: 10px;
}

.eva-chat-outgoing-msg.eva-chat-outgoing-msg {
    border-radius: 10px;
}

.eva-chat-selection.eva-chat-selection {
    border-radius: 10px;
    background-color: #B7CBD3;
    color: #374649;
}


/* --------------- */
/* Message Content */
/* --------------- */
.eva-chat-meta-wrapper.eva-chat-meta-wrapper {

}

.eva-chat-meta-info.eva-chat-meta-info {
    line-break: anywhere;
}

.eva-chat-meta-text.eva-chat-meta-text {

}

.eva-chat-meta-meta-info.eva-chat-meta-meta-info {

}

.eva-chat-url-info.eva-chat-url-info {

}

.eva-chat-email-info.eva-chat-email-info {

}

.eva-chat-phone-info.eva-chat-phone-info {

}

.eva-chat-feedback-btn.eva-chat-feedback-btn {

}

.eva-chat-fdb-icon.eva-chat-fdb-icon {
    border: none;
}

.eva-chat-fdb-wrapper.eva-chat-fdb-wrapper {
    background-color: #5a80ff;
}

.eva-chat-feedback-btn.eva-chat-feedback-btn {
    background-color: #eaeef3;
    border-radius: 20px;
    color: #374649;
}

.eva-chat-fdb-icon.eva-chat-fdb-icon:hover {
    border: none;
}