/*
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 ('#eva-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!
 */

/* theme.css should include custom properties containing colors. */

#eva-chat-ui * {
    box-sizing: content-box;
}

 #eva-chat-ui {

    /*  
    * Load Color Theme
    * Set Variables with prefix 'theme-' to change colors.
    * If variable is not set, a fallback value is used.
    */
    --main-color: var(--theme-main_color, #FEB310);
    --main-font-color: var(--theme-main_font_color, white);

    --chat-logo-background-color: var(--theme-chat_logo_background_color, var(--main-color));
    --chat-logo-color: var(--theme-chat_logo_color, var(--main-font-color));

    --header-background-color: var(--theme-header_background_color, var(--main-color));
    --header-font-color: var(--theme-header_font_color, var(--main-font-color));

    --incoming-msg-background-color: var(--theme-incoming_msg_background_color, #285AFF);
    --incoming-msg-font-color: var(--theme-incoming_msg_font_color, white);

    --outgoing-msg-background-color: var(--theme-outgoing_msg_background_color, #e2e2e2);
    --outgoing-msg-font-color: var(--theme-outgoing_msg_font_color, #000000);

    --send-icon-background-color: var(--theme-send_icon_background_color, #374649);
    --send-icon-color: var(--theme-send_icon_color, #ffffff);
    --send-icon-border-color-hover: var(--theme-send_icon_border_color_hover, #b2a6a6);

    --main-background-color: var(--theme-main_background_color, #f8f9fa);
    --input-background-color: var(--theme-input_background_color, #e3e7e8);
    --background-border-color: var(--theme-background_border_color, #c1c8cc);

    --hint-background-color: var(--theme-hint_background_color, #f5f5f5);
    --hint-font-color: var(--theme-hint_font_color, black);

    --default-fb-color: var(--theme-default_fb_color, #818181);
    --positive-fb-color: var(--theme-positive_fb_color, #00884A);
    --negative-fb-color: var(--theme-negative_fb_color, #ED0000);

    /* sth like "powered by Susi&James" Text */
    --sub-content-font-color: var(--theme-sub_content_font_color, #c3c3c3);

    /* chat locked colors */
    --input-locked-border-bottom-color: var(--theme-input_locked_border_bottom_color, whitesmoke);
    --send-icon-locked-background-color: var(--theme-send_icon_locked_background_color, #b2a6a6);
    --send-icon-locked-color: var(--theme-send_icon_locked_color, #e0e0e0);

    /* legacy */
    --incoming-msg-subcontent-background-color: var(--theme-incoming_msg_subcontent_background_color, #5a80ff);
    --outgoing-msg-subcontent-background-color: var(--theme-outgoing_msg_subcontent_background_color, #B7CBD3);
}

.eva-chat-chat-logo-wrapper.eva-chat-chat-logo-wrapper {
    background-color: var(--chat-logo-background-color);
}

.eva-chat-chat-logo-path.eva-chat-chat-logo-path {
    fill: var(--chat-logo-color);
}

/* 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 */
/* ------------------- */
#eva-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;
}

/* Force form elements to inherit font-family   */ 
/* as they do not do so by default              */
.eva-chat.eva-chat input,
.eva-chat.eva-chat label,
.eva-chat.eva-chat select,
.eva-chat.eva-chat textarea,
.eva-chat.eva-chat button,
.eva-chat.eva-chat fieldset,
.eva-chat.eva-chat legend,
.eva-chat.eva-chat datalist,
.eva-chat.eva-chat output,
.eva-chat.eva-chat option,
.eva-chat.eva-chat optgroup {
    font-family: inherit;
}

/* ----------------- */
/* customer specific */
/* ----------------- */
.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: var(--background-border-color) 1px solid;
    background-color: var(--input-background-color);
}

.eva-chat-input.eva-chat-input > input {
    border-width: 5px;

    border-bottom-color: var(--input-locked-border-bottom-color);
}

.eva-chat-input.eva-chat-input > input.unlocked {
    border-bottom-color: var(--main-color);

    /* alternative: */
    /* border-image: linear-gradient(
            90deg
            , rgba(237,114,0,1) 0%, rgba(237,0,0,1) 9%, rgba(237,0,0,1) 42%, rgba(13,110,253,1) 69%, rgba(32,201,151,1) 88%, rgba(255,193,7,1) 100%);
    border-bottom-style: solid;
    border-bottom-width: 5px;
    border-image-slice: 1; */

}

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

.eva-chat-send-icon.eva-chat-send-icon {
    background-color: var(--send-icon-background-color);
}

.eva-chat-send-icon.eva-chat-send-icon::before {
    color: var(--send-icon-color);
}

.eva-chat-send-icon.eva-chat-send-icon.locked::before {
    color: var(--send-icon-locked-color);
}

.eva-chat-send-icon.eva-chat-send-icon.unlocked.cannot-send::before {
    color: var(--send-icon-locked-color);
}

.eva-chat-send-icon.eva-chat-send-icon.locked {
    background-color: var(--send-icon-locked-background-color);
}

.eva-chat-send-icon.eva-chat-send-icon.unlocked:hover {
    cursor: pointer;
    border-color: var(--send-icon-border-color-hover);
}

.eva-chat.eva-chat .eva-chat-progress-spinner {
    color: var(--main-color);
}

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

}

.eva-chat-hint.eva-chat-hint {
    position: fixed;
    z-index: 1000;
    background-color: var(--hint-background-color);
    color: var(--hint-font-color);
}

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


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

}

.eva-chat-sub-content.eva-chat-sub-content {
    color: var(--sub-content-font-color);
}

.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;
    background-color: var(--header-background-color);
    padding-top: 25px;
}

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

}

.eva-chat-header-title.eva-chat-header-title {
    color: var(--header-font-color);
}

.eva-chat-minimize.eva-chat-minimize {
    color: var(--header-font-color);
}

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

}

.eva-chat-header-link.eva-chat-header-link {
    color: var(--header-font-color);
}


/* ------- */
/* 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 {
    background-color: var(--main-color);
}


/* -------- */
/* Messages */
/* -------- */
.eva-chat-msg-container.eva-chat-msg-container {
    background-color: var(--main-background-color);
}

.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;
    background-color: var(--incoming-msg-background-color);
    color: var(--incoming-msg-font-color);
}

.eva-chat-fb-icon-wrapper.eva-chat-fb-icon-wrapper  {
    --wrapper-default-fb-color: var(--default-fb-color);
    --wrapper-positive-fb-color: var(--positive-fb-color);
    --wrapper-negative-fb-color: var(--negative-fb-color);
}

.eva-chat-outgoing-msg.eva-chat-outgoing-msg {
    border-radius: 10px;
    background-color: var(--outgoing-msg-background-color);
    color: var(--outgoing-msg-font-color);
}

.eva-chat-selection.eva-chat-selection {
    border-radius: 10px;
    background-color: var(--outgoing-msg-background-color);
    color: var(--outgoing-msg-subcontent-background-color);
}


/* --------------- */
/* 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: var(--incoming-msg-subcontent-background-color);
}

.eva-chat-feedback-btn.eva-chat-feedback-btn {
    background-color: var(--input-background-color);
    border-radius: 20px;
    color: var(--outgoing-msg-subcontent-background-color);
}

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