/* =========================================================
   ERTUX INTERACTIVE AI WIDGET
========================================================= */

* {
    box-sizing: border-box;
}


/* =========================================================
   TEST PAGE ONLY
========================================================= */

body {
    margin: 0;
    font-family: "Space Grotesk", Arial, sans-serif;
}

.test-page {
    min-height: 100vh;
    min-height: 100dvh;

    padding: 80px;

    background: #070708;
    color: #ffffff;
}

#launchErtuxDemo {
    padding: 14px 22px;

    border: 0;
    border-radius: 10px;

    font: inherit;
    font-size: 15px;
    font-weight: 500;

    cursor: pointer;
}


/* =========================================================
   WIDGET VARIABLES
========================================================= */

.ertux-demo-panel {

    --ertux-panel-bg: #0b141a;
    --ertux-header-bg: #202c33;
    --ertux-input-area-bg: #202c33;
    --ertux-input-bg: #2a3942;

    --ertux-ai-bubble: #202c33;
    --ertux-user-bubble: #005c4b;

    --ertux-text: #e9edef;
    --ertux-text-soft: #aebac1;
    --ertux-text-muted: #8696a0;

    --ertux-green: #25d366;
    --ertux-green-dark: #071b10;

    --ertux-border: rgba(255, 255, 255, 0.08);

    color-scheme: dark;
}


/* =========================================================
   LIGHT THEME
========================================================= */

[data-bs-theme="light"] .ertux-demo-panel {

    --ertux-panel-bg: #efeae2;
    --ertux-header-bg: #f0f2f5;
    --ertux-input-area-bg: #f0f2f5;
    --ertux-input-bg: #ffffff;

    --ertux-ai-bubble: #ffffff;
    --ertux-user-bubble: #d9fdd3;

    --ertux-text: #111b21;
    --ertux-text-soft: #54656f;
    --ertux-text-muted: #667781;

    --ertux-border: rgba(17, 27, 33, 0.1);

    color-scheme: light;
}


/* =========================================================
   OVERLAY
========================================================= */

.ertux-demo-overlay {

    position: fixed;
    inset: 0;

    z-index: 99998;

    background: rgba(0, 0, 0, 0.36);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.24s ease,
        visibility 0.24s ease;
}

.ertux-demo-overlay.is-open {

    opacity: 1;
    visibility: visible;
}


/* =========================================================
   PANEL
========================================================= */

.ertux-demo-panel {

    position: fixed;

    top: 18px;
    right: 18px;
    bottom: 18px;

    width: min(
        470px,
        calc(100vw - 36px)
    );

    z-index: 99999;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background:
        var(--ertux-panel-bg);

    border:
        1px solid
        var(--ertux-border);

    border-radius: 18px;

    box-shadow:
        0 25px 90px rgba(0, 0, 0, 0.48);

    transform:
        translateX(
            calc(100% + 40px)
        );

    transition:
        transform
        0.32s
        cubic-bezier(.4, 0, .2, 1);

    font-family:
        "Space Grotesk",
        Arial,
        sans-serif;
}

.ertux-demo-panel.is-open {

    transform:
        translateX(0);
}


/* =========================================================
   HEADER
========================================================= */

.ertux-demo-header {

    position: relative;

    min-height: 76px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 10px 12px;

    background:
        var(--ertux-header-bg);

    border-bottom:
        1px solid
        var(--ertux-border);

    flex-shrink: 0;
}


/* =========================================================
   BACK BUTTON
========================================================= */

.ertux-demo-back {

    display: none;

    border: 0;
    background: transparent;

    color:
        var(--ertux-text);

    cursor: pointer;
}


/* =========================================================
   AVATAR
========================================================= */

.ertux-demo-avatar {

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background: rgba(
        139,
        92,
        246,
        0.11
    );

    border:
        1px solid
        rgba(
            139,
            92,
            246,
            0.18
        );
}

.ertux-demo-avatar-image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 7px;
}

.ertux-demo-avatar-fallback {

    font-size: 21px;

    color: #8b5cf6;
}


/* =========================================================
   HEADER INFO
========================================================= */

.ertux-demo-header-info {

    flex: 1;

    min-width: 0;
}

