.datis-support-chat,
.datis-support-chat button,
.datis-support-chat textarea {
    box-sizing: border-box;
    font-family: var(--datis-font-family, inherit);
}
.woocommerce-account .datis-support-chat,
.woocommerce-account .datis-support-chat button,
.woocommerce-account .datis-support-chat textarea {
    font-family: var(--datis-account-font-family, var(--datis-font-family, inherit));
}
.datis-support-chat {
    --datis-chat-primary: var(--datis-primary-color, #083d59);
    --datis-chat-accent: var(--datis-secondary-color, #ffa84b);
    --datis-chat-text: var(--datis-body-text-color, #516176);
    --datis-chat-header-bg: var(--datis-chat-primary);
    --datis-chat-header-text: #fff;
    --datis-chat-messages-bg: #f7f9fb;
    --datis-chat-window-border: #e5eaf0;
    --datis-chat-agent-bg: #fff;
    --datis-chat-agent-text: #35475f;
    --datis-chat-visitor-bg: #fff;
    --datis-chat-visitor-text: #35475f;
    --datis-chat-input-bg: #f7f9fb;
    --datis-chat-input-border: #e4e9ef;
    --datis-chat-send-bg: var(--datis-chat-primary);
    --datis-chat-send-text: #fff;
    --datis-chat-quick-bg: #f5f7fa;
    --datis-chat-quick-text: var(--datis-chat-primary);
    --datis-chat-window-width: 390px;
    --datis-chat-window-max-height: 610px;
    --datis-chat-window-border-width: 1px;
    --datis-chat-window-radius: 25px;
    --datis-chat-launcher-radius: 20px;
    --datis-chat-message-radius: 18px;
    --datis-chat-input-radius: 18px;
    --datis-chat-send-radius: 15px;
    --datis-chat-header-title-size: 15px;
    --datis-chat-message-font-size: 14px;
    --datis-chat-input-font-size: 14px;
    --datis-chat-shadow-alpha: .17;
    position: fixed;
    z-index: 9998;
    bottom: var(--datis-chat-bottom, 25px);
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 13px;
    color: var(--datis-chat-text);
    direction: rtl;
    text-align: right;
}
.datis-support-chat.is-left { left: var(--datis-chat-side, 25px); align-items: flex-start; }
.datis-support-chat.is-right { right: var(--datis-chat-side, 25px); align-items: flex-end; }
.datis-support-chat [hidden] { display: none !important; }
.datis-chat-launcher {
    position: fixed;
    bottom: var(--datis-chat-bottom, 25px);
    display: flex;
    width: var(--datis-chat-button-size, 62px);
    height: var(--datis-chat-button-size, 62px);
    min-width: var(--datis-chat-button-size, 62px);
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--datis-chat-button-size, 62px);
    border: 1px solid color-mix(in srgb, var(--datis-chat-button-bg, var(--datis-chat-primary)) 82%, #fff);
    border-radius: var(--datis-chat-launcher-radius);
    outline: 0;
    background: var(--datis-chat-button-bg, var(--datis-chat-primary));
    color: var(--datis-chat-button-text, #fff);
    box-shadow: 0 13px 34px color-mix(in srgb, var(--datis-chat-button-bg, var(--datis-chat-primary)) 26%, transparent), 0 4px 12px rgb(14 32 52 / 8%);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.datis-support-chat.is-left .datis-chat-launcher,
.datis-support-chat.is-left .datis-chat-window { right: auto; left: var(--datis-chat-side, 25px); }
.datis-support-chat.is-right .datis-chat-launcher,
.datis-support-chat.is-right .datis-chat-window { right: var(--datis-chat-side, 25px); left: auto; }
.datis-chat-launcher:hover { transform: translateY(-2px); filter: saturate(1.05); box-shadow: 0 17px 40px color-mix(in srgb, var(--datis-chat-button-bg, var(--datis-chat-primary)) 30%, transparent), 0 5px 14px rgb(14 32 52 / 10%); }
.datis-chat-launcher:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--datis-chat-primary) 20%, transparent), 0 13px 34px color-mix(in srgb, var(--datis-chat-button-bg, var(--datis-chat-primary)) 26%, transparent); }
.datis-support-chat.is-open .datis-chat-launcher { transform: translateY(-1px) scale(.97); }
.datis-chat-launcher__icon { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; }
.datis-chat-launcher__icon > svg,
.datis-chat-launcher__icon > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.datis-chat-launcher__label { font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; }
.datis-support-chat.is-button-icon-text .datis-chat-launcher { width: auto; min-width: var(--datis-chat-button-size, 62px); padding: 0 18px; gap: 9px; }
.datis-chat-unread {
    position: absolute;
    top: -5px;
    inset-inline-end: -5px;
    display: grid;
    min-width: 23px;
    height: 23px;
    padding: 0 5px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 20px;
    background: #e6515d;
    color: #fff;
    box-shadow: 0 4px 12px rgb(176 44 59 / 24%);
    font-size: 10px;
    font-weight: 700;
}
.datis-chat-window {
    position: fixed;
    bottom: calc(var(--datis-chat-bottom, 25px) + var(--datis-chat-button-size, 62px) + 13px);
    display: flex;
    width: min(var(--datis-chat-window-width), calc(100vw - 34px));
    max-height: min(var(--datis-chat-window-max-height), calc(100dvh - 125px));
    overflow: hidden;
    flex-direction: column;
    border: var(--datis-chat-window-border-width) solid var(--datis-chat-window-border);
    border-radius: var(--datis-chat-window-radius);
    background: #fff;
    box-shadow: 0 30px 80px rgb(15 30 52 / var(--datis-chat-shadow-alpha)), 0 7px 20px rgb(15 30 52 / 6%);
    isolation: isolate;
}
.datis-chat-header {
    position: relative;
    display: flex;
    min-height: 88px;
    align-items: center;
    gap: 13px;
    overflow: hidden;
    padding: 17px 18px;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    background: linear-gradient(135deg, var(--datis-chat-header-bg), color-mix(in srgb, var(--datis-chat-header-bg) 84%, #1d2b3d));
    color: var(--datis-chat-header-text);
}
.datis-chat-header::after {
    position: absolute;
    top: -46px;
    inset-inline-end: -38px;
    width: 130px;
    height: 130px;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 50%;
    background: rgb(255 255 255 / 4%);
    content: "";
    pointer-events: none;
}
.datis-chat-avatar {
    position: relative;
    z-index: 1;
    display: grid;
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 16px;
    background: rgb(255 255 255 / 14%);
    color: var(--datis-chat-header-text);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%);
}
.datis-chat-avatar svg { width: 25px; height: 25px; }
.datis-chat-header > div { position: relative; z-index: 1; min-width: 0; flex: 1; }
.datis-chat-header strong,
.datis-chat-header small { display: block; }
.datis-chat-header strong { overflow: hidden; color: var(--datis-chat-header-text); font-size: var(--datis-chat-header-title-size); font-weight: 750; line-height: 1.55; text-overflow: ellipsis; white-space: nowrap; }
.datis-chat-header small { display: flex; align-items: center; gap: 7px; margin-top: 4px; color: color-mix(in srgb, var(--datis-chat-header-text) 78%, transparent); font-size: 11.5px; line-height: 1.7; }
.datis-chat-header small i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--datis-chat-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--datis-chat-accent) 20%, transparent); }
.datis-chat-minimize {
    position: relative;
    z-index: 1;
    display: grid;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 11px;
    outline: 0;
    background: rgb(255 255 255 / 12%);
    color: var(--datis-chat-header-text);
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.datis-chat-minimize:hover { background: rgb(255 255 255 / 20%); transform: translateY(-1px); }
.datis-chat-minimize:focus-visible { box-shadow: 0 0 0 3px rgb(255 255 255 / 16%); }
.datis-chat-minimize svg { width: 19px; height: 19px; }
.datis-chat-messages {
    display: flex;
    min-height: 200px;
    max-height: 340px;
    overflow-y: auto;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: 21px 16px;
    background: var(--datis-chat-messages-bg);
    scrollbar-color: color-mix(in srgb, var(--datis-chat-primary) 18%, #fff) transparent;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}
.datis-chat-message { display: flex; width: 100%; min-width: 0; flex: 0 0 auto; align-items: flex-end; justify-content: flex-start; flex-direction: row; gap: 8px; direction: ltr; }
.datis-chat-message.is-visitor { flex-direction: row-reverse; }
.datis-chat-message__avatar {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--datis-chat-primary) 13%, #fff);
    border-radius: 12px;
    background: #fff;
    color: var(--datis-chat-primary);
    box-shadow: 0 5px 14px rgb(28 49 72 / 5%);
}
.datis-chat-message__avatar svg { width: 19px; height: 19px; }
.datis-chat-message.is-agent .datis-chat-message__avatar,
.datis-chat-message.is-assistant .datis-chat-message__avatar { border-color: var(--datis-chat-primary); background: var(--datis-chat-primary); color: #fff; }
.datis-chat-bubble {
    box-sizing: border-box;
    min-width: 0;
    max-width: calc(100% - 42px);
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--datis-chat-primary) 9%, #fff);
    border-radius: var(--datis-chat-message-radius) var(--datis-chat-message-radius) var(--datis-chat-message-radius) max(5px, calc(var(--datis-chat-message-radius) * .4));
    background: var(--datis-chat-agent-bg);
    color: var(--datis-chat-agent-text);
    box-shadow: 0 7px 20px rgb(28 49 72 / 5%);
    direction: rtl;
    text-align: right;
}
.datis-chat-message.is-visitor .datis-chat-bubble {
    border-color: color-mix(in srgb, var(--datis-chat-primary) 14%, #fff);
    border-radius: var(--datis-chat-message-radius) var(--datis-chat-message-radius) max(5px, calc(var(--datis-chat-message-radius) * .4)) var(--datis-chat-message-radius);
    background: var(--datis-chat-visitor-bg);
    color: var(--datis-chat-visitor-text);
}
.datis-chat-bubble__meta { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 5px 15px; margin-bottom: 8px; }
.datis-chat-bubble__meta > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.datis-chat-bubble__meta strong { overflow: hidden; color: var(--datis-chat-primary); font-size: 12px; font-weight: 750; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }
.datis-chat-bubble__meta small { display: block; color: color-mix(in srgb, var(--datis-chat-text) 74%, #fff); font-size: 10.5px; line-height: 1.6; }
.datis-chat-bubble__meta time { display: inline-flex; align-items: center; gap: 5px; color: color-mix(in srgb, var(--datis-chat-text) 68%, #fff); font-size: 10px; line-height: 1.6; white-space: nowrap; }
.datis-chat-bubble__meta time svg { width: 13px; height: 13px; flex: 0 0 13px; }
.datis-chat-bubble p { margin: 0; color: currentColor; font-size: var(--datis-chat-message-font-size); line-height: 1.95; overflow-wrap: anywhere; unicode-bidi: plaintext; white-space: pre-wrap; }
.datis-chat-quick {
    display: flex;
    overflow-x: auto;
    gap: 7px;
    padding: 11px 13px 4px;
    border-top: 1px solid color-mix(in srgb, var(--datis-chat-primary) 6%, #fff);
    background: #fff;
    scrollbar-width: none;
}
.datis-chat-quick:empty { display: none; }
.datis-chat-quick::-webkit-scrollbar { display: none; }
.datis-chat-quick button {
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid color-mix(in srgb, var(--datis-chat-primary) 15%, #fff);
    border-radius: 13px;
    outline: 0;
    background: var(--datis-chat-quick-bg);
    color: var(--datis-chat-quick-text);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.datis-chat-quick button:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--datis-chat-primary) 28%, #fff); }
.datis-chat-quick button:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--datis-chat-primary) 10%, transparent); }
.datis-chat-notice { margin: 9px 14px 0; padding: 8px 10px; border-radius: 11px; background: color-mix(in srgb, var(--datis-chat-primary) 4%, #fff); color: var(--datis-chat-text); font-size: 11.5px; line-height: 1.8; }
.datis-chat-notice.is-error { background: #fff2f3; color: #b73b4a; }
.datis-chat-composer { display: flex; min-height: 72px; align-items: flex-end; gap: 9px; padding: 12px 13px; border-top: 1px solid color-mix(in srgb, var(--datis-chat-primary) 7%, #fff); background: #fff; }
.datis-chat-composer textarea {
    min-height: 42px;
    max-height: 102px;
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--datis-chat-input-border);
    border-radius: var(--datis-chat-input-radius);
    outline: 0;
    background: var(--datis-chat-input-bg);
    color: var(--datis-chat-text);
    box-shadow: none;
    font-size: var(--datis-chat-input-font-size);
    line-height: 1.7;
    resize: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.datis-chat-composer textarea::placeholder { color: color-mix(in srgb, var(--datis-chat-text) 58%, #fff); }
.datis-chat-composer textarea:focus { border-color: color-mix(in srgb, var(--datis-chat-primary) 40%, #fff); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--datis-chat-primary) 7%, transparent); }
.datis-chat-composer button {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 0;
    border-radius: var(--datis-chat-send-radius);
    outline: 0;
    background: var(--datis-chat-send-bg);
    color: var(--datis-chat-send-text);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--datis-chat-send-bg) 20%, transparent);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.datis-chat-composer button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px color-mix(in srgb, var(--datis-chat-send-bg) 24%, transparent); }
.datis-chat-composer button:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--datis-chat-send-bg) 13%, transparent), 0 8px 18px color-mix(in srgb, var(--datis-chat-send-bg) 20%, transparent); }
.datis-chat-composer button svg { width: 20px; height: 20px; }
.datis-chat-composer button:disabled { cursor: wait; opacity: .5; }
.datis-chat-credit { padding: 1px 12px 10px; background: #fff; color: color-mix(in srgb, var(--datis-chat-text) 62%, #fff); font-size: 10.5px; text-align: center; }
@media (max-width: 575.98px) {
    .datis-support-chat { bottom: 15px; }
    .datis-support-chat.is-left { left: 13px; }
    .datis-support-chat.is-right { right: 13px; }
    .datis-chat-launcher { bottom: 15px; }
    .datis-support-chat.is-left .datis-chat-launcher,
    .datis-support-chat.is-left .datis-chat-window { left: 13px; }
    .datis-support-chat.is-right .datis-chat-launcher,
    .datis-support-chat.is-right .datis-chat-window { right: 13px; }
    .datis-chat-window { bottom: calc(28px + var(--datis-chat-button-size, 62px)); width: min(var(--datis-chat-window-width), calc(100vw - 26px)); max-height: calc(100dvh - 105px); border-radius: min(var(--datis-chat-window-radius), 22px); }
    .datis-chat-header { min-height: 82px; padding: 15px 15px; }
    .datis-chat-messages { max-height: min(345px, calc(100dvh - 285px)); padding: 18px 13px; }
    .datis-chat-message__avatar { width: 31px; height: 31px; flex-basis: 31px; }
    .datis-chat-bubble { max-width: calc(100% - 39px); padding: 11px 12px; }
    .datis-chat-bubble__meta { flex-direction: column; gap: 4px; }
    .datis-chat-composer { padding: 10px 11px; }
    .datis-chat-hide-mobile { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .datis-support-chat *,
    .datis-support-chat *::before,
    .datis-support-chat *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.datis-support-chat[dir="rtl"] .datis-chat-composer button svg { transform: scaleX(-1); }