.ertux-demo-title {

    margin: 0;

    overflow: hidden;

    color:
        var(--ertux-text);

    font-size: 14px;
    font-weight: 700;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.ertux-demo-status {

    display: flex;
    align-items: center;

    gap: 5px;

    margin-top: 4px;

    overflow: hidden;

    color:
        var(--ertux-text-soft);

    font-size: 10.5px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.ertux-demo-status-dot {

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #25d366;

    box-shadow:
        0 0 0 3px
        rgba(37, 211, 102, 0.08);
}


/* =========================================================
   HEADER CTA
========================================================= */

.ertux-demo-header-cta {

    flex-shrink: 0;

    padding: 8px 10px;

    border:
        1px solid
        rgba(37, 211, 102, 0.32);

    border-radius: 9px;

    background:
        rgba(37, 211, 102, 0.08);

    color:
        #25d366;

    font: inherit;

    font-size: 10.5px;
    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}

.ertux-demo-header-cta:hover {

    background:
        rgba(37, 211, 102, 0.15);

    transform:
        translateY(-1px);
}


/* =========================================================
   HEADER ICON BUTTONS
========================================================= */

.ertux-demo-menu-button,
.ertux-demo-close {

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color:
        var(--ertux-text-soft);

    font: inherit;

    cursor: pointer;
}

.ertux-demo-menu-button {

    font-size: 24px;
    line-height: 1;
}

.ertux-demo-close {

    font-size: 23px;
}

.ertux-demo-menu-button:hover,
.ertux-demo-close:hover {

    background:
        rgba(127, 127, 127, 0.12);
}


/* =========================================================
   MENU
========================================================= */

.ertux-demo-menu-wrap {

    position: relative;

    flex-shrink: 0;
}

.ertux-demo-menu {

    position: absolute;

    top: calc(100% + 7px);
    right: 0;

    z-index: 20;

    min-width: 210px;

    padding: 6px;

    border:
        1px solid
        var(--ertux-border);

    border-radius: 12px;

    background:
        var(--ertux-header-bg);

    box-shadow:
        0 16px 45px
        rgba(0, 0, 0, 0.3);
}

.ertux-demo-menu[hidden] {

    display: none !important;
}

.ertux-demo-menu-item {

    display: block;

    width: 100%;

    padding: 11px 12px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color:
        var(--ertux-text);

    font: inherit;

    font-size: 12px;
    font-weight: 500;

    text-align: left;

    cursor: pointer;
}

.ertux-demo-menu-item:hover {

    background:
        rgba(127, 127, 127, 0.11);
}
/* =========================================================
   CONTACT SALES MENU ITEM
========================================================= */

.ertux-contact-button {
    color: #25d366;
    font-weight: 700;

    background:
        rgba(37, 211, 102, 0.06);
}

.ertux-contact-button:hover {
    color: #25d366;

    background:
        rgba(37, 211, 102, 0.14);
}

/* =========================================================
   CHAT AREA
========================================================= */

.ertux-demo-messages {

    position: relative;

    flex: 1;

    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 22px 17px 28px;

    background:
        var(--ertux-panel-bg);

    scroll-behavior: smooth;

    overscroll-behavior: contain;
}


/* =========================================================
   MESSAGE ROWS
========================================================= */

.ertux-message-row {

    display: flex;

    width: 100%;

    margin-bottom: 10px;
}

.ertux-message-row.ai {

    justify-content: flex-start;
}

.ertux-message-row.user {

    justify-content: flex-end;
}


/* =========================================================
   MESSAGE BUBBLES
========================================================= */

.ertux-message {

    max-width: 86%;

    padding: 9px 10px 7px;

    overflow: hidden;

    border-radius: 9px;

    color:
        var(--ertux-text);

    font-size: 13px;
    line-height: 1.48;

    word-break: break-word;
    overflow-wrap: anywhere;

    box-shadow:
        0 1px 2px
        rgba(0, 0, 0, 0.14);
}

.ertux-message-row.ai
.ertux-message {

    background:
        var(--ertux-ai-bubble);

    border-top-left-radius: 3px;
}

.ertux-message-row.user
.ertux-message {

    background:
        var(--ertux-user-bubble);

    border-top-right-radius: 3px;
}


/* =========================================================
   MESSAGE TEXT
========================================================= */

.ertux-message-text {

    white-space: pre-wrap;
}

.ertux-message-link {

    color: #53bdeb;

    text-decoration: none;

    overflow-wrap: anywhere;
}

.ertux-message-link:hover {

    text-decoration: underline;
}


/* =========================================================
   MESSAGE TIME
========================================================= */

.ertux-message-time {

    display: block;

    margin-top: 6px;

    color:
        var(--ertux-text-muted);

    font-size: 9px;

    text-align: right;
}


/* =========================================================
   IMAGES
========================================================= */

.ertux-message-image {

    display: block;

    width: 100%;

    max-height: 320px;

    margin-bottom: 9px;

    border-radius: 7px;

    object-fit: cover;

    cursor: zoom-in;
}


/* =========================================================
   TYPING
========================================================= */

.ertux-typing {

    display: flex;
    align-items: center;

    gap: 4px;

    min-width: 52px;

    padding: 12px 14px;

    border-radius: 9px;

    background:
        var(--ertux-ai-bubble);
}

.ertux-typing span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--ertux-text-muted);

    animation:
        ertuxTyping
        1.2s
        infinite
        ease-in-out;
}

.ertux-typing span:nth-child(2) {

    animation-delay: .15s;
}

.ertux-typing span:nth-child(3) {

    animation-delay: .3s;
}

@keyframes ertuxTyping {

    0%,
    60%,
    100% {

        transform:
            translateY(0);

        opacity: .4;
    }

    30% {

        transform:
            translateY(-4px);

        opacity: 1;
    }

}


/* =========================================================
   INPUT
========================================================= */

.ertux-demo-input-area {

    display: flex;
    align-items: flex-end;

    gap: 9px;

    padding: 10px 11px;

    background:
        var(--ertux-input-area-bg);

    border-top:
        1px solid
        var(--ertux-border);

    flex-shrink: 0;
}

.ertux-demo-input {

    flex: 1;

    min-height: 44px;
    max-height: 120px;

    resize: none;

    padding: 12px 13px;

    border: 0;
    outline: none;

    border-radius: 11px;

    background:
        var(--ertux-input-bg);

    color:
        var(--ertux-text);

    font: inherit;
    font-size: 13px;
    line-height: 1.4;
}

.ertux-demo-input::placeholder {

    color:
        var(--ertux-text-muted);
}

.ertux-demo-send {

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    border: 0;
    border-radius: 50%;

    background:
        #00a884;

    color: #ffffff;

    font-size: 19px;

    cursor: pointer;

    transition:
        opacity .15s ease,
        transform .15s ease;
}

.ertux-demo-send:hover {

    transform:
        scale(1.03);
}

.ertux-demo-send:disabled {

    opacity: .5;

    cursor: not-allowed;

    transform: none;
}

.ertux-demo-input:disabled {

    opacity: .82;
}


/* =========================================================
   SALES CTA
========================================================= */

.ertux-sales-cta-row {

    display: flex;

    width: 100%;

    margin: 17px 0;
}

.ertux-sales-cta {

    width: 100%;

    padding: 16px;

    border:
        1px solid
        rgba(37, 211, 102, .24);

    border-radius: 14px;

    background:
        var(--ertux-ai-bubble);

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, .14);
}

.ertux-sales-cta-title {

    margin-bottom: 5px;

    color:
        var(--ertux-text);

    font-size: 14px;
    font-weight: 700;
}

.ertux-sales-cta-text {

    margin-bottom: 13px;

    color:
        var(--ertux-text-soft);

    font-size: 12px;
    line-height: 1.45;
}

.ertux-sales-cta-button {

    width: 100%;

    min-height: 44px;

    padding: 11px 14px;

    border: 0;
    border-radius: 10px;

    background: #25d366;

    color: #071b10;

    font: inherit;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform .15s ease,
        filter .15s ease;
}

.ertux-sales-cta-button:hover {

    transform:
        translateY(-1px);

    filter:
        brightness(1.03);
}

.ertux-sales-cta-subtext {

    margin-top: 8px;

    color:
        var(--ertux-text-muted);

    font-size: 10px;

    text-align: center;
}


/* =========================================================
   ERROR / RETRY
========================================================= */

.ertux-error-message {

    border:
        1px solid
        rgba(239, 68, 68, .18);
}

.ertux-retry-button {

    display: inline-flex;

    margin-top: 10px;

    padding: 7px 10px;

    border:
        1px solid
        rgba(37, 211, 102, .3);

    border-radius: 8px;

    background:
        rgba(37, 211, 102, .08);

    color: #25d366;

    font: inherit;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}


/* =========================================================
   RESTART CONFIRM
========================================================= */

.ertux-confirm-overlay {

    position: absolute;

    inset: 0;

    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    background:
        rgba(0, 0, 0, .52);

    backdrop-filter:
        blur(3px);
}

.ertux-confirm-overlay[hidden] {

    display: none !important;
}

.ertux-confirm-card {

    width: min(
        330px,
        100%
    );

    padding: 20px;

    border:
        1px solid
        var(--ertux-border);

    border-radius: 15px;

    background:
        var(--ertux-header-bg);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, .35);
}

.ertux-confirm-title {

    margin-bottom: 7px;

    color:
        var(--ertux-text);

    font-size: 15px;
    font-weight: 700;
}

.ertux-confirm-text {

    color:
        var(--ertux-text-soft);

    font-size: 12px;
    line-height: 1.5;
}

.ertux-confirm-actions {

    display: flex;

    justify-content: flex-end;

    gap: 8px;

    margin-top: 18px;
}

.ertux-confirm-cancel,
.ertux-confirm-restart {

    padding: 9px 12px;

    border-radius: 9px;

    font: inherit;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.ertux-confirm-cancel {

    border:
        1px solid
        var(--ertux-border);

    background: transparent;

    color:
        var(--ertux-text);
}

.ertux-confirm-restart {

    border: 0;

    background: #25d366;

    color: #071b10;
}


/* =========================================================
   IMAGE LIGHTBOX
========================================================= */

.ertux-image-lightbox {

    position: fixed;

    inset: 0;

    z-index: 100001;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    background:
        rgba(0, 0, 0, .9);

    backdrop-filter:
        blur(5px);
}

.ertux-image-lightbox[hidden] {

    display: none !important;
}

.ertux-lightbox-image {

    display: block;

    max-width: min(
        1100px,
        94vw
    );

    max-height: 90vh;

    border-radius: 12px;

    object-fit: contain;

    box-shadow:
        0 24px 80px
        rgba(0, 0, 0, .6);
}

.ertux-lightbox-close {

    position: fixed;

    top: 18px;
    right: 22px;

    width: 44px;
    height: 44px;

    border: 0;
    border-radius: 50%;

    background:
        rgba(255, 255, 255, .09);

    color: #ffffff;

    font-size: 28px;

    cursor: pointer;
}


/* =========================================================
   RTL
========================================================= */

.ertux-demo-panel[dir="rtl"]
.ertux-demo-header {

    direction: rtl;
}

.ertux-demo-panel[dir="rtl"]
.ertux-demo-menu {

    right: auto;
    left: 0;
}

.ertux-demo-panel[dir="rtl"]
.ertux-demo-menu-item {

    text-align: right;
}

.ertux-demo-panel[dir="rtl"]
.ertux-message-time {

    text-align: left;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .ertux-demo-overlay {

        background: transparent;
    }


    .ertux-demo-panel {

        top:
            var(
                --ertux-visual-top,
                0px
            );

        right: 0;
        bottom: auto;
        left: 0;

        width: 100vw;

        height:
            var(
                --ertux-visual-height,
                100dvh
            );

        max-height:
            var(
                --ertux-visual-height,
                100dvh
            );

        border: 0;
        border-radius: 0;

        transform:
            translateX(100%);
    }


    .ertux-demo-panel.is-open {

        transform:
            translateX(0);
    }


    .ertux-demo-header {

        position: sticky;

        top: 0;

        z-index: 30;

        min-height: 66px;

        padding:
            max(
                7px,
                env(safe-area-inset-top)
            )
            8px
            7px;

        gap: 5px;

        flex-shrink: 0;
    }


    .ertux-demo-back {

        width: 34px;
        height: 38px;

        flex: 0 0 34px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        font-size: 29px;
    }


    .ertux-demo-close {

        display: none;
    }


    .ertux-demo-avatar {

        width: 39px;
        height: 39px;

        flex-basis: 39px;
    }


    .ertux-demo-avatar-image {

        padding: 6px;
    }


    .ertux-demo-title {

        font-size: 12.5px;
    }


    .ertux-demo-status {

        margin-top: 2px;

        font-size: 9px;
    }


    .ertux-demo-header-cta {

        max-width: 88px;

        padding: 7px 8px;

        overflow: hidden;

        font-size: 9px;

        text-overflow: ellipsis;
    }


    .ertux-demo-menu-button {

        width: 32px;
        height: 36px;

        flex-basis: 32px;
    }


    .ertux-demo-messages {

        padding:
            15px
            10px
            22px;
    }


    .ertux-message {

        max-width: 89%;

        font-size: 13px;
    }


    .ertux-demo-input-area {

        position: relative;

        z-index: 30;

        flex-shrink: 0;

        padding:
            9px
            9px
            max(
                9px,
                env(safe-area-inset-bottom)
            );
    }


    .ertux-demo-panel.is-keyboard-open
    .ertux-demo-input-area {

        padding-bottom: 2px;
    }


    .ertux-demo-input {

        font-size: 16px;
    }


    .ertux-image-lightbox {

        padding: 0;
    }


    .ertux-lightbox-image {

        max-width: 100vw;
        max-height: 100dvh;

        border-radius: 0;
    }


    .ertux-lightbox-close {

        top:
            max(
                10px,
                env(safe-area-inset-top)
            );

        right: 12px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .ertux-demo-header-cta {

        max-width: 72px;

        padding-left: 6px;
        padding-right: 6px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    .ertux-demo-panel,
    .ertux-demo-overlay,
    .ertux-demo-send,
    .ertux-demo-header-cta {

        transition: none !important;
    }

